/*
 * MeteoArchidona
 * Página En vivo
 *
 * Estilos exclusivos de:
 *
 *     pages/en-vivo.html
 *
 * Su cabecera es propia (.cabecera-en-vivo) y no la comparte
 * con el resto del sitio.
 *
 * La página admite:
 *
 * - streaming HLS propio de MeteoArchidona;
 * - streaming externo mediante iframe;
 * - webcams mediante imágenes remotas;
 * - imágenes locales.
 */

/* La paleta está en css/paleta.css, que se carga antes que esta hoja. */


/* =========================================================
   BASE
   ========================================================= */

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    min-height:100vh;
    min-height:100dvh;
    font-family:"Sora",system-ui,sans-serif;
    color:var(--white);
    background:
        radial-gradient(
            circle at 15% 0%,
            rgba(54,217,255,.10),
            transparent 32%
        ),
        radial-gradient(
            circle at 90% 8%,
            rgba(242,191,88,.09),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            var(--bg-alt) 0%,
            var(--bg-deep) 100%
        );
}

button,
select,
a{
    font:inherit;
}

.pagina{
    width:min(
        1500px,
        calc(100% - 48px)
    );
    margin:0 auto;
    padding:42px 0 72px;
}


/* =========================================================
   CABECERA
   ========================================================= */

.cabecera-en-vivo{
    position:relative;
    overflow:hidden;
    display:grid;
    grid-template-columns:
        minmax(0,1.35fr)
        minmax(300px,.65fr);
    gap:38px;
    align-items:center;
    min-height:300px;
    padding:44px;
    border:1px solid var(--border-subtle);
    border-radius:var(--radius-lg);
    background:
        linear-gradient(
            135deg,
            rgba(14,31,53,.96),
            rgba(7,19,35,.96)
        );
    box-shadow:var(--shadow-deep);
}

.cabecera-en-vivo::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(
            90deg,
            rgba(54,217,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            rgba(54,217,255,.035) 1px,
            transparent 1px
        );
    background-size:44px 44px;
    mask-image:
        linear-gradient(
            to right,
            black,
            transparent 72%
        );
}

.cabecera-texto{
    position:relative;
    z-index:2;
}

.eyebrow{
    display:inline-flex;
    gap:10px;
    align-items:center;
    margin-bottom:16px;
    font-family:"JetBrains Mono",monospace;
    font-size:.78rem;
    font-weight:600;
    letter-spacing:.14em;
    color:var(--cyan-bright);
}

.punto-directo{
    width:9px;
    height:9px;
    border-radius:50%;
    background:var(--cyan-bright);
    box-shadow:
        0 0 0 7px rgba(54,217,255,.09),
        0 0 20px rgba(54,217,255,.65);
    animation:
        pulso 2s ease-in-out infinite;
}

.cabecera-en-vivo h1{
    max-width:760px;
    margin:0 0 18px;
    font-size:
        clamp(
            2.7rem,
            5vw,
            5.2rem
        );
    line-height:.95;
    letter-spacing:-.055em;
}

.cabecera-en-vivo h1 span{
    color:var(--amber);
}

.cabecera-en-vivo p{
    max-width:760px;
    margin:0;
    font-size:
        clamp(
            1rem,
            1.4vw,
            1.15rem
        );
    line-height:1.75;
    color:var(--text-soft);
}

.cabecera-dibujo{
    position:relative;
    z-index:2;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:220px;
}

.escena{
    position:relative;
    width:290px;
    height:220px;
}

.radar{
    position:absolute;
    width:190px;
    height:190px;
    left:50%;
    top:50%;
    transform:
        translate(
            -50%,
            -50%
        );
    border:
        1px solid
        rgba(54,217,255,.22);
    border-radius:50%;
}

.radar::before,
.radar::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    transform:
        translate(
            -50%,
            -50%
        );
    border-radius:50%;
    border:
        1px solid
        rgba(54,217,255,.18);
}

.radar::before{
    width:125px;
    height:125px;
}

.radar::after{
    width:65px;
    height:65px;
}

.barrido{
    position:absolute;
    left:50%;
    top:50%;
    width:95px;
    height:95px;
    transform-origin:0 0;
    background:
        linear-gradient(
            35deg,
            rgba(54,217,255,.34),
            transparent 70%
        );
    clip-path:
        polygon(
            0 0,
            100% 0,
            0 100%
        );
    animation:
        barrido 4.6s linear infinite;
}

