/* ==================================
   LA ÓXIDO - CONTROL + OVERLAY + PÚBLICO
   Identidad: negro, gris oscuro, naranja, ámbar
   (paleta inspirada en su logo de señal de riesgo)
   ================================== */


:root{

    --negro:#0A0A0A;
    --gris-oscuro:#161514;
    --gris-medio:#232120;
    --gris-claro:#333029;
    --borde:#38352d;

    --naranja:#F97316;
    --naranja-rgb:249,115,22;
    --naranja-fuerte:#EA580C;
    --ambar:#FBBF24;
    --ambar-rgb:251,191,36;
    --oxido:#B33A2E;
    --oxido-fuerte:#8F2C22;

    --texto:#F2EDE4;
    --texto-tenue:#A79E8F;

    --fuente-display:'Bebas Neue', 'Arial Narrow', sans-serif;
    --fuente-texto:'Inter', Arial, Helvetica, sans-serif;

    --franja:repeating-linear-gradient(
        135deg,
        var(--ambar) 0px,
        var(--ambar) 18px,
        var(--negro) 18px,
        var(--negro) 36px
    );

}



*{
    box-sizing:border-box;
}


body{
    margin:0;
    font-family:var(--fuente-texto);
    background:var(--negro);
    color:var(--texto);
}


h1,h2,h3,
.navTitulo,
.heroTitulo,
.pasoNum,
.nombre,
.texto,
.emojiGrande{
    font-family:var(--fuente-display);
    letter-spacing:1px;
}




/* ==================================
   NAV + FRANJA (control.html)
   ================================== */


.navPrincipal{

    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:20px 30px;
    background:var(--negro);

}


.navMarca{

    display:flex;
    align-items:center;
    gap:15px;

}


.navLogo{

    width:44px;
    height:44px;
    object-fit:contain;

}


.navTitulo{

    font-size:26px;
    color:var(--texto);

}


.navLogin{

    background:transparent;
    border:1px solid var(--borde);
    color:var(--texto-tenue);
    padding:8px 20px;
    border-radius:30px;
    font-size:14px;
    cursor:pointer;
    transition:all .2s;

}


.navLogin:hover{

    border-color:var(--ambar);
    color:var(--ambar);

}


.navFranja{

    height:4px;
    background:var(--franja);

}




/* ==================================
   LANDING (control.html sin sesión)
   ================================== */


.landing{

    max-width:1000px;
    margin:0 auto;
    padding:0 30px;

}


.hero{

    text-align:center;
    padding:100px 0 60px;

}


.heroEyebrow{

    display:inline-block;
    font-size:13px;
    letter-spacing:3px;
    color:var(--naranja);
    font-weight:700;
    margin-bottom:20px;

}


.heroTitulo{

    font-size:54px;
    line-height:1.1;
    margin:0 0 25px;
    color:var(--texto);

}


.heroAccent{

    background:linear-gradient(90deg, var(--naranja), var(--ambar));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;

}


.heroTexto{

    font-family:var(--fuente-texto);
    font-size:19px;
    color:var(--texto-tenue);
    max-width:560px;
    margin:0 auto;
    line-height:1.6;

}


.pasos{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    padding-bottom:100px;

}


.paso{

    background:var(--gris-oscuro);
    border:1px solid var(--borde);
    border-radius:18px;
    padding:30px 25px;

}


.pasoNum{

    font-size:40px;
    color:var(--naranja);
    display:block;
    margin-bottom:10px;
    opacity:.7;

}


.paso h3{

    font-family:var(--fuente-texto);
    font-size:19px;
    font-weight:700;
    margin:0 0 10px;
    color:var(--texto);

}


.paso p{

    font-size:15px;
    color:var(--texto-tenue);
    line-height:1.5;
    margin:0;

}


@media(max-width:800px){

.pasos{
    grid-template-columns:1fr;
}

.heroTitulo{
    font-size:38px;
}

.hero{
    padding:60px 0 40px;
}

}




/* ==================================
   MODAL DE LOGIN
   ================================== */


.modalFondo{

    position:fixed;
    inset:0;
    background:rgba(0,0,0,.75);
    backdrop-filter:blur(4px);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:100;
    padding:20px;

}


.modalLogin{

    position:relative;
    max-width:380px;
    width:100%;
    max-height:90vh;
    overflow-y:auto;
    background:var(--gris-oscuro);
    border:1px solid var(--borde);
    padding:40px;
    border-radius:20px;
    text-align:center;
    box-shadow:0 20px 50px rgba(0,0,0,.6);

}


.modalLogin h2{

    font-family:var(--fuente-texto);
    font-size:20px;
    margin:0 0 20px;
    color:var(--texto);

}


.modalCerrar{

    position:absolute;
    top:15px;
    right:15px;
    background:none;
    border:0;
    color:var(--texto-tenue);
    font-size:18px;
    cursor:pointer;

}


.modalLogin input{

    width:100%;
    border:1px solid var(--borde);
    background:var(--gris-medio);
    color:var(--texto);
    border-radius:12px;
    padding:14px;
    font-size:16px;
    margin-bottom:15px;

}




/* ==================================
   PANEL DE CONTROL
   ================================== */


.control{

    background:var(--negro);
    color:var(--texto);
    padding:30px;

}



header{

    display:flex;
    align-items:center;
    gap:25px;
    justify-content:space-between;
    margin-bottom:30px;

}


.logo{

    width:70px;
    height:70px;
    object-fit:contain;

}


h1{

    font-size:38px;
    margin:0;
    color:var(--texto);

}



.panel{

    display:grid;
    grid-template-columns:
    repeat(3,1fr);

    gap:25px;

}



.bloque{

    background:var(--gris-oscuro);

    border:1px solid var(--borde);

    border-radius:20px;

    padding:25px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.4);

}



h2{

    margin-top:0;
    font-family:var(--fuente-texto);
    font-size:19px;
    color:var(--texto);

}


h3{

    font-family:var(--fuente-texto);
    font-size:15px;
    color:var(--texto-tenue);
    text-transform:uppercase;
    letter-spacing:1px;

}



input,
textarea{


    width:100%;

    border:1px solid var(--borde);

    background:var(--gris-medio);

    color:var(--texto);

    border-radius:12px;

    padding:15px;

    font-size:18px;

    margin-bottom:15px;

}


input::placeholder,
textarea::placeholder{

    color:var(--texto-tenue);

}



textarea{

    height:120px;

    resize:none;

}



button{

    cursor:pointer;

    border:0;

    border-radius:15px;

    padding:15px 25px;

    font-size:18px;

    font-weight:600;
    font-family:var(--fuente-texto);

}



.mostrar{

    background:var(--naranja);

    color:var(--negro);

}


/* Para cuando un <a> tiene que verse como un botón (p.ej. un enlace
   de descarga) — el elemento <button> ya trae esto de serie, pero un
   <a> no, así que se lo damos aquí. */

.botonEnlace{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    border:0;

    border-radius:15px;

    padding:15px 25px;

    font-size:18px;

    font-weight:600;

    font-family:var(--fuente-texto);

    text-decoration:none;

    text-align:center;

}


