.cabecera-pagina {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 24px;
}

.cabecera-pagina h1 {
    margin: 0;
    color: #183a52;
    font-size: 36px;
}

.localizacion-pagina {
    margin: 5px 0 0;
    color: #687c88;
    font-size: 15px;
}

.actualizacion-datos {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #60727c;
    font-size: 13px;
}

.punto-directo {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #39ad59;
    box-shadow: 0 0 0 4px rgba(57, 173, 89, 0.12);
}

.panel-meteo {
    display: grid;
    grid-template-columns: 41% 59%;
    min-height: 365px;
    overflow: hidden;
    border-radius: 18px;
    background: #ffffff;
    box-shadow:
        0 2px 8px rgba(33, 73, 101, 0.04),
        0 12px 30px rgba(33, 73, 101, 0.065);
}

.panel-meteo-izquierda {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    align-items: center;
    gap: 24px;
    padding: 34px 34px 34px 38px;
    background:
        linear-gradient(
            145deg,
            rgba(103, 160, 205, 0.085),
            rgba(255, 255, 255, 0.00)
        );
}

.estado-meteo {
    text-align: center;
}

.icono-tiempo-demo {
    position: relative;
    width: 120px;
    height: 82px;
    margin: 0 auto 10px;
}

.sol-demo {
    position: absolute;
    left: 11px;
    top: 5px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #ffbe33;
    box-shadow: 0 0 0 9px rgba(255, 190, 51, 0.13);
}

.nube-demo {
    position: absolute;
    background: #ffffff;
    border: 3px solid #d7e2e9;
    border-radius: 32px;
}

.nube-demo-a {
    width: 83px;
    height: 38px;
    left: 31px;
    bottom: 7px;
}

.nube-demo-b {
    width: 54px;
    height: 32px;
    left: 61px;
    bottom: 27px;
}

.estado-texto {
    color: #28495e;
    font-size: 18px;
    font-weight: 700;
}

.lectura-principal {
    min-width: 0;
}

.temperatura-linea {
    display: flex;
    align-items: flex-start;
    line-height: 1;
}

.temperatura-valor {
    color: #153a55;
    font-size: 88px;
    font-weight: 700;
    letter-spacing: -4px;
}

.temperatura-unidad {
    margin: 10px 0 0 7px;
    color: #58717f;
    font-size: 30px;
}

.icono-svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icono-humedad {
    width: 19px;
    height: 24px;
    color: #3c94d8;
    fill: currentColor;
    stroke: none;
}

.humedad-principal {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
    color: #4d6878;
    font-size: 15px;
}

.humedad-principal strong {
    color: #1d5272;
    font-size: 21px;
}

.sensacion {
    margin-top: 8px;
    color: #738690;
    font-size: 13px;
}

.extremos {
    display: flex;
    gap: 26px;
    margin-top: 21px;
}

.extremo {
    display: flex;
    align-items: center;
    gap: 8px;
}

.extremo small {
    display: block;
    color: #7c8c94;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.extremo strong {
    font-size: 15px;
}

.flecha-extremo {
    font-size: 21px;
    font-weight: 700;
}

.extremo-max strong,
.extremo-max .flecha-extremo {
    color: #d8453f;
}

.extremo-min strong,
.extremo-min .flecha-extremo {
    color: #2f80c2;
}

.panel-meteo-derecha {
    display: grid;
    grid-template-columns: 1fr 1.22fr;
    align-content: center;
    column-gap: 44px;
    row-gap: 30px;
    padding: 34px 38px 32px;
    background:
        linear-gradient(
            180deg,
            rgba(246, 250, 252, 0.45),
            rgba(255, 255, 255, 0)
        );
}

.metrica {
    display: flex;
    align-items: center;
    gap: 15px;
    min-height: 105px;
}

.metrica-aqi {
    grid-column: 1 / -1;
}

