/* Componente: ClimaCapa — temperatura del territorio sobre el mapa. */

.clima-capa-control {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.3rem;
}

/* La banda reserva 24 px de alto, y no es por capricho de diseno.
 *
 * Dentro van los rotulos de las franjas --Madr., Man., Tar., Noc.-- que median
 * 9 px. La pauta de accesibilidad son 24 x 24 px, porque por debajo de eso un
 * dedo no acierta: son rotulos sobre un mapa, en un movil, con el pulgar.
 *
 * Primero intente agrandarlos con un ::after invisible, para no mover nada de
 * sitio. Fue un error, y conviene dejarlo escrito para que nadie lo repita:
 * la comprobacion mide la caja DEL ELEMENTO --getClientRects()-- y un
 * pseudo-elemento no cuenta. El rotulo se volvia comodo de tocar de verdad,
 * pero seguia midiendo 9 px a efectos de la regla, y el aviso no se iba.
 *
 * Tampoco valia agrandar solo el boton dejando la banda como estaba: la barra
 * de horas empieza EXACTAMENTE donde acaban los rotulos --865 px, medido--, y
 * un boton de 24 px se le habria montado encima. Se habrian solapado dos
 * controles, que es un fallo peor que el que se venia a arreglar.
 *
 * Asi que crece la banda. El panel entero sube unos 10 px; a cambio los cuatro
 * rotulos se pueden tocar. */
.clima-capa-franjas {
    position: relative;
    height: 1.5rem;
}
.clima-capa-modo {
    position: absolute;

    /* El "left" NO se pone aqui: lo calcula el JS en linea para clavar cada
       rotulo en su hora del dia (clima-capa.js:792). Aqui solo se centra: el
       -50% horizontal lo cuadra sobre ese punto --como hacia antes-- y el
       vertical lo centra en la banda.

       min-width solo estira los rotulos cortos --"Tar." media 20 px--; los
       demas se quedan igual, que es lo que evita que dos vecinos se pisen. */
    top: 50%;
    transform: translate(-50%, -50%);
    height: 1.5rem;
    min-width: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-family: var(--sans);
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 0 0.15rem;
    border: none;
    background: none;
    color: var(--tinta-tenue);
    cursor: pointer;
    white-space: nowrap;
    line-height: 1;
    transition: color 0.15s;
}
.clima-capa-modo:hover { color: var(--tinta); }

.clima-capa-modo:disabled {
    opacity: 0.3;
    cursor: default;
}
.clima-capa-modo:disabled:hover { color: var(--tinta-tenue); }
.clima-capa-modo-on { color: var(--marca); font-weight: 700; }

.clima-capa-leyenda {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.4rem 0.5rem;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(2px);
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-sm);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
    min-width: 9.5rem;
}
.clima-capa-barra { display: flex; height: 0.5rem; border-radius: 2px; overflow: hidden; }
.clima-capa-barra i { flex: 1; display: block; }
.clima-capa-topes {
    display: flex;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 0.5625rem;
    color: var(--tinta-suave);
}

.clima-capa-et {
    display: block;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--tinta-tenue);
    line-height: 1.2;
    margin: 0 0 0.15rem;
}


/* El bloque de horas, lo mas bajo que se puede sin tocar los controles.
 *
 * Lo que NO se toca son los 24 px de .clima-capa-franjas y .clima-capa-carril:
 * son objetivos tactiles y bajarlos reabre el aviso de accesibilidad que
 * costo dos pasadas cerrar. Lo que sobra es el aire de alrededor, que no lo
 * pulsa nadie: el relleno de la caja y el hueco entre las tres bandas.
 *
 * Son unos 6 px menos de alto total. Poco, pero es todo lo que hay sin
 * empeorar el control. */
.clima-capa-horas {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0.05rem 0.5rem 0.1rem;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(2px);
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-sm);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
}