.mostrar:hover{

    background:var(--naranja-fuerte);

}



.limpiar{

    background:var(--oxido);

    color:var(--texto);

}


.limpiar:hover{

    background:var(--oxido-fuerte);

}



.fotoBtn{

    background:var(--ambar);

    color:var(--negro);

}



.reacciones{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}



.reacciones button{

    font-size:38px;

    background:var(--gris-medio);
    border:1px solid var(--borde);

}



#previewCaja{


    background:var(--gris-medio);

    color:var(--texto);

    border-radius:20px;

    padding:25px;

    text-align:center;

    border:1px solid var(--borde);

}



#previewMensaje{

    font-size:38px;

    font-family:var(--fuente-display);

}



.item{

    background:var(--gris-medio);

    border:1px solid var(--borde);

    padding:15px;

    border-radius:12px;

    margin-top:10px;

}



/* ---------- ZONAS DE SUBIDA (foto / avatar) ---------- */


.dropzone{

    background:var(--gris-medio);

    border:2px dashed var(--borde);

    border-radius:15px;

    padding:20px;

    text-align:center;

    cursor:pointer;

    margin-bottom:15px;
    color:var(--texto-tenue);

}


.dropzone:hover{

    border-color:var(--naranja);

}


.dropzone img{

    display:none;

    max-width:100%;

    max-height:150px;

    border-radius:50%;

    margin-bottom:10px;

}



#vistaFoto,
#vistaAvatar{

    display:none;

    max-width:100%;

    margin-bottom:10px;

    border-radius:15px;

}



#vistaAvatar{

    border-radius:50%;

    max-height:150px;

}



/* ---------- AVATAR CON INICIAL (respaldo cuando no hay foto real) ---------- */


.avatarMiniInicial{

    width:55px;

    height:55px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-family:var(--fuente-display);

    font-size:24px;

    color:var(--negro);

    flex-shrink:0;

}


.avatarOverlayInicial{

    position:relative;

    width:96px;

    height:96px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-family:var(--fuente-display);

    font-size:42px;

    color:var(--negro);

    border:4px solid var(--gris-oscuro);

    box-shadow:0 10px 25px rgba(0,0,0,.4);

}



/* ---------- BOTÓN "CONTINUAR CON GOOGLE" (index.html - página del público) ---------- */


.botonGoogle{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    background:var(--texto);

    color:#1f1f1f;

    margin-bottom:12px;

    font-size:15px;

    padding:12px 20px;

    border-radius:12px;

}


.botonGoogle img{

    width:18px;

    height:18px;

    flex-shrink:0;

}


.botonGoogle:hover{

    background:#e8e3d8;

}


.notaGoogle{

    font-size:13px;

    color:var(--texto-tenue);

    text-align:center;

    margin-bottom:20px;

    line-height:1.5;

}


.googleConectado{

    display:flex;

    align-items:center;

    gap:12px;

    background:var(--gris-medio);

    border:1px solid var(--borde);

    border-radius:14px;

    padding:12px 15px;

    margin-bottom:20px;

}


.googleConectado span{

    flex:1;

    font-size:14px;

    color:var(--texto);

}


.botonSalirGoogle{

    background:none;

    border:1px solid var(--borde);

    color:var(--texto-tenue);

    font-size:12px;

    padding:8px 12px;

    border-radius:20px;

}



/* ---------- MODERACIÓN ---------- */


.checkRow{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:15px;

    font-size:16px;
    color:var(--texto-tenue);

}



.checkRow input{

    width:auto;

    margin:0;

}



#listaProhibidas{

    height:80px;

}



#registroModeracion{

    max-height:220px;

    overflow-y:auto;

}



#registroModeracion .item{

    font-size:15px;

}



button:disabled{

    opacity:.35;

    cursor:not-allowed;

}



.botonAncho{

    width:100%;

}


.botonPequeño{

    margin-left:auto;

    font-size:14px;

    padding:10px 18px;

}




/* ==================================
   BLOQUE ANCHO (bandeja de moderación)
   ================================== */


.bloqueAncho{

    grid-column:span 3;

}


@media(max-width:1200px){

.bloqueAncho{

    grid-column:span 1;

}

}




/* ==================================
   QR / ENLACE PÚBLICO
   ================================== */


.enlacePublico{

    word-break:break-all;

    background:var(--gris-medio);

    border:1px solid var(--borde);

    padding:10px;

    border-radius:10px;

    font-size:13px;
    color:var(--texto-tenue);

}


#qrContenedor{

    display:flex;

    justify-content:center;

    background:var(--texto);

    padding:15px;

    border-radius:15px;

    margin:15px 0;

}


.notaQR{

    font-size:14px;
    color:var(--texto-tenue);

}




/* ==================================
   BANDEJA DE MODERACIÓN
   ================================== */


.vacio{

    color:var(--texto-tenue);
    font-style:italic;

}


.itemPendiente{

    display:flex;

    gap:15px;

    background:var(--gris-medio);

    border:1px solid var(--borde);

    border-radius:15px;

    padding:15px;

    margin-bottom:15px;

    align-items:flex-start;

}


.itemPendiente.alerta{

    border:2px solid var(--ambar);

    background:#2b2110;

}


.avatarMini{

    width:55px;

    height:55px;

    border-radius:50%;

    object-fit:cover;

    flex-shrink:0;

}


.contenidoPendiente{

    flex:1;

    min-width:0;

}


.nombrePendiente{

    font-weight:700;

    background:linear-gradient(90deg, var(--naranja), var(--ambar));

    -webkit-background-clip:text;

    background-clip:text;

    color:transparent;

    margin-bottom:5px;

}


.textoPendiente{

    font-size:17px;

    word-break:break-word;
    color:var(--texto);

}


.fotoPendiente{

    max-width:200px;

    max-height:200px;

    border-radius:12px;

    margin-top:10px;

    display:block;

}


.avisoPalabra{

    color:var(--ambar);

    font-size:14px;

    margin-top:8px;

}


.accionesPendiente{

    display:flex;

    flex-direction:column;

    gap:10px;

}


.accionesPendiente button{

    font-size:15px;

    padding:10px 15px;

    white-space:nowrap;

}




/* ==================================
   PÁGINA PÚBLICA (index.html - página del público)
   ================================== */


.publico{

    background:var(--negro);

    min-height:100dvh;

    display:flex;

    flex-direction:column;

    color:var(--texto);

}


.navPublico{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:10px;

    padding:16px 20px;

}


.contenedorPublico{

    flex:1;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:10px 20px 40px;

}


.tarjetaPublico{

    max-width:460px;

    width:100%;

    background:var(--gris-oscuro);

    border:1px solid var(--borde);

    border-radius:22px;

    padding:32px;

    box-shadow:0 10px 30px rgba(0,0,0,.5);

}


.logoPublico{

    width:170px;

    height:170px;

    display:block;

    margin:0 auto 18px;

    object-fit:contain;

}


.tarjetaPublico h1{

    text-align:center;

    font-size:30px;

    margin-bottom:5px;

    color:var(--texto);

}


.subtitulo{

    text-align:center;

    color:var(--texto-tenue);

    margin-bottom:25px;
    font-family:var(--fuente-texto);

}


