/* css/avisillo.css */

#avisillo-view .avisillo-panel,
#avisillo-view .avisillo-tab-content { display: none; animation: fadeInAvisillo 0.3s ease-in-out; }
#avisillo-view .avisillo-panel.active,
#avisillo-view .avisillo-tab-content.active { display: block; }

@keyframes fadeInAvisillo { 
    from { opacity: 0; transform: translateY(10px); } 
    to { opacity: 1; transform: translateY(0); } 
}

/* === PESTAÑAS LOBBY === */
.avisillo-tabs { display: flex; width: 100%; background: #fff; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); overflow: hidden; margin-bottom: 20px; border: 1px solid #eee; }
.avisillo-tab { flex: 1; padding: 15px 5px; border: none; background: transparent; color: #666; font-weight: 700; font-size: 0.9rem; cursor: pointer; transition: 0.2s; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.avisillo-tab i { font-size: 1.2rem; }
.avisillo-tab.active { background: #2d5a27; color: #fff; }

/* === TABLAS LOBBY === */
.avisillo-table { width: 100%; border-collapse: collapse; background: #fff; }
.avisillo-table th { background: #2d5a27; color: #fff; padding: 12px 15px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px; }
.avisillo-table td { padding: 15px; border-bottom: 1px solid #f1f1f1; font-size: 0.95rem; vertical-align: middle; }
.avisillo-table tr:last-child td { border-bottom: none; }
.avisillo-table tr:hover td { background: #fafafa; }
.avisillo-fila-perfil { cursor: pointer; transition: background 0.2s; }
.avisillo-medal { font-size: 1.2rem; }
.avisillo-tiempo-verde { color: #2d5a27; font-weight: 800; }
.avisillo-tiempo-naranja { color: #e67e22; font-weight: 800; }
.avisillo-reglas-content.active { display: block !important; }

/* === MAGIA VISUAL: LA VENTANA REALISTA === */
.avisillo-ventana {
    width: 100%; max-width: 600px; margin: 0 auto; aspect-ratio: 4/3;
    position: relative; border: 10px solid #4a3320; border-radius: 6px;
    background: #111; overflow: hidden; 
    box-shadow: 0 8px 25px rgba(0,0,0,0.4), inset 0 0 10px rgba(0,0,0,0.8);
    box-sizing: border-box; cursor: pointer;
}
/* Sub-marco interno para profundidad */
.avisillo-ventana::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    border: 3px solid #2d1c10; box-sizing: border-box; z-index: 6; pointer-events: none;
}

/* Barra Metálica de la cortina (NOVEDAD) */
.avisillo-barra-metal {
    position: absolute; top: 12px; left: 0; width: 100%; height: 10px;
    background: linear-gradient(to bottom, #ecf0f1 0%, #bdc3c7 40%, #7f8c8d 100%);
    box-shadow: 0 5px 10px rgba(0,0,0,0.6); z-index: 8;
}

/* Cruceta de madera fina */
.avisillo-marco-centro {
    position: absolute; top: 0; left: 50%; width: 6px; height: 100%;
    background: linear-gradient(to right, #382415 0%, #4a3320 50%, #382415 100%);
    transform: translateX(-50%); z-index: 5; pointer-events: none;
    box-shadow: 0 0 10px rgba(0,0,0,0.8); border-left: 1px solid #2d1c10; border-right: 1px solid #2d1c10;
}
.avisillo-marco-horizontal {
    position: absolute; top: 50%; left: 0; width: 100%; height: 6px;
    background: linear-gradient(to bottom, #382415 0%, #4a3320 50%, #382415 100%);
    transform: translateY(-50%); z-index: 4; pointer-events: none;
    border-top: 1px solid #2d1c10; border-bottom: 1px solid #2d1c10;
}

/* Picaportes finos */
.avisillo-picaporte {
    position: absolute; top: 52%; width: 4px; height: 32px;
    background: linear-gradient(to bottom, #d4ac0d, #f1c40f, #d4ac0d);
    border-radius: 2px; box-shadow: 1px 2px 4px rgba(0,0,0,0.8);
}
.avisillo-picaporte.izq { right: 100%; margin-right: 2px; transform: translateY(-50%); }
.avisillo-picaporte.der { left: 100%; margin-left: 2px; transform: translateY(-50%); }

/* Imagen de fondo con profundidad */
.avisillo-img-fondo {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 1; transition: transform 0.8s ease, filter 0.8s ease; 
    filter: brightness(0.95);
}
.avisillo-ventana.abierta .avisillo-img-fondo { 
    filter: brightness(1.05); 
    transform: scale(1.02); 
    box-shadow: inset 0 0 15px rgba(0,0,0,0.6); 
}

/* === VISILLOS REALISTAS CON ANIMACIÓN "FRUNCIDO" (Elástico) === */
.avisillo-cortina {
    position: absolute; top: 5px; 
    width: 50%; height: calc(100% - 5px);
    background-color: rgba(250, 248, 245, 0.5); /* Tela semi-transparente */
    
    /* Patrón de rayas rojas y sombras de tela */
    background-image: 
        repeating-linear-gradient(to right, transparent, transparent 28px, rgba(227, 24, 33, 0.6) 29px, rgba(227, 24, 33, 0.6) 30px),
        linear-gradient(to right, rgba(0,0,0,0.15) 0%, transparent 20%, rgba(255,255,255,0.4) 50%, transparent 80%, rgba(0,0,0,0.15) 100%);
    background-size: 30px 100%, 50px 100%;
    
    z-index: 10; 
    /* La magia: animamos el WIDTH en vez del scale para que los anillos no se deformen, 
       y el border-radius para crear la curva inferior del alzapaños */
    transition: width 1.2s cubic-bezier(0.25, 0.1, 0.25, 1), background-size 1.2s ease, border-radius 1.2s ease, box-shadow 1.2s ease;
    box-shadow: inset 5px 0 15px rgba(255,255,255,0.3), 0 0 10px rgba(0,0,0,0.3);
    
    backdrop-filter: blur(5px); 
    -webkit-backdrop-filter: blur(5px);
}

/* Anillas / Ollaos colgando de la barra */
.avisillo-cortina::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 25px;
    background-image: radial-gradient(circle at 15px 12px, transparent 4px, #ecf0f1 5px, #95a5a6 7px, transparent 8px);
    background-size: 30px 25px; background-repeat: repeat-x;
}

.avisillo-cortina.izq { left: 0; border-right: 1px solid rgba(0,0,0,0.05); }
.avisillo-cortina.der { right: 0; border-left: 1px solid rgba(0,0,0,0.05); }

/* === AL ABRIR LA VENTANA === */
.avisillo-ventana.abierta .avisillo-cortina { 
    backdrop-filter: blur(0px); 
    -webkit-backdrop-filter: blur(0px); 
    /* El visillo se encoje y las rayas se aprietan simulando los pliegues */
    width: 15%;
    background-size: 10px 100%, 20px 100%;
}
/* Efecto de curva en la parte inferior simulando el "alzapaños" */
.avisillo-ventana.abierta .avisillo-cortina.izq { 
    border-bottom-right-radius: 40px 60vh; 
    border-right: 2px solid rgba(227, 24, 33, 0.4); 
    box-shadow: 10px 0 25px rgba(0,0,0,0.8), inset -5px 0 10px rgba(0,0,0,0.3);
}
.avisillo-ventana.abierta .avisillo-cortina.der { 
    border-bottom-left-radius: 40px 60vh;
    border-left: 2px solid rgba(227, 24, 33, 0.4);
    box-shadow: -10px 0 25px rgba(0,0,0,0.8), inset 5px 0 10px rgba(0,0,0,0.3);
}


.avisillo-btn-start-ventana {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: #e67e22; color: #fff; padding: 12px 25px; font-weight: 800;
    border-radius: 50px; font-family: 'Inter', sans-serif; font-size: 1rem;
    z-index: 20; box-shadow: 0 4px 10px rgba(230,126,34,0.5); border: 2px solid #fff;
    cursor: pointer; animation: pulsoMano 1.5s infinite; white-space: nowrap;
}
@keyframes pulsoMano { 
    0% { transform: translate(-50%, -50%) scale(1); } 
    50% { transform: translate(-50%, -50%) scale(1.08); } 
    100% { transform: translate(-50%, -50%) scale(1); } 
}

/* === BOTONES OPCIONES (COMPACTOS Y TÁCTILES) === */
.avisillo-opciones-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 15px;
    max-width: 600px; margin-left: auto; margin-right: auto;
}
.avisillo-btn-opcion {
    background: #ffffff; border: 1px solid #dcdde1; border-bottom: 3px solid #bdc3c7;
    border-radius: 10px; padding: 8px 5px; font-family: 'Inter', sans-serif;
    font-weight: 800; color: #2c3e50; cursor: pointer; transition: all 0.1s;
    font-size: 0.9rem; display: flex; flex-direction: column; align-items: center;
    justify-content: center; text-align: center; min-height: 55px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}
.avisillo-btn-opcion span { font-size: 0.65rem; color: #7f8c8d; font-weight: 700; text-transform: uppercase; margin-top: 2px; }
.avisillo-btn-opcion:active:not(:disabled) { transform: translateY(3px); border-bottom-width: 0px; margin-bottom: 3px; }
.avisillo-btn-opcion:disabled { cursor: not-allowed; opacity: 0.9; }

.avisillo-btn-opcion.error { background: #e74c3c; color: #fff; border-color: #c0392b; animation: sacudida 0.3s; border-bottom-color: #922b21; }
.avisillo-btn-opcion.error span { color: #f5b7b1; }
.avisillo-btn-opcion.success { background: #2ecc71; color: #fff; border-color: #27ae60; border-bottom-color: #1e8449; }
.avisillo-btn-opcion.success span { color: #abebc6; }

@keyframes sacudida {
    0% { transform: translateX(0); } 25% { transform: translateX(-4px); }
    50% { transform: translateX(4px); } 75% { transform: translateX(-4px); }
    100% { transform: translateX(0); }
}

/* EFECTO DE PENALIZACIÓN FLOTANTE */
.avisillo-penalizacion-anim {
    position: absolute; color: #e31821; font-weight: 900; font-size: 2.5rem; text-shadow: 2px 2px 0px #fff;
    animation: flotarPenalizacion 1s forwards; z-index: 1000; pointer-events: none;
}
@keyframes flotarPenalizacion {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-50px) scale(1.3); }
}

/* === EXTREMO RESPONSIVE (Para que quepan los 6 en móviles pequeños) === */
@media (max-width: 480px) {
    .avisillo-ventana { border-width: 8px; }
    .avisillo-opciones-grid { gap: 6px; margin-top: 10px; }
    .avisillo-btn-opcion {
        padding: 6px 4px;
        font-size: 0.8rem;
        min-height: 48px;
        border-radius: 8px;
        border-bottom-width: 2px;
    }
    .avisillo-btn-opcion span { font-size: 0.6rem; }
    .avisillo-btn-opcion:active:not(:disabled) { transform: translateY(2px); margin-bottom: 2px; }
}