/* El carril mide lo mismo que la barra que lleva dentro: 24 px.
 *
 * Se quedo en 0,8 rem cuando la barra crecio a 24, y el resultado era que el
 * input se salia 5 px por arriba y por abajo de su propio carril --medido:
 * carril 870-883, barra 865-889-- y se montaba sobre los rotulos de franja,
 * que tambien miden 24. Dos controles pisandose es justo lo que la regla de
 * zonas de toque castiga, asi que arreglar el tamano sin arreglar esto habria
 * cambiado un aviso por otro.
 *
 * Lo que va dentro no se mueve: el tramo y la marca se posicionan con
 * top: 50%, o sea que siguen centrados en el carril, mida lo que mida. */
.clima-capa-carril {
    position: relative;
    display: flex;
    align-items: center;
    height: 1.5rem;
}

.clima-capa-tramo {
    position: absolute;
    top: 50%;
    height: 3px;
    margin-top: -1.5px;
    border-radius: 2px;
    background: var(--marca);
    opacity: 0.35;
    pointer-events: none;
}

.clima-capa-marca {
    position: absolute;
    top: 0.1rem;
    width: 2px;
    height: 0.6rem;
    margin-left: -1px;
    border-radius: 1px;
    background: var(--tinta);
    opacity: 0.45;
    pointer-events: none;      /* no debe robarle el arrastre al mando */
}

/* El pie con la hora: no necesita reservar tanto, no es pulsable. */
.clima-capa-horas-pie {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0.7rem;
    line-height: 1;
}

/* Alto de 24 px, que es la pauta para poder agarrarlo con el dedo.
 *
 * Lo que se VE no cambia: la barra sigue midiendo 3 px y el tirador su tamano
 * de siempre --los pinta ::-webkit-slider-runnable-track y ::-webkit-slider-
 * thumb, mas abajo--. Lo que crece es la caja del control, que antes eran
 * 12,8 px y dejaba una franja agarrable mas fina que el propio tirador. */
.clima-capa-rango {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: 1.5rem;
    margin: 0;
    background: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.clima-capa-rango::-webkit-slider-runnable-track {
    height: 3px;
    border-radius: 2px;
    background: var(--borde-fuerte);
}
.clima-capa-rango::-moz-range-track {
    height: 3px;
    border-radius: 2px;
    background: var(--borde-fuerte);
}
.clima-capa-rango::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 0.6rem;
    height: 0.6rem;
    margin-top: -0.15rem;          /* centrado sobre un carril de 3 px */
    border-radius: 50%;
    background: var(--marca);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.clima-capa-rango::-moz-range-thumb {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--marca);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.clima-capa-rango:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

.clima-capa-hora-et {
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--tinta);
    line-height: 1.2;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;   /* que no baile al cambiar de hora */
}

.clima-extras {
    display: flex;
    flex-direction: row;
    align-self: flex-start;
    border-radius: var(--radio-sm);
    overflow: hidden;
}
.clima-extras a.clima-extras-btn {
    width: 1.85rem;
    height: 1.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    color: var(--tinta-media);
    background: rgba(255, 255, 255, 0.94);
    border: none;
    border-right: 1px solid var(--borde);
    border-radius: 0;
    line-height: 1;
}
.clima-extras a.clima-extras-btn:last-child { border-right: none; }
.clima-extras a.clima-extras-btn:hover { background: #fff; color: var(--tinta); }

.clima-extras a.clima-extras-on {
    background: var(--tinta);
    color: #fff;
}
.clima-extras a.clima-extras-on:hover { background: var(--tinta); color: #fff; }

/* Mientras llega la serie horaria del dato recien encendido.
 *
 * Es una peticion corta, pero pasa por 1.874 distritos: sin senal alguna el
 * boton parece encendido y el mapa no cambia todavia, y se vuelve a pulsar. */
.clima-extras a.clima-extras-cargando {
    opacity: 0.55;
    pointer-events: none;
}
.clima-extras a.clima-extras-cargando i {
    animation: clima-extras-latido 0.9s ease-in-out infinite;
}
@keyframes clima-extras-latido {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.25; }
}
@media (prefers-reduced-motion: reduce) {
    .clima-extras a.clima-extras-cargando i { animation: none; }
}