.tarjetaPublico label{

    display:block;

    margin-bottom:8px;

    font-weight:700;

    font-size:14px;
    color:var(--texto-tenue);
    text-transform:uppercase;
    letter-spacing:.5px;

}


.tarjetaPublico input,
.tarjetaPublico textarea{

    width:100%;

    border:1px solid var(--borde);

    background:var(--gris-medio);

    color:var(--texto);

    border-radius:12px;

    padding:14px;

    font-size:16px;

    margin-bottom:20px;

}


.tarjetaPublico textarea{

    height:100px;

    resize:none;

}


/* ---------- TABLET ---------- */

@media(min-width:600px) and (max-width:1024px){

.tarjetaPublico{

    max-width:520px;

    padding:40px;

}


.tarjetaPublico h1{

    font-size:34px;

}

}


/* ---------- ESCRITORIO ---------- */

@media(min-width:1025px){

.contenedorPublico{

    padding-bottom:60px;

}


.tarjetaPublico{

    max-width:480px;

    box-shadow:0 25px 70px rgba(0,0,0,.6);

}

}


/* ---------- MÓVILES PEQUEÑOS ---------- */

@media(max-width:380px){

.navPublico{

    padding:12px 14px;

}


.contenedorPublico{

    padding:5px 14px 30px;

}


.tarjetaPublico{

    padding:22px 18px;

    border-radius:18px;

}


.tarjetaPublico h1{

    font-size:26px;

}


.logoPublico{

    width:130px;

    height:130px;

}


.subtitulo{

    font-size:14px;

    margin-bottom:20px;

}

}


.avisoPublico{

    display:none;

    background:#2b2110;

    color:var(--ambar);

    border:1px solid var(--ambar);

    padding:12px;

    border-radius:10px;

    margin-bottom:15px;

    font-size:14px;

}


.confirmacionPublico{

    display:none;

    text-align:center;

    font-size:18px;

    background:#1a2b1a;

    border:1px solid #4caf50;

    color:#8bd98b;

    padding:20px;

    border-radius:15px;

}




/* ==================================
   OVERLAY PARA OBS
   (fondo verde chroma: NO tocar #00ff00)
   ================================== */


.overlay{


    width:100vw;

    height:100vh;

    margin:0;

    overflow:hidden;

    background:#00ff00;


}



#escenario{


    width:100%;

    height:100%;


    display:flex;

    justify-content:center;

    align-items:center;


    position:relative;

    overflow:hidden;


}




/* ==================================
   CARTEL (overlay) - estilo señal de aviso
   ================================== */


.cartel{


    width:900px;

    min-height:380px;


    background:var(--gris-oscuro);


    color:var(--texto);


    border-radius:15px;


    padding:40px 50px;


    display:flex;


    flex-direction:column;


    justify-content:center;


    align-items:center;


    text-align:center;


    border:5px solid var(--ambar);


    box-shadow:

    0 0 60px rgba(var(--ambar-rgb),.35),
    0 25px 60px rgba(0,0,0,.6);



}



.texto{


    width:100%;


    max-height:240px;


    display:flex;


    align-items:center;


    justify-content:center;


    overflow:hidden;


    line-height:1.05;


    word-break:break-word;



}





/* ==================================
   IDENTIDAD (overlay)
   ================================== */


.identidad{

    display:flex;

    flex-direction:column;

    align-items:center;

    margin-bottom:15px;

}



.avatarAro{

    position:relative;

    width:108px;

    height:108px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 12px;

    flex-shrink:0;

}


.aroProgreso{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    transform:rotate(-90deg);

}


.aroProgresoCirculo{

    fill:none;

    stroke:var(--ambar);

    stroke-width:6;

    stroke-dasharray:289;

    stroke-dashoffset:0;

    animation-name:vaciarAro;

    animation-timing-function:linear;

    animation-fill-mode:forwards;

}


@keyframes vaciarAro{

    to{

        stroke-dashoffset:289;

    }

}


.avatarOverlay{

    position:relative;

    width:96px;

    height:96px;

    border-radius:50%;

    object-fit:cover;

    border:4px solid var(--gris-oscuro);

    box-shadow:0 10px 25px rgba(0,0,0,.4);

}



.nombreOverlay{

    font-family:var(--fuente-texto);

    font-size:24px;

    font-weight:800;

    background:linear-gradient(90deg, var(--naranja), var(--ambar));

    -webkit-background-clip:text;

    background-clip:text;

    color:transparent;

}



.creditoFoto{

    margin-top:15px;

    padding:10px 20px;

    background:rgba(10,10,10,.75);

    border:1px solid var(--ambar);

    border-radius:20px;

    -webkit-background-clip:initial;

    background-clip:initial;

    color:var(--texto);

    font-size:22px;

}




/* ==================================
   ANIMACIONES CARTEL
   ================================== */


.entrada{


    animation:

    entrada .7s ease forwards;


}



.salida{


    animation:

    salida .8s ease forwards;


}



@keyframes entrada{


from{

    opacity:0;

    transform:

    scale(.5)

    translateY(100px);

}



to{

    opacity:1;

    transform:

    scale(1)

    translateY(0);

}



}



@keyframes salida{


from{

    opacity:1;

    transform:scale(1);

}



to{

    opacity:0;

    transform:scale(.7);

}


}





/* ==================================
   FOTOS
   ================================== */


.fotoGrande{


    max-width:80%;

    max-height:80%;


    border-radius:20px;


    border:8px solid var(--ambar);


    box-shadow:

    0 25px 60px rgba(0,0,0,.7);


}






/* ==================================
   LLUVIA DE EMOJIS
   ================================== */


.emoji{


    position:absolute;


    top:-150px;


    animation:

    caer linear forwards;


}



@keyframes caer{


0%{

    transform:

    translateY(0)

    rotate(0deg);

}


100%{


    transform:

    translateY(120vh)

    rotate(720deg);


}



}






/* ==================================
   RESPONSIVE PANEL
   ================================== */


@media(max-width:1200px){


.panel{

    grid-template-columns:1fr;

}



}




/* ==================================
   ENLACE DISCRETO DE MODERACIÓN (index.html)
   ================================== */


.enlaceModeracion{

    display:inline-flex;

    align-items:center;

    gap:8px;

    font-size:13px;

    font-weight:600;

    color:var(--texto-tenue);

    text-decoration:none;

    border:1px solid var(--borde);

    background:rgba(255,255,255,.03);

    padding:9px 16px;

    border-radius:30px;

    transition:all .2s;

}


.enlaceModeracion svg{

    flex-shrink:0;

    opacity:.8;

}


.enlaceModeracion:hover{

    border-color:var(--naranja);

    color:var(--naranja);

    background:rgba(var(--naranja-rgb),.08);

}


.enlaceModeracion:hover svg{

    opacity:1;

}




/* ==================================
   DASHBOARD DE EVENTOS
   ================================== */


.enlaceVolver{

    background:transparent;

    border:1px solid var(--borde);

    color:var(--texto-tenue);

    text-decoration:none;

    display:inline-flex;

    align-items:center;

}