.camara-dibujo{
    position:absolute;
    left:50%;
    top:50%;
    transform:
        translate(
            -50%,
            -50%
        );
    width:114px;
    height:76px;
    border:2px solid var(--amber);
    border-radius:19px;
    background:
        linear-gradient(
            145deg,
            #192f48,
            #091726
        );
    box-shadow:
        0 18px 45px rgba(0,0,0,.36),
        0 0 35px rgba(242,191,88,.10);
}

.camara-dibujo::before{
    content:"";
    position:absolute;
    left:18px;
    top:50%;
    width:44px;
    height:44px;
    transform:
        translateY(-50%);
    border:
        5px solid
        #07111f;
    border-radius:50%;
    background:
        radial-gradient(
            circle at 38% 35%,
            var(--cyan-bright) 0 7%,
            #223d5d 8% 28%,
            #050d17 29% 62%,
            var(--amber) 63% 68%,
            #081421 69%
        );
}

.camara-dibujo::after{
    content:"";
    position:absolute;
    right:18px;
    top:19px;
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--mint);
    box-shadow:
        0 0 15px
        rgba(103,232,165,.75);
}

.soporte-camara{
    position:absolute;
    width:10px;
    height:54px;
    left:50%;
    bottom:17px;
    transform:
        translateX(-50%);
    background:
        linear-gradient(
            var(--amber),
            rgba(242,191,88,.35)
        );
    border-radius:6px;
}

.soporte-camara::after{
    content:"";
    position:absolute;
    width:80px;
    height:8px;
    left:50%;
    bottom:-2px;
    transform:
        translateX(-50%);
    border-radius:10px;
    background:var(--amber);
}


/* =========================================================
   SELECTOR
   ========================================================= */

.selector-panel{
    margin-top:30px;
    padding:24px;
    border:
        1px solid
        var(--border-subtle);
    border-radius:var(--radius-lg);
    background:var(--panel);
    box-shadow:var(--shadow-deep);
}

.selector-contenido{
    display:grid;
    grid-template-columns:
        minmax(0,1fr)
        minmax(280px,440px);
    gap:24px;
    align-items:end;
}

.selector-texto h2{
    margin:0 0 8px;
    font-size:
        clamp(
            1.25rem,
            2vw,
            1.7rem
        );
    letter-spacing:-.035em;
}

.selector-texto p{
    margin:0;
    color:var(--text-faint);
    line-height:1.65;
}

.selector-control label{
    display:block;
    margin-bottom:8px;
    font-family:"JetBrains Mono",monospace;
    font-size:.74rem;
    font-weight:600;
    letter-spacing:.08em;
    color:var(--amber);
}

.selector-control select{
    width:100%;
    appearance:none;
    padding:
        15px
        48px
        15px
        16px;
    border:
        1px solid
        var(--border-cyan);
    border-radius:var(--radius-sm);
    color:var(--white);
    outline:none;
    cursor:pointer;

    background:
        linear-gradient(
            45deg,
            transparent 50%,
            var(--cyan-bright) 50%
        )
        calc(100% - 21px)
        calc(50% - 2px)
        / 6px 6px
        no-repeat,

        linear-gradient(
            135deg,
            var(--cyan-bright) 50%,
            transparent 50%
        )
        calc(100% - 15px)
        calc(50% - 2px)
        / 6px 6px
        no-repeat,

        linear-gradient(
            180deg,
            rgba(19,43,67,.98),
            rgba(10,28,46,.98)
        );
}

.selector-control select option{
    background:#0f2438;
    color:var(--white);
}

.selector-control select option:checked{
    background:#16324c;
    color:var(--cyan-bright);
}

.selector-control select:focus{
    border-color:var(--cyan-bright);
    box-shadow:
        0 0 0 4px
        rgba(54,217,255,.10);
}


/* =========================================================
   ZONA
   ========================================================= */

.seccion-camaras{
    margin-top:38px;
}

.cabecera-zona{
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:flex-end;
    margin:
        0
        4px
        18px;
}

.cabecera-zona h2{
    margin:0;
    font-size:
        clamp(
            1.6rem,
            2.3vw,
            2.15rem
        );
    letter-spacing:-.04em;
}

.cabecera-zona p{
    max-width:760px;
    margin:8px 0 0;
    color:var(--text-faint);
    line-height:1.65;
}

.contador-zona{
    flex:0 0 auto;
    padding:8px 12px;
    border:
        1px solid
        var(--border-amber);
    border-radius:999px;
    font-family:"JetBrains Mono",monospace;
    font-size:.72rem;
    color:var(--amber);
}


