/* Viu Map · Etapa 21 (3-nov-2026) · EL MODAL DEL CLIMA, Diseño B «Inmersivo» (bocetos 21 aprobados por Jaime).
   Todo el modal es el cielo del momento; los datos van en tarjetas translúcidas, SIN desenfoque (backdrop-filter
   pesa en los móviles). El cielo se queda quieto detrás y solo se desplaza el contenido. Sin animaciones CSS: las
   del dibujo son del propio SVG (ver clima/clima-viu.js). */
#fondoClima .ficha-clima.cv { padding: 0; background: #0b1530; color: #fff; max-width: 400px; width: 100%; overflow: hidden;
    display: flex; flex-direction: column; border-radius: 20px; font-family: 'Inter', sans-serif; position: relative;
    max-height: calc(100dvh - 32px); box-shadow: 0 20px 50px rgba(0,0,0,.35); }
@media (min-width: 720px) { #fondoClima .ficha-clima.cv { max-width: 440px; } }
.cv-cielo { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.cv-cielo > svg { display: block; width: 100%; height: 100%; }
.cv-capa { position: relative; z-index: 1; padding: 16px 14px 14px; overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0; flex: 1 1 auto; }
#fondoClima .cv .cv-x { position: absolute; top: 12px; right: 12px; z-index: 3; width: 30px; height: 30px; border-radius: 50%; padding: 0;
    background: rgba(255,255,255,.25); color: #fff; box-shadow: none; font-size: 15px; display: grid; place-items: center; }
.cv-etq { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .92; padding-right: 40px; }
.cv-arriba { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 2px 0 8px; }
.cv-arriba-txt { min-width: 0; }
.cv-temp { font: 800 72px/1 'Inter', sans-serif; letter-spacing: -2px; text-shadow: 0 2px 12px rgba(0,20,60,.25); }
.cv-desc { font: 700 18px/1.25 'Inter', sans-serif; margin-top: 4px; }
.cv-mm { font-size: 12.5px; opacity: .92; margin-top: 3px; line-height: 1.4; }
.cv-mm span { display: block; }
.cv-ic { flex: none; width: 150px; height: 150px; margin-right: -6px; }
.cv-ic svg { display: block; width: 100%; height: 100%; }

/* La alerta de AEMET en curso (solo la más fuerte, solo en «Hoy») */
.cv-alerta { display: flex; align-items: center; gap: 10px; width: 100%; border: none; text-align: left; border-radius: 14px; padding: 9px 12px; margin: 2px 0 10px;
    box-shadow: 0 4px 14px rgba(0,0,0,.18); cursor: pointer; font-family: 'Inter', sans-serif; }
.cv-alerta[hidden] { display: none; }
.cv-alerta img { width: 26px; height: 26px; flex: none; }
.cv-alerta b { display: block; font-size: 14px; }
.cv-alerta small { display: block; font-size: 11.5px; opacity: .92; margin-top: 1px; }
.cv-alerta .cv-flecha { margin-left: auto; font-size: 22px; font-weight: 700; }
.cv-alerta.amarillo { background: #F9C23C; color: #3d2e00; }
.cv-alerta.naranja { background: #EF7D00; color: #fff; }
.cv-alerta.rojo { background: #C62828; color: #fff; }

/* Los días, en pestañas */
.cv-pest { display: flex; gap: 6px; }
.cv-pest button { flex: 1; min-width: 0; text-align: center; padding: 8px 4px; border-radius: 10px; border: none; font: 700 12.5px 'Inter', sans-serif;
    background: rgba(255,255,255,.16); color: #fff; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-pest button.on { background: #fff; color: #1C3F7A; }

/* Las horas */
.cv-cristal { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.2); border-radius: 14px; margin-top: 8px; padding: 2px 4px; }
.cv-horas { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cv-horas::-webkit-scrollbar { display: none; }
.cv-hora { flex: 0 0 auto; min-width: 44px; text-align: center; border-radius: 12px; padding: 6px 2px 4px; }
.cv-hora.ya { background: rgba(255,255,255,.18); }
.cv-hora span { font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,.85); }
.cv-hora svg { display: block; margin: 2px auto; }
.cv-hora b { display: block; font-size: 14px; }
.cv-hora small { display: block; font-size: 10.5px; font-weight: 700; color: #cfe6ff; min-height: 13px; }

/* Los datos (los iconos de siempre: .clima-chip-icono) */
.cv-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.cv-chip { display: grid; grid-template-columns: 30px 1fr; align-items: center; column-gap: 6px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.2);
    border-radius: 12px; padding: 8px 10px; min-width: 0; }
.cv-chip i { grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.92); display: grid; place-items: center; color: #2f7fe8; font-style: normal; }
.cv-chip i.gris { color: #55646e; }
.cv-chip i .clima-chip-icono { width: 17px; height: 17px; }
.cv-chip b { font-size: 14.5px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-chip small { font-size: 11px; color: rgba(255,255,255,.85); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Sol (de día) o noche, y la luna */
.cv-sol-luna { display: grid; grid-template-columns: 1.35fr 1fr; gap: 6px; margin-top: 6px; }
.cv-sl { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.2); border-radius: 12px; padding: 8px 10px; position: relative; min-width: 0; }
.cv-tt { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.88); }
.cv-sl svg.cv-arco { display: block; width: 100%; height: 72px; }
.cv-hh { display: flex; justify-content: space-between; gap: 6px; font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,.88); margin-top: -6px; line-height: 1.3; }
.cv-luna { text-align: center; background: rgba(10,18,45,.35); }
.cv-luna svg { display: block; margin: 2px auto 0; }
.cv-luna b { display: block; font-size: 12.5px; }
.cv-luna small { font-size: 11px; color: #c9d3ea; line-height: 1.35; display: block; }
.cv-fuente { font-size: 11px; color: rgba(255,255,255,.75); margin-top: 8px; }
@media (max-width: 719px) { .cv-fuente { font-size: 10px; } }   /* Etapa 22b (Jaime): un poco más pequeña, solo en el móvil */

/* Con cielos claros (niebla, bruma, calima y nieve de día), el texto en oscuro para que se lea */
#fondoClima .ficha-clima.cv.claro { color: #1b2a33; }
#fondoClima .cv.claro .cv-temp { text-shadow: none; }
#fondoClima .cv.claro .cv-x { background: rgba(0,0,0,.1); color: #1b2a33; }
#fondoClima .cv.claro .cv-cristal, #fondoClima .cv.claro .cv-chip, #fondoClima .cv.claro .cv-sl:not(.cv-luna) { background: rgba(255,255,255,.55); border-color: rgba(255,255,255,.75); }
#fondoClima .cv.claro .cv-pest button { background: rgba(255,255,255,.5); color: #1b2a33; }
#fondoClima .cv.claro .cv-pest button.on { background: #1C3F7A; color: #fff; }
#fondoClima .cv.claro .cv-hora span, #fondoClima .cv.claro .cv-chip small, #fondoClima .cv.claro .cv-sl:not(.cv-luna) .cv-tt, #fondoClima .cv.claro .cv-sl:not(.cv-luna) .cv-hh, #fondoClima .cv.claro .cv-fuente { color: #55646e; }
#fondoClima .cv.claro .cv-hora small { color: #2f7fe8; }
#fondoClima .cv.claro .cv-hora.ya { background: rgba(255,255,255,.7); }
#fondoClima .cv.claro .cv-luna { background: linear-gradient(#18244d, #2a3a6c); color: #fff; }

/* ══ Etapa 24 (4-nov-2026) · EL ESTADO DEL MAR, opción C (bocetos 24 aprobados por Jaime) ══
   Arriba, la escena: el cielo de ese momento y el mar animado según el oleaje (clima-viu.js, escenaMar), con la
   playa, los días, la mañana/tarde y el agua y el aire en grande. Abajo, los datos en tarjetas blancas sobre azul mar,
   con los iconos de Jaime en su color y las barritas de nivel en azul (el amarillo, naranja y rojo, solo para avisos). */
#fondoFichaMar .ficha-mar.cvm { padding: 0; background: #0b2a4a; color: #fff; max-width: 380px; width: 100%; border-radius: 20px;
    overflow-y: auto; overflow-x: hidden; max-height: calc(100dvh - 32px); box-shadow: 0 20px 50px rgba(0,0,0,.35);
    font: 13.5px/1.35 'Inter', sans-serif; position: relative; -webkit-overflow-scrolling: touch; }
@media (min-width: 720px) { #fondoFichaMar .ficha-mar.cvm { max-width: 400px; } }
.cvm-escena { position: relative; height: 320px; overflow: hidden; }
.cvm-dibujo { position: absolute; inset: 0; pointer-events: none; }
.cvm-dibujo > svg { display: block; width: 100%; height: 100%; }
#fondoFichaMar .cvm .cvm-x { position: absolute; top: 12px; right: 12px; z-index: 3; width: 30px; height: 30px; border-radius: 50%; padding: 0;
    background: rgba(255,255,255,.25); color: #fff; box-shadow: none; font-size: 15px; display: grid; place-items: center; border: none; }
.cvm-arriba { position: absolute; left: 16px; right: 16px; top: 14px; z-index: 2; }
.cvm-etq { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .92; padding-right: 40px; }
#fondoFichaMar .cvm h2.cvm-tit { font: 800 19px/1.25 'Inter', sans-serif; margin: 2px 0 0; color: #fff; text-transform: none; letter-spacing: 0;
    text-shadow: 0 1px 6px rgba(0,20,60,.25); padding-right: 40px; }
.cvm-pest { display: flex; gap: 6px; margin-top: 10px; }
.cvm-pest[hidden] { display: none; }
.cvm-pest button { flex: 1; min-width: 0; text-align: center; padding: 7px 4px; border-radius: 10px; border: none; font: 700 12.5px 'Inter', sans-serif;
    background: rgba(255,255,255,.18); color: #fff; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cvm-pest button.on { background: #fff; color: #0b4f86; }
.cvm-mom { display: inline-flex; gap: 4px; margin-top: 8px; background: rgba(255,255,255,.16); border-radius: 10px; padding: 3px; }
.cvm-mom:empty { display: none; }
.cvm-mom button { padding: 4px 12px; border-radius: 8px; border: none; background: transparent; font: 700 11.5px 'Inter', sans-serif; color: #fff; cursor: pointer; }
.cvm-mom button.on { background: rgba(255,255,255,.92); color: #0b4f86; }
.cvm-temps { position: absolute; left: 16px; bottom: 14px; z-index: 2; display: flex; gap: 16px; align-items: flex-end;
    text-shadow: 0 2px 10px rgba(0,30,60,.55), 0 0 2px rgba(0,30,60,.4); pointer-events: none; }
.cvm-t b { display: block; font: 800 52px/1 'Inter', sans-serif; letter-spacing: -1.5px; }
.cvm-t > span { display: flex; align-items: center; gap: 5px; font: 700 12px 'Inter', sans-serif; margin-top: 4px; opacity: .95; }
.cvm-t img { width: 16px; height: 16px; }
.cvm-sep { width: 1px; height: 46px; background: rgba(255,255,255,.4); margin-bottom: 8px; }
.cvm-cuerpo { padding: 12px 14px 14px; background: linear-gradient(#0b4f86, #0a3c68); }
.cvm-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cvm-card { display: grid; grid-template-columns: 34px 1fr; column-gap: 8px; align-items: center; border-radius: 12px; padding: 8px 10px;
    background: #fff; color: #1b2a33; box-shadow: 0 2px 6px rgba(0,25,60,.18); min-width: 0; }
.cvm-card img { grid-row: span 3; width: 34px; height: 34px; object-fit: contain; }
.cvm-card small { font: 800 10px/1.25 'Inter', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #6b7a85; min-width: 0; }   /* Etapa 25: «Sensación térmica» entera, en dos líneas si hace falta */
.cvm-card b { font: 700 14.5px/1.25 'Inter', sans-serif; min-width: 0; }
.cvm-niv { display: flex; gap: 3px; margin-top: 3px; }
.cvm-niv i { width: 16px; height: 4px; border-radius: 2px; background: #dfe4ea; }
.cvm-niv.n1 i:nth-child(-n+1), .cvm-niv.n2 i:nth-child(-n+2), .cvm-niv.n3 i:nth-child(-n+3) { background: #2f7fe8; }
.cvm-aviso { grid-column: 1 / -1; background: #fff; color: #1b2a33; border-radius: 12px; padding: 10px 12px; box-shadow: 0 2px 6px rgba(0,25,60,.18); }
.cvm-franja { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.cvm-franja:empty { display: none; }
.cvm-fr { border-radius: 12px; padding: 8px 8px; display: flex; align-items: center; gap: 6px; background: #fff; color: #1b2a33; border: none;
    box-shadow: 0 2px 6px rgba(0,25,60,.18); text-align: left; font-family: 'Inter', sans-serif; cursor: pointer; min-width: 0; }
.cvm-fr.on { background: #e6f2fb; box-shadow: inset 0 0 0 1.5px #5aa8e0, 0 2px 6px rgba(0,25,60,.18); }
.cvm-fr svg { flex: none; }
.cvm-fr > span { min-width: 0; }
.cvm-fr .n { display: block; font: 800 10.5px 'Inter', sans-serif; letter-spacing: .03em; text-transform: uppercase; color: #55646e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cvm-fr .d { font-size: 12px; margin-top: 1px; }
.cvm-fuente { font-size: 10.5px; color: rgba(255,255,255,.75); margin-top: 8px; }
@media (max-width: 719px) { .cvm-fuente { font-size: 10px; } }
/* El Marenyet (sin datos de playa en AEMET): sin escena, solo los datos del clima de Cullera */
.cvm.sin-escena .cvm-escena { height: auto; background: linear-gradient(#0b4f86, #0b4f86); padding-bottom: 14px; }
.cvm.sin-escena .cvm-arriba { position: relative; left: 0; right: 0; top: 0; padding: 14px 16px 0; }
.cvm.sin-escena .cvm-temps, .cvm.sin-escena .cvm-dibujo { display: none; }