.enlaceVolver:hover{

    border-color:var(--naranja);

    color:var(--naranja);

}


.listaEventos{

    display:grid;

    grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));

    gap:20px;

}


.tarjetaEvento{

    background:var(--gris-oscuro);

    border:1px solid var(--borde);

    border-radius:18px;

    padding:22px;

    display:flex;

    flex-direction:column;

    gap:15px;

}


.tarjetaEventoInfo h3{

    font-family:var(--fuente-texto);

    font-size:19px;

    margin:0 0 5px;

    color:var(--texto);

}


.tarjetaEventoInfo p{

    font-size:14px;

    color:var(--texto-tenue);

    margin:0;

}


.tarjetaEventoAcciones{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:10px;

}


.tarjetaEventoAcciones button{

    flex:1;

    font-size:14px;

    padding:12px;

}


#qrContenedorDashboard{

    display:flex;

    justify-content:center;

    background:var(--texto);

    padding:15px;

    border-radius:15px;

    margin-top:15px;

}




/* ==================================
   CALENDARIO DE EVENTOS (dashboard.html)
   ================================== */


.bloqueCalendario{

    margin-bottom:30px;

}


.calendarioCabecera{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:20px;

}


.calendarioCabecera h2{

    margin:0;

    font-size:20px;

    letter-spacing:1px;

}


.calendarioNav{

    display:flex;

    gap:10px;

}


.calendarioFlecha{

    background:var(--gris-medio);

    border:1px solid var(--borde);

    color:var(--texto);

    width:38px;

    height:38px;

    padding:0;

    font-size:20px;

    line-height:1;

    border-radius:10px;

}


.calendarioFlecha:hover{

    border-color:var(--naranja);

    color:var(--naranja);

}


.calendarioDiasSemana{

    display:grid;

    grid-template-columns:repeat(7,1fr);

    gap:6px;

    margin-bottom:8px;

}


.calendarioDiasSemana span{

    text-align:center;

    font-size:12px;

    color:var(--texto-tenue);

    letter-spacing:1px;

    font-weight:700;

}


.calendarioGrid{

    display:grid;

    grid-template-columns:repeat(7,1fr);

    gap:6px;

}


.diaCalendario{

    aspect-ratio:1;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--gris-medio);

    border:1px solid var(--borde);

    border-radius:10px;

    font-size:14px;

    color:var(--texto);

}


.diaOtroMes{

    color:var(--texto-tenue);

    opacity:.35;

    background:transparent;

}


.diaConEvento{

    background:linear-gradient(135deg, var(--naranja), var(--naranja-fuerte));

    border-color:var(--ambar);

    color:var(--negro);

    font-weight:800;

    cursor:pointer;

}


.diaConEvento:hover{

    filter:brightness(1.1);

    transform:scale(1.05);

}


.tituloListaEventos{

    font-size:20px;

    letter-spacing:1px;

    margin:10px 0 15px;

}


@media(max-width:500px){

.diaCalendario{

    font-size:12px;

    border-radius:8px;

}


.calendarioDiasSemana span{

    font-size:10px;

}

}




/* ==================================
   INSIGNIA DE EVENTO ACTIVO
   (control.html e index.html - para no confundir eventos al probar)
   ================================== */


.insigniaEvento{

    font-size:12px;

    font-family:monospace;

    color:var(--ambar);

    background:rgba(var(--ambar-rgb),.08);

    border:1px solid rgba(var(--ambar-rgb),.3);

    padding:6px 12px;

    border-radius:20px;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}


header .insigniaEvento{

    margin-right:auto;

    margin-left:15px;

}







/* ==================================
   ETIQUETA DEL INPUT DE TÍTULO EN EL MODAL QR
   ================================== */


.etiquetaQR{

    display:block;

    text-align:left;

    font-size:12px;

    color:var(--texto-tenue);

    text-transform:uppercase;

    letter-spacing:.5px;

    margin-bottom:6px;

    font-weight:700;

}




/* ==================================
   INSIGNIA DE DEPURACIÓN EN OVERLAY
   (solo visible con ?debug=1 en la URL — nunca en el stream real)
   ================================== */


.insigniaEventoOverlay{

    display:none;

    position:fixed;

    top:10px;

    left:10px;

    font-size:14px;

    font-family:monospace;

    color:var(--ambar);

    background:rgba(0,0,0,.75);

    padding:6px 12px;

    border-radius:8px;

    z-index:999;

}




/* ==================================
   SLIDER DE DURACIÓN (control.html)
   ================================== */


.etiquetaSlider{

    display:block;

    font-size:14px;

    color:var(--texto-tenue);

    margin-bottom:10px;

}


.etiquetaSlider span{

    color:var(--ambar);

    font-weight:700;

    font-family:var(--fuente-display);

    font-size:16px;

}


.sliderTiempo{

    width:100%;

    accent-color:var(--naranja);

    height:6px;

    margin-bottom:5px;

    padding:0;

    background:none;

    border:none;

}




/* ==================================
   RESPONSIVE MÓVIL: control.html y dashboard.html
   ================================== */


@media(max-width:600px){


.control{

    padding:15px;

}


header{

    flex-wrap:wrap;

    gap:12px;

    margin-bottom:20px;

}


.logo{

    width:48px;

    height:48px;

}


h1{

    font-size:26px;

}


header .insigniaEvento{

    display:block;

    margin-left:0;

    order:10;

    width:100%;

    text-align:center;

}


.bloque{

    padding:18px;

}


/* Tarjetas de mensajes: apiladas en vertical, botones en fila */

.itemPendiente{

    flex-direction:column;

}


.itemPendiente .avatarMini,
.itemPendiente .avatarMiniInicial{

    margin-bottom:5px;

}


.accionesPendiente{

    flex-direction:row;

    width:100%;

}


.accionesPendiente button{

    flex:1;

}


.fotoPendiente{

    max-width:100%;

}


/* Botones y campos más cómodos para el dedo */

button{

    font-size:16px;

}


input, textarea{

    font-size:16px !important;

}


.reacciones button{

    font-size:30px;

    flex:1 1 30%;

}


.dropzone{

    padding:15px;

}


/* Modales a pantalla casi completa */

.modalLogin{

    padding:25px 20px;

}


/* Dashboard: tarjetas y calendario más compactos */

.listaEventos{

    grid-template-columns:1fr;

}


.tarjetaEventoAcciones{

    grid-template-columns:1fr;

}


.diaCalendario{

    font-size:11px;

}

}




/* ==================================
   MENÚ LATERAL (control.html y dashboard.html)
   ================================== */


.conSidebar{

    display:flex;

    min-height:100vh;

    align-items:stretch;

}


.sidebar{

    width:230px;

    flex-shrink:0;

    background:var(--gris-oscuro);

    border-right:1px solid var(--borde);

    display:flex;

    flex-direction:column;

    gap:8px;

    padding:20px 15px;

}


.sidebarLogo{

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:25px;

    padding:10px 4px;

}


.sidebarLogoImg{

    width:96px;

    height:96px;

    object-fit:contain;

}


.sidebarLogo span{

    font-family:var(--fuente-display);

    font-size:20px;

    letter-spacing:1px;

    color:var(--texto);

}