/* =========================================================
   TARJETAS
   ========================================================= */

.rejilla-camaras{
    display:grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );
    gap:22px;
}

.tarjeta-camara{
    overflow:hidden;
    border:
        1px solid
        var(--border-subtle);
    border-radius:var(--radius-lg);
    background:var(--panel);
    box-shadow:var(--shadow-deep);
}


/* =========================================================
   VISOR
   ========================================================= */

.visor-camara{
    position:relative;
    overflow:hidden;
    width:100%;
    aspect-ratio:16/9;
    background:#000;
}

.visor-camara iframe,
.visor-camara img,
.visor-camara video{
    display:block;
    width:100%;
    height:100%;
    border:0;
}


/* =========================================================
   IFRAMES E IMÁGENES
   ========================================================= */

.visor-camara iframe,
.visor-camara img{
    object-fit:cover;
}


/* =========================================================
   VÍDEO HLS METEOCAM
   ========================================================= */

.visor-camara-hls{
    background:#000;
}

.visor-camara-hls video{
    position:relative;
    z-index:1;
    object-fit:contain;
    background:#000;
}

.visor-camara-hls video:focus{
    outline:none;
}


/* =========================================================
   SUPERPOSICIONES METEOCAM
   ========================================================= */

.marca-meteocam{
    position:absolute;
    z-index:4;
    left:14px;
    bottom:14px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    pointer-events:none;
    user-select:none;
    opacity:.90;
}

.marca-meteocam img{
    display:block;
    width:auto;
    height:34px;
    max-width:140px;
    object-fit:contain;
    filter:
        drop-shadow(
            0 2px 4px
            rgba(0,0,0,.78)
        )
        drop-shadow(
            0 0 8px
            rgba(0,0,0,.42)
        );
}


/* =========================================================
   ESTADO DEL VISOR
   ========================================================= */

.estado-visor{
    position:absolute;
    z-index:5;
    left:16px;
    top:16px;
    display:inline-flex;
    gap:8px;
    align-items:center;
    max-width:
        calc(100% - 32px);
    padding:8px 11px;
    border:
        1px solid
        rgba(255,255,255,.14);
    border-radius:999px;
    font-family:"JetBrains Mono",monospace;
    font-size:.69rem;
    font-weight:600;
    letter-spacing:.06em;
    color:var(--white);
    background:
        rgba(3,9,20,.80);
    backdrop-filter:
        blur(10px);
    pointer-events:none;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.estado-visor::before{
    content:"";
    flex:0 0 auto;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--cyan-bright);
    box-shadow:
        0 0 12px
        rgba(54,217,255,.75);
}

.estado-visor.imagen::before{
    background:var(--amber);
    box-shadow:
        0 0 12px
        rgba(242,191,88,.70);
}

.estado-visor.proximamente::before{
    background:var(--mint);
    box-shadow:
        0 0 12px
        rgba(103,232,165,.70);
}


.visor-camara-hls .estado-visor-hls{
    padding:0;
    border:0;
    border-radius:0;
    color:var(--cyan-bright);
    background:transparent;
    backdrop-filter:none;
    text-shadow:
        0 1px 3px rgba(0,0,0,.95),
        0 0 8px rgba(0,0,0,.78);
}

.visor-camara-hls .estado-visor-hls::before{
    width:8px;
    height:8px;
    background:var(--cyan-bright);
    box-shadow:
        0 0 4px rgba(54,217,255,.95),
        0 0 12px rgba(54,217,255,.80);
}


/* =========================================================
   ERROR DE MEDIO
   ========================================================= */

.media-error{
    position:absolute;
    inset:0;
    z-index:3;
    display:none;
    place-items:center;
    padding:28px;
    text-align:center;
    color:var(--text-soft);
    background:
        linear-gradient(
            145deg,
            rgba(13,32,51,.97),
            rgba(5,11,18,.98)
        );
}

.media-error.visible{
    display:grid;
}

.media-error > div{
    max-width:440px;
}

.media-error strong{
    display:block;
    margin-bottom:7px;
    color:var(--white);
}

.media-error span{
    display:block;
    line-height:1.6;
}


/* =========================================================
   CUERPO DE LA TARJETA
   ========================================================= */

.cuerpo-camara{
    padding:
        22px
        22px
        24px;
}