.metrica-icono {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.metrica-icono-presion {
    color: #5f7b8a;
    background: rgba(95, 123, 138, 0.055);
    padding: 9px;
}

.metrica-icono-lluvia {
    color: #438fd4;
    background: rgba(67, 143, 212, 0.07);
    padding: 8px;
}

.metrica-icono-sol {
    color: #e9a21b;
    background: rgba(233, 162, 27, 0.08);
    padding: 8px;
}

.metrica-icono-luna {
    color: #7594a8;
    background: rgba(117, 148, 168, 0.10);
    padding: 4px;
}

.metrica-icono-luna .solar-panel-fase-lunar {
    width: 42px;
    height: 42px;
    font-size: 34px;
    line-height: 1;
    filter: saturate(.9);
}

.metrica-icono-luna .solar-luna-clara {
    fill: #dce7ed;
    stroke: #7895a7;
    stroke-width: 0.9;
}

.metrica-icono-luna .solar-luna-oscura {
    fill: #355267;
    stroke: #7895a7;
    stroke-width: 0.9;
}

.metrica-icono-luna .solar-luna-crater {
    fill: #b8c9d3;
    opacity: 0.9;
}

.metrica-icono-luna .solar-estrella {
    fill: #7f9dad;
    stroke: none;
}

.metrica-icono-aqi {
    color: #2b9a70;
    background: rgba(43, 154, 112, 0.075);
    padding: 8px;
}

.icono-aire .particula-aire {
    fill: currentColor;
    stroke: none;
}

.metrica-titulo {
    margin-bottom: 6px;
    color: #70828c;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.75px;
}

.metrica-valor {
    color: #173c55;
    font-size: 27px;
    font-weight: 700;
}

.metrica-valor span {
    color: #738792;
    font-size: 11px;
}

.metrica-sub {
    margin-top: 5px;
    color: #506b79;
    font-size: 13px;
}

.metrica-mini {
    margin-top: 4px;
    color: #8a989f;
    font-size: 10px;
}

.metrica-verde {
    color: #3e8c58;
}

.badge {
    display: inline-block;
    margin-top: 6px;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
}

.badge-amarillo {
    color: #956312;
    background: #fff0c9;
}

.badge-noche {
    color: #587487;
    background: #e8f0f5;
}

.badge-verde {
    color: #318157;
    background: #def3e4;
}

/* Variantes utilizadas por la escala AQI del panel principal. */
.badge-verde-claro {
    color: #4f842f;
    background: #e8f5dd;
}

.badge-lima {
    color: #6f7e20;
    background: #f0f5d2;
}

/* =========================================================
   AVISOS METEOROLÓGICOS
   Franja integrada en el propio panel principal.
========================================================= */

.panel-avisos {
    grid-column: 1 / -1;

    display: flex;
    align-items: center;

    gap: 13px;

    min-height: 68px;

    padding: 12px 22px;

    border-top: 1px solid #e5edf2;

    background: #f8fbf9;
}

.aviso-icono {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    padding: 5px;

    border-radius: 50%;

    color: #37955c;

    background: rgba(55, 149, 92, 0.09);
}

.aviso-contenido {
    min-width: 0;
}

.aviso-cabecera {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;
}

.aviso-titulo {
    color: #536b78;

    font-size: 10px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.65px;
}

.aviso-estado {
    display: inline-block;

    padding: 3px 9px;

    border-radius: 999px;

    color: #28774a;
    background: #ddf2e4;

    font-size: 11px;
    font-weight: 700;
}

.aviso-detalle {
    margin-top: 4px;

    color: #6d808a;

    font-size: 12px;
}

/*
   Estas clases quedan preparadas para el futuro.
   Bastará cambiar avisos_estado en los datos.
*/

.aviso-amarillo {
    background: #fffaf0;
}

.aviso-amarillo .aviso-icono {
    color: #c58b18;
    background: rgba(197, 139, 24, 0.10);
}

.aviso-amarillo .aviso-estado {
    color: #93650e;
    background: #fff0c7;
}

.aviso-naranja {
    background: #fff7f0;
}

.aviso-naranja .aviso-icono {
    color: #d97706;
    background: rgba(217, 119, 6, 0.10);
}

.aviso-naranja .aviso-estado {
    color: #a55405;
    background: #ffe2c0;
}

.aviso-rojo {
    background: #fff4f4;
}

.aviso-rojo .aviso-icono {
    color: #cf3d3d;
    background: rgba(207, 61, 61, 0.10);
}

.aviso-rojo .aviso-estado {
    color: #a62f2f;
    background: #f9dada;
}

/* VELETA SIMPLIFICADA */

.metrica-viento {
    gap: 18px;
}

.veleta-simple {
    position: relative;
    width: 118px;
    height: 118px;
    flex: 0 0 118px;

    border-radius: 50%;
    border: 1px solid #d9e4ea;

    background:
        radial-gradient(circle at center,
            #ffffff 0 48%,
            #f5f9fb 49% 100%);

    box-shadow:
        inset 0 0 0 7px rgba(103, 160, 205, 0.025),
        0 2px 7px rgba(38, 78, 104, 0.04);
}

.veleta-n,
.veleta-e,
.veleta-s,
.veleta-o {
    position: absolute;
    z-index: 4;

    color: #5d7583;
    font-size: 10px;
    font-weight: 700;
}

.veleta-n {
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
}

.veleta-s {
    bottom: 7px;
    left: 50%;
    transform: translateX(-50%);
}

.veleta-e {
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
}

.veleta-o {
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
}

.veleta-cruz {
    position: absolute;
    left: 50%;
    top: 50%;

    background: #dfe8ed;

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

.veleta-cruz-v {
    width: 1px;
    height: 58%;
}

.veleta-cruz-h {
    width: 58%;
    height: 1px;
}

.veleta-aguja {
    position: absolute;
    left: 50%;
    top: 50%;

    width: 3px;
    height: 42px;

    margin-left: -1.5px;
    margin-top: -42px;

    background: linear-gradient(
        180deg,
        #277bb9 0%,
        #4f9ed4 100%
    );

    border-radius: 3px;

    transform-origin: 50% 42px;

    z-index: 5;
}

.veleta-punta {
    position: absolute;
    top: -8px;
    left: -5px;

    width: 0;
    height: 0;

    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 13px solid #277bb9;
}

.veleta-centro {
    position: absolute;
    left: 50%;
    top: 50%;

    width: 12px;
    height: 12px;

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

    border-radius: 50%;

    background: #ffffff;
    border: 2px solid #2f80c3;

    z-index: 6;
}

.viento-rumbo strong {
    color: #244f6b;
}

/* TABLAS */

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

.grid-tablas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.tarjeta-tabla {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #dce6ec;
    border-radius: 11px;
    box-shadow: 0 3px 10px rgba(32, 75, 105, 0.05);
}

.tarjeta-tabla header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
}

.tarjeta-tabla h2 {
    margin: 0;
    color: #24465d;
    font-size: 16px;
}

.icono-tabla {
    font-size: 18px;
    font-weight: 700;
}

.tarjeta-tabla table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.tarjeta-tabla td {
    padding: 8px 13px;
    border-top: 1px solid #e5edf2;
}

.tarjeta-tabla td:first-child {
    width: 58%;
    color: #4f6572;
}

.tarjeta-tabla td:last-child {
    color: #203e52;
    font-weight: 700;
}

.tabla-roja header { background: #fff1f1; }
.tabla-roja .icono-tabla { color: #e14545; }
.tabla-gris header { background: #f0f4f6; }
.tabla-gris .icono-tabla { color: #587486; }
.tabla-verdeagua header { background: #edfafa; }
.tabla-verdeagua .icono-tabla { color: #20a3a0; }
.tabla-azul header { background: #eef5ff; }
.tabla-azul .icono-tabla { color: #3d8ce4; }
.tabla-amarilla header { background: #fff8e6; }
.tabla-amarilla .icono-tabla { color: #e6a019; }
.tabla-verde header { background: #edf9f0; }
.tabla-verde .icono-tabla { color: #3c9b5a; }

.dato-rojo { color: #df3937 !important; }
.dato-naranja { color: #e8751a !important; }
.dato-amarillo { color: #c78a00 !important; }
.dato-azul { color: #2e80c4 !important; }
.dato-verde { color: #38905a !important; }

.condiciones-actuales {
    display: flex;
    gap: 16px;
    margin-top: 22px;
    padding: 18px 22px;
    border: 1px solid #dceaf2;
    border-radius: 11px;
    background:
        linear-gradient(
            90deg,
            #f1f9ff,
            #f9fcfe
        );
}

.icono-info {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #458fd0;
    color: #ffffff;
    font-weight: 700;
}

.condiciones-actuales h2 {
    margin: 0 0 5px;
    color: #21445b;
    font-size: 15px;
}

.condiciones-actuales p {
    margin: 0;
    color: #526b78;
    font-size: 13px;
    line-height: 1.55;
}

.graficos-48 {
    margin-top: 24px;
}

.titulo-graficos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.titulo-graficos h2 {
    margin: 0;
    color: #21445b;
    font-size: 20px;
}

.titulo-graficos p {
    margin: 4px 0 0;
    color: #81919a;
    font-size: 12px;
}

.selector-rango {
    display: flex;
    overflow: hidden;
    border: 1px solid #dce6ec;
    border-radius: 8px;
    font-size: 11px;
}

.selector-rango span {
    padding: 8px 12px;
    color: #657a86;
    background: #ffffff;
    border-right: 1px solid #e3ebf0;
}

.selector-rango span:last-child {
    border-right: none;
}

.selector-rango .activo {
    color: #ffffff;
    background: #4c98d6;
}

.grafico-card {
    margin-bottom: 12px;
    padding: 13px 15px 16px;
    background: #ffffff;
    border: 1px solid #dce6ec;
    border-radius: 10px;
}

.grafico-card h3 {
    margin: 0 0 10px;
    color: #25465d;
    font-size: 14px;
}

.grafico-demo {
    height: 130px;
    border-radius: 7px;
    background:
        repeating-linear-gradient(
            0deg,
            #ffffff,
            #ffffff 31px,
            #edf2f5 32px
        );
}

.grafico-demo-temp {
    box-shadow: inset 0 -35px 60px rgba(239, 68, 68, 0.055);
}

.grafico-demo-hum {
    box-shadow: inset 0 -35px 60px rgba(59, 130, 246, 0.055);
}

.grafico-demo-pres {
    box-shadow: inset 0 -35px 60px rgba(100, 116, 139, 0.045);
}

.grafico-demo-viento {
    box-shadow: inset 0 -35px 60px rgba(47, 158, 68, 0.045);
}

@media (max-width: 1180px) {
    .panel-meteo {
        grid-template-columns: 1fr;
    }

    .panel-meteo-izquierda {
        grid-template-columns: 0.8fr 1.2fr;
        min-height: 300px;
    }

    .panel-meteo-derecha {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-tablas {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {

    .panel-avisos {
        align-items: flex-start;
        padding: 14px 16px;
    }

    .aviso-cabecera {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }
}

@media (max-width: 820px) {
    .cabecera-pagina {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .panel-meteo-izquierda {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .temperatura-linea,
    .humedad-principal,
    .extremos {
        justify-content: center;
    }

    .panel-meteo-derecha {
        grid-template-columns: 1fr;
    }

    .metrica-aqi {
        grid-column: auto;
    }

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

    .titulo-graficos {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* =========================================================
   AJUSTE COMPACTO DEL PANEL PRINCIPAL
   Reduce aire entre elementos sin perder legibilidad.
========================================================= */

.panel-meteo {
    min-height: 300px;
}

.panel-meteo-izquierda {
    gap: 16px;
    padding: 24px 28px 24px 30px;
}

.panel-meteo-derecha {
    column-gap: 30px;
    row-gap: 16px;
    padding: 24px 30px 22px;
}

.metrica {
    min-height: 82px;
}

.humedad-principal {
    margin-top: 9px;
}

.extremos {
    margin-top: 12px;
}

.estado-texto {
    margin-bottom: 0;
}

.icono-tiempo-demo {
    margin-bottom: 6px;
}

.metrica-titulo {
    margin-bottom: 4px;
}

.metrica-sub {
    margin-top: 3px;
}

.metrica-mini {
    margin-top: 2px;
}

.panel-avisos {
    min-height: 60px;
    padding: 10px 18px;
}

@media (max-width: 1180px) {
    .panel-meteo-izquierda {
        min-height: 270px;
    }
}

@media (max-width: 820px) {
    .panel-meteo-izquierda {
        padding: 22px 18px;
    }

    .panel-meteo-derecha {
        padding: 22px 18px;
        row-gap: 14px;
    }
}

/* =========================================================
   CABECERA DE PÁGINA REFORZADA
========================================================= */

.cabecera-pagina {
    align-items: flex-start;
}

.cabecera-pagina-titulos h1 {
    margin: 0;
    color: #173b55;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: 0.3px;
}

.subtitulo-pagina {
    margin: 7px 0 0;
    color: #6d808a;
    font-size: 14px;
}

.acento-titulo {
    display: block;
    width: 78px;
    height: 4px;
    margin-top: 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, #5f9dca, #8db9d8);
}

.estado-superior {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 9px;
    padding-top: 3px;
}

.estado-avisos-rapido {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #5e717c;
    font-size: 12px;
    white-space: nowrap;
}

.punto-aviso {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
}

.estado-avisos-verde .punto-aviso {
    background: #3bae60;
    box-shadow: 0 0 0 4px rgba(59, 174, 96, 0.10);
}

.estado-avisos-amarillo .punto-aviso {
    background: #e8b339;
    box-shadow: 0 0 0 4px rgba(232, 179, 57, 0.10);
}

.estado-avisos-naranja .punto-aviso {
    background: #e98022;
    box-shadow: 0 0 0 4px rgba(233, 128, 34, 0.10);
}

.estado-avisos-rojo .punto-aviso {
    background: #d94b4b;
    box-shadow: 0 0 0 4px rgba(217, 75, 75, 0.10);
}

/*
   Textos previstos:
   VERDE:    Sin avisos activos en Sevilla capital
   AMARILLO: Aviso amarillo activo en Sevilla capital
   NARANJA:  Aviso naranja activo en Sevilla capital
   ROJO:     Aviso rojo activo en Sevilla capital
*/

@media (max-width: 820px) {

    .cabecera-pagina {
        gap: 16px;
    }

    .cabecera-pagina-titulos h1 {
        font-size: 28px;
    }

    .estado-superior {
        align-items: flex-start;
    }

    .estado-avisos-rapido {
        white-space: normal;
    }
}

/* =========================================================
   ALINEACIÓN DE INDICADORES SUPERIORES
   Los dos puntos de estado comparten la misma vertical.
========================================================= */

.estado-superior {
    width: 285px;
    align-items: stretch;
}

.actualizacion-datos,
.estado-avisos-rapido {
    display: grid;
    grid-template-columns: 14px 1fr;
    align-items: center;
    column-gap: 8px;

    width: 100%;
}

.punto-directo,
.punto-aviso {
    justify-self: center;
    margin: 0;
}

.actualizacion-datos {
    justify-content: initial;
}

.estado-avisos-rapido {
    white-space: normal;
}

@media (max-width: 820px) {
    .estado-superior {
        width: auto;
        min-width: 0;
    }
}

/* =========================================================
   INDICADORES DE TENDENCIA
   Aplicados a temperatura, humedad y presión.
========================================================= */

.tendencia-variable {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;

    margin-left: 7px;

    border-radius: 50%;

    font-size: 16px;
    font-weight: 800;
    line-height: 1;

    vertical-align: middle;
}

/* Temperatura y humedad */
.tendencia-sube {
    color: #d85a43;
    background: rgba(216, 90, 67, 0.08);
}

.tendencia-baja {
    color: #367fb7;
    background: rgba(54, 127, 183, 0.08);
}

.tendencia-estable {
    color: #71828c;
    background: rgba(113, 130, 140, 0.08);
}

.tendencia-humedad {
    width: 19px;
    height: 19px;
    margin-left: 4px;
    font-size: 14px;
}

/*
   En presión no usamos una semántica rojo/azul de
   "calor/frío"; el indicador mantiene color barométrico neutro.
*/
.tendencia-presion {
    width: 20px;
    height: 20px;

    margin-left: 6px;

    color: #4b7894 !important;
    background: rgba(75, 120, 148, 0.09) !important;

    font-size: 14px;
}

.metrica-valor-con-tendencia {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.metrica-presion-texto {
    color: #54798e;
}

/* La flecha grande de temperatura debe quedar visualmente
   asociada al valor, no a la unidad. */
.temperatura-linea .tendencia-variable {
    margin-top: 18px;
}

@media (max-width: 520px) {
    .tendencia-variable {
        transform: scale(0.92);
    }
}

/* =========================================================
   MAQUETA VISUAL DE VARIACIONES TEMPORALES
========================================================= */

.humedad-bloque {
    margin-top: 9px;
}

.humedad-bloque .humedad-principal {
    margin-top: 0;
}

.variacion-principal {
    color: #7d8d96;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1px;
}

.variacion-temperatura {
    margin-top: 4px;
}

.variacion-humedad {
    margin-top: 3px;
    margin-left: 27px;
}

.metrica-variacion-destacada {
    margin-top: 3px;
    color: #587d93;
    font-size: 11px;
    font-weight: 700;
}

/* =========================================================
   EXPERIMENTO: PANEL METEOROLÓGICO CON CONTEXTO
========================================================= */

.panel-meteo-avanzado {
    min-height: 0;
}

.lectura-principal-avanzada {
    position: relative;
}

.microcontexto {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 5px;

    margin-top: 3px;

    color: #81919a;
    font-size: 9px;
}

.microcontexto strong {
    color: #536f80;
    font-size: 11px;
}

.microcontexto-temp {
    margin-top: 2px;
}

.microcontexto-hum {
    margin-left: 27px;
}

.sparkline {
    display: block;

    width: 108px;
    height: 31px;

    margin-top: 3px;

    overflow: visible;
}

.sparkline polyline {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sparkline-temp polyline {
    stroke: #d86751;
}

.sparkline-hum {
    margin-left: 27px;
}

.sparkline-hum polyline {
    stroke: #478ec4;
}

.sparkline-pres {
    width: 116px;
    height: 29px;
}

.sparkline-pres polyline {
    stroke: #5e8297;
}

.humedad-bloque {
    margin-top: 3px;
}

.panel-meteo-derecha-avanzado {
    row-gap: 12px;
}

.metrica-presion-avanzada .metrica-cuerpo {
    min-width: 150px;
}

.contexto-variable {
    display: inline-block;

    margin-top: 5px;
    padding: 3px 7px;

    border-radius: 999px;

    color: #637985;
    background: #f1f5f7;

    font-size: 9px;
    font-weight: 600;
}

.contexto-lluvia {
    color: #477fa8;
    background: #edf6fc;
}

.estado-atmosferico {
    grid-column: 1 / -1;

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

    gap: 8px;

    margin-top: -2px;
    padding: 10px 12px;

    border: 1px solid #e4edf2;
    border-radius: 10px;

    background: linear-gradient(90deg, #fbfdfe, #f7fafc);
}

.estado-atmosferico-item {
    min-width: 0;
}

.estado-atmosferico-label {
    display: block;

    color: #84949d;

    font-size: 8px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .45px;
}

.estado-atmosferico-item strong {
    display: block;

    margin-top: 3px;

    color: #38566a;

    font-size: 11px;
}

.condiciones-inteligentes {
    align-items: flex-start;
}

.condiciones-inteligentes-cuerpo {
    flex: 1;
    min-width: 0;
}

.condiciones-inteligentes-cabecera {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
}

.lectura-generada {
    color: #90a0a8;
    font-size: 9px;
}

.resumen-tendencias {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;

    margin-top: 10px;
}

.resumen-chip {
    display: inline-flex;
    align-items: center;

    min-height: 22px;

    padding: 3px 8px;

    border-radius: 999px;

    font-size: 9px;
    font-weight: 700;
}

.resumen-chip-temp {
    color: #a74f3d;
    background: #faece8;
}

.resumen-chip-hum {
    color: #3979aa;
    background: #eaf3fa;
}

.resumen-chip-pres {
    color: #4d7187;
    background: #edf3f6;
}

.resumen-chip-neutro {
    color: #61747f;
    background: #f0f4f6;
}

@media (max-width: 1180px) {
    .estado-atmosferico {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 820px) {
    .estado-atmosferico {
        grid-template-columns: 1fr;
    }

    .condiciones-inteligentes-cabecera {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }
}

/* =========================================================
   SOMBRAS CROMÁTICAS PARA LAS TABLAS
   Muy suaves: refuerzan cada familia de datos sin recargar.
========================================================= */

.tarjeta-tabla {
    transition:
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

/* Temperatura y humedad · rojizo */
.tabla-roja {
    border-color: rgba(215, 88, 88, 0.18);
    box-shadow:
        0 4px 13px rgba(204, 74, 74, 0.08),
        0 12px 28px rgba(204, 74, 74, 0.035);
}

/* Barómetro · azul grisáceo */
.tabla-gris {
    border-color: rgba(91, 119, 138, 0.18);
    box-shadow:
        0 4px 13px rgba(80, 111, 132, 0.08),
        0 12px 28px rgba(80, 111, 132, 0.035);
}

/* Viento · turquesa */
.tabla-verdeagua {
    border-color: rgba(38, 164, 158, 0.18);
    box-shadow:
        0 4px 13px rgba(31, 156, 151, 0.08),
        0 12px 28px rgba(31, 156, 151, 0.035);
}

/* Lluvia · violeta azulado */
.tabla-azul {
    border-color: rgba(118, 93, 183, 0.20);
    box-shadow:
        0 4px 14px rgba(112, 82, 181, 0.095),
        0 12px 30px rgba(112, 82, 181, 0.04);
}

/* Solar / UV · amarillo dorado */
.tabla-amarilla {
    border-color: rgba(223, 164, 42, 0.20);
    box-shadow:
        0 4px 14px rgba(216, 153, 25, 0.105),
        0 12px 30px rgba(216, 153, 25, 0.045);
}

/* Calidad del aire · verde */
.tabla-verde {
    border-color: rgba(55, 151, 88, 0.19);
    box-shadow:
        0 4px 14px rgba(47, 145, 81, 0.09),
        0 12px 30px rgba(47, 145, 81, 0.04);
}

/* Un mínimo realce al pasar el ratón, sin efecto de "tarjeta flotante" excesivo */
.tarjeta-tabla:hover {
    transform: translateY(-1px);
}

/* =========================================================
   SOMBRAS CROMÁTICAS - VERSIÓN MÁS VISIBLE
========================================================= */

/* Temperatura y humedad */
.tabla-roja {
    background:
        linear-gradient(
            180deg,
            rgba(255, 243, 243, 0.55) 0%,
            rgba(255,255,255,1) 34%
        );

    border-color: rgba(210, 82, 82, 0.26);

    box-shadow:
        0 5px 16px rgba(198, 63, 63, 0.16),
        0 15px 34px rgba(198, 63, 63, 0.08);
}

/* Barómetro */
.tabla-gris {
    background:
        linear-gradient(
            180deg,
            rgba(239, 245, 248, 0.60) 0%,
            rgba(255,255,255,1) 34%
        );

    border-color: rgba(87, 119, 138, 0.27);

    box-shadow:
        0 5px 16px rgba(76, 110, 132, 0.15),
        0 15px 34px rgba(76, 110, 132, 0.075);
}

/* Viento */
.tabla-verdeagua {
    background:
        linear-gradient(
            180deg,
            rgba(237, 251, 250, 0.68) 0%,
            rgba(255,255,255,1) 34%
        );

    border-color: rgba(34, 165, 157, 0.27);

    box-shadow:
        0 5px 16px rgba(28, 155, 147, 0.16),
        0 15px 34px rgba(28, 155, 147, 0.075);
}

/* Lluvia - violeta */
.tabla-azul {
    background:
        linear-gradient(
            180deg,
            rgba(246, 241, 255, 0.72) 0%,
            rgba(255,255,255,1) 34%
        );

    border-color: rgba(116, 86, 184, 0.30);

    box-shadow:
        0 5px 17px rgba(103, 73, 176, 0.19),
        0 16px 36px rgba(103, 73, 176, 0.09);
}

/* Solar / UV */
.tabla-amarilla {
    background:
        linear-gradient(
            180deg,
            rgba(255, 249, 230, 0.82) 0%,
            rgba(255,255,255,1) 34%
        );

    border-color: rgba(222, 160, 31, 0.30);

    box-shadow:
        0 5px 17px rgba(214, 148, 20, 0.19),
        0 16px 36px rgba(214, 148, 20, 0.09);
}

/* Calidad del aire */
.tabla-verde {
    background:
        linear-gradient(
            180deg,
            rgba(239, 250, 242, 0.76) 0%,
            rgba(255,255,255,1) 34%
        );

    border-color: rgba(48, 151, 82, 0.28);

    box-shadow:
        0 5px 17px rgba(42, 143, 76, 0.17),
        0 16px 36px rgba(42, 143, 76, 0.08);
}

/* =========================================================
   INTERIOR CROMÁTICO DE TABLAS + ICONOS SVG
========================================================= */

.icono-tabla-svg {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.icono-tabla-svg svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icono-tabla-svg .particula-tabla {
    fill: currentColor;
    stroke: none;
}

/* Tintado interior suave */
.tabla-roja table {
    background: linear-gradient(
        90deg,
        rgba(255, 241, 241, 0.62),
        rgba(255, 250, 250, 0.34)
    );
}

.tabla-gris table {
    background: linear-gradient(
        90deg,
        rgba(240, 245, 248, 0.68),
        rgba(250, 252, 253, 0.38)
    );
}

.tabla-verdeagua table {
    background: linear-gradient(
        90deg,
        rgba(237, 251, 250, 0.68),
        rgba(249, 254, 254, 0.38)
    );
}

.tabla-azul table {
    background: linear-gradient(
        90deg,
        rgba(245, 240, 255, 0.72),
        rgba(251, 249, 255, 0.42)
    );
}

.tabla-amarilla table {
    background: linear-gradient(
        90deg,
        rgba(255, 248, 225, 0.78),
        rgba(255, 253, 244, 0.44)
    );
}

.tabla-verde table {
    background: linear-gradient(
        90deg,
        rgba(238, 249, 241, 0.72),
        rgba(250, 254, 251, 0.40)
    );
}

/* Filas algo más suaves para que el tinte se perciba */
.tarjeta-tabla td {
    background: transparent;
}

.tarjeta-tabla tr:nth-child(even) td {
    background: rgba(255,255,255,0.28);
}

/* Separadores ligeramente adaptados */
.tabla-roja td { border-top-color: rgba(218, 116, 116, 0.14); }
.tabla-gris td { border-top-color: rgba(109, 135, 151, 0.15); }
.tabla-verdeagua td { border-top-color: rgba(78, 170, 164, 0.15); }
.tabla-azul td { border-top-color: rgba(128, 105, 184, 0.16); }
.tabla-amarilla td { border-top-color: rgba(220, 169, 62, 0.17); }
.tabla-verde td { border-top-color: rgba(80, 160, 105, 0.15); }

/* =========================================================
   SOMBREADO CROMÁTICO DE CABECERAS DE TABLA
   Igualamos el efecto visible de Solar / UV en todas.
========================================================= */

.tabla-roja header {
    background: linear-gradient(
        180deg,
        rgba(255, 231, 231, 0.96),
        rgba(255, 241, 241, 0.92)
    );

    box-shadow:
        inset 0 -1px 0 rgba(204, 77, 77, 0.16),
        0 5px 13px rgba(204, 77, 77, 0.16);
}

.tabla-gris header {
    background: linear-gradient(
        180deg,
        rgba(230, 239, 244, 0.97),
        rgba(241, 246, 248, 0.93)
    );

    box-shadow:
        inset 0 -1px 0 rgba(83, 112, 132, 0.16),
        0 5px 13px rgba(83, 112, 132, 0.15);
}

.tabla-verdeagua header {
    background: linear-gradient(
        180deg,
        rgba(220, 248, 246, 0.97),
        rgba(237, 251, 250, 0.93)
    );

    box-shadow:
        inset 0 -1px 0 rgba(32, 158, 152, 0.17),
        0 5px 13px rgba(32, 158, 152, 0.16);
}

.tabla-azul header {
    background: linear-gradient(
        180deg,
        rgba(232, 222, 252, 0.97),
        rgba(246, 241, 255, 0.94)
    );

    box-shadow:
        inset 0 -1px 0 rgba(105, 78, 174, 0.18),
        0 5px 14px rgba(105, 78, 174, 0.18);
}

.tabla-amarilla header {
    background: linear-gradient(
        180deg,
        rgba(255, 240, 191, 0.98),
        rgba(255, 249, 230, 0.94)
    );

    box-shadow:
        inset 0 -1px 0 rgba(211, 149, 22, 0.18),
        0 5px 14px rgba(211, 149, 22, 0.19);
}

.tabla-verde header {
    background: linear-gradient(
        180deg,
        rgba(222, 245, 228, 0.97),
        rgba(239, 250, 242, 0.94)
    );

    box-shadow:
        inset 0 -1px 0 rgba(45, 143, 77, 0.17),
        0 5px 14px rgba(45, 143, 77, 0.17);
}

/* Refuerzo ligero del color del icono dentro de cada cabecera */
.tabla-roja header .icono-tabla { color: #d85858; }
.tabla-gris header .icono-tabla { color: #59788b; }
.tabla-verdeagua header .icono-tabla { color: #27a59f; }
.tabla-azul header .icono-tabla { color: #7657b9; }
.tabla-amarilla header .icono-tabla { color: #d9a11d; }
.tabla-verde header .icono-tabla { color: #3b9c5c; }

/* =========================================================
   REDUCCIÓN DE SOMBRA EXTERIOR DE LAS TARJETAS
   Conservamos color interior y cabeceras, pero con menos halo.
========================================================= */

.tabla-roja {
    box-shadow:
        0 3px 8px rgba(198, 63, 63, 0.07),
        0 8px 18px rgba(198, 63, 63, 0.025);
}

.tabla-gris {
    box-shadow:
        0 3px 8px rgba(76, 110, 132, 0.065),
        0 8px 18px rgba(76, 110, 132, 0.025);
}

.tabla-verdeagua {
    box-shadow:
        0 3px 8px rgba(28, 155, 147, 0.07),
        0 8px 18px rgba(28, 155, 147, 0.025);
}

.tabla-azul {
    box-shadow:
        0 3px 8px rgba(103, 73, 176, 0.08),
        0 8px 18px rgba(103, 73, 176, 0.03);
}

.tabla-amarilla {
    box-shadow:
        0 3px 8px rgba(214, 148, 20, 0.08),
        0 8px 18px rgba(214, 148, 20, 0.03);
}

.tabla-verde {
    box-shadow:
        0 3px 8px rgba(42, 143, 76, 0.075),
        0 8px 18px rgba(42, 143, 76, 0.028);
}

/* =========================================================
   SOBRE ESTOS DATOS
   Sección fija explicativa del observatorio
========================================================= */

.sobre-datos {
    margin-top: 28px;
    padding: 26px 28px 24px;

    border: 1px solid #dbe7ee;
    border-radius: 14px;

    background:
        linear-gradient(
            180deg,
            rgba(242, 248, 252, 0.88),
            rgba(255, 255, 255, 0.98) 34%
        );

    box-shadow:
        0 4px 12px rgba(48, 87, 112, 0.055);
}

.sobre-datos-cabecera {
    display: flex;
    align-items: center;
    gap: 15px;

    margin-bottom: 18px;
}

.sobre-datos-icono {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 9px;

    border-radius: 50%;

    color: #4d8fbd;
    background: rgba(77, 143, 189, 0.09);
}

.sobre-datos-icono svg,
.sobre-datos-nota-icono svg {
    width: 100%;
    height: 100%;

    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sobre-datos-etiqueta {
    display: block;

    margin-bottom: 3px;

    color: #6b91aa;

    font-size: 9px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 1px;
}

.sobre-datos h2 {
    margin: 0;

    color: #21465e;

    font-size: 21px;
    font-weight: 750;
}

.sobre-datos-subtitulo {
    margin: 4px 0 0;

    color: #7b8e99;

    font-size: 12px;
}

.sobre-datos-contenido {
    max-width: 1180px;
}

.sobre-datos-contenido > p {
    margin: 0 0 13px;

    color: #526b79;

    font-size: 13px;
    line-height: 1.72;
}

.sobre-datos-contenido > p:last-of-type {
    margin-bottom: 17px;
}

.sobre-datos-contenido strong {
    color: #385a70;
}

.sobre-datos-nota {
    display: flex;
    align-items: flex-start;
    gap: 11px;

    padding: 12px 15px;

    border: 1px solid #dce9f1;
    border-radius: 9px;

    background: #f5fafc;
}

.sobre-datos-nota-icono {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;

    color: #4f91bd;
}

.sobre-datos-nota p {
    margin: 1px 0 0;

    color: #5c7380;

    font-size: 11px;
    line-height: 1.55;
}

@media (max-width: 700px) {

    .sobre-datos {
        padding: 21px 18px;
    }

    .sobre-datos-cabecera {
        align-items: flex-start;
    }

    .sobre-datos-icono {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }
}

/* =========================================================
   COMPRESIÓN VERTICAL DEL PANEL PRINCIPAL
   Reducimos sobre todo el aire de la zona superior.
========================================================= */

.cabecera-pagina {
    margin-bottom: 14px;
}

.panel-meteo,
.panel-meteo-avanzado {
    min-height: 0;
}

.panel-meteo-izquierda {
    padding-top: 14px;
    padding-bottom: 16px;
}

.panel-meteo-derecha,
.panel-meteo-derecha-avanzado {
    padding-top: 14px;
    padding-bottom: 14px;
    row-gap: 9px;
}

.estado-meteo,
.lectura-principal-avanzada {
    transform: translateY(-3px);
}

.metrica {
    min-height: 72px;
}

.estado-atmosferico {
    margin-top: -5px;
    padding-top: 7px;
    padding-bottom: 7px;
}

.panel-avisos {
    min-height: 52px;
    padding-top: 7px;
    padding-bottom: 7px;
}

@media (max-width: 1180px) {
    .panel-meteo-izquierda {
        min-height: 0;
    }
}

@media (max-width: 820px) {
    .panel-meteo-izquierda,
    .panel-meteo-derecha,
    .panel-meteo-derecha-avanzado {
        padding-top: 18px;
        padding-bottom: 18px;
    }

    .estado-meteo,
    .lectura-principal-avanzada {
        transform: none;
    }
}

/* =========================================================
   AJUSTE PANEL PRINCIPAL · 10/09/2026
   - Sin micrográficos
   - Tendencia / confort / visibilidad a la izquierda
   - Algo más de aire vertical
========================================================= */

.sparkline {
    display: none !important;
}

/* Recuperamos respiración vertical sin volver al exceso anterior */
.panel-meteo-izquierda {
    padding-top: 22px;
    padding-bottom: 22px;
}

.panel-meteo-derecha,
.panel-meteo-derecha-avanzado {
    padding-top: 21px;
    padding-bottom: 21px;
    row-gap: 17px;
}

.estado-meteo,
.lectura-principal-avanzada {
    transform: none;
}

.metrica {
    min-height: 82px;
}

.microcontexto {
    margin-top: 5px;
}

.humedad-bloque {
    margin-top: 12px;
}

.sensacion {
    margin-top: 12px;
}

.extremos {
    margin-top: 17px;
}

/* El bloque pasa a formar parte de la lectura de la izquierda */
.panel-meteo-izquierda .estado-atmosferico {
    grid-column: 1 / -1;

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

    gap: 16px;

    width: 100%;
    margin: 20px 0 0;
    padding: 10px 12px;

    border: 1px solid #e4edf2;
    border-radius: 10px;

    background: linear-gradient(90deg, #fbfdfe, #f6fafc);
}

.panel-meteo-izquierda .estado-atmosferico-item {
    min-width: 0;
}

.panel-meteo-izquierda .estado-atmosferico-label {
    display: block;
    margin-bottom: 4px;

    color: #84949d;
    font-size: 8px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .45px;
}

.panel-meteo-izquierda .estado-atmosferico-item strong {
    display: block;

    color: #38566a;
    font-size: 11px;
}

/* La franja de avisos sigue compacta, pero no pegada al contenido */
.panel-avisos {
    min-height: 56px;
    padding-top: 9px;
    padding-bottom: 9px;
}

@media (max-width: 820px) {
    .panel-meteo-izquierda .estado-atmosferico {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-top: 16px;
    }
}

/* =========================================================
   VIENTO · REPRESENTACIÓN COMPACTA SIN CÍRCULO
========================================================= */

.veleta-simple {
    display: none !important;
}

.metrica-viento-compacta {
    gap: 13px;
}

.indicador-viento-simple {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #2f82bd;
}

.flecha-viento {
    width: 43px;
    height: 43px;

    fill: currentColor;

    transform-origin: 50% 50%;
}

.viento-datos {
    min-width: 0;
}

@media (max-width: 820px) {
    .indicador-viento-simple {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
    }

    .flecha-viento {
        width: 38px;
        height: 38px;
    }
}

/* =========================================================
   AJUSTES SOLAR / VIENTO + BANDA DE ESTADO
========================================================= */

/* Más respiración en la zona derecha */
.panel-meteo-derecha,
.panel-meteo-derecha-avanzado {
    column-gap: 42px;
    row-gap: 20px;
}

/* Bajamos visualmente Solar / UV para que no quede pegado a Viento */
.panel-meteo-derecha > .metrica:nth-of-type(4),
.panel-meteo-derecha-avanzado > .metrica:nth-of-type(4) {
    margin-top: 10px;
}

/* La antigua tarjeta deja de funcionar como recuadro lateral */
.estado-atmosferico-banda {
    grid-column: 1 / -1;

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

    gap: 0;

    width: 100%;
    margin: 0;
    padding: 0;

    border: 0;
    border-top: 1px solid #e7eef2;
    border-bottom: 1px solid #e7eef2;
    border-radius: 0;

    background: rgba(248, 251, 253, 0.72);
}

.estado-atmosferico-banda .estado-atmosferico-item {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    min-height: 42px;
    padding: 8px 14px;

    text-align: center;
}

.estado-atmosferico-banda .estado-atmosferico-item + .estado-atmosferico-item::before {
    content: "";

    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;

    width: 1px;

    background: #dfe8ed;
}

.estado-atmosferico-banda .estado-atmosferico-label {
    display: inline;

    margin: 0;

    color: #83939c;

    font-size: 8px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: .45px;
}

.estado-atmosferico-banda .estado-atmosferico-item strong {
    display: inline;

    margin: 0;

    color: #38566a;

    font-size: 10px;
    font-weight: 700;
}

/* Avisos queda inmediatamente debajo de la banda */
.estado-atmosferico-banda + .panel-avisos {
    border-top: 0;
}

/* Neutralizamos las reglas antiguas de la versión izquierda */
.panel-meteo-izquierda .estado-atmosferico {
    display: none !important;
}

@media (max-width: 820px) {
    .estado-atmosferico-banda {
        grid-template-columns: 1fr;
    }

    .estado-atmosferico-banda .estado-atmosferico-item {
        justify-content: flex-start;
        text-align: left;
        min-height: 36px;
    }

    .estado-atmosferico-banda .estado-atmosferico-item + .estado-atmosferico-item::before {
        left: 14px;
        right: 14px;
        top: 0;
        bottom: auto;
        width: auto;
        height: 1px;
    }
}

/* =========================================================
   DESCRIPCIÓN TEXTUAL DE LAS CONDICIONES ACTUALES
========================================================= */

.condiciones-descriptivas {
    align-items: flex-start;
    padding: 20px 22px;
}

.condiciones-descriptivas .condiciones-inteligentes-cabecera {
    display: block;
}

.condiciones-descriptivas h2 {
    margin-bottom: 10px;
    font-size: 16px;
}

.condiciones-descriptivas p {
    margin: 0 0 10px;
    color: #526b78;
    font-size: 12px;
    line-height: 1.62;
}

.condiciones-descriptivas .fecha-condiciones {
    margin-bottom: 12px;
    color: #425f72;
}

.condiciones-descriptivas .texto-condiciones-actuales {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}

.condiciones-descriptivas .resumen-tendencias {
    margin-top: 13px;
}

/* =========================================================
   ICONOS SVG DEFINITIVOS DE CABECERAS DE TABLA
========================================================= */

.tarjeta-tabla header {
    min-height: 42px;
}

.icono-tabla-svg {
    width: 25px !important;
    height: 25px !important;
    min-width: 25px;
    flex: 0 0 25px;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    font-size: 0 !important;
}

.icono-tabla-svg svg {
    display: block !important;

    width: 22px !important;
    height: 22px !important;

    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 3 !important;
    stroke-linecap: round;
    stroke-linejoin: round;

    overflow: visible;
}

.tabla-roja .icono-tabla-svg {
    color: #d85858 !important;
}

.tabla-gris .icono-tabla-svg {
    color: #59788b !important;
}

.tabla-verdeagua .icono-tabla-svg {
    color: #27a59f !important;
}

.tabla-azul .icono-tabla-svg {
    color: #7657b9 !important;
}

.tabla-amarilla .icono-tabla-svg {
    color: #d9a11d !important;
}

.tabla-verde .icono-tabla-svg {
    color: #3b9c5c !important;
}

/* =========================================================
   ICONOS DE TABLA REFINADOS · CORRECCIÓN SEGURA
========================================================= */

.icono-tabla-svg {
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    flex: 0 0 27px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 0 !important;
}

.icono-tabla-svg svg {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 3.4 !important;
    stroke-linecap: round;
    stroke-linejoin: round;
    overflow: visible;
}

.tabla-roja .icono-tabla-svg { color: #d85858 !important; }
.tabla-gris .icono-tabla-svg { color: #59788b !important; }
.tabla-verdeagua .icono-tabla-svg { color: #27a59f !important; }
.tabla-azul .icono-tabla-svg { color: #7657b9 !important; }
.tabla-amarilla .icono-tabla-svg { color: #d9a11d !important; }
.tabla-verde .icono-tabla-svg { color: #3b9c5c !important; }

/* =========================================================
   ICONOS DE TABLAS · ESTILO LIMPIO
========================================================= */

.icono-tabla-svg {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    flex: 0 0 22px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 0 !important;
}

.icono-tabla-svg svg {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    overflow: visible;
}

.tarjeta-tabla header {
    gap: 9px;
}

.tabla-roja .icono-tabla-svg      { color: #d45c5c !important; }
.tabla-gris .icono-tabla-svg      { color: #5c7b8e !important; }
.tabla-verdeagua .icono-tabla-svg { color: #229c97 !important; }
.tabla-azul .icono-tabla-svg      { color: #7355b4 !important; }
.tabla-amarilla .icono-tabla-svg  { color: #d4a01f !important; }
.tabla-verde .icono-tabla-svg     { color: #3a965a !important; }

/* =========================================================
   AJUSTE ICONOS: BARÓMETRO + HOJA VERDE
========================================================= */

.icono-barometro {
    color: #5c7b8e !important;
}

.icono-hoja-aire {
    color: #2f9a52 !important;
}

.icono-hoja-aire svg {
    stroke-width: 2 !important;
}

/* =========================================================
   PANEL PRINCIPAL · ESTADO SIN ICONO + INDICADORES VERTICALES
========================================================= */

.panel-meteo-izquierda-nueva {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 155px !important;
    align-items: center !important;

    gap: 28px !important;

    padding: 24px 30px !important;
}

.bloque-temperatura-nuevo {
    min-width: 0;
}

.estado-texto-integrado {
    margin: 0 0 5px;

    color: #49687b;

    font-size: 15px;
    font-weight: 700;

    text-align: left;
}

.bloque-temperatura-nuevo .temperatura-linea {
    justify-content: flex-start;
}

.bloque-temperatura-nuevo .temperatura-valor {
    font-size: 84px;
}

.bloque-temperatura-nuevo .humedad-bloque {
    margin-top: 12px;
}

.bloque-temperatura-nuevo .extremos {
    margin-top: 16px;
}

/* Columna de indicadores */
.columna-indicadores {
    display: flex;
    flex-direction: column;

    gap: 7px;

    width: 100%;
}

.indicador-resumen {
    position: relative;

    padding: 9px 11px;

    border: 1px solid #e2eaf0;
    border-radius: 8px;

    background: linear-gradient(
        180deg,
        rgba(250,252,253,.96),
        rgba(245,249,251,.96)
    );
}

.indicador-resumen::before {
    content: "";

    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;

    width: 3px;

    border-radius: 0 3px 3px 0;

    background: #7da4bc;
}

.indicador-etiqueta {
    display: block;

    color: #85959e;

    font-size: 7px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: .55px;
}

.indicador-resumen strong {
    display: block;

    margin-top: 2px;

    color: #36566a;

    font-size: 10px;
    line-height: 1.2;
}

.indicador-tendencia::before {
    background: #6d8ea2;
}

.indicador-confort::before {
    background: #e6a33a;
}

.indicador-visibilidad::before {
    background: #58a0c9;
}

.indicador-sensacion::before {
    background: #d76a55;
}

.indicador-rocio::before {
    background: #4b91c6;
}

/* La banda horizontal antigua desaparece */
.estado-atmosferico-banda {
    display: none !important;
}

/* Avisos queda directamente bajo el panel */
.panel-avisos {
    border-top: 1px solid #e7eef2;
}

@media (max-width: 1180px) {
    .panel-meteo-izquierda-nueva {
        grid-template-columns: minmax(0, 1fr) 145px !important;
        gap: 20px !important;
    }
}

@media (max-width: 760px) {
    .panel-meteo-izquierda-nueva {
        grid-template-columns: 1fr !important;
    }

    .columna-indicadores {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* =========================================================
   AJUSTES PANEL · INDICADORES, HUMEDAD Y AQI
========================================================= */

/* Indicadores todavía más cerca de la temperatura */
.panel-meteo-izquierda-nueva {
    grid-template-columns: minmax(0, 1fr) 146px !important;
    gap: 0 !important;
}

.bloque-temperatura-nuevo {
    padding-left: 38px !important;
    padding-right: 0 !important;
}

.columna-indicadores {
    transform: translateX(-24px) !important;
}

/* Humedad más visible */
.bloque-temperatura-nuevo .humedad-principal {
    font-size: 17px !important;
}

.bloque-temperatura-nuevo .humedad-principal strong {
    font-size: 25px !important;
}

.bloque-temperatura-nuevo .icono-humedad {
    width: 22px !important;
    height: 27px !important;
}

.bloque-temperatura-nuevo .microcontexto-hum {
    font-size: 10px !important;
}

/* AQI con hoja verde */
.metrica-icono-hoja {
    color: #2f9c58 !important;
    background: rgba(47,156,88,.08) !important;
}

.icono-hoja-aqi {
    stroke-width: 3.2 !important;
}

.aqi-contenido {
    min-width: 220px;
    width: 100%;
    max-width: 290px;
}

.aqi-linea-principal {
    display: flex;
    align-items: center;
    gap: 9px;
}

.aqi-linea-principal .badge {
    margin-top: 0;
}

/* Barra AQI */
.aqi-indicador {
    margin-top: 9px;
    width: 100%;
}

.aqi-barra {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    height: 8px;
    overflow: visible;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}

.aqi-zona:first-child {
    border-radius: 999px 0 0 999px;
}

.aqi-zona:last-child {
    border-radius: 0 999px 999px 0;
}

.aqi-muy-buena {
    background: #23b26d;
}

.aqi-buena {
    background: #72c84a;
}

.aqi-aceptable {
    background: #b8d83d;
}

.aqi-moderada {
    background: #f0d83b;
}

.aqi-regular {
    background: #ee9a2d;
}

.aqi-mala {
    background: #e4534f;
}

.aqi-muy-insalubre {
    background: #9a427c;
}

.aqi-peligrosa {
    background: #731f2b;
}

.aqi-marcador {
    position: absolute;
    top: -7px;
    width: 2px;
    height: 15px;
    transform: translateX(-50%);
    background: #294a5d;
    border-radius: 2px;
    z-index: 4;
}

.aqi-marcador-punta {
    position: absolute;
    top: 11px;
    left: 50%;
    width: 8px;
    height: 8px;
    transform: translate(-50%, -50%);
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: #294a5d;
    box-shadow: 0 1px 3px rgba(23,60,85,.22);
}

.aqi-leyenda {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    color: #91a0a8;
    font-size: 7px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .35px;
}

/* Un poco más de espacio para que el AQI no quede apretado */
.metrica-aqi-mejorada {
    min-height: 105px !important;
}

@media (max-width: 1180px) {
    .bloque-temperatura-nuevo {
        padding-left: 28px !important;
    }

    .columna-indicadores {
        transform: translateX(-16px) !important;
    }
}

@media (max-width: 760px) {
    .bloque-temperatura-nuevo {
        padding-left: 0 !important;
    }

    .columna-indicadores {
        transform: none !important;
    }

    .aqi-contenido {
        max-width: none;
    }
}

/* =========================================================
   ESCALA AQI · EL TIEMPO SEVILLA + ÍNDICE UV (OMS/WMO)
========================================================= */

/* AQI 0–500:
   0–10 Muy buena · 11–25 Buena · 26–50 Aceptable · 51–100 Moderada
   101–150 Regular · 151–200 Mala · 201–300 Muy insalubre · 301–500 Peligrosa.
   Las anchuras son proporcionales al rango numérico para que el marcador
   siga correspondiéndose con la posición lineal AQI/500.
*/
.aqi-barra {
    display: grid !important;
    grid-template-columns: 10fr 15fr 25fr 50fr 50fr 50fr 100fr 200fr !important;
}

.aqi-muy-buena {
    background: #23b26d !important;
}

.aqi-buena {
    background: #72c84a !important;
}

.aqi-aceptable {
    background: #b8d83d !important;
}

.aqi-moderada {
    background: #f0d83b !important;
}

.aqi-regular {
    background: #ee9a2d !important;
}

.aqi-mala {
    background: #e4534f !important;
}

.aqi-muy-insalubre {
    background: #9a427c !important;
}

.aqi-peligrosa {
    background: #731f2b !important;
}

/* UV */
.uv-contenido {
    min-width: 190px;
    width: 100%;
    max-width: 260px;
}

.uv-linea-principal {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;

    color: #627782;
    font-size: 10px;
}

.uv-linea-principal strong {
    color: #294a5d;
    font-size: 14px;
}

.uv-linea-principal .badge {
    margin-top: 0;
}

.uv-indicador {
    margin-top: 9px;
    width: 100%;
}

/* Escala visual 0–12:
   0–2 Bajo, 3–5 Moderado, 6–7 Alto, 8–10 Muy alto, 11+ Extremo.
   El último tramo representa 11 o superior.
*/
.uv-barra {
    position: relative;

    display: grid;
    grid-template-columns: 3fr 3fr 2fr 3fr 1fr;

    height: 8px;

    overflow: visible;

    border-radius: 999px;

    box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}

.uv-zona:first-child {
    border-radius: 999px 0 0 999px;
}

.uv-zona:nth-child(5) {
    border-radius: 0 999px 999px 0;
}

.uv-bajo {
    background: #3cad69;
}

.uv-moderado {
    background: #eadb38;
}

.uv-alto {
    background: #eb982f;
}

.uv-muy-alto {
    background: #df5148;
}

.uv-extremo {
    background: #8c3b8f;
}

.uv-marcador {
    position: absolute;
    top: -7px;

    width: 2px;
    height: 15px;

    transform: translateX(-50%);

    background: #294a5d;
    border-radius: 2px;

    z-index: 4;
}

.uv-marcador-punta {
    position: absolute;
    top: 11px;
    left: 50%;

    width: 8px;
    height: 8px;

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

    border: 2px solid #ffffff;
    border-radius: 50%;
    background: #294a5d;

    box-shadow: 0 1px 3px rgba(23,60,85,.22);
}

.uv-leyenda {
    display: flex;
    justify-content: space-between;

    margin-top: 6px;

    color: #91a0a8;

    font-size: 7px;
    font-weight: 700;
}

.metrica-uv-mejorada {
    min-height: 110px !important;
}

/* =========================================================
   HOJA CALIDAD DEL AIRE · VERSIÓN MÁS CLARA
========================================================= */

.icono-hoja-aqi {
    width: 52px !important;
    height: 52px !important;
    overflow: visible;
}

.icono-hoja-aqi .hoja-aqi-contorno {
    fill: rgba(47, 156, 88, .065);
    stroke: currentColor;
    stroke-width: 2.15;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icono-hoja-aqi .hoja-aqi-nervio-principal {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.3;
    stroke-linecap: round;
}

.icono-hoja-aqi .hoja-aqi-nervio {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    opacity: .92;
}

.tabla-verde .icono-tabla-svg svg {
    stroke-width: 1.9 !important;
}

/* =========================================================
   ALINEACIÓN PRECIIPITACIONES / SOLAR-UV
========================================================= */

/* Neutralizamos cualquier desplazamiento previo del bloque Solar / UV */
.panel-meteo-derecha > .metrica-solar-panel,
.panel-meteo-derecha-avanzado > .metrica-solar-panel {
    margin-top: 0 !important;
}

/* Ambos bloques comparten exactamente la misma alineación vertical */
.metrica-precipitaciones-panel,
.metrica-solar-panel {
    align-self: start !important;
    margin-top: 0 !important;
}

/* Evita que reglas antiguas por nth-of-type vuelvan a bajar Solar */
.panel-meteo-derecha > .metrica:nth-of-type(4),
.panel-meteo-derecha-avanzado > .metrica:nth-of-type(4) {
    margin-top: 0 !important;
}

/* =========================================================
   TEMPERATURA / HUMEDAD · PERIODO DE TENDENCIA ÚNICO
========================================================= */

.periodo-tendencia-comun {
    margin-top: 5px;
    margin-bottom: 5px;

    color: #8a99a1;

    font-size: 8px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .35px;
}

.microcontexto-temp,
.microcontexto-hum {
    margin-top: 2px;
}

.microcontexto-temp strong,
.microcontexto-hum strong {
    font-size: 11px;
}

/* =========================================================
   TEMPERATURA / HUMEDAD · DOBLE PERIODO DE VARIACIÓN
========================================================= */

.tendencia-doble {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;

    margin-top: 4px;
}

.tendencia-doble strong {
    color: #617987;
    font-size: 10px;
    font-weight: 700;
}

.separador-tendencia {
    color: #a1adb4;
    font-size: 10px;
}

.microcontexto-hum.tendencia-doble {
    margin-left: 27px;
}

@media (max-width: 520px) {
    .tendencia-doble {
        gap: 4px;
    }
}

/* =========================================================
   FLECHAS DE TENDENCIA MÁS GRANDES
   Temperatura / humedad
   En estado estable no se muestra icono.
========================================================= */

.tendencia-temperatura {
    width: 30px !important;
    height: 30px !important;

    margin-left: 9px !important;

    font-size: 22px !important;
    font-weight: 900 !important;
}

.tendencia-humedad {
    width: 25px !important;
    height: 25px !important;

    margin-left: 7px !important;

    font-size: 18px !important;
    font-weight: 900 !important;
}

/* La flecha de temperatura se alinea visualmente con el valor grande */
.temperatura-linea .tendencia-temperatura {
    margin-top: 16px !important;
}

/* Si la variable está estable, no mostramos icono */
.tendencia-variable.tendencia-estable {
    display: none !important;
}

@media (max-width: 760px) {
    .tendencia-temperatura {
        width: 27px !important;
        height: 27px !important;
        font-size: 20px !important;
    }

    .tendencia-humedad {
        width: 23px !important;
        height: 23px !important;
        font-size: 17px !important;
    }
}

/* =========================================================
   AJUSTE FINAL HUMEDAD PANEL PRINCIPAL
========================================================= */

.bloque-temperatura-nuevo .humedad-principal {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;

    font-size: 16px !important;
}

.bloque-temperatura-nuevo .humedad-principal > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.humedad-etiqueta {
    color: #60747f;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .45px;
}

.bloque-temperatura-nuevo .humedad-principal strong {
    color: #2f6f7a !important;
    font-size: 25px !important;
    font-weight: 800 !important;
    margin-left: 0 !important;
}

/* Gota mejor centrada respecto a la línea HUMEDAD + valor */
.bloque-temperatura-nuevo .icono-humedad {
    width: 21px !important;
    height: 24px !important;
    flex: 0 0 21px !important;

    margin: 0 !important;
    transform: translateY(0) !important;
}

/* Flecha más pegada al valor */
.bloque-temperatura-nuevo .tendencia-humedad {
    margin-left: 3px !important;
}

@media (max-width: 760px) {
    .bloque-temperatura-nuevo .humedad-principal {
        gap: 6px !important;
    }

    .humedad-etiqueta {
        font-size: 11px;
    }
}

/* =========================================================
   HUMEDAD · CENTRADO VERTICAL DE ETIQUETA, VALOR Y FLECHA
========================================================= */

.bloque-temperatura-nuevo .humedad-principal {
    display: flex !important;
    align-items: center !important;
}

.bloque-temperatura-nuevo .humedad-principal > span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    line-height: 1 !important;
}

.humedad-etiqueta {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
}

.bloque-temperatura-nuevo .humedad-principal strong {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
}

.bloque-temperatura-nuevo .tendencia-humedad {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 3px !important;

    vertical-align: middle !important;
    transform: none !important;
}

.bloque-temperatura-nuevo .icono-humedad {
    align-self: center !important;
}

/* =========================================================
   CORRECCIÓN · HUMEDAD CENTRADA SIN COMPACTAR EL BLOQUE
========================================================= */

/* Recuperamos el aire vertical del bloque principal */
.bloque-temperatura-nuevo .microcontexto-temp {
    margin-top: 5px !important;
    margin-bottom: 10px !important;
}

.bloque-temperatura-nuevo .humedad-bloque {
    margin-top: 13px !important;
}

.bloque-temperatura-nuevo .humedad-principal {
    margin-top: 0 !important;
    margin-bottom: 5px !important;
}

.bloque-temperatura-nuevo .microcontexto-hum {
    margin-top: 4px !important;
    margin-bottom: 12px !important;
}

.bloque-temperatura-nuevo .extremos {
    margin-top: 17px !important;
}

/* Mantenemos únicamente el centrado de la línea de humedad */
.bloque-temperatura-nuevo .humedad-principal,
.bloque-temperatura-nuevo .humedad-principal > span,
.humedad-etiqueta,
.bloque-temperatura-nuevo .humedad-principal strong,
.bloque-temperatura-nuevo .tendencia-humedad {
    align-items: center !important;
}

.bloque-temperatura-nuevo .humedad-principal > span {
    line-height: normal !important;
}

.humedad-etiqueta,
.bloque-temperatura-nuevo .humedad-principal strong {
    line-height: 1.15 !important;
}

.bloque-temperatura-nuevo .tendencia-humedad {
    line-height: 1 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* =========================================================
   AJUSTE FINO · CENTRADO VERTICAL DEL VALOR DE HUMEDAD
========================================================= */

.bloque-temperatura-nuevo .humedad-principal > span {
    display: inline-flex !important;
    align-items: center !important;
}

.bloque-temperatura-nuevo .humedad-principal strong {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
    position: relative;
    top: 1px;
}

.humedad-etiqueta {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
}

.bloque-temperatura-nuevo .tendencia-humedad {
    position: relative;
    top: 1px;
}

/* =========================================================
   HUMEDAD RELATIVA · ETIQUETA ENCIMA DEL VALOR
========================================================= */

.humedad-principal-vertical {
    display: block !important;
    margin-top: 0 !important;
}

.humedad-etiqueta-superior {
    margin: 0 0 4px 28px;

    color: #60747f;

    font-size: 10px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: .55px;
    line-height: 1.1;
}

.humedad-valor-linea {
    display: flex;
    align-items: center;

    gap: 5px;
}

.humedad-valor-linea .icono-humedad {
    width: 21px !important;
    height: 24px !important;
    flex: 0 0 21px !important;
    margin: 0 !important;
}

.humedad-valor-linea strong {
    display: inline-flex !important;
    align-items: center !important;

    color: #2f6f7a !important;

    font-size: 25px !important;
    font-weight: 800 !important;
    line-height: 1 !important;

    margin: 0 !important;
    position: static !important;
    top: auto !important;
}

.humedad-valor-linea .tendencia-humedad {
    margin-left: 2px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;

    position: static !important;
    top: auto !important;
}

.microcontexto-hum.tendencia-doble {
    margin-left: 28px !important;
    margin-top: 5px !important;
}

/* =========================================================
   CORRECCIÓN PRIORIDAD CSS · HUMEDAD RELATIVA
   Fuerza realmente la etiqueta a una fila superior.
========================================================= */

.bloque-temperatura-nuevo .humedad-principal.humedad-principal-vertical {
    display: block !important;
    align-items: initial !important;
    gap: 0 !important;
}

.bloque-temperatura-nuevo
.humedad-principal.humedad-principal-vertical
.humedad-etiqueta-superior {
    display: block !important;
    width: 100% !important;

    margin: 0 0 6px 0 !important;
    padding: 0 !important;

    line-height: 1.1 !important;
}

.bloque-temperatura-nuevo
.humedad-principal.humedad-principal-vertical
.humedad-valor-linea {
    display: flex !important;
    align-items: center !important;

    width: 100% !important;
    gap: 5px !important;
}

.bloque-temperatura-nuevo
.humedad-principal.humedad-principal-vertical
.humedad-valor-linea strong {
    display: inline-flex !important;
    align-items: center !important;

    margin: 0 !important;
    padding: 0 !important;

    line-height: 1 !important;
    position: static !important;
    top: auto !important;
}

.bloque-temperatura-nuevo
.humedad-principal.humedad-principal-vertical
.humedad-valor-linea .tendencia-humedad {
    margin: 0 0 0 3px !important;
    position: static !important;
    top: auto !important;
    transform: none !important;
}

/* La línea de variaciones comienza alineada con el valor */
.bloque-temperatura-nuevo .humedad-bloque .microcontexto-hum {
    margin-left: 26px !important;
    margin-top: 6px !important;
}

/* =========================================================
   HUMEDAD CENTRADA + AQI DEBAJO DE SOLAR / UV
========================================================= */

/* Centrado real del bloque de humedad bajo la temperatura */
.bloque-temperatura-nuevo
.humedad-principal.humedad-principal-vertical {
    width: 100% !important;
    text-align: center !important;
}

.bloque-temperatura-nuevo
.humedad-principal.humedad-principal-vertical
.humedad-etiqueta-superior {
    width: 100% !important;
    margin: 0 0 6px 0 !important;
    text-align: center !important;
}

.bloque-temperatura-nuevo
.humedad-principal.humedad-principal-vertical
.humedad-valor-linea {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
}

.bloque-temperatura-nuevo
.humedad-bloque
.microcontexto-hum {
    display: flex !important;
    justify-content: center !important;

    width: 100% !important;
    margin-left: 0 !important;
    text-align: center !important;
}

/* ---------------------------------------------------------
   Posición del AQI en el panel principal
   Presión      | Viento
   Precipitación| Solar/UV
                | Calidad del aire
--------------------------------------------------------- */

.panel-meteo-derecha-avanzado {
    grid-template-columns: 1fr 1fr !important;
}

.metrica-aqi,
.metrica-aqi-bajo-solar {
    grid-column: 2 !important;
    grid-row: 3 !important;

    align-self: start !important;

    width: 100% !important;
    margin-top: 0 !important;
}

/* Evitamos reglas antiguas que hacían al AQI ocupar las dos columnas */
.panel-meteo-derecha .metrica-aqi {
    grid-column: 2 !important;
}

/* El indicador AQI aprovecha el ancho disponible de su columna */
.metrica-aqi-bajo-solar .aqi-contenido {
    max-width: none !important;
    width: 100% !important;
}

@media (max-width: 820px) {

    .metrica-aqi,
    .metrica-aqi-bajo-solar {
        grid-column: 1 !important;
        grid-row: auto !important;
    }
}

/* =========================================================
   CENTRADO REAL HUMEDAD RESPECTO A TEMPERATURA
========================================================= */

/*
   Temperatura y humedad comparten ahora el mismo eje visual.
   Así dejamos de centrar la humedad respecto a toda la columna.
*/

.eje-temp-humedad {
    width: 230px;
}

/* Estado del cielo y temperatura mantienen lectura a la izquierda */
.eje-temp-humedad .estado-texto-integrado {
    width: 100%;
}

.eje-temp-humedad .temperatura-linea {
    width: 100%;
}

/* Humedad centrada EXACTAMENTE dentro del mismo ancho */
.eje-temp-humedad .humedad-bloque {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
}

.eje-temp-humedad
.humedad-principal.humedad-principal-vertical {
    width: 100% !important;
    text-align: center !important;
}

.eje-temp-humedad
.humedad-principal.humedad-principal-vertical
.humedad-etiqueta-superior {
    display: block !important;
    width: 100% !important;
    margin: 0 0 6px 0 !important;
    text-align: center !important;
}

.eje-temp-humedad
.humedad-principal.humedad-principal-vertical
.humedad-valor-linea {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
}

.eje-temp-humedad .microcontexto-hum {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    margin-left: 0 !important;
    text-align: center !important;
}

/* También centramos las variaciones de temperatura sobre ese mismo eje */
.eje-temp-humedad .microcontexto-temp {
    width: 100% !important;
}

/* Máxima / mínima quedan fuera del eje para conservar el diseño actual */
.bloque-temperatura-nuevo .extremos {
    margin-top: 17px !important;
}

@media (max-width: 1180px) {
    .eje-temp-humedad {
        width: 220px;
    }
}

@media (max-width: 760px) {
    .eje-temp-humedad {
        width: 100%;
        max-width: 240px;
        margin: 0 auto;
    }
}

/* =========================================================
   REORDENADO DEFINITIVO TEMPERATURA / HUMEDAD
========================================================= */

.eje-temp-humedad-reordenado {
    width: 250px !important;
}

.estado-texto-integrado {
    margin-bottom: 10px !important;
}

.temperatura-etiqueta-principal {
    margin-bottom: 4px;

    color: #60747f;
    font-size: 10px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: .55px;
}

.temperatura-linea-reordenada {
    display: flex !important;
    align-items: flex-start !important;
    width: 100%;
}

.temperatura-linea-reordenada .temperatura-valor {
    color: #1f2529 !important;
}

.eje-temp-humedad-reordenado .microcontexto-temp {
    margin-top: 5px !important;
    margin-bottom: 0 !important;
}

.extremos-reordenados {
    display: flex !important;
    gap: 24px !important;

    margin-top: 13px !important;
    margin-bottom: 18px !important;
}

.extremos-reordenados .extremo {
    gap: 7px;
}

.humedad-bloque-reordenado {
    width: 100% !important;
    margin: 0 !important;
    transform: none !important;
}

.humedad-bloque-reordenado .humedad-etiqueta-superior {
    display: block !important;

    width: 100% !important;
    margin: 0 0 6px 0 !important;

    color: #60747f;
    font-size: 10px;
    font-weight: 800;

    text-align: left !important;
    text-transform: uppercase;
    letter-spacing: .55px;
}

.humedad-bloque-reordenado .humedad-valor-linea {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 100% !important;
    gap: 5px !important;
}

.humedad-bloque-reordenado .humedad-valor-linea strong {
    display: inline-flex !important;
    align-items: center !important;

    margin: 0 !important;

    color: #2f6f7a !important;
    font-size: 25px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

.humedad-bloque-reordenado .microcontexto-hum {
    display: flex !important;
    justify-content: flex-start !important;

    width: 100% !important;
    margin: 6px 0 0 0 !important;

    text-align: left !important;
}

/* Neutraliza desplazamientos anteriores */
.eje-temp-humedad-reordenado .humedad-bloque,
.eje-temp-humedad-reordenado .microcontexto-hum {
    transform: none !important;
}

@media (max-width: 1180px) {
    .eje-temp-humedad-reordenado {
        width: 235px !important;
    }
}

@media (max-width: 760px) {
    .eje-temp-humedad-reordenado {
        width: 100% !important;
        max-width: 250px;
        margin: 0 auto;
    }
}

/* =========================================================
   AJUSTE ETIQUETAS + VIENTO BAJO PRECIPITACIONES
========================================================= */

/* Un poco más grandes los rótulos principales */
.temperatura-etiqueta-principal {
    font-size: 12px !important;
    letter-spacing: .65px !important;
}

.humedad-bloque-reordenado .humedad-etiqueta-superior {
    font-size: 12px !important;
    letter-spacing: .65px !important;
}

/*
   Distribución derecha:
   Columna 1: Presión -> Precipitaciones -> Viento
   Columna 2: Solar/UV -> Calidad del aire
*/
.panel-meteo-derecha,
.panel-meteo-derecha-avanzado {
    grid-template-columns: 1fr 1fr !important;
}

/* Presión arriba izquierda */
.panel-meteo-derecha > .metrica-presion-avanzada,
.panel-meteo-derecha-avanzado > .metrica-presion-avanzada {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

/* Precipitaciones en segunda fila izquierda */
.panel-meteo-derecha > .metrica-precipitaciones-panel,
.panel-meteo-derecha-avanzado > .metrica-precipitaciones-panel {
    grid-column: 1 !important;
    grid-row: 2 !important;
}

/* Viento justo debajo de Precipitaciones */
.panel-meteo-derecha > .metrica-viento-bajo-precipitaciones,
.panel-meteo-derecha-avanzado > .metrica-viento-bajo-precipitaciones {
    grid-column: 1 !important;
    grid-row: 3 !important;
    margin-top: 0 !important;
}

/* Solar/UV arriba derecha */
.panel-meteo-derecha > .metrica-solar-panel,
.panel-meteo-derecha-avanzado > .metrica-solar-panel,
.panel-meteo-derecha > .metrica-uv-mejorada,
.panel-meteo-derecha-avanzado > .metrica-uv-mejorada {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    align-self: center !important;
}

/* AQI debajo de Solar/UV */
.panel-meteo-derecha > .metrica-aqi,
.panel-meteo-derecha-avanzado > .metrica-aqi,
.panel-meteo-derecha > .metrica-aqi-bajo-solar,
.panel-meteo-derecha-avanzado > .metrica-aqi-bajo-solar {
    grid-column: 2 !important;
    grid-row: 3 !important;
    align-self: start !important;
}

@media (max-width: 820px) {
    .panel-meteo-derecha > .metrica,
    .panel-meteo-derecha-avanzado > .metrica {
        grid-column: 1 !important;
        grid-row: auto !important;
    }
}

/* =========================================================
   ORDEN COLUMNA IZQUIERDA
   Presión -> Viento -> Precipitaciones
========================================================= */

.panel-meteo-derecha > .metrica-presion-avanzada,
.panel-meteo-derecha-avanzado > .metrica-presion-avanzada {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

.panel-meteo-derecha > .metrica-viento-bajo-precipitaciones,
.panel-meteo-derecha-avanzado > .metrica-viento-bajo-precipitaciones {
    grid-column: 1 !important;
    grid-row: 2 !important;
    margin-top: 0 !important;
}

.panel-meteo-derecha > .metrica-precipitaciones-panel,
.panel-meteo-derecha-avanzado > .metrica-precipitaciones-panel {
    grid-column: 1 !important;
    grid-row: 3 !important;
    margin-top: 0 !important;
}

/* Columna derecha se mantiene */
.panel-meteo-derecha > .metrica-solar-panel,
.panel-meteo-derecha-avanzado > .metrica-solar-panel,
.panel-meteo-derecha > .metrica-uv-mejorada,
.panel-meteo-derecha-avanzado > .metrica-uv-mejorada {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    align-self: center !important;
}

.panel-meteo-derecha > .metrica-aqi,
.panel-meteo-derecha-avanzado > .metrica-aqi,
.panel-meteo-derecha > .metrica-aqi-bajo-solar,
.panel-meteo-derecha-avanzado > .metrica-aqi-bajo-solar {
    grid-column: 2 !important;
    grid-row: 3 !important;
    align-self: start !important;
}

@media (max-width: 820px) {
    .panel-meteo-derecha > .metrica,
    .panel-meteo-derecha-avanzado > .metrica {
        grid-column: 1 !important;
        grid-row: auto !important;
    }
}

/* =========================================================
   ALINEACIONES PANEL + ICONO SINÓPTICO
========================================================= */

/* Estado del cielo con icono discreto */
.estado-con-icono {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
}

.icono-sinoptica {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    overflow: visible;
}

.icono-sinoptica .sinoptica-sol {
    fill: none;
    stroke: #e2a52c;
    stroke-width: 2.2;
}

.icono-sinoptica .sinoptica-rayo {
    fill: none;
    stroke: #e2a52c;
    stroke-width: 2;
    stroke-linecap: round;
}

.icono-sinoptica .sinoptica-nube {
    fill: #f7fbfd;
    stroke: #5c9fc8;
    stroke-width: 2.2;
    stroke-linejoin: round;
}

/* Tendencia de humedad alineada a la izquierda */
.eje-temp-humedad-reordenado .microcontexto-hum,
.humedad-bloque-reordenado .microcontexto-hum {
    justify-content: flex-start !important;
    text-align: left !important;
    margin-left: 0 !important;
}

/* =========================================================
   REJILLA DEL PANEL
   Fila 1: Presión       | Solar / UV
   Fila 2: Viento        | Calidad del aire
   Fila 3: Precipitaciones
========================================================= */

.panel-meteo-derecha,
.panel-meteo-derecha-avanzado {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto auto !important;
    align-items: start !important;
}

/* Presión y Solar exactamente en la primera fila */
.panel-meteo-derecha > .metrica-presion-avanzada,
.panel-meteo-derecha-avanzado > .metrica-presion-avanzada {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: start !important;
    margin-top: 0 !important;
}

.panel-meteo-derecha > .metrica-solar-panel,
.panel-meteo-derecha-avanzado > .metrica-solar-panel,
.panel-meteo-derecha > .metrica-uv-mejorada,
.panel-meteo-derecha-avanzado > .metrica-uv-mejorada {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: start !important;
    margin-top: 0 !important;
}

/* Viento y AQI exactamente en la segunda fila */
.panel-meteo-derecha > .metrica-viento-bajo-precipitaciones,
.panel-meteo-derecha-avanzado > .metrica-viento-bajo-precipitaciones {
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: start !important;
    margin-top: 0 !important;
}

.panel-meteo-derecha > .metrica-aqi,
.panel-meteo-derecha-avanzado > .metrica-aqi,
.panel-meteo-derecha > .metrica-aqi-bajo-solar,
.panel-meteo-derecha-avanzado > .metrica-aqi-bajo-solar {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: start !important;
    margin-top: 0 !important;
}

/* Precipitaciones debajo del viento */
.panel-meteo-derecha > .metrica-precipitaciones-panel,
.panel-meteo-derecha-avanzado > .metrica-precipitaciones-panel {
    grid-column: 1 !important;
    grid-row: 3 !important;
    align-self: start !important;
    margin-top: 0 !important;
}

@media (max-width: 820px) {
    .panel-meteo-derecha,
    .panel-meteo-derecha-avanzado {
        grid-template-columns: 1fr !important;
        grid-template-rows: none !important;
    }

    .panel-meteo-derecha > .metrica,
    .panel-meteo-derecha-avanzado > .metrica {
        grid-column: 1 !important;
        grid-row: auto !important;
    }
}

/* =========================================================
   TENDENCIA DE HUMEDAD · ALINEACIÓN IZQUIERDA REAL
========================================================= */

.eje-temp-humedad-reordenado
.humedad-bloque-reordenado
.microcontexto-hum {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;

    width: auto !important;
    max-width: none !important;

    margin-top: 6px !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;

    padding: 0 !important;

    text-align: left !important;
    align-self: flex-start !important;
}

.eje-temp-humedad-reordenado
.humedad-bloque-reordenado
.microcontexto-hum > * {
    text-align: left !important;
}

/* =========================================================
   PANEL PRINCIPAL · COMPACTACIÓN VERTICAL
========================================================= */

.panel-meteo-derecha,
.panel-meteo-derecha-avanzado {
    row-gap: 10px !important;
}

/* Columna izquierda */
.panel-meteo-derecha > .metrica-presion-avanzada,
.panel-meteo-derecha-avanzado > .metrica-presion-avanzada,
.panel-meteo-derecha > .metrica-viento-bajo-precipitaciones,
.panel-meteo-derecha-avanzado > .metrica-viento-bajo-precipitaciones,
.panel-meteo-derecha > .metrica-precipitaciones-panel,
.panel-meteo-derecha-avanzado > .metrica-precipitaciones-panel {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Columna derecha */
.panel-meteo-derecha > .metrica-solar-panel,
.panel-meteo-derecha-avanzado > .metrica-solar-panel,
.panel-meteo-derecha > .metrica-uv-mejorada,
.panel-meteo-derecha-avanzado > .metrica-uv-mejorada,
.panel-meteo-derecha > .metrica-aqi,
.panel-meteo-derecha-avanzado > .metrica-aqi,
.panel-meteo-derecha > .metrica-aqi-bajo-solar,
.panel-meteo-derecha-avanzado > .metrica-aqi-bajo-solar {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Refuerzo de separación más corta entre filas */
.panel-meteo-derecha,
.panel-meteo-derecha-avanzado {
    grid-auto-rows: min-content !important;
    align-content: start !important;
}

/* =========================================================
   PANEL PRINCIPAL · LEGIBILIDAD
   Un salto moderado en textos secundarios
========================================================= */

/* Títulos de métricas principales */
.panel-meteo-derecha .metrica h3,
.panel-meteo-derecha-avanzado .metrica h3,
.panel-meteo-derecha .metrica-titulo,
.panel-meteo-derecha-avanzado .metrica-titulo {
    font-size: 12px !important;
}

/* Etiquetas pequeñas del bloque de temperatura/humedad */
.temperatura-etiqueta-principal,
.humedad-bloque-reordenado .humedad-etiqueta-superior {
    font-size: 13px !important;
}

/* Tendencias bajo temperatura y humedad */
.microcontexto-temp,
.microcontexto-hum {
    font-size: 12px !important;
}

/* Máxima y mínima */
.extremos-reordenados small,
.extremos small {
    font-size: 10px !important;
}

/* Tarjetas verticales: Tendencia, Confort, Visibilidad, etc. */
.columna-indicadores .indicador-label,
.columna-indicadores .indicador-titulo,
.columna-indicadores small {
    font-size: 10px !important;
}

.columna-indicadores .indicador-valor,
.columna-indicadores strong {
    font-size: 12px !important;
}

/* Textos auxiliares dentro de presión, viento, precipitación, solar y AQI */
.panel-meteo-derecha .metrica small,
.panel-meteo-derecha-avanzado .metrica small,
.panel-meteo-derecha .metrica .detalle,
.panel-meteo-derecha-avanzado .metrica .detalle,
.panel-meteo-derecha .metrica .subdato,
.panel-meteo-derecha-avanzado .metrica .subdato {
    font-size: 11px !important;
}

/* Estado sinóptico algo más legible sin ganar demasiado peso */
.estado-texto-integrado,
.estado-con-icono {
    font-size: 14px !important;
}

/* =========================================================
   PANEL PRINCIPAL · COLUMNAS MÁS CERCANAS
========================================================= */

.panel-meteo-derecha,
.panel-meteo-derecha-avanzado {
    grid-template-columns: minmax(250px, 280px) minmax(270px, 300px) !important;
    column-gap: 40px !important;
    justify-content: start !important;
}

@media (max-width: 1100px) {
    .panel-meteo-derecha,
    .panel-meteo-derecha-avanzado {
        grid-template-columns: 1fr 1fr !important;
        column-gap: 28px !important;
    }
}

@media (max-width: 820px) {
    .panel-meteo-derecha,
    .panel-meteo-derecha-avanzado {
        grid-template-columns: 1fr !important;
        column-gap: 0 !important;
    }
}

/* =========================================================
   ESTANDARIZACIÓN DE ESPACIADO · TIEMPO ACTUAL
========================================================= */

.pagina-tiempo-actual,
.panel-tiempo-actual,
.panel-meteo-principal {
    --gap-interno: var(--espacio-4);
}

/* Separación normalizada entre grandes bloques */
.panel-meteo-principal,
.tablas-meteorologicas,
.descripcion-condiciones,
.graficas-48h,
.sobre-estos-datos {
    margin-bottom: var(--espacio-5);
}

/* Separación interna de tarjetas */
.tabla-card,
.tarjeta-tabla,
.metrica {
    padding-top: var(--espacio-4);
    padding-bottom: var(--espacio-4);
}

/* Cabeceras de las tablas: jerarquía clara y uniforme */
.tabla-card h3,
.tarjeta-tabla h3,
.tabla-meteorologica h3,
.tabla-card .cabecera-tabla,
.tarjeta-tabla .cabecera-tabla {
    text-transform: uppercase !important;
    letter-spacing: .45px !important;
    font-weight: 800 !important;
}

/* Las filas mantienen capitalización normal */
.tabla-card td,
.tabla-card th,
.tarjeta-tabla td,
.tarjeta-tabla th,
.tabla-meteorologica td,
.tabla-meteorologica th {
    text-transform: none;
}

/* Ritmo de la rejilla de tablas */
.grid-tablas,
.tablas-grid,
.tablas-meteorologicas {
    gap: var(--espacio-4) !important;
}

/* Panel principal: separaciones coherentes */
.panel-meteo-derecha,
.panel-meteo-derecha-avanzado {
    row-gap: var(--espacio-3) !important;
    column-gap: 40px !important;
}

/* Indicadores y microdatos */
.columna-indicadores {
    gap: var(--espacio-2) !important;
}

.microcontexto-temp,
.microcontexto-hum {
    margin-top: var(--espacio-2) !important;
}

/* Separación estándar entre máxima/mínima y humedad */
.extremos-reordenados {
    margin-top: var(--espacio-3) !important;
    margin-bottom: var(--espacio-4) !important;
}

@media (max-width: 820px) {
    .grid-tablas,
    .tablas-grid,
    .tablas-meteorologicas {
        gap: var(--espacio-3) !important;
    }
}

/* =========================================================
   CABECERAS REALES DE LAS TABLAS · MAYÚSCULAS
========================================================= */

.tarjeta-tabla > header h2 {
    text-transform: uppercase !important;
    letter-spacing: .45px !important;
    font-weight: 800 !important;
}

/* =========================================================
   LEGIBILIDAD FINAL DEL PANEL PRINCIPAL
========================================================= */

/* Rótulos principales de cada métrica */
.panel-meteo-derecha .metrica h3,
.panel-meteo-derecha-avanzado .metrica h3,
.panel-meteo-derecha .metrica-titulo,
.panel-meteo-derecha-avanzado .metrica-titulo {
    font-size: 13px !important;
    letter-spacing: .45px !important;
}

/* Textos auxiliares de las métricas */
.panel-meteo-derecha .metrica small,
.panel-meteo-derecha-avanzado .metrica small,
.panel-meteo-derecha .metrica .detalle,
.panel-meteo-derecha-avanzado .metrica .detalle,
.panel-meteo-derecha .metrica .subdato,
.panel-meteo-derecha-avanzado .metrica .subdato {
    font-size: 12px !important;
    line-height: 1.3 !important;
}

/* Dirección, unidad y pequeños textos numéricos */
.panel-meteo-derecha .unidad,
.panel-meteo-derecha-avanzado .unidad,
.panel-meteo-derecha .direccion,
.panel-meteo-derecha-avanzado .direccion {
    font-size: 12px !important;
}

/* Tarjetas laterales: Tendencia, Confort, Visibilidad... */
.columna-indicadores .indicador-label,
.columna-indicadores .indicador-titulo,
.columna-indicadores small {
    font-size: 11px !important;
}

.columna-indicadores .indicador-valor,
.columna-indicadores strong {
    font-size: 13px !important;
}

/* Microtendencias */
.microcontexto-temp,
.microcontexto-hum {
    font-size: 12px !important;
    line-height: 1.3 !important;
}

/* =========================================================
   MENOS ESPACIO ENTRE PRESIÓN -> VIENTO -> PRECIPITACIONES
========================================================= */

/*
   La fila superior toma la altura de Solar/UV.
   Para que la columna izquierda no herede ese hueco visual,
   subimos únicamente Viento y Precipitaciones.
*/

.panel-meteo-derecha > .metrica-viento-bajo-precipitaciones,
.panel-meteo-derecha-avanzado > .metrica-viento-bajo-precipitaciones {
    transform: translateY(-18px) !important;
}

.panel-meteo-derecha > .metrica-precipitaciones-panel,
.panel-meteo-derecha-avanzado > .metrica-precipitaciones-panel {
    transform: translateY(-18px) !important;
}

/* El hueco propio de la rejilla queda además algo más corto */
.panel-meteo-derecha,
.panel-meteo-derecha-avanzado {
    row-gap: 8px !important;
}

@media (max-width: 820px) {
    .panel-meteo-derecha > .metrica-viento-bajo-precipitaciones,
    .panel-meteo-derecha-avanzado > .metrica-viento-bajo-precipitaciones,
    .panel-meteo-derecha > .metrica-precipitaciones-panel,
    .panel-meteo-derecha-avanzado > .metrica-precipitaciones-panel {
        transform: none !important;
    }
}

/* =========================================================
   PANEL PRINCIPAL · SUBIR TEXTOS PEQUEÑOS OTRO PASO
========================================================= */

/* Títulos de métricas */
.panel-meteo-derecha .metrica h3,
.panel-meteo-derecha-avanzado .metrica h3,
.panel-meteo-derecha .metrica-titulo,
.panel-meteo-derecha-avanzado .metrica-titulo {
    font-size: 14px !important;
}

/* Textos auxiliares generales */
.panel-meteo-derecha .metrica small,
.panel-meteo-derecha-avanzado .metrica small,
.panel-meteo-derecha .metrica .detalle,
.panel-meteo-derecha-avanzado .metrica .detalle,
.panel-meteo-derecha .metrica .subdato,
.panel-meteo-derecha-avanzado .metrica .subdato {
    font-size: 13px !important;
    line-height: 1.35 !important;
}

/* Unidades y direcciones */
.panel-meteo-derecha .unidad,
.panel-meteo-derecha-avanzado .unidad,
.panel-meteo-derecha .direccion,
.panel-meteo-derecha-avanzado .direccion {
    font-size: 13px !important;
}

/* Microtextos bajo temperatura/humedad */
.microcontexto-temp,
.microcontexto-hum {
    font-size: 13px !important;
}

/* Máxima / mínima */
.extremos-reordenados small,
.extremos small {
    font-size: 11px !important;
}

/* Tarjetas laterales */
.columna-indicadores .indicador-label,
.columna-indicadores .indicador-titulo,
.columna-indicadores small {
    font-size: 12px !important;
}

.columna-indicadores .indicador-valor,
.columna-indicadores strong {
    font-size: 14px !important;
}

/* Estado del cielo */
.estado-texto-integrado,
.estado-con-icono {
    font-size: 15px !important;
}

/* Texto de avisos del panel */
.avisos-panel,
.avisos-panel small,
.avisos-panel .detalle {
    font-size: 12px !important;
}

/* =========================================================
   TABLAS · DATOS AGRUPADOS EN UNA MISMA FILA
========================================================= */

.tarjeta-tabla .badge-en-linea {
    display: inline-flex !important;
    align-items: center;
    margin-left: 7px;
    vertical-align: middle;
}

.tarjeta-tabla .dato-secundario-tabla {
    margin-left: 7px;
    font-size: .88em;
    font-weight: 500;
    color: #667985;
    white-space: nowrap;
}

/* =========================================================
   CABECERA · ESTADO SUPERIOR MÁS A LA IZQUIERDA
========================================================= */

.estado-superior {
    min-width: 370px !important;
    width: auto !important;
    margin-left: auto !important;
    margin-right: 44px !important;
    text-align: left !important;
}

.estado-superior .actualizacion-datos,
.estado-superior .estado-avisos-rapido {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    white-space: nowrap !important;
    text-align: left !important;
}

.estado-superior .actualizacion-datos {
    min-width: 350px !important;
}

@media (max-width: 1100px) {
    .estado-superior {
        min-width: 0 !important;
        margin-right: 0 !important;
    }

    .estado-superior .actualizacion-datos,
    .estado-superior .estado-avisos-rapido {
        white-space: normal !important;
    }
}

/* =========================================================
   AJUSTE FINAL · HORAS / ESTADO SUPERIOR / ICONO AVISOS
========================================================= */

.estado-superior {
    min-width: 360px !important;
    width: auto !important;
    margin-left: auto !important;
    margin-right: 26px !important;
    text-align: left !important;
}

.estado-superior .actualizacion-datos,
.estado-superior .estado-avisos-rapido {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    white-space: nowrap !important;
    text-align: left !important;
}

.tarjeta-tabla .dato-secundario-tabla {
    margin-left: 7px;
    font-size: .88em;
    font-weight: 500;
    color: #667985;
    white-space: nowrap;
}

.icono-aviso-check {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
}

.icono-aviso-check circle {
    fill: #effaf3;
    stroke: #43aa6d;
    stroke-width: 2;
}

.icono-aviso-check path {
    fill: none;
    stroke: #2f9d5f;
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 1100px) {
    .estado-superior {
        margin-right: 8px !important;
        min-width: 0 !important;
    }

    .estado-superior .actualizacion-datos,
    .estado-superior .estado-avisos-rapido {
        white-space: normal !important;
    }
}

/* =========================================================
   CORRECCIÓN QUIRÚRGICA · CABECERAS DE TABLAS
   No modifica filas ni cuerpo de las tablas.
========================================================= */

.tarjeta-tabla > header {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;

    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;

    margin: 0 !important;
}

.tarjeta-tabla > header h2 {
    margin: 0 !important;
    line-height: 1.15 !important;
}

.tarjeta-tabla > header .icono-tabla {
    align-self: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Neutralización EXCLUSIVA de reglas previas que pudieran alterar filas */
.tarjeta-tabla > table {
    height: auto !important;
    flex: initial !important;
}

.tarjeta-tabla tr,
.tarjeta-tabla td {
    height: auto !important;
}

/* =========================================================
   ICONO AVISOS · CHECK VERDE SIMPLE
========================================================= */

.aviso-icono .icono-aviso-check-final {
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;
    display: block !important;
}

.aviso-icono .icono-aviso-check-final circle {
    fill: #eef9f2 !important;
    stroke: #43aa6d !important;
    stroke-width: 1.8 !important;
}

.aviso-icono .icono-aviso-check-final path {
    fill: none !important;
    stroke: #2f9d5f !important;
    stroke-width: 2.6 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

/* El contenedor deja de parecer un escudo/badge */
.aviso-icono {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* =========================================================
   CABECERAS DE TABLAS · SOMBREADO ALINEADO
   El degradado queda dentro de la cabecera.
   Se elimina la sombra exterior que invadía la primera fila.
========================================================= */

.tarjeta-tabla > header {
    overflow: hidden !important;
}

/* TEMPERATURA Y HUMEDAD */
.tabla-roja > header {
    box-shadow: inset 0 -1px 0 rgba(204, 77, 77, .18) !important;
}

/* PRESIÓN ATMOSFÉRICA */
.tabla-gris > header {
    box-shadow: inset 0 -1px 0 rgba(83, 112, 132, .18) !important;
}

/* VIENTO */
.tabla-verdeagua > header {
    box-shadow: inset 0 -1px 0 rgba(32, 158, 152, .18) !important;
}

/* PRECIPITACIONES */
.tabla-azul > header {
    box-shadow: inset 0 -1px 0 rgba(105, 78, 174, .19) !important;
}

/* RADIACIÓN Y UV */
.tabla-amarilla > header {
    box-shadow: inset 0 -1px 0 rgba(211, 149, 22, .20) !important;
}

/* CALIDAD DEL AIRE */
.tabla-verde > header {
    box-shadow: inset 0 -1px 0 rgba(45, 143, 77, .18) !important;
}

/*
   La primera fila comienza limpia inmediatamente debajo
   de la franja de cabecera.
*/
.tarjeta-tabla > table {
    margin-top: 0 !important;
}

.tarjeta-tabla > table tr:first-child td {
    border-top: 0 !important;
}

/* =========================================================
   CABECERAS DE TABLAS · ELIMINAR FRANJA BLANCA SUPERIOR
========================================================= */

/*
   La franja blanca venía del padding vertical aplicado
   a la tarjeta completa. La cabecera debe arrancar
   directamente en el borde superior de la tarjeta.
*/
.tarjeta-tabla {
    padding-top: 0 !important;
}

/* La cabecera ocupa todo el ancho y toca el borde superior */
.tarjeta-tabla > header {
    margin-top: 0 !important;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

/* Evitamos cualquier separación accidental antes del header */
.tarjeta-tabla > header:first-child {
    margin-top: 0 !important;
}

/* =========================================================
   GRÁFICOS · SELECTOR ÚNICO 24 h / 48 h
========================================================= */

.selector-rango {
    display: inline-flex !important;
    align-items: center;
    overflow: hidden;

    border: 1px solid #dce6ec;
    border-radius: 8px;

    background: #ffffff;
}

.selector-rango .boton-rango {
    appearance: none;
    border: 0;
    border-right: 1px solid #e3ebf0;

    padding: 8px 14px;

    color: #657a86;
    background: #ffffff;

    font: inherit;
    font-size: 12px;
    font-weight: 700;

    cursor: pointer;
}

.selector-rango .boton-rango:last-child {
    border-right: 0;
}

.selector-rango .boton-rango:hover {
    background: #f4f8fb;
}

.selector-rango .boton-rango.activo {
    color: #ffffff;
    background: #4c98d6;
}

.selector-rango .boton-rango:focus-visible {
    position: relative;
    z-index: 1;
    outline: 2px solid #21445b;
    outline-offset: -2px;
}

/* Ocultamos cualquier antiguo span del selector si quedara por caché/mezcla */
.selector-rango > span {
    display: none !important;
}

/* =========================================================
   GRÁFICO COMBINADO · TEMPERATURA / SENSACIÓN / HUMEDAD
========================================================= */

.grafico-card-combinado {
    position: relative;
}

.grafico-card-cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 12px;
}

.grafico-card-cabecera h3 {
    margin: 0;
}

.grafico-subtitulo {
    margin: 4px 0 0;
    color: #7b8d98;
    font-size: 12px;
}

.selector-series {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.boton-serie {
    appearance: none;

    padding: 7px 10px;

    border: 1px solid #d8e3e9;
    border-radius: 7px;

    color: #667b87;
    background: #ffffff;

    font: inherit;
    font-size: 11px;
    font-weight: 700;

    cursor: pointer;
}

.boton-serie:hover {
    background: #f5f8fa;
}

.boton-serie.activo {
    color: #21445b;
    background: #edf5fa;
    border-color: #a8c8dc;
}

.boton-serie:focus-visible {
    outline: 2px solid #4c98d6;
    outline-offset: 2px;
}

/* Placeholder visual hasta conectar ApexCharts */
.grafico-demo-temp-hum {
    position: relative;
    min-height: 230px;
    overflow: hidden;
}

.eje-demo {
    position: absolute;
    top: 8px;

    z-index: 2;

    color: #8b9aa3;
    font-size: 11px;
    font-weight: 700;
}

.eje-demo-izquierdo {
    left: 7px;
}

.eje-demo-derecho {
    right: 7px;
}

.linea-demo {
    position: absolute;
    left: 5%;
    right: 5%;
    height: 2px;

    border-radius: 99px;

    transform-origin: left center;
    opacity: .75;

    transition: opacity .18s ease;
}

/* Tres trazos demo diferenciados sin fijar colores específicos */
.linea-demo-temperatura {
    top: 42%;
    background: currentColor;
    transform: rotate(-2deg);
}

.linea-demo-sensacion {
    top: 48%;
    background: currentColor;
    transform: rotate(1.5deg);
    opacity: .5;
}

.linea-demo-humedad {
    top: 64%;
    background: currentColor;
    transform: rotate(-1deg);
    opacity: .35;
}

/* Ocultación de series por selectores */
.grafico-card-combinado[data-serie-temperatura="0"] .linea-demo-temperatura {
    opacity: 0;
}

.grafico-card-combinado[data-serie-sensacion="0"] .linea-demo-sensacion {
    opacity: 0;
}

.grafico-card-combinado[data-serie-humedad="0"] .linea-demo-humedad {
    opacity: 0;
}

@media (max-width: 850px) {
    .grafico-card-cabecera {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =========================================================
   SOBRE ESTOS DATOS · ICONO DE INFORMACIÓN
========================================================= */

.sobre-datos-icono .icono-info-sobre-datos {
    width: 32px;
    height: 32px;
}

.sobre-datos-icono .icono-info-sobre-datos circle {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.sobre-datos-icono .icono-info-sobre-datos .info-punto {
    fill: currentColor;
    stroke: none;
}

.sobre-datos-icono .icono-info-sobre-datos .info-trazo {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.8;
    stroke-linecap: round;
}

/* =========================================================
   SOBRE ESTOS DATOS · APROVECHAR TODO EL ANCHO ÚTIL
========================================================= */

.sobre-datos-contenido {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

.sobre-datos-contenido > p {
    width: 100% !important;
    max-width: none !important;
}

.sobre-datos-nota {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

/* =========================================================
   ESCRITORIO · MENOS AIRE SOBRE EL PANEL PRINCIPAL
   No afecta a tablet ni móvil.
========================================================= */

@media (min-width: 1101px) {

    .cabecera-pagina {
        margin-bottom: 10px !important;
        padding-bottom: 0 !important;
    }

    .panel-meteo,
    .panel-meteo-avanzado {
        margin-top: 0 !important;
    }
}

/* =========================================================
   ESCRITORIO · ACERCAR REALMENTE EL PANEL A LA CABECERA
========================================================= */

@media (min-width: 1101px) {

    .panel-meteo,
    .panel-meteo-avanzado {
        margin-top: -12px !important;
    }
}

/* =========================================================
   ESCRITORIO · SUBIR BLOQUE TEMPERATURA / HUMEDAD
========================================================= */

@media (min-width: 1101px) {

    .bloque-temperatura-nuevo {
        transform: translateY(-14px) !important;
    }
}

/* =========================================================
   ESCRITORIO · SUBIDA VISIBLE DEL BLOQUE TEMPERATURA/HUMEDAD
========================================================= */

@media (min-width: 1101px) {
    .panel-meteo-izquierda-nueva .bloque-temperatura-nuevo {
        transform: translateY(-26px) !important;
        position: relative !important;
        z-index: 2 !important;
    }
}

/* =========================================================
   CABECERA · CONDICIONES ACTUALES / SEVILLA CAPITAL
========================================================= */

.cabecera-pagina-titulos .titulo-condiciones {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;

    margin: 0 !important;
    line-height: 1 !important;
}

.titulo-condiciones-principal {
    display: block;

    color: #173b55;

    font-size: 34px;
    font-weight: 800;

    letter-spacing: .3px;
    line-height: 1.05;
}

.titulo-condiciones-lugar {
    display: block;

    margin-top: 6px;

    color: #607786;

    font-size: 15px;
    font-weight: 800;

    letter-spacing: 2.1px;
    line-height: 1.1;
}

.cabecera-pagina-titulos .subtitulo-pagina {
    margin-top: 9px !important;
}

@media (max-width: 1100px) {
    .titulo-condiciones-principal {
        font-size: 30px;
    }

    .titulo-condiciones-lugar {
        font-size: 14px;
        letter-spacing: 1.8px;
    }
}

@media (max-width: 760px) {
    .titulo-condiciones-principal {
        font-size: 24px;
    }

    .titulo-condiciones-lugar {
        margin-top: 5px;
        font-size: 12px;
        letter-spacing: 1.5px;
    }
}

/* =========================================================
   GRÁFICOS · ESTRUCTURA DEFINITIVA
   1 Temp/Hum · 2 Presión · 3 Viento · 4 Precipitaciones
========================================================= */

.graficos-48 .grafico-card {
    margin-bottom: 18px;
}

.graficos-48 .grafico-card:last-child {
    margin-bottom: 0;
}

.grafico-card-cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 12px;
}

.grafico-card-cabecera h3 {
    margin: 0;
}

.grafico-subtitulo {
    margin: 4px 0 0;
    color: #7b8d98;
    font-size: 12px;
}

.selector-series {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.boton-serie {
    appearance: none;
    padding: 7px 10px;
    border: 1px solid #d8e3e9;
    border-radius: 7px;
    color: #667b87;
    background: #fff;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.boton-serie:hover {
    background: #f5f8fa;
}

.boton-serie.activo {
    color: #21445b;
    background: #edf5fa;
    border-color: #a8c8dc;
}

.grafico-demo-temp-hum,
.grafico-demo-presion,
.grafico-demo-viento,
.grafico-demo-precipitaciones {
    position: relative;
    min-height: 230px;
    overflow: hidden;
}

.eje-demo {
    position: absolute;
    top: 8px;
    z-index: 2;
    color: #8b9aa3;
    font-size: 11px;
    font-weight: 700;
}

.eje-demo-izquierdo { left: 7px; }
.eje-demo-derecho { right: 7px; }

.linea-demo {
    position: absolute;
    left: 5%;
    right: 5%;
    height: 2px;
    border-radius: 99px;
    transform-origin: left center;
    background: currentColor;
    transition: opacity .18s ease;
}

.linea-demo-temperatura { top: 42%; transform: rotate(-2deg); opacity: .75; }
.linea-demo-sensacion   { top: 48%; transform: rotate(1.5deg); opacity: .50; }
.linea-demo-humedad     { top: 64%; transform: rotate(-1deg); opacity: .35; }

.linea-demo-presion     { top: 48%; transform: rotate(-1deg); opacity: .60; }

.linea-demo-viento      { top: 42%; transform: rotate(1.5deg); opacity: .70; }
.linea-demo-rachas      { top: 34%; transform: rotate(-1.5deg); opacity: .45; }
.linea-demo-direccion   { top: 64%; transform: rotate(.5deg); opacity: .30; }

.linea-demo-lluvia      { top: 58%; transform: rotate(-.5deg); opacity: .55; }
.linea-demo-intensidad  { top: 38%; transform: rotate(1deg); opacity: .35; }

.grafico-card[data-serie-temperatura="0"] .linea-demo-temperatura,
.grafico-card[data-serie-sensacion="0"] .linea-demo-sensacion,
.grafico-card[data-serie-humedad="0"] .linea-demo-humedad,
.grafico-card[data-serie-presion="0"] .linea-demo-presion,
.grafico-card[data-serie-viento="0"] .linea-demo-viento,
.grafico-card[data-serie-rachas="0"] .linea-demo-rachas,
.grafico-card[data-serie-direccion="0"] .linea-demo-direccion,
.grafico-card[data-serie-lluvia="0"] .linea-demo-lluvia,
.grafico-card[data-serie-intensidad="0"] .linea-demo-intensidad {
    opacity: 0;
}

@media (max-width: 850px) {
    .grafico-card-cabecera {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* =========================================================
   BADGES DINÁMICOS · UV Y AQI
========================================================= */

.badge-naranja {
    color: #a75a16;
    background: #ffead4;
}

.badge-rojo {
    color: #a23f3f;
    background: #f9dede;
}

.badge-morado {
    color: #714487;
    background: #eee0f4;
}

.badge-granate {
    color: #7e3142;
    background: #f1dce1;
}

.badge-neutro {
    color: #667984;
    background: #edf2f5;
}


/* =========================================================
   TABLAS AMPLIADAS · VALORES LARGOS
========================================================= */

.tarjeta-tabla td:last-child {
    white-space: normal;
}

.tarjeta-tabla .dato-secundario-tabla {
    white-space: nowrap;
}


/* =========================================================
   RITMO VERTICAL DE LA PORTADA · ESCRITORIO
   Recupera la respiración entre los grandes bloques.
   No modifica las filas ni el contenido de las tablas.
========================================================= */

@media (min-width: 1101px) {

    /* Panel principal → tablas */
    .grid-tablas {
        margin-top: 24px !important;
    }

    /* Tablas → descripción */
    .condiciones-actuales,
    .condiciones-descriptivas {
        margin-top: 28px !important;
    }

    /* Descripción → gráficos */
    .graficos-48 {
        margin-top: 30px !important;
    }

    /* Último gráfico → Sobre estos datos */
    .sobre-datos {
        margin-top: 32px !important;
    }
}


/* =========================================================
   CORRECCIÓN DEFINITIVA · RITMO VERTICAL PANEL PRINCIPAL
   Anula parches antiguos que comprimían demasiado la zona.
========================================================= */

@media (min-width: 1101px) {

    /* El panel vuelve a separarse de la cabecera de la página */
    .cabecera-pagina {
        margin-bottom: 20px !important;
    }

    .panel-meteo,
    .panel-meteo-avanzado {
        margin-top: 0 !important;
    }

    /* Recuperar separación vertical real en la columna derecha */
    .panel-meteo-derecha,
    .panel-meteo-derecha-avanzado {
        row-gap: 20px !important;
    }

    /* Anular desplazamientos negativos antiguos */
    .panel-meteo-derecha > .metrica-viento-bajo-precipitaciones,
    .panel-meteo-derecha-avanzado > .metrica-viento-bajo-precipitaciones,
    .panel-meteo-derecha > .metrica-precipitaciones-panel,
    .panel-meteo-derecha-avanzado > .metrica-precipitaciones-panel {
        transform: none !important;
    }

    /* Mantener aire interno suficiente arriba y abajo */
    .panel-meteo-izquierda,
    .panel-meteo-izquierda-nueva {
        padding-top: 26px !important;
        padding-bottom: 26px !important;
    }

    .panel-meteo-derecha,
    .panel-meteo-derecha-avanzado {
        padding-top: 26px !important;
        padding-bottom: 26px !important;
    }

    /* El bloque Temp/Hum sigue algo elevado, pero ya no exageradamente */
    .panel-meteo-izquierda-nueva .bloque-temperatura-nuevo {
        transform: translateY(-12px) !important;
    }
}


/* =========================================================
   PRUEBA · TEMPERATURA/HUMEDAD EN TARJETA DOBLE
========================================================= */

@media (min-width: 1101px) {

    .grid-tablas .tarjeta-tabla-temperatura-doble {
        grid-column: span 2;
    }

    .tabla-temperatura-dos-columnas {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
        border-top: 1px solid #e5edf2;
    }

    .tabla-temperatura-dos-columnas > table {
        width: 100%;
        border-collapse: collapse;
        border-top: 0 !important;
    }

    .tabla-temperatura-dos-columnas > table + table {
        border-left: 1px solid #e0e9ee;
    }

    .tabla-temperatura-dos-columnas > table tr:first-child td {
        border-top: 0 !important;
    }

    .tabla-temperatura-dos-columnas > table td {
        padding: 8px 13px;
        border-top: 1px solid #e5edf2;
    }

    .tabla-temperatura-dos-columnas > table td:first-child {
        width: 56%;
    }

    .tabla-indices-termicos td:first-child {
        color: #6b5960;
    }
}

/* En tablet/móvil vuelve a una sola columna interna */
@media (max-width: 1100px) {

    .tabla-temperatura-dos-columnas {
        display: block;
    }

    .tabla-temperatura-dos-columnas > table + table {
        border-left: 0;
        border-top: 1px solid #e0e9ee !important;
    }
}


/* =========================================================
   EFEMÉRIDES LUNARES + ACTIVIDAD SOLAR
========================================================= */

.bloque-efemerides-espacial {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 30px;
    margin-bottom: 32px;
}

.tarjeta-efemeride {
    overflow: hidden;
    border: 1px solid #dfe8ed;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(30, 61, 82, .05);
}

.tarjeta-efemeride-cabecera {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #e5edf1;
}

.tarjeta-lunar .tarjeta-efemeride-cabecera {
    background: #f4f5fb;
}

.tarjeta-solar .tarjeta-efemeride-cabecera {
    background: #fff8e8;
}

.tarjeta-efemeride-cabecera h2 {
    margin: 0;
    color: #29495d;
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.tarjeta-efemeride-cabecera p {
    margin: 3px 0 0;
    color: #80909a;
    font-size: 11px;
}

.efemeride-icono {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
}

.efemeride-icono svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.efemeride-icono-luna {
    color: #66749e;
}

.efemeride-icono-sol {
    color: #c6902c;
}

.efemeride-destacada {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 18px 18px 14px;
}

.efemeride-fase,
.efemeride-valor-grande {
    display: flex;
    flex-direction: column;
}

.efemeride-fase strong {
    margin-top: 4px;
    color: #273f4f;
    font-size: 19px;
}

.efemeride-fase small {
    margin-top: 3px;
    color: #80909a;
    font-size: 11px;
}

.efemeride-valor-grande {
    align-items: flex-end;
}

.efemeride-valor-grande strong {
    color: #243f51;
    font-size: 23px;
    line-height: 1;
}

.efemeride-valor-grande span {
    margin-top: 4px;
    color: #8998a1;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.efemeride-etiqueta {
    display: block;
    color: #84939d;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .45px;
}

.efemeride-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid #edf1f4;
    border-bottom: 1px solid #edf1f4;
}

.efemeride-grid > div {
    padding: 12px 14px;
}

.efemeride-grid > div + div {
    border-left: 1px solid #edf1f4;
}

.efemeride-grid strong {
    display: block;
    margin-top: 4px;
    color: #314f61;
    font-size: 13px;
}

.efemeride-proximos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.efemeride-proximos p {
    margin: 0;
    padding: 12px 14px 14px;
}

.efemeride-proximos p + p {
    border-left: 1px solid #edf1f4;
}

.efemeride-proximos span,
.efemeride-estado .efemeride-etiqueta {
    color: #87959d;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.efemeride-proximos strong {
    display: block;
    margin-top: 5px;
    color: #465d6c;
    font-size: 12px;
    line-height: 1.35;
}

.efemeride-estado {
    padding: 12px 14px 14px;
}

.efemeride-estado strong {
    display: block;
    margin-top: 5px;
    color: #465d6c;
    font-size: 13px;
}

.efemeride-estado small {
    display: block;
    margin-top: 4px;
    color: #81909a;
    font-size: 11px;
}

@media (max-width: 900px) {
    .bloque-efemerides-espacial {
        grid-template-columns: 1fr;
    }

    .efemeride-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .efemeride-grid > div:nth-child(3) {
        border-left: 0;
        border-top: 1px solid #edf1f4;
    }

    .efemeride-grid > div:nth-child(4) {
        border-top: 1px solid #edf1f4;
    }
}

@media (max-width: 520px) {
    .efemeride-destacada {
        align-items: flex-start;
    }

    .efemeride-proximos {
        grid-template-columns: 1fr;
    }

    .efemeride-proximos p + p {
        border-left: 0;
        border-top: 1px solid #edf1f4;
    }
}


/* =========================================================
   ASTRONOMÍA DEL DÍA · CICLO SOLAR Y CREPÚSCULOS
========================================================= */

.astro-ciclo {
    border-bottom: 1px solid #e8eef2;
    background: #fff;
}

.astro-ciclo-titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 18px 12px;
}

.astro-ciclo-titulo strong {
    display: block;
    margin-top: 4px;
    color: #29495d;
    font-size: 15px;
}

.astro-ciclo-sol {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border: 1px solid #f0dba8;
    border-radius: 50%;
    background: #fff8e8;
    color: #c6902c;
    font-size: 21px;
    line-height: 1;
}

.astro-crepusculos-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid #edf1f4;
}

.astro-crepusculo-col {
    min-width: 0;
    padding: 15px 18px 14px;
}

.astro-crepusculo-manana {
    background:
        linear-gradient(
            90deg,
            rgba(255, 248, 232, .72) 0%,
            rgba(255, 255, 255, 0) 74%
        );
}

.astro-crepusculo-tarde {
    border-left: 1px solid #e8eef2;
    background:
        linear-gradient(
            270deg,
            rgba(242, 245, 251, .82) 0%,
            rgba(255, 255, 255, 0) 74%
        );
}

.astro-crepusculo-cabecera {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
}

.astro-crepusculo-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 29px;
    flex: 0 0 29px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(42, 73, 91, .08);
}

.astro-crepusculo-icono svg {
    display: block;
    width: 21px;
    height: 21px;
    overflow: visible;
}

.astro-crepusculo-icono-amanecer {
    border: 1px solid #f0dfb8;
    background: #fff9ec;
}

.astro-crepusculo-icono-atardecer {
    border: 1px solid #dddfe8;
    background: #f7f7fb;
}

.astro-sol-rayos {
    fill: none;
    stroke: #d59b31;
    stroke-width: 1.55;
    stroke-linecap: round;
}

.astro-sol-disco {
    fill: #f5bf48;
    stroke: #d59b31;
    stroke-width: 1.15;
}

.astro-horizonte {
    fill: none;
    stroke: #718797;
    stroke-width: 1.45;
    stroke-linecap: round;
}

.astro-atardecer-linea {
    fill: none;
    stroke: #9a7d8d;
    stroke-width: 1.15;
    stroke-linecap: round;
}

.astro-crepusculo-cabecera strong {
    display: block;
    margin-top: 2px;
    color: #435f70;
    font-size: 12px;
}

.astro-crepusculo-lista {
    margin: 0;
}

.astro-crepusculo-lista > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    min-height: 34px;
    padding: 7px 0;
    border-top: 1px solid rgba(224, 233, 238, .72);
}

.astro-crepusculo-lista > div:first-child {
    border-top: 0;
}

.astro-crepusculo-lista dt {
    color: #70828e;
    font-size: 11px;
    line-height: 1.25;
}

.astro-crepusculo-lista dd {
    margin: 0;
    color: #314f61;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    text-align: right;
}

.astro-crepusculo-lista dd small {
    display: block;
    margin-top: 1px;
    color: #98a4ab;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .25px;
}

.astro-crepusculo-lista .astro-evento-principal dt,
.astro-crepusculo-lista .astro-evento-principal dd {
    color: #29495d;
}

.astro-crepusculo-lista .astro-evento-principal {
    position: relative;
}

.astro-crepusculo-lista .astro-evento-principal::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 50%;
    width: 4px;
    height: 18px;
    border-radius: 4px;
    background: #d9a337;
    transform: translateY(-50%);
}

.astro-crepusculo-tarde
.astro-crepusculo-lista
.astro-evento-principal::before {
    background: #8a5fa8;
}

.astro-resumen-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid #edf1f4;
}

.astro-resumen-grid > div {
    min-width: 0;
    padding: 12px 14px 13px;
    text-align: center;
}

.astro-resumen-grid > div + div {
    border-left: 1px solid #edf1f4;
}

.astro-resumen-grid strong {
    display: block;
    margin-top: 4px;
    color: #314f61;
    font-size: 13px;
}

.astro-crepusculos-nota {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px 18px;
    padding: 8px 14px 10px;
    border-top: 1px solid #f1f4f6;
    background: #fafcfd;
    color: #95a1a9;
    font-size: 9px;
    line-height: 1.4;
}


@media (max-width: 720px) {
    .astro-crepusculos-grid {
        grid-template-columns: 1fr;
    }

    .astro-crepusculo-tarde {
        border-left: 0;
        border-top: 1px solid #e8eef2;
    }

    .astro-resumen-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .astro-resumen-grid > div:nth-child(3) {
        border-left: 0;
        border-top: 1px solid #edf1f4;
    }

    .astro-resumen-grid > div:nth-child(4) {
        border-top: 1px solid #edf1f4;
    }
}

@media (max-width: 430px) {
    .astro-ciclo-titulo {
        padding-left: 14px;
        padding-right: 14px;
    }

    .astro-crepusculo-col {
        padding-left: 14px;
        padding-right: 14px;
    }

    .astro-crepusculo-lista > div {
        gap: 10px;
    }

    .astro-resumen-grid {
        grid-template-columns: 1fr;
    }

    .astro-resumen-grid > div + div {
        border-left: 0;
        border-top: 1px solid #edf1f4;
    }

    .astro-resumen-grid > div:nth-child(3) {
        border-top: 1px solid #edf1f4;
    }
}

/* =========================================================
   EFEMÉRIDES ASTRONÓMICAS · ECLIPSES / ESTACIONES
========================================================= */

.tarjeta-astronomica {
    grid-column: 1 / -1;
}

.tarjeta-astronomica .tarjeta-efemeride-cabecera {
    background: #f3f7fa;
}

.efemeride-icono-astro {
    color: #56798f;
}

.efemerides-astro-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.efemeride-astro-bloque {
    padding: 18px;
}

.efemeride-astro-bloque + .efemeride-astro-bloque {
    border-left: 1px solid #e8eef2;
}

.efemeride-astro-bloque > strong {
    display: block;
    margin-top: 5px;
    color: #29495d;
    font-size: 16px;
}

/* Cabecera compacta de los próximos eclipses */
.efemeride-eclipse-cabecera {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 46px;
}

.efemeride-eclipse-titulo {
    min-width: 0;
}

.efemeride-eclipse-titulo strong {
    display: block;
    margin-top: 4px;
    color: #29495d;
    font-size: 16px;
    line-height: 1.25;
}

.efemeride-eclipse-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 50%;
    box-sizing: border-box;
}

.efemeride-eclipse-icono svg {
    display: block;
    width: 31px;
    height: 31px;
    overflow: visible;
}

.efemeride-eclipse-icono-solar {
    border: 1px solid #f0dfad;
    background: #fff8e8;
    box-shadow: 0 1px 4px rgba(126, 91, 20, .08);
}

.eclipse-solar-rayos {
    fill: none;
    stroke: #d49a2f;
    stroke-width: 1.7;
    stroke-linecap: round;
}

.eclipse-solar-sol {
    fill: #f5bb3c;
    stroke: #d79620;
    stroke-width: 1;
}

.eclipse-solar-luna {
    fill: #435562;
    stroke: #344550;
    stroke-width: .8;
}

.eclipse-solar-brillo {
    fill: none;
    stroke: #fff0ad;
    stroke-width: 1.7;
    stroke-linecap: round;
}

.efemeride-eclipse-icono-lunar {
    border: 1px solid #d9dfe5;
    background: #f7f8fa;
    box-shadow: 0 1px 4px rgba(69, 83, 114, .08);
}

.eclipse-lunar-luna {
    fill: #e3e1da;
    stroke: #a9b1b7;
    stroke-width: .9;
}

.eclipse-lunar-relieve {
    fill: #aeb4b6;
    opacity: .43;
}

.eclipse-lunar-penumbra {
    fill: #b86958;
    opacity: .28;
}

.eclipse-lunar-sombra {
    fill: #4d5968;
    opacity: .88;
}

.eclipse-lunar-borde {
    fill: none;
    stroke: #c9755e;
    stroke-width: 1.45;
    stroke-linecap: round;
    opacity: .98;
}

.eclipse-lunar-contorno {
    fill: none;
    stroke: #8f999f;
    stroke-width: .85;
}

.eclipse-lunar-crater {
    fill: #9ca4a6;
    stroke: #eceae3;
    stroke-width: .32;
    opacity: .9;
}

.efemeride-astro-bloque dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin: 14px 0 0;
    border: 1px solid #e6edf1;
    border-radius: 8px;
    overflow: hidden;
}

.efemeride-astro-bloque dl > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 11px;
    border-bottom: 1px solid #edf2f5;
}

.efemeride-astro-bloque dl > div:nth-child(odd) {
    border-right: 1px solid #edf2f5;
}

.efemeride-astro-bloque dl > div:nth-last-child(-n+2) {
    border-bottom: 0;
}

.efemeride-astro-bloque dt {
    color: #7e8e98;
    font-size: 11px;
}

.efemeride-astro-bloque dd {
    margin: 0;
    color: #344f60;
    font-size: 11px;
    font-weight: 700;
    text-align: right;
}

.efemerides-estacionales {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid #e7edf1;
}

.efemerides-estacionales > div {
    padding: 14px 16px 16px;
}

.efemerides-estacionales > div + div {
    border-left: 1px solid #e7edf1;
}

.efemerides-estacionales strong {
    display: block;
    margin-top: 5px;
    color: #465e6d;
    font-size: 12px;
    line-height: 1.4;
}

@media (max-width: 900px) {
    .efemerides-astro-grid,
    .efemerides-estacionales {
        grid-template-columns: 1fr;
    }

    .efemeride-astro-bloque + .efemeride-astro-bloque,
    .efemerides-estacionales > div + div {
        border-left: 0;
        border-top: 1px solid #e7edf1;
    }
}

@media (max-width: 620px) {
    .efemeride-eclipse-icono {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .efemeride-eclipse-icono svg {
        width: 28px;
        height: 28px;
    }

    .efemeride-eclipse-titulo strong {
        font-size: 15px;
    }

    .efemeride-astro-bloque dl {
        grid-template-columns: 1fr;
    }

    .efemeride-astro-bloque dl > div:nth-child(odd) {
        border-right: 0;
    }

    .efemeride-astro-bloque dl > div {
        border-bottom: 1px solid #edf2f5 !important;
    }

    .efemeride-astro-bloque dl > div:last-child {
        border-bottom: 0 !important;
    }
}


/* =========================================================
   ICONO DINÁMICO DE FASE LUNAR
========================================================= */

.fase-lunar-dinamica {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    font-size: 27px;
    line-height: 1;
    font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif;
    filter: saturate(.9);
}

.tarjeta-lunar .efemeride-fase {
    position: relative;
}


/* =========================================================
   CABECERAS LUNA / SOL · SOMBREADO MÁS ENFATIZADO
========================================================= */

.tarjeta-lunar .tarjeta-efemeride-cabecera {
    background: linear-gradient(180deg, #e7eaf7 0%, #f3f5fb 100%) !important;
    border-bottom-color: #d7dcee !important;
}

.tarjeta-solar .tarjeta-efemeride-cabecera {
    background: linear-gradient(180deg, #fff0c7 0%, #fff8e8 100%) !important;
    border-bottom-color: #f0dfad !important;
}

.tarjeta-lunar .tarjeta-efemeride-cabecera h2 {
    color: #4f5f8d !important;
}

.tarjeta-solar .tarjeta-efemeride-cabecera h2 {
    color: #9b6a16 !important;
}

.efemeride-icono-luna {
    color: #596b9d !important;
}

.efemeride-icono-sol {
    color: #c2871d !important;
}


/* =========================================================
   ICONO ACTIVIDAD SOLAR · LLAMARADA
========================================================= */

.efemeride-icono-sol .llamarada-solar {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   ICONO ACTIVIDAD SOLAR · LLAMARADA V2
========================================================= */

.efemeride-icono-sol .llamarada-solar-principal,
.efemeride-icono-sol .llamarada-solar-secundaria {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.efemeride-icono-sol .llamarada-solar-principal {
    stroke-width: 1.7;
}

.efemeride-icono-sol .llamarada-solar-secundaria {
    stroke-width: 1.25;
    opacity: .85;
}


/* =========================================================
   ICONO EFEMÉRIDES ASTRONÓMICAS · ÓRBITA CELESTE
========================================================= */

.efemeride-icono-astro .astro-cuerpo-orbital {
    fill: currentColor;
    stroke: none;
}


/* =========================================================
   ICONO EFEMÉRIDES ASTRONÓMICAS · ECLIPSE SOLAR
========================================================= */

.efemeride-icono-astro .eclipse-sol {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.55;
}

.efemeride-icono-astro .eclipse-rayos {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.35;
    stroke-linecap: round;
}

.efemeride-icono-astro .eclipse-luna {
    fill: #f3f7fa;
    stroke: currentColor;
    stroke-width: 1.45;
}


/* =========================================================
   TARJETAS · HOVER SIN DESPLAZAMIENTO
   Evita el pequeño "salto" al pasar el puntero.
========================================================= */

.tarjeta-tabla,
.tarjeta-tabla:hover,
.tarjeta-tabla:focus-within {
    transform: none !important;
    translate: none !important;
}

.tarjeta-tabla:hover {
    position: relative;
    top: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Conserva una respuesta visual muy sutil, sin mover la tarjeta */
.tarjeta-tabla {
    transition: box-shadow .16s ease, border-color .16s ease !important;
}

.tarjeta-tabla:hover {
    box-shadow: 0 4px 12px rgba(30, 61, 82, .08) !important;
}


/* =========================================================
   CABECERA EFEMÉRIDES ASTRONÓMICAS · MÁS ENFATIZADA
========================================================= */

.tarjeta-astronomica .tarjeta-efemeride-cabecera {
    background: linear-gradient(180deg, #e4edf3 0%, #f1f6f9 100%) !important;
    border-bottom-color: #cfdee7 !important;
}

.tarjeta-astronomica .tarjeta-efemeride-cabecera h2 {
    color: #45677d !important;
}

.efemeride-icono-astro {
    color: #4f748b !important;
}


/* =========================================================
   CABECERAS DE TABLAS · SOMBREADO MÁS VISIBLE
   Familias cromáticas reforzadas sin perder sobriedad.
========================================================= */

/* Temperatura / humedad: rojo suave */
.tarjeta-tabla.tabla-roja > header {
    background: linear-gradient(180deg, #f7dddd 0%, #fbeaea 100%) !important;
    border-bottom-color: #e9c5c5 !important;
}

.tarjeta-tabla.tabla-roja > header h2,
.tarjeta-tabla.tabla-roja > header .icono-tabla {
    color: #96545a !important;
}

/* Presión: gris azulado */
.tarjeta-tabla.tabla-presion > header,
.tarjeta-tabla.tabla-gris > header {
    background: linear-gradient(180deg, #e3e8ec 0%, #f0f3f5 100%) !important;
    border-bottom-color: #cfd8de !important;
}

.tarjeta-tabla.tabla-presion > header h2,
.tarjeta-tabla.tabla-presion > header .icono-tabla,
.tarjeta-tabla.tabla-gris > header h2,
.tarjeta-tabla.tabla-gris > header .icono-tabla {
    color: #586b78 !important;
}

/* Viento: rojo teja suave */
.tarjeta-tabla.tabla-viento > header {
    background: linear-gradient(180deg, #f3d8d5 0%, #fae9e6 100%) !important;
    border-bottom-color: #e4bfbb !important;
}

.tarjeta-tabla.tabla-viento > header h2,
.tarjeta-tabla.tabla-viento > header .icono-tabla {
    color: #945b55 !important;
}

/* Precipitaciones: azul */
.tarjeta-tabla.tabla-lluvia > header,
.tarjeta-tabla.tabla-precipitacion > header,
.tarjeta-tabla.tabla-azul > header {
    background: linear-gradient(180deg, #dbeaf6 0%, #edf5fb 100%) !important;
    border-bottom-color: #c3dced !important;
}

.tarjeta-tabla.tabla-lluvia > header h2,
.tarjeta-tabla.tabla-lluvia > header .icono-tabla,
.tarjeta-tabla.tabla-precipitacion > header h2,
.tarjeta-tabla.tabla-precipitacion > header .icono-tabla,
.tarjeta-tabla.tabla-azul > header h2,
.tarjeta-tabla.tabla-azul > header .icono-tabla {
    color: #4d7592 !important;
}

/* Radiación y UV: amarillo dorado */
.tarjeta-tabla.tabla-solar > header,
.tarjeta-tabla.tabla-amarilla > header {
    background: linear-gradient(180deg, #f8e9bf 0%, #fff5da 100%) !important;
    border-bottom-color: #ead79f !important;
}

.tarjeta-tabla.tabla-solar > header h2,
.tarjeta-tabla.tabla-solar > header .icono-tabla,
.tarjeta-tabla.tabla-amarilla > header h2,
.tarjeta-tabla.tabla-amarilla > header .icono-tabla {
    color: #987225 !important;
}

/* Calidad del aire: verde */
.tarjeta-tabla.tabla-aqi > header,
.tarjeta-tabla.tabla-verde > header {
    background: linear-gradient(180deg, #dcefe1 0%, #edf7f0 100%) !important;
    border-bottom-color: #c5dfcc !important;
}

.tarjeta-tabla.tabla-aqi > header h2,
.tarjeta-tabla.tabla-aqi > header .icono-tabla,
.tarjeta-tabla.tabla-verde > header h2,
.tarjeta-tabla.tabla-verde > header .icono-tabla {
    color: #52795d !important;
}


/* =========================================================
   VALORES PRINCIPALES DE TABLA
========================================================= */

.valor-principal-tabla {
    font-weight: 700;
    color: #263f4f;
}

/* Los índices/sensaciones térmicas se muestran como datos normales,
   sin color rojo ni tratamiento de alerta. */
.tabla-indices-termicos td,
.tabla-indices-termicos td:last-child,
.tabla-indices-termicos strong,
.tabla-indices-termicos .dato-rojo {
    color: inherit !important;
}

.tabla-indices-termicos td:last-child {
    font-weight: 600;
}


/* Corrección: la tarjeta Viento utiliza realmente .tabla-verdeagua */
.tarjeta-tabla.tabla-verdeagua > header {
    background: linear-gradient(180deg, #f3d8d5 0%, #fae9e6 100%) !important;
    border-bottom-color: #e4bfbb !important;
}

.tarjeta-tabla.tabla-verdeagua > header h2,
.tarjeta-tabla.tabla-verdeagua > header .icono-tabla {
    color: #945b55 !important;
}


/* =========================================================
   CABECERAS DE TABLAS · TEXTO E ICONOS OSCUROS
   Se mantienen los fondos de color, pero títulos e iconos
   vuelven al tono oscuro original.
========================================================= */

.tarjeta-tabla > header h2 {
    color: #2f4655 !important;
}

.tarjeta-tabla > header .icono-tabla,
.tarjeta-tabla > header .icono-tabla-svg {
    color: #2f4655 !important;
}


/* =========================================================
   CABECERAS DE TABLAS · SOLO TEXTO OSCURO
   Los títulos quedan oscuros; los iconos recuperan
   su color identificativo por familia.
========================================================= */

.tarjeta-tabla > header h2 {
    color: #2f3940 !important;
}

/* Iconos por familia */
.tarjeta-tabla.tabla-roja > header .icono-tabla,
.tarjeta-tabla.tabla-roja > header .icono-tabla-svg {
    color: #96545a !important;
}

.tarjeta-tabla.tabla-gris > header .icono-tabla,
.tarjeta-tabla.tabla-gris > header .icono-tabla-svg {
    color: #586b78 !important;
}

.tarjeta-tabla.tabla-verdeagua > header .icono-tabla,
.tarjeta-tabla.tabla-verdeagua > header .icono-tabla-svg {
    color: #945b55 !important;
}

.tarjeta-tabla.tabla-azul > header .icono-tabla,
.tarjeta-tabla.tabla-azul > header .icono-tabla-svg {
    color: #4d7592 !important;
}

.tarjeta-tabla.tabla-amarilla > header .icono-tabla,
.tarjeta-tabla.tabla-amarilla > header .icono-tabla-svg {
    color: #987225 !important;
}

.tarjeta-tabla.tabla-verde > header .icono-tabla,
.tarjeta-tabla.tabla-verde > header .icono-tabla-svg {
    color: #52795d !important;
}


/* =========================================================
   CORRECCIÓN FINAL · FUENTE OSCURA EN TODAS LAS CABECERAS
   + VIENTO ROJIZO-ROSA DIFERENCIADO DE TEMPERATURA
========================================================= */

/* Títulos: mismo tono oscuro para TODAS las familias */
.grid-tablas .tarjeta-tabla > header h2,
.grid-tablas .tarjeta-tabla.tabla-roja > header h2,
.grid-tablas .tarjeta-tabla.tabla-gris > header h2,
.grid-tablas .tarjeta-tabla.tabla-verdeagua > header h2,
.grid-tablas .tarjeta-tabla.tabla-azul > header h2,
.grid-tablas .tarjeta-tabla.tabla-amarilla > header h2,
.grid-tablas .tarjeta-tabla.tabla-verde > header h2 {
    color: #26343d !important;
}

/* Temperatura: rojo suave, más cálido */
.grid-tablas .tarjeta-tabla.tabla-roja > header {
    background: linear-gradient(180deg, #f4dada 0%, #fbeaea 100%) !important;
    border-bottom-color: #e7c1c1 !important;
}

/* Viento: rojizo-rosa independiente, más frío y algo más rosado */
.grid-tablas .tarjeta-tabla.tabla-verdeagua > header {
    background: linear-gradient(180deg, #efd2da 0%, #f8e5ea 100%) !important;
    border-bottom-color: #dfb7c2 !important;
}

/* Por si alguna regla de familia intenta colorear el título después */
.grid-tablas article[class*="tarjeta-tabla"] > header h2 {
    color: #26343d !important;
}


/* =========================================================
   ICONOS DE CABECERAS · LIGERAMENTE MÁS GRANDES
========================================================= */

.tarjeta-tabla > header .icono-tabla,
.tarjeta-tabla > header .icono-tabla-svg {
    width: 24px !important;
    height: 24px !important;
    flex: 0 0 24px !important;
}

.tarjeta-tabla > header .icono-tabla svg,
.tarjeta-tabla > header .icono-tabla-svg svg {
    width: 24px !important;
    height: 24px !important;
}


/* =========================================================
   GRÁFICO REAL · TEMPERATURA / SENSACIÓN / HUMEDAD
========================================================= */

.grafico-demo.grafico-real {
    height: 245px !important;
    min-height: 245px !important;
    background: #ffffff !important;
    overflow: visible !important;
}

.grafico-cargando,
.grafico-error {
    min-height: 245px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6d808b;
    font-size: 13px;
    text-align: center;
    padding: 20px;
}

.grafico-error {
    color: #8b5353;
}


/* =========================================================
   GRÁFICOS REALES · PORTADA
========================================================= */

.grafico-demo.grafico-real {
    height: 245px !important;
    min-height: 245px !important;
    background: #ffffff !important;
    overflow: visible !important;
}

.grafico-cargando,
.grafico-error {
    min-height: 245px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6d808b;
    font-size: 13px;
    text-align: center;
    padding: 20px;
}

.grafico-error {
    color: #8b5353;
}

.grafico-real .apexcharts-tooltip {
    font-size: 12px !important;
}


/* =========================================================
   SELECTORES DE SERIES · EL BOTÓN HACE DE LEYENDA
========================================================= */

/* Estado base: desactivado / gris */
.selector-series .boton-serie {
    background: #eef1f3 !important;
    border-color: #d3dade !important;
    color: #6f7b82 !important;
    box-shadow: none !important;
}

/* TEMPERATURA / HUMEDAD */
.selector-series .boton-serie[data-serie="temperatura"].activo {
    background: #f3dada !important;
    border-color: #c94b4b !important;
    color: #7f3030 !important;
}

.selector-series .boton-serie[data-serie="sensacion"].activo {
    background: #f6e5d5 !important;
    border-color: #d98a46 !important;
    color: #8a5527 !important;
}

.selector-series .boton-serie[data-serie="humedad"].activo {
    background: #dfeaf4 !important;
    border-color: #4f86b5 !important;
    color: #355f83 !important;
}

/* VIENTO */
.selector-series .boton-serie[data-serie="viento"].activo {
    background: #f0dfe1 !important;
    border-color: #b45e66 !important;
    color: #7e3f46 !important;
}

.selector-series .boton-serie[data-serie="racha"].activo {
    background: #f4e6e8 !important;
    border-color: #d38a90 !important;
    color: #8d5a60 !important;
}

.selector-series .boton-serie[data-serie="direccion"].activo {
    background: #e4ebef !important;
    border-color: #647f91 !important;
    color: #455d6d !important;
}

/* PRECIPITACIONES */
.selector-series .boton-serie[data-serie="lluvia"].activo {
    background: #dfeaf4 !important;
    border-color: #5b8fc0 !important;
    color: #3d688d !important;
}

/* Intensidad: misma familia cromática morada que la línea del gráfico (#76539a). */
.selector-series .boton-serie[data-serie="intensidad"].activo {
    background: #f6f1fa !important;
    border-color: #c2add4 !important;
    color: #694887 !important;
}

/* Presión: si en el futuro se añade selector */
.selector-series .boton-serie[data-serie="presion"].activo {
    background: #e5eaed !important;
    border-color: #667985 !important;
    color: #465762 !important;
}

/* Estado hover sin mover el botón */
.selector-series .boton-serie:hover {
    transform: none !important;
}

/* Desactivado: gris más apagado */
.selector-series .boton-serie:not(.activo) {
    background: #f0f2f3 !important;
    border-color: #d7dcdf !important;
    color: #8a959b !important;
    opacity: .88;
}


/* =========================================================
   TEMP / HUMEDAD · JERARQUÍA VISUAL Y BOTONES
========================================================= */

.selector-series .boton-serie[data-serie="humedad"].activo {
    background: #dcebe3 !important;
    border-color: #2f6f55 !important;
    color: #245440 !important;
}

.selector-series .boton-serie[data-serie="sensacion"].activo {
    background: #ecdadd !important;
    border-color: #8f3f45 !important;
    color: #6e3035 !important;
}

.selector-series .boton-serie[data-serie="temperatura"].activo {
    background: #f3d7d7 !important;
    border-color: #cf4545 !important;
    color: #8b2f2f !important;
}


/* =========================================================
   GRÁFICOS · GRID HORIZONTAL
========================================================= */

.grafico-real .apexcharts-gridline {
    stroke: #d9e2e7 !important;
}

/* Dirección del viento: azul marino */
.selector-series .boton-serie[data-serie="direccion"].activo {
    background: #e1e8ee !important;
    border-color: #243f5a !important;
    color: #243f5a !important;
}


/* =========================================================
   AJUSTE FINAL DE JERARQUÍA DE SERIES
========================================================= */

.selector-series .boton-serie[data-serie="temperatura"].activo {
    background: #f3d5d5 !important;
    border-color: #cf3f3f !important;
    color: #8a2929 !important;
}

.selector-series .boton-serie[data-serie="sensacion"].activo {
    background: #eee3e4 !important;
    border-color: #aa7f83 !important;
    color: #765b5e !important;
}

.selector-series .boton-serie[data-serie="viento"].activo {
    background: #f2d7d7 !important;
    border-color: #c93232 !important;
    color: #8d2424 !important;
}

.selector-series .boton-serie[data-serie="racha"].activo {
    background: #f4e1e9 !important;
    border-color: #d82370 !important;
    color: #9b2858 !important;
}

.selector-series .boton-serie[data-serie="direccion"].activo {
    background: #e9edf1 !important;
    border-color: #7b8d9c !important;
    color: #4c5f6e !important;
}


/* =========================================================
   ACTIVIDAD SÍSMICA
========================================================= */

.tarjeta-sismologia {
    grid-column: 1 / -1;
    overflow: hidden;
}

.tarjeta-sismologia .sismologia-cabecera {
    background: linear-gradient(180deg, #f6dfc4 0%, #fff0dd 100%) !important;
    border-bottom-color: #e8c59e !important;
}

.tarjeta-sismologia .sismologia-cabecera h2 {
    color: #26343d !important;
}

.tarjeta-sismologia .sismologia-cabecera p {
    color: #65717a;
}

.sismologia-icono {
    color: #b86a28;
}

.sismologia-icono svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.sismologia-resumen {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(420px, 1fr);
    gap: 20px;
    padding: 20px 22px;
    border-bottom: 1px solid #e5eaed;
}

.sismologia-estado {
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
}

.sismologia-estado strong {
    color: #314753;
    font-size: 15px;
    line-height: 1.35;
}

.sismologia-indicadores {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid #e2e7ea;
    border-radius: 7px;
    overflow: hidden;
    background: #fafbfc;
}

.sismologia-indicadores > div {
    min-width: 0;
    padding: 10px 12px;
    text-align: center;
    border-left: 1px solid #e2e7ea;
}

.sismologia-indicadores > div:first-child {
    border-left: 0;
}

.sismologia-indicador-valor {
    display: block;
    color: #b86626;
    font-size: 19px;
    line-height: 1.1;
    font-weight: 800;
}

.sismologia-indicador-texto {
    display: block;
    margin-top: 4px;
    color: #74828b;
    font-size: 10px;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .25px;
}


.sismologia-tabla-bloque {
    padding: 18px 22px 20px;
}

.sismologia-subcabecera {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 10px;
}

.sismologia-subcabecera > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sismologia-subcabecera strong {
    color: #314753;
    font-size: 14px;
}

.sismologia-total {
    color: #7b8992;
    font-size: 11px;
    white-space: nowrap;
}

.sismologia-tabla-wrap {
    overflow-x: auto;
}

.sismologia-tabla {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    font-size: 12px;
}

.sismologia-tabla th {
    padding: 8px 10px;
    border-bottom: 1px solid #d9e0e4;
    background: #f5f7f8;
    color: #596b75;
    font-size: 10px;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .25px;
    white-space: nowrap;
}

.sismologia-tabla td {
    padding: 10px;
    border-bottom: 1px solid #edf0f2;
    color: #455762;
    vertical-align: middle;
}

.sismologia-tabla tbody tr:last-child td {
    border-bottom: 0;
}

.sismologia-tabla tbody tr:hover td {
    background: #fffaf4;
}

.sismologia-magnitud {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    padding: 3px 6px;
    border: 1px solid #e3b786;
    border-radius: 5px;
    background: #fff1df;
    color: #98571f;
    font-weight: 800;
    text-decoration: none;
}

a.sismologia-magnitud:hover {
    background: #f8e2c7;
    color: #7d4416;
}

.sismologia-hora {
    display: inline-block;
    margin-left: 5px;
    color: #7a8890;
}

.sismologia-sin-datos {
    padding: 18px !important;
    text-align: center;
    color: #7b8992 !important;
}


.sismologia-destacados {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid #e5eaed;
    border-bottom: 1px solid #e5eaed;
}

.sismologia-destacado {
    min-width: 0;
    padding: 15px 22px;
    border-right: 1px solid #e5eaed;
    border-bottom: 1px solid #e5eaed;
}

.sismologia-destacado:nth-child(2n) {
    border-right: 0;
}

.sismologia-destacado:nth-last-child(-n+2) {
    border-bottom: 0;
}

.sismologia-destacado strong {
    display: block;
    margin-top: 5px;
    color: #384c57;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 600;
}

.sismologia-fuente {
    padding: 10px 22px 12px;
    color: #839099;
    font-size: 10px;
    line-height: 1.35;
}

.sismologia-fuente strong {
    color: #697983;
    font-weight: 600;
}

.sismologia-fuente span {
    margin: 0 5px;
}


/* Responsive propio del bloque sísmico */
@media (max-width: 900px) {
    .sismologia-resumen {
        grid-template-columns: 1fr;
    }

    .sismologia-destacados {
        grid-template-columns: 1fr;
    }

    .sismologia-destacado,
    .sismologia-destacado:nth-child(2n),
    .sismologia-destacado:nth-last-child(-n+2) {
        border-right: 0;
        border-bottom: 1px solid #e5eaed;
    }

    .sismologia-destacado:last-child {
        border-bottom: 0;
    }
}

@media (max-width: 600px) {
    .sismologia-resumen,
    .sismologia-tabla-bloque {
        padding-left: 14px;
        padding-right: 14px;
    }

    .sismologia-indicadores {
        grid-template-columns: 1fr;
    }

    .sismologia-indicadores > div {
        border-left: 0;
        border-top: 1px solid #e2e7ea;
    }

    .sismologia-indicadores > div:first-child {
        border-top: 0;
    }

    .sismologia-subcabecera {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .sismologia-destacado {
        padding-left: 14px;
        padding-right: 14px;
    }

    .sismologia-fuente {
        padding-left: 14px;
        padding-right: 14px;
    }
}


/* =========================================================
   SISMOLOGÍA · RESÚMENES CONCISOS Y PROVINCIA
========================================================= */

.sismologia-destacados-tres {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sismologia-destacados-tres .sismologia-destacado {
    border-bottom: 0 !important;
}

.sismologia-destacados-tres .sismologia-destacado:nth-child(1),
.sismologia-destacados-tres .sismologia-destacado:nth-child(2) {
    border-right: 1px solid #e5eaed !important;
}

.sismologia-destacados-tres .sismologia-destacado:nth-child(3) {
    border-right: 0 !important;
}

.sismologia-distancia-resumen {
    font-weight: 600;
    color: #667983;
}

.sismologia-fecha-destacado {
    display: block;
    margin-top: 5px;
    color: #87949c;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 400;
}

@media (max-width: 1000px) {
    .sismologia-destacados-tres {
        grid-template-columns: 1fr;
    }

    .sismologia-destacados-tres .sismologia-destacado,
    .sismologia-destacados-tres .sismologia-destacado:nth-child(1),
    .sismologia-destacados-tres .sismologia-destacado:nth-child(2),
    .sismologia-destacados-tres .sismologia-destacado:nth-child(3) {
        border-right: 0 !important;
        border-bottom: 1px solid #e5eaed !important;
    }

    .sismologia-destacados-tres .sismologia-destacado:last-child {
        border-bottom: 0 !important;
    }
}


/* =========================================================
   PANEL PRINCIPAL · SOLO ICONO + VALOR DE HUMEDAD
========================================================= */

/* No se desplaza el bloque completo */
.eje-temp-humedad-reordenado .humedad-bloque-reordenado {
    left: auto !important;
    transform: none !important;
}

/* Desplazamiento sutil únicamente del conjunto gota + porcentaje */
.humedad-bloque-reordenado .valor-humedad,
.humedad-bloque-reordenado .humedad-valor,
.humedad-bloque-reordenado .valor-principal-humedad {
    position: relative;
    left: 14px;
}


/* =========================================================
   PANEL PRINCIPAL · HUMEDAD MÁS DESTACADA + MINI ESCALA
========================================================= */

/* Solo el valor principal de humedad, no el título ni la variación */
.humedad-bloque-reordenado .valor-humedad,
.humedad-bloque-reordenado .humedad-valor,
.humedad-bloque-reordenado .valor-principal-humedad {
    font-size: 34px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
}

/* Si el tamaño vive en un strong interno */
.humedad-bloque-reordenado .valor-humedad strong,
.humedad-bloque-reordenado .humedad-valor strong,
.humedad-bloque-reordenado .valor-principal-humedad strong {
    font-size: 34px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
}

.mini-escala-humedad {
    width: 150px;
    margin: 7px 0 5px 14px;
}

.mini-escala-humedad-barra {
    position: relative;
    height: 6px;
    border-radius: 999px;
    background:
        linear-gradient(
            90deg,
            #d9ecf8 0%,
            #8ec7e8 35%,
            #4f9fd0 55%,
            #2f78b1 75%,
            #245c8b 100%
        );
    box-shadow: inset 0 0 0 1px rgba(46, 91, 122, .12);
}

.mini-escala-humedad-marcador {
    position: absolute;
    top: 50%;
    width: 2px;
    height: 14px;
    border-radius: 2px;
    background: #183f5a;
    transform: translate(-1px, -50%);
    box-shadow: 0 0 0 1px rgba(255,255,255,.65);
}

.mini-escala-humedad-etiquetas {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    color: #7a8b95;
    font-size: 7px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .3px;
}


/* =========================================================
   HUMEDAD · VARIACIÓN 1 H + 24 H Y ESCALA MÁS CENTRADA
========================================================= */

.mini-escala-humedad {
    width: 146px !important;
    margin-left: 2px !important;
    margin-top: 7px !important;
    margin-bottom: 5px !important;
}

.mini-escala-humedad-etiquetas {
    padding: 0 1px;
}

/* Mantiene el valor principal ligeramente centrado sin arrastrar la escala */
.humedad-bloque-reordenado .humedad-valor-linea {
    position: relative;
    left: 10px;
}


/* =========================================================
   PANEL PRINCIPAL · MÁS SEPARACIÓN TEMPERATURA / HUMEDAD
========================================================= */

.eje-temp-humedad-reordenado .humedad-bloque-reordenado {
    margin-top: 14px !important;
}


/* =========================================================
   AVISOS METEOROLÓGICOS · AVISOS DE HOY A LA DERECHA
========================================================= */

.panel-avisos {
    display: grid !important;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.35fr);
    align-items: center;
    column-gap: 24px;
}

.avisos-bloque-izquierdo {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.avisos-hoy-derecha {
    min-width: 0;
    padding-left: 20px;
    border-left: 1px solid #dfe6e9;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.aviso-hoy-item {
    position: relative;
    padding: 5px 8px 5px 11px;
    border-radius: 4px;
    background: rgba(255,255,255,.5);
}

.aviso-hoy-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    bottom: 5px;
    width: 3px;
    border-radius: 3px;
    background: #d8b62a;
}

.aviso-hoy-amarillo::before {
    background: #e2bb24;
}

.aviso-hoy-naranja::before {
    background: #e78327;
}

.aviso-hoy-rojo::before {
    background: #c94141;
}

.aviso-hoy-titulo {
    color: #334852;
    font-size: 11px;
    line-height: 1.35;
    font-weight: 700;
}

.aviso-hoy-titulo span {
    color: #5b6d76;
    font-weight: 600;
}

.aviso-hoy-rango {
    margin-top: 2px;
    color: #77868e;
    font-size: 9.5px;
    line-height: 1.3;
}

.aviso-hoy-rango span {
    margin: 0 4px;
}

@media (max-width: 900px) {
    .panel-avisos {
        grid-template-columns: 1fr !important;
        row-gap: 12px;
    }

    .avisos-hoy-derecha {
        padding-left: 0;
        padding-top: 10px;
        border-left: 0;
        border-top: 1px solid #dfe6e9;
    }
}


/* =========================================================
   ESTADO SUPERIOR · NIVEL MÁXIMO DE AVISOS DE HOY
========================================================= */

.estado-avisos-rapido .punto-aviso-nivel {
    /* El marcador comparte el ancho flex (9px): evitar óvalos verticales. */
    width: 9px;
    height: 9px;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(255,255,255,.72);
}

.estado-avisos-rapido.estado-avisos-verde .punto-aviso-nivel {
    background: #43b36a;
}

.estado-avisos-rapido.estado-avisos-amarillo .punto-aviso-nivel {
    background: #e3bd27;
}

.estado-avisos-rapido.estado-avisos-naranja .punto-aviso-nivel {
    background: #e78427;
}

.estado-avisos-rapido.estado-avisos-rojo .punto-aviso-nivel {
    background: #c94141;
}


/* =========================================================
   ESTADO SUPERIOR · MISMO TAMAÑO DE FUENTE
========================================================= */

.estado-superior .actualizacion-datos,
.estado-superior .estado-avisos-rapido {
    font-size: 11px !important;
    line-height: 1.35 !important;
}


/* =========================================================
   ESTADO SUPERIOR · AVISOS DE HOY + AVISOS VIGENTES AHORA
========================================================= */

.estado-superior {
    row-gap: 4px;
}

.estado-superior .actualizacion-datos,
.estado-superior .estado-avisos-rapido {
    font-size: 11px !important;
    line-height: 1.35 !important;
}

.estado-superior .estado-avisos-rapido {
    display: flex;
    align-items: center;
    gap: 6px;
}


/* =========================================================
   ESTADO SUPERIOR · FUENTE LIGERAMENTE MÁS GRANDE
========================================================= */

.estado-superior .actualizacion-datos,
.estado-superior .estado-avisos-rapido {
    font-size: 12px !important;
    line-height: 1.4 !important;
}


/* =========================================================
   AVISOS DETALLADOS · TRIÁNGULO POR NIVEL
   SOLO EN EL BLOQUE INFERIOR
========================================================= */

.aviso-hoy-titulo {
    display: flex;
    align-items: flex-start;
    gap: 7px;
}

.aviso-hoy-triangulo {
    display: inline-flex;
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin-top: 1px;
    align-items: center;
    justify-content: center;
}

.aviso-hoy-triangulo svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.aviso-hoy-triangulo .triangulo-fondo {
    fill: currentColor;
    stroke: currentColor;
    stroke-width: .7;
    stroke-linejoin: round;
}

.aviso-hoy-triangulo .triangulo-signo-linea {
    fill: none;
    stroke: #ffffff;
    stroke-width: 2;
    stroke-linecap: round;
}

.aviso-hoy-triangulo .triangulo-signo-punto {
    fill: #ffffff;
    stroke: none;
}

.aviso-hoy-texto {
    min-width: 0;
}

.aviso-hoy-amarillo .aviso-hoy-triangulo {
    color: #d7ad18;
}

.aviso-hoy-naranja .aviso-hoy-triangulo {
    color: #df7a20;
}

.aviso-hoy-rojo .aviso-hoy-triangulo {
    color: #c83f3f;
}


/* =========================================================
   AVISOS DETALLADOS · TRIÁNGULO A LA ALTURA DEL PÁRRAFO
========================================================= */

.aviso-hoy-titulo {
    display: grid !important;
    grid-template-columns: 25px minmax(0, 1fr);
    align-items: stretch !important;
    gap: 8px !important;
}

.aviso-hoy-triangulo {
    width: 25px !important;
    height: 100% !important;
    min-height: 30px;
    margin-top: 0 !important;
    align-self: stretch;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.aviso-hoy-triangulo svg {
    width: 24px !important;
    height: 100% !important;
    min-height: 30px;
    max-height: 46px;
}

.aviso-hoy-texto {
    display: block;
    align-self: center;
}


/* =========================================================
   AVISOS EN SEVILLA CAPITAL · VIGENTES / PREVISTOS
========================================================= */

.panel-avisos-sevilla {
    display: block !important;
    padding: 0 !important;
}

.avisos-sevilla-encabezado {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px 7px;
    border-bottom: 1px solid #dfe7ea;
    background: rgba(247, 250, 251, .82);
    color: #344953;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .65px;
}

.avisos-sevilla-icono {
    display: inline-flex;
    width: 15px;
    height: 15px;
    color: #6e8793;
}

.avisos-sevilla-icono svg {
    width: 100%;
    height: 100%;
}

.avisos-sevilla-icono svg > path:first-child {
    fill: currentColor;
}

.avisos-sevilla-icono .avisos-sevilla-signo {
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
}

.avisos-sevilla-icono circle.avisos-sevilla-signo {
    fill: #fff;
    stroke: none;
}

.avisos-sevilla-columnas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 58px;
}

.avisos-sevilla-columna {
    padding: 8px 18px 9px;
    min-width: 0;
}

.avisos-sevilla-previstos {
    border-left: 1px solid #dfe7ea;
}

.avisos-sevilla-subtitulo {
    margin-bottom: 5px;
    color: #687b85;
    font-size: 9px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .65px;
}

.avisos-sevilla-lista {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.avisos-sevilla-sin-vigentes,
.avisos-sevilla-sin-previstos {
    min-height: 32px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #667982;
    font-size: 10.5px;
    line-height: 1.35;
}

.punto-aviso-verde {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
    background: #43b36a;
    box-shadow: 0 0 0 3px rgba(67,179,106,.10);
}

/* En esta disposición los avisos ya no necesitan la banda vertical anterior */
.avisos-sevilla-columnas .aviso-hoy-item::before {
    display: none !important;
}

.avisos-sevilla-columnas .aviso-hoy-item {
    padding: 4px 6px 4px 0 !important;
    background: transparent !important;
}

.avisos-sevilla-columnas .aviso-hoy-titulo {
    grid-template-columns: 26px minmax(0, 1fr) !important;
}

.avisos-sevilla-columnas .aviso-hoy-rango {
    margin-left: 34px;
}

@media (max-width: 900px) {
    .avisos-sevilla-columnas {
        grid-template-columns: 1fr;
    }

    .avisos-sevilla-previstos {
        border-left: 0;
        border-top: 1px solid #dfe7ea;
    }
}


/* =========================================================
   AVISOS EN SEVILLA CAPITAL · TIPOGRAFÍA MÁS GRANDE
========================================================= */

.avisos-sevilla-encabezado {
    font-size: 14px !important;
    line-height: 1.25 !important;
}

.avisos-sevilla-subtitulo {
    font-size: 11px !important;
    line-height: 1.2 !important;
}

.avisos-sevilla-columnas .aviso-hoy-titulo {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
}

.avisos-sevilla-columnas .aviso-hoy-rango {
    font-size: 11px !important;
    line-height: 1.35 !important;
}

.avisos-sevilla-sin-vigentes,
.avisos-sevilla-sin-previstos {
    font-size: 12px !important;
    line-height: 1.4 !important;
}


/* =========================================================
   AVISOS · TRIÁNGULO CENTRADO SOBRE TEXTO + FECHA/HORA
========================================================= */

.avisos-sevilla-columnas .aviso-hoy-item {
    position: relative !important;
    min-height: 44px;
    padding-left: 40px !important;
}

/* El título deja de reservar su propia columna para el icono */
.avisos-sevilla-columnas .aviso-hoy-titulo {
    display: block !important;
    padding-left: 0 !important;
}

/* Triángulo grande, centrado respecto a TODO el aviso */
.avisos-sevilla-columnas .aviso-hoy-triangulo {
    position: absolute !important;
    left: 3px;
    top: 50%;
    width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    margin: 0 !important;
    transform: translateY(-50%);
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.avisos-sevilla-columnas .aviso-hoy-triangulo svg {
    width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: none !important;
}

/* Fecha y hora quedan alineadas con el texto principal */
.avisos-sevilla-columnas .aviso-hoy-rango {
    margin-left: 0 !important;
    margin-top: 4px !important;
}


/* =========================================================
   AVISOS · ESTADO OK CUANDO NO HAY AVISOS VIGENTES
========================================================= */

.icono-ok-avisos {
    display: inline-flex;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    color: #35a968;
}

.icono-ok-avisos svg {
    display: block;
    width: 28px;
    height: 28px;
}

.icono-ok-avisos circle {
    fill: rgba(53, 169, 104, .08);
    stroke: currentColor;
    stroke-width: 2;
}

.icono-ok-avisos path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.avisos-sevilla-sin-vigentes {
    gap: 10px !important;
}


/* =========================================================
   AVISOS · FRASE CONTINUA SIN ESPACIO ANTES DE :
========================================================= */

.avisos-sevilla-columnas .aviso-hoy-texto {
    word-spacing: normal !important;
    letter-spacing: normal !important;
}


/* =========================================================
   AVISOS · ICONO ESPECÍFICO "SIN AVISOS VIGENTES"
========================================================= */

.icono-sin-avisos {
    display: inline-flex;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    color: #35a968;
}

.icono-sin-avisos svg {
    display: block;
    width: 30px;
    height: 30px;
}

.icono-sin-avisos .sin-avisos-triangulo {
    fill: rgba(53,169,104,.06);
    stroke: currentColor;
    stroke-width: 2;
    stroke-linejoin: round;
}

.icono-sin-avisos .sin-avisos-check {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   AVISOS · ICONO "SIN AVISOS VIGENTES" MÁS GRANDE
========================================================= */

.icono-sin-avisos {
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
}

.icono-sin-avisos svg {
    width: 38px !important;
    height: 38px !important;
}

.avisos-sevilla-sin-vigentes {
    gap: 12px !important;
    min-height: 42px;
}


/* =========================================================
   PANEL PRINCIPAL · EVOLUCIÓN ATMOSFÉRICA
========================================================= */

.indicador-tendencia .indicador-etiqueta {
    line-height: 1.15;
}

.indicador-tendencia strong {
    cursor: help;
}


/* =========================================================
   PANEL PRINCIPAL · ESTADO DEL VIENTO
========================================================= */

.indicador-viento strong {
    color: #405d6c;
}


/* =========================================================
   PANEL PRINCIPAL · MÁS SEPARACIÓN TEMPERATURA / HUMEDAD
========================================================= */

.eje-temp-humedad-reordenado .humedad-bloque-reordenado {
    margin-top: 22px !important;
}


/* =========================================================
   PANEL PRINCIPAL · HUMEDAD MÁS DESTACADA + TENDENCIA
========================================================= */

.humedad-bloque-reordenado .humedad-valor-linea {
    display: flex;
    align-items: center;
    gap: 7px;
}

.humedad-bloque-reordenado .humedad-valor-linea > strong {
    font-size: 38px !important;
    line-height: .98 !important;
    font-weight: 800 !important;
    letter-spacing: -1px;
}

/* La gota crece ligeramente para acompañar al nuevo tamaño */
.humedad-bloque-reordenado .icono-humedad {
    width: 20px !important;
    height: 20px !important;
}

/* Tendencia de humedad más visible */
.humedad-bloque-reordenado .tendencia-humedad {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 25px !important;
    height: 25px !important;
    margin-left: 2px;
    border-radius: 50%;
    font-size: 18px !important;
    line-height: 1 !important;
    font-weight: 700;
}

/* Subida */
.humedad-bloque-reordenado .tendencia-humedad.tendencia-sube,
.humedad-bloque-reordenado .tendencia-humedad.tendencia-subiendo {
    color: #2f8fbf !important;
    background: rgba(47, 143, 191, .10);
}

/* Bajada */
.humedad-bloque-reordenado .tendencia-humedad.tendencia-baja,
.humedad-bloque-reordenado .tendencia-humedad.tendencia-bajando {
    color: #3477a8 !important;
    background: rgba(52, 119, 168, .10);
}

/* Estable */
.humedad-bloque-reordenado .tendencia-humedad.tendencia-estable {
    color: #8296a2 !important;
    background: rgba(130, 150, 162, .10);
}


/* =========================================================
   PANEL PRINCIPAL · TERMÓMETRO JUNTO A LA TEMPERATURA
========================================================= */

.temperatura-linea-reordenada {
    display: flex;
    align-items: center;
}

.icono-termometro-principal {
    display: inline-flex;
    flex: 0 0 26px;
    width: 26px;
    height: 50px;
    margin-right: 7px;
    align-items: center;
    justify-content: center;
    color: #c95e4f;
}

.icono-termometro-principal svg {
    display: block;
    width: 26px;
    height: 50px;
}

.icono-termometro-principal rect,
.icono-termometro-principal circle {
    fill: rgba(201, 94, 79, .06);
    stroke: currentColor;
    stroke-width: 2;
}

.icono-termometro-principal line {
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
}


/* =========================================================
   PANEL PRINCIPAL · ARMONÍA TEMPERATURA / HUMEDAD
========================================================= */

/* Temperatura: icono casi a la altura del dato principal */
.temperatura-linea-reordenada {
    display: flex;
    align-items: center;
}

.icono-termometro-principal {
    display: inline-flex !important;
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 74px !important;
    margin-right: 8px !important;
    align-items: center;
    justify-content: center;
    color: #c85f50;
}

.icono-termometro-principal svg {
    display: block;
    width: 42px !important;
    height: 74px !important;
    overflow: visible;
}

.icono-termometro-principal .termometro-contorno {
    fill: rgba(200, 95, 80, .035);
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linejoin: round;
}

.icono-termometro-principal .termometro-mercurio {
    fill: currentColor;
    stroke: none;
    opacity: .88;
}

.icono-termometro-principal .termometro-brillo {
    fill: rgba(255,255,255,.42);
    stroke: none;
}

/* Humedad: mismo lenguaje visual, sin competir con temperatura */
.humedad-bloque-reordenado .humedad-valor-linea-armonica {
    display: flex;
    align-items: center;
    gap: 8px;
}

.humedad-bloque-reordenado .humedad-valor-linea-armonica > strong {
    font-size: 44px !important;
    line-height: .98 !important;
    font-weight: 800 !important;
    letter-spacing: -1.2px;
}

.humedad-bloque-reordenado .icono-humedad {
    width: 31px !important;
    height: 31px !important;
    flex: 0 0 31px;
    margin-right: 1px;
}

/* La gota gana cuerpo pero mantiene el azul del bloque */
.humedad-bloque-reordenado .icono-humedad path {
    fill: #3296c8 !important;
    stroke: none !important;
}

/* Flecha de humedad proporcionada al nuevo tamaño */
.humedad-bloque-reordenado .tendencia-humedad {
    width: 29px !important;
    height: 29px !important;
    flex: 0 0 29px;
    margin-left: 1px !important;
    border-radius: 50%;
    font-size: 20px !important;
    line-height: 1 !important;
}

/* Mantener la escala visual algo más ancha para acompañar al conjunto */
.mini-escala-humedad {
    width: 154px !important;
    margin-left: 0 !important;
}


/* Ajustes solicitados del panel principal */
.temperatura-linea-reordenada .temperatura-valor {
    font-size: 64px !important;
    line-height: .96 !important;
}


/* =========================================================
   PANEL PRINCIPAL · TERMÓMETRO MÁS GRANDE Y PROPORCIONADO
========================================================= */

.icono-termometro-principal {
    flex: 0 0 50px !important;
    width: 50px !important;
    height: 72px !important;
    margin-right: 10px !important;
}

.icono-termometro-principal svg {
    width: 50px !important;
    height: 72px !important;
}

.temperatura-linea-reordenada {
    align-items: center !important;
}


/* =========================================================
   PANEL PRINCIPAL · HUMEDAD EN CONSONANCIA CON TEMPERATURA
========================================================= */

/* Línea principal: icono + valor + tendencia */
.humedad-bloque-reordenado .humedad-valor-linea,
.humedad-bloque-reordenado .humedad-valor-linea-armonica {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Gota grande, con una presencia equivalente al termómetro */
.humedad-bloque-reordenado .icono-humedad {
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 62px !important;
    margin-right: 2px !important;
}

.humedad-bloque-reordenado .icono-humedad path {
    fill: #3296c8 !important;
    stroke: none !important;
}

/* Valor de humedad próximo al peso visual de la temperatura */
.humedad-bloque-reordenado .humedad-valor-linea > strong,
.humedad-bloque-reordenado .humedad-valor-linea-armonica > strong {
    font-size: 58px !important;
    line-height: .96 !important;
    font-weight: 800 !important;
    letter-spacing: -1.4px !important;
    color: #315e70;
}

/* Flecha al mismo nivel del dato principal */
.humedad-bloque-reordenado .tendencia-humedad {
    flex: 0 0 31px !important;
    width: 31px !important;
    height: 31px !important;
    margin-left: 2px !important;
    border-radius: 50%;
    font-size: 21px !important;
    line-height: 1 !important;
}

/* Escala alineada con el comienzo del valor, no con el borde del bloque */
.humedad-bloque-reordenado .mini-escala-humedad {
    width: 158px !important;
    margin-left: 56px !important;
    margin-top: 5px !important;
}

/* Variaciones alineadas con el valor principal */
.humedad-bloque-reordenado .microcontexto-hum {
    margin-left: 56px !important;
}


/* =========================================================
   MICROVARIACIONES · FORMATO 1 HORA | VAR. 24 HORAS
========================================================= */

.microcontexto-temp .separador-tendencia,
.microcontexto-hum .separador-tendencia {
    margin: 0 5px !important;
    opacity: .55;
}

.microcontexto-temp .etiqueta-variacion,
.microcontexto-hum .etiqueta-variacion {
    font-weight: 600;
    color: #7b8b94;
    margin-right: 2px;
}


/* =========================================================
   PANEL PRINCIPAL · HUMEDAD EN ARMONÍA CON TEMPERATURA
========================================================= */

/* Línea principal de humedad alineada con la temperatura */
.humedad-bloque-reordenado .humedad-valor-linea,
.humedad-bloque-reordenado .humedad-valor-linea-armonica {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Gota más arriba y alineada visualmente con el termómetro */
.humedad-bloque-reordenado .icono-humedad {
    flex: 0 0 50px !important;
    width: 50px !important;
    height: 64px !important;
    margin: 0 8px 0 0 !important;
    transform: translateY(-2px);
}

.humedad-bloque-reordenado .icono-humedad path {
    fill: #3296c8 !important;
    stroke: none !important;
}

/* Mismo lenguaje tipográfico que la temperatura */
.humedad-bloque-reordenado .humedad-valor-linea > strong,
.humedad-bloque-reordenado .humedad-valor-linea-armonica > strong {
    font-family: inherit !important;
    font-size: 64px !important;
    line-height: .96 !important;
    font-weight: 800 !important;
    letter-spacing: -1.6px !important;
    color: #1f2d34 !important;
}

/* Flecha de humedad en consonancia con la de temperatura */
.humedad-bloque-reordenado .tendencia-humedad {
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
    margin-left: 2px !important;
    border-radius: 50%;
    font-size: 21px !important;
    line-height: 1 !important;
}

/* =========================================================
   MINI ESCALA DE HUMEDAD · MÁS A LA IZQUIERDA
========================================================= */

.humedad-bloque-reordenado .mini-escala-humedad {
    width: 170px !important;
    margin-left: 18px !important;
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}

.humedad-bloque-reordenado .mini-escala-humedad-barra {
    height: 7px !important;
    border-radius: 999px;
    background:
        linear-gradient(
            90deg,
            #d98b32 0%,
            #e5b34f 22%,
            #c9d46a 40%,
            #83b96d 58%,
            #3f8f63 78%,
            #236048 100%
        ) !important;
    box-shadow: inset 0 0 0 1px rgba(52, 82, 66, .14);
}

/* Marcador más visible */
.humedad-bloque-reordenado .mini-escala-humedad-marcador {
    width: 2px !important;
    height: 16px !important;
    background: #263f35 !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.8);
}

/* Etiquetas más equilibradas */
.humedad-bloque-reordenado .mini-escala-humedad-etiquetas {
    margin-top: 5px !important;
    font-size: 7px !important;
    color: #78888a !important;
    letter-spacing: .25px;
}

/* Variaciones alineadas bajo la nueva escala */
.humedad-bloque-reordenado .microcontexto-hum {
    margin-left: 18px !important;
}


/* =========================================================
   HUMEDAD · CORRECCIÓN DE COMPOSICIÓN
   GOTA + VALOR + % EN UNA SOLA LÍNEA
========================================================= */

.humedad-bloque-reordenado {
    width: 100%;
}

/* Línea principal compacta y sin saltos */
.humedad-bloque-reordenado .humedad-valor-linea,
.humedad-bloque-reordenado .humedad-valor-linea-armonica {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 7px !important;
    width: 100% !important;
    white-space: nowrap !important;
    overflow: visible !important;
}

/* Gota proporcionada al termómetro, sin empujar el valor */
.humedad-bloque-reordenado .icono-humedad {
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 56px !important;
    margin: 0 5px 0 0 !important;
    transform: translateY(-1px) !important;
}

/* Valor completo 56 % siempre en una línea */
.humedad-bloque-reordenado .humedad-valor-linea > strong,
.humedad-bloque-reordenado .humedad-valor-linea-armonica > strong {
    display: inline-block !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: 58px !important;
    line-height: .95 !important;
    font-weight: 800 !important;
    letter-spacing: -1.4px !important;
    color: #1f2d34 !important;
}

/* Flecha de tendencia, algo más discreta para no forzar ancho */
.humedad-bloque-reordenado .tendencia-humedad {
    flex: 0 0 29px !important;
    width: 29px !important;
    height: 29px !important;
    margin-left: 3px !important;
    font-size: 19px !important;
}

/* =========================================================
   MINI ESCALA · MÁS A LA IZQUIERDA Y MEJOR CENTRADA
========================================================= */

.humedad-bloque-reordenado .mini-escala-humedad {
    width: 168px !important;
    margin-left: 0 !important;
    margin-top: 7px !important;
    margin-bottom: 5px !important;
}

.humedad-bloque-reordenado .mini-escala-humedad-barra {
    height: 7px !important;
    background:
        linear-gradient(
            90deg,
            #d9822b 0%,
            #e6a73b 18%,
            #e6c65a 33%,
            #b7c96a 48%,
            #77ad69 62%,
            #3f8d5f 80%,
            #245b43 100%
        ) !important;
}

.humedad-bloque-reordenado .mini-escala-humedad-marcador {
    height: 17px !important;
    background: #243d32 !important;
}

/* Variaciones alineadas con la escala */
.humedad-bloque-reordenado .microcontexto-hum {
    margin-left: 0 !important;
}


/* =========================================================
   HUMEDAD · MISMO LENGUAJE VISUAL QUE TEMPERATURA
========================================================= */

/*
 * Misma reserva horizontal para icono que en temperatura.
 * La gota no se centra en su propia caja: se alinea con el eje
 * vertical del termómetro.
 */
.humedad-bloque-reordenado .humedad-valor-linea,
.humedad-bloque-reordenado .humedad-valor-linea-armonica {
    display: grid !important;
    grid-template-columns: 50px auto 32px !important;
    column-gap: 8px !important;
    align-items: center !important;
    width: max-content !important;
    max-width: 100% !important;
    white-space: nowrap !important;
}

/* Caja exactamente comparable a la del termómetro */
.humedad-bloque-reordenado .icono-humedad {
    grid-column: 1 !important;
    width: 50px !important;
    height: 72px !important;
    max-width: 50px !important;
    max-height: 72px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    align-self: center !important;
    justify-self: center !important;
}

/*
 * La silueta de la gota ocupa menos dentro de la caja de 50x72,
 * como ocurre con el termómetro dentro de su SVG.
 */
.humedad-bloque-reordenado .icono-humedad path {
    fill: #3296c8 !important;
    stroke: none !important;
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(.76) translateY(-1px);
}

/* Valor: mismo color que temperatura y peso menos agresivo */
.humedad-bloque-reordenado .humedad-valor-linea > strong,
.humedad-bloque-reordenado .humedad-valor-linea-armonica > strong {
    grid-column: 2 !important;
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: inherit !important;
    font-size: 58px !important;
    line-height: .96 !important;
    font-weight: 700 !important;
    letter-spacing: -1.2px !important;
    color: #1f2d34 !important;
    white-space: nowrap !important;
}

/* Tendencia en tercera columna, como elemento independiente */
.humedad-bloque-reordenado .tendencia-humedad {
    grid-column: 3 !important;
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    justify-self: start !important;
    align-self: center !important;
    font-size: 20px !important;
}

/*
 * La escala empieza en el mismo eje izquierdo del conjunto,
 * no debajo del número.
 */
.humedad-bloque-reordenado .mini-escala-humedad {
    width: 178px !important;
    margin-left: 0 !important;
    margin-top: 6px !important;
}

/* Texto inferior también alineado desde la izquierda del minibloque */
.humedad-bloque-reordenado .microcontexto-hum {
    margin-left: 0 !important;
}


/* =========================================================
   HUMEDAD · AJUSTE FINAL DE GOTA Y MICROVARIACIONES
========================================================= */

/* Subir visualmente la gota para igualar el eje del termómetro */
.humedad-bloque-reordenado .icono-humedad {
    transform: translateY(-7px) !important;
}

/* =========================================================
   MICROVARIACIONES · TIPOGRAFÍA UNIFORME
========================================================= */

.microcontexto-temp,
.microcontexto-hum {
    display: flex !important;
    align-items: baseline !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    white-space: nowrap !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
}

.microcontexto-temp strong,
.microcontexto-hum strong,
.microcontexto-temp .etiqueta-variacion,
.microcontexto-hum .etiqueta-variacion,
.microcontexto-temp .separador-tendencia,
.microcontexto-hum .separador-tendencia {
    font-size: 10px !important;
    line-height: 1.25 !important;
    vertical-align: baseline !important;
}

/* Valores con un único peso */
.microcontexto-temp strong,
.microcontexto-hum strong {
    font-weight: 600 !important;
}

/* "var." misma altura, solo algo más tenue */
.microcontexto-temp .etiqueta-variacion,
.microcontexto-hum .etiqueta-variacion {
    font-weight: 600 !important;
    color: #778891 !important;
    margin: 0 4px 0 0 !important;
}

/* Separador sin alterar la altura de la línea */
.microcontexto-temp .separador-tendencia,
.microcontexto-hum .separador-tendencia {
    font-weight: 400 !important;
    color: #a1adb3 !important;
    margin: 0 7px !important;
}


/* =========================================================
   HUMEDAD · VALOR + UNIDAD CON EL MISMO LENGUAJE QUE °C
========================================================= */

/* La línea usa icono + número + unidad + tendencia */
.humedad-bloque-reordenado .humedad-valor-linea,
.humedad-bloque-reordenado .humedad-valor-linea-armonica {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: max-content !important;
    max-width: 100% !important;
    gap: 0 !important;
    white-space: nowrap !important;
}

/* Gota: misma caja visual reservada que el termómetro */
.humedad-bloque-reordenado .icono-humedad {
    flex: 0 0 50px !important;
    width: 50px !important;
    height: 72px !important;
    margin: 0 10px 0 0 !important;
    transform: translateY(-7px) !important;
}

/* Número: mismo lenguaje que .temperatura-valor */
.humedad-bloque-reordenado .humedad-valor-principal {
    display: inline-block;
    flex: 0 0 auto;
    font-family: inherit !important;
    font-size: 64px !important;
    line-height: .96 !important;
    font-weight: 700 !important;
    letter-spacing: -1.4px !important;
    color: #1f2d34 !important;
}

/* Porcentaje: equivalente visual a .temperatura-unidad (°C) */
.humedad-bloque-reordenado .humedad-unidad {
    display: inline-block;
    flex: 0 0 auto;
    margin-left: 5px;
    margin-right: 9px;
    color: #5e747f !important;
    font-size: 31px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    transform: translateY(-5px);
}

/* Tendencia alineada después de la unidad */
.humedad-bloque-reordenado .tendencia-humedad {
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    font-size: 20px !important;
}

/* Anular reglas antiguas destinadas al strong completo */
.humedad-bloque-reordenado .humedad-valor-linea > strong,
.humedad-bloque-reordenado .humedad-valor-linea-armonica > strong {
    font-size: inherit !important;
    font-weight: inherit !important;
}


/* =========================================================
   CIELO · ICONO SINÓPTICO DINÁMICO
========================================================= */

.estado-cielo-dinamico {
    display: flex;
    align-items: center;
    gap: 8px;
}

.icono-cielo-sinoptico {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
}

.icono-cielo-sinoptico .cielo-sol-disco {
    fill: #f4c75b;
    stroke: #d6a83f;
    stroke-width: 1.5;
}

.icono-cielo-sinoptico .cielo-sol-rayos path {
    fill: none;
    stroke: #d6a83f;
    stroke-width: 2;
    stroke-linecap: round;
}

.icono-cielo-sinoptico .cielo-nube {
    fill: #f8fbfc;
    stroke: #7ba5ba;
    stroke-width: 1.6;
    stroke-linejoin: round;
}

.icono-cielo-sinoptico .cielo-nube-fondo {
    fill: #e8f0f4;
    stroke: #819ead;
}

/* =========================================================
   HUMEDAD · ALINEACIÓN DE GOTA CON TERMÓMETRO
========================================================= */

.humedad-bloque-reordenado .humedad-valor-linea,
.humedad-bloque-reordenado .humedad-valor-linea-armonica {
    position: relative;
    min-height: 72px;
    display: flex !important;
    align-items: center !important;
}

.humedad-bloque-reordenado .icono-humedad {
    flex: 0 0 50px !important;
    width: 50px !important;
    height: 72px !important;
    margin: 0 10px 0 0 !important;
    transform: none !important;
}

/* Centramos la forma de gota dentro de la misma caja 50x72 que el termómetro */
.humedad-bloque-reordenado .icono-humedad path {
    transform-box: fill-box;
    transform-origin: center center;
    transform: scale(.72) translateY(-8%);
}

/* =========================================================
   MINI ESCALA DE HUMEDAD · MÁS ANCHA HACIA LA DERECHA
========================================================= */

.humedad-bloque-reordenado .mini-escala-humedad {
    width: 205px !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.humedad-bloque-reordenado .mini-escala-humedad-barra {
    width: 100% !important;
}


/* =========================================================
   AJUSTE FINAL · GOTA Y TEXTO DEL CIELO
========================================================= */

/* La gota se alinea con el valor, no con toda la caja de 72 px */
.humedad-bloque-reordenado .icono-humedad {
    position: relative !important;
    top: -11px !important;
    transform: none !important;
}

/* Anulamos transformaciones internas anteriores que desplazaban la forma */
.humedad-bloque-reordenado .icono-humedad path {
    transform: scale(.72) !important;
    transform-box: fill-box;
    transform-origin: center center;
}

/* Estado del cielo siempre en una sola línea */
.estado-cielo-dinamico {
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    max-width: none !important;
}

.estado-cielo-dinamico span {
    white-space: nowrap !important;
    display: inline-block !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
}

/* Icono sin comprimir cuando el texto es largo */
.estado-cielo-dinamico .icono-cielo-sinoptico {
    flex: 0 0 26px !important;
}


/* =========================================================
   HUMEDAD · GOTA GRANDE Y PROPORCIONADA AL VALOR
========================================================= */

/* Línea principal limpia: icono + valor + unidad + tendencia */
.humedad-bloque-reordenado .humedad-valor-linea,
.humedad-bloque-reordenado .humedad-valor-linea-armonica {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    min-height: 72px !important;
    gap: 0 !important;
}

/*
 * La gota ocupa una caja equivalente a la del termómetro
 * y una altura visual próxima a los dígitos de humedad.
 */
.humedad-bloque-reordenado .icono-humedad {
    position: static !important;
    top: auto !important;
    transform: none !important;

    flex: 0 0 50px !important;
    width: 50px !important;
    height: 64px !important;
    max-width: 50px !important;
    max-height: 64px !important;

    margin: 0 10px 0 0 !important;
    padding: 0 !important;

    align-self: center !important;
}

/* La forma aprovecha de verdad la caja; anulamos todos los escalados previos */
.humedad-bloque-reordenado .icono-humedad path {
    transform: none !important;
    transform-origin: center center !important;
    fill: #3296c8 !important;
    stroke: none !important;
}

/* El número mantiene la escala de temperatura */
.humedad-bloque-reordenado .humedad-valor-principal {
    font-size: 64px !important;
    line-height: .96 !important;
    font-weight: 700 !important;
}

/* Unidad proporcional a °C */
.humedad-bloque-reordenado .humedad-unidad {
    font-size: 31px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
    margin-left: 5px !important;
    margin-right: 9px !important;
    transform: translateY(-4px) !important;
}


/* =========================================================
   FLECHAS DE TENDENCIA · COLORES SEMÁNTICOS
========================================================= */

/* TEMPERATURA */
.tendencia-temperatura.tendencia-sube,
.tendencia-temperatura.tendencia-subiendo {
    color: #c95b4f !important;
    background: rgba(201, 91, 79, .10) !important;
}

.tendencia-temperatura.tendencia-baja,
.tendencia-temperatura.tendencia-bajando {
    color: #3f88b8 !important;
    background: rgba(63, 136, 184, .10) !important;
}

.tendencia-temperatura.tendencia-estable {
    color: #85949c !important;
    background: rgba(133, 148, 156, .10) !important;
}


/* HUMEDAD */
.tendencia-humedad.tendencia-sube,
.tendencia-humedad.tendencia-subiendo {
    color: #3f9a67 !important;
    background: rgba(63, 154, 103, .11) !important;
}

.tendencia-humedad.tendencia-baja,
.tendencia-humedad.tendencia-bajando {
    color: #d8842f !important;
    background: rgba(216, 132, 47, .11) !important;
}

.tendencia-humedad.tendencia-estable {
    color: #85949c !important;
    background: rgba(133, 148, 156, .10) !important;
}


/* =========================================================
   ESTADO DEL CIELO · MÁS INTEGRADO Y MÁS FIEL
========================================================= */

.estado-cielo-dinamico {
    gap: 7px !important;
    align-items: center !important;
}

.estado-cielo-dinamico span {
    color: #4f6875 !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
}

.estado-cielo-dinamico .icono-cielo-sinoptico {
    width: 27px !important;
    height: 27px !important;
    flex: 0 0 27px !important;
}

.icono-cielo-mayormente-despejado .cielo-nube-minima {
    fill: #fbfdfe !important;
    stroke: #86aabd !important;
    stroke-width: 1.35 !important;
}


/* =========================================================
   HUMEDAD · SUBIDA EN VERDE OSCURO
   (override final para evitar reglas azules anteriores)
========================================================= */

.humedad-bloque-reordenado .tendencia-humedad.tendencia-sube,
.humedad-bloque-reordenado .tendencia-humedad.tendencia-subiendo,
.tendencia-humedad.tendencia-sube,
.tendencia-humedad.tendencia-subiendo {
    color: #2f7252 !important;
    background: rgba(47, 114, 82, .12) !important;
}


/* =========================================================
   TEMPERATURA · MÁXIMA / MÍNIMA CENTRADAS BAJO EL VALOR
========================================================= */

.extremos.extremos-reordenados {
    width: 250px !important;
    margin-left: 34px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 18px !important;
    justify-items: center !important;
    align-items: start !important;
}

.extremos.extremos-reordenados .extremo {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
}

.extremos.extremos-reordenados .extremo > div {
    text-align: left !important;
}


/* =========================================================
   TEMPERATURA / HUMEDAD · EJES ALINEADOS
========================================================= */

.temperatura-linea-reordenada,
.humedad-bloque-reordenado .humedad-valor-linea,
.humedad-bloque-reordenado .humedad-valor-linea-armonica {
    display: grid !important;
    grid-template-columns: 50px auto auto 32px !important;
    column-gap: 10px !important;
    align-items: center !important;
    width: max-content !important;
    max-width: 100% !important;
}

.icono-termometro-principal,
.humedad-bloque-reordenado .icono-humedad {
    grid-column: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    justify-self: center !important;
    align-self: center !important;
}

.icono-termometro-principal {
    width: 50px !important;
    height: 72px !important;
}

.humedad-bloque-reordenado .icono-humedad {
    width: 42px !important;
    height: 62px !important;
}

.temperatura-linea-reordenada .temperatura-valor,
.humedad-bloque-reordenado .humedad-valor-principal {
    grid-column: 2 !important;
    justify-self: start !important;
    margin: 0 !important;
}

.temperatura-linea-reordenada .temperatura-unidad,
.humedad-bloque-reordenado .humedad-unidad {
    grid-column: 3 !important;
    justify-self: start !important;
    margin-left: -4px !important;
    margin-right: 0 !important;
}

.temperatura-linea-reordenada .tendencia-temperatura,
.humedad-bloque-reordenado .tendencia-humedad {
    grid-column: 4 !important;
    justify-self: start !important;
    margin-left: 0 !important;
}

/* =========================================================
   MÍNIMA / MÁXIMA · CENTRADAS BAJO EL VALOR
========================================================= */

.extremos.extremos-reordenados {
    width: 235px !important;
    margin-left: 60px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 20px !important;
    justify-items: center !important;
}

.extremos.extremos-reordenados .extremo {
    width: auto !important;
    min-width: 95px;
    justify-content: center !important;
}

.extremos.extremos-reordenados .extremo > div {
    text-align: left !important;
}

/* =========================================================
   MINI ESCALA HUMEDAD · SOLO SECO / HÚMEDO
========================================================= */

.humedad-bloque-reordenado .mini-escala-humedad-etiquetas {
    display: flex !important;
    justify-content: space-between !important;
}


/* =========================================================
   ALINEACIÓN VISUAL REAL · TEMPERATURA / HUMEDAD
========================================================= */

/*
 * Usamos exactamente el mismo ancho reservado para icono y
 * exactamente el mismo hueco antes del valor en ambos bloques.
 */
.temperatura-linea-reordenada,
.humedad-bloque-reordenado .humedad-valor-linea,
.humedad-bloque-reordenado .humedad-valor-linea-armonica {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    max-width: none !important;
    gap: 0 !important;
}

/* ICONOS: misma caja de 52 px */
.icono-termometro-principal,
.humedad-bloque-reordenado .icono-humedad {
    flex: 0 0 52px !important;
    width: 52px !important;
    margin: 0 10px 0 0 !important;
    padding: 0 !important;
    transform: none !important;
    position: static !important;
}

/* Termómetro */
.icono-termometro-principal {
    height: 72px !important;
}

/* Gota: algo más pequeña dentro de la misma caja, centrada */
.humedad-bloque-reordenado .icono-humedad {
    height: 62px !important;
}

/*
 * VALORES: ambos empiezan exactamente después de:
 * 52 px icono + 10 px separación = 62 px
 */
.temperatura-linea-reordenada .temperatura-valor,
.humedad-bloque-reordenado .humedad-valor-principal {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-self: auto !important;
}

/* Unidad inmediatamente después del valor */
.temperatura-linea-reordenada .temperatura-unidad,
.humedad-bloque-reordenado .humedad-unidad {
    flex: 0 0 auto !important;
    margin-left: 5px !important;
    margin-right: 10px !important;
    justify-self: auto !important;
}

/* Tendencias */
.temperatura-linea-reordenada .tendencia-temperatura,
.humedad-bloque-reordenado .tendencia-humedad {
    flex: 0 0 32px !important;
    margin: 0 !important;
    justify-self: auto !important;
}


/* =========================================================
   MÍNIMA / MÁXIMA · COMPACTAS Y CENTRADAS BAJO EL VALOR
========================================================= */

/*
 * El valor principal empieza a 62 px desde el borde izquierdo.
 * El bloque ocupa 210 px y queda centrado bajo el 25,1 °C.
 */
.extremos.extremos-reordenados {
    display: flex !important;
    width: 210px !important;
    margin-left: 73px !important;
    margin-top: 14px !important;
    justify-content: center !important;
    gap: 26px !important;
    align-items: flex-start !important;
}

.extremos.extremos-reordenados .extremo {
    flex: 0 0 88px !important;
    min-width: 0 !important;
    width: 88px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    text-align: center !important;
}

.extremos.extremos-reordenados .extremo > div {
    text-align: center !important;
}

.extremos.extremos-reordenados .extremo small,
.extremos.extremos-reordenados .extremo strong {
    text-align: center !important;
}


/* =========================================================
   MINI ESCALA HUMEDAD · SOLO SECO / HÚMEDO
========================================================= */

.humedad-bloque-reordenado .mini-escala-humedad-etiquetas {
    display: flex !important;
    justify-content: space-between !important;
    width: 100% !important;
}

.humedad-bloque-reordenado .mini-escala-humedad-etiquetas span {
    margin: 0 !important;
}


/* =========================================================
   MÍNIMA / MÁXIMA · CORRECCIÓN DE CENTRADO HORIZONTAL
========================================================= */

/*
 * Antes el bloque arrancaba demasiado a la derecha.
 * Lo desplazamos hacia la izquierda para centrarlo bajo el 25,1 °C.
 */
.extremos.extremos-reordenados {
    width: 205px !important;
    margin-left: 42px !important;
    gap: 20px !important;
}

.extremos.extremos-reordenados .extremo {
    flex: 0 0 88px !important;
    width: 88px !important;
}


/* =========================================================
   AJUSTE GEOMÉTRICO FINAL · GOTA / MÍNIMA-MÁXIMA
========================================================= */

/*
 * GOTA:
 * La caja visual del termómetro ocupa 50 px.
 * Para que la gota quede más a la izquierda, la desplazamos
 * dentro de esa misma reserva sin mover el valor de humedad.
 */
.humedad-bloque-reordenado .icono-humedad {
    position: relative !important;
    left: -8px !important;
    margin-right: 2px !important;
}


/*
 * MÍNIMA / MÁXIMA:
 * El número de temperatura arranca aproximadamente en x=62 px
 * (50 px icono + 12 px de separación).
 * Centramos el conjunto de extremos respecto al bloque numérico,
 * no respecto al conjunto completo icono+valor.
 */
.extremos.extremos-reordenados {
    width: 190px !important;
    margin-left: 55px !important;
    gap: 14px !important;
    justify-content: center !important;
}

.extremos.extremos-reordenados .extremo {
    flex: 0 0 84px !important;
    width: 84px !important;
    min-width: 84px !important;
}


/* =========================================================
   MÍNIMA / MÁXIMA · CENTRADO VISUAL DEFINITIVO
========================================================= */

.extremos.extremos-reordenados {
    position: relative !important;
    left: -38px !important;
}


/* =========================================================
   AJUSTES FINALES SOLICITADOS
========================================================= */

/* MÍNIMA / MÁXIMA: 2 px más a la izquierda */
.extremos.extremos-reordenados {
    left: -40px !important;
}

/* Mini gráfico de humedad: ocultar CONFORT si quedara por reglas anteriores */
.humedad-bloque-reordenado .mini-escala-humedad-etiquetas span:nth-child(2):not(:last-child) {
    display: none !important;
}

/* Reparto correcto de las dos etiquetas restantes */
.humedad-bloque-reordenado .mini-escala-humedad-etiquetas {
    display: flex !important;
    justify-content: space-between !important;
}

.humedad-bloque-reordenado .mini-escala-humedad-etiquetas span {
    margin: 0 !important;
}

/* Punto de rocío: banda lateral verde oscuro */
.indicador-rocio::before {
    background: #2f7252 !important;
}


/* =========================================================
   INDICADOR · INTENSIDAD DEL VIENTO
========================================================= */

.indicador-viento::before {
    background: #a84f5b !important;
}


/* =========================================================
   TABLAS · SEPARACIÓN MÍNIMA ENTRE TARJETAS
========================================================= */

.grid-tablas {
    gap: 2px !important;
}

.grid-tablas > * {
    background-clip: padding-box;
}


/* =========================================================
   TABLA TEMPERATURA · ETIQUETA COMPARATIVA 24 H
========================================================= */

.badge-temp24 {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 9px;
    line-height: 1.2;
    font-weight: 700;
    white-space: nowrap;
    vertical-align: middle;
}

.badge-temp24-fresco {
    color: #2f6f95;
    background: rgba(74, 143, 184, .13);
}

.badge-temp24-calido {
    color: #a84f43;
    background: rgba(201, 91, 79, .13);
}

.badge-temp24-neutro {
    color: #6f7f87;
    background: rgba(111, 127, 135, .11);
}


/* =========================================================
   TEMPERATURA + GRÁFICA EN LA RETÍCULA DE TABLAS
   1 columna normal + 2 columnas para la gráfica
========================================================= */

.grid-tablas > .tarjeta-temp-grid {
    grid-column: span 1 !important;
    min-width: 0 !important;
    width: 100% !important;
}

.grid-tablas > .grafico-temp-grid {
    grid-column: span 2 !important;
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;
}

/* Una sola tabla vertical, sin reparto interno */
.tarjeta-temp-grid .tabla-temperatura-unica {
    width: 100% !important;
    border-collapse: collapse !important;
}

/* Gráfica ocupando todo el espacio disponible a la derecha */
.grafico-temp-grid {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.grafico-temp-grid .grafico-card-cabecera {
    flex: 0 0 auto !important;
}

.grafico-temp-grid #grafico-temperatura-humedad {
    flex: 1 1 auto !important;
    min-height: 260px !important;
}

/* En móvil vuelven a apilarse */
@media (max-width: 900px) {
    .grid-tablas > .tarjeta-temp-grid,
    .grid-tablas > .grafico-temp-grid {
        grid-column: 1 / -1 !important;
    }
}


/* =========================================================
   TEMP/HUM · RESTAURACIÓN LIMPIA DE LA GRÁFICA
   No se modifica ninguna geometría interna de ApexCharts.
========================================================= */

/*
 * Evita que CSS Grid estire la tarjeta de la gráfica hasta
 * la altura de la tabla. Cada tarjeta conserva su altura natural.
 */
.grid-tablas {
    align-items: start !important;
}

.grid-tablas > .tarjeta-temp-grid,
.grid-tablas > .grafico-temp-grid {
    align-self: start !important;
    min-height: 0 !important;
}

/* Mantener exclusivamente el reparto 1 columna + 2 columnas */
.grid-tablas > .tarjeta-temp-grid {
    grid-column: span 1 !important;
    width: 100% !important;
}

.grid-tablas > .grafico-temp-grid {
    grid-column: span 2 !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
}

/*
 * Importante: no definir height, transform, overflow ni offsets
 * sobre canvas, SVG, ejes o grupos internos de ApexCharts.
 */
.grafico-temp-grid #grafico-temperatura-humedad {
    height: auto !important;
    min-height: 0 !important;
}

@media (max-width: 900px) {
    .grid-tablas > .tarjeta-temp-grid,
    .grid-tablas > .grafico-temp-grid {
        grid-column: 1 / -1 !important;
    }
}


/* =========================================================
   GRÁFICA TEMP/HUM · SIN MARCO NI CABECERA
========================================================= */

.grid-tablas > .grafico-temp-grid {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.grafico-temp-grid .grafico-card-cabecera {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    padding: 0 4px 6px !important;
    margin: 0 !important;
    min-height: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

.grafico-temp-grid .selector-series {
    margin: 0 !important;
    padding: 0 !important;
}

.grafico-temp-grid #grafico-temperatura-humedad {
    margin: 0 !important;
}


/* =========================================================
   GRÁFICA TEMP/HUM · 20 PX MÁS A CADA LADO
========================================================= */

.grafico-temp-grid #grafico-temperatura-humedad {
    width: calc(100% + 40px) !important;
    max-width: none !important;
    margin-left: -20px !important;
    margin-right: -20px !important;
}

@media (max-width: 900px) {
    .grafico-temp-grid #grafico-temperatura-humedad {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}


/* =========================================================
   GRÁFICA TEMP/HUM · AJUSTE DE LÍMITE IZQUIERDO Y HUECO SUPERIOR
========================================================= */

/*
 * Ya no invadimos la tarjeta de temperatura.
 * Se conserva la ampliación útil hacia la derecha.
 */
.grafico-temp-grid #grafico-temperatura-humedad {
    width: calc(100% + 20px) !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: -20px !important;

    /*
     * Recupera parte del espacio blanco situado bajo los selectores.
     * No se modifica ningún eje ni elemento interno de ApexCharts.
     */
    margin-top: -16px !important;
}

/* Reducimos también al mínimo la separación bajo los botones */
.grafico-temp-grid .grafico-card-cabecera {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

@media (max-width: 900px) {
    .grafico-temp-grid #grafico-temperatura-humedad {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
    }
}


/* =========================================================
   TEMP/HUM · NO INVADIR LOS BOTONES
========================================================= */

/*
 * El gráfico vuelve a su posición natural.
 * El aprovechamiento del hueco superior se hace ahora
 * internamente desde ApexCharts.
 */
.grafico-temp-grid #grafico-temperatura-humedad {
    margin-top: 0 !important;
}


/* =========================================================
   TEMP/HUM · 6 PX MÁS HACIA LA IZQUIERDA
========================================================= */

/*
 * Se desplaza únicamente el área del gráfico.
 * La columna y el ancho de la tabla permanecen intactos.
 * Se compensa el desplazamiento en el ancho para conservar
 * la extensión actual hacia la derecha.
 */
.grafico-temp-grid #grafico-temperatura-humedad {
    width: calc(100% + 26px) !important;
    max-width: none !important;
    margin-left: -6px !important;
    margin-right: -20px !important;
}

@media (max-width: 900px) {
    .grafico-temp-grid #grafico-temperatura-humedad {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}


/* =========================================================
   EJE TEMPORAL TEMP/HUM · 00 / 06 / 12 / 18 H
========================================================= */

.grafico-temp-grid #grafico-temperatura-humedad {
    position: relative !important;
}

.ets-etiquetas-tiempo {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    overflow: visible;
}

.ets-etiqueta-tiempo {
    position: absolute;
    transform: translateX(-50%);
    min-width: 34px;
    text-align: center;
    color: #5f737e;
    font-size: 9px;
    line-height: 1.05;
    font-weight: 600;
    white-space: nowrap;
}

.ets-etiqueta-tiempo span {
    display: block;
}

.ets-etiqueta-tiempo span + span {
    margin-top: 2px;
    color: #425965;
    font-weight: 700;
}


/* =========================================================
   TEMP/HUM · LÍMITES LATERALES DEL ÁREA DE TRAZADO
========================================================= */

.grafico-temp-grid .ets-limite-lateral {
    pointer-events: none;
}


/* =========================================================
   TEMP/HUM · 5 PX MÁS HACIA LA IZQUIERDA
========================================================= */

/*
 * Sólo se amplía el área del gráfico.
 * La tarjeta de temperatura conserva posición y anchura.
 */
.grafico-temp-grid #grafico-temperatura-humedad {
    width: calc(100% + 55px) !important;
    max-width: none !important;
    margin-left: -15px !important;
    margin-right: -20px !important;
}

@media (max-width: 900px) {
    .grafico-temp-grid #grafico-temperatura-humedad {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}


/* =========================================================
   TEMP/HUM · BORDES LATERALES LIMPIOS
========================================================= */

.grafico-temp-grid #grafico-temperatura-humedad {
    position: relative !important;
}

.grafico-temp-grid .ets-borde-grafico-lateral {
    position: absolute;
    width: 1px;
    background: #cad6dd;
    pointer-events: none;
    z-index: 1;
}

/* =========================================================
   TEMP/HUM · TOOLTIP MÁS COMPACTO
========================================================= */

.grafico-temp-grid .apexcharts-tooltip {
    font-size: 10px !important;
    line-height: 1.12 !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 7px rgba(30, 50, 60, .15) !important;
}

.grafico-temp-grid .apexcharts-tooltip-title {
    margin-bottom: 1px !important;
    padding: 4px 7px !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
}

.grafico-temp-grid .apexcharts-tooltip-series-group {
    min-height: 0 !important;
    padding: 3px 7px !important;
}

.grafico-temp-grid .apexcharts-tooltip-marker {
    width: 7px !important;
    height: 7px !important;
    margin-right: 5px !important;
}

.grafico-temp-grid .apexcharts-tooltip-text,
.grafico-temp-grid .apexcharts-tooltip-text-y-label,
.grafico-temp-grid .apexcharts-tooltip-text-y-value {
    font-size: 10px !important;
    line-height: 1.1 !important;
}

.grafico-temp-grid .apexcharts-tooltip-y-group {
    padding: 0 !important;
}


/* =========================================================
   PATRÓN TABLA + GRÁFICA · PRESIÓN / VIENTO / PRECIPITACIONES
   Tabla = 1 columna normal · Gráfica = 2 columnas
========================================================= */

.grid-tablas > .tarjeta-presion-grid,
.grid-tablas > .tarjeta-viento-grid,
.grid-tablas > .tarjeta-lluvia-grid {
    grid-column: span 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    align-self: start !important;
}

.grid-tablas > .grafico-presion-grid,
.grid-tablas > .grafico-viento-grid,
.grid-tablas > .grafico-lluvia-grid {
    grid-column: span 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    align-self: start !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

/* Presión no necesita cabecera: sólo área gráfica */
.grafico-presion-grid .grafico-card-cabecera {
    display: none !important;
}

/* Viento y lluvia: sólo se conservan los botones */
.grafico-viento-grid .grafico-card-cabecera,
.grafico-lluvia-grid .grafico-card-cabecera {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    min-height: 0 !important;
    padding: 0 4px 5px !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

.grafico-viento-grid .selector-series,
.grafico-lluvia-grid .selector-series {
    margin: 0 !important;
    padding: 0 !important;
}

/* Contenedores preparados para etiquetas de tiempo y bordes laterales */
.grafico-presion-grid #grafico-presion,
.grafico-viento-grid #grafico-viento,
.grafico-lluvia-grid #grafico-precipitaciones {
    position: relative !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
}

/* Etiquetas temporales reutilizadas */
.grafico-presion-grid .ets-etiquetas-tiempo,
.grafico-viento-grid .ets-etiquetas-tiempo,
.grafico-lluvia-grid .ets-etiquetas-tiempo {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    overflow: visible;
}

/* Límites verticales del rectángulo de trazado */
.grafico-presion-grid .ets-borde-grafico-lateral,
.grafico-viento-grid .ets-borde-grafico-lateral,
.grafico-lluvia-grid .ets-borde-grafico-lateral {
    position: absolute;
    width: 1px;
    background: #cad6dd;
    pointer-events: none;
    z-index: 1;
}

/* Tooltip compacto, mismo patrón que Temperatura/Humedad */
.grafico-presion-grid .apexcharts-tooltip,
.grafico-viento-grid .apexcharts-tooltip,
.grafico-lluvia-grid .apexcharts-tooltip {
    font-size: 10px !important;
    line-height: 1.12 !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 7px rgba(30, 50, 60, .15) !important;
}

.grafico-presion-grid .apexcharts-tooltip-title,
.grafico-viento-grid .apexcharts-tooltip-title,
.grafico-lluvia-grid .apexcharts-tooltip-title {
    margin-bottom: 1px !important;
    padding: 4px 7px !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
}

.grafico-presion-grid .apexcharts-tooltip-series-group,
.grafico-viento-grid .apexcharts-tooltip-series-group,
.grafico-lluvia-grid .apexcharts-tooltip-series-group {
    min-height: 0 !important;
    padding: 3px 7px !important;
}

.grafico-presion-grid .apexcharts-tooltip-marker,
.grafico-viento-grid .apexcharts-tooltip-marker,
.grafico-lluvia-grid .apexcharts-tooltip-marker {
    width: 7px !important;
    height: 7px !important;
    margin-right: 5px !important;
}

@media (max-width: 900px) {
    .grid-tablas > .tarjeta-presion-grid,
    .grid-tablas > .tarjeta-viento-grid,
    .grid-tablas > .tarjeta-lluvia-grid,
    .grid-tablas > .grafico-presion-grid,
    .grid-tablas > .grafico-viento-grid,
    .grid-tablas > .grafico-lluvia-grid {
        grid-column: 1 / -1 !important;
    }
}


/* =========================================================
   TEMP/HUM · CABECERA SIN TEXTO, SOLO SELECTORES
========================================================= */

.grafico-temp-grid .grafico-card-cabecera {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    padding: 0 4px 5px !important;
    margin: 0 !important;
    min-height: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

.grafico-temp-grid .selector-series {
    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   GRÁFICOS · LEGIBILIDAD DE EJES Y ESCALAS
========================================================= */

/* Cifras de los ejes Y */
.grafico-real .apexcharts-yaxis-label {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    fill: #405660 !important;
    text-rendering: geometricPrecision;
}

/* Títulos laterales: más nítidos, no más pesados */
.grafico-real .apexcharts-yaxis-title-text {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    fill: #2f4854 !important;
    letter-spacing: 0.12px;
    text-rendering: geometricPrecision;
}

/* Fechas y horas del eje temporal */
.grafico-real .ets-etiqueta-tiempo {
    color: #536a75 !important;
    font-size: 9.5px !important;
    line-height: 1.08 !important;
    font-weight: 600 !important;
}

.grafico-real .ets-etiqueta-tiempo span + span {
    margin-top: 2px !important;
    color: #344d59 !important;
    font-weight: 700 !important;
}


/* =========================================================
   GRÁFICOS · MÁS AIRE EN ESCALAS DERECHAS
========================================================= */

/*
 * La separación principal se controla desde offsetX en ApexCharts.
 * Aquí sólo aseguramos que el texto mantenga nitidez y no se comprima.
 */
.grafico-real .apexcharts-yaxis.apexcharts-yaxis-opposite .apexcharts-yaxis-label {
    font-variant-numeric: tabular-nums;
}


/* =========================================================
   GRÁFICOS · TÍTULOS LATERALES MÁS LEGIBLES
========================================================= */

.grafico-real .apexcharts-yaxis-title-text {
    font-family: "Segoe UI", Arial, sans-serif !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    fill: #304955 !important;
    letter-spacing: 0.45px !important;
    text-rendering: geometricPrecision;
}


/* =========================================================
   GRÁFICOS · AJUSTE FINO ESCALAS Y EJE TEMPORAL
========================================================= */

/* Eje temporal algo más legible */
.grafico-real .ets-etiqueta-tiempo {
    font-size: 10.5px !important;
    line-height: 1.1 !important;
}

.grafico-real .ets-etiqueta-tiempo span + span {
    font-size: 10.5px !important;
}


/* =========================================================
   PRESIÓN · MÁS AIRE RESPECTO A LA TABLA
========================================================= */

/*
 * Sólo afecta al área del gráfico de presión.
 * La tabla no se mueve y el borde derecho permanece en su posición.
 */
.grafico-presion-grid #grafico-presion {
    width: calc(100% - 19px) !important;
    margin-left: 19px !important;
    margin-right: 0 !important;
}

@media (max-width: 900px) {
    .grafico-presion-grid #grafico-presion {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}


/* =========================================================
   VIENTO · MÁS AIRE HACIA LA DERECHA
========================================================= */

/*
 * Se amplía únicamente el contenedor gráfico de Viento hacia
 * la derecha. El inicio izquierdo y la tabla permanecen intactos.
 */
.grafico-viento-grid #grafico-viento {
    width: calc(100% + 32px) !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: -32px !important;
}

@media (max-width: 900px) {
    .grafico-viento-grid #grafico-viento {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}


/* =========================================================
   RADIACIÓN / UV + CALIDAD DEL AIRE · TABLA + GRÁFICO
========================================================= */

.grid-tablas > .tarjeta-radiacion-grid,
.grid-tablas > .tarjeta-calidad-aire-grid {
    grid-column: span 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    align-self: start !important;
}

.grid-tablas > .grafico-radiacion-grid,
.grid-tablas > .grafico-calidad-aire-grid {
    grid-column: span 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    align-self: start !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.grafico-radiacion-grid .grafico-card-cabecera,
.grafico-calidad-aire-grid .grafico-card-cabecera {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    min-height: 0 !important;
    padding: 0 4px 5px !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

.grafico-radiacion-grid .selector-series,
.grafico-calidad-aire-grid .selector-series {
    margin: 0 !important;
    padding: 0 !important;
}

.grafico-radiacion-grid #grafico-radiacion-uv,
.grafico-calidad-aire-grid #grafico-calidad-aire {
    position: relative !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}

.grafico-radiacion-grid .ets-etiquetas-tiempo,
.grafico-calidad-aire-grid .ets-etiquetas-tiempo {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    overflow: visible;
}

.grafico-radiacion-grid .ets-borde-grafico-lateral,
.grafico-calidad-aire-grid .ets-borde-grafico-lateral {
    position: absolute;
    width: 1px;
    background: #cad6dd;
    pointer-events: none;
    z-index: 1;
}

/* Botones / leyenda */
.selector-series .boton-serie[data-serie="radiacion"].activo {
    background: #f7e9c8 !important;
    border-color: #d49a28 !important;
    color: #78571a !important;
}

.selector-series .boton-serie[data-serie="uv"].activo {
    background: #ece3f4 !important;
    border-color: #8660a8 !important;
    color: #604278 !important;
}

.selector-series .boton-serie[data-serie="pm1"].activo {
    background: #f7e1e1 !important;
    border-color: #c94343 !important;
    color: #913232 !important;
}

.selector-series .boton-serie[data-serie="pm25"].activo {
    background: #f8e8d8 !important;
    border-color: #df7f2d !important;
    color: #99541f !important;
}

.selector-series .boton-serie[data-serie="pm10"].activo {
    background: #f8f0cf !important;
    border-color: #d2a918 !important;
    color: #846b12 !important;
}

/* Tooltip compacto */
.grafico-radiacion-grid .apexcharts-tooltip,
.grafico-calidad-aire-grid .apexcharts-tooltip {
    font-size: 10px !important;
    line-height: 1.12 !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 7px rgba(30, 50, 60, .15) !important;
}

.grafico-radiacion-grid .apexcharts-tooltip-title,
.grafico-calidad-aire-grid .apexcharts-tooltip-title {
    margin-bottom: 1px !important;
    padding: 4px 7px !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
}

.grafico-radiacion-grid .apexcharts-tooltip-series-group,
.grafico-calidad-aire-grid .apexcharts-tooltip-series-group {
    min-height: 0 !important;
    padding: 3px 7px !important;
}

.grafico-radiacion-grid .apexcharts-tooltip-marker,
.grafico-calidad-aire-grid .apexcharts-tooltip-marker {
    width: 7px !important;
    height: 7px !important;
    margin-right: 5px !important;
}

@media (max-width: 900px) {
    .grid-tablas > .tarjeta-radiacion-grid,
    .grid-tablas > .tarjeta-calidad-aire-grid,
    .grid-tablas > .grafico-radiacion-grid,
    .grid-tablas > .grafico-calidad-aire-grid {
        grid-column: 1 / -1 !important;
    }
}


/* =========================================================
   SELECTOR GLOBAL DE RANGO · 24 H / 48 H
========================================================= */

.seccion-datos > .bloque-rango-graficos {
    width: 100%;
    margin: 0 0 2px;
}

.seccion-datos > .bloque-rango-graficos .titulo-graficos {
    width: 100%;
    margin: 0;
}

.seccion-datos > .bloque-rango-graficos .selector-rango {
    flex-shrink: 0;
}


.selector-series .boton-serie[data-serie="aqi"].activo {
    background: #e7eaec !important;
    border-color: #4f5960 !important;
    color: #394147 !important;
}


/* =========================================================
   AJUSTES TABLAS · SELECTOR Y VIENTO
========================================================= */

/* Sin título ni subtítulo: mantenemos sólo el conmutador 24/48 h a la derecha */
.seccion-datos > .bloque-rango-graficos .titulo-graficos-integrado {
    justify-content: flex-end !important;
}

/* Racha máxima: primera línea valor + badge + dirección */
.celda-racha-maxima .linea-racha-maxima {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

/* La hora comienza exactamente bajo el valor de la racha */
.celda-racha-maxima .hora-racha-maxima {
    display: block;
    margin-top: 2px;
    margin-left: 0 !important;
    text-align: left !important;
}


/* =========================================================
   TABLA DE VIENTO · MÁS ANCHO PARA LA COLUMNA DE VALORES
========================================================= */

/*
 * Regla general: 58 % / 42 %.
 * En Viento reducimos la primera columna a 54 % para ganar
 * aproximadamente un 4 % de ancho útil en la columna de valores.
 */
.tarjeta-viento-grid table td:first-child {
    width: 52% !important;
}

.tarjeta-viento-grid table td:last-child {
    width: 48% !important;
}


/* =========================================================
   TABLA TEMPERATURA / HUMEDAD · MÁS ANCHO PARA LOS VALORES
========================================================= */

/*
 * Igual que en la tabla de Viento:
 * reducimos la primera columna al 54 % para ampliar
 * hacia la izquierda la columna de valores.
 */
.tarjeta-temp-grid table td:first-child {
    width: 54% !important;
}

.tarjeta-temp-grid table td:last-child {
    width: 46% !important;
}


/* =========================================================
   PRECIPITACIONES / RADIACIÓN / CALIDAD DEL AIRE
   MÁS ANCHO PARA LA COLUMNA DE VALORES
========================================================= */

/*
 * Mismo reparto aplicado ya en Viento y Temperatura/Humedad:
 * 54 % para la primera columna y 46 % para los valores.
 */
.tarjeta-lluvia-grid table td:first-child,
.tarjeta-radiacion-grid table td:first-child,
.tarjeta-calidad-aire-grid table td:first-child {
    width: 54% !important;
}

.tarjeta-lluvia-grid table td:last-child,
.tarjeta-radiacion-grid table td:last-child,
.tarjeta-calidad-aire-grid table td:last-child {
    width: 46% !important;
}


/* =========================================================
   TOOLTIPS · MISMO TAMAÑO QUE TEMPERATURA / HUMEDAD
========================================================= */

/* Texto interno: igual al gráfico de Temperatura/Humedad */
.grafico-presion-grid .apexcharts-tooltip-text,
.grafico-presion-grid .apexcharts-tooltip-text-y-label,
.grafico-presion-grid .apexcharts-tooltip-text-y-value,
.grafico-viento-grid .apexcharts-tooltip-text,
.grafico-viento-grid .apexcharts-tooltip-text-y-label,
.grafico-viento-grid .apexcharts-tooltip-text-y-value,
.grafico-lluvia-grid .apexcharts-tooltip-text,
.grafico-lluvia-grid .apexcharts-tooltip-text-y-label,
.grafico-lluvia-grid .apexcharts-tooltip-text-y-value,
.grafico-radiacion-grid .apexcharts-tooltip-text,
.grafico-radiacion-grid .apexcharts-tooltip-text-y-label,
.grafico-radiacion-grid .apexcharts-tooltip-text-y-value,
.grafico-calidad-aire-grid .apexcharts-tooltip-text,
.grafico-calidad-aire-grid .apexcharts-tooltip-text-y-label,
.grafico-calidad-aire-grid .apexcharts-tooltip-text-y-value {
    font-size: 10px !important;
    line-height: 1.1 !important;
}

/* Elimina el espacio vertical extra que ApexCharts deja por defecto */
.grafico-presion-grid .apexcharts-tooltip-y-group,
.grafico-viento-grid .apexcharts-tooltip-y-group,
.grafico-lluvia-grid .apexcharts-tooltip-y-group,
.grafico-radiacion-grid .apexcharts-tooltip-y-group,
.grafico-calidad-aire-grid .apexcharts-tooltip-y-group {
    padding: 0 !important;
}


/* =========================================================
   24/48 H · ACERCAR AL PRIMER GRÁFICO
========================================================= */

/*
 * La separación visible no procedía del propio selector,
 * sino del margin-top: 24px aplicado a .grid-tablas en escritorio.
 * Lo anulamos únicamente cuando la rejilla sigue inmediatamente
 * al selector global 24/48 h.
 */
.seccion-datos > .bloque-rango-graficos {
    margin-bottom: 0 !important;
}

@media (min-width: 1101px) {
    .seccion-datos > .bloque-rango-graficos + .grid-tablas {
        margin-top: 4px !important;
    }
}


/* =========================================================
   AVISOS · FUENTE OFICIAL
========================================================= */

.avisos-sevilla-fuente {
    padding: 10px 18px 12px;
    border-top: 1px solid #e5eaed;
    color: #839099;
    font-size: 10px;
    line-height: 1.35;
}

.avisos-sevilla-fuente strong {
    color: #697983;
    font-weight: 600;
}

.avisos-sevilla-fuente span {
    margin: 0 5px;
}


/* =========================================================
   AVISOS → SECCIÓN DE GRÁFICOS · RITMO VERTICAL
========================================================= */

/*
 * Evitamos la suma de:
 * - margin-top de .seccion-datos
 * - margin-top histórico de .graficos-48
 *
 * Resultado: unos 10 px entre la fuente de avisos
 * y el selector global 24/48 h.
 */
.seccion-datos {
    margin-top: 0 !important;
}

.seccion-datos > .bloque-rango-graficos.graficos-48 {
    margin-top: 0 !important;
}


/* =========================================================
   TABLA DE PRESIÓN · MÁS ANCHO PARA LA COLUMNA DE VALORES
========================================================= */

.tarjeta-presion-grid table td:first-child {
    width: 54% !important;
}

.tarjeta-presion-grid table td:last-child {
    width: 46% !important;
}


/* =========================================================
   SEPARACIÓN VISUAL · TEMPERATURA/HUMEDAD → PRESIÓN
========================================================= */

/*
 * Abrimos ligeramente el cambio de bloque entre la primera fila
 * (Temperatura/Humedad) y Presión atmosférica.
 * Se desplazan por igual la tabla y su gráfico para mantener
 * perfectamente alineada la fila.
 */
@media (min-width: 901px) {
    .grid-tablas > .tarjeta-presion-grid,
    .grid-tablas > .grafico-presion-grid {
        margin-top: 12px !important;
    }
}


/* =========================================================
   PRUEBA · BLOQUES DE DATOS ENMARCADOS
   Tabla + gráfico tratados como una única unidad visual.
   ========================================================= */

.bloque-datos-meteo {
    grid-column: 1 / -1 !important;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 2px;
    align-items: start;

    box-sizing: border-box;
    width: 100%;
    min-width: 0;

    padding: 6px;

    border: 1px solid #d9e3e8;
    border-radius: 14px;

    background: rgba(248, 250, 251, 0.56);
    background-clip: padding-box;
    box-shadow: 0 2px 8px rgba(35, 63, 80, 0.04);
}

/* Un poco de respiración entre unidades sin fragmentar la página. */
.bloque-datos-meteo + .bloque-datos-meteo {
    margin-top: 12px !important;
}

/*
 * Todos los bloques mantienen ahora el mismo salto vertical:
 * 12 px entre Temperatura/Humedad → Presión,
 * Presión → Viento, Viento → Precipitaciones,
 * Precipitaciones → Radiación/UV y Radiación/UV → Calidad del aire.
 */
.bloque-datos-presion {
    margin-top: 12px !important;
}

/* Tabla = 1 columna; gráfico = 2 columnas. */
.bloque-datos-meteo > .tarjeta-tabla {
    grid-column: span 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    align-self: start !important;
    margin: 0 !important;
}

.bloque-datos-meteo > .grafico-card {
    grid-column: span 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    align-self: start !important;

    margin: 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/*
 * La separación de 12 px ya se aplica al contenedor completo.
 * Evitamos duplicarla en tabla/gráfico de Presión.
 */
.bloque-datos-meteo > .tarjeta-presion-grid,
.bloque-datos-meteo > .grafico-presion-grid {
    margin-top: 0 !important;
}

/* En pantallas estrechas, tabla y gráfico vuelven a apilarse. */
@media (max-width: 900px) {
    .bloque-datos-meteo {
        grid-template-columns: 1fr;
        row-gap: 4px;
        padding: 5px;
        border-radius: 11px;
    }

    .bloque-datos-meteo > .tarjeta-tabla,
    .bloque-datos-meteo > .grafico-card {
        grid-column: 1 / -1 !important;
    }

    .bloque-datos-meteo + .bloque-datos-meteo,
    .bloque-datos-presion {
        margin-top: 8px !important;
    }
}


/* =========================================================
   PRUEBA · AVISOS ENMARCADOS SEGÚN NIVEL
   El marco general refleja el nivel máximo declarado para hoy.
   La fuente AEMET/Meteoalarm permanece visualmente neutra.
========================================================= */

.panel-avisos-sevilla {
    --aviso-marco: #cfdde4;
    --aviso-fondo: rgba(247, 250, 251, .55);
    --aviso-cabecera: rgba(244, 248, 250, .82);
    --aviso-acento: #6e8793;

    overflow: hidden;

    border: 1px solid var(--aviso-marco) !important;
    border-radius: 13px !important;

    background: var(--aviso-fondo) !important;
    box-shadow: 0 2px 8px rgba(35, 63, 80, .035) !important;
}

/* Sin avisos: verde muy tenue */
.panel-avisos-sevilla.avisos-panel-verde {
    --aviso-marco: #cbded2;
    --aviso-fondo: rgba(73, 156, 102, .035);
    --aviso-cabecera: rgba(73, 156, 102, .065);
    --aviso-acento: #5d9971;
}

/* Nivel amarillo */
.panel-avisos-sevilla.avisos-panel-amarillo {
    --aviso-marco: #d9c55f;
    --aviso-fondo: rgba(226, 187, 36, .055);
    --aviso-cabecera: rgba(226, 187, 36, .085);
    --aviso-acento: #b39519;
}

/* Nivel naranja */
.panel-avisos-sevilla.avisos-panel-naranja {
    --aviso-marco: #dfa066;
    --aviso-fondo: rgba(231, 131, 39, .055);
    --aviso-cabecera: rgba(231, 131, 39, .085);
    --aviso-acento: #c36d20;
}

/* Nivel rojo */
.panel-avisos-sevilla.avisos-panel-rojo {
    --aviso-marco: #d17d7d;
    --aviso-fondo: rgba(201, 65, 65, .055);
    --aviso-cabecera: rgba(201, 65, 65, .085);
    --aviso-acento: #b94545;
}

.panel-avisos-sevilla .avisos-sevilla-encabezado {
    border-bottom-color: var(--aviso-marco) !important;
    background: var(--aviso-cabecera) !important;
}

.panel-avisos-sevilla .avisos-sevilla-icono {
    color: var(--aviso-acento) !important;
}

.panel-avisos-sevilla .avisos-sevilla-previstos {
    border-left-color: var(--aviso-marco) !important;
}

/*
 * La atribución queda neutra: informa de la procedencia,
 * pero no forma parte cromática del aviso.
 */
.panel-avisos-sevilla .avisos-sevilla-fuente {
    border-top-color: #e1e8eb !important;
    background: rgba(255, 255, 255, .72) !important;
}

@media (max-width: 900px) {
    .panel-avisos-sevilla .avisos-sevilla-previstos {
        border-left-color: transparent !important;
        border-top-color: var(--aviso-marco) !important;
    }
}


/* =========================================================
   AJUSTE VISUAL · AVISOS + CONTINUIDAD DE MARCOS
========================================================= */

/*
 * SIN AVISOS:
 * El verde anterior era demasiado tenue sobre fondo blanco.
 * Reforzamos ligeramente fondo, cabecera y borde, manteniendo
 * la zona de la fuente en blanco/neutro.
 */
.panel-avisos-sevilla.avisos-panel-verde {
    --aviso-marco: #b9d6c3;
    --aviso-fondo: rgba(73, 156, 102, .075);
    --aviso-cabecera: rgba(73, 156, 102, .115);
    --aviso-acento: #55946a;
}

.panel-avisos-sevilla.avisos-panel-verde .avisos-sevilla-columnas,
.panel-avisos-sevilla.avisos-panel-verde .avisos-sevilla-columna {
    background: transparent !important;
}

/*
 * El contenido de algunos gráficos puede pasar visualmente por encima
 * del borde exterior del bloque. Dibujamos una segunda línea de marco
 * en una capa superior para que esquinas y laterales sean continuos.
 */
.bloque-datos-meteo {
    position: relative !important;
    isolation: isolate;
}

.bloque-datos-meteo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 30;
    pointer-events: none;

    box-sizing: border-box;
    border: 1px solid #d9e3e8;
    border-radius: 14px;
}

/* Refuerzo equivalente para el bloque de avisos. */
.panel-avisos-sevilla {
    position: relative;
    isolation: isolate;
}

.panel-avisos-sevilla::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 30;
    pointer-events: none;

    box-sizing: border-box;
    border: 1px solid var(--aviso-marco);
    border-radius: 13px;
}


/* =========================================================
   MARCOS · ESQUINAS LIMPIAS Y CONTINUAS
========================================================= */

/*
 * Eliminamos la segunda línea superpuesta que se usó para reforzar
 * el marco. En las esquinas redondeadas podía apreciarse como un
 * doble trazo o un pequeño corte.
 *
 * El recorte del contenido al radio exterior mantiene ahora el
 * perímetro limpio y continuo.
 */
.bloque-datos-meteo,
.panel-avisos-sevilla {
    overflow: hidden !important;
}

.bloque-datos-meteo::after,
.panel-avisos-sevilla::after {
    display: none !important;
}

/* Unificamos ligeramente el radio del bloque de avisos. */
.panel-avisos-sevilla {
    border-radius: 14px !important;
}

.panel-avisos-sevilla .avisos-sevilla-encabezado {
    border-top-left-radius: 13px;
    border-top-right-radius: 13px;
}

.panel-avisos-sevilla .avisos-sevilla-fuente {
    border-bottom-left-radius: 13px;
    border-bottom-right-radius: 13px;
}


/* =========================================================
   TEMP/HUM · RETRAER 10 PX EL BORDE DERECHO REAL
========================================================= */

/*
 * El ajuste anterior de padding interno apenas era perceptible porque
 * ApexCharts reserva automáticamente espacio para el eje derecho.
 *
 * Aquí actuamos sobre la geometría REAL del contenedor:
 * - borde izquierdo: se conserva en -15 px
 * - extensión derecha: pasa de +40 px a +30 px
 * Resultado: el borde derecho retrocede exactamente 10 px.
 */
@media (min-width: 901px) {
    .grafico-temp-grid #grafico-temperatura-humedad {
        width: calc(100% + 45px) !important;
        max-width: none !important;
        margin-left: -15px !important;
        margin-right: -30px !important;
    }
}


/* =========================================================
   EMBALSES · SISTEMA DE ABASTECIMIENTO DE SEVILLA
========================================================= */

.tarjeta-embalses {
    grid-column: 1 / -1;
    overflow: hidden;
}

.tarjeta-embalses .embalses-cabecera {
    background: linear-gradient(180deg, #dcecf6 0%, #eef7fb 100%) !important;
    border-bottom-color: #bfd8e8 !important;
}

.tarjeta-embalses .embalses-cabecera h2 {
    color: #26343d !important;
}

.tarjeta-embalses .embalses-cabecera p {
    color: #65717a;
}

.embalses-icono {
    color: #3d88b6;
}

.embalses-icono svg {
    width: 27px;
    height: 27px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* Resumen general */
.embalses-resumen {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(420px, 1fr);
    gap: 20px;
    padding: 20px 22px;
    border-bottom: 1px solid #e5eaed;
}

.embalses-estado {
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
}

.embalses-estado strong {
    color: #314753;
    font-size: 15px;
    line-height: 1.35;
}

.embalses-medidor-general {
    width: min(610px, 100%);
    margin-top: 8px;
}

.embalses-barra-general {
    position: relative;
    width: 100%;
    height: 16px;
    overflow: visible;
    border: 1px solid #dce6eb;
    border-radius: 999px;
    background:
        linear-gradient(
            180deg,
            #f7fafb 0%,
            #edf3f6 100%
        );
    box-shadow:
        inset 0 1px 2px rgba(52, 90, 110, .08),
        0 1px 2px rgba(52, 90, 110, .04);
}

/* Marcas de 25 % integradas en el propio medidor */
.embalses-barra-general::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(
            90deg,
            transparent 24.8%,
            rgba(89, 112, 124, .18) 24.8%,
            rgba(89, 112, 124, .18) 25.1%,
            transparent 25.1%,
            transparent 49.8%,
            rgba(89, 112, 124, .18) 49.8%,
            rgba(89, 112, 124, .18) 50.1%,
            transparent 50.1%,
            transparent 74.8%,
            rgba(89, 112, 124, .18) 74.8%,
            rgba(89, 112, 124, .18) 75.1%,
            transparent 75.1%
        );
}

.embalses-barra-general-relleno {
    position: relative;
    z-index: 1;
    display: block;
    height: 100%;
    overflow: hidden;
    border-radius: 999px 0 0 999px;
    background:
        linear-gradient(
            90deg,
            #72b8d7 0%,
            #4c9ec5 48%,
            #347fae 100%
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .32),
        inset 0 -1px 0 rgba(39, 103, 140, .15);
}

/* Reflejo muy suave para dar sensación de agua sin recargar */
.embalses-barra-general-relleno::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 2px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .20);
}

.embalses-barra-general-marca {
    position: absolute;
    z-index: 4;
    top: 50%;
    width: 8px;
    height: 24px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #347fae;
    box-shadow: 0 1px 4px rgba(42, 73, 91, .28);
    transform: translate(-50%, -50%);
}

.embalses-barra-escala {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: start;
    margin-top: 5px;
    color: #8a98a0;
    font-size: 9px;
    line-height: 1;
}

.embalses-barra-escala span {
    text-align: center;
}

.embalses-barra-escala span:first-child {
    text-align: left;
}

.embalses-barra-escala span:last-child {
    text-align: right;
}

.embalses-indicadores {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid #e2e7ea;
    border-radius: 7px;
    overflow: hidden;
    background: #fafcfd;
}

.embalses-indicadores > div {
    min-width: 0;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-left: 1px solid #e2e7ea;
}

.embalses-indicadores > div:first-child {
    border-left: 0;
}

.embalses-indicador-valor {
    display: block;
    color: #347fae;
    font-size: 19px;
    line-height: 1.1;
    font-weight: 800;
}

.embalses-indicador-texto {
    display: block;
    margin-top: 4px;
    color: #74828b;
    font-size: 10px;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .25px;
}


/* Tabla */
.embalses-tabla-bloque {
    padding: 18px 22px 10px;
}

.embalses-subcabecera {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 10px;
}

.embalses-subcabecera > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.embalses-subcabecera strong {
    color: #314753;
    font-size: 14px;
}

.embalses-total {
    color: #7b8992;
    font-size: 11px;
    white-space: nowrap;
}

.embalses-tabla-wrap {
    overflow-x: auto;
}

.embalses-tabla {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    font-size: 12px;
}

.embalses-tabla th {
    padding: 8px 10px;
    border-bottom: 1px solid #d9e0e4;
    background: #f5f8fa;
    color: #596b75;
    font-size: 10px;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .25px;
    white-space: nowrap;
}

.embalses-tabla td {
    padding: 10px;
    border-bottom: 1px solid #edf0f2;
    color: #455762;
    vertical-align: middle;
    white-space: nowrap;
}

.embalses-tabla tbody tr:last-child td {
    border-bottom: 0;
}

.embalses-tabla tbody tr:hover td {
    background: #f6fbfe;
}

.embalse-nombre {
    color: #334a56;
}

.embalse-codigo {
    display: inline-block;
    margin-left: 5px;
    color: #93a0a7;
    font-size: 9.5px;
    font-weight: 600;
}

.embalse-ocupacion {
    width: 27%;
    min-width: 245px;
}

.embalse-ocupacion-linea {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 330px;
}

.embalse-ocupacion-linea > strong {
    min-width: 48px;
    color: #344e5c;
}

.embalse-mini-barra {
    position: relative;
    display: block;
    flex: 1 1 180px;
    min-width: 145px;
    max-width: 235px;
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: #edf1f3;
    box-shadow: inset 0 0 0 1px #e1e7ea;
}

.embalse-mini-barra-relleno {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #6fa8c7;
}

.embalse-mini-barra-muy-alto {
    background: #347fae;
}

.embalse-mini-barra-alto {
    background: #55a0c5;
}

.embalse-mini-barra-moderado {
    background: #c8a64b;
}

.embalse-mini-barra-bajo,
.embalse-mini-barra-muy-bajo {
    background: #c97964;
}



@media (max-width: 900px) {
    .embalse-ocupacion {
        width: auto;
        min-width: 205px;
    }

    .embalse-ocupacion-linea {
        max-width: 270px;
    }

    .embalse-mini-barra {
        min-width: 120px;
        max-width: 180px;
    }
}

@media (max-width: 620px) {
    .embalses-medidor-general {
        width: 100%;
    }
}

/* Estados */
.embalse-estado-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 3px 8px;
    border: 1px solid #d8e0e4;
    border-radius: 999px;
    color: #596b75;
    background: #f7f9fa;
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    white-space: nowrap;
}

.embalse-estado-muy-alto {
    border-color: #b7d2e2;
    color: #28688e;
    background: #e7f2f8;
}

.embalse-estado-alto {
    border-color: #c4dce7;
    color: #3e7897;
    background: #edf6fa;
}

.embalse-estado-moderado {
    border-color: #e2d39b;
    color: #8b7122;
    background: #fbf6df;
}

.embalse-estado-bajo,
.embalse-estado-muy-bajo {
    border-color: #e0b7aa;
    color: #9b5847;
    background: #faece8;
}

.embalses-sin-datos {
    padding: 18px !important;
    text-align: center;
    color: #7b8992 !important;
}


/* Destacados */
.embalses-destacados {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid #e5eaed;
    border-bottom: 1px solid #e5eaed;
}

.embalses-destacado {
    min-width: 0;
    padding: 15px 22px;
    border-right: 1px solid #e5eaed;
}

.embalses-destacado:last-child {
    border-right: 0;
}

.embalses-destacado strong {
    display: block;
    margin-top: 5px;
    color: #384c57;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 600;
}


/* Contraste con EMASESA */
.embalses-contraste {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 11px 22px;
    border-bottom: 1px solid #e5eaed;
    background: #fbfcfd;
    color: #697983;
    font-size: 10.5px;
    line-height: 1.4;
}

.embalses-contraste > span:last-child {
    min-width: 0;
}

.embalses-contraste strong {
    color: #425965;
    font-weight: 700;
}

.embalses-contraste-nota {
    margin-left: 8px;
    color: #8a979e;
}


/* Fuente */
.embalses-fuente {
    padding: 10px 22px 12px;
    color: #839099;
    font-size: 10px;
    line-height: 1.35;
}

.embalses-fuente strong {
    color: #697983;
    font-weight: 600;
}

.embalses-fuente > span {
    margin: 0 5px;
}

.embalses-fuente .embalses-fuente-aviso {
    margin-left: 0;
    color: #8a979e;
}


/* Responsive */
@media (max-width: 1000px) {
    .embalses-resumen {
        grid-template-columns: 1fr;
    }

    .embalses-destacados {
        grid-template-columns: 1fr;
    }

    .embalses-destacado {
        border-right: 0;
        border-bottom: 1px solid #e5eaed;
    }

    .embalses-destacado:last-child {
        border-bottom: 0;
    }
}

@media (max-width: 700px) {
    .embalses-resumen,
    .embalses-tabla-bloque {
        padding-left: 14px;
        padding-right: 14px;
    }

    .embalses-indicadores {
        grid-template-columns: 1fr;
    }

    .embalses-indicadores > div {
        border-left: 0;
        border-top: 1px solid #e2e7ea;
    }

    .embalses-indicadores > div:first-child {
        border-top: 0;
    }

    .embalses-subcabecera {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .embalses-destacado,
    .embalses-fuente,
    .embalses-contraste {
        padding-left: 14px;
        padding-right: 14px;
    }

    .embalses-contraste {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }
}


/* =========================================================
   GRÁFICOS · ALINEACIÓN LATERAL DEFINITIVA
   Referencia: Temperatura / Humedad
========================================================= */

@media (min-width: 901px) {

    /*
     * Todos los gráficos comienzan 15 px antes, igual que
     * Temperatura/Humedad. Así los títulos Y izquierdos dejan
     * de quedar desplazados hacia el centro y se aprovecha el
     * espacio blanco entre tabla y gráfico.
     */

    /* Presión: sólo ganamos por la izquierda; borde derecho intacto. */
    .grafico-presion-grid #grafico-presion {
        width: calc(100% - 5px) !important;
        max-width: none !important;
        margin-left: 5px !important;
        margin-right: 0 !important;
    }

    /*
     * Viento: conserva la extensión de 32 px que ya tenía
     * hacia la derecha y gana 15 px por la izquierda.
     */
    .grafico-viento-grid #grafico-viento {
        width: calc(100% + 47px) !important;
        max-width: none !important;
        margin-left: -15px !important;
        margin-right: -32px !important;
    }

    /*
     * Precipitación, Radiación/UV y Calidad del aire:
     * 15 px extra a izquierda Y derecha.
     * Esto recupera además la extensión derecha solicitada
     * sin forzar padding negativo dentro de ApexCharts.
     */
    .grafico-lluvia-grid #grafico-precipitaciones,
    .grafico-radiacion-grid #grafico-radiacion-uv,
    .grafico-calidad-aire-grid #grafico-calidad-aire {
        width: calc(100% + 30px) !important;
        max-width: none !important;
        margin-left: -15px !important;
        margin-right: -15px !important;
    }
}

@media (max-width: 900px) {
    .grafico-presion-grid #grafico-presion,
    .grafico-viento-grid #grafico-viento,
    .grafico-lluvia-grid #grafico-precipitaciones,
    .grafico-radiacion-grid #grafico-radiacion-uv,
    .grafico-calidad-aire-grid #grafico-calidad-aire {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}


/* =========================================================
   AJUSTE FINO · BORDES DERECHOS DE GRÁFICOS
   Se conserva exactamente la geometría del lado izquierdo.
========================================================= */

@media (min-width: 901px) {

    /*
     * Temperatura/Humedad:
     * borde izquierdo intacto en -15 px;
     * borde derecho retrocede 5 px.
     */
    .grafico-temp-grid #grafico-temperatura-humedad {
        width: calc(100% + 40px) !important;
        max-width: none !important;
        margin-left: -15px !important;
        margin-right: -25px !important;
    }

    /*
     * Precipitaciones, Radiación/UV y Calidad del aire:
     * borde izquierdo intacto en -15 px;
     * borde derecho gana 5 px.
     */
    .grafico-lluvia-grid #grafico-precipitaciones,
    .grafico-radiacion-grid #grafico-radiacion-uv,
    .grafico-calidad-aire-grid #grafico-calidad-aire {
        width: calc(100% + 35px) !important;
        max-width: none !important;
        margin-left: -15px !important;
        margin-right: -20px !important;
    }
}


/* =========================================================
   AVISOS · ESQUINAS LIMPIAS
   El radio lo controla únicamente el contenedor exterior.
========================================================= */

.panel-avisos-sevilla {
    overflow: hidden !important;
    border-radius: 14px !important;
}

/*
 * Evitamos el doble redondeado entre el marco y sus bloques internos.
 * El propio overflow:hidden del panel recorta cabecera y fuente
 * exactamente con el radio exterior.
 */
.panel-avisos-sevilla .avisos-sevilla-encabezado,
.panel-avisos-sevilla .avisos-sevilla-fuente {
    border-radius: 0 !important;
}


/* =========================================================
   AVISOS · CONTORNO EXTERIOR CONTINUO
   Corrección específica de la curva inferior/superior.
========================================================= */

/*
 * El problema no estaba en el radio de la cabecera/fuente:
 * era el propio borde del panel, que quedaba visualmente atenuado
 * en las curvas por el recorte y los fondos internos.
 *
 * Conservamos la geometría exacta, pero el contorno visible se
 * dibuja como un anillo exterior mediante box-shadow, que no puede
 * quedar tapado por los hijos del panel.
 */
.panel-avisos-sevilla {
    border-color: transparent !important;
    border-radius: 14px !important;
    overflow: hidden !important;

    box-shadow:
        0 0 0 1px var(--aviso-marco),
        0 2px 8px rgba(35, 63, 80, .04) !important;
}

/* Los bloques interiores no dibujan ninguna esquina propia. */
.panel-avisos-sevilla .avisos-sevilla-encabezado,
.panel-avisos-sevilla .avisos-sevilla-fuente {
    border-radius: 0 !important;
}


/* =========================================================
   AVISOS · CONTORNO INTERIOR NÍTIDO Y CONTINUO
   Sustituye el anillo exterior anterior.
========================================================= */

.panel-avisos-sevilla {
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid transparent !important;
    border-radius: 14px !important;

    /* Quitamos el anillo exterior que exageraba las curvas. */
    box-shadow: 0 2px 8px rgba(35, 63, 80, .04) !important;
}

/*
 * El contorno se dibuja DENTRO del panel, encima de sus fondos,
 * con exactamente el mismo radio del contenedor.
 * Así no puede quedar oculto por la cabecera o la fuente,
 * ni formar una segunda curva exterior.
 */
.panel-avisos-sevilla::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 50 !important;
    pointer-events: none !important;
    box-sizing: border-box !important;

    border: 1px solid var(--aviso-marco) !important;
    border-radius: 14px !important;
    background: transparent !important;
}

/* Los bloques interiores no generan radios adicionales. */
.panel-avisos-sevilla .avisos-sevilla-encabezado,
.panel-avisos-sevilla .avisos-sevilla-fuente {
    border-radius: 0 !important;
}


/* =========================================================
   AVISOS · SOMBREADO CROMÁTICO / LÍNEAS NEUTRAS
   El color identifica el estado sólo mediante los fondos.
========================================================= */

.panel-avisos-sevilla {
    --aviso-linea-neutra: #d9e3e8;

    position: relative !important;
    overflow: hidden !important;

    /*
     * Un único borde NATIVO y neutro.
     * Evitamos pseudo-bordes y dobles curvas.
     */
    border: 1px solid var(--aviso-linea-neutra) !important;
    border-radius: 14px !important;
    background-clip: padding-box !important;

    box-shadow: 0 2px 8px rgba(35, 63, 80, .035) !important;
}

/* Se elimina por completo cualquier contorno auxiliar anterior. */
.panel-avisos-sevilla::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

/*
 * Sólo los fondos conservan el código cromático del aviso.
 * El perímetro y los separadores se mantienen grises.
 */
.panel-avisos-sevilla .avisos-sevilla-encabezado {
    border-bottom-color: var(--aviso-linea-neutra) !important;
    background: var(--aviso-cabecera) !important;
    border-radius: 0 !important;
}

.panel-avisos-sevilla .avisos-sevilla-previstos {
    border-left-color: var(--aviso-linea-neutra) !important;
}

.panel-avisos-sevilla .avisos-sevilla-fuente {
    border-top-color: var(--aviso-linea-neutra) !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, .74) !important;
}

/* El cuerpo mantiene únicamente el sombreado correspondiente al estado. */
.panel-avisos-sevilla .avisos-sevilla-columnas,
.panel-avisos-sevilla .avisos-sevilla-columna {
    background: transparent !important;
}

@media (max-width: 900px) {
    .panel-avisos-sevilla .avisos-sevilla-previstos {
        border-left-color: transparent !important;
        border-top-color: var(--aviso-linea-neutra) !important;
    }
}


/* =========================================================
   AVISOS · ESQUINAS DEFINITIVAS
   Sin border nativo: recorte limpio + contorno interior gris.
========================================================= */

.panel-avisos-sevilla {
    --aviso-linea-neutra: #d9e3e8;

    position: relative !important;
    isolation: isolate !important;

    /* Quitamos el borde nativo, que estaba generando artefactos
       de antialiasing en las curvas sobre fondos coloreados. */
    border: 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;

    /* El fondo cromático queda limitado al interior del panel. */
    background: var(--aviso-fondo) !important;
    background-clip: padding-box !important;

    /*
     * El contorno gris se dibuja hacia dentro.
     * Sigue exactamente la misma curva del contenedor y no añade
     * una segunda geometría exterior.
     */
    box-shadow:
        inset 0 0 0 1px var(--aviso-linea-neutra),
        0 2px 7px rgba(35, 63, 80, .035) !important;
}

/* Eliminamos cualquier pseudo-contorno heredado de pruebas anteriores. */
.panel-avisos-sevilla::before,
.panel-avisos-sevilla::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Ningún hijo vuelve a redondear las esquinas. */
.panel-avisos-sevilla .avisos-sevilla-encabezado,
.panel-avisos-sevilla .avisos-sevilla-columnas,
.panel-avisos-sevilla .avisos-sevilla-columna,
.panel-avisos-sevilla .avisos-sevilla-fuente {
    border-radius: 0 !important;
}

/* Sólo sombreado por nivel; todas las líneas quedan neutras. */
.panel-avisos-sevilla .avisos-sevilla-encabezado {
    background: var(--aviso-cabecera) !important;
    border-bottom-color: var(--aviso-linea-neutra) !important;
}

.panel-avisos-sevilla .avisos-sevilla-previstos {
    border-left-color: var(--aviso-linea-neutra) !important;
}

.panel-avisos-sevilla .avisos-sevilla-fuente {
    background: rgba(255, 255, 255, .74) !important;
    border-top-color: var(--aviso-linea-neutra) !important;
}

/* El cuerpo hereda únicamente el sombreado del panel. */
.panel-avisos-sevilla .avisos-sevilla-columnas,
.panel-avisos-sevilla .avisos-sevilla-columna {
    background: transparent !important;
}

@media (max-width: 900px) {
    .panel-avisos-sevilla .avisos-sevilla-previstos {
        border-left-color: transparent !important;
        border-top-color: var(--aviso-linea-neutra) !important;
    }
}


/* =========================================================
   EMBALSES · PRESENTACIÓN SIMPLIFICADA
========================================================= */

@media (min-width: 701px) {
    .embalses-indicadores {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

.embalses-fuente {
    white-space: nowrap;
}

@media (max-width: 700px) {
    .embalses-fuente {
        white-space: normal;
    }
}


/* =========================================================
   EMBALSES · FUENTE EN FRANJA COMO SISMOLOGÍA
========================================================= */

.embalses-fuente {
    border-top: 1px solid #e5eaed;
}


/* =========================================================
   TABLA DE VIENTO · SEGUNDA COLUMNA ALGO MÁS ANCHA
========================================================= */

.tarjeta-viento-grid table td:first-child {
    width: 50% !important;
}

.tarjeta-viento-grid table td:last-child {
    width: 50% !important;
}


/* =========================================================
   PANEL PRINCIPAL · ICONOS LIGERAMENTE MÁS GRANDES
   Presión · Viento · Precipitaciones · Radiación · Calidad del aire
========================================================= */

@media (min-width: 821px) {
    .metrica-icono-presion,
    .metrica-icono-lluvia,
    .metrica-icono-sol,
    .metrica-icono-luna,
    .metrica-icono-aqi {
        width: 64px;
        height: 64px;
        flex: 0 0 64px;
    }

    .metrica-icono-luna .solar-panel-fase-lunar {
        width: 44px;
        height: 44px;
        font-size: 36px;
    }

    .indicador-viento-simple {
        width: 60px;
        height: 60px;
        flex: 0 0 60px;
    }

    .flecha-viento {
        width: 49px;
        height: 49px;
    }
}


/* =========================================================
   PANEL PRINCIPAL · COMPACTACIÓN VERTICAL SUAVE
   Presión · Viento · Precipitaciones · Solar/UV · Calidad del aire
========================================================= */

@media (min-width: 821px) {

    /* Menos hueco entre las filas del bloque derecho */
    .panel-meteo-derecha,
    .panel-meteo-derecha-avanzado {
        row-gap: 14px !important;
    }

    /* Título → valor */
    .panel-meteo-derecha .metrica-titulo,
    .panel-meteo-derecha-avanzado .metrica-titulo {
        margin-bottom: 2px !important;
    }

    /* Valor → información secundaria */
    .panel-meteo-derecha .metrica-sub,
    .panel-meteo-derecha-avanzado .metrica-sub {
        margin-top: 1px !important;
    }

    .panel-meteo-derecha .metrica-mini,
    .panel-meteo-derecha-avanzado .metrica-mini {
        margin-top: 1px !important;
    }

    /* Presión */
    .panel-meteo-derecha .microcontexto,
    .panel-meteo-derecha-avanzado .microcontexto {
        margin-top: 3px !important;
    }

    /* Solar / UV */
    .panel-meteo-derecha .uv-linea-principal,
    .panel-meteo-derecha-avanzado .uv-linea-principal {
        margin-top: 1px !important;
    }

    .panel-meteo-derecha .uv-indicador,
    .panel-meteo-derecha-avanzado .uv-indicador,
    .panel-meteo-derecha .aqi-indicador,
    .panel-meteo-derecha-avanzado .aqi-indicador {
        margin-top: 6px !important;
    }

    .panel-meteo-derecha .uv-leyenda,
    .panel-meteo-derecha-avanzado .uv-leyenda,
    .panel-meteo-derecha .aqi-leyenda,
    .panel-meteo-derecha-avanzado .aqi-leyenda {
        margin-top: 4px !important;
    }
}


/* =========================================================
   PANEL PRINCIPAL · DIAL UV / AQI SIN SOLAPAR LEYENDAS
========================================================= */
.panel-meteo-derecha .uv-indicador,
.panel-meteo-derecha-avanzado .uv-indicador,
.panel-meteo-derecha .aqi-indicador,
.panel-meteo-derecha-avanzado .aqi-indicador {
    padding-top: 9px !important;
    margin-top: 1px !important;
}

.panel-meteo-derecha .uv-leyenda,
.panel-meteo-derecha-avanzado .uv-leyenda,
.panel-meteo-derecha .aqi-leyenda,
.panel-meteo-derecha-avanzado .aqi-leyenda {
    margin-top: 6px !important;
    line-height: 1.15;
}


/* =========================================================
   PRONÓSTICO PARA HOY · TARJETA SOBRE AVISOS
========================================================= */

.panel-pronostico-hoy {
    overflow: hidden;
    margin-top: 20px;
    border: 1px solid #c8dbe6;
    border-radius: 13px;
    background: rgba(72, 137, 173, .035);
    box-shadow: 0 2px 8px rgba(35, 63, 80, .035);
}

.pronostico-hoy-encabezado {
    min-height: 39px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 8px 18px 7px;
    border-bottom: 1px solid #c8dbe6;
    background: rgba(72, 137, 173, .075);
}

.pronostico-hoy-titulo-wrap {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #344f60;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: .55px;
}

.pronostico-hoy-icono {
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    color: #5f91aa;
}

.pronostico-hoy-icono svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.pronostico-hoy-sol {
    fill: rgba(226, 173, 68, .12);
    stroke: #c99a37;
    stroke-width: 1.5;
}

.pronostico-hoy-rayo {
    fill: none;
    stroke: #c99a37;
    stroke-width: 1.35;
    stroke-linecap: round;
}

.pronostico-hoy-nube {
    fill: #f8fbfc;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linejoin: round;
}

.pronostico-hoy-fecha {
    flex: 0 0 auto;
    color: #718690;
    font-size: 10.5px;
    line-height: 1.2;
    font-weight: 700;
    text-align: right;
}

.pronostico-hoy-cuerpo {
    padding: 12px 18px 13px;
}

.pronostico-hoy-cuerpo p {
    margin: 0;
    color: #526b78;
    font-size: 12.5px;
    line-height: 1.58;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}

.panel-pronostico-hoy + .panel-avisos-sevilla {
    margin-top: 12px !important;
}

@media (max-width: 760px) {
    .pronostico-hoy-encabezado {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .pronostico-hoy-fecha {
        padding-left: 30px;
        text-align: left;
    }

    .pronostico-hoy-cuerpo p {
        text-align: left;
        hyphens: none;
    }
}


/* =========================================================
   PRONÓSTICOS PORTADA · HOY + MAÑANA
========================================================= */

.pronosticos-portada-grid {
    grid-column: 1 / -1;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    margin-top: 20px;
}

.pronosticos-portada-grid .panel-pronostico-hoy {
    margin-top: 0;
}

.pronosticos-portada-grid .panel-pronostico-dia {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
}

.pronosticos-portada-grid .pronostico-hoy-cuerpo {
    flex: 1 1 auto;
}

.pronosticos-portada-grid > .panel-pronostico-dia:only-child {
    grid-column: 1 / -1;
}

.pronosticos-portada-grid + .panel-avisos-sevilla {
    margin-top: 12px !important;
}

@media (max-width: 980px) {
    .pronosticos-portada-grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   PRONÓSTICOS PARA SEVILLA CAPITAL · CABECERA ÚNICA
========================================================= */

.panel-pronosticos-portada {
    grid-column: 1 / -1;
    width: 100%;
    overflow: hidden;
    margin-top: 5px;
    border: 1px solid #c8dbe6;
    border-radius: 13px;
    background: rgba(72, 137, 173, .03);
    box-shadow: 0 2px 8px rgba(35, 63, 80, .035);
}

.pronosticos-portada-cabecera {
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 18px 7px;
    border-bottom: 1px solid #c8dbe6;
    background: rgba(72, 137, 173, .075);
    color: #344f60;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: .55px;
}

.pronosticos-portada-cabecera-icono {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    color: #5f91aa;
}

.pronosticos-portada-cabecera-icono svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.pronosticos-portada-cabecera-icono circle {
    fill: rgba(226, 173, 68, .12);
    stroke: #c99a37;
    stroke-width: 1.45;
}

.pronosticos-portada-cabecera-icono path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pronosticos-portada-cabecera #titulo-pronosticos-portada {
    min-width: 0;
}

.pronosticos-portada-cabecera-boton {
    margin-left: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 4px 10px;
    border: 1px solid #b9d0dc;
    border-radius: 6px;
    background: rgba(255, 255, 255, .78);
    color: #41667a;
    font-size: 10.5px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .35px;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.pronosticos-portada-cabecera-boton:hover,
.pronosticos-portada-cabecera-boton:focus-visible {
    background: #fff;
    border-color: #8fb4c8;
    color: #2f5d76;
    text-decoration: none;
}

@media (max-width: 620px) {
    .pronosticos-portada-cabecera {
        gap: 7px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .pronosticos-portada-cabecera-boton {
        padding: 4px 7px;
        font-size: 9.5px;
        letter-spacing: .2px;
    }
}

.panel-pronosticos-portada .pronosticos-portada-grid {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0;
    margin: 0;
}

.pronostico-portada-dia {
    min-width: 0;
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 15px;

    /*
     * HOY y MAÑANA deben comenzar a la misma altura.
     * La fila conserva la altura del pronóstico más largo y,
     * si el otro es más corto, el espacio sobrante queda abajo.
     */
    align-items: start;

    padding: 16px 18px 17px;
}

.pronostico-portada-dia + .pronostico-portada-dia {
    border-left: 1px solid #d9e5eb;
}

.pronostico-portada-icono {
    width: 68px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(89, 145, 174, .075);
    color: #6b91a7;
}

.pronostico-portada-icono svg {
    width: 54px;
    height: 54px;
    overflow: visible;
}

.prono-svg-sol {
    fill: #f6c44d;
    stroke: #d7a32f;
    stroke-width: 1.7;
}

.prono-svg-rayos path {
    fill: none;
    stroke: #d7a32f;
    stroke-width: 2;
    stroke-linecap: round;
}

.prono-svg-nube {
    stroke: #6f98ad;
    stroke-width: 1.8;
    stroke-linejoin: round;
}

.prono-svg-nube-principal {
    fill: #f7fbfd;
}

.prono-svg-nube-fondo {
    fill: #dce8ee;
    opacity: .9;
}

.prono-svg-lluvia path {
    fill: none;
    stroke: #4b95c5;
    stroke-width: 2.2;
    stroke-linecap: round;
}

.pronostico-portada-contenido {
    min-width: 0;
}

.pronostico-portada-dia-cabecera {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.pronostico-portada-dia-cabecera strong {
    color: #35566a;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .55px;
}

.pronostico-portada-dia-cabecera span {
    color: #82919a;
    font-size: 10.5px;
    line-height: 1.25;
    font-weight: 700;
    text-align: right;
}

.pronostico-portada-contenido p {
    margin: 0;
    color: #526b78;
    font-size: 12.5px;
    line-height: 1.58;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}

.panel-pronosticos-portada + .panel-avisos-sevilla {
    margin-top: 12px !important;
}

@media (max-width: 980px) {
    .panel-pronosticos-portada .pronosticos-portada-grid {
        grid-template-columns: 1fr;
    }

    .pronostico-portada-dia + .pronostico-portada-dia {
        border-left: 0;
        border-top: 1px solid #d9e5eb;
    }
}

@media (max-width: 620px) {
    .pronostico-portada-dia {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 11px;
        padding: 14px 14px 15px;
    }

    .pronostico-portada-icono {
        width: 52px;
        height: 52px;
    }

    .pronostico-portada-icono svg {
        width: 43px;
        height: 43px;
    }

    .pronostico-portada-dia-cabecera {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

    .pronostico-portada-dia-cabecera span {
        text-align: left;
    }

    .pronostico-portada-contenido p {
        text-align: left;
        hyphens: none;
    }
}


/* =========================================================
   AVISOS DENTRO DE LOS PRONÓSTICOS HOY / MAÑANA
========================================================= */

.pronostico-portada-avisos {
    display: grid;
    gap: 5px;
    margin: 0 0 8px;
}

.pronostico-aviso {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 5px 8px;
    border: 1px solid transparent;
    border-radius: 7px;
    font-size: 10.5px;
    line-height: 1.35;
}

.pronostico-aviso-simbolo {
    flex: 0 0 auto;
    margin-top: 1px;
    font-size: 12px;
    line-height: 1;
}

.pronostico-aviso-texto {
    min-width: 0;
}

.pronostico-aviso-texto strong {
    font-weight: 800;
}

.pronostico-aviso-amarillo {
    border-color: #e8cf67;
    background: #fff8d8;
    color: #79600b;
}

.pronostico-aviso-naranja {
    border-color: #e6a45f;
    background: #fff0df;
    color: #8b4d16;
}

.pronostico-aviso-rojo {
    border-color: #d98c8c;
    background: #fce8e8;
    color: #953b3b;
}


/* =========================================================
   AVISOS INTEGRADOS EN EL TEXTO DEL PRONÓSTICO
========================================================= */

.pronostico-portada-contenido .pronostico-portada-texto {
    margin: 0;
}

.pronostico-aviso-inline {
    display: inline;
}

.pronostico-aviso-inline + .pronostico-aviso-inline {
    margin-left: 5px;
}

.pronostico-aviso-inline strong {
    color: #425c6b;
    font-weight: 800;
}

.pronostico-aviso-punto {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 5px 1px 0;
    border-radius: 50%;
    vertical-align: middle;
    box-shadow: 0 0 0 1px rgba(0,0,0,.05);
}

.pronostico-aviso-punto-amarillo {
    background: #f3c623;
}

.pronostico-aviso-punto-naranja {
    background: #ef8f2f;
}

.pronostico-aviso-punto-rojo {
    background: #d84a4a;
}


/* =========================================================
   PRONÓSTICOS · ICONO DE AVISO POR NIVEL MÁS SEVERO
========================================================= */

.pronostico-portada-icono-aviso {
    background: transparent;
}

.pronostico-portada-icono .pronostico-aviso-grande {
    width: 58px;
    height: 58px;
}

.pronostico-aviso-grande-fondo {
    stroke-width: 2.1;
    stroke-linejoin: round;
}

.pronostico-aviso-grande-linea {
    fill: none;
    stroke: #ffffff;
    stroke-width: 4.2;
    stroke-linecap: round;
}

.pronostico-aviso-grande-punto {
    fill: #ffffff;
}

.pronostico-portada-aviso-amarillo .pronostico-aviso-grande-fondo {
    fill: #ffd400;
    stroke: #d8ae00;
}

.pronostico-portada-aviso-naranja .pronostico-aviso-grande-fondo {
    fill: #ff8a00;
    stroke: #dc7100;
}

.pronostico-portada-aviso-rojo .pronostico-aviso-grande-fondo {
    fill: #e32727;
    stroke: #bd1515;
}

@media (max-width: 620px) {
    .pronostico-portada-icono .pronostico-aviso-grande {
        width: 47px;
        height: 47px;
    }
}


/* Colores de aviso más nítidos */
.pronostico-aviso-punto-amarillo { background: #ffd400 !important; }
.pronostico-aviso-punto-naranja  { background: #ff8a00 !important; }
.pronostico-aviso-punto-rojo     { background: #e32727 !important; }


/* =========================================================
   AVISOS EN SEVILLA CAPITAL · COLORES DE NIVEL MÁS NÍTIDOS
   Mismos tonos que los iconos de aviso del pronóstico.
========================================================= */

.panel-avisos-sevilla.avisos-panel-amarillo {
    --aviso-acento: #ffd400 !important;
}

.panel-avisos-sevilla.avisos-panel-naranja {
    --aviso-acento: #ff8a00 !important;
}

.panel-avisos-sevilla.avisos-panel-rojo {
    --aviso-acento: #e32727 !important;
}

/* Triángulos de cada aviso dentro del propio apartado */
.avisos-sevilla-columnas .aviso-hoy-amarillo .aviso-hoy-triangulo {
    color: #ffd400 !important;
}

.avisos-sevilla-columnas .aviso-hoy-naranja .aviso-hoy-triangulo {
    color: #ff8a00 !important;
}

.avisos-sevilla-columnas .aviso-hoy-rojo .aviso-hoy-triangulo {
    color: #e32727 !important;
}


/* =========================================================
   AVISOS EN SEVILLA CAPITAL · CONTORNO DEL ICONO DE CABECERA
========================================================= */

.panel-avisos-sevilla .avisos-sevilla-icono svg > path:first-child {
    stroke-width: 1.2;
    stroke-linejoin: round;
}

.panel-avisos-sevilla.avisos-panel-amarillo .avisos-sevilla-icono svg > path:first-child {
    stroke: #d8ae00;
}

.panel-avisos-sevilla.avisos-panel-naranja .avisos-sevilla-icono svg > path:first-child {
    stroke: #dc7100;
}

.panel-avisos-sevilla.avisos-panel-rojo .avisos-sevilla-icono svg > path:first-child {
    stroke: #bd1515;
}

.panel-avisos-sevilla.avisos-panel-verde .avisos-sevilla-icono svg > path:first-child {
    stroke: #477e5a;
}


/* =========================================================
   AVISOS EN SEVILLA CAPITAL · TRIÁNGULOS CON CONTORNO REAL
   Se aplica tanto a VIGENTES AHORA como a PREVISTOS PARA HOY.
========================================================= */

.avisos-sevilla-columnas
.aviso-hoy-amarillo
.aviso-hoy-triangulo
.triangulo-fondo {
    fill: #ffd400 !important;
    stroke: #d8ae00 !important;
    stroke-width: 1.25px !important;
}

.avisos-sevilla-columnas
.aviso-hoy-naranja
.aviso-hoy-triangulo
.triangulo-fondo {
    fill: #ff8a00 !important;
    stroke: #dc7100 !important;
    stroke-width: 1.25px !important;
}

.avisos-sevilla-columnas
.aviso-hoy-rojo
.aviso-hoy-triangulo
.triangulo-fondo {
    fill: #e32727 !important;
    stroke: #bd1515 !important;
    stroke-width: 1.25px !important;
}

/* Los puntos inline del pronóstico mantienen los mismos tonos. */
.pronostico-aviso-punto-amarillo {
    background: #ffd400 !important;
}

.pronostico-aviso-punto-naranja {
    background: #ff8a00 !important;
}

.pronostico-aviso-punto-rojo {
    background: #e32727 !important;
}


/* =========================================================
   PRONÓSTICOS · ICONOGRAFÍA SINÓPTICA PNG
   Los archivos originales se conservan sin recomprimir.
========================================================= */

.pronostico-portada-icono-sinoptico {
    background: transparent !important;
}

.pronostico-portada-icono-sinoptico img {
    display: block;
    width: 64px;
    height: 64px;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    image-rendering: auto;

    /* Separa ligeramente la sinóptica del fondo sin endurecer el icono */
    filter:
        drop-shadow(0 1px 1px rgba(42, 73, 91, .20))
        drop-shadow(0 3px 4px rgba(42, 73, 91, .14));
}

@media (max-width: 620px) {
    .pronostico-portada-icono-sinoptico img {
        width: 50px;
        height: 50px;
    }
}

/* =========================================================
   ESCRITORIO · ALINEACIÓN VERTICAL DEL BLOQUE VIENTO
   Ajuste óptico respecto al bloque Calidad del aire.
========================================================= */

@media (min-width: 1101px) {
    .panel-meteo-derecha > .metrica-viento-bajo-precipitaciones,
    .panel-meteo-derecha-avanzado > .metrica-viento-bajo-precipitaciones {
        position: relative !important;
        top: 6px !important;
    }
}

/* =========================================================
   ESCRITORIO · ALINEACIÓN FINA DEL PANEL PRINCIPAL
   - Unifica la columna de iconos/textos de Presión, Viento y Precipitaciones.
   - Alinea los títulos Solar/UV con Presión y Calidad del aire con Viento.
========================================================= */

@media (min-width: 1101px) {
    /* Viento usa la misma caja de icono y el mismo hueco que el resto
       de métricas de la columna izquierda. */
    .panel-meteo-derecha > .metrica-viento-bajo-precipitaciones,
    .panel-meteo-derecha-avanzado > .metrica-viento-bajo-precipitaciones {
        gap: 15px !important;
    }

    .panel-meteo-derecha > .metrica-viento-bajo-precipitaciones .indicador-viento-simple,
    .panel-meteo-derecha-avanzado > .metrica-viento-bajo-precipitaciones .indicador-viento-simple {
        width: 58px !important;
        height: 58px !important;
        flex: 0 0 58px !important;
    }

    /* El contenido de Solar/UV quedaba 5 px más alto que Presión. */
    .panel-meteo-derecha > .metrica-solar-panel .uv-contenido,
    .panel-meteo-derecha-avanzado > .metrica-solar-panel .uv-contenido {
        transform: translateY(5px) !important;
    }

    /* El título del AQI quedaba 3 px por encima del título de Viento. */
    .panel-meteo-derecha > .metrica-aqi-bajo-solar .aqi-contenido,
    .panel-meteo-derecha-avanzado > .metrica-aqi-bajo-solar .aqi-contenido {
        transform: translateY(3px) !important;
    }
}

/* =========================================================
   ESCRITORIO · ALINEACIÓN REAL DEL PANEL PRINCIPAL · V4
   El diseño de escritorio comienza en 821 px; los ajustes
   anteriores estaban limitados a 1101 px y no se aplicaban
   en determinadas ventanas de escritorio.
========================================================= */

@media (min-width: 821px) {

    /* Anula el desplazamiento vertical anterior del bloque Viento. */
    .panel-meteo-derecha > .metrica-viento-bajo-precipitaciones,
    .panel-meteo-derecha-avanzado > .metrica-viento-bajo-precipitaciones {
        position: relative !important;
        top: 0 !important;
        gap: 15px !important;
    }

    /* Viento comparte exactamente el mismo eje de icono y texto
       que Presión y Precipitaciones: caja 64 px + hueco 15 px. */
    .panel-meteo-derecha > .metrica-viento-bajo-precipitaciones .indicador-viento-simple,
    .panel-meteo-derecha-avanzado > .metrica-viento-bajo-precipitaciones .indicador-viento-simple {
        width: 64px !important;
        height: 64px !important;
        flex: 0 0 64px !important;
    }

    /* Alineación horizontal de los títulos de la primera fila. */
    .panel-meteo-derecha > .metrica-solar-panel .uv-contenido,
    .panel-meteo-derecha-avanzado > .metrica-solar-panel .uv-contenido {
        transform: translateY(3px) !important;
    }

    /* Alineación horizontal de Viento y Calidad del aire. */
    .panel-meteo-derecha > .metrica-aqi-bajo-solar .aqi-contenido,
    .panel-meteo-derecha-avanzado > .metrica-aqi-bajo-solar .aqi-contenido {
        transform: translateY(3px) !important;
    }
}

/* =========================================================
   PANEL PRINCIPAL · PRESIÓN · VARIACIÓN 24 H + 3 H
   Las dos variaciones se apilan dentro del mismo bloque.
   La rejilla conserva Viento y Calidad del aire en la misma fila,
   de modo que el aumento de altura de Presión desplaza ambos por igual.
========================================================= */

.panel-meteo-derecha .metrica-presion-avanzada .microcontexto-presion-panel,
.panel-meteo-derecha-avanzado .metrica-presion-avanzada .microcontexto-presion-panel {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 1px !important;
}

.panel-meteo-derecha .metrica-presion-avanzada .microcontexto-presion-panel strong,
.panel-meteo-derecha-avanzado .metrica-presion-avanzada .microcontexto-presion-panel strong {
    display: block;
    line-height: 1.25;
}


/* =========================================================
   PANEL PRINCIPAL · ETIQUETA DE INTENSIDAD DEL VIENTO
   La etiqueta acompaña a la velocidad instantánea sin alterar
   la altura ni la alineación vertical del bloque de Viento.
========================================================= */
.viento-valor-linea {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    white-space: nowrap;
}

.viento-valor-linea .viento-intensidad-badge {
    flex: 0 0 auto;
    margin-top: 0;
    padding: 3px 8px;
    font-size: 9px;
    line-height: 1;
    vertical-align: middle;
}

/* =========================================================
   ESCRITORIO · PRECIPITACIONES 10 PX MÁS ARRIBA
   Ajuste visual independiente: no modifica la fila de Viento
   ni la alineación de éste con Calidad del aire.
========================================================= */
@media (min-width: 821px) {
    .panel-meteo-derecha > .metrica-precipitaciones-panel,
    .panel-meteo-derecha-avanzado > .metrica-precipitaciones-panel {
        transform: translateY(-10px) !important;
    }
}

/* =========================================================
   ESCRITORIO · TERMÓMETRO DEL PANEL PRINCIPAL ALGO MÁS PEQUEÑO
   Se conserva la caja de 52 px para no mover el valor de temperatura
   ni romper la alineación con el bloque de humedad.
========================================================= */
@media (min-width: 821px) {
    .icono-termometro-principal svg {
        width: 44px !important;
        height: 64px !important;
        position: relative;
        left: 15px;
    }
}

/* =========================================================
   PRECIPITACIONES + RADIACIÓN / UV + CALIDAD DEL AIRE
   DESPLAZAR COLUMNA DE VALORES A LA DERECHA
========================================================= */
@media (min-width: 821px) {
    .tarjeta-lluvia-grid table td:first-child,
    .tarjeta-radiacion-grid table td:first-child,
    .tarjeta-calidad-aire-grid table td:first-child {
        width: 60% !important;
    }

    .tarjeta-lluvia-grid table td:last-child,
    .tarjeta-radiacion-grid table td:last-child,
    .tarjeta-calidad-aire-grid table td:last-child {
        width: 40% !important;
    }
}

/* =========================================================
   PANEL PRINCIPAL · SIN SOMBREADO / DEGRADADO INTERIOR
   Se elimina el velo gris-azulado tanto en escritorio como
   en móvil, manteniendo únicamente el fondo blanco del panel.
========================================================= */
.panel-meteo-izquierda,
.panel-meteo-izquierda-nueva,
.panel-meteo-derecha,
.panel-meteo-derecha-avanzado {
    background: transparent !important;
}

/* =========================================================
   MÓVIL · AJUSTE VERTICAL DEL PANEL PRINCIPAL
   - El conjunto de Condiciones actuales sube 15 px respecto a la cabecera.
   - Pronósticos conserva su posición general y gana 15 px de separación
     respecto al final de Calidad del aire / PM2.5.
========================================================= */
@media (max-width: 820px) {
    .panel-meteo,
    .panel-meteo-avanzado {
        margin-top: -15px !important;
    }

    .panel-pronosticos-portada {
        margin-top: 20px !important;
    }
}

/* =========================================================
   MÓVIL · CORRECCIÓN REAL DEL AJUSTE SUPERIOR
   El cambio anterior movía el contenedor completo y no reducía
   el aire interior señalado. Ahora se reduce 15 px el padding
   superior de la columna izquierda (24 -> 9 px).
========================================================= */
@media (max-width: 820px) {
    .panel-meteo,
    .panel-meteo-avanzado {
        margin-top: 0 !important;
    }

    .panel-meteo-izquierda-nueva {
        padding-top: 9px !important;
    }

    .panel-pronosticos-portada {
        margin-top: 20px !important;
    }
}

/* =========================================================
   ESCRITORIO · ALINEACIÓN PRESIÓN / SOLAR-UV
   Se eleva únicamente el bloque Solar/UV para hacerlo coincidir
   con Presión. Viento y Calidad del aire no se modifican.
========================================================= */
@media (min-width: 821px) {
    .panel-meteo-derecha > .metrica-solar-panel,
    .panel-meteo-derecha-avanzado > .metrica-solar-panel {
        transform: translateY(-6px) !important;
    }

    /* Ajuste fino de la primera fila: Solar / UV baja 2 px respecto
       a la versión anterior para hacer coincidir visualmente la línea
       base del título con la de Presión. */
    .panel-meteo-derecha > .metrica-solar-panel .uv-contenido,
    .panel-meteo-derecha-avanzado > .metrica-solar-panel .uv-contenido {
        transform: translateY(3px) !important;
    }
}

/* =========================================================
   MÓVIL · TERMÓMETRO DEL PANEL PRINCIPAL ALGO MÁS PEQUEÑO
   Se reduce únicamente el dibujo SVG. La caja exterior conserva
   su anchura para no desplazar el valor ni romper alineaciones.
========================================================= */
@media (max-width: 820px) {
    .icono-termometro-principal svg {
        width: 40px !important;
        height: 59px !important;
        position: relative;
        left: 15px;
    }
}

/* =========================================================
   ESCRITORIO · GOTA DE HUMEDAD DEL PANEL PRINCIPAL
   Ajuste fino: desplazar únicamente el icono 3 px a la derecha.
========================================================= */
@media (min-width: 821px) {
    .humedad-principal .icono-humedad {
        position: relative;
        left: 3px;
    }
}

/* =========================================================
   ESCRITORIO · GOTA DE HUMEDAD · AJUSTE CORREGIDO
   La gota real pertenece a .humedad-valor-linea, no a
   .humedad-principal. Se desplaza visualmente 6 px a la derecha.
========================================================= */
@media (min-width: 821px) {
    .humedad-valor-linea .icono-humedad,
    .humedad-valor-linea-armonica .icono-humedad {
        transform: translateX(6px) !important;
    }
}

/* =========================================================
   MÓVIL · GOTA DE HUMEDAD DEL PANEL PRINCIPAL
   Ajuste fino: 4 px a la derecha y 2 px hacia abajo.
========================================================= */
@media (max-width: 820px) {
    .humedad-valor-linea .icono-humedad,
    .humedad-valor-linea-armonica .icono-humedad {
        transform: translate(4px, 2px) !important;
    }
}


/* =========================================================
   ESCRITORIO · AJUSTES FINOS PANEL PRINCIPAL
   Temperatura: -5 px (termómetro, valor y tendencia).
   Humedad: +5 px (gota, valor y tendencia).
   En móvil se mantiene la posición anterior de ambos conjuntos.
========================================================= */
@media (min-width: 821px) {
    .panel-meteo-izquierda-nueva .temperatura-linea-reordenada {
        transform: translateX(-5px) !important;
    }

    .panel-meteo-izquierda-nueva .humedad-bloque-reordenado .humedad-valor-linea,
    .panel-meteo-izquierda-nueva .humedad-bloque-reordenado .humedad-valor-linea-armonica {
        transform: translateX(5px) !important;
    }
}


/* =========================================================
   MÓVIL · PANEL PRINCIPAL: CONTENIDO 4 PX MÁS ARRIBA
   Se desplazan ambas columnas interiores, sin mover la tarjeta,
   modificar su tamaño ni alterar los ajustes de escritorio.
========================================================= */
@media (max-width: 820px) {
    .panel-meteo-avanzado > .panel-meteo-izquierda-nueva,
    .panel-meteo-avanzado > .panel-meteo-derecha-avanzado {
        transform: translateY(-4px);
    }
}


/* =========================================================
   MÓVIL · 6 PX MÁS ENTRE AVISOS Y PANEL PRINCIPAL
   La capa responsive fija esta separación en 3 px; ampliarla
   a 9 px únicamente en Condiciones actuales (<= 760 px).
   El resto del panel y el diseño de escritorio no cambian.
========================================================= */
@media (max-width: 760px) {
    .pagina-meteo > .cabecera-pagina {
        margin-bottom: 9px !important;
    }
}