.sidebarBtn{

    display:flex;

    align-items:center;

    gap:10px;

    width:100%;

    text-align:left;

    background:transparent;

    border:1px solid transparent;

    color:var(--texto-tenue);

    padding:12px 14px;

    border-radius:10px;

    font-size:15px;

    font-family:var(--fuente-texto);

    font-weight:600;

    cursor:pointer;

    text-decoration:none;

    box-sizing:border-box;

}


.sidebarBtn:hover{

    background:var(--gris-medio);

    color:var(--texto);

}


.sidebarBtn.activo{

    background:rgba(var(--naranja-rgb),.12);

    color:var(--naranja);

    border-color:rgba(var(--naranja-rgb),.3);

}


.sidebarBtnCrear{

    background:var(--naranja);

    color:var(--negro);

    margin-bottom:10px;

}


.sidebarBtnCrear:hover{

    background:var(--naranja-fuerte);

    color:var(--negro);

}


.sidebarSalir{

    margin-top:auto;

    color:#ff8a75;

}


.sidebarSalir:hover{

    background:rgba(179,58,46,.15);

    color:#ff6b57;

}


.insigniaSidebar{

    margin:5px 4px 10px;

    text-align:center;

    display:block;

}


.contenidoPrincipal{

    flex:1;

    min-width:0;

    padding:30px 35px;

    overflow-x:hidden;

}


.tituloContenido{

    font-size:34px;

    margin:0 0 25px;

    color:var(--texto);

}



@media(max-width:900px){


.conSidebar{

    flex-direction:column;

    min-height:0;

}


.sidebar{

    width:100%;

    flex-direction:row;

    flex-wrap:wrap;

    align-items:center;

    border-right:none;

    border-bottom:1px solid var(--borde);

    padding:12px 15px;

}


.sidebarLogo{

    margin-bottom:0;

    margin-right:auto;

    padding:0;

}


.sidebarLogoImg{

    width:44px;

    height:44px;

}


.sidebarBtn{

    width:auto;

    padding:10px 14px;

    font-size:13px;

}


.sidebarBtnCrear{

    margin-bottom:0;

}


.sidebarSalir{

    margin-top:0;

    margin-left:auto;

}


.insigniaSidebar{

    width:100%;

    order:10;

    margin:8px 0 0;

}


.contenidoPrincipal{

    padding:20px 15px;

}


.tituloContenido{

    font-size:26px;

}

}




/* ==================================
   MODAL DE CONFIGURACIÓN
   ================================== */


.opcionRadio{

    display:flex;

    align-items:center;

    gap:10px;

    background:var(--gris-medio);

    border:1px solid var(--borde);

    border-radius:12px;

    padding:14px;

    margin-bottom:10px;

    font-size:14px;

    color:var(--texto);

    text-align:left;

    cursor:pointer;

}


.opcionRadio:has(input:checked){

    border-color:var(--naranja);

    background:rgba(var(--naranja-rgb),.08);

}


.opcionRadio input{

    width:auto;

    margin:0;

    accent-color:var(--naranja);

    flex-shrink:0;

}


.filaBotonesModal{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-top:25px;

}


.filaBotonesModal button{

    flex:1;

}




/* ==================================
   VISTA PREVIA EN DIRECTO DEL OVERLAY (control.html)
   ================================== */


.bloqueVistaPrevia{

    grid-column:span 2;

    display:flex;

    flex-direction:column;

}


@media(max-width:1200px){

.bloqueVistaPrevia{

    grid-column:span 1;

}

}


.pantallaVistaPrevia{

    position:relative;

    width:100%;

    aspect-ratio:16/9;

    background:#000;

    border:3px solid var(--ambar);

    border-radius:14px;

    overflow:hidden;

    box-shadow:0 0 30px rgba(var(--ambar-rgb),.2);

}


.pantallaVistaPrevia iframe{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:100%;

    border:none;

    pointer-events:none;

}


.notaQR code{

    background:var(--gris-medio);

    padding:2px 6px;

    border-radius:4px;

    font-size:12px;

}




/* ==================================
   FOTO ADJUNTA A UN MENSAJE (overlay.html)
   ================================== */


.fotoMensaje{

    max-width:750px;

    max-height:420px;

    border-radius:16px;

    border:3px solid var(--ambar);

    margin-bottom:15px;

    object-fit:contain;

    background:rgba(0,0,0,.2);

}




/* ==================================
   ESTILO "POPUP" (notificación tipo smartphone) - overlay.html
   ================================== */


.cartelPopup{

    display:flex;

    align-items:center;

    gap:24px;

    padding:26px 40px;

    border-radius:36px;

    max-width:950px;

    background:var(--gris-oscuro);

    border:2px solid var(--borde);

    box-shadow:0 20px 50px rgba(0,0,0,.5);

    overflow:hidden;

}


.cartelPopup .avatarAro{

    margin:0;

}


.popupContenido{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:4px;

    text-align:left;

    min-width:0;

}


.popupNombre{

    font-size:22px;

}


.popupTexto{

    display:block;

    max-height:none;

    text-align:left;

    font-size:20px;

    line-height:1.35;

    word-break:break-word;

}


.popupFoto{

    max-width:340px;

    max-height:210px;

    border-radius:12px;

    margin-top:6px;

    border-width:2px;

}




/* ==================================
   FONDO DEL MENSAJE (elige el operador en Configuración)
   ================================== */


.fondo-negro{

    background:rgba(10,10,10,.9);

    color:var(--texto);

}


.fondo-gris{

    background:rgba(35,32,30,.92);

    color:var(--texto);

}


.fondo-blanco{

    background:rgba(250,248,244,.97);

    color:#171512;

    border-color:rgba(0,0,0,.1);

}


.fondo-cristal{

    background:rgba(255,255,255,.14);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border-color:rgba(255,255,255,.4);

    color:var(--texto);

}




/* ==================================
   FUENTE DEL TEXTO (elige el operador en Configuración)
   ================================== */


.fuente-texto .texto,
.fuente-texto .popupTexto,
.fuente-texto .popupNombre,
.fuente-texto .nombreOverlay{

    font-family:var(--fuente-texto);

    letter-spacing:normal;

}




/* ==================================
   MODAL DE CONFIGURACIÓN - sección de colores y fuentes
   ================================== */


.modalAncho{

    max-width:460px;

}


.modalMasAncho{

    max-width:680px;

}


.separadorModal{

    border:none;

    border-top:1px solid var(--borde);

    margin:22px 0 18px;

}


.selectConfig{

    width:100%;

    border:1px solid var(--borde);

    background:var(--gris-medio);

    color:var(--texto);

    border-radius:12px;

    padding:12px 14px;

    font-size:15px;

    margin-bottom:16px;

    font-family:var(--fuente-texto);

}




/* ==================================
   PIE DE PÁGINA (index.html) - logo secundario + contacto
   ================================== */


.piePublico{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:14px;

    padding:30px 20px 25px;

    border-top:1px solid var(--borde);

    text-align:center;

}


.logoPie{

    width:140px;

    height:140px;

    object-fit:contain;

    border-radius:14px;

}


.piePublicoDatos{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:22px;

}


.piePublicoItem{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:13px;

    color:var(--texto-tenue);

    line-height:1.4;

}


.piePublicoItem svg{

    flex-shrink:0;

    color:var(--naranja);

}


.piePublicoRedes{

    display:flex;

    gap:12px;

}


.piePublicoIcono{

    display:flex;

    align-items:center;

    justify-content:center;

    width:36px;

    height:36px;

    border-radius:50%;

    background:var(--gris-medio);

    border:1px solid var(--borde);

    color:var(--texto-tenue);

}


.piePublicoIcono:hover{

    color:var(--naranja);

    border-color:var(--naranja);

}


.piePublicoCopy{

    font-size:12px;

    color:var(--texto-tenue);

    opacity:.7;

    margin:0;

}




/* ==================================
   COPYRIGHT DEL SIDEBAR (control.html y dashboard.html)
   ================================== */


.sidebarCopy{

    text-align:center;

    font-size:11px;

    color:var(--texto-tenue);

    opacity:.6;

    margin:10px 0 0;

}


@media(max-width:900px){

.sidebarCopy{

    display:none;

}

}




/* ==================================
   REACCIONES RÁPIDAS (index.html)
   ================================== */


.separadorReacciones{

    text-align:center;

    font-size:13px;

    color:var(--texto-tenue);

    margin:18px 0 12px;

    position:relative;

}


.reaccionesPublico{

    display:grid;

    grid-template-columns:repeat(6, 1fr);

    gap:8px;

}


.lluviaPublico{

    grid-template-columns:repeat(3, 1fr);

}


.botonReaccionPublico{

    background:var(--gris-medio);

    border:1px solid var(--borde);

    border-radius:14px;

    font-size:28px;

    padding:12px 0;

}


.botonReaccionPublico:hover{

    border-color:var(--naranja);

}


.botonReaccionPublico:disabled{

    opacity:.4;

}


.botonLluviaPublico{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:2px;

    background:var(--gris-medio);

    border:1px solid var(--borde);

    border-radius:14px;

    font-size:19px;

    line-height:1;

    padding:14px 4px;

    white-space:nowrap;

    overflow:hidden;

    box-sizing:border-box;

}


.botonLluviaPublico:hover{

    border-color:var(--naranja);

}


.botonLluviaPublico:disabled{

    opacity:.4;

}


@media(max-width:380px){

.reaccionesPublico{

    grid-template-columns:repeat(3, 1fr);

}


.botonLluviaPublico{

    font-size:16px;

}

}




/* ==================================
   BOTONES CON ESPACIO (bloque de acceso público)
   ================================== */


.botonConEspacio{

    margin-bottom:12px;

}




/* ==================================
   TARJETA DEL QR EN EL OVERLAY
   (siempre en formato tarjeta, sin avatar/nombre)
   ================================== */


.cartelQR{

    display:flex;

    align-items:center;

    justify-content:center;

    padding:28px;

    border-radius:28px;

    background:var(--gris-oscuro);

    border:2px solid var(--borde);

    box-shadow:0 20px 50px rgba(0,0,0,.5);

}


.imagenQROverlay{

    max-width:460px;

    max-height:460px;

    width:auto;

    height:auto;

    border-radius:16px;

    display:block;

}




/* ==================================
   BOTÓN EDITAR (tarjetas de evento en dashboard.html)
   ================================== */


.botonEditar{

    background:var(--gris-medio);

    color:var(--texto);

    border:1px solid var(--borde);

}


.botonEditar:hover{

    border-color:var(--ambar);

    color:var(--ambar);

}




/* ==================================
   BLOQUEADO (silenciado/baneado) - index.html
   ================================== */


.bloqueadoPublico{

    text-align:center;

    font-size:16px;

    background:#2b1010;

    border:1px solid var(--oxido);

    color:#ff8a75;

    padding:20px;

    border-radius:15px;

}




/* ==================================
   ESTADO DEL EVENTO (dashboard.html)
   ================================== */


.badgeEstadoEvento{

    display:inline-block;

    font-size:12px;

    font-weight:700;

    padding:4px 12px;

    border-radius:20px;

    margin-top:8px;

}


.badgeActivo{

    background:rgba(0,230,118,.12);

    color:#8bd98b;

    border:1px solid rgba(0,230,118,.3);

}


.badgeInactivo{

    background:rgba(179,58,46,.15);

    color:#ff8a75;

    border:1px solid rgba(179,58,46,.35);

}


.botonToggleActivo{

    grid-column:1 / -1;

    margin-top:10px;

    background:var(--gris-medio);

    color:var(--texto);

    border:1px solid var(--borde);

}


.botonToggleActivo:hover{

    border-color:var(--naranja);

    color:var(--naranja);

}




/* ==================================
   REDES SOCIALES EN EL OVERLAY
   (usan el mismo cartel PopUp que los mensajes — el icono
   de la red hace de "avatar")
   ================================== */


.redSocialIcono{

    display:flex;

    align-items:center;

    justify-content:center;

    width:96px;

    height:96px;

    border-radius:50%;

    border:4px solid var(--gris-oscuro);

    box-shadow:0 10px 25px rgba(0,0,0,.4);

}


.redInstagram .redSocialIcono{

    background:linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7);

}


.redTiktok .redSocialIcono{

    background:linear-gradient(135deg, #25f4ee, #000000, #fe2c55);

}




/* ==================================
   SORTEO EN EL OVERLAY
   ================================== */


.cartelSorteo{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:15px;

    padding:50px 70px;

    border-radius:32px;

    background:var(--gris-oscuro);

    border:3px solid var(--ambar);

    box-shadow:0 0 80px rgba(var(--ambar-rgb),.3), 0 25px 60px rgba(0,0,0,.6);

}


.sorteoEtiqueta{

    font-family:var(--fuente-display);

    font-size:26px;

    letter-spacing:4px;

    color:var(--ambar);

}


.sorteoNombre{

    font-family:var(--fuente-display);

    font-size:64px;

    letter-spacing:1px;

    color:var(--texto);

    min-width:300px;

    text-align:center;

}


.sorteoGanador{

    animation:brilloGanador 1s ease infinite alternate;

}


.sorteoGanador .sorteoNombre{

    color:var(--ambar);

    animation:reboteGanador .5s ease;

}


@keyframes reboteGanador{

    0%{

        transform:scale(.6);

    }

    60%{

        transform:scale(1.25);

    }

    100%{

        transform:scale(1);

    }

}


@keyframes brilloGanador{

    from{

        box-shadow:0 0 80px rgba(var(--ambar-rgb),.3), 0 25px 60px rgba(0,0,0,.6);

    }

    to{

        box-shadow:0 0 130px rgba(var(--ambar-rgb),.6), 0 25px 60px rgba(0,0,0,.6);

    }

}




/* ==================================
   BOTONES DE PARTICIPANTES (2 columnas, ahorra espacio)
   ================================== */


.accionesParticipante{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:10px;

    min-width:220px;

}


.accionesParticipante button{

    font-size:15px;

    padding:10px 12px;

    white-space:nowrap;

}


.accionesParticipante button:only-child{

    grid-column:1 / -1;

}


@media(max-width:600px){

.accionesParticipante{

    grid-template-columns:1fr;

    min-width:0;

    width:100%;

}

}




/* ==================================
   INSIGNIA "EN REPRODUCCIÓN" (cola de visualización)
   ================================== */


.itemReproduciendo{

    border:2px solid var(--naranja);

    background:#2b1f10;

}


.insigniaReproduccion{

    display:inline-flex;

    align-items:center;

    gap:6px;

    font-size:13px;

    font-weight:700;

    color:var(--naranja);

    margin-top:8px;

}


.insigniaReproduccion::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--naranja);

    animation:parpadeoReproduccion 1s ease infinite;

}