.fila-titulo{
    display:flex;
    justify-content:space-between;
    gap:18px;
    align-items:flex-start;
}

.titulo-camara{
    min-width:0;
}

.titulo-camara h3{
    margin:0;
    font-size:
        clamp(
            1.15rem,
            1.7vw,
            1.45rem
        );
    letter-spacing:-.035em;
}

.ubicacion-camara{
    margin-top:6px;
    font-family:
        "JetBrains Mono",
        monospace;
    font-size:.77rem;
    color:var(--cyan-bright);
}

.tipo-camara{
    flex:0 0 auto;
    max-width:48%;
    padding:7px 10px;
    border:
        1px solid
        var(--border-amber);
    border-radius:999px;
    font-family:
        "JetBrains Mono",
        monospace;
    font-size:.68rem;
    color:var(--amber);
    text-align:center;
}

.descripcion-camara{
    margin:17px 0 0;
    color:var(--text-soft);
    line-height:1.65;
}


/* =========================================================
   PIE DE LA TARJETA
   ========================================================= */

.pie-camara{
    display:flex;
    justify-content:space-between;
    gap:16px;
    align-items:center;
    margin-top:20px;
    padding-top:16px;
    border-top:
        1px solid
        var(--border-subtle);
}

.fuente{
    color:var(--text-faint);
    font-size:.82rem;
}

.fuente strong{
    color:var(--text-soft);
}

.fuente a{
    color:var(--amber-light);
    text-decoration:none;
}

@media (hover:hover){

    .fuente a:hover,
    .fuente a:focus-visible{
        text-decoration:underline;
    }

}


/* =========================================================
   NOTA DEL PROVEEDOR
   ========================================================= */

.nota-proveedor{
    margin-top:24px;
    padding:16px 18px;
    border:
        1px solid
        var(--border-subtle);
    border-radius:var(--radius);
    color:var(--text-faint);
    background:
        rgba(10,24,40,.72);
    font-size:.84rem;
    line-height:1.65;
}

.nota-proveedor strong{
    color:var(--text-soft);
}


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

@keyframes pulso{

    0%,
    100%{
        opacity:1;
    }

    50%{
        opacity:.55;
    }

}

@keyframes barrido{

    from{
        transform:
            rotate(0deg);
    }

    to{
        transform:
            rotate(360deg);
    }

}


/* =========================================================
   RESPONSIVE · TABLET
   ========================================================= */

@media(max-width:980px){

    .cabecera-en-vivo{
        grid-template-columns:1fr;
        padding:34px;
    }

    .cabecera-dibujo{
        display:none;
    }

    .selector-contenido{
        grid-template-columns:1fr;
    }

    .rejilla-camaras{
        grid-template-columns:1fr;
    }

}


/* =========================================================
   RESPONSIVE · MÓVIL
   ========================================================= */

@media(max-width:640px){

    .pagina{
        width:
            calc(100% - 24px);
        padding:
            18px
            0
            44px;
    }

    .cabecera-en-vivo{
        min-height:0;
        padding:
            26px
            22px;
        border-radius:22px;
    }

    .cabecera-en-vivo h1{
        font-size:
            clamp(
                2.35rem,
                13vw,
                3.5rem
            );
    }

    .selector-panel{
        margin-top:18px;
        padding:18px;
        border-radius:22px;
    }

    .seccion-camaras{
        margin-top:28px;
    }

    .cabecera-zona{
        display:block;
    }

    .contador-zona{
        display:inline-flex;
        margin-top:13px;
    }

    .rejilla-camaras{
        gap:18px;
    }

    .tarjeta-camara{
        border-radius:22px;
    }

    .estado-visor{
        left:12px;
        top:12px;
        max-width:
            calc(100% - 24px);
        padding:7px 9px;
        font-size:.63rem;
    }

    .visor-camara-hls .estado-visor-hls{
        padding:0;
        border:0;
        border-radius:0;
        color:var(--cyan-bright);
        background:transparent;
        backdrop-filter:none;
    }

    .marca-meteocam{
        left:10px;
        bottom:10px;
        opacity:.88;
    }

    .marca-meteocam img{
        height:28px;
        max-width:112px;
    }

    .cuerpo-camara{
        padding:18px;
    }

    .fila-titulo{
        display:block;
    }

    .tipo-camara{
        display:inline-flex;
        max-width:100%;
        margin-top:12px;
    }

    .pie-camara{
        display:block;
    }

}


/* Fin de fichero */
/* Fin archivo: css/en-vivo.css */