.tiempoRestante{

    font-weight:400;

    color:var(--texto-tenue);

}


@keyframes parpadeoReproduccion{

    0%,100%{

        opacity:1;

    }

    50%{

        opacity:.3;

    }

}




/* ==================================
   INSIGNIA "EN ESPERA DE TURNO" (cola de visualización)
   ================================== */


.itemEnEspera{

    border:2px solid var(--gris-claro);

    opacity:.75;

}


.insigniaEnEspera{

    display:inline-block;

    font-size:13px;

    font-weight:700;

    color:var(--texto-tenue);

    margin-top:8px;

}




/* ==================================
   SELECTOR HORIZONTAL INACTIVO/ACTIVO (dashboard.html)
   ================================== */


.selectorEstado{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    margin-top:14px;

    cursor:pointer;

    user-select:none;

}


.selectorEstadoEtiqueta{

    font-size:13px;

    font-weight:700;

    color:var(--texto-tenue);

    transition:color .2s;

}


.selectorEstadoEtiqueta.activa{

    color:var(--texto);

}


.selectorEstadoPista{

    position:relative;

    width:52px;

    height:28px;

    border-radius:999px;

    background:#B33A2E;

    transition:background .25s;

    flex-shrink:0;

}


.selectorEstadoPista.activo{

    background:#1fae5c;

}


.selectorEstadoBola{

    position:absolute;

    top:3px;

    left:3px;

    width:22px;

    height:22px;

    border-radius:50%;

    background:#fff;

    box-shadow:0 2px 6px rgba(0,0,0,.3);

    transition:transform .25s;

}


.selectorEstadoPista.activo .selectorEstadoBola{

    transform:translateX(24px);

}




/* ==================================
   SELECTOR DE ESTADO EN EL SIDEBAR DE control.html
   ================================== */


.selectorEstadoSidebar{

    margin:0 auto 15px;

    justify-content:center;

}




/* ==================================
   INTERRUPTOR "QR FIJO" (control.html)
   ================================== */


.selectorQRFijo{

    margin:16px 0 0;

}


.selectorQRFijo .selectorEstadoPista.activo{

    background:var(--naranja);

}




/* ==================================
   LOGO DEL CLIENTE (crear/editar evento en dashboard.html)
   ================================== */


.dropzoneLogo{

    padding:15px;

    /* fondo a cuadros para que se note si el PNG tiene transparencia */
    background-image:
        linear-gradient(45deg, #444 25%, transparent 25%),
        linear-gradient(-45deg, #444 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #444 75%),
        linear-gradient(-45deg, transparent 75%, #444 75%);
    background-size:16px 16px;
    background-position:0 0, 0 8px, 8px -8px, -8px 0px;

}


.dropzoneLogo.dropzoneConImagen{

    padding:10px;

}


#ceLogoVista, #eeLogoVista{

    max-width:100%;

    max-height:120px;

    object-fit:contain;

    display:block;

    margin:0 auto;

}


.botonQuitarLogo{

    width:100%;

    margin-bottom:15px;

}




/* ==================================
   LOGO DEL CLIENTE EN index.html (comisión de fiestas / ayuntamiento)
   ================================== */


.colaboracionCliente{

    text-align:center;

    font-size:12px;

    letter-spacing:1.5px;

    text-transform:uppercase;

    color:var(--texto-tenue);

    margin:2px 0 10px;

}


.logoPublico + .colaboracionCliente{

    margin-top:-6px;

}


.logoClientePublico{

    display:block;

    max-width:280px;

    width:100%;

    max-height:150px;

    object-fit:contain;

    margin:0 auto 20px;

}


@media(max-width:380px){

.logoClientePublico{

    max-width:200px;

    max-height:110px;

}

}




/* ==================================
   LOGO DE CLIENTE EN EL OVERLAY
   (PNG transparente, sin tarjeta detrás)
   ================================== */


.logoClienteOverlay{

    max-width:55%;

    max-height:55%;

    object-fit:contain;

    filter:drop-shadow(0 10px 30px rgba(0,0,0,.5));

}




/* ==================================
   MARCAR PARTICIPANTES (bandera roja, sin bloquear nada)
   ================================== */


.botonMarcar{

    background:transparent;

    border:1px solid #B33A2E;

    color:#ff8a75;

}


.botonMarcar:hover{

    background:rgba(179,58,46,.15);

}


.botonDesmarcar{

    background:var(--gris-medio);

    border:1px solid var(--borde);

    color:var(--texto);

}


.itemMarcado{

    border:2px solid #B33A2E;

    background:#2b1210;

}




/* ==================================
   SELECTOR "VER: 5/10/15/20" (pendientes y cola)
   ================================== */


.selectorLimite{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:8px;

    margin-bottom:14px;

}


.selectorLimiteEtiqueta{

    font-size:13px;

    color:var(--texto-tenue);

}


.selectorLimite button{

    background:var(--gris-medio);

    border:1px solid var(--borde);

    color:var(--texto-tenue);

    font-size:13px;

    padding:6px 12px;

    border-radius:8px;

}


.selectorLimite button.activo{

    background:var(--naranja);

    border-color:var(--naranja);

    color:#0A0A0A;

    font-weight:700;

}


.notaLimite{

    font-size:13px;

    color:var(--texto-tenue);

    text-align:center;

    padding:10px;

    margin-bottom:10px;

    background:var(--gris-medio);

    border-radius:10px;

}




/* ==================================
   BOTONES DE AJUSTE DE ENCUADRE (control.html)
   ================================== */


.filaBotonesAjuste{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

}


.filaBotonesAjuste button{

    flex:1;

    min-width:110px;

    padding:8px 10px;

    font-size:12px;

}


.botonAjuste{

    background:var(--gris-medio);

    border:1px solid var(--borde);

    color:var(--texto);

}


.botonAjuste:hover{

    border-color:var(--naranja);

}


.botonAjuste.activo{

    background:var(--ambar);

    border-color:var(--ambar);

    color:#0A0A0A;

    font-weight:700;

}




/* ==================================
   CARTA DE AJUSTE (overlay.html)
   ================================== */


.modoAjusteContenedor{

    position:relative;

    width:100%;

    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;

}


.cartaAjuste{

    position:absolute;

    inset:2.5%;

    z-index:1;

}


.capaMensajeAjuste{

    position:relative;

    z-index:2;

}


.cartaAjusteSVG{

    display:block;

    width:100%;

    height:100%;

}


.cartaTrazoBorde{

    stroke:#ff6a00;

    stroke-width:3;

}


.cartaTrazoSuave{

    stroke:#ff6a00;

    stroke-opacity:.55;

    stroke-width:1.5;

}


.cartaTrazoFino{

    stroke:#ff6a00;

    stroke-opacity:.3;

    stroke-width:1;

}


.cartaTrazoEje{

    stroke:#ff6a00;

    stroke-opacity:.7;

    stroke-width:1.5;

}


.cartaTrazoX{

    stroke:#ff6a00;

    stroke-width:2.5;

}


.cartaAjusteLogoPop{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    width:130px;

    height:130px;

    border-radius:50%;

    background:rgba(10,10,10,.85);

    border:3px solid #ff6a00;

    box-shadow:0 6px 20px rgba(0,0,0,.6);

    display:flex;

    align-items:center;

    justify-content:center;

}


.cartaAjusteLogo{

    width:65%;

    height:65%;

    object-fit:contain;

}




/* ==================================
   TEMPORIZADOR (control.html)
   ================================== */


.tabsTemporizador{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-bottom:16px;

}


.tabTemporizador{

    flex:1;

    min-width:100px;

    background:var(--gris-medio);

    border:1px solid var(--borde);

    color:var(--texto);

    padding:10px;

}


.tabTemporizador.activo{

    background:var(--ambar);

    border-color:var(--ambar);

    color:#0A0A0A;

    font-weight:700;

}


.temporizadorDisplay{

    text-align:center;

    margin:18px 0;

}


.temporizadorDisplay span{

    font-family:var(--fuente-display);

    font-size:36px;

    letter-spacing:2px;

    color:var(--ambar);

}


.filaBotonesTemporizador{

    display:grid;

    grid-template-columns:repeat(3, 1fr);

    gap:8px;

    margin-bottom:15px;

}


.filaBotonesTemporizador button{

    background:var(--gris-medio);

    border:1px solid var(--borde);

    color:var(--texto);

    font-size:12px;

    padding:9px 4px;

}


.filaBotonesTemporizador button:hover{

    border-color:var(--ambar);

    color:var(--ambar);

}







/* ==================================
   CUENTA ATRÁS EN EL OVERLAY
   ================================== */


.cartelCuentaAtras{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:16px;

    padding:50px 80px;

    border-radius:32px;

    background:linear-gradient(160deg, #3a2005, #170d02);

    border:3px solid var(--ambar);

    box-shadow:0 0 110px rgba(var(--ambar-rgb),.35), 0 25px 60px rgba(0,0,0,.6);

}


.cuentaAtrasInsignia{

    width:90px;

    height:90px;

    border-radius:50%;

    background:rgba(10,10,10,.6);

    border:3px solid var(--ambar);

    display:flex;

    align-items:center;

    justify-content:center;

}


.cuentaAtrasInsignia img{

    width:60%;

    height:60%;

    object-fit:contain;

}


.cuentaAtrasFrase{

    font-family:var(--fuente-display);

    font-size:34px;

    letter-spacing:1px;

    color:var(--ambar);

    text-align:center;

}


.cuentaAtrasTiempo{

    font-family:var(--fuente-display);

    font-size:130px;

    letter-spacing:2px;

    color:#fff;

    line-height:1;

}


.cuentaAtrasTexto{

    font-size:18px;

    color:var(--texto-tenue);

    text-align:center;

    max-width:600px;

}


.cuentaAtrasFin .cuentaAtrasTiempo{

    animation:parpadeoCuentaAtras .3s steps(1) infinite;

}


@keyframes parpadeoCuentaAtras{

    0%,50%{ opacity:1; }

    51%,100%{ opacity:0; }

}




/* ==================================
   ESTADÍSTICAS POR EVENTO (modal del calendario, dashboard.html)
   ================================== */


.tarjetaEventoStats{

    display:flex;

    flex-wrap:wrap;

    gap:8px 18px;

    margin:10px 0;

    padding:10px 0;

    border-top:1px solid var(--borde);

    border-bottom:1px solid var(--borde);

}


.statItem{

    font-size:13px;

    color:var(--texto);

}


.statItem strong{

    font-weight:700;

}


.statVerde{

    color:#4ADE80;

}


.statRojo{

    color:var(--oxido);

}


.statAmarillo{

    color:var(--ambar);

}


.statAviso{

    color:var(--texto-tenue);

    font-size:13px;

}




/* ==================================
   HISTORIAL DE MENSAJES (dashboard.html)
   ================================== */


.itemHistorial{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:12px;

    padding:10px;

    border-bottom:1px solid var(--borde);

}


.checkHistorialLabel{

    display:flex;

    align-items:center;

    flex-shrink:0;

}


.checkHistorial{

    width:20px;

    height:20px;

    cursor:pointer;

    accent-color:var(--ambar);

}


.badgeHistorial{

    font-size:12px;

    padding:4px 10px;

    border-radius:20px;

    white-space:nowrap;

    border:1px solid var(--borde);

    flex-shrink:0;

}


.historialMeta{

    display:flex;

    flex-direction:column;

    align-items:flex-end;

    gap:6px;

    flex-shrink:0;

}


.fechaHistorial{

    font-size:11px;

    color:var(--texto-tenue);

    white-space:nowrap;

}


@media(max-width:480px){

.historialMeta{

    flex-direction:row;

    justify-content:space-between;

    width:100%;

    margin-left:52px;

}

}


.badgeVerde{

    color:#4ADE80;

    border-color:#4ADE80;

}


.badgeRojo{

    color:var(--oxido);

    border-color:var(--oxido);

}


.badgeBlanco{

    color:var(--texto-tenue);

    border-color:var(--borde);

}


#listaHistorial{

    max-height:45vh;

    overflow-y:auto;

}


/* ==================================
   TABLAS Y PESTAÑAS — modales de Usuarios / Registros (solo superadmin)
   ================================== */

.sfTablaWrapApp{
    max-height:280px;
    overflow-y:auto;
    border:1px solid var(--borde);
    border-radius:10px;
    margin-top:10px;
}

.sfTablaApp{
    width:100%;
    border-collapse:collapse;
    font-size:13px;
}

.sfTablaApp th{
    text-align:left;
    padding:10px 12px;
    color:var(--texto-tenue);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.03em;
    border-bottom:1px solid var(--borde);
    position:sticky;
    top:0;
    background:var(--gris-oscuro);
}

.sfTablaApp td{
    padding:10px 12px;
    border-bottom:1px solid var(--borde);
    color:var(--texto);
}

.sfTablaApp tr:last-child td{
    border-bottom:none;
}

.sfTabsApp{
    display:flex;
    gap:6px;
    margin:14px 0;
    border-bottom:1px solid var(--borde);
}

.sfTabApp{
    background:none;
    border:none;
    color:var(--texto-tenue);
    padding:8px 14px;
    cursor:pointer;
    font-size:13px;
    border-bottom:2px solid transparent;
    margin-bottom:-1px;
}

.sfTabApp.activo{
    color:var(--naranja);
    border-bottom-color:var(--naranja);
}