/* =========================================================
   RESÚMENES METEOROLÓGICOS · DIARIO / MENSUAL / ANUAL
   Hoja aislada: no modifica la portada ni tiempo-actual.css
========================================================= */

.resumenes-page .contenedor {
    overflow: hidden;
}

.resumen-cabecera {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 22px;
    align-items: end;
    padding-bottom: 22px;
    border-bottom: 1px solid #e1ebf0;
}

.resumen-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 7px;
    color: #6b8290;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.resumen-eyebrow::before {
    content: "";
    width: 18px;
    height: 3px;
    border-radius: 4px;
    background: #6ba4d0;
}

.resumen-cabecera h1 {
    margin: 0;
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.05;
    color: #274456;
    letter-spacing: -.025em;
}

.resumen-cabecera-texto > p {
    max-width: 820px;
    margin: 10px 0 0;
    color: #657b88;
    font-size: 15px;
    line-height: 1.55;
}

.resumen-periodo-estado {
    min-width: 170px;
    padding: 12px 14px;
    border: 1px solid #d8e7ee;
    border-radius: 12px;
    background: #f7fbfd;
    text-align: right;
}

.resumen-periodo-estado strong,
.resumen-periodo-estado span {
    display: block;
}

.resumen-periodo-estado strong {
    color: #36566a;
    font-size: 14px;
}

.resumen-periodo-estado span {
    margin-top: 4px;
    color: #78909d;
    font-size: 12px;
}

.resumen-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0 26px;
}

.resumen-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 15px;
    border: 1px solid #d7e4eb;
    border-radius: 999px;
    background: #fff;
    color: #567080;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: .18s ease;
}

.resumen-tabs a:hover {
    border-color: #8fb9d6;
    color: #315d77;
}

.resumen-tabs a.activo {
    border-color: #6ba4d0;
    background: #6ba4d0;
    color: #fff;
}

.resumen-kpis {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}

.resumen-kpi {
    position: relative;
    min-width: 0;
    padding: 17px 17px 15px;
    border: 1px solid #dce8ee;
    border-radius: 13px;
    background: linear-gradient(180deg, #fff 0%, #fbfdfe 100%);
    box-shadow: 0 3px 11px rgba(50, 86, 109, .045);
}

.resumen-kpi::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 16px;
    right: 16px;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: #90b7cf;
}

.resumen-kpi.temp::before { background: #d85f5f; }
.resumen-kpi.temp-min::before { background: #6aa7d4; }
.resumen-kpi.lluvia::before { background: #4c9ed2; }
.resumen-kpi.sol::before { background: #e5b73e; }
.resumen-kpi.viento::before { background: #6aa996; }

.resumen-kpi-titulo {
    display: block;
    color: #718794;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.resumen-kpi-valor {
    display: block;
    margin-top: 8px;
    color: #29485b;
    font-size: clamp(25px, 2.2vw, 34px);
    line-height: 1;
    font-weight: 700;
    letter-spacing: -.03em;
    white-space: nowrap;
}

.resumen-kpi-valor span {
    margin-left: 4px;
    color: #68808e;
    font-size: .48em;
    font-weight: 700;
    letter-spacing: 0;
}

.resumen-kpi small {
    display: block;
    margin-top: 7px;
    color: #8999a3;
    font-size: 11px;
    line-height: 1.35;
}

.resumen-seccion-titulo {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: end;
    margin: 30px 0 12px;
}

.resumen-seccion-titulo h2 {
    margin: 0;
    color: #2d4c5f;
    font-size: 20px;
    letter-spacing: -.015em;
}

.resumen-seccion-titulo p {
    margin: 0;
    color: #8496a0;
    font-size: 12px;
}

.resumen-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.resumen-tarjeta {
    min-width: 0;
    border: 1px solid #dce8ee;
    border-radius: 13px;
    background: #fff;
    overflow: hidden;
}

.resumen-tarjeta-cabecera {
    padding: 13px 15px 11px;
    border-bottom: 1px solid #e7eef2;
    background: #f9fbfc;
}

.resumen-tarjeta-cabecera h2 {
    margin: 0;
    color: #35566a;
    font-size: 15px;
}

.resumen-tarjeta-cabecera p {
    margin: 4px 0 0;
    color: #8a9aa4;
    font-size: 11px;
}

.resumen-tarjeta-cuerpo {
    padding: 6px 15px 10px;
}

.resumen-tarjeta.temperatura .resumen-tarjeta-cabecera { border-top: 3px solid #d85f5f; }
.resumen-tarjeta.humedad .resumen-tarjeta-cabecera { border-top: 3px solid #58a9a0; }
.resumen-tarjeta.presion .resumen-tarjeta-cabecera { border-top: 3px solid #738d9d; }
.resumen-tarjeta.viento .resumen-tarjeta-cabecera { border-top: 3px solid #65a98f; }
.resumen-tarjeta.lluvia .resumen-tarjeta-cabecera { border-top: 3px solid #4e9ed1; }
.resumen-tarjeta.solar .resumen-tarjeta-cabecera { border-top: 3px solid #e0b039; }
.resumen-tarjeta.records .resumen-tarjeta-cabecera { border-top: 3px solid #b58acb; }

.resumen-fila {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: baseline;
    padding: 9px 0;
    border-bottom: 1px solid #edf2f5;
}

.resumen-fila:last-child {
    border-bottom: 0;
}

.resumen-fila-etiqueta {
    color: #667d8a;
    font-size: 12px;
    line-height: 1.35;
}

.resumen-fila-valor {
    color: #263f4f;
    font-size: 13px;
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}

.resumen-fila-valor small {
    display: block;
    margin-top: 2px;
    color: #91a0a8;
    font-size: 10px;
    font-weight: 400;
}

.resumen-comparacion {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.resumen-compara-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid #e0eaef;
    border-radius: 11px;
    background: #fbfdfe;
}

.resumen-compara-item > span:first-child {
    color: #667d8a;
    font-size: 12px;
}

.resumen-compara-valores {
    text-align: right;
}

.resumen-compara-valores strong {
    display: block;
    color: #2c495b;
    font-size: 13px;
}

.resumen-delta {
    display: inline-block;
    margin-top: 3px;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
}

.resumen-delta.sube { background: #fdecec; color: #b44747; }
.resumen-delta.baja { background: #eaf3fa; color: #3f789f; }
.resumen-delta.neutro { background: #eef3f5; color: #728690; }

.resumen-texto-auto {
    margin-top: 14px;
    padding: 15px 17px;
    border: 1px solid #dce8ee;
    border-left: 4px solid #7aabc9;
    border-radius: 11px;
    background: #f8fbfd;
    color: #526b79;
    font-size: 13px;
    line-height: 1.6;
}

.resumen-texto-auto strong {
    color: #35566a;
}

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

.resumen-record {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #edf2f5;
}

.resumen-record:nth-last-child(-n+2) {
    border-bottom: 0;
}

.resumen-record span {
    color: #647b88;
    font-size: 12px;
}

.resumen-record strong {
    display: block;
    color: #304e61;
    font-size: 13px;
    text-align: right;
}

.resumen-record small {
    display: block;
    margin-top: 2px;
    color: #92a1a9;
    font-size: 10px;
    font-weight: 400;
}

.resumen-fuente {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    margin-top: 28px;
    padding-top: 14px;
    border-top: 1px solid #e3ebef;
    color: #8999a2;
    font-size: 10px;
    line-height: 1.5;
}

.resumen-fuente strong {
    color: #687f8c;
}

/* Fuente de datos: formato unificado en escritorio y vista móvil. */
.resumen-fuente .resumen-fuente-datos {
    display: block;
}
.resumen-fuente .resumen-fuente-datos > span {
    display: block;
}
.resumen-fuente .resumen-fuente-datos > span + span {
    margin-top: 2px;
}
.resumen-fuente .resumen-fuente-datos strong {
    color: #687f8c;
    font-weight: 700;
}
/* La fuente ocupa exactamente dos líneas: el observatorio continúa junto a “Fuente:”. */
.resumen-fuente .resumen-fuente-datos > span > strong {
    display: inline !important;
}

@media (max-width: 1180px) {
    .resumen-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .resumen-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .resumen-cabecera { grid-template-columns: 1fr; align-items: start; }
    .resumen-periodo-estado { width: 100%; text-align: left; }
    .resumen-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .resumen-grid,
    .resumen-comparacion,
    .resumen-records-grid { grid-template-columns: 1fr; }
    .resumen-record:nth-last-child(-n+2) { border-bottom: 1px solid #edf2f5; }
    .resumen-record:last-child { border-bottom: 0; }
    .resumen-seccion-titulo { display: block; }
    .resumen-seccion-titulo p { margin-top: 4px; }
    .resumen-fuente { display: block; }
    .resumen-fuente span { display: block; margin-top: 5px; }
}

@media (max-width: 470px) {
    .resumen-kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
    .resumen-kpi { padding: 14px 12px 13px; }
    .resumen-kpi-valor { font-size: 26px; }
    .resumen-tabs a { flex: 1 1 auto; }
}

/* =========================================================
   RESUMEN DIARIO · MAQUETACIÓN HORIZONTAL
   Aislado de mensual/anual y de la portada.
========================================================= */

.resumen-diario-page .contenedor {
    overflow: visible;
}

.resumen-diario-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e1ebf0;
}

.resumen-diario-cabecera h1 {
    margin: 0;
    color: #29485b;
    font-size: clamp(27px, 3vw, 38px);
    line-height: 1.05;
    letter-spacing: -.025em;
}

.resumen-diario-fecha {
    margin: 7px 0 0;
    color: #667d8a;
    font-size: 14px;
    line-height: 1.4;
}

.resumen-diario-estado {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    color: #8798a2;
    font-size: 11px;
    white-space: nowrap;
}

.resumen-diario-estado-chip {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 4px 10px;
    border: 1px solid #cfe2ec;
    border-radius: 999px;
    background: #f5fafc;
    color: #456a7f;
    font-size: 11px;
    font-weight: 700;
}

.resumen-tabs-compactos {
    margin: 14px 0 18px;
}

.resumen-cifras {
    overflow: hidden;
    border: 1px solid #dce8ee;
    border-radius: 12px;
    background: #fff;
}

.resumen-cifras-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 10px 14px;
    border-bottom: 1px solid #e7eef2;
    background: #f8fbfc;
}

.resumen-cifras-cabecera h2 {
    margin: 0;
    color: #35566a;
    font-size: 14px;
}

.resumen-cifras-cabecera span {
    color: #8a9ba5;
    font-size: 10px;
}

.resumen-cifras-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.resumen-cifra {
    position: relative;
    min-width: 0;
    padding: 13px 14px 12px;
    border-right: 1px solid #e8eef2;
}

.resumen-cifra:last-child {
    border-right: 0;
}

.resumen-cifra::before {
    content: "";
    position: absolute;
    top: 0;
    left: 14px;
    right: 14px;
    height: 2px;
    border-radius: 0 0 3px 3px;
    background: #9bb6c7;
}

.resumen-cifra.temperatura-alta::before { background: #c94343; }
.resumen-cifra.temperatura-baja::before { background: #5899c6; }
.resumen-cifra.temperatura-media::before { background: #ad7777; }
.resumen-cifra.lluvia::before { background: #4f9fd2; }
.resumen-cifra.viento::before { background: #62a18e; }
.resumen-cifra.sol::before { background: #d7a22a; }
.resumen-cifra.uv::before { background: #8c64b8; }

.resumen-cifra > span {
    display: block;
    color: #738793;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.resumen-cifra strong {
    display: block;
    margin-top: 5px;
    color: #29485b;
    font-size: clamp(21px, 1.75vw, 27px);
    line-height: 1;
    letter-spacing: -.025em;
    white-space: nowrap;
}

.resumen-cifra strong small {
    margin-left: 3px;
    color: #6f8490;
    font-size: .48em;
    font-weight: 700;
    letter-spacing: 0;
}

.resumen-cifra em {
    display: block;
    margin-top: 5px;
    overflow: hidden;
    color: #94a2aa;
    font-size: 9px;
    font-style: normal;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.resumen-seccion-titulo-diario {
    margin-top: 26px;
    margin-bottom: 9px;
}

.resumen-seccion-titulo-diario h2 {
    font-size: 18px;
}

.resumen-variable {
    margin-top: 12px;
    overflow: hidden;
    border: 1px solid #dce8ee;
    border-radius: 12px;
    background: #fff;
}

.resumen-variable-titulo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 10px 14px 9px;
    border-bottom: 1px solid #e7eef2;
    background: #f9fbfc;
}

.resumen-variable-titulo h2 {
    margin: 0;
    color: #35566a;
    font-size: 14px;
    line-height: 1.2;
}

.resumen-variable-titulo p {
    margin: 3px 0 0;
    color: #8798a2;
    font-size: 10px;
}

.resumen-variable-leyenda {
    color: #8a9aa4;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .045em;
    text-transform: uppercase;
    white-space: nowrap;
}

.resumen-variable-temperatura .resumen-variable-titulo { border-top: 3px solid #c94343; }
.resumen-variable-presion .resumen-variable-titulo { border-top: 3px solid #718794; }
.resumen-variable-viento .resumen-variable-titulo { border-top: 3px solid #62a18e; }
.resumen-variable-lluvia .resumen-variable-titulo { border-top: 3px solid #4f9fd2; }
.resumen-variable-solar .resumen-variable-titulo { border-top: 3px solid #d7a22a; }

.resumen-variable-cuerpo {
    display: grid;
    grid-template-columns: minmax(245px, .78fr) minmax(0, 2.22fr);
    min-height: 260px;
}

.resumen-variable-datos {
    padding: 5px 15px 8px;
    border-right: 1px solid #e7eef2;
    background: #fcfdfe;
}

.resumen-variable-datos .resumen-fila {
    padding: 7px 0;
}

.resumen-variable-datos .resumen-fila-etiqueta {
    font-size: 11px;
}

.resumen-variable-datos .resumen-fila-valor {
    font-size: 12px;
}

.resumen-variable-datos .resumen-fila-valor small {
    font-size: 9px;
}

.resumen-variable-grafico {
    position: relative;
    min-width: 0;
    min-height: 258px;
    padding: 4px 4px 0;
    background: #fff;
}

.resumen-grafico {
    width: 100%;
    min-height: 245px;
}

.resumen-grafico-carga {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #8798a2;
    font-size: 11px;
    text-align: center;
    pointer-events: none;
}

.resumen-grafico-carga.error {
    color: #a27676;
}

.resumen-diario-page .apexcharts-canvas,
.resumen-diario-page .apexcharts-svg {
    overflow: visible !important;
}

.resumen-diario-page .apexcharts-tooltip {
    border: 1px solid #d7e3e9 !important;
    box-shadow: 0 5px 14px rgba(40, 70, 90, .12) !important;
    font-size: 10px !important;
}

.resumen-diario-page .apexcharts-tooltip-title {
    background: #f7fafb !important;
    border-bottom: 1px solid #e5ecef !important;
    font-size: 10px !important;
}

.resumen-comparacion-titulo {
    margin-top: 28px;
}

.resumen-comparacion-tabla-wrap {
    overflow-x: auto;
    border: 1px solid #dce8ee;
    border-radius: 11px;
    background: #fff;
}

.resumen-comparacion-tabla {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.resumen-comparacion-tabla th,
.resumen-comparacion-tabla td {
    padding: 9px 13px;
    border-bottom: 1px solid #e9eff2;
    color: #405d6e;
    font-size: 11px;
    text-align: right;
}

.resumen-comparacion-tabla tr:last-child th,
.resumen-comparacion-tabla tr:last-child td {
    border-bottom: 0;
}

.resumen-comparacion-tabla thead th {
    background: #f8fbfc;
    color: #7b8e99;
    font-size: 9px;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.resumen-comparacion-tabla th:first-child,
.resumen-comparacion-tabla td:first-child {
    width: 37%;
    text-align: left;
}

.resumen-comparacion-tabla tbody th {
    color: #607784;
    font-weight: 400;
}

.resumen-comparacion-tabla tbody td:nth-child(2) {
    color: #29485b;
    font-weight: 700;
}

.resumen-comparacion-tabla .resumen-delta {
    min-width: 62px;
    margin-top: 0;
    text-align: center;
}

.resumen-comparacion-nota {
    margin: 8px 2px 0;
    color: #8c9ba4;
    font-size: 9px;
    line-height: 1.45;
}

@media (max-width: 1180px) {
    .resumen-cifras-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .resumen-cifra:nth-child(4) {
        border-right: 0;
    }

    .resumen-cifra:nth-child(n+5) {
        border-top: 1px solid #e8eef2;
    }
}

@media (max-width: 820px) {
    .resumen-diario-cabecera {
        align-items: flex-start;
    }

    .resumen-variable-cuerpo {
        grid-template-columns: 1fr;
    }

    .resumen-variable-datos {
        border-right: 0;
        border-bottom: 1px solid #e7eef2;
    }

    .resumen-variable-grafico {
        min-height: 240px;
    }
}

@media (max-width: 620px) {
    .resumen-diario-cabecera {
        display: block;
    }

    .resumen-diario-estado {
        align-items: flex-start;
        margin-top: 12px;
    }

    .resumen-cifras-cabecera {
        display: block;
    }

    .resumen-cifras-cabecera span {
        display: block;
        margin-top: 3px;
    }

    .resumen-cifras-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .resumen-cifra,
    .resumen-cifra:nth-child(4) {
        border-right: 1px solid #e8eef2;
    }

    .resumen-cifra:nth-child(even) {
        border-right: 0;
    }

    .resumen-cifra:nth-child(n+3) {
        border-top: 1px solid #e8eef2;
    }

    .resumen-variable-titulo {
        align-items: flex-start;
    }

    .resumen-variable-leyenda {
        display: none;
    }

    .resumen-comparacion-tabla {
        min-width: 570px;
    }
}

/* =========================================================
   RESUMEN DIARIO V3 · LEGIBILIDAD, ICONOS Y CONSULTA POR FECHA
   Todo queda limitado a .resumen-diario-page.
========================================================= */

.resumen-icono {
    display: block;
    width: 1em;
    height: 1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.resumen-diario-page {
    color: #405d6e;
    font-size: 15px;
}

.resumen-diario-page .resumen-eyebrow {
    font-size: 13px;
}

.resumen-diario-page .resumen-diario-cabecera h1 {
    font-size: clamp(31px, 3vw, 41px);
}

.resumen-diario-page .resumen-diario-fecha {
    margin-top: 9px;
    font-size: 16px;
    font-weight: 600;
}

.resumen-diario-page .resumen-diario-estado {
    gap: 7px;
    font-size: 13px;
}

.resumen-diario-page .resumen-diario-estado-chip {
    gap: 7px;
    min-height: 31px;
    padding: 5px 12px;
    font-size: 12px;
}

.resumen-diario-page .resumen-diario-estado-chip .resumen-icono {
    width: 15px;
    height: 15px;
}

.resumen-barra-superior {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 18px;
    margin: 16px 0 20px;
}

.resumen-diario-page .resumen-tabs-compactos {
    margin: 0;
    flex: 0 0 auto;
}

.resumen-diario-page .resumen-tabs a {
    min-height: 38px;
    padding: 8px 17px;
    font-size: 14px;
}

.resumen-consulta-fecha {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.resumen-consulta-fecha > label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #587182;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.resumen-consulta-fecha > label .resumen-icono {
    width: 18px;
    height: 18px;
    color: #6b9fbe;
}

.resumen-consulta-controles {
    display: flex;
    align-items: center;
    gap: 7px;
}

.resumen-consulta-fecha input[type="date"] {
    min-height: 38px;
    padding: 7px 10px;
    border: 1px solid #cfdee6;
    border-radius: 8px;
    background: #fff;
    color: #35566a;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    outline: none;
}

.resumen-consulta-fecha input[type="date"]:focus {
    border-color: #78aaca;
    box-shadow: 0 0 0 3px rgba(107, 164, 208, .12);
}

.resumen-consulta-fecha button,
.resumen-ir-hoy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 7px 13px;
    border: 1px solid #6ba4d0;
    border-radius: 8px;
    background: #6ba4d0;
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
text-decoration: none;
    cursor: pointer;
}

.resumen-ir-hoy {
    border-color: #d4e2e9;
    background: #fff;
    color: #527082;
}

.resumen-consulta-fecha button:hover {
    background: #5c96c1;
}

.resumen-ir-hoy:hover {
    border-color: #9fbed1;
    color: #315d77;
}

.resumen-dia-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border: 1px solid #d4e2e9;
    border-radius: 8px;
    background: #fff;
    color: #5f7d8f;
    text-decoration: none;
}

.resumen-dia-nav .resumen-icono {
    width: 17px;
    height: 17px;
}

.resumen-dia-nav:hover {
    border-color: #9fbed1;
    color: #315d77;
}

.resumen-dia-nav.desactivado {
    opacity: .38;
    cursor: default;
}

.resumen-sin-datos {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin: 22px 0 8px;
    padding: 20px 22px;
    border: 1px solid #d9e6ec;
    border-left: 4px solid #7aa8c4;
    border-radius: 12px;
    background: #f8fbfc;
}

.resumen-sin-datos-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    background: #e8f2f7;
    color: #5f8ba6;
}

.resumen-sin-datos-icono .resumen-icono {
    width: 21px;
    height: 21px;
}

.resumen-sin-datos h2 {
    margin: 1px 0 5px;
    color: #35566a;
    font-size: 18px;
}

.resumen-sin-datos p {
    margin: 0;
    color: #667e8c;
    font-size: 14px;
    line-height: 1.55;
}

.resumen-diario-page .resumen-cifras-cabecera {
    padding: 12px 16px;
}

.resumen-diario-page .resumen-cifras-cabecera h2 {
    font-size: 16px;
}

.resumen-diario-page .resumen-cifras-cabecera span {
    font-size: 12px;
}

.resumen-diario-page .resumen-cifra {
    padding: 15px 14px 14px;
}

.resumen-cifra-etiqueta {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 22px;
    color: #6b808d;
}

.resumen-cifra-etiqueta > span:last-child {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.resumen-cifra-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 7px;
    background: #f0f5f7;
    color: #6f8795;
}

.resumen-cifra-icono .resumen-icono {
    width: 15px;
    height: 15px;
}

.resumen-cifra.temperatura-alta .resumen-cifra-icono { background: #fbeded; color: #bd5050; }
.resumen-cifra.temperatura-baja .resumen-cifra-icono { background: #eaf3f9; color: #508db7; }
.resumen-cifra.temperatura-media .resumen-cifra-icono { background: #f5eeee; color: #9a6b6b; }
.resumen-cifra.lluvia .resumen-cifra-icono { background: #e9f3fa; color: #438dbe; }
.resumen-cifra.viento .resumen-cifra-icono { background: #eaf4f1; color: #548e7d; }
.resumen-cifra.sol .resumen-cifra-icono { background: #fbf4df; color: #b78a20; }
.resumen-cifra.uv .resumen-cifra-icono { background: #f2ecf7; color: #7f5aa5; }

.resumen-diario-page .resumen-cifra > span {
    display: none;
}

.resumen-diario-page .resumen-cifra strong {
    margin-top: 8px;
    font-size: clamp(24px, 1.9vw, 30px);
}

.resumen-diario-page .resumen-cifra em {
    margin-top: 6px;
    font-size: 11px;
}

.resumen-diario-page .resumen-seccion-titulo-diario {
    align-items: flex-start;
    margin-top: 30px;
    margin-bottom: 10px;
}

.resumen-diario-page .resumen-seccion-titulo-diario h2 {
    font-size: 21px;
}

.resumen-diario-page .resumen-seccion-titulo-diario p {
    margin-top: 4px;
    font-size: 13px;
}

.resumen-diario-page .resumen-variable-titulo {
    padding: 12px 16px 11px;
}

.resumen-variable-heading {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.resumen-variable-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 9px;
    background: #edf4f7;
    color: #658497;
}

.resumen-variable-icono .resumen-icono {
    width: 20px;
    height: 20px;
}

.resumen-variable-temperatura .resumen-variable-icono { background: #fbeded; color: #bd5050; }
.resumen-variable-presion .resumen-variable-icono { background: #edf1f3; color: #667d8c; }
.resumen-variable-viento .resumen-variable-icono { background: #eaf4f1; color: #548e7d; }
.resumen-variable-lluvia .resumen-variable-icono { background: #e9f3fa; color: #438dbe; }
.resumen-variable-solar .resumen-variable-icono { background: #fbf4df; color: #b78a20; }

.resumen-diario-page .resumen-variable-titulo h2 {
    font-size: 17px;
}

.resumen-diario-page .resumen-variable-titulo p {
    margin-top: 4px;
    font-size: 12px;
}

.resumen-diario-page .resumen-variable-leyenda {
    font-size: 11px;
}

.resumen-diario-page .resumen-variable-cuerpo {
    grid-template-columns: minmax(290px, .86fr) minmax(0, 2.14fr);
    min-height: 292px;
}

.resumen-diario-page .resumen-variable-datos {
    padding: 7px 17px 10px;
}

.resumen-diario-page .resumen-variable-datos .resumen-fila {
    padding: 9px 0;
}

.resumen-diario-page .resumen-variable-datos .resumen-fila-etiqueta {
    font-size: 13px;
}

.resumen-diario-page .resumen-variable-datos .resumen-fila-valor {
    font-size: 14px;
}

.resumen-diario-page .resumen-variable-datos .resumen-fila-valor small {
    margin-top: 3px;
    font-size: 11px;
}

.resumen-diario-page .resumen-variable-grafico {
    min-height: 292px;
    padding: 5px 7px 0;
}

.resumen-diario-page .resumen-grafico {
    min-height: 278px;
}

.resumen-diario-page .resumen-grafico-carga {
    font-size: 13px;
}

.resumen-diario-page .apexcharts-tooltip,
.resumen-diario-page .apexcharts-tooltip-title {
    font-size: 12px !important;
}

.resumen-diario-page .resumen-comparacion-tabla th,
.resumen-diario-page .resumen-comparacion-tabla td {
    padding: 11px 14px;
    font-size: 13px;
}

.resumen-diario-page .resumen-comparacion-tabla thead th {
    font-size: 11px;
}

.resumen-diario-page .resumen-comparacion-tabla .resumen-delta {
    min-width: 76px;
    padding: 4px 8px;
    font-size: 11px;
}

.resumen-diario-page .resumen-comparacion-nota {
    margin-top: 10px;
    font-size: 11px;
}

.resumen-diario-page .resumen-fuente {
    font-size: 11px;
}

@media (max-width: 1080px) {
    .resumen-barra-superior {
        display: block;
    }

    .resumen-consulta-fecha {
        justify-content: space-between;
        margin-top: 12px;
        padding: 12px 13px;
        border: 1px solid #dfe9ee;
        border-radius: 10px;
        background: #f9fbfc;
    }
}

@media (max-width: 820px) {
    .resumen-diario-page .resumen-variable-cuerpo {
        grid-template-columns: 1fr;
    }

    .resumen-diario-page .resumen-variable-grafico {
        min-height: 280px;
    }
}

@media (max-width: 680px) {
    .resumen-consulta-fecha {
        display: block;
    }

    .resumen-consulta-controles {
        margin-top: 9px;
        flex-wrap: wrap;
    }

    .resumen-consulta-fecha input[type="date"] {
        flex: 1 1 160px;
    }

    .resumen-consulta-fecha button,
    .resumen-ir-hoy {
        flex: 1 1 auto;
    }

    .resumen-diario-page .resumen-cifras-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 470px) {
    .resumen-diario-page .resumen-diario-fecha {
        font-size: 15px;
    }

    .resumen-dia-nav {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .resumen-consulta-fecha input[type="date"],
    .resumen-consulta-fecha button,
    .resumen-ir-hoy {
        min-height: 36px;
        font-size: 12px;
    }

    .resumen-diario-page .resumen-cifra strong {
        font-size: 26px;
    }
}

/* =========================================================
   RESUMEN DIARIO V4 · REGISTRO METEOROLÓGICO
   - Maquetación densa, legible y alineada con Condiciones actuales
   - Ámbito exclusivo .rd-v4: no afecta a portada / mensual / anual
========================================================= */

.rd-v4 {
    color: #334f60;
    font-size: 14px;
}

.rd-v4 .rd-cabecera {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 3px 0 16px;
    border-bottom: 1px solid #e0e9ee;
}

.rd-v4 .rd-cabecera h1 {
    margin: 0;
    color: #24465d;
    font-size: clamp(27px, 2.7vw, 37px);
    line-height: 1.05;
    letter-spacing: -.025em;
}

.rd-v4 .rd-fecha-principal {
    margin: 7px 0 0;
    color: #657c89;
    font-size: 16px;
    font-weight: 600;
}

.rd-v4 .rd-estado {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex: 0 0 auto;
    color: #748995;
}

.rd-v4 .rd-estado-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid #d7e5ec;
    border-radius: 8px;
    background: #f7fbfd;
    color: #45687d;
    font-size: 12px;
    font-weight: 700;
}

.rd-v4 .rd-estado-chip .resumen-icono {
    width: 16px;
    height: 16px;
}

.rd-v4 .rd-estado small {
    font-size: 12px;
}

.rd-v4 .rd-herramientas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 12px 0 16px;
}

.rd-v4 .rd-tabs {
    margin: 0;
    flex: 0 0 auto;
}

.rd-v4 .rd-tabs a {
    min-height: 33px;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
}

.rd-v4 .rd-calendario {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.rd-v4 .rd-calendario-etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 3px;
    color: #5f7887;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.rd-v4 .rd-calendario-etiqueta .resumen-icono {
    width: 17px;
    height: 17px;
    color: #6a9ec0;
}

.rd-v4 .rd-calendario input[type="date"] {
    height: 34px;
    min-width: 145px;
    padding: 5px 9px;
    border: 1px solid #d2e0e7;
    border-radius: 7px;
    background: #fff;
    color: #35576b;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
}

.rd-v4 .rd-calendario button,
.rd-v4 .rd-hoy,
.rd-v4 .rd-dia-nav {
    height: 34px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 700;
}

.rd-v4 .rd-calendario button {
    padding: 0 12px;
    border: 1px solid #4c98d6;
    background: #4c98d6;
    color: #fff;
    cursor: pointer;
}

.rd-v4 .rd-hoy {
    display: inline-flex;
    align-items: center;
    padding: 0 11px;
    border: 1px solid #d2e0e7;
    background: #fff;
    color: #567384;
    text-decoration: none;
}

.rd-v4 .rd-dia-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    flex: 0 0 34px;
    border: 1px solid #d2e0e7;
    background: #fff;
    color: #58778a;
    text-decoration: none;
}

.rd-v4 .rd-dia-nav .resumen-icono {
    width: 16px;
    height: 16px;
}

.rd-v4 .rd-dia-nav-off {
    opacity: .35;
}

/* Banda compacta de cifras */
.rd-v4 .rd-cifras {
    overflow: hidden;
    margin-bottom: 18px;
    border: 1px solid #dce6ec;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(32,75,105,.05);
}

.rd-v4 .rd-cifras > header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 9px 13px;
    border-bottom: 1px solid #e7eef2;
    background: #f7fafc;
}

.rd-v4 .rd-cifras > header h2 {
    display: inline;
    margin: 0 8px 0 0;
    color: #24465d;
    font-size: 15px;
}

.rd-v4 .rd-cifras > header span {
    color: #8496a0;
    font-size: 11px;
}

.rd-v4 .rd-cifras-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.rd-v4 .rd-cifra {
    display: grid;
    grid-template-columns: 31px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    min-width: 0;
    padding: 10px 9px;
    border-right: 1px solid #e7eef2;
}

.rd-v4 .rd-cifra:last-child { border-right: 0; }

.rd-v4 .rd-cifra-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    border-radius: 8px;
    background: #eef4f7;
    color: #607e91;
}

.rd-v4 .rd-cifra-icono .resumen-icono {
    width: 18px;
    height: 18px;
}

.rd-v4 .rd-cifra small,
.rd-v4 .rd-cifra strong,
.rd-v4 .rd-cifra span {
    display: block;
}

.rd-v4 .rd-cifra small {
    overflow: hidden;
    color: #6d838f;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.rd-v4 .rd-cifra strong {
    margin-top: 2px;
    color: #25465a;
    font-size: 22px;
    line-height: 1.05;
    letter-spacing: -.025em;
    white-space: nowrap;
}

.rd-v4 .rd-cifra strong em {
    margin-left: 3px;
    color: #607987;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0;
}

.rd-v4 .rd-cifra div > span {
    margin-top: 3px;
    overflow: hidden;
    color: #8b9aa3;
    font-size: 10px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rd-v4 .rd-cifra-max .rd-cifra-icono { background:#fff0f0; color:#d85858; }
.rd-v4 .rd-cifra-min .rd-cifra-icono { background:#edf5fb; color:#4d8dbc; }
.rd-v4 .rd-cifra-media .rd-cifra-icono { background:#f4f1f1; color:#956f70; }
.rd-v4 .rd-cifra-lluvia .rd-cifra-icono { background:#f2edfb; color:#7355b4; }
.rd-v4 .rd-cifra-viento .rd-cifra-icono { background:#edfafa; color:#229c97; }
.rd-v4 .rd-cifra-sol .rd-cifra-icono { background:#fff8e6; color:#d4a01f; }
.rd-v4 .rd-cifra-uv .rd-cifra-icono { background:#fff4df; color:#d18424; }

.rd-v4 .rd-titulo-bloque {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin: 16px 0 9px;
}

.rd-v4 .rd-titulo-bloque h2 {
    margin: 0;
    color: #24465d;
    font-size: 20px;
}

.rd-v4 .rd-titulo-bloque p {
    margin: 3px 0 0;
    color: #81919a;
    font-size: 12px;
}

/* Réplica local del lenguaje visual de las tablas de la portada */
.rd-v4 .tarjeta-tabla {
    overflow: hidden;
    min-width: 0;
    padding-top: 0;
    border: 1px solid #dce6ec;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(32,75,105,.05);
}

.rd-v4 .tarjeta-tabla > header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

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

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

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

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

.rd-v4 .tarjeta-tabla td {
    padding: 7px 11px;
    border-top: 1px solid #e5edf2;
    background: transparent;
    line-height: 1.35;
}

.rd-v4 .tarjeta-tabla tr:first-child td { border-top: 0; }
.rd-v4 .tarjeta-tabla td:first-child { width: 49%; color: #4f6572; }
.rd-v4 .tarjeta-tabla td:last-child { color: #203e52; font-weight: 700; text-align: right; }

.rd-v4 .dato-secundario-tabla {
    display: block;
    margin-top: 1px;
    color: #8698a2;
    font-size: 10px;
    font-weight: 400;
    white-space: nowrap;
}

.rd-v4 .dato-rojo { color:#df3937 !important; }
.rd-v4 .dato-azul { color:#2e80c4 !important; }
.rd-v4 .dato-verde { color:#38905a !important; }

.rd-v4 .tabla-roja { border-color:rgba(210,82,82,.24); box-shadow:0 5px 16px rgba(198,63,63,.10); }
.rd-v4 .tabla-roja > header { background:#fff1f1; box-shadow:inset 0 -1px 0 rgba(204,77,77,.18); }
.rd-v4 .tabla-roja .icono-tabla-svg { color:#d45c5c; }
.rd-v4 .tabla-roja table { background:linear-gradient(90deg,rgba(255,241,241,.62),rgba(255,250,250,.34)); }

.rd-v4 .tabla-gris { border-color:rgba(87,119,138,.24); box-shadow:0 5px 16px rgba(76,110,132,.09); }
.rd-v4 .tabla-gris > header { background:#f0f4f6; box-shadow:inset 0 -1px 0 rgba(83,112,132,.18); }
.rd-v4 .tabla-gris .icono-tabla-svg { color:#5c7b8e; }
.rd-v4 .tabla-gris table { background:linear-gradient(90deg,rgba(240,245,248,.68),rgba(250,252,253,.38)); }

.rd-v4 .tabla-verdeagua { border-color:rgba(34,165,157,.24); box-shadow:0 5px 16px rgba(28,155,147,.09); }
.rd-v4 .tabla-verdeagua > header { background:#edfafa; box-shadow:inset 0 -1px 0 rgba(32,158,152,.18); }
.rd-v4 .tabla-verdeagua .icono-tabla-svg { color:#229c97; }
.rd-v4 .tabla-verdeagua table { background:linear-gradient(90deg,rgba(237,251,250,.68),rgba(249,254,254,.38)); }

.rd-v4 .tabla-azul { border-color:rgba(116,86,184,.27); box-shadow:0 5px 17px rgba(103,73,176,.11); }
.rd-v4 .tabla-azul > header { background:#f3effc; box-shadow:inset 0 -1px 0 rgba(105,78,174,.19); }
.rd-v4 .tabla-azul .icono-tabla-svg { color:#7355b4; }
.rd-v4 .tabla-azul table { background:linear-gradient(90deg,rgba(245,240,255,.72),rgba(251,249,255,.42)); }

.rd-v4 .tabla-amarilla { border-color:rgba(222,160,31,.27); box-shadow:0 5px 17px rgba(214,148,20,.11); }
.rd-v4 .tabla-amarilla > header { background:#fff8e6; box-shadow:inset 0 -1px 0 rgba(211,149,22,.20); }
.rd-v4 .tabla-amarilla .icono-tabla-svg { color:#d4a01f; }
.rd-v4 .tabla-amarilla table { background:linear-gradient(90deg,rgba(255,248,225,.78),rgba(255,253,244,.44)); }

/* Gráficas: mismo lenguaje que portada */
.rd-v4 .grafico-card {
    position: relative;
    min-width: 0;
    margin: 0;
    padding: 10px 12px 7px;
    border: 1px solid #dce6ec;
    border-radius: 10px;
    background: #fff;
}

.rd-v4 .grafico-card-cabecera {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 31px;
    margin: 0 0 3px;
}

.rd-v4 .selector-series {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

.rd-v4 .boton-serie {
    appearance: none;
    padding: 6px 9px;
    border: 1px solid #d8e3e9;
    border-radius: 7px;
    background:#fff;
    color:#667b87;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.rd-v4 .boton-serie:hover { background:#f5f8fa; }
.rd-v4 .boton-serie.activo { color:#21445b; background:#edf5fa; border-color:#a8c8dc; }
.rd-v4 .rd-grafico-card[data-chart="temperatura"] .boton-serie[data-serie="temperatura"].activo { color:#a52e2e; border-color:#dda2a2; background:#fff0f0; }
.rd-v4 .rd-grafico-card[data-chart="temperatura"] .boton-serie[data-serie="sensacion"].activo { color:#865258; border-color:#d8b6b9; background:#f9f2f3; }
.rd-v4 .rd-grafico-card[data-chart="temperatura"] .boton-serie[data-serie="humedad"].activo { color:#26694e; border-color:#9fc8b7; background:#eff8f4; }
.rd-v4 .rd-grafico-card[data-chart="viento"] .boton-serie[data-serie="viento"].activo { color:#a72d2d; border-color:#dda2a2; background:#fff0f0; }
.rd-v4 .rd-grafico-card[data-chart="viento"] .boton-serie[data-serie="racha"].activo { color:#a34270; border-color:#d9a9bf; background:#fff0f6; }
.rd-v4 .rd-grafico-card[data-chart="viento"] .boton-serie[data-serie="direccion"].activo { color:#386984; border-color:#a9c7d7; background:#f0f7fa; }
.rd-v4 .rd-grafico-card[data-chart="lluvia"] .boton-serie[data-serie="lluvia"].activo { color:#3f719f; border-color:#a9c1d8; background:#eff6fb; }
.rd-v4 .rd-grafico-card[data-chart="lluvia"] .boton-serie[data-serie="intensidad"].activo { color:#694887; border-color:#c2add4; background:#f6f1fa; }
.rd-v4 .rd-grafico-card[data-chart="solar"] .boton-serie[data-serie="radiacion"].activo { color:#9c7418; border-color:#dcc47f; background:#fff9e8; }
.rd-v4 .rd-grafico-card[data-chart="solar"] .boton-serie[data-serie="uv"].activo { color:#955b23; border-color:#e0ba91; background:#fff5ea; }

.rd-v4 .rd-bloque-principal {
    display: grid;
    grid-template-columns: minmax(420px, 1.23fr) minmax(0, 1.77fr);
    gap: 12px;
    align-items: stretch;
    margin-bottom: 13px;
}

.rd-v4 .rd-bloque-principal > * { min-width: 0; }
.rd-v4 .rd-tabla-temperatura { height: 100%; }
.rd-v4 .rd-grafico-principal { min-height: 264px; }

.rd-v4 .rd-mosaico {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
    align-items: start;
}

.rd-v4 .rd-modulo {
    display: grid;
    gap: 9px;
    min-width: 0;
}

.rd-v4 .rd-grafico-card-mini {
    min-height: 239px;
}

.rd-v4 .rd-grafico-card-mini .rd-grafico {
    min-height: 206px;
}

.rd-v4 .rd-grafico-card-mini:has(.grafico-card-cabecera) .rd-grafico {
    min-height: 174px;
}

.rd-v4 .grafico-cargando {
    position: absolute;
    inset: 45% 10px auto;
    z-index: 2;
    color:#8497a2;
    font-size: 12px;
    text-align:center;
    pointer-events:none;
}

.rd-v4 .grafico-cargando.error {
    color:#738893;
}

.rd-v4 .rd-comparacion {
    overflow: hidden;
    margin-top: 16px;
    border: 1px solid #dce6ec;
    border-radius: 11px;
    background:#fff;
    box-shadow:0 3px 10px rgba(32,75,105,.05);
}

.rd-v4 .rd-comparacion-cabecera {
    padding: 10px 13px;
    border-bottom:1px solid #e5edf2;
    background:#f7fafc;
}

.rd-v4 .rd-comparacion-cabecera h2 {
    margin:0;
    color:#24465d;
    font-size:15px;
}

.rd-v4 .rd-comparacion-cabecera p {
    margin:3px 0 0;
    color:#81919a;
    font-size:11px;
}

.rd-v4 .resumen-comparacion-tabla {
    width:100%;
    border-collapse:collapse;
    font-size:13px;
}

.rd-v4 .resumen-comparacion-tabla th,
.rd-v4 .resumen-comparacion-tabla td {
    padding:8px 12px;
    border-top:1px solid #e7eef2;
    text-align:right;
}

.rd-v4 .resumen-comparacion-tabla thead th {
    border-top:0;
    background:#fbfcfd;
    color:#647d8b;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.025em;
}

.rd-v4 .resumen-comparacion-tabla th:first-child,
.rd-v4 .resumen-comparacion-tabla td:first-child {
    text-align:left;
}

.rd-v4 .resumen-comparacion-tabla tbody th {
    color:#4f6572;
    font-weight:600;
}

.rd-v4 .resumen-comparacion-tabla tbody td {
    color:#203e52;
    font-weight:700;
}

.rd-v4 .rd-nota {
    margin:0;
    padding:7px 12px;
    border-top:1px solid #e7eef2;
    background:#fafcfd;
    color:#7d909a;
    font-size:11px;
}

.rd-v4 .rd-fuente {
    display:flex;
    justify-content:space-between;
    gap:15px;
    margin-top:13px;
    padding-top:10px;
    border-top:1px solid #e4ecef;
    font-size:11px;
}

/* ApexCharts: tipografía/guías igual de discretas que portada */
.rd-v4 .apexcharts-text,
.rd-v4 .apexcharts-xaxis-label,
.rd-v4 .apexcharts-yaxis-label {
    font-family: "Segoe UI", Arial, sans-serif !important;
}

.rd-v4 .apexcharts-tooltip,
.rd-v4 .apexcharts-tooltip-title {
    font-size:12px !important;
}

@media (max-width: 1180px) {
    .rd-v4 .rd-cifras-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
    .rd-v4 .rd-cifra:nth-child(4) { border-right:0; }
    .rd-v4 .rd-cifra:nth-child(n+5) { border-top:1px solid #e7eef2; }
    .rd-v4 .rd-bloque-principal { grid-template-columns:minmax(360px,1.12fr) minmax(0,1.48fr); }
}

@media (max-width: 900px) {
    .rd-v4 .rd-herramientas { align-items:flex-start; flex-direction:column; }
    .rd-v4 .rd-calendario { width:100%; flex-wrap:wrap; }
    .rd-v4 .rd-bloque-principal { grid-template-columns:1fr; }
    .rd-v4 .rd-mosaico { grid-template-columns:1fr; }
    .rd-v4 .rd-grafico-principal { min-height:245px; }
}

@media (max-width: 680px) {
    .rd-v4 .rd-cabecera { align-items:flex-start; flex-direction:column; gap:10px; }
    .rd-v4 .rd-estado { align-items:flex-start; }
    .rd-v4 .rd-cifras-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .rd-v4 .rd-cifra { border-top:1px solid #e7eef2; }
    .rd-v4 .rd-cifra:nth-child(-n+2) { border-top:0; }
    .rd-v4 .rd-cifra:nth-child(2n) { border-right:0; }
    .rd-v4 .rd-cifra strong { font-size:24px; }
    .rd-v4 .rd-calendario-etiqueta { flex-basis:100%; }
    .rd-v4 .rd-calendario input[type="date"] { flex:1 1 150px; }
    .rd-v4 .rd-comparacion-scroll { overflow-x:auto; }
    .rd-v4 .resumen-comparacion-tabla { min-width:610px; }
    .rd-v4 .rd-fuente { flex-direction:column; }
}

.rd-v4 .rd-sin-detalle {
    display:flex;
align-items:center;
    justify-content:center;
    min-height:170px;
    padding:18px;
    color:#7d919c;
    font-size:12px;
    text-align:center;
}
.rd-v4 .rd-grafico-principal .rd-sin-detalle { min-height:250px; }

/* =========================================================
   RESUMEN DIARIO V5 · ORDEN, HORAS EN LÍNEA Y AUTOTEXTO
========================================================= */

.rd-v4 .rd-cifra strong .rd-hora-inline {
    display: inline;
    margin-left: 6px;
    color: #8798a2;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0;
    white-space: nowrap;
}

.rd-v4 .dato-secundario-tabla {
    display: inline;
    margin: 0 0 0 4px;
    color: #81939d;
    font-size: 10px;
    font-weight: 500;
    white-space: nowrap;
}

.rd-v4 .tarjeta-tabla td {
    vertical-align: middle;
}

.rd-v4 .tarjeta-tabla td:first-child {
    width: 46%;
}

.rd-v4 .rd-fila-separador td {
    border-top: 2px solid rgba(74, 105, 123, .13);
}

.rd-v4 .rd-autotexto {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 11px;
    align-items: start;
    margin: 0 0 16px;
    padding: 11px 13px;
    border: 1px solid #d9e6ec;
    border-left: 4px solid #6fa1bf;
    border-radius: 10px;
    background: linear-gradient(90deg, #f6fafc 0%, #fbfdfe 100%);
    box-shadow: 0 2px 8px rgba(32,75,105,.04);
}

.rd-v4 .rd-autotexto-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #e7f1f6;
    color: #5f8eaa;
}

.rd-v4 .rd-autotexto-icono .resumen-icono {
    width: 18px;
    height: 18px;
}

.rd-v4 .rd-autotexto h2 {
    margin: 0 0 3px;
    color: #284b61;
    font-size: 14px;
    line-height: 1.25;
}

.rd-v4 .rd-autotexto p {
    margin: 0;
    color: #526d7c;
    font-size: 13px;
    line-height: 1.55;
}

.rd-v4 .rd-fuente {
    justify-content: flex-start;
}

@media (max-width: 680px) {
    .rd-v4 .rd-cifra strong .rd-hora-inline {
        display: block;
        margin: 3px 0 0;
    }

    .rd-v4 .dato-secundario-tabla {
        white-space: normal;
    }
}


/* =========================================================
   RESUMEN DIARIO V6 · CABECERAS COMO CONDICIONES ACTUALES
   y máximo/mínimo térmico destacados de forma consistente.
========================================================= */

/* Mismos sombreados aprobados en las tablas de Condiciones actuales. */
.rd-v4 .tarjeta-tabla.tabla-roja > header {
    background: linear-gradient(180deg, #f7dddd 0%, #fbeaea 100%) !important;
    border-bottom: 1px solid #e9c5c5 !important;
    box-shadow: none;
}

.rd-v4 .tarjeta-tabla.tabla-gris > header {
    background: linear-gradient(180deg, #e3e8ec 0%, #f0f3f5 100%) !important;
    border-bottom: 1px solid #cfd8de !important;
    box-shadow: none;
}

/* En Condiciones actuales, Viento usa la familia rojo teja. */
.rd-v4 .tarjeta-tabla.tabla-verdeagua > header {
    background: linear-gradient(180deg, #f3d8d5 0%, #fae9e6 100%) !important;
    border-bottom: 1px solid #e4bfbb !important;
    box-shadow: none;
}

.rd-v4 .tarjeta-tabla.tabla-azul > header {
    background: linear-gradient(180deg, #dbeaf6 0%, #edf5fb 100%) !important;
    border-bottom: 1px solid #c3dced !important;
    box-shadow: none;
}

.rd-v4 .tarjeta-tabla.tabla-amarilla > header {
    background: linear-gradient(180deg, #f8e9bf 0%, #fff5da 100%) !important;
    border-bottom: 1px solid #ead79f !important;
    box-shadow: none;
}

/* Igual que en la portada: fondo cromático y título/icono oscuro. */
.rd-v4 .tarjeta-tabla > header h2 {
    color: #2f4655 !important;
}

/* La comparación usa un encabezado gris azulado de la misma familia visual. */
.rd-v4 .rd-comparacion-cabecera {
    background: linear-gradient(180deg, #e8edf0 0%, #f3f6f8 100%);
    border-bottom-color: #d3dce2;
}

/* Máxima roja / mínima azul: cifras principales. */
.rd-v4 .rd-temp-max-valor,
.rd-v4 .rd-temp-min-valor {
    display: inline !important;
    font-weight: 800 !important;
}

.rd-v4 .rd-temp-max-valor,
.rd-v4 .rd-temp-max-valor em,
.rd-v4 .rd-temp-max-texto {
    color: #d83b39 !important;
    font-weight: 800 !important;
}

.rd-v4 .rd-temp-min-valor,
.rd-v4 .rd-temp-min-valor em,
.rd-v4 .rd-temp-min-texto {
    color: #2d7fbe !important;
    font-weight: 800 !important;
}

/* Tablas y tabla comparativa: el valor térmico conserva el mismo código visual. */
.rd-v4 .dato-rojo {
    color: #d83b39 !important;
    font-weight: 800 !important;
}

.rd-v4 .dato-azul {
    color: #2d7fbe !important;
    font-weight: 800 !important;
}

/* Las horas asociadas a extremos siguen siendo secundarias, no rojas/azules. */
.rd-v4 .dato-rojo .dato-secundario-tabla,
.rd-v4 .dato-azul .dato-secundario-tabla {
    color: #81939d !important;
    font-weight: 500 !important;
}

/* =========================================================
   RESUMEN DIARIO V7 · COMPARATIVA + TENDENCIA DAYFILE
========================================================= */
.rd-v4 .rd-comparacion-scroll {
    overflow-x: auto;
}

.rd-v4 .resumen-comparacion-tabla {
    min-width: 860px;
}

.rd-v4 .resumen-comparacion-tabla th:nth-child(2),
.rd-v4 .resumen-comparacion-tabla th:nth-child(3),
.rd-v4 .resumen-comparacion-tabla td:nth-child(2),
.rd-v4 .resumen-comparacion-tabla td:nth-child(3) {
    white-space: nowrap;
}

.rd-v4 .resumen-comparacion-tabla th:nth-child(4),
.rd-v4 .resumen-comparacion-tabla td:nth-child(4) {
    width: 23%;
}

.rd-v4 .resumen-comparacion-tabla th:nth-child(5),
.rd-v4 .resumen-comparacion-tabla td:nth-child(5) {
    width: 24%;
}

.rd-v4 .rd-diferencia-wrap,
.rd-v4 .rd-tendencia-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    flex-wrap: wrap;
}

.rd-v4 .rd-diferencia-etiqueta,
.rd-v4 .rd-tendencia-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 22px;
    padding: 2px 8px;
    border: 1px solid #d8e2e8;
    border-radius: 999px;
    background: #f4f7f9;
    color: #536b79;
    font-size: 10.5px;
    line-height: 1.15;
    font-weight: 700;
    white-space: nowrap;
}

.rd-v4 .rd-diferencia-etiqueta.sube,
.rd-v4 .rd-tendencia-chip.sube {
    border-color: #ead3a6;
    background: #fff5e4;
    color: #9a651b;
}

.rd-v4 .rd-diferencia-etiqueta.baja,
.rd-v4 .rd-tendencia-chip.baja {
    border-color: #c8ddea;
    background: #edf6fb;
    color: #3d7395;
}

.rd-v4 .rd-diferencia-etiqueta.neutro,
.rd-v4 .rd-tendencia-chip.estable,
.rd-v4 .rd-tendencia-chip.sin-datos {
    border-color: #d8e2e8;
    background: #f4f7f9;
    color: #687c87;
}

.rd-v4 .rd-tendencia-chip b {
    font-size: 13px;
    line-height: 1;
}

.rd-v4 .rd-tendencia-wrap small {
    color: #738792;
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
}

.rd-v4 .rd-tendencia-nota {
    margin: 0;
    padding: 7px 12px;
    border-top: 1px solid #e7eef2;
    background: #fcfdfd;
    color: #748995;
    font-size: 10.5px;
    line-height: 1.45;
}

.rd-v4 .rd-tendencia-nota strong {
    color: #536b79;
}

@media (max-width: 760px) {
    .rd-v4 .resumen-comparacion-tabla {
        min-width: 820px;
    }
}


/* =========================================================
   RESUMEN DIARIO V8 · ENCABEZADOS SOMBREADOS Y AJUSTES FINALES
========================================================= */

/* Cabeceras generales: más visibles, como en Condiciones actuales. */
.rd-v4 .rd-cifras > header {
    background: linear-gradient(180deg, #e7eef2 0%, #f2f6f8 100%) !important;
    border-bottom: 1px solid #d2dde3 !important;
}

.rd-v4 .rd-titulo-bloque {
    margin: 16px 0 9px;
    padding: 9px 12px;
    border: 1px solid #d7e1e6;
    border-radius: 9px;
    background: linear-gradient(180deg, #edf2f5 0%, #f7f9fa 100%);
}

.rd-v4 .rd-comparacion-cabecera {
    background: linear-gradient(180deg, #e2e9ed 0%, #f0f4f6 100%) !important;
    border-bottom: 1px solid #ccd8df !important;
}

.rd-v4 .resumen-comparacion-tabla thead th {
    background: #edf2f5 !important;
    border-top: 0 !important;
    border-bottom: 1px solid #d4dfe5 !important;
    color: #4d6878 !important;
    font-weight: 800 !important;
}

/* Sombreados cromáticos de las tarjetas, idéntica familia visual a la portada. */
.rd-v4 .tarjeta-tabla.tabla-roja > header {
    background: linear-gradient(180deg, #f4d6d6 0%, #fae8e8 100%) !important;
    border-bottom: 1px solid #e6bebe !important;
}

.rd-v4 .tarjeta-tabla.tabla-gris > header {
    background: linear-gradient(180deg, #dfe6ea 0%, #eef2f4 100%) !important;
    border-bottom: 1px solid #cbd6dc !important;
}

.rd-v4 .tarjeta-tabla.tabla-verdeagua > header {
    background: linear-gradient(180deg, #efd1ce 0%, #f8e5e2 100%) !important;
    border-bottom: 1px solid #dfb8b4 !important;
}

.rd-v4 .tarjeta-tabla.tabla-azul > header {
    background: linear-gradient(180deg, #d6e7f3 0%, #eaf3f9 100%) !important;
    border-bottom: 1px solid #bdd6e7 !important;
}

.rd-v4 .tarjeta-tabla.tabla-amarilla > header {
    background: linear-gradient(180deg, #f5e3b4 0%, #fff2d1 100%) !important;
    border-bottom: 1px solid #e5cf91 !important;
}

.rd-v4 .tarjeta-tabla > header h2 {
    color: #2f4655 !important;
}

/* =========================================================
   RESUMEN DIARIO V9 · PRECIPITACIÓN, COMPARATIVA Y SELECTORES
========================================================= */

/* La tabla comparativa aprovecha el ancho disponible sin reservar en exceso
   la primera columna. Las dos columnas de análisis tienen espacio real para
   valor + etiqueta y pueden envolver sólo cuando sea necesario. */
.rd-v4 .resumen-comparacion-tabla {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
}

.rd-v4 .resumen-comparacion-tabla col.rd-col-variable { width: 19%; }
.rd-v4 .resumen-comparacion-tabla col.rd-col-dia { width: 13%; }
.rd-v4 .resumen-comparacion-tabla col.rd-col-diferencia { width: 25%; }
.rd-v4 .resumen-comparacion-tabla col.rd-col-tendencia { width: 30%; }

.rd-v4 .resumen-comparacion-tabla th,
.rd-v4 .resumen-comparacion-tabla td {
    padding: 8px 9px !important;
    vertical-align: middle;
    overflow-wrap: normal;
    word-break: normal;
}

.rd-v4 .resumen-comparacion-tabla th:first-child,
.rd-v4 .resumen-comparacion-tabla td:first-child {
    width: auto !important;
    text-align: left !important;
    white-space: normal !important;
}

.rd-v4 .resumen-comparacion-tabla th:nth-child(2),
.rd-v4 .resumen-comparacion-tabla th:nth-child(3),
.rd-v4 .resumen-comparacion-tabla td:nth-child(2),
.rd-v4 .resumen-comparacion-tabla td:nth-child(3) {
    width: auto !important;
    white-space: nowrap;
    text-align: right;
}

.rd-v4 .resumen-comparacion-tabla th:nth-child(4),
.rd-v4 .resumen-comparacion-tabla th:nth-child(5),
.rd-v4 .resumen-comparacion-tabla td:nth-child(4),
.rd-v4 .resumen-comparacion-tabla td:nth-child(5) {
    width: auto !important;
    text-align: left;
}

.rd-v4 .rd-diferencia-wrap,
.rd-v4 .rd-tendencia-wrap {
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
}

/* Primero se lee el valor; después, la interpretación. */
.rd-v4 .resumen-comparacion-tabla .resumen-delta,
.rd-v4 .rd-tendencia-valor {
    flex: 0 0 auto;
    min-width: 0 !important;
    margin: 0 !important;
    color: #29485b;
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.rd-v4 .rd-diferencia-etiqueta,
.rd-v4 .rd-tendencia-chip {
    flex: 0 1 auto;
    max-width: 100%;
    white-space: nowrap;
}

/* SELECTORES DE SERIES: mismos sombreados usados en Condiciones actuales. */
.rd-v4 .selector-series .boton-serie {
    background: #eef1f3 !important;
    border-color: #d3dade !important;
    color: #6f7b82 !important;
    box-shadow: none !important;
}

.rd-v4 .selector-series .boton-serie:not(.activo) {
    background: #f0f2f3 !important;
    border-color: #d7dcdf !important;
    color: #8a959b !important;
    opacity: .88;
}

.rd-v4 .selector-series .boton-serie[data-serie="temperatura"].activo {
    background: #f3d5d5 !important;
    border-color: #cf3f3f !important;
    color: #8a2929 !important;
}

.rd-v4 .selector-series .boton-serie[data-serie="sensacion"].activo {
    background: #eee3e4 !important;
    border-color: #aa7f83 !important;
    color: #765b5e !important;
}

.rd-v4 .selector-series .boton-serie[data-serie="humedad"].activo {
    background: #dcebe3 !important;
    border-color: #2f6f55 !important;
    color: #245440 !important;
}

.rd-v4 .selector-series .boton-serie[data-serie="viento"].activo {
    background: #f2d7d7 !important;
    border-color: #c93232 !important;
    color: #8d2424 !important;
}

.rd-v4 .selector-series .boton-serie[data-serie="racha"].activo {
    background: #f4e1e9 !important;
    border-color: #d82370 !important;
    color: #9b2858 !important;
}

.rd-v4 .selector-series .boton-serie[data-serie="direccion"].activo {
    background: #e9edf1 !important;
    border-color: #7b8d9c !important;
    color: #4c5f6e !important;
}

.rd-v4 .selector-series .boton-serie[data-serie="lluvia"].activo {
    background: #dfeaf4 !important;
    border-color: #5b8fc0 !important;
    color: #3d688d !important;
}

.rd-v4 .selector-series .boton-serie[data-serie="radiacion"].activo {
    background: #f7e9c8 !important;
    border-color: #d49a28 !important;
    color: #78571a !important;
}

.rd-v4 .selector-series .boton-serie[data-serie="uv"].activo {
    background: #ece3f4 !important;
    border-color: #8660a8 !important;
    color: #604278 !important;
}

.rd-v4 .selector-series .boton-serie:hover {
    transform: none !important;
}

@media (max-width: 760px) {
    .rd-v4 .resumen-comparacion-tabla {
        min-width: 760px !important;
    }
}


/* =========================================================
   RESUMEN DIARIO V10 · AJUSTE TABLA COMPARATIVA
========================================================= */

/* Más compacta a la izquierda: Jornada anterior queda próxima a la jornada
   consultada y se reserva el espacio principal para diferencia/tendencia. */
.rd-v4 .resumen-comparacion-tabla col.rd-col-variable { width: 16% !important; }
.rd-v4 .resumen-comparacion-tabla col.rd-col-dia { width: 12% !important; }
.rd-v4 .resumen-comparacion-tabla col.rd-col-diferencia { width: 30% !important; }
.rd-v4 .resumen-comparacion-tabla col.rd-col-tendencia { width: 30% !important; }

/* Todas las columnas salvo Variable se leen centradas. */
.rd-v4 .resumen-comparacion-tabla th:not(:first-child),
.rd-v4 .resumen-comparacion-tabla td:not(:first-child) {
    text-align: center !important;
}

.rd-v4 .rd-diferencia-wrap,
.rd-v4 .rd-tendencia-wrap {
    justify-content: center !important;
}

/* En tendencia reciente sólo aparece la etiqueta interpretativa. */
.rd-v4 .rd-tendencia-wrap {
    flex-wrap: nowrap !important;
}
.rd-v4 .rd-tendencia-chip {
    margin-inline: auto;
}

/* =========================================================
   RESUMEN DIARIO V11 · ETIQUETAS METEOROLÓGICAS SEMÁNTICAS
========================================================= */
/* Los chips ya no se colorean sólo por subida/bajada: el tono responde a
   la variable meteorológica para que la lectura sea inmediata. */
.rd-v4 .rd-diferencia-etiqueta.sem-calor,
.rd-v4 .rd-tendencia-chip.sem-calor {
    background: #f9e1e1 !important;
    border-color: #dda5a5 !important;
    color: #9b3030 !important;
}

.rd-v4 .rd-diferencia-etiqueta.sem-frio,
.rd-v4 .rd-tendencia-chip.sem-frio {
    background: #e5eff8 !important;
    border-color: #a7c6e0 !important;
    color: #326b9a !important;
}

.rd-v4 .rd-diferencia-etiqueta.sem-amplitud,
.rd-v4 .rd-tendencia-chip.sem-amplitud {
    background: #f8ead8 !important;
    border-color: #deb985 !important;
    color: #925f1d !important;
}

.rd-v4 .rd-diferencia-etiqueta.sem-lluvia,
.rd-v4 .rd-tendencia-chip.sem-lluvia {
    background: #e0edf7 !important;
    border-color: #9bbfdc !important;
    color: #356b95 !important;
}

.rd-v4 .rd-diferencia-etiqueta.sem-sequia,
.rd-v4 .rd-tendencia-chip.sem-sequia {
    background: #f8eed4 !important;
    border-color: #dbc17e !important;
    color: #81611e !important;
}

.rd-v4 .rd-diferencia-etiqueta.sem-viento-fuerte,
.rd-v4 .rd-tendencia-chip.sem-viento-fuerte {
    background: #f4e2df !important;
    border-color: #d8a6a0 !important;
    color: #8c443c !important;
}

.rd-v4 .rd-diferencia-etiqueta.sem-viento-calmo,
.rd-v4 .rd-tendencia-chip.sem-viento-calmo {
    background: #e6f0ec !important;
    border-color: #a8cabc !important;
    color: #3c6f5e !important;
}

.rd-v4 .rd-diferencia-etiqueta.sem-sol,
.rd-v4 .rd-tendencia-chip.sem-sol {
    background: #f8efc9 !important;
    border-color: #ddc664 !important;
    color: #796414 !important;
}

.rd-v4 .rd-diferencia-etiqueta.sem-poco-sol,
.rd-v4 .rd-tendencia-chip.sem-poco-sol {
    background: #edf0f2 !important;
    border-color: #c8d0d5 !important;
    color: #5f707a !important;
}

.rd-v4 .rd-diferencia-etiqueta.sem-neutro,
.rd-v4 .rd-tendencia-chip.sem-neutro {
    background: #f4f7f9 !important;
    border-color: #d8e2e8 !important;
    color: #687c87 !important;
}

/* =========================================================
   RESUMEN DIARIO V13 · MARCO DE MÓDULOS Y JORNADA EN CURSO
========================================================= */
/* Cada conjunto tabla + gráfico queda agrupado en un único módulo visual,
   siguiendo el marco discreto de los bloques de Condiciones actuales. */
.rd-v4 .rd-bloque-principal,
.rd-v4 .rd-modulo {
    border: 1px solid #d7e1e6;
    border-radius: 11px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(32, 75, 105, .045);
}

.rd-v4 .rd-bloque-principal {
    padding: 8px;
    gap: 8px;
}

.rd-v4 .rd-modulo {
    padding: 8px;
    gap: 8px;
}

/* La comparativa de hoy no se presenta como si los extremos ya fueran
   definitivos. Se mantiene sólo un aviso compacto hasta el cierre diario. */
.rd-v4 .rd-comparacion-espera-cuerpo {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 14px;
    background: #fff;
    color: #526b79;
}

.rd-v4 .rd-comparacion-espera-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border: 1px solid #cbd9e1;
    border-radius: 50%;
    background: #edf3f6;
    color: #496879;
}

.rd-v4 .rd-comparacion-espera-icono svg {
    width: 18px;
    height: 18px;
}

.rd-v4 .rd-comparacion-espera-cuerpo > div {
    display: grid;
    gap: 2px;
}

.rd-v4 .rd-comparacion-espera-cuerpo strong {
    color: #304d5d;
    font-size: 13px;
    line-height: 1.3;
}

.rd-v4 .rd-comparacion-espera-cuerpo span {
    color: #687e8a;
    font-size: 11.5px;
    line-height: 1.45;
}

@media (max-width: 760px) {
    .rd-v4 .rd-bloque-principal,
    .rd-v4 .rd-modulo {
        padding: 6px;
    }
}

/* =========================================================
   RESUMEN DIARIO V15 · ICONOS CROMÁTICOS DE CABECERAS
   Mismo criterio visual que Condiciones actuales:
   título oscuro + icono del color propio de cada variable.
========================================================= */
.rd-v4 .tarjeta-tabla.tabla-roja > header .icono-tabla,
.rd-v4 .tarjeta-tabla.tabla-roja > header .icono-tabla-svg {
    color: #d45c5c !important;
}

.rd-v4 .tarjeta-tabla.tabla-gris > header .icono-tabla,
.rd-v4 .tarjeta-tabla.tabla-gris > header .icono-tabla-svg {
    color: #5c7b8e !important;
}

.rd-v4 .tarjeta-tabla.tabla-verdeagua > header .icono-tabla,
.rd-v4 .tarjeta-tabla.tabla-verdeagua > header .icono-tabla-svg {
    color: #229c97 !important;
}

.rd-v4 .tarjeta-tabla.tabla-azul > header .icono-tabla,
.rd-v4 .tarjeta-tabla.tabla-azul > header .icono-tabla-svg {
    color: #7355b4 !important;
}

.rd-v4 .tarjeta-tabla.tabla-amarilla > header .icono-tabla,
.rd-v4 .tarjeta-tabla.tabla-amarilla > header .icono-tabla-svg {
    color: #d4a01f !important;
}

.rd-v4 .tarjeta-tabla.tabla-verde > header .icono-tabla,
.rd-v4 .tarjeta-tabla.tabla-verde > header .icono-tabla-svg {
    color: #3a965a !important;
}


/* =========================================================
   RESUMEN DIARIO V16 · CABECERAS IDÉNTICAS A CONDICIONES ACTUALES
   Se replican literalmente tamaño, trazo, color y sombreado de las
   cinco familias meteorológicas del panel principal.
========================================================= */
.rd-v4 .tarjeta-tabla > header {
    gap: 9px !important;
}

.rd-v4 .tarjeta-tabla > header .icono-tabla,
.rd-v4 .tarjeta-tabla > header .icono-tabla-svg {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    flex: 0 0 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important;
}

.rd-v4 .tarjeta-tabla > header .icono-tabla svg,
.rd-v4 .tarjeta-tabla > header .icono-tabla-svg svg {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    overflow: visible !important;
}

.rd-v4 .tarjeta-tabla > header h2 {
    color: #26343d !important;
}

/* Temperatura / humedad */
.rd-v4 .tarjeta-tabla.tabla-roja > header {
    background: linear-gradient(180deg, #f4dada 0%, #fbeaea 100%) !important;
    border-bottom-color: #e7c1c1 !important;
}
.rd-v4 .tarjeta-tabla.tabla-roja > header .icono-tabla,
.rd-v4 .tarjeta-tabla.tabla-roja > header .icono-tabla-svg {
    color: #96545a !important;
}

/* Presión */
.rd-v4 .tarjeta-tabla.tabla-gris > header {
    background: linear-gradient(180deg, #e3e8ec 0%, #f0f3f5 100%) !important;
    border-bottom-color: #cfd8de !important;
}
.rd-v4 .tarjeta-tabla.tabla-gris > header .icono-tabla,
.rd-v4 .tarjeta-tabla.tabla-gris > header .icono-tabla-svg {
    color: #586b78 !important;
}

/* Viento */
.rd-v4 .tarjeta-tabla.tabla-verdeagua > header {
    background: linear-gradient(180deg, #efd2da 0%, #f8e5ea 100%) !important;
    border-bottom-color: #dfb7c2 !important;
}
.rd-v4 .tarjeta-tabla.tabla-verdeagua > header .icono-tabla,
.rd-v4 .tarjeta-tabla.tabla-verdeagua > header .icono-tabla-svg {
    color: #945b55 !important;
}

/* Precipitaciones */
.rd-v4 .tarjeta-tabla.tabla-azul > header {
    background: linear-gradient(180deg, #dbeaf6 0%, #edf5fb 100%) !important;
    border-bottom-color: #c3dced !important;
}
.rd-v4 .tarjeta-tabla.tabla-azul > header .icono-tabla,
.rd-v4 .tarjeta-tabla.tabla-azul > header .icono-tabla-svg {
    color: #4d7592 !important;
}

/* Radiación / UV */
.rd-v4 .tarjeta-tabla.tabla-amarilla > header {
    background: linear-gradient(180deg, #f8e9bf 0%, #fff5da 100%) !important;
    border-bottom-color: #ead79f !important;
}
.rd-v4 .tarjeta-tabla.tabla-amarilla > header .icono-tabla,
.rd-v4 .tarjeta-tabla.tabla-amarilla > header .icono-tabla-svg {
    color: #987225 !important;
}


/* =========================================================
   RESUMEN DIARIO V18 · AJUSTES DE TABLAS
========================================================= */
.rd-v4 .rd-fila-vacia td {
    height: 35px;
    color: transparent !important;
}

.rd-v4 .rd-tabla-temperatura td:first-child {
    width: 55%;
}

/* =========================================================
   RESUMEN DIARIO V23 · PANEL SUPERIOR Y ACCESO A AYER
========================================================= */

/* Viento: rojo, igual que el criterio visual del panel principal. */
.rd-v4 .rd-cifra-viento .rd-cifra-icono {
    background: #fff0f0 !important;
    color: #d85858 !important;
}

/* UV: identificación propia en morado, mediante las letras UV. */
.rd-v4 .rd-cifra-uv .rd-cifra-icono {
    background: #f2ebfb !important;
    color: #7550a8 !important;
}

.rd-v4 .rd-cifra-icono-uv-texto {
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: -0.02em;
}

/* Botón Ayer: misma presencia que Ver día. */
.rd-v4 .rd-ayer-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 12px;
    border: 1px solid #4c98d6;
    border-radius: 7px;
    background: #4c98d6;
    color: #fff !important;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none !important;
    white-space: nowrap;
}

.rd-v4 .rd-ayer-boton:hover,
.rd-v4 .rd-ayer-boton:focus {
    background: #3d89c8;
    border-color: #3d89c8;
    color: #fff !important;
}


/* =========================================================
   RESUMEN DIARIO V24 · GRÁFICO COMBINADO PERSONALIZABLE
========================================================= */
.rd-v4 .rd-custom-modulo {
    margin: 14px 0 13px;
    overflow: hidden;
    border: 1px solid #d7e1e6;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(32, 75, 105, .045);
}

.rd-v4 .rd-custom-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 48px;
    padding: 9px 12px;
    border-bottom: 1px solid #d6e1e7;
    background: linear-gradient(180deg, #e9f0f4 0%, #f4f7f9 100%);
}

.rd-v4 .rd-custom-cabecera h2 {
    margin: 0;
    color: #294858;
    font-size: 16px;
    line-height: 1.2;
}

.rd-v4 .rd-custom-cabecera p {
    margin: 3px 0 0;
    color: #7a8e99;
    font-size: 10.5px;
    line-height: 1.35;
}

.rd-v4 .rd-custom-restablecer {
    flex: 0 0 auto;
    min-height: 30px;
    padding: 5px 10px;
    border: 1px solid #cbd9e1;
    border-radius: 7px;
    background: #fff;
    color: #526f80;
    font: inherit;
    font-size: 10.5px;
    font-weight: 700;
    cursor: pointer;
}

.rd-v4 .rd-custom-restablecer:hover {
    background: #f3f7f9;
    border-color: #adc4d1;
}

.rd-v4 .rd-custom-selector {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    padding: 8px 10px;
    border-bottom: 1px solid #e4ebef;
    background: #fbfcfd;
}

.rd-v4 .rd-custom-selector .boton-serie {
    padding: 5px 8px;
    font-size: 10.5px;
}

.rd-v4 .rd-custom-selector .boton-serie[data-serie="presion"].activo {
    color: #506875;
    border-color: #b6c5ce;
    background: #f0f4f6;
}

.rd-v4 .rd-custom-selector .boton-serie.sin-datos,
.rd-v4 .rd-custom-selector .boton-serie:disabled {
    opacity: .42;
    cursor: not-allowed;
}

.rd-v4 .rd-grafico-custom-card {
    margin: 8px;
    padding: 5px 8px 4px;
    border-color: #dbe5ea;
}

.rd-v4 .rd-grafico-custom {
    min-height: 390px;
}

.rd-v4 .rd-grafico-custom .rd-sin-detalle {
    min-height: 380px;
}

@media (max-width: 900px) {
    .rd-v4 .rd-custom-cabecera {
        align-items: flex-start;
    }
    .rd-v4 .rd-grafico-custom {
        min-height: 360px;
    }
}

@media (max-width: 620px) {
    .rd-v4 .rd-custom-cabecera {
        flex-direction: column;
    }
    .rd-v4 .rd-custom-selector {
gap: 4px;
    }
    .rd-v4 .rd-custom-selector .boton-serie {
        padding: 5px 7px;
        font-size: 10px;
    }
}


/* =========================================================
   RESUMEN DIARIO V25 · ESTABILIDAD Y RETÍCULA GRÁFICO CUSTOM
========================================================= */
.rd-v4 .rd-custom-modulo,
.rd-v4 .rd-custom-selector,
.rd-v4 .rd-grafico-custom-card,
.rd-v4 .rd-grafico-custom {
    overflow-anchor: none;
}

.rd-v4 .rd-grafico-custom {
    height: 390px;
    min-height: 390px;
}

@media (max-width: 900px) {
    .rd-v4 .rd-grafico-custom {
        height: 360px;
        min-height: 360px;
    }
}


/* =========================================================
   RESUMEN DIARIO V26 · AJUSTES GRÁFICO COMBINADO
========================================================= */
.rd-v4 .rd-custom-limpiar {
    margin-left: auto;
    padding: 5px 9px;
    border: 1px solid #cbd9e1;
    border-radius: 7px;
    background: #fff;
    color: #647b88;
    font: inherit;
    font-size: 10.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.rd-v4 .rd-custom-limpiar:hover,
.rd-v4 .rd-custom-limpiar:focus {
    background: #f1f5f7;
    border-color: #aebfca;
    color: #37596c;
}

/* Los títulos y escalas de ejes permanecen neutros; el color queda reservado a las series. */
.rd-v4 .rd-grafico-custom .apexcharts-yaxis-title text,
.rd-v4 .rd-grafico-custom .apexcharts-yaxis text {
    fill: #526975 !important;
}

.rd-v4 .rd-grafico-custom .apexcharts-yaxis-title text {
    font-size: 11px !important;
    font-weight: 700 !important;
}

/* La retícula queda visualmente subordinada a las series. */
.rd-v4 .rd-grafico-custom .apexcharts-grid line {
    shape-rendering: crispEdges;
}

@media (max-width: 620px) {
    .rd-v4 .rd-custom-limpiar {
        margin-left: 0;
    }
}


/* =========================================================
   RESUMEN DIARIO V27 · AJUSTE FINO GRÁFICO COMBINADO
========================================================= */
/* El área del gráfico gana exactamente 10 px por la izquierda
   y 5 px por la derecha respecto a su caja actual. */
.rd-v4 .rd-grafico-custom {
    width: calc(100% + 15px);
    margin-left: -10px;
    margin-right: -5px;
}

/* Acciones del selector: juntas y alineadas a la derecha. */
.rd-v4 .rd-custom-acciones {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
}

.rd-v4 .rd-custom-acciones .rd-custom-restablecer,
.rd-v4 .rd-custom-acciones .rd-custom-limpiar {
    margin-left: 0;
}

/* Retícula siempre visualmente subordinada a las variables. */
.rd-v4 .rd-grafico-custom .apexcharts-grid,
.rd-v4 .rd-grafico-custom .apexcharts-grid-borders,
.rd-v4 .rd-grafico-custom .apexcharts-xaxis-annotations,
.rd-v4 .rd-grafico-custom .apexcharts-yaxis-annotations,
.rd-v4 .rd-grafico-custom .apexcharts-point-annotations {
    pointer-events: none;
}

@media (max-width: 620px) {
    .rd-v4 .rd-custom-acciones {
        width: 100%;
        justify-content: flex-end;
        margin-left: 0;
    }
}


/* =========================================================
   RESUMEN DIARIO V28 · AJUSTE GEOMÉTRICO GRÁFICO COMBINADO
========================================================= */
/* 40 px más de altura para facilitar la lectura cuando se combinan varios ejes. */
.rd-v4 .rd-grafico-custom {
    height: 430px;
    min-height: 430px;
}

.rd-v4 .rd-grafico-custom .rd-sin-detalle {
    min-height: 420px;
}

/* Los títulos extremos se acercan 5 px al área útil; se hace desde ApexCharts
   con offsetX para no alterar la alineación de las escalas. */

@media (max-width: 900px) {
    .rd-v4 .rd-grafico-custom {
        height: 400px;
        min-height: 400px;
    }
}


/* =========================================================
   RESUMEN DIARIO V29 · GEOMETRÍA FINAL DEL GRÁFICO CUSTOM
========================================================= */
/* Se recortan 5 px adicionales de espacio blanco en cada lateral. */
.rd-v4 .rd-grafico-custom {
    width: calc(100% + 25px);
    margin-left: -15px;
    margin-right: -10px;
    height: 440px;
    min-height: 440px;
}

.rd-v4 .rd-grafico-custom .rd-sin-detalle {
    min-height: 430px;
}

/* Mantiene legibles y separados los dos ejes Y del lado izquierdo. */
.rd-v4 .rd-grafico-custom .apexcharts-yaxis-label {
    dominant-baseline: auto;
}

@media (max-width: 900px) {
    .rd-v4 .rd-grafico-custom {
        height: 410px;
        min-height: 410px;
    }
}


/* =========================================================
   RESUMEN DIARIO V30 · EJES MULTIESCALA DEL GRÁFICO CUSTOM
========================================================= */
/*
 * Se elimina el desbordamiento lateral de V27-V29: era el origen
 * del recorte de títulos y cifras en el eje izquierdo. Ganamos
 * espacio reduciendo el margen/padding de la tarjeta, no sacando
 * el SVG fuera de su contenedor.
 */
.rd-v4 .rd-grafico-custom-card {
    margin-left: 3px;
    margin-right: 3px;
    padding-left: 3px;
    padding-right: 3px;
    overflow: visible;
}

.rd-v4 .rd-grafico-custom {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    height: 440px;
    min-height: 440px;
    overflow: visible;
}

/* Ejes compactos, neutros y claramente separados mediante línea + ticks. */
.rd-v4 .rd-grafico-custom .apexcharts-yaxis-title text {
    font-size: 11px !important;
    font-weight: 700 !important;
    fill: #526975 !important;
}

.rd-v4 .rd-grafico-custom .apexcharts-yaxis-label {
    font-size: 10px !important;
    font-weight: 600 !important;
    fill: #526975 !important;
}

.rd-v4 .rd-grafico-custom .apexcharts-yaxis line,
.rd-v4 .rd-grafico-custom .apexcharts-yaxis-tick {
    shape-rendering: crispEdges;
}

@media (max-width: 900px) {
    .rd-v4 .rd-grafico-custom {
        height: 410px;
        min-height: 410px;
    }
}

/* =========================================================
   RESUMEN DIARIO V31 · CORRECCIÓN REAL DE EJES MULTIESCALA
========================================================= */
/*
 * El módulo y el SVG no deben recortar los ejes externos. El ancho se gana
 * dentro de ApexCharts, no desplazando el gráfico fuera de su caja.
 */
.rd-v4 .rd-custom-modulo,
.rd-v4 .rd-grafico-custom-card,
.rd-v4 .rd-grafico-custom,
.rd-v4 .rd-grafico-custom .apexcharts-canvas,
.rd-v4 .rd-grafico-custom .apexcharts-svg {
    overflow: visible !important;
}

.rd-v4 .rd-grafico-custom-card {
    margin-left: 2px;
    margin-right: 2px;
    padding-left: 4px;
    padding-right: 4px;
}

.rd-v4 .rd-grafico-custom {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Líneas y ticks de cada escala claramente visibles pero discretos. */
.rd-v4 .rd-grafico-custom .apexcharts-yaxis line,
.rd-v4 .rd-grafico-custom .apexcharts-yaxis-tick {
    stroke: #9eafb8 !important;
    stroke-width: 1px !important;
    shape-rendering: crispEdges;
}

/* Ejes compactos: títulos cerca de su propia escala. */
.rd-v4 .rd-grafico-custom .apexcharts-yaxis-title text {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .01em;
}

.rd-v4 .rd-grafico-custom .apexcharts-yaxis-label {
    font-size: 10px !important;
    font-weight: 600 !important;
}

/* =========================================================
   RESUMEN DIARIO V32 · EJES EXTERNOS CONTROLADOS
   ---------------------------------------------------------
   ApexCharts conserva el escalado de cada magnitud, pero no
   dibuja sus ejes. Las escalas se renderizan en raíles propios
   dentro de la tarjeta, evitando desbordamientos y solapes.
========================================================= */
.rd-v4 .rd-custom-modulo,
.rd-v4 .rd-grafico-custom-card {
    overflow: hidden !important;
}

.rd-v4 .rd-grafico-custom-card {
    margin-left: 2px !important;
    margin-right: 2px !important;
    padding: 4px 2px 3px !important;
}

.rd-v4 .rd-custom-chart-shell {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 440px;
    min-height: 440px;
    overflow: hidden;
}

.rd-v4 .rd-custom-chart-center {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    height: 440px;
    overflow: hidden;
}

.rd-v4 .rd-grafico-custom {
    width: 100% !important;
    height: 440px !important;
    min-height: 440px !important;
    margin: 0 !important;
    overflow: hidden !important;
}

.rd-v4 .rd-grafico-custom .apexcharts-canvas,
.rd-v4 .rd-grafico-custom .apexcharts-svg {
    overflow: hidden !important;
}

/* Los y-axis nativos no deben reservar espacio ni reaparecer por CSS heredado. */
.rd-v4 .rd-grafico-custom .apexcharts-yaxis,
.rd-v4 .rd-grafico-custom .apexcharts-yaxis-title,
.rd-v4 .rd-grafico-custom .apexcharts-yaxis-texts-g {
    display: none !important;
}

.rd-v4 .rd-custom-axis-stack {
    --rd-axis-top: 10px;
    --rd-axis-bottom: 30px;
    display: flex;
    flex: 0 0 auto;
    align-items: stretch;
    height: 440px;
    overflow: hidden;
    background: #fff;
}

.rd-v4 .rd-custom-axis-left {
    order: 0;
}

.rd-v4 .rd-custom-chart-center {
    order: 1;
}

.rd-v4 .rd-custom-axis-right {
    order: 2;
}

.rd-v4 .rd-custom-axis-rail {
    position: relative;
    flex: 0 0 var(--rd-axis-width, 46px);
    width: var(--rd-axis-width, 46px);
    height: 440px;
    color: #526975;
    font-family: "Segoe UI", Arial, sans-serif;
    box-sizing: border-box;
}

.rd-v4 .rd-axis-temp,
.rd-v4 .rd-axis-hum {
    --rd-axis-width: 45px;
}

.rd-v4 .rd-axis-rain {
    --rd-axis-width: 50px;
}

.rd-v4 .rd-axis-wind {
    --rd-axis-width: 48px;
}

.rd-v4 .rd-axis-dir {
    --rd-axis-width: 39px;
}

.rd-v4 .rd-axis-solar {
    --rd-axis-width: 54px;
}

.rd-v4 .rd-axis-press {
    --rd-axis-width: 51px;
}

.rd-v4 .rd-custom-axis-title {
    position: absolute;
    top: var(--rd-axis-top);
    bottom: var(--rd-axis-bottom);
    width: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    font-size: 10.5px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .01em;
    color: #526975;
    white-space: nowrap;
    user-select: none;
}

.rd-v4 .rd-axis-side-left .rd-custom-axis-title {
    left: 0;
    transform: rotate(180deg);
}

.rd-v4 .rd-axis-side-right .rd-custom-axis-title {
    right: 0;
}

.rd-v4 .rd-custom-axis-scale {
    position: absolute;
    top: var(--rd-axis-top);
    bottom: var(--rd-axis-bottom);
}

.rd-v4 .rd-axis-side-left .rd-custom-axis-scale {
    left: 14px;
    right: 0;
}

.rd-v4 .rd-axis-side-right .rd-custom-axis-scale {
    left: 0;
    right: 14px;
}

.rd-v4 .rd-custom-axis-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #9eafb8;
}

.rd-v4 .rd-axis-side-left .rd-custom-axis-line {
    right: 0;
}

.rd-v4 .rd-axis-side-right .rd-custom-axis-line {
    left: 0;
}

.rd-v4 .rd-custom-axis-tick {
    position: absolute;
    height: 0;
    width: 100%;
    transform: translateY(-50%);
    color: #526975;
    font-size: 9.5px;
    line-height: 1;
    font-weight: 600;
    pointer-events: none;
}

.rd-v4 .rd-custom-axis-mark {
    position: absolute;
    top: 0;
    width: 5px;
    height: 1px;
    background: #9eafb8;
}

.rd-v4 .rd-custom-axis-label {
    position: absolute;
    top: 0;
    transform: translateY(-50%);
    white-space: nowrap;
}

.rd-v4 .rd-axis-side-left .rd-custom-axis-mark {
    right: 0;
}

.rd-v4 .rd-axis-side-left .rd-custom-axis-label {
    right: 8px;
    text-align: right;
}

.rd-v4 .rd-axis-side-right .rd-custom-axis-mark {
    left: 0;
}

.rd-v4 .rd-axis-side-right .rd-custom-axis-label {
    left: 8px;
    text-align: left;
}

/* El eje de dirección usa letras y puede ser algo más compacto. */
.rd-v4 .rd-axis-dir .rd-custom-axis-label {
    font-weight: 700;
}

/* Separación mínima entre raíles: la línea de cada escala actúa de divisor. */
.rd-v4 .rd-custom-axis-rail + .rd-custom-axis-rail {
    margin-left: 1px;
}

@media (max-width: 900px) {
    .rd-v4 .rd-custom-chart-shell,
    .rd-v4 .rd-custom-chart-center,
    .rd-v4 .rd-custom-axis-stack,
    .rd-v4 .rd-custom-axis-rail,
    .rd-v4 .rd-grafico-custom {
        height: 410px !important;
        min-height: 410px !important;
    }
}

/* =========================================================
   RESUMEN DIARIO V33 · GEOMETRÍA ESTABLE DEL GRÁFICO CUSTOM
   ---------------------------------------------------------
   - 10 px de aire real entre el marco y los ejes extremos.
   - margen izquierdo estable cuando hay ejes izquierdos.
   - raíles más compactos a la derecha para reducir el cambio
     de anchura al activar escalas derechas.
   - la línea del eje de Temperatura queda pegada al origen del
     área de trazado, sin doble margen intermedio.
========================================================= */
.rd-v4 .rd-grafico-custom-card {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.rd-v4 .rd-custom-chart-shell {
    box-sizing: border-box !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    gap: 0 !important;
}

/* Por defecto, los stacks no consumen anchura si no tienen escalas activas. */
.rd-v4 .rd-custom-axis-stack {
    flex: 0 0 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    gap: 0 !important;
}

/*
 * En el lado izquierdo reservamos un ancho fijo mientras exista al menos
 * una escala izquierda. Así el borde 00h no se desplaza al cambiar entre
 * Temperatura/Humedad y otras combinaciones.
 */
.rd-v4 .rd-custom-chart-shell.rd-has-left-axes .rd-custom-axis-left {
    flex: 0 0 108px !important;
    width: 108px !important;
    min-width: 108px !important;
    justify-content: flex-end !important;
}

.rd-v4 .rd-custom-chart-shell.rd-has-right-axes .rd-custom-axis-right {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
}

/* Anchuras del lado izquierdo: legibles pero sin huecos sobrantes. */
.rd-v4 .rd-axis-hum {
    --rd-axis-width: 52px !important;
}
.rd-v4 .rd-axis-temp {
    --rd-axis-width: 54px !important;
}

/* Ejes derechos más compactos: título + escala + línea/ticks. */
.rd-v4 .rd-axis-rain {
    --rd-axis-width: 44px !important;
}
.rd-v4 .rd-axis-wind {
    --rd-axis-width: 44px !important;
}
.rd-v4 .rd-axis-dir {
    --rd-axis-width: 36px !important;
}
.rd-v4 .rd-axis-solar {
    --rd-axis-width: 48px !important;
}
.rd-v4 .rd-axis-press {
    --rd-axis-width: 46px !important;
}

/* Ningún hueco artificial entre raíles: la línea vertical ya los separa. */
.rd-v4 .rd-custom-axis-rail + .rd-custom-axis-rail {
    margin-left: 0 !important;
}

.rd-v4 .rd-custom-axis-title {
    width: 13px !important;
    font-size: 10.5px !important;
}

.rd-v4 .rd-axis-side-left .rd-custom-axis-scale {
    left: 13px !important;
    right: 0 !important;
}
.rd-v4 .rd-axis-side-right .rd-custom-axis-scale {
    left: 0 !important;
    right: 13px !important;
}
.rd-v4 .rd-axis-side-left .rd-custom-axis-label {
    right: 7px !important;
}
.rd-v4 .rd-axis-side-right .rd-custom-axis-label {
    left: 7px !important;
}

/* El centro no añade aire lateral propio: lo controla el shell. */
.rd-v4 .rd-custom-chart-center,
.rd-v4 .rd-grafico-custom {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* =========================================================
   RESUMEN DIARIO V34 · Ejes custom + tooltip compacto
   - 5 px extra entre el título vertical y la escala.
   - Tooltip con el mismo patrón compacto de Condiciones actuales.
========================================================= */
.rd-v4 .rd-axis-hum {
    --rd-axis-width: 57px !important;
}
.rd-v4 .rd-axis-temp {
    --rd-axis-width: 59px !important;
}
.rd-v4 .rd-axis-rain {
    --rd-axis-width: 49px !important;
}
.rd-v4 .rd-axis-wind {
    --rd-axis-width: 49px !important;
}
.rd-v4 .rd-axis-dir {
    --rd-axis-width: 41px !important;
}
.rd-v4 .rd-axis-solar {
    --rd-axis-width: 53px !important;
}
.rd-v4 .rd-axis-press {
    --rd-axis-width: 51px !important;
}

.rd-v4 .rd-axis-side-left .rd-custom-axis-scale {
    left: 18px !important;
    right: 0 !important;
}
.rd-v4 .rd-axis-side-right .rd-custom-axis-scale {
    left: 0 !important;
    right: 18px !important;
}

/* Tooltip compacto: mismo tratamiento que los gráficos de Condiciones actuales. */
.rd-v4 .rd-grafico-custom .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;
}
.rd-v4 .rd-grafico-custom .apexcharts-tooltip-title {
    margin-bottom: 1px !important;
    padding: 4px 7px !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
}
.rd-v4 .rd-grafico-custom .apexcharts-tooltip-series-group {
    min-height: 0 !important;
    padding: 3px 7px !important;
}
.rd-v4 .rd-grafico-custom .apexcharts-tooltip-marker {
    width: 7px !important;
    height: 7px !important;
    margin-right: 5px !important;
}
.rd-v4 .rd-grafico-custom .apexcharts-tooltip-text,
.rd-v4 .rd-grafico-custom .apexcharts-tooltip-text-y-label,
.rd-v4 .rd-grafico-custom .apexcharts-tooltip-text-y-value {
    font-size: 10px !important;
    line-height: 1.1 !important;
}
.rd-v4 .rd-grafico-custom .apexcharts-tooltip-y-group {
    padding: 0 !important;
}


/* =========================================================
   RESUMEN DIARIO V35 · Separación real entre escalas custom
   ---------------------------------------------------------
   El espacio se añade ENTRE raíles consecutivos: es decir,
   entre el título vertical de una escala y la línea/ticks
   de la escala siguiente. No modifica la distancia interna
   título-escala de un mismo eje.
========================================================= */
.rd-v4 .rd-custom-axis-left .rd-custom-axis-rail + .rd-custom-axis-rail,
.rd-v4 .rd-custom-axis-right .rd-custom-axis-rail + .rd-custom-axis-rail {
    margin-left: 8px !important;
}

/* Con Humedad + Temperatura activas: 57 + 59 + 8 = 124 px.
   Reservamos exactamente ese ancho para evitar recortes. */
.rd-v4 .rd-custom-chart-shell.rd-has-left-axes .rd-custom-axis-left {
    flex-basis: 124px !important;
    width: 124px !important;
    min-width: 124px !important;
}

/* Mantener los títulos extremos con 10 px de aire respecto al marco. */
.rd-v4 .rd-custom-chart-shell {
    padding-left: 10px !important;
    padding-right: 10px !important;
}


/* =========================================================
   RESUMEN DIARIO V37 · Ajuste línea temperatura y acciones
========================================================= */
.rd-v4 .rd-custom-acciones .rd-custom-restablecer,
.rd-v4 .rd-custom-acciones .rd-custom-limpiar {
    height: 30px !important;
    min-height: 30px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


/* =========================================================
   RESUMEN DIARIO V38 · Compactación horizontal de escalas
   ---------------------------------------------------------
   Reduce el aire lateral sobrante sin volver a juntar
   títulos, etiquetas y líneas de escala.
========================================================= */

/* Lado izquierdo: aprox. 20 px menos en total. */
.rd-v4 .rd-axis-hum {
    --rd-axis-width: 48px !important;
}
.rd-v4 .rd-axis-temp {
    --rd-axis-width: 50px !important;
}
.rd-v4 .rd-custom-axis-left .rd-custom-axis-rail + .rd-custom-axis-rail {
    margin-left: 6px !important;
}
.rd-v4 .rd-custom-chart-shell.rd-has-left-axes .rd-custom-axis-left {
    flex-basis: 104px !important;
    width: 104px !important;
    min-width: 104px !important;
}

/* Lado derecho: algo más compacto, pero conservando legibilidad. */
.rd-v4 .rd-axis-rain {
    --rd-axis-width: 45px !important;
}
.rd-v4 .rd-axis-wind {
    --rd-axis-width: 45px !important;
}
.rd-v4 .rd-axis-dir {
    --rd-axis-width: 38px !important;
}
.rd-v4 .rd-axis-solar {
    --rd-axis-width: 49px !important;
}
.rd-v4 .rd-axis-press {
    --rd-axis-width: 47px !important;
}
.rd-v4 .rd-custom-axis-right .rd-custom-axis-rail + .rd-custom-axis-rail {
    margin-left: 5px !important;
}

/* Un poco menos de margen exterior, manteniendo aire con el marco. */
.rd-v4 .rd-custom-chart-shell {
    padding-left: 8px !important;
    padding-right: 8px !important;
}


/* =========================================================
   RESUMEN DIARIO V39 · Título de eje junto a su propia escala
   ---------------------------------------------------------
   Orden visual:
   izquierda -> etiquetas | título | ticks/línea
   derecha   -> línea/ticks | título | etiquetas
   De este modo el título identifica visualmente su eje y no
   queda flotando lejos de la línea correspondiente.
========================================================= */

/* La escala ocupa el raíl completo; la línea conserva su borde interior. */
.rd-v4 .rd-axis-side-left .rd-custom-axis-scale,
.rd-v4 .rd-axis-side-right .rd-custom-axis-scale {
    left: 0 !important;
    right: 0 !important;
}

/* IZQUIERDA: línea/ticks en el borde derecho; título inmediatamente al lado. */
.rd-v4 .rd-axis-side-left .rd-custom-axis-title {
    left: auto !important;
    right: 7px !important;
}
.rd-v4 .rd-axis-side-left .rd-custom-axis-label {
    right: 27px !important;
}

/* DERECHA: línea/ticks en el borde izquierdo; título inmediatamente al lado. */
.rd-v4 .rd-axis-side-right .rd-custom-axis-title {
    right: auto !important;
    left: 7px !important;
}
.rd-v4 .rd-axis-side-right .rd-custom-axis-label {
    left: 27px !important;
}

/* Mantener ticks cortos y un pequeño colchón entre tick y título. */
.rd-v4 .rd-custom-axis-mark {
    width: 5px !important;
}


/* =========================================================
   RESUMEN DIARIO V40 · Orden correcto de título y escala
   ---------------------------------------------------------
   Convención visual:
   IZQUIERDA: título | valores/ticks | línea | gráfico
   DERECHA:   gráfico | línea | ticks/valores | título
   El título queda FUERA de su propia escala, no entre
   los valores y la línea del eje.
========================================================= */

/* IZQUIERDA: título exterior y escala inmediatamente después. */
.rd-v4 .rd-axis-side-left .rd-custom-axis-title {
    left: 0 !important;
    right: auto !important;
    width: 14px !important;
    transform: rotate(180deg) !important;
}
.rd-v4 .rd-axis-side-left .rd-custom-axis-scale {
    left: 16px !important;
    right: 0 !important;
}
.rd-v4 .rd-axis-side-left .rd-custom-axis-label {
    right: 8px !important;
}

/* DERECHA: escala primero y título en el extremo exterior. */
.rd-v4 .rd-axis-side-right .rd-custom-axis-title {
    right: 0 !important;
    left: auto !important;
    width: 14px !important;
}
.rd-v4 .rd-axis-side-right .rd-custom-axis-scale {
    left: 0 !important;
    right: 16px !important;
}
.rd-v4 .rd-axis-side-right .rd-custom-axis-label {
    left: 8px !important;
}

/* Mantener separación limpia entre ejes contiguos. */
.rd-v4 .rd-custom-axis-left .rd-custom-axis-rail + .rd-custom-axis-rail,
.rd-v4 .rd-custom-axis-right .rd-custom-axis-rail + .rd-custom-axis-rail {
    margin-left: 6px !important;
}


/* =========================================================
   RESUMEN DIARIO V41 · Acercar título a los valores de su eje
   ---------------------------------------------------------
   Se mantiene el orden correcto:
   IZQUIERDA: título | valores/ticks | línea | gráfico
   DERECHA:   gráfico | línea | ticks/valores | título
   pero desplazamos el título 6 px hacia su propia escala.
========================================================= */

/* Izquierda: acercar HUMEDAD / TEMPERATURA a sus cifras. */
.rd-v4 .rd-axis-side-left .rd-custom-axis-title {
    left: 6px !important;
    right: auto !important;
}

/* Derecha: acercar VIENTO / DIRECCIÓN / RADIACIÓN / PRESIÓN
   a sus cifras, sin pegarlos a la línea del eje. */
.rd-v4 .rd-axis-side-right .rd-custom-axis-title {
    right: 6px !important;
    left: auto !important;
}


/* =========================================================
   RESUMEN DIARIO V42 · Separación específica eje de presión
========================================================= */
.rd-v4 .rd-axis-press .rd-custom-axis-title {
    right: 0 !important;
}


/* =========================================================
   RESUMEN DIARIO V45 · Temperatura/Humedad: ampliar área gráfica
   ---------------------------------------------------------
   Solo afecta al gráfico de temperatura, humedad y sensación:
   - 15 px hacia la izquierda
   - 15 px hacia la derecha
   - 15 px adicionales hacia abajo
========================================================= */
.rd-v4 .rd-grafico-card[data-chart="temperatura"] .rd-grafico {
    width: calc(100% + 30px) !important;
    max-width: none !important;
    margin-left: -15px !important;
    margin-right: -15px !important;
    margin-bottom: -15px !important;
    min-height: 279px !important;
}

.rd-v4 .rd-grafico-card[data-chart="temperatura"] {
    overflow: visible !important;
}


/* =========================================================
   RESUMEN DIARIO V50 · Ajuste geométrico de gráficos mini
   ---------------------------------------------------------
   Presión:
   - 10 px hacia la izquierda
   - 5 px más de altura hacia abajo

   Viento:
   - 15 px hacia la izquierda
   - 20 px hacia la derecha
   - 5 px más de altura hacia abajo

   Radiación/UV:
   - 15 px hacia la izquierda
   - 15 px hacia la derecha
   - 5 px más de altura hacia abajo
========================================================= */

.rd-v4 #resumenGraficoPresion {
    width: calc(100% + 10px) !important;
    max-width: none !important;
    margin-left: -10px !important;
    margin-bottom: -5px !important;
    min-height: 211px !important;
}

.rd-v4 .rd-grafico-card[data-chart="viento"] #resumenGraficoViento {
    width: calc(100% + 35px) !important;
    max-width: none !important;
    margin-left: -15px !important;
    margin-right: -20px !important;
    margin-bottom: -5px !important;
    min-height: 179px !important;
}

.rd-v4 .rd-grafico-card[data-chart="solar"] #resumenGraficoSolar {
    width: calc(100% + 30px) !important;
    max-width: none !important;
    margin-left: -15px !important;
    margin-right: -15px !important;
    margin-bottom: -5px !important;
    min-height: 179px !important;
}

/* Las ampliaciones deben poder ocupar el padding interior de la tarjeta. */
.rd-v4 .rd-grafico-card:has(#resumenGraficoPresion),
.rd-v4 .rd-grafico-card[data-chart="viento"],
.rd-v4 .rd-grafico-card[data-chart="solar"] {
    overflow: visible !important;
}


/* =========================================================
   RESUMEN DIARIO V51 · Perfilado presión, viento y lluvia
========================================================= */

/* Presión: respecto a V50, recuperar 5 px por el lado izquierdo.
   Queda ampliado solo 5 px hacia la izquierda respecto al ancho original. */
.rd-v4 #resumenGraficoPresion {
    width: calc(100% + 5px) !important;
    margin-left: -5px !important;
}

/* Velocidad del viento: siempre visible y no deseleccionable.
   Conserva el aspecto de botón activo, sin apariencia de disabled nativo. */
.rd-v4 .boton-serie-bloqueado,
.rd-v4 .boton-serie-bloqueado:hover,
.rd-v4 .boton-serie-bloqueado:focus {
    opacity: 1 !important;
    cursor: default !important;
    filter: none !important;
}

/* El gráfico de lluvia ya no tiene selector: aprovechar el espacio superior
   sin alterar el resto de tarjetas mini. */
.rd-v4 .rd-grafico-card[data-chart="lluvia"] #resumenGraficoLluvia {
    margin-top: 0 !important;
}
/* =========================================================
   RESUMEN DIARIO V52 · Ajuste geométrico lluvia y viento
========================================================= */

/* LLUVIA
   +5 px hacia arriba
   +15 px hacia abajo
   +15 px hacia la izquierda
   +10 px hacia la derecha */
.rd-v4 .rd-grafico-card[data-chart="lluvia"] #resumenGraficoLluvia {
    width: calc(100% + 25px) !important;
    max-width: none !important;
    margin-left: -15px !important;
    margin-right: -10px !important;
    margin-top: -5px !important;
    margin-bottom: -15px !important;
    min-height: 194px !important;
}

.rd-v4 .rd-grafico-card[data-chart="lluvia"] {
    overflow: visible !important;
}

/* VIENTO
   5 px adicionales hacia la derecha respecto a V51. */
.rd-v4 .rd-grafico-card[data-chart="viento"] #resumenGraficoViento {
    width: calc(100% + 40px) !important;
    margin-right: -25px !important;
}


/* =========================================================
   RESUMEN DIARIO V53 · Tooltips compactos + área real gráficos
   ---------------------------------------------------------
   Los tooltips de los gráficos diarios adoptan exactamente
   el tratamiento compacto usado en Condiciones actuales /
   gráfico combinado.
========================================================= */

.rd-v4 .rd-grafico-card .apexcharts-tooltip {
    font-size: 10px !important;
    line-height: 1.12 !important;
    border: 1px solid #d7e3e9 !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 7px rgba(30, 50, 60, .15) !important;
}

.rd-v4 .rd-grafico-card .apexcharts-tooltip-title {
    margin-bottom: 1px !important;
    padding: 4px 7px !important;
    background: #f7fafb !important;
    border-bottom: 1px solid #e5ecef !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
}

.rd-v4 .rd-grafico-card .apexcharts-tooltip-series-group {
    min-height: 0 !important;
    padding: 3px 7px !important;
}

.rd-v4 .rd-grafico-card .apexcharts-tooltip-marker {
    width: 7px !important;
    height: 7px !important;
    margin-right: 5px !important;
}

.rd-v4 .rd-grafico-card .apexcharts-tooltip-text,
.rd-v4 .rd-grafico-card .apexcharts-tooltip-text-y-label,
.rd-v4 .rd-grafico-card .apexcharts-tooltip-text-y-value {
    font-size: 10px !important;
    line-height: 1.1 !important;
}

.rd-v4 .rd-grafico-card .apexcharts-tooltip-y-group {
    padding: 0 !important;
}

/* Evitar que la caja gane altura innecesaria por estilos heredados. */
.rd-v4 .rd-grafico-card .apexcharts-tooltip-text-y-label,
.rd-v4 .rd-grafico-card .apexcharts-tooltip-text-y-value {
    margin: 0 !important;
}


/* =========================================================
   RESUMEN DIARIO V54 · Separación escalas + altura lluvia/presión
========================================================= */

/* LLUVIA: 10 px adicionales hacia abajo respecto a V53.
   La expansión lateral se mantiene, pero las escalas vuelven
   a quedar fuera del área de trazado mediante padding interno. */
.rd-v4 .rd-grafico-card[data-chart="lluvia"] #resumenGraficoLluvia {
    margin-bottom: -25px !important;
    min-height: 204px !important;
}

/* PRESIÓN: 5 px más de altura hacia arriba. */
.rd-v4 #resumenGraficoPresion {
    margin-top: -5px !important;
    min-height: 216px !important;
}


/* =========================================================
   RESUMEN DIARIO V55 · Ajuste fino títulos y ancho de viento
========================================================= */

/* Viento: 10 px adicionales hacia la derecha respecto a V54. */
.rd-v4 .rd-grafico-card[data-chart="viento"] #resumenGraficoViento {
    width: calc(100% + 50px) !important;
    margin-right: -35px !important;
}


/* =========================================================
   RESUMEN DIARIO V56 · Alturas presión, viento y lluvia
========================================================= */

/* PRESIÓN: 5 px adicionales hacia arriba. */
.rd-v4 #resumenGraficoPresion {
    margin-top: -10px !important;
    min-height: 221px !important;
}

/* VIENTO: 5 px adicionales hacia arriba. */
.rd-v4 .rd-grafico-card[data-chart="viento"] #resumenGraficoViento {
    margin-top: -5px !important;
    min-height: 184px !important;
}

/* LLUVIA:
   +5 px hacia arriba
   +10 px adicionales hacia abajo */
.rd-v4 .rd-grafico-card[data-chart="lluvia"] #resumenGraficoLluvia {
    margin-top: -10px !important;
    margin-bottom: -35px !important;
    min-height: 219px !important;
}


/* =========================================================
   RESUMEN DIARIO V57 · Ajustes de extensión de gráficos
========================================================= */

/* TEMPERATURA:
   +5 px hacia arriba y +5 px hacia abajo. */
.rd-v4 .rd-grafico-card[data-chart="temperatura"] .rd-grafico {
    margin-top: -5px !important;
    margin-bottom: -20px !important;
    min-height: 289px !important;
}

/* PRESIÓN:
   +5 px adicionales hacia abajo. */
.rd-v4 #resumenGraficoPresion {
    margin-bottom: -10px !important;
    min-height: 226px !important;
}

/* LLUVIA:
   +5 px adicionales hacia abajo
   +10 px adicionales hacia la derecha. */
.rd-v4 .rd-grafico-card[data-chart="lluvia"] #resumenGraficoLluvia {
    width: calc(100% + 35px) !important;
    margin-right: -20px !important;
    margin-bottom: -40px !important;
    min-height: 224px !important;
}

/* GRÁFICO COMBINADO:
   +10 px hacia arriba, manteniendo el borde inferior en su posición.
   El bloque gana 10 px de altura y se desplaza 10 px hacia arriba;
   por tanto, su ocupación vertical neta permanece igual. */
.rd-v4 .rd-custom-chart-shell {
    height: 450px !important;
    min-height: 450px !important;
    margin-top: -10px !important;
}

.rd-v4 .rd-custom-chart-center,
.rd-v4 .rd-custom-axis-stack {
    height: 450px !important;
    min-height: 450px !important;
}

.rd-v4 .rd-grafico-custom {
    height: 450px !important;
    min-height: 450px !important;
}


/* =========================================================
   RESUMEN DIARIO V58 · Combinado: escala/00h + lluvia
========================================================= */

/* GRÁFICO COMBINADO
   Mantiene los 10 px ganados por arriba en V57, pero recupera
   5 px por abajo: 450 -> 445 px.
   MUY IMPORTANTE: los raíles individuales de las escalas también
   pasan a 445 px; en V57 seguían en 440 px y por eso la escala
   podía quedar desajustada respecto al área de trazado. */
.rd-v4 .rd-custom-chart-shell {
    height: 445px !important;
    min-height: 445px !important;
    margin-top: -10px !important;
}

.rd-v4 .rd-custom-chart-center,
.rd-v4 .rd-custom-axis-stack,
.rd-v4 .rd-custom-axis-rail {
    height: 445px !important;
    min-height: 445px !important;
}

.rd-v4 .rd-grafico-custom {
    height: 445px !important;
    min-height: 445px !important;
}

/* LLUVIA: 5 px adicionales hacia la derecha respecto a V57. */
.rd-v4 .rd-grafico-card[data-chart="lluvia"] #resumenGraficoLluvia {
    width: calc(100% + 40px) !important;
    margin-right: -25px !important;
}


/* =========================================================
   RESUMEN MENSUAL V1 · Registro climatológico mensual
   ---------------------------------------------------------
   Bloque completamente aislado bajo .rm-v1.
   Reutiliza el lenguaje visual ya aprobado en el resumen diario:
   cabecera compacta, cifras, texto automático, tabla + gráfico,
   tooltips densos y escalas neutras.
========================================================= */

.rm-v1 {
    color: #334f60;
    font-size: 14px;
}
.rm-v1 .contenedor { overflow: visible; }

.rm-v1 .rm-icono {
    display: block;
    width: 1em;
    height: 1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rm-v1 .rm-cabecera {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 3px 0 16px;
    border-bottom: 1px solid #e0e9ee;
}
.rm-v1 .rm-cabecera h1 {
    margin: 0;
    color: #24465d;
    font-size: clamp(27px, 2.7vw, 37px);
    line-height: 1.05;
    letter-spacing: -.025em;
}
.rm-v1 .rm-periodo-principal {
    margin: 7px 0 0;
    color: #657c89;
    font-size: 16px;
    font-weight: 600;
}
.rm-v1 .rm-estado {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex: 0 0 auto;
    color: #748995;
}
.rm-v1 .rm-estado-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid #d7e5ec;
    border-radius: 8px;
    background: #f7fbfd;
    color: #45687d;
    font-size: 12px;
    font-weight: 700;
}
.rm-v1 .rm-estado-chip .rm-icono { width: 16px; height: 16px; }
.rm-v1 .rm-estado small { font-size: 12px; }

.rm-v1 .rm-herramientas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 12px 0 16px;
}
.rm-v1 .rm-tabs { margin: 0; flex: 0 0 auto; }
.rm-v1 .rm-tabs a {
    min-height: 33px;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
}

.rm-v1 .rm-calendario {
    display: flex;
    align-items: center;
    gap: 6px;
}
.rm-v1 .rm-calendario-etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 3px;
    color: #687f8d;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.rm-v1 .rm-calendario-etiqueta .rm-icono { width: 15px; height: 15px; }
.rm-v1 .rm-calendario input[type="month"] {
    height: 33px;
    padding: 0 9px;
    border: 1px solid #cfdde5;
    border-radius: 7px;
    background: #fff;
    color: #405e70;
    font: inherit;
    font-size: 12px;
}
.rm-v1 .rm-calendario button,
.rm-v1 .rm-mes-actual {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 33px;
    padding: 6px 11px;
    border: 1px solid #cbd9e1;
    border-radius: 7px;
    background: #fff;
    color: #557181;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
.rm-v1 .rm-calendario button:hover,
.rm-v1 .rm-mes-actual:hover { background: #f3f7f9; }
.rm-v1 .rm-mes-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 33px;
    height: 33px;
    flex: 0 0 33px;
    border: 1px solid #cfdde5;
    border-radius: 7px;
    background: #fff;
    color: #5a7687;
    text-decoration: none;
}
.rm-v1 .rm-mes-nav .rm-icono { width: 16px; height: 16px; }
.rm-v1 .rm-mes-nav-off { opacity: .35; }

.rm-v1 .rm-cifras {
    overflow: hidden;
    margin-top: 3px;
    border: 1px solid #dce8ee;
    border-radius: 11px;
    background: #fff;
}
.rm-v1 .rm-cifras > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    min-height: 43px;
    padding: 8px 13px;
    border-bottom: 1px solid #e5edf1;
    background: #fbfcfd;
}
.rm-v1 .rm-cifras > header h2 {
    margin: 0;
    color: #355a70;
    font-size: 14px;
}
.rm-v1 .rm-cifras > header span,
.rm-v1 .rm-cifras > header small {
    color: #8496a0;
    font-size: 10px;
}
.rm-v1 .rm-cifras-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
}
.rm-v1 .rm-cifra {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 12px 10px;
    border-right: 1px solid #e7eef2;
}
.rm-v1 .rm-cifra:last-child { border-right: 0; }
.rm-v1 .rm-cifra-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 8px;
    background: #eef4f7;
    color: #607f90;
}
.rm-v1 .rm-cifra-icono .rm-icono { width: 17px; height: 17px; }
.rm-v1 .rm-cifra-icono-uv {
    background: #f2edf8;
    color: #76539a;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .02em;
}
.rm-v1 .rm-cifra > div { min-width: 0; }
.rm-v1 .rm-cifra small,
.rm-v1 .rm-cifra span {
    display: block;
    color: #82939d;
    font-size: 9px;
    line-height: 1.25;
}
.rm-v1 .rm-cifra strong {
    display: block;
    margin: 2px 0;
    color: #294b60;
    font-size: 19px;
    line-height: 1.05;
    white-space: nowrap;
}
.rm-v1 .rm-cifra-max strong { color: #c44343; }
.rm-v1 .rm-cifra-min strong { color: #3d79b6; }
.rm-v1 .rm-cifra-lluvia .rm-cifra-icono { background:#eaf4fa; color:#4a92c4; }
.rm-v1 .rm-cifra-viento .rm-cifra-icono { background:#f8ebf0; color:#a83263; }
.rm-v1 .rm-cifra-sol .rm-cifra-icono { background:#fbf4df; color:#b98a1c; }
.rm-v1 .rm-cifra-presion .rm-cifra-icono { background:#edf1f3; color:#5c7b8e; }

.rm-v1 .rm-autotexto {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    gap: 12px;
    margin: 14px 0 20px;
    padding: 13px 15px;
    border: 1px solid #dce7ec;
    border-radius: 9px;
    background: #fbfcfd;
}
.rm-v1 .rm-autotexto-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #edf4f7;
    color: #638296;
}
.rm-v1 .rm-autotexto-icono .rm-icono { width: 16px; height: 16px; }
.rm-v1 .rm-autotexto h2 {
    margin: 0 0 5px;
    color: #35586c;
    font-size: 13px;
}
.rm-v1 .rm-autotexto p {
    margin: 0;
    color: #506975;
    font-size: 12px;
    line-height: 1.62;
}

.rm-v1 .rm-titulo-bloque {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin: 22px 0 9px;
}
.rm-v1 .rm-titulo-bloque h2 {
    margin: 0;
    color: #294e63;
    font-size: 18px;
}
.rm-v1 .rm-titulo-bloque p {
    margin: 3px 0 0;
    color: #82939d;
    font-size: 11px;
}

.rm-v1 .rm-bloque-principal {
    display: grid;
    grid-template-columns: minmax(270px, .88fr) minmax(0, 2.12fr);
    margin-bottom: 12px;
    border: 1px solid #dbe6ec;
    border-radius: 9px;
    background: #fff;
    overflow: hidden;
}
.rm-v1 .rm-tabla {
    min-width: 0;
    border-right: 1px solid #e3ecef;
    background: #fcfdfe;
}
.rm-v1 .rm-tabla header {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 39px;
    padding: 7px 12px;
    border-bottom: 1px solid #e5edf1;
}
.rm-v1 .rm-tabla header h2 {
    margin: 0;
    color: #34586d;
    font-size: 13px;
}
.rm-v1 .rm-tabla-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: #eef4f7;
    color: #5d7e90;
}
.rm-v1 .rm-tabla-icono .rm-icono { width: 16px; height: 16px; }

.rm-v1 .rm-tabla-temperatura header { background:#fff9f9; border-top:3px solid #c94343; }
.rm-v1 .rm-tabla-temperatura .rm-tabla-icono { background:#fbeded; color:#c34e4e; }
.rm-v1 .rm-tabla-presion header { background:#fafcfd; border-top:3px solid #718794; }
.rm-v1 .rm-tabla-presion .rm-tabla-icono { background:#edf1f3; color:#607a89; }
.rm-v1 .rm-tabla-viento header { background:#fff9fb; border-top:3px solid #a83263; }
.rm-v1 .rm-tabla-viento .rm-tabla-icono { background:#f8ebf0; color:#a83263; }
.rm-v1 .rm-tabla-lluvia header { background:#f8fbfe; border-top:3px solid #4f9fd2; }
.rm-v1 .rm-tabla-lluvia .rm-tabla-icono { background:#e9f3fa; color:#438dbe; }
.rm-v1 .rm-tabla-solar header { background:#fffdf7; border-top:3px solid #d7a22a; }
.rm-v1 .rm-tabla-solar .rm-tabla-icono { background:#fbf4df; color:#b78a20; }

.rm-v1 .rm-tabla-cuerpo { padding: 3px 13px 5px; }
.rm-v1 .rm-fila {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 12px;
    align-items: center;
    min-height: 38px;
    padding: 7px 0;
    border-bottom: 1px solid #edf2f5;
}
.rm-v1 .rm-fila:last-child { border-bottom: 0; }
.rm-v1 .rm-fila > span {
    color: #607887;
    font-size: 11px;
}
.rm-v1 .rm-fila strong {
    color: #294c61;
    font-size: 12px;
    text-align: right;
    white-space: nowrap;
}
.rm-v1 .rm-fila strong small {
    display: block;
    margin-top: 2px;
    color: #8a9aa3;
    font-size: 9px;
    font-weight: 400;
}
.rm-v1 .rm-rojo { color:#c44343 !important; font-weight:700; }
.rm-v1 .rm-azul { color:#3d79b6 !important; font-weight:700; }

.rm-v1 .rm-grafico-card {
    position: relative;
    min-width: 0;
    min-height: 260px;
    padding: 2px 4px 0;
    background: #fff;
    overflow: visible;
}
.rm-v1 .rm-grafico {
    width: 100%;
    min-height: 260px;
}
.rm-v1 .rm-grafico-cabecera {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    height: 25px;
    padding: 5px 8px 0;
    color: #6d818d;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}
.rm-v1 .rm-grafico-cabecera span::before {
    content:"";
    display:inline-block;
    width:7px;
    height:7px;
    margin-right:4px;
    border-radius:50%;
    background:#c94747;
}
.rm-v1 .rm-grafico-cabecera span:nth-child(2)::before { background:#9f3541; }
.rm-v1 .rm-grafico-cabecera span:nth-child(3)::before { background:#4a83b8; }
.rm-v1 .rm-grafico-temperatura .rm-grafico { margin-top:-10px; }

.rm-v1 .apexcharts-text,
.rm-v1 .apexcharts-xaxis-label,
.rm-v1 .apexcharts-yaxis-label {
    font-family:"Segoe UI", Arial, sans-serif !important;
}
.rm-v1 .apexcharts-canvas,
.rm-v1 .apexcharts-svg { overflow: visible !important; }
.rm-v1 .apexcharts-tooltip {
    font-size:10px !important;
    line-height:1.12 !important;
    border:1px solid #d7e3e9 !important;
    border-radius:6px !important;
    box-shadow:0 2px 7px rgba(30,50,60,.15) !important;
}
.rm-v1 .apexcharts-tooltip-title {
    margin-bottom:1px !important;
    padding:4px 7px !important;
    background:#f7fafb !important;
    border-bottom:1px solid #e5ecef !important;
    font-size:10px !important;
    line-height:1.1 !important;
}
.rm-v1 .apexcharts-tooltip-series-group {
    min-height:0 !important;
    padding:3px 7px !important;
}
.rm-v1 .apexcharts-tooltip-marker {
    width:7px !important;
    height:7px !important;
    margin-right:5px !important;
}
.rm-v1 .apexcharts-tooltip-text,
.rm-v1 .apexcharts-tooltip-text-y-label,
.rm-v1 .apexcharts-tooltip-text-y-value {
    font-size:10px !important;
    line-height:1.1 !important;
}
.rm-v1 .apexcharts-tooltip-y-group { padding:0 !important; }

.rm-v1 .rm-comparacion,
.rm-v1 .rm-dia-a-dia {
    margin-top: 20px;
    border: 1px solid #dbe6ec;
    border-radius: 9px;
    background: #fff;
    overflow: hidden;
}
.rm-v1 .rm-comparacion-cabecera,
.rm-v1 .rm-dia-a-dia > header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    padding:10px 13px;
    border-bottom:1px solid #e5edf1;
    background:#fbfcfd;
}
.rm-v1 .rm-comparacion-cabecera h2,
.rm-v1 .rm-dia-a-dia h2 {
    margin:0;
    color:#34586d;
    font-size:14px;
}
.rm-v1 .rm-comparacion-cabecera p,
.rm-v1 .rm-dia-a-dia header p {
    margin:3px 0 0;
    color:#84959f;
    font-size:10px;
}
.rm-v1 .rm-dia-a-dia > header > span { color:#668698; }
.rm-v1 .rm-dia-a-dia > header .rm-icono { width:18px; height:18px; }

.rm-v1 .rm-comparacion-scroll,
.rm-v1 .rm-dia-a-dia-scroll { overflow-x:auto; }
.rm-v1 .rm-comparacion-tabla,
.rm-v1 .rm-dia-a-dia table {
    width:100%;
    border-collapse:collapse;
}
.rm-v1 .rm-comparacion-tabla th,
.rm-v1 .rm-comparacion-tabla td,
.rm-v1 .rm-dia-a-dia th,
.rm-v1 .rm-dia-a-dia td {
    padding:8px 11px;
    border-top:1px solid #edf2f5;
    color:#405f70;
    font-size:11px;
    text-align:center;
    white-space:nowrap;
}
.rm-v1 .rm-comparacion-tabla thead th,
.rm-v1 .rm-dia-a-dia thead th {
    border-top:0;
    background:#fbfcfd;
    color:#6a808d;
    font-size:10px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.025em;
}
.rm-v1 .rm-comparacion-tabla th:first-child,
.rm-v1 .rm-comparacion-tabla td:first-child {
    text-align:left;
}
.rm-v1 .rm-comparacion-tabla tbody th { color:#4c6573; font-weight:600; }
.rm-v1 .rm-comparacion-tabla tbody td,
.rm-v1 .rm-dia-a-dia tbody td { font-weight:600; }
.rm-v1 .rm-dia-a-dia tbody tr:hover { background:#fafcfd; }
.rm-v1 .rm-dia-a-dia a {
    color:#3e7290;
    font-size:10px;
    font-weight:700;
    text-decoration:none;
}
.rm-v1 .rm-dia-a-dia a:hover { text-decoration:underline; }

.rm-v1 .rm-delta {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:68px;
    padding:3px 7px;
    border-radius:999px;
    background:#f0f4f6;
    color:#667d89;
    font-size:10px;
    font-weight:700;
}
.rm-v1 .rm-delta.sube { background:#fff0ed; color:#a34d41; }
.rm-v1 .rm-delta.baja { background:#edf5fb; color:#477a9b; }

.rm-v1 .rm-comparacion-espera {
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 15px;
}
.rm-v1 .rm-comparacion-espera > span {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    flex:0 0 32px;
    border-radius:50%;
    background:#eef4f7;
    color:#638296;
}
.rm-v1 .rm-comparacion-espera .rm-icono { width:17px; height:17px; }
.rm-v1 .rm-comparacion-espera strong { color:#436174; font-size:12px; }
.rm-v1 .rm-comparacion-espera p { margin:3px 0 0; color:#82939d; font-size:10px; line-height:1.45; }

.rm-v1 .rm-fuente { font-size:11px; }

@media (max-width: 1180px) {
    .rm-v1 .rm-cifras-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
    .rm-v1 .rm-cifra:nth-child(4n) { border-right:0; }
    .rm-v1 .rm-cifra:nth-child(n+5) { border-top:1px solid #e7eef2; }
}

@media (max-width: 940px) {
    .rm-v1 .rm-herramientas { align-items:flex-start; flex-direction:column; }
    .rm-v1 .rm-calendario { width:100%; flex-wrap:wrap; }
    .rm-v1 .rm-bloque-principal { grid-template-columns:1fr; }
    .rm-v1 .rm-tabla { border-right:0; border-bottom:1px solid #e3ecef; }
}

@media (max-width: 680px) {
    .rm-v1 .rm-cabecera { align-items:flex-start; flex-direction:column; gap:10px; }
    .rm-v1 .rm-estado { align-items:flex-start; }
    .rm-v1 .rm-cifras-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .rm-v1 .rm-cifra { border-top:1px solid #e7eef2; }
    .rm-v1 .rm-cifra:nth-child(-n+2) { border-top:0; }
    .rm-v1 .rm-cifra:nth-child(2n) { border-right:0; }
    .rm-v1 .rm-calendario-etiqueta { flex-basis:100%; }
    .rm-v1 .rm-calendario input[type="month"] { flex:1 1 145px; }
    .rm-v1 .rm-comparacion-tabla { min-width:570px; }
    .rm-v1 .rm-dia-a-dia table { min-width:700px; }
}

/* =========================================================
   RESUMEN MENSUAL V3 · Selectores, tablas y eje diario
   ---------------------------------------------------------
   Ajustes exclusivos bajo .rm-v1. No afectan al resumen diario.
========================================================= */

/* Consulta histórica: mes y año como desplegables, sin escritura manual. */
.rm-v1 .rm-calendario select {
    height: 33px;
    min-width: 112px;
    padding: 0 28px 0 9px;
    border: 1px solid #cfdde5;
    border-radius: 7px;
    background: #fff;
    color: #405e70;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    outline: none;
}
.rm-v1 .rm-calendario #rmConsultaAnio { min-width: 82px; }
.rm-v1 .rm-calendario select:focus {
    border-color: #78aaca;
    box-shadow: 0 0 0 3px rgba(107,164,208,.10);
}
.rm-v1 .rm-calendario select option:disabled { color: #aab6bd; }

/* Panel principal: siete indicadores tras retirar UV. */
.rm-v1 .rm-cifras-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

/* Tablas mensuales: misma densidad y lenguaje visual que las del diario. */
.rm-v1 .rm-bloque-principal {
    grid-template-columns: minmax(300px, .92fr) minmax(0, 2.08fr);
    border-radius: 11px;
    box-shadow: 0 3px 10px rgba(32,75,105,.045);
}
.rm-v1 .rm-tabla {
    background: #fff;
}
.rm-v1 .rm-tabla header {
    gap: 10px;
    min-height: 43px;
    padding: 9px 13px;
}
.rm-v1 .rm-tabla header h2 {
    color: #24465d;
    font-size: 15px;
}
.rm-v1 .rm-tabla-icono {
    width: 30px;
    height: 30px;
    border-radius: 8px;
}
.rm-v1 .rm-tabla-icono .rm-icono {
    width: 18px;
    height: 18px;
}
.rm-v1 .rm-tabla-cuerpo {
    padding: 0;
}
.rm-v1 .rm-fila {
    min-height: 36px;
    padding: 7px 11px;
    border-bottom: 0;
    border-top: 1px solid #e5edf2;
    line-height: 1.35;
}
.rm-v1 .rm-fila:first-child { border-top: 0; }
.rm-v1 .rm-fila > span {
    color: #4f6572;
    font-size: 13px;
}
.rm-v1 .rm-fila strong {
    color: #203e52;
    font-size: 13px;
}
.rm-v1 .rm-fila strong small {
    margin-top: 1px;
    color: #8698a2;
    font-size: 10px;
}

/* Gráficas: cada jornada ocupa una celda entre dos límites verticales.
   La etiqueta del día y el punto diario quedan centrados dentro de la celda. */
.rm-v1 .rm-grafico-card {
    padding-left: 3px;
    padding-right: 3px;
}
.rm-v1 .apexcharts-xaxis-label {
    font-size: 9px !important;
    font-weight: 600 !important;
}
.rm-v1 .apexcharts-xaxis-annotations line,
.rm-v1 .apexcharts-gridline {
    shape-rendering: crispEdges;
}

@media (max-width: 1180px) {
    .rm-v1 .rm-cifras-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
    .rm-v1 .rm-cifra:nth-child(4n) { border-right:0; }
    .rm-v1 .rm-cifra:nth-child(n+5) { border-top:1px solid #e7eef2; }
    .rm-v1 .rm-cifra:nth-child(7) { border-right:0; }
}

@media (max-width: 940px) {
    .rm-v1 .rm-bloque-principal { grid-template-columns: 1fr; }
    .rm-v1 .rm-calendario select { min-width: 126px; }
    .rm-v1 .rm-calendario #rmConsultaAnio { min-width: 88px; }
}

@media (max-width: 680px) {
    .rm-v1 .rm-cifras-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .rm-v1 .rm-cifra:nth-child(7) { grid-column: 1 / -1; }
    .rm-v1 .rm-calendario select { flex: 1 1 120px; }
    .rm-v1 .rm-calendario #rmConsultaAnio { flex: 0 1 92px; }
}


/* =========================================================
   RESUMEN MENSUAL V4 · ICONOS Y SOMBREADOS DEL RESUMEN DIARIO
   ---------------------------------------------------------
   Réplica literal del lenguaje visual aprobado en el diario:
   - iconos del panel superior;
   - iconos de cabeceras de tablas;
   - sombreados cromáticos de las cinco familias meteorológicas.
========================================================= */

/* Panel "El mes en cifras": misma geometría de iconos que "La jornada en cifras". */
.rm-v1 .rm-cifras {
    border-color: #dce6ec;
    box-shadow: 0 3px 10px rgba(32,75,105,.05);
}
.rm-v1 .rm-cifras > header {
    align-items: baseline;
    padding: 9px 13px;
    border-bottom: 1px solid #d2dde3 !important;
    background: linear-gradient(180deg, #e7eef2 0%, #f2f6f8 100%) !important;
}
.rm-v1 .rm-cifras > header h2 {
    color: #24465d;
    font-size: 15px;
}
.rm-v1 .rm-cifras > header span,
.rm-v1 .rm-cifras > header small {
    color: #8496a0;
    font-size: 11px;
}
.rm-v1 .rm-cifra {
    display: grid;
    grid-template-columns: 31px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    padding: 10px 9px;
}
.rm-v1 .rm-cifra-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    border-radius: 8px;
    background: #eef4f7;
    color: #607e91;
}
.rm-v1 .rm-cifra-icono .resumen-icono {
    width: 18px;
    height: 18px;
}
.rm-v1 .rm-cifra-max .rm-cifra-icono { background:#fff0f0; color:#d85858; }
.rm-v1 .rm-cifra-min .rm-cifra-icono { background:#edf5fb; color:#4d8dbc; }
.rm-v1 .rm-cifra-media .rm-cifra-icono { background:#f4f1f1; color:#956f70; }
.rm-v1 .rm-cifra-lluvia .rm-cifra-icono { background:#f2edfb; color:#7355b4; }
.rm-v1 .rm-cifra-viento .rm-cifra-icono { background:#fff0f0; color:#d85858; }
.rm-v1 .rm-cifra-sol .rm-cifra-icono { background:#fff8e6; color:#d4a01f; }
.rm-v1 .rm-cifra-presion .rm-cifra-icono { background:#eef4f7; color:#607e91; }

/* Cabeceras de tablas: tamaño y trazo de iconos idénticos al resumen diario. */
.rm-v1 .rm-tabla header {
    gap: 9px !important;
    min-height: 0;
    padding: 11px 13px;
}
.rm-v1 .rm-tabla header h2 {
    color: #26343d !important;
    font-size: 15px;
}
.rm-v1 .rm-tabla-icono,
.rm-v1 .rm-tabla header .icono-tabla,
.rm-v1 .rm-tabla header .icono-tabla-svg {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    flex: 0 0 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-size: 0 !important;
}
.rm-v1 .rm-tabla-icono svg,
.rm-v1 .rm-tabla header .icono-tabla svg,
.rm-v1 .rm-tabla header .icono-tabla-svg svg {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    overflow: visible !important;
}

/* Temperatura / humedad */
.rm-v1 .rm-tabla.tabla-roja header {
    background: linear-gradient(180deg, #f4dada 0%, #fbeaea 100%) !important;
    border-top: 0 !important;
    border-bottom-color: #e7c1c1 !important;
}
.rm-v1 .rm-tabla.tabla-roja .rm-tabla-icono { color: #96545a !important; }
.rm-v1 .rm-tabla.tabla-roja .rm-tabla-cuerpo {
    background: linear-gradient(90deg, rgba(255,241,241,.62), rgba(255,250,250,.34));
}

/* Presión */
.rm-v1 .rm-tabla.tabla-gris header {
    background: linear-gradient(180deg, #e3e8ec 0%, #f0f3f5 100%) !important;
    border-top: 0 !important;
    border-bottom-color: #cfd8de !important;
}
.rm-v1 .rm-tabla.tabla-gris .rm-tabla-icono { color: #586b78 !important; }
.rm-v1 .rm-tabla.tabla-gris .rm-tabla-cuerpo {
    background: linear-gradient(90deg, rgba(240,245,248,.68), rgba(250,252,253,.38));
}

/* Viento */
.rm-v1 .rm-tabla.tabla-verdeagua header {
    background: linear-gradient(180deg, #efd2da 0%, #f8e5ea 100%) !important;
    border-top: 0 !important;
    border-bottom-color: #dfb7c2 !important;
}
.rm-v1 .rm-tabla.tabla-verdeagua .rm-tabla-icono { color: #945b55 !important; }
.rm-v1 .rm-tabla.tabla-verdeagua .rm-tabla-cuerpo {
    background: linear-gradient(90deg, rgba(237,251,250,.68), rgba(249,254,254,.38));
}

/* Precipitaciones */
.rm-v1 .rm-tabla.tabla-azul header {
    background: linear-gradient(180deg, #dbeaf6 0%, #edf5fb 100%) !important;
    border-top: 0 !important;
    border-bottom-color: #c3dced !important;
}
.rm-v1 .rm-tabla.tabla-azul .rm-tabla-icono { color: #4d7592 !important; }
.rm-v1 .rm-tabla.tabla-azul .rm-tabla-cuerpo {
    background: linear-gradient(90deg, rgba(245,240,255,.72), rgba(251,249,255,.42));
}

/* Radiación / UV */
.rm-v1 .rm-tabla.tabla-amarilla header {
    background: linear-gradient(180deg, #f8e9bf 0%, #fff5da 100%) !important;
    border-top: 0 !important;
    border-bottom-color: #ead79f !important;
}
.rm-v1 .rm-tabla.tabla-amarilla .rm-tabla-icono { color: #987225 !important; }
.rm-v1 .rm-tabla.tabla-amarilla .rm-tabla-cuerpo {
    background: linear-gradient(90deg, rgba(255,248,225,.78), rgba(255,253,244,.44));
}


/* =========================================================
   RESUMEN MENSUAL V5 · RÉPLICA LITERAL DEL RESUMEN DIARIO
   ---------------------------------------------------------
   Esta capa corrige V4:
   - panel superior: mismos iconos, tamaño, fondos y colores;
   - tablas: misma estructura real <table>, cabeceras, SVG,
     bordes, sombras y fondos cromáticos que el resumen diario.
========================================================= */

/* ---------- PANEL SUPERIOR: réplica de .rd-v4 .rd-cifras ---------- */
.rm-v1 .rm-cifras {
    overflow: hidden !important;
    margin-bottom: 18px !important;
    border: 1px solid #dce6ec !important;
    border-radius: 11px !important;
    background: #fff !important;
    box-shadow: 0 3px 10px rgba(32,75,105,.05) !important;
}

.rm-v1 .rm-cifras > header {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    padding: 9px 13px !important;
    border-bottom: 1px solid #d2dde3 !important;
    background: linear-gradient(180deg, #e7eef2 0%, #f2f6f8 100%) !important;
}

.rm-v1 .rm-cifras > header h2 {
    display: inline !important;
    margin: 0 8px 0 0 !important;
    color: #24465d !important;
    font-size: 15px !important;
}

.rm-v1 .rm-cifras > header span,
.rm-v1 .rm-cifras > header small {
    color: #8496a0 !important;
    font-size: 11px !important;
}

.rm-v1 .rm-cifras-grid {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
}

.rm-v1 .rm-cifra {
    display: grid !important;
    grid-template-columns: 31px minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: center !important;
    min-width: 0 !important;
    padding: 10px 9px !important;
    border-right: 1px solid #e7eef2 !important;
    border-top: 0 !important;
}

.rm-v1 .rm-cifra:last-child { border-right: 0 !important; }

.rm-v1 .rm-cifra-icono {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 31px !important;
    height: 31px !important;
    min-width: 31px !important;
    flex: 0 0 31px !important;
    border-radius: 8px !important;
    background: #eef4f7 !important;
    color: #607e91 !important;
}

.rm-v1 .rm-cifra-icono .resumen-icono {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.rm-v1 .rm-cifra-max .rm-cifra-icono { background:#fff0f0 !important; color:#d85858 !important; }
.rm-v1 .rm-cifra-min .rm-cifra-icono { background:#edf5fb !important; color:#4d8dbc !important; }
.rm-v1 .rm-cifra-media .rm-cifra-icono { background:#f4f1f1 !important; color:#956f70 !important; }
.rm-v1 .rm-cifra-lluvia .rm-cifra-icono { background:#f2edfb !important; color:#7355b4 !important; }
.rm-v1 .rm-cifra-viento .rm-cifra-icono { background:#fff0f0 !important; color:#d85858 !important; }
.rm-v1 .rm-cifra-sol .rm-cifra-icono { background:#fff8e6 !important; color:#d4a01f !important; }
.rm-v1 .rm-cifra-presion .rm-cifra-icono { background:#eef4f7 !important; color:#607e91 !important; }

/* ---------- TABLAS: misma base que .rd-v4 .tarjeta-tabla ---------- */
.rm-v1 .tarjeta-tabla {
    overflow: hidden !important;
    min-width: 0 !important;
    padding-top: 0 !important;
    border: 1px solid #dce6ec !important;
    border-radius: 11px !important;
    background: #fff !important;
    box-shadow: 0 3px 10px rgba(32,75,105,.05) !important;
}

.rm-v1 .tarjeta-tabla > header {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    min-height: 0 !important;
    padding: 11px 13px !important;
    border-top: 0 !important;
    border-top-left-radius: inherit !important;
    border-top-right-radius: inherit !important;
}

.rm-v1 .tarjeta-tabla > header h2 {
    margin: 0 !important;
    color: #26343d !important;
    font-size: 15px !important;
}

.rm-v1 .tarjeta-tabla > header .icono-tabla,
.rm-v1 .tarjeta-tabla > header .icono-tabla-svg {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    flex: 0 0 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-size: 0 !important;
}

.rm-v1 .tarjeta-tabla > header .icono-tabla svg,
.rm-v1 .tarjeta-tabla > header .icono-tabla-svg svg {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    overflow: visible !important;
}

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

.rm-v1 .tarjeta-tabla td {
    padding: 7px 11px !important;
    border-top: 1px solid #e5edf2 !important;
    background: transparent !important;
    line-height: 1.35 !important;
    vertical-align: middle !important;
}

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

.rm-v1 .tarjeta-tabla td:first-child {
    width: 46% !important;
    color: #4f6572 !important;
}

.rm-v1 .tarjeta-tabla td:last-child {
    color: #203e52 !important;
    font-weight: 700 !important;
    text-align: right !important;
}

.rm-v1 .dato-secundario-tabla {
    display: inline !important;
    margin: 0 0 0 4px !important;
    color: #81939d !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
}

.rm-v1 .dato-rojo { color:#df3937 !important; }
.rm-v1 .dato-azul { color:#2e80c4 !important; }

.rm-v1 .rm-fila-separador td {
    border-top: 2px solid rgba(74,105,123,.13) !important;
}

/* Bordes/sombras de familia: idénticos al diario */
.rm-v1 .tarjeta-tabla.tabla-roja {
    border-color: rgba(210,82,82,.24) !important;
    box-shadow: 0 5px 16px rgba(198,63,63,.10) !important;
}
.rm-v1 .tarjeta-tabla.tabla-gris {
    border-color: rgba(87,119,138,.24) !important;
    box-shadow: 0 5px 16px rgba(76,110,132,.09) !important;
}
.rm-v1 .tarjeta-tabla.tabla-verdeagua {
    border-color: rgba(34,165,157,.24) !important;
    box-shadow: 0 5px 16px rgba(28,155,147,.09) !important;
}
.rm-v1 .tarjeta-tabla.tabla-azul {
    border-color: rgba(116,86,184,.27) !important;
    box-shadow: 0 5px 17px rgba(103,73,176,.11) !important;
}
.rm-v1 .tarjeta-tabla.tabla-amarilla {
    border-color: rgba(222,160,31,.27) !important;
    box-shadow: 0 5px 17px rgba(214,148,20,.11) !important;
}

/* Cabeceras finales V16 del diario: réplica literal */
.rm-v1 .tarjeta-tabla.tabla-roja > header {
    background: linear-gradient(180deg, #f4dada 0%, #fbeaea 100%) !important;
    border-bottom-color: #e7c1c1 !important;
}
.rm-v1 .tarjeta-tabla.tabla-roja > header .icono-tabla,
.rm-v1 .tarjeta-tabla.tabla-roja > header .icono-tabla-svg {
    color: #96545a !important;
}

.rm-v1 .tarjeta-tabla.tabla-gris > header {
    background: linear-gradient(180deg, #e3e8ec 0%, #f0f3f5 100%) !important;
    border-bottom-color: #cfd8de !important;
}
.rm-v1 .tarjeta-tabla.tabla-gris > header .icono-tabla,
.rm-v1 .tarjeta-tabla.tabla-gris > header .icono-tabla-svg {
    color: #586b78 !important;
}

.rm-v1 .tarjeta-tabla.tabla-verdeagua > header {
    background: linear-gradient(180deg, #efd2da 0%, #f8e5ea 100%) !important;
    border-bottom-color: #dfb7c2 !important;
}
.rm-v1 .tarjeta-tabla.tabla-verdeagua > header .icono-tabla,
.rm-v1 .tarjeta-tabla.tabla-verdeagua > header .icono-tabla-svg {
    color: #945b55 !important;
}

.rm-v1 .tarjeta-tabla.tabla-azul > header {
    background: linear-gradient(180deg, #dbeaf6 0%, #edf5fb 100%) !important;
    border-bottom-color: #c3dced !important;
}
.rm-v1 .tarjeta-tabla.tabla-azul > header .icono-tabla,
.rm-v1 .tarjeta-tabla.tabla-azul > header .icono-tabla-svg {
    color: #4d7592 !important;
}

.rm-v1 .tarjeta-tabla.tabla-amarilla > header {
    background: linear-gradient(180deg, #f8e9bf 0%, #fff5da 100%) !important;
    border-bottom-color: #ead79f !important;
}
.rm-v1 .tarjeta-tabla.tabla-amarilla > header .icono-tabla,
.rm-v1 .tarjeta-tabla.tabla-amarilla > header .icono-tabla-svg {
    color: #987225 !important;
}

/* Fondos interiores de tablas: mismos degradados del diario */
.rm-v1 .tarjeta-tabla.tabla-roja table {
    background: linear-gradient(90deg, rgba(255,241,241,.62), rgba(255,250,250,.34)) !important;
}
.rm-v1 .tarjeta-tabla.tabla-gris table {
    background: linear-gradient(90deg, rgba(240,245,248,.68), rgba(250,252,253,.38)) !important;
}
.rm-v1 .tarjeta-tabla.tabla-verdeagua table {
    background: linear-gradient(90deg, rgba(237,251,250,.68), rgba(249,254,254,.38)) !important;
}
.rm-v1 .tarjeta-tabla.tabla-azul table {
    background: linear-gradient(90deg, rgba(245,240,255,.72), rgba(251,249,255,.42)) !important;
}
.rm-v1 .tarjeta-tabla.tabla-amarilla table {
    background: linear-gradient(90deg, rgba(255,248,225,.78), rgba(255,253,244,.44)) !important;
}

/* La tarjeta izquierda conserva la altura de su bloque mensual. */
.rm-v1 .rm-tabla {
    align-self: stretch !important;
}
.rm-v1 .rm-tabla table {
    height: auto !important;
}

/* En pantallas estrechas, como en el diario, el dato secundario puede envolver. */
@media (max-width: 680px) {
    .rm-v1 .dato-secundario-tabla {
        white-space: normal !important;
    }
}


/* =========================================================
   RESUMEN MENSUAL V6 · ACCESO AL DETALLE DIARIO
   ---------------------------------------------------------
   Sustituye el texto "Ver día" por un control de información
   compacto y semántico, coherente con el resto de la interfaz.
========================================================= */

.rm-v1 .rm-dia-a-dia th:last-child,
.rm-v1 .rm-dia-a-dia td:last-child {
    width: 42px;
    padding-left: 6px;
    padding-right: 8px;
}

.rm-v1 .rm-dia-a-dia .rm-dia-detalle-celda {
    text-align: center;
}

.rm-v1 .rm-dia-a-dia .rm-dia-detalle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    margin: 0 auto;
    border: 1px solid #d3e0e7;
    border-radius: 7px;
    background: #f7fafc;
    color: #55798f;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(32,75,105,.035);
    transition:
        border-color .14s ease,
        background .14s ease,
        color .14s ease,
        box-shadow .14s ease,
        transform .14s ease;
}

.rm-v1 .rm-dia-a-dia .rm-dia-detalle .rm-icono {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rm-v1 .rm-dia-a-dia .rm-dia-detalle:hover,
.rm-v1 .rm-dia-a-dia .rm-dia-detalle:focus-visible {
    border-color: #8eb5cc;
    background: #edf6fb;
    color: #315f79;
    box-shadow: 0 2px 6px rgba(49,95,121,.12);
    text-decoration: none;
    transform: translateY(-1px);
    outline: none;
}

.rm-v1 .rm-dia-a-dia .rm-dia-detalle:focus-visible {
    box-shadow: 0 0 0 3px rgba(107,164,208,.16);
}

.rm-v1 .rm-dia-detalle-texto {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


/* =========================================================
   RESUMEN MENSUAL V7 · LEGIBILIDAD DE GRÁFICOS
   ---------------------------------------------------------
   - más separación entre tabla y títulos del eje Y;
   - títulos laterales más legibles;
   - números de día completos y centrados bajo cada celda;
   - reserva inferior para evitar recortes.
========================================================= */

.rm-v1 .rm-grafico-card {
    padding-left: 16px !important;
    padding-right: 7px !important;
    padding-bottom: 12px !important;
}

.rm-v1 .rm-grafico {
    overflow: visible !important;
}

.rm-v1 .apexcharts-canvas,
.rm-v1 .apexcharts-svg {
    overflow: visible !important;
}

.rm-v1 .apexcharts-yaxis-title,
.rm-v1 .apexcharts-yaxis-title text {
    font-size: 12px !important;
    font-weight: 700 !important;
}

.rm-v1 .apexcharts-yaxis-label {
    font-size: 10px !important;
    font-weight: 500 !important;
}

.rm-v1 .apexcharts-xaxis-label {
    font-size: 10px !important;
    font-weight: 600 !important;
}

.rm-v1 .apexcharts-xaxis-texts-g text {
    dominant-baseline: auto;
}

/* No dejamos que el borde inferior del bloque corte los números de día. */
.rm-v1 .rm-bloque-principal {
    overflow: visible !important;
}

/* Se conserva la silueta redondeada mediante los dos paneles interiores. */
.rm-v1 .rm-bloque-principal > :first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.rm-v1 .rm-bloque-principal > :last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* Temperatura tenía un desplazamiento heredado que comprimía el pie del gráfico. */
.rm-v1 .rm-grafico-temperatura .rm-grafico {
    margin-top: -6px !important;
}

/* En la tabla + gráfico dejamos un pequeño colchón visual junto al eje izquierdo. */
.rm-v1 .rm-grafico-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 1px;
    background: #eef3f5;
    pointer-events: none;
}


/* =========================================================
   RESUMEN MENSUAL V8 · JERARQUÍA DE SECCIONES Y TABLA DIARIA
   ---------------------------------------------------------
   - "Comparación..." y "Detalle..." usan la misma jerarquía
     exterior que "Evolución mensual".
   - tabla diaria más compacta, elegante y fácil de escanear.
========================================================= */

.rm-v1 .rm-titulo-bloque-final {
    margin-top: 26px;
    margin-bottom: 8px;
}

.rm-v1 .rm-titulo-bloque-final h2 {
    color: #294e63;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.rm-v1 .rm-titulo-bloque-final p {
    margin-top: 3px;
    color: #7c909b;
    font-size: 11px;
}

.rm-v1 .rm-titulo-bloque-detalle {
    align-items: center;
}

.rm-v1 .rm-titulo-bloque-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border: 1px solid #d9e5ea;
    border-radius: 8px;
    background: #f6f9fb;
    color: #658395;
}

.rm-v1 .rm-titulo-bloque-icono .rm-icono {
    width: 16px;
    height: 16px;
}

/* Las tarjetas finales ya no necesitan una segunda cabecera interna. */
.rm-v1 .rm-comparacion-sin-cabecera,
.rm-v1 .rm-dia-a-dia-sin-cabecera {
    margin-top: 0;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(32,75,105,.035);
}

/* Comparación abierta / en espera */
.rm-v1 .rm-comparacion-sin-cabecera .rm-comparacion-scroll {
    border-radius: 10px;
}

.rm-v1 .rm-comparacion-sin-cabecera .rm-comparacion-espera {
    min-height: 52px;
    padding: 11px 14px;
    background: linear-gradient(180deg, #fbfcfd 0%, #f7fafb 100%);
}

.rm-v1 .rm-comparacion-sin-cabecera .rm-comparacion-espera > span {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
}

.rm-v1 .rm-comparacion-sin-cabecera .rm-comparacion-espera strong {
    font-size: 12px;
}

.rm-v1 .rm-comparacion-sin-cabecera .rm-comparacion-espera p {
    margin-top: 2px;
    font-size: 10px;
}

/* ---------------- DETALLE DÍA A DÍA ---------------- */

.rm-v1 .rm-dia-a-dia-scroll {
    overflow-x: auto;
    border-radius: 10px;
}

.rm-v1 .rm-dia-a-dia table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    font-variant-numeric: tabular-nums;
}

.rm-v1 .rm-dia-a-dia th,
.rm-v1 .rm-dia-a-dia td {
    padding: 5px 10px;
    border-top: 1px solid #edf2f5;
    color: #405f70;
    font-size: 10.5px;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
}

.rm-v1 .rm-dia-a-dia thead th {
    height: 29px;
    padding-top: 6px;
    padding-bottom: 6px;
    border-top: 0;
    border-bottom: 1px solid #d9e4e9;
    background: linear-gradient(180deg, #edf3f6 0%, #f7f9fa 100%);
    color: #5d7481;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.rm-v1 .rm-dia-a-dia tbody tr {
    height: 29px;
    background: #fff;
    transition: background .12s ease;
}

.rm-v1 .rm-dia-a-dia tbody tr:nth-child(even) {
    background: #fbfcfd;
}

.rm-v1 .rm-dia-a-dia tbody tr:hover {
    background: #f2f7fa;
}

.rm-v1 .rm-dia-a-dia tbody tr.rm-dia-hoy {
    background: #f4f9fc;
    box-shadow: inset 3px 0 0 #78a9c6;
}

.rm-v1 .rm-dia-a-dia tbody th {
    width: 54px;
    padding-left: 9px;
    padding-right: 9px;
    color: #496474;
    font-weight: 700;
}

.rm-v1 .rm-dia-numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 20px;
    padding: 0 5px;
    border: 1px solid #dce6eb;
    border-radius: 5px;
    background: #f3f7f9;
    color: #496879;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}

.rm-v1 .rm-dia-hoy .rm-dia-numero {
    border-color: #a9c7d8;
    background: #eaf4f9;
    color: #315f78;
}

.rm-v1 .rm-dia-a-dia tbody td {
    font-weight: 500;
}

.rm-v1 .rm-dia-a-dia tbody td.rm-rojo,
.rm-v1 .rm-dia-a-dia tbody td.rm-azul {
    font-weight: 700;
}

/* La lluvia sólo reclama atención cuando realmente la hubo. */
.rm-v1 .rm-dia-a-dia .rm-lluvia-cero {
    color: #70848f;
}

.rm-v1 .rm-dia-a-dia .rm-lluvia-activa {
    color: #2f76a6;
    font-weight: 800;
    background: rgba(79,159,210,.07);
}

/* Columna de acceso al resumen diario, algo más estrecha que en V6. */
.rm-v1 .rm-dia-a-dia th:last-child,
.rm-v1 .rm-dia-a-dia td:last-child {
    width: 36px;
    padding-left: 4px;
    padding-right: 6px;
}

.rm-v1 .rm-dia-a-dia .rm-dia-detalle {
    width: 23px;
    height: 23px;
    border-radius: 6px;
    box-shadow: none;
}

.rm-v1 .rm-dia-a-dia .rm-dia-detalle .rm-icono {
    width: 13px;
    height: 13px;
}

.rm-v1 .rm-dia-a-dia .rm-dia-detalle:hover,
.rm-v1 .rm-dia-a-dia .rm-dia-detalle:focus-visible {
    transform: none;
}

/* Anchos relativos para que la tabla respire sin desperdiciar espacio. */
.rm-v1 .rm-dia-a-dia th:nth-child(2),
.rm-v1 .rm-dia-a-dia td:nth-child(2),
.rm-v1 .rm-dia-a-dia th:nth-child(3),
.rm-v1 .rm-dia-a-dia td:nth-child(3),
.rm-v1 .rm-dia-a-dia th:nth-child(4),
.rm-v1 .rm-dia-a-dia td:nth-child(4) {
    width: 13.5%;
}

.rm-v1 .rm-dia-a-dia th:nth-child(5),
.rm-v1 .rm-dia-a-dia td:nth-child(5),
.rm-v1 .rm-dia-a-dia th:nth-child(6),
.rm-v1 .rm-dia-a-dia td:nth-child(6),
.rm-v1 .rm-dia-a-dia th:nth-child(7),
.rm-v1 .rm-dia-a-dia td:nth-child(7) {
    width: 12.5%;
}

.rm-v1 .rm-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (max-width: 760px) {
    .rm-v1 .rm-dia-a-dia table {
        min-width: 690px;
    }
}


/* =========================================================
   RESUMEN MENSUAL V9 · TABLA DIARIA MÁS LEGIBLE
   ---------------------------------------------------------
   - sombreado real de días pares;
   - tipografía claramente mayor;
   - mejor contraste y lectura horizontal;
   - mantiene una altura de fila contenida.
========================================================= */

/* Cabecera más visible, sin convertirse en una banda pesada. */
.rm-v1 .rm-dia-a-dia thead th {
    height: 32px !important;
    padding: 7px 10px !important;
    background: linear-gradient(180deg, #e7eef2 0%, #f1f5f7 100%) !important;
    border-bottom: 1px solid #cfdbe1 !important;
    color: #4f6876 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .025em !important;
}

/* Fuente de datos: aumento claro respecto a V8. */
.rm-v1 .rm-dia-a-dia th,
.rm-v1 .rm-dia-a-dia td {
    padding: 5px 11px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
}

/* Altura compacta pese al aumento tipográfico. */
.rm-v1 .rm-dia-a-dia tbody tr {
    height: 31px !important;
    background: #fff !important;
}

/* Zebra por número REAL de día. */
.rm-v1 .rm-dia-a-dia tbody tr.rm-dia-impar {
    background: #ffffff !important;
}

.rm-v1 .rm-dia-a-dia tbody tr.rm-dia-par {
    background: #f3f7f9 !important;
}

/* El sombreado del día par debe afectar a toda la fila, incluso celdas con
   pequeños fondos semánticos heredados. */
.rm-v1 .rm-dia-a-dia tbody tr.rm-dia-par > th,
.rm-v1 .rm-dia-a-dia tbody tr.rm-dia-par > td {
    background-color: rgba(239, 245, 248, .72);
}

/* Hover suficientemente perceptible para seguir una fila larga. */
.rm-v1 .rm-dia-a-dia tbody tr:hover,
.rm-v1 .rm-dia-a-dia tbody tr.rm-dia-par:hover {
    background: #eaf2f6 !important;
}

.rm-v1 .rm-dia-a-dia tbody tr:hover > th,
.rm-v1 .rm-dia-a-dia tbody tr:hover > td {
    background-color: #eaf2f6 !important;
}

/* Jornada actual: sigue teniendo prioridad sobre el zebra. */
.rm-v1 .rm-dia-a-dia tbody tr.rm-dia-hoy,
.rm-v1 .rm-dia-a-dia tbody tr.rm-dia-hoy > th,
.rm-v1 .rm-dia-a-dia tbody tr.rm-dia-hoy > td {
    background: #eaf5fa !important;
}

.rm-v1 .rm-dia-a-dia tbody tr.rm-dia-hoy {
    box-shadow: inset 3px 0 0 #6fa5c3 !important;
}

/* Número de día más fácil de localizar, sin aumentar apenas la fila. */
.rm-v1 .rm-dia-numero {
    min-width: 28px !important;
    height: 21px !important;
    padding: 0 6px !important;
    border-color: #cfdde4 !important;
    background: #f8fafb !important;
    color: #385d72 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
}

.rm-v1 .rm-dia-par .rm-dia-numero {
    background: #e7eff3 !important;
    border-color: #c8d7df !important;
}

.rm-v1 .rm-dia-hoy .rm-dia-numero {
    background: #dcecf5 !important;
    border-color: #9fc0d2 !important;
    color: #285a75 !important;
}

/* Valores ligeramente más oscuros para mejorar lectura a distancia. */
.rm-v1 .rm-dia-a-dia tbody td {
    color: #334f5f !important;
    font-weight: 550 !important;
}

/* Máxima / mínima mantienen protagonismo meteorológico. */
.rm-v1 .rm-dia-a-dia tbody td.rm-rojo {
    color: #c94444 !important;
    font-weight: 750 !important;
}

.rm-v1 .rm-dia-a-dia tbody td.rm-azul {
    color: #3e7ea9 !important;
    font-weight: 750 !important;
}

/* Media un poco más presente que lluvia/racha/sol. */
.rm-v1 .rm-dia-a-dia tbody td:nth-child(4) {
    color: #3e5665 !important;
    font-weight: 650 !important;
}

/* Lluvia cero: discreta. */
.rm-v1 .rm-dia-a-dia .rm-lluvia-cero {
    color: #71858f !important;
}

/* Con lluvia: mantiene el azul, pero sin romper el zebra de la fila. */
.rm-v1 .rm-dia-a-dia .rm-lluvia-activa {
    color: #246f9f !important;
    font-weight: 800 !important;
    box-shadow: inset 0 0 0 999px rgba(79,159,210,.055);
}

/* Botón de detalle algo más visible para acompañar la nueva tipografía. */
.rm-v1 .rm-dia-a-dia .rm-dia-detalle {
    width: 25px !important;
    height: 25px !important;
    border-color: #cbdbe3 !important;
    background: rgba(255,255,255,.78) !important;
}

.rm-v1 .rm-dia-a-dia .rm-dia-detalle .rm-icono {
    width: 14px !important;
    height: 14px !important;
}

/* Primera columna y acción final algo más contenidas para dedicar el ancho
   a los datos meteorológicos. */
.rm-v1 .rm-dia-a-dia tbody th,
.rm-v1 .rm-dia-a-dia thead th:first-child {
    width: 50px !important;
}

.rm-v1 .rm-dia-a-dia th:last-child,
.rm-v1 .rm-dia-a-dia td:last-child {
    width: 38px !important;
}

/* En pantallas muy anchas se puede subir un punto más sin ganar altura. */
@media (min-width: 1350px) {
    .rm-v1 .rm-dia-a-dia th,
    .rm-v1 .rm-dia-a-dia td {
        font-size: 12.5px !important;
    }

    .rm-v1 .rm-dia-a-dia thead th {
        font-size: 11.5px !important;
    }
}


/* =========================================================
   RESUMEN MENSUAL V10 · SOMBREADO REAL DE DÍAS PARES
   ---------------------------------------------------------
   El fondo se aplica a cada celda de la fila completa; así no
   puede quedar oculto por fondos heredados de <td> o <th>.
========================================================= */

.rm-v1 .rm-dia-a-dia tbody tr.rm-dia-par > th,
.rm-v1 .rm-dia-a-dia tbody tr.rm-dia-par > td {
    background: #eaf1f5 !important;
}

.rm-v1 .rm-dia-a-dia tbody tr.rm-dia-impar > th,
.rm-v1 .rm-dia-a-dia tbody tr.rm-dia-impar > td {
    background: #ffffff !important;
}

/* La lluvia conserva un matiz propio sin romper la banda horizontal. */
.rm-v1 .rm-dia-a-dia tbody tr.rm-dia-par > td.rm-lluvia-activa {
    background: #e0edf4 !important;
}

.rm-v1 .rm-dia-a-dia tbody tr.rm-dia-impar > td.rm-lluvia-activa {
    background: #f0f7fa !important;
}

/* Hover y jornada actual tienen prioridad. */
.rm-v1 .rm-dia-a-dia tbody tr:hover > th,
.rm-v1 .rm-dia-a-dia tbody tr:hover > td {
    background: #dfeaf0 !important;
}

.rm-v1 .rm-dia-a-dia tbody tr.rm-dia-hoy > th,
.rm-v1 .rm-dia-a-dia tbody tr.rm-dia-hoy > td {
    background: #e3f1f8 !important;
}


/* =========================================================
   RESUMEN MENSUAL V11 · GRÁFICOS, COMPARATIVA Y LLUVIA
========================================================= */

/* Más separación entre los títulos verticales y los números de la escala. */
.rm-v1 .rm-grafico-card {
    padding-left: 24px !important;
    padding-right: 14px !important;
}

/* Alternador temperatura / humedad. */
.rm-v1 .rm-grafico-cabecera-alternable {
    justify-content: space-between !important;
    align-items: center;
    gap: 10px !important;
    height: 31px !important;
    padding: 4px 9px 1px 12px !important;
    text-transform: none !important;
}

.rm-v1 .rm-grafico-leyenda {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: #6d818d;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}

.rm-v1 .rm-grafico-cabecera-alternable.modo-humedad .rm-grafico-leyenda span:nth-child(1)::before {
    background: #4f9b78 !important;
}

.rm-v1 .rm-grafico-cabecera-alternable.modo-humedad .rm-grafico-leyenda span:nth-child(2)::before {
    background: #4a83b8 !important;
}

.rm-v1 .rm-grafico-alternar {
    min-height: 24px;
    padding: 4px 9px;
    border: 1px solid #c9dbe4;
    border-radius: 7px;
    background: #f7fafc;
    color: #476b7f;
    font: inherit;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
}

.rm-v1 .rm-grafico-alternar:hover,
.rm-v1 .rm-grafico-alternar:focus-visible {
    border-color: #8eb4c9;
    background: #edf6fa;
    color: #2f5d76;
    outline: none;
}

/* Comparación: tipografía más grande y quinta columna histórica. */
.rm-v1 .rm-comparacion-tabla {
    min-width: 900px;
    table-layout: fixed;
}

.rm-v1 .rm-comparacion-tabla th,
.rm-v1 .rm-comparacion-tabla td {
    padding: 10px 12px !important;
    font-size: 13px !important;
    line-height: 1.28 !important;
}

.rm-v1 .rm-comparacion-tabla thead th {
    background: linear-gradient(180deg, #e8eff3 0%, #f4f7f9 100%) !important;
    color: #4d6776 !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    letter-spacing: .02em !important;
    white-space: normal !important;
}

.rm-v1 .rm-comparacion-tabla thead th small {
    display: block;
    margin-top: 3px;
    color: #7f919b;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.rm-v1 .rm-comparacion-tabla tbody th {
    color: #3f5e6f !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

.rm-v1 .rm-comparacion-tabla tbody td {
    color: #2f4f61 !important;
    font-size: 13px !important;
    font-weight: 650 !important;
}

.rm-v1 .rm-comparacion-tabla th:first-child,
.rm-v1 .rm-comparacion-tabla td:first-child { width: 22%; }

.rm-v1 .rm-comparacion-tabla th:nth-child(2),
.rm-v1 .rm-comparacion-tabla td:nth-child(2),
.rm-v1 .rm-comparacion-tabla th:nth-child(3),
.rm-v1 .rm-comparacion-tabla td:nth-child(3) { width: 16%; }

.rm-v1 .rm-comparacion-tabla th:nth-child(4),
.rm-v1 .rm-comparacion-tabla td:nth-child(4) { width: 15%; }

.rm-v1 .rm-comparacion-tabla th:nth-child(5),
.rm-v1 .rm-comparacion-tabla td:nth-child(5) { width: 31%; }

.rm-v1 .rm-delta,
.rm-v1 .rm-historica-delta {
    font-size: 12px !important;
}

.rm-v1 .rm-historica-celda {
    white-space: normal !important;
}

.rm-v1 .rm-historica-delta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    padding: 4px 8px;
    border-radius: 999px;
    font-weight: 800;
    white-space: nowrap;
}

.rm-v1 .rm-historica-delta.sube {
    background: #fff0ee;
    color: #bd5148;
}

.rm-v1 .rm-historica-delta.baja {
    background: #edf5fb;
    color: #447fa8;
}

.rm-v1 .rm-historica-delta.neutro {
    background: #eef3f5;
    color: #607782;
}

.rm-v1 .rm-historica-celda small {
    display: block;
    margin-top: 4px;
    color: #7d909a;
    font-size: 10.5px;
    font-weight: 500;
    white-space: normal;
}

.rm-v1 .rm-historica-na {
    color: #a3b0b7;
}

/* Perfil y relleno azul de la columna Lluvia. */
.rm-v1 .rm-dia-a-dia th:nth-child(5),
.rm-v1 .rm-dia-a-dia td:nth-child(5) {
    border-left: 1px solid #91bdd8 !important;
    border-right: 1px solid #91bdd8 !important;
}

.rm-v1 .rm-dia-a-dia thead th:nth-child(5) {
    border-top: 1px solid #82b2cf !important;
    background: linear-gradient(180deg, #cfe5f2 0%, #e4f1f8 100%) !important;
    color: #2f6689 !important;
}

.rm-v1 .rm-dia-a-dia tbody tr.rm-dia-impar > td:nth-child(5) {
    background: #eaf5fb !important;
}

.rm-v1 .rm-dia-a-dia tbody tr.rm-dia-par > td:nth-child(5) {
    background: #d8eaf5 !important;
}

.rm-v1 .rm-dia-a-dia tbody tr:last-child > td:nth-child(5) {
    border-bottom: 1px solid #82b2cf !important;
}

.rm-v1 .rm-dia-a-dia tbody tr:hover > td:nth-child(5) {
    background: #cfe7f4 !important;
}

.rm-v1 .rm-dia-a-dia tbody tr.rm-dia-hoy > td:nth-child(5) {
    background: #cee6f3 !important;
}


/* =========================================================
   RESUMEN MENSUAL V13 · CONTEXTO HISTÓRICO
========================================================= */

/* La comparativa incorpora ahora dos columnas históricas. */
.rm-v1 .rm-comparacion-tabla {
    min-width: 1120px !important;
}

.rm-v1 .rm-comparacion-tabla th,
.rm-v1 .rm-comparacion-tabla td {
    font-size: 13.5px !important;
}

.rm-v1 .rm-comparacion-tabla thead th {
    font-size: 11.5px !important;
    vertical-align: bottom;
}

.rm-v1 .rm-comparacion-tabla th:first-child,
.rm-v1 .rm-comparacion-tabla td:first-child { width: 18% !important; }

.rm-v1 .rm-comparacion-tabla th:nth-child(2),
.rm-v1 .rm-comparacion-tabla td:nth-child(2) { width: 12% !important; }

.rm-v1 .rm-comparacion-tabla th:nth-child(3),
.rm-v1 .rm-comparacion-tabla td:nth-child(3) { width: 12% !important; }

.rm-v1 .rm-comparacion-tabla th:nth-child(4),
.rm-v1 .rm-comparacion-tabla td:nth-child(4) { width: 16% !important; }

.rm-v1 .rm-comparacion-tabla th:nth-child(5),
.rm-v1 .rm-comparacion-tabla td:nth-child(5) { width: 20% !important; }

.rm-v1 .rm-comparacion-tabla th:nth-child(6),
.rm-v1 .rm-comparacion-tabla td:nth-child(6) { width: 22% !important; }

/* Cabeceras históricas: el nombre del mes queda inequívoco. */
.rm-v1 .rm-historica-cabecera,
.rm-v1 .rm-extremos-cabecera {
    color: #345f78 !important;
    background: linear-gradient(180deg, #deebf2 0%, #eef5f8 100%) !important;
}

/* Bloque de temperatura visualmente encuadrado dentro de la tabla. */
.rm-v1 .rm-comparacion-tabla tbody tr.rm-comparacion-temp > th,
.rm-v1 .rm-comparacion-tabla tbody tr.rm-comparacion-temp > td {
    background: #f6fafc !important;
}

.rm-v1 .rm-comparacion-tabla tbody tr.rm-comparacion-temp > th:first-child {
    border-left: 2px solid #7faac1 !important;
}

.rm-v1 .rm-comparacion-tabla tbody tr.rm-comparacion-temp > td:last-child {
    border-right: 2px solid #7faac1 !important;
}

.rm-v1 .rm-comparacion-tabla tbody tr.rm-comparacion-temp-inicio > th,
.rm-v1 .rm-comparacion-tabla tbody tr.rm-comparacion-temp-inicio > td {
    border-top: 2px solid #7faac1 !important;
}

.rm-v1 .rm-comparacion-tabla tbody tr.rm-comparacion-temp-fin > th,
.rm-v1 .rm-comparacion-tabla tbody tr.rm-comparacion-temp-fin > td {
    border-bottom: 2px solid #7faac1 !important;
}

.rm-v1 .rm-comparacion-tabla tbody tr.rm-comparacion-temp-inicio > th:first-child {
    border-top-left-radius: 7px;
}

.rm-v1 .rm-comparacion-tabla tbody tr.rm-comparacion-temp-inicio > td:last-child {
    border-top-right-radius: 7px;
}

.rm-v1 .rm-comparacion-tabla tbody tr.rm-comparacion-temp-fin > th:first-child {
    border-bottom-left-radius: 7px;
}

.rm-v1 .rm-comparacion-tabla tbody tr.rm-comparacion-temp-fin > td:last-child {
    border-bottom-right-radius: 7px;
}

/* Diferencia con el mes anterior: valor + lectura semántica. */
.rm-v1 .rm-diferencia-celda {
    white-space: normal !important;
}

.rm-v1 .rm-delta-contexto {
    display: inline-block;
    margin-left: 5px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.rm-v1 .rm-delta-contexto.sube { color: #b65a50; }
.rm-v1 .rm-delta-contexto.baja { color: #467ca0; }
.rm-v1 .rm-delta-contexto.neutro { color: #73858e; }

/* Extremos históricos del mismo mes. */
.rm-v1 .rm-extremos-celda {
    white-space: normal !important;
    line-height: 1.35 !important;
}

.rm-v1 .rm-extremo-linea {
    display: flex;
    align-items: baseline;
    gap: 5px;
    width: 100%;
    white-space: nowrap;
}

.rm-v1 .rm-extremo-linea + .rm-extremo-linea {
    margin-top: 4px;
}

.rm-v1 .rm-extremo-linea b {
    min-width: 66px;
    color: #667f8d;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
}

.rm-v1 .rm-extremo-linea small {
    margin-left: auto;
    padding: 2px 6px;
    border-radius: 999px;
    background: #eef3f5;
    color: #667f8b;
    font-size: 10px;
    font-weight: 700;
}

.rm-v1 .rm-extremo-max {
    color: #bd5148;
    font-weight: 750;
}

.rm-v1 .rm-extremo-min {
    color: #447fa8;
    font-weight: 750;
}


/* =========================================================
   RESUMEN MENSUAL V14 · AFINADO DE COMPARATIVA Y SOLAR
========================================================= */

/* El encuadre térmico sigue agrupando las tres filas, pero queda más tenue. */
.rm-v1 .rm-comparacion-tabla tbody tr.rm-comparacion-temp > th,
.rm-v1 .rm-comparacion-tabla tbody tr.rm-comparacion-temp > td {
    background: #fbfcfd !important;
}

.rm-v1 .rm-comparacion-tabla tbody tr.rm-comparacion-temp > th:first-child {
    border-left: 1px solid #c4d4dc !important;
}

.rm-v1 .rm-comparacion-tabla tbody tr.rm-comparacion-temp > td:last-child {
    border-right: 1px solid #c4d4dc !important;
}

.rm-v1 .rm-comparacion-tabla tbody tr.rm-comparacion-temp-inicio > th,
.rm-v1 .rm-comparacion-tabla tbody tr.rm-comparacion-temp-inicio > td {
    border-top: 1px solid #c4d4dc !important;
}

.rm-v1 .rm-comparacion-tabla tbody tr.rm-comparacion-temp-fin > th,
.rm-v1 .rm-comparacion-tabla tbody tr.rm-comparacion-temp-fin > td {
    border-bottom: 1px solid #c4d4dc !important;
}

/* Etiquetas de diferencia: mismo lenguaje de chips meteorológicos que el diario. */
.rm-v1 .rm-diferencia-celda {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.rm-v1 .rm-delta,
.rm-v1 .rm-delta-contexto {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 2px 8px !important;
    border: 1px solid #d8e2e8 !important;
    border-radius: 999px !important;
    background: #f4f7f9 !important;
    color: #536b79 !important;
    font-size: 10.5px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    white-space: nowrap;
    margin: 0 !important;
}

/* Temperatura */
.rm-v1 .rm-delta.sem-calor,
.rm-v1 .rm-delta-contexto.sem-calor {
    background: #f9e1e1 !important;
    border-color: #dda5a5 !important;
    color: #9b3030 !important;
}

.rm-v1 .rm-delta.sem-frio,
.rm-v1 .rm-delta-contexto.sem-frio {
    background: #e5eff8 !important;
    border-color: #a7c6e0 !important;
    color: #326b9a !important;
}

/* Lluvia: incremento = azul, no rojo. */
.rm-v1 .rm-delta.sem-lluvia,
.rm-v1 .rm-delta-contexto.sem-lluvia {
    background: #e0edf7 !important;
    border-color: #9bbfdc !important;
    color: #356b95 !important;
}

.rm-v1 .rm-delta.sem-sequia,
.rm-v1 .rm-delta-contexto.sem-sequia {
    background: #f8eed4 !important;
    border-color: #dbc17e !important;
    color: #81611e !important;
}

/* Viento */
.rm-v1 .rm-delta.sem-viento-fuerte,
.rm-v1 .rm-delta-contexto.sem-viento-fuerte {
    background: #f4e2df !important;
    border-color: #d8a6a0 !important;
    color: #8c443c !important;
}

.rm-v1 .rm-delta.sem-viento-calmo,
.rm-v1 .rm-delta-contexto.sem-viento-calmo {
    background: #e6f0ec !important;
    border-color: #a8cabc !important;
    color: #3c6f5e !important;
}

/* Sol */
.rm-v1 .rm-delta.sem-sol,
.rm-v1 .rm-delta-contexto.sem-sol {
    background: #f8efc9 !important;
    border-color: #ddc664 !important;
    color: #796414 !important;
}

.rm-v1 .rm-delta.sem-poco-sol,
.rm-v1 .rm-delta-contexto.sem-poco-sol {
    background: #edf0f2 !important;
    border-color: #c8d0d5 !important;
    color: #5f707a !important;
}

.rm-v1 .rm-delta.sem-neutro,
.rm-v1 .rm-delta-contexto.sem-neutro {
    background: #f4f7f9 !important;
    border-color: #d8e2e8 !important;
    color: #687c87 !important;
}

/* Extremos históricos: frase compacta, sin cápsula independiente para el año. */
.rm-v1 .rm-extremo-linea {
    gap: 5px !important;
}

.rm-v1 .rm-extremo-linea b {
    min-width: 88px !important;
    font-size: 9.5px !important;
}

.rm-v1 .rm-extremo-linea strong {
    font-size: 12.5px;
    font-weight: 800;
}

.rm-v1 .rm-extremo-linea small {
    margin-left: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #70838e !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
}

/* ---------------------------------------------------------
   DETALLE DÍA A DÍA
   Se revierte el perfil/sombreado azul especial de la columna Lluvia.
   El azul solicitado corresponde al GRÁFICO de precipitaciones, no a
   esta tabla. La columna vuelve a integrarse con el zebra general.
--------------------------------------------------------- */
.rm-v1 .rm-dia-a-dia th:nth-child(5),
.rm-v1 .rm-dia-a-dia td:nth-child(5) {
    border-left: 0 !important;
    border-right: 0 !important;
}

.rm-v1 .rm-dia-a-dia thead th:nth-child(5) {
    border-top: 0 !important;
    background: linear-gradient(180deg, #e7eef2 0%, #f1f5f7 100%) !important;
    color: #4f6876 !important;
}

.rm-v1 .rm-dia-a-dia tbody tr.rm-dia-impar > td:nth-child(5) {
    background: #ffffff !important;
    color: #334f5f !important;
}

.rm-v1 .rm-dia-a-dia tbody tr.rm-dia-par > td:nth-child(5) {
    background: #eaf1f5 !important;
    color: #334f5f !important;
}

.rm-v1 .rm-dia-a-dia tbody tr:last-child > td:nth-child(5) {
    border-bottom: 0 !important;
}

.rm-v1 .rm-dia-a-dia tbody tr:hover > td:nth-child(5) {
    background: #dfeaf0 !important;
}

.rm-v1 .rm-dia-a-dia tbody tr.rm-dia-hoy > td:nth-child(5) {
    background: #e3f1f8 !important;
}

.rm-v1 .rm-dia-a-dia .rm-lluvia-activa,
.rm-v1 .rm-dia-a-dia .rm-lluvia-cero {
    color: #334f5f !important;
    font-weight: 550 !important;
    box-shadow: none !important;
}


/* =========================================================
   RESUMEN MENSUAL V15 · PRECIPITACIÓN MÁS LEGIBLE
   El azul solicitado se aplica a las columnas del GRÁFICO,
   no a la columna Lluvia de la tabla día a día.
========================================================= */

.rm-v1 #rmGraficoLluvia .apexcharts-bar-series path {
    shape-rendering: crispEdges;
}


/* =========================================================
   RESUMEN MENSUAL V16 · COMPARACIÓN LIMPIA + DETALLE DIARIO
========================================================= */

/* ---------- COMPARACIÓN: redistribución definitiva ---------- */

.rm-v1 .rm-comparacion-tabla {
    min-width: 1160px !important;
    table-layout: fixed !important;
}

.rm-v1 .rm-comparacion-tabla th:first-child,
.rm-v1 .rm-comparacion-tabla td:first-child { width: 17% !important; }

.rm-v1 .rm-comparacion-tabla th:nth-child(2),
.rm-v1 .rm-comparacion-tabla td:nth-child(2) { width: 11% !important; }

.rm-v1 .rm-comparacion-tabla th:nth-child(3),
.rm-v1 .rm-comparacion-tabla td:nth-child(3) { width: 11% !important; }

.rm-v1 .rm-comparacion-tabla th:nth-child(4),
.rm-v1 .rm-comparacion-tabla td:nth-child(4) { width: 19% !important; }

.rm-v1 .rm-comparacion-tabla th:nth-child(5),
.rm-v1 .rm-comparacion-tabla td:nth-child(5) { width: 18% !important; }

.rm-v1 .rm-comparacion-tabla th:nth-child(6),
.rm-v1 .rm-comparacion-tabla td:nth-child(6) { width: 24% !important; }

.rm-v1 .rm-valor-mensual {
    white-space: nowrap;
    font-weight: 700 !important;
}

/* El VALOR de diferencia deja de ser una etiqueta/cápsula. */
.rm-v1 .rm-delta-valor {
    display: inline !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    white-space: nowrap;
}

.rm-v1 .rm-delta-valor.sem-calor { color:#9b3030 !important; }
.rm-v1 .rm-delta-valor.sem-frio { color:#326b9a !important; }
.rm-v1 .rm-delta-valor.sem-lluvia { color:#356b95 !important; }
.rm-v1 .rm-delta-valor.sem-sequia { color:#81611e !important; }
.rm-v1 .rm-delta-valor.sem-viento-fuerte { color:#8c443c !important; }
.rm-v1 .rm-delta-valor.sem-viento-calmo { color:#3c6f5e !important; }
.rm-v1 .rm-delta-valor.sem-sol { color:#796414 !important; }
.rm-v1 .rm-delta-valor.sem-poco-sol { color:#5f707a !important; }
.rm-v1 .rm-delta-valor.sem-neutro { color:#687c87 !important; }

/* Solo la interpretación meteorológica mantiene aspecto de etiqueta. */
.rm-v1 .rm-delta-contexto {
    margin-left: 7px !important;
}

/* Media histórica: referencia primero; anomalía en texto, sin cápsula. */
.rm-v1 .rm-historica-celda {
    white-space: nowrap !important;
}

.rm-v1 .rm-historica-media {
    display: inline;
    color: #34596d;
    font-size: 13px;
    font-weight: 800;
}

.rm-v1 .rm-historica-anomalia {
    display: inline;
    margin-left: 7px;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 12px;
    font-weight: 750;
}

.rm-v1 .rm-historica-anomalia.sem-calor { color:#9b3030; }
.rm-v1 .rm-historica-anomalia.sem-frio { color:#326b9a; }
.rm-v1 .rm-historica-anomalia.sem-neutro { color:#687c87; }

.rm-v1 .rm-historica-celda small {
    margin-top: 3px !important;
}

/* Un único bloque histórico para las tres filas térmicas. */
.rm-v1 .rm-extremos-celda-global {
    padding: 8px 12px !important;
    vertical-align: middle !important;
    white-space: normal !important;
}

.rm-v1 .rm-extremo-registro {
    display: grid;
    grid-template-columns: minmax(96px, 1fr) auto auto;
    align-items: baseline;
    gap: 7px;
    padding: 4px 0;
    border-bottom: 1px solid #edf1f3;
}

.rm-v1 .rm-extremo-registro:last-child {
    border-bottom: 0;
}

.rm-v1 .rm-extremo-registro > span {
    color: #647b88;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .015em;
    white-space: nowrap;
}

.rm-v1 .rm-extremo-registro > strong {
    font-size: 12.5px;
    font-weight: 800;
    white-space: nowrap;
}

.rm-v1 .rm-extremo-registro > small {
    color: #71848e;
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
}

.rm-v1 .rm-extremo-max > strong { color:#bd5148; }
.rm-v1 .rm-extremo-min > strong { color:#447fa8; }

/* Recuadro térmico tenue y coherente incluso con rowspan. */
.rm-v1 .rm-comparacion-tabla tbody tr.rm-comparacion-temp > th,
.rm-v1 .rm-comparacion-tabla tbody tr.rm-comparacion-temp > td {
    background:#fbfcfd !important;
}

.rm-v1 .rm-comparacion-tabla tbody tr.rm-comparacion-temp-inicio > th,
.rm-v1 .rm-comparacion-tabla tbody tr.rm-comparacion-temp-inicio > td {
    border-top:1px solid #cbd9e0 !important;
}

.rm-v1 .rm-comparacion-tabla tbody tr.rm-comparacion-temp-fin > th,
.rm-v1 .rm-comparacion-tabla tbody tr.rm-comparacion-temp-fin > td {
    border-bottom:1px solid #cbd9e0 !important;
}

.rm-v1 .rm-comparacion-tabla tbody tr.rm-comparacion-temp > th:first-child {
    border-left:1px solid #cbd9e0 !important;
}

.rm-v1 .rm-extremos-celda-global {
    border-top:1px solid #cbd9e0 !important;
    border-right:1px solid #cbd9e0 !important;
    border-bottom:1px solid #cbd9e0 !important;
    background:#fbfcfd !important;
}

/* ---------- DETALLE DÍA A DÍA ---------- */

.rm-v1 .rm-dia-a-dia table {
    min-width: 930px !important;
}

.rm-v1 .rm-dia-a-dia thead th {
    font-size: 10.5px !important;
    letter-spacing: .02em !important;
    white-space: nowrap !important;
}

/* Ajuste de anchos a las nuevas variables. */
.rm-v1 .rm-dia-a-dia thead th:first-child,
.rm-v1 .rm-dia-a-dia tbody th {
    width: 50px !important;
}

.rm-v1 .rm-dia-a-dia th:nth-child(2),
.rm-v1 .rm-dia-a-dia td:nth-child(2),
.rm-v1 .rm-dia-a-dia th:nth-child(3),
.rm-v1 .rm-dia-a-dia td:nth-child(3),
.rm-v1 .rm-dia-a-dia th:nth-child(4),
.rm-v1 .rm-dia-a-dia td:nth-child(4) {
    width: 13% !important;
}

.rm-v1 .rm-dia-a-dia th:nth-child(5),
.rm-v1 .rm-dia-a-dia td:nth-child(5) {
    width: 15% !important;
}

.rm-v1 .rm-dia-a-dia th:nth-child(6),
.rm-v1 .rm-dia-a-dia td:nth-child(6) {
    width: 14% !important;
}

.rm-v1 .rm-dia-a-dia th:nth-child(7),
.rm-v1 .rm-dia-a-dia td:nth-child(7) {
    width: 14% !important;
}

.rm-v1 .rm-dia-a-dia th:nth-child(8),
.rm-v1 .rm-dia-a-dia td:nth-child(8) {
    width: 96px !important;
}

/* Lluvia: azul SOLO cuando existe precipitación. */
.rm-v1 .rm-dia-a-dia tbody td.rm-lluvia-activa {
    color: #2877aa !important;
    font-weight: 800 !important;
    background: inherit !important;
    box-shadow: none !important;
}

.rm-v1 .rm-dia-a-dia tbody td.rm-lluvia-cero {
    color: #334f5f !important;
    font-weight: 550 !important;
}

/* Rachas: >=40 rojo; >=60 morado. */
.rm-v1 .rm-dia-a-dia tbody td.rm-racha-roja {
    color: #c94747 !important;
    font-weight: 800 !important;
}

.rm-v1 .rm-dia-a-dia tbody td.rm-racha-morada {
    color: #7650a8 !important;
    font-weight: 850 !important;
}

/* Acción "Detalle": inequívoca, pero compacta. */
.rm-v1 .rm-dia-a-dia .rm-dia-detalle {
    width: auto !important;
    min-width: 74px !important;
    height: 27px !important;
    padding: 0 8px !important;
    gap: 5px;
    border: 1px solid #a9c6d7 !important;
    border-radius: 7px !important;
    background: #eef6fa !important;
    color: #356681 !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    white-space: nowrap;
}

.rm-v1 .rm-dia-a-dia .rm-dia-detalle .rm-icono {
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 14px;
}

.rm-v1 .rm-dia-a-dia .rm-dia-detalle > span {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.rm-v1 .rm-dia-a-dia .rm-dia-detalle:hover,
.rm-v1 .rm-dia-a-dia .rm-dia-detalle:focus-visible {
    border-color:#6e9fba !important;
    background:#dfeef6 !important;
    color:#27566f !important;
}


/* =========================================================
   RESUMEN MENSUAL V17 · AFINADO DE TABLAS
========================================================= */

/* ---------------------------------------------------------
   COMPARACIÓN Y CONTEXTO HISTÓRICO
   Menos peso tipográfico, alturas más regulares y mejor reparto.
--------------------------------------------------------- */

.rm-v1 .rm-comparacion-tabla {
    min-width: 1080px !important;
    table-layout: fixed !important;
}

.rm-v1 .rm-comparacion-tabla th,
.rm-v1 .rm-comparacion-tabla td {
    padding: 9px 11px !important;
    font-size: 12.25px !important;
    line-height: 1.25 !important;
}

.rm-v1 .rm-comparacion-tabla thead th {
    padding-top: 10px !important;
    padding-bottom: 9px !important;
    color: #506977 !important;
    font-size: 10.8px !important;
    font-weight: 700 !important;
    letter-spacing: .018em !important;
}

.rm-v1 .rm-comparacion-tabla tbody th {
    color: #3f5968 !important;
    font-size: 12.25px !important;
    font-weight: 600 !important;
}

.rm-v1 .rm-comparacion-tabla tbody td {
    color: #344f5f !important;
    font-size: 12.25px !important;
    font-weight: 500 !important;
}

.rm-v1 .rm-comparacion-tabla th:first-child,
.rm-v1 .rm-comparacion-tabla td:first-child { width: 18% !important; }

.rm-v1 .rm-comparacion-tabla th:nth-child(2),
.rm-v1 .rm-comparacion-tabla td:nth-child(2) { width: 11% !important; }

.rm-v1 .rm-comparacion-tabla th:nth-child(3),
.rm-v1 .rm-comparacion-tabla td:nth-child(3) { width: 11% !important; }

.rm-v1 .rm-comparacion-tabla th:nth-child(4),
.rm-v1 .rm-comparacion-tabla td:nth-child(4) { width: 18% !important; }

.rm-v1 .rm-comparacion-tabla th:nth-child(5),
.rm-v1 .rm-comparacion-tabla td:nth-child(5) { width: 18% !important; }

.rm-v1 .rm-comparacion-tabla th:nth-child(6),
.rm-v1 .rm-comparacion-tabla td:nth-child(6) { width: 24% !important; }

.rm-v1 .rm-valor-mensual {
    font-weight: 600 !important;
}

/* Diferencia: dato y lectura semántica alineados sin empastar. */
.rm-v1 .rm-diferencia-celda {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start;
    gap: 7px !important;
    flex-wrap: wrap;
}

.rm-v1 .rm-delta-valor {
    font-size: 12.5px !important;
    font-weight: 700 !important;
}

.rm-v1 .rm-delta-contexto {
    min-height: 20px !important;
    padding: 2px 7px !important;
    margin-left: 0 !important;
    font-size: 9.8px !important;
    font-weight: 650 !important;
}

/* Media histórica: valor en primera línea; anomalía y lectura en segunda. */
.rm-v1 .rm-historica-celda {
    text-align: center !important;
    white-space: normal !important;
}

.rm-v1 .rm-historica-media {
    display: block !important;
    color: #36586b !important;
    font-size: 12.75px !important;
    font-weight: 650 !important;
}

.rm-v1 .rm-historica-desvio {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 5px;
    margin-top: 3px;
    white-space: nowrap;
}

.rm-v1 .rm-historica-anomalia {
    display: inline !important;
    margin: 0 !important;
    font-size: 11.25px !important;
    font-weight: 650 !important;
}

.rm-v1 .rm-historica-desvio small {
    display: inline !important;
    margin: 0 !important;
    color: #7d8e97 !important;
    font-size: 9.6px !important;
    font-weight: 500 !important;
}

/* Extremos: cuatro registros bien alineados y sin apelotonamiento. */
.rm-v1 .rm-extremos-celda-global {
    padding: 7px 11px !important;
}

.rm-v1 .rm-extremo-registro {
    grid-template-columns: 112px 64px minmax(54px, 1fr) !important;
    gap: 6px !important;
    padding: 4px 0 !important;
}

.rm-v1 .rm-extremo-registro > span {
    color: #647a86 !important;
    font-size: 9px !important;
    font-weight: 700 !important;
}

.rm-v1 .rm-extremo-registro > strong {
    font-size: 12px !important;
    font-weight: 700 !important;
}

.rm-v1 .rm-extremo-registro > small {
    font-size: 9.6px !important;
    font-weight: 500 !important;
}

/* Fuera del bloque térmico las dos columnas históricas se unifican;
   evita dos columnas llenas de guiones y limpia la zona inferior. */
.rm-v1 .rm-historica-no-aplica {
    text-align: center !important;
    color: #a7b2b8 !important;
    background: #fcfdfd !important;
    font-weight: 400 !important;
}

/* Marco térmico todavía más discreto. */
.rm-v1 .rm-comparacion-tabla tbody tr.rm-comparacion-temp > th,
.rm-v1 .rm-comparacion-tabla tbody tr.rm-comparacion-temp > td,
.rm-v1 .rm-extremos-celda-global {
    background: #fcfdfd !important;
}

.rm-v1 .rm-comparacion-tabla tbody tr.rm-comparacion-temp-inicio > th,
.rm-v1 .rm-comparacion-tabla tbody tr.rm-comparacion-temp-inicio > td,
.rm-v1 .rm-comparacion-tabla tbody tr.rm-comparacion-temp-fin > th,
.rm-v1 .rm-comparacion-tabla tbody tr.rm-comparacion-temp-fin > td,
.rm-v1 .rm-comparacion-tabla tbody tr.rm-comparacion-temp > th:first-child,
.rm-v1 .rm-extremos-celda-global {
    border-color: #d7e1e6 !important;
}

/* ---------------------------------------------------------
   DETALLE DÍA A DÍA
   Más grande, menos negrita y zebra gris neutro.
--------------------------------------------------------- */

.rm-v1 .rm-dia-a-dia table {
    min-width: 970px !important;
    font-variant-numeric: tabular-nums;
}

.rm-v1 .rm-dia-a-dia thead th {
    height: 35px !important;
    padding: 8px 10px !important;
    background: linear-gradient(180deg, #e9eef1 0%, #f4f6f7 100%) !important;
    border-bottom: 1px solid #d3dde2 !important;
    color: #526a77 !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    line-height: 1.15 !important;
    letter-spacing: .015em !important;
    text-transform: none !important;
    white-space: nowrap !important;
}

.rm-v1 .rm-dia-a-dia th,
.rm-v1 .rm-dia-a-dia td {
    padding: 6px 11px !important;
    font-size: 12.5px !important;
    line-height: 1.22 !important;
}

.rm-v1 .rm-dia-a-dia tbody tr {
    height: 32px !important;
}

/* Días impares blancos; días pares gris neutro visible. */
.rm-v1 .rm-dia-a-dia tbody tr.rm-dia-impar > th,
.rm-v1 .rm-dia-a-dia tbody tr.rm-dia-impar > td {
    background: #ffffff !important;
}

.rm-v1 .rm-dia-a-dia tbody tr.rm-dia-par > th,
.rm-v1 .rm-dia-a-dia tbody tr.rm-dia-par > td {
    background: #f1f3f4 !important;
}

.rm-v1 .rm-dia-a-dia tbody tr:hover > th,
.rm-v1 .rm-dia-a-dia tbody tr:hover > td {
    background: #e8eef1 !important;
}

.rm-v1 .rm-dia-a-dia tbody tr.rm-dia-hoy > th,
.rm-v1 .rm-dia-a-dia tbody tr.rm-dia-hoy > td {
    background: #eaf3f7 !important;
}

/* Peso general suave. */
.rm-v1 .rm-dia-a-dia tbody th {
    color: #465f6d !important;
    font-weight: 550 !important;
}

.rm-v1 .rm-dia-a-dia tbody td {
    color: #405762 !important;
    font-weight: 500 !important;
}

.rm-v1 .rm-dia-numero {
    min-width: 28px !important;
    height: 21px !important;
    border-color: #d5dde1 !important;
    background: rgba(255,255,255,.60) !important;
    color: #466170 !important;
    font-size: 11px !important;
    font-weight: 650 !important;
}

/* Temperaturas: color sí, exceso de negrita no. */
.rm-v1 .rm-dia-a-dia tbody td.rm-rojo {
    color: #c34949 !important;
    font-weight: 650 !important;
}

.rm-v1 .rm-dia-a-dia tbody td.rm-azul {
    color: #3f7fa9 !important;
    font-weight: 650 !important;
}

.rm-v1 .rm-dia-a-dia tbody td:nth-child(4) {
    color: #405762 !important;
    font-weight: 550 !important;
}

/* Precipitación: solo los días con lluvia reciben azul. */
.rm-v1 .rm-dia-a-dia tbody td.rm-lluvia-activa {
    color: #2877aa !important;
    font-weight: 700 !important;
    background: inherit !important;
}

.rm-v1 .rm-dia-a-dia tbody td.rm-lluvia-cero {
    color: #405762 !important;
    font-weight: 500 !important;
}

/* Rachas. */
.rm-v1 .rm-dia-a-dia tbody td.rm-racha-roja {
    color: #c94747 !important;
    font-weight: 700 !important;
}

.rm-v1 .rm-dia-a-dia tbody td.rm-racha-morada {
    color: #7650a8 !important;
    font-weight: 700 !important;
}

/* Nuevos anchos según las cabeceras definitivas. */
.rm-v1 .rm-dia-a-dia thead th:first-child,
.rm-v1 .rm-dia-a-dia tbody th {
    width: 52px !important;
}

.rm-v1 .rm-dia-a-dia th:nth-child(2),
.rm-v1 .rm-dia-a-dia td:nth-child(2),
.rm-v1 .rm-dia-a-dia th:nth-child(3),
.rm-v1 .rm-dia-a-dia td:nth-child(3),
.rm-v1 .rm-dia-a-dia th:nth-child(4),
.rm-v1 .rm-dia-a-dia td:nth-child(4) {
    width: 12.5% !important;
}

.rm-v1 .rm-dia-a-dia th:nth-child(5),
.rm-v1 .rm-dia-a-dia td:nth-child(5) {
    width: 15% !important;
}

.rm-v1 .rm-dia-a-dia th:nth-child(6),
.rm-v1 .rm-dia-a-dia td:nth-child(6) {
    width: 16% !important;
}

.rm-v1 .rm-dia-a-dia th:nth-child(7),
.rm-v1 .rm-dia-a-dia td:nth-child(7) {
    width: 13.5% !important;
}

.rm-v1 .rm-dia-a-dia th:nth-child(8),
.rm-v1 .rm-dia-a-dia td:nth-child(8) {
    width: 104px !important;
}

/* MÁS INFO: lectura inmediata de que es una acción. */
.rm-v1 .rm-dia-a-dia .rm-dia-detalle {
    min-width: 86px !important;
    height: 28px !important;
    padding: 0 9px !important;
    gap: 5px !important;
    border: 1px solid #9dbdce !important;
    border-radius: 7px !important;
    background: #edf5f9 !important;
    color: #315f77 !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: .01em;
}

.rm-v1 .rm-dia-a-dia .rm-dia-detalle .rm-icono {
    width: 15px !important;
    height: 15px !important;
}

.rm-v1 .rm-dia-a-dia .rm-dia-detalle:hover,
.rm-v1 .rm-dia-a-dia .rm-dia-detalle:focus-visible {
    border-color: #6798b2 !important;
    background: #dcebf3 !important;
    color: #234f67 !important;
}


/* =========================================================
   RESUMEN MENSUAL V18 · LEGIBILIDAD Y ALINEACIÓN FINAL
========================================================= */

/* ---------------------------------------------------------
   DETALLE DÍA A DÍA · cabeceras más grandes y en negrita
--------------------------------------------------------- */

.rm-v1 .rm-dia-a-dia thead th {
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: .012em !important;
    color: #425d6c !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
}

/* ---------------------------------------------------------
   COMPARACIÓN Y CONTEXTO HISTÓRICO
   Recuperamos tamaño y mejoramos reparto de columnas.
--------------------------------------------------------- */

.rm-v1 .rm-comparacion-tabla {
    min-width: 1140px !important;
}

.rm-v1 .rm-comparacion-tabla th,
.rm-v1 .rm-comparacion-tabla td {
    padding: 10px 12px !important;
    font-size: 13.5px !important;
    line-height: 1.28 !important;
}

.rm-v1 .rm-comparacion-tabla thead th {
    font-size: 12.2px !important;
    font-weight: 750 !important;
    color: #486270 !important;
}

.rm-v1 .rm-comparacion-tabla tbody th {
    font-size: 13.5px !important;
    font-weight: 650 !important;
}

.rm-v1 .rm-comparacion-tabla tbody td {
    font-size: 13.5px !important;
    font-weight: 500 !important;
}

/* Reparto para que Diferencia tenga aire suficiente y no salte la etiqueta. */
.rm-v1 .rm-comparacion-tabla th:first-child,
.rm-v1 .rm-comparacion-tabla td:first-child { width: 18% !important; }

.rm-v1 .rm-comparacion-tabla th:nth-child(2),
.rm-v1 .rm-comparacion-tabla td:nth-child(2) { width: 11% !important; }

.rm-v1 .rm-comparacion-tabla th:nth-child(3),
.rm-v1 .rm-comparacion-tabla td:nth-child(3) { width: 11% !important; }

.rm-v1 .rm-comparacion-tabla th:nth-child(4),
.rm-v1 .rm-comparacion-tabla td:nth-child(4) { width: 21% !important; }

.rm-v1 .rm-comparacion-tabla th:nth-child(5),
.rm-v1 .rm-comparacion-tabla td:nth-child(5) { width: 17% !important; }

.rm-v1 .rm-comparacion-tabla th:nth-child(6),
.rm-v1 .rm-comparacion-tabla td:nth-child(6) { width: 22% !important; }

/* DIFERENCIA: valor + etiqueta SIEMPRE en la misma línea. */
.rm-v1 .rm-diferencia-celda {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    white-space: nowrap !important;
}

.rm-v1 .rm-delta-valor {
    flex: 0 0 auto !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
}

.rm-v1 .rm-delta-contexto {
    flex: 0 0 auto !important;
    margin: 0 !important;
    min-height: 22px !important;
    padding: 2px 8px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

/* Azul más oscuro para incrementos de lluvia / días con lluvia. */
.rm-v1 .rm-delta-valor.sem-lluvia {
    color: #1f628b !important;
}

.rm-v1 .rm-delta-contexto.sem-lluvia {
    background: #dcebf5 !important;
    border-color: #8fb8d5 !important;
    color: #245f87 !important;
}

/* La referencia histórica conserva tamaño suficiente para leerse bien. */
.rm-v1 .rm-historica-media {
    font-size: 13.5px !important;
    font-weight: 700 !important;
}

.rm-v1 .rm-historica-anomalia {
    font-size: 12px !important;
    font-weight: 700 !important;
}

.rm-v1 .rm-historica-desvio small {
    font-size: 10px !important;
}

/* Extremos históricos algo más legibles sin ganar altura. */
.rm-v1 .rm-extremo-registro > span {
    font-size: 9.6px !important;
    font-weight: 750 !important;
}

.rm-v1 .rm-extremo-registro > strong {
    font-size: 12.5px !important;
    font-weight: 750 !important;
}

.rm-v1 .rm-extremo-registro > small {
    font-size: 10px !important;
}


/* =========================================================
   RESUMEN MENSUAL V19 · DIFERENCIAS + EXTREMOS
========================================================= */

/* Diferencia: valor con peso normal, no en negrita. */
.rm-v1 .rm-delta-valor {
    font-weight: 500 !important;
}

/* El año queda pegado al valor del extremo, como una sola lectura. */
.rm-v1 .rm-extremo-registro {
    grid-template-columns: 116px 1fr !important;
    gap: 8px !important;
}

.rm-v1 .rm-extremo-valor-anio {
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 4px;
    white-space: nowrap;
}

.rm-v1 .rm-extremo-valor-anio strong {
    font-size: 12.5px !important;
    font-weight: 800 !important;
}

.rm-v1 .rm-extremo-valor-anio small {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: #71848e !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
}


/* =========================================================
   RESUMEN MENSUAL V20 · COLUMNA DIFERENCIA
   ---------------------------------------------------------
   La celda vuelve a comportarse como una celda de tabla real.
   El display:flex aplicado directamente al <td> rompía la
   continuidad de las líneas horizontales y del encuadre.
========================================================= */

.rm-v1 .rm-comparacion-tabla td.rm-diferencia-celda {
    display: table-cell !important;
    vertical-align: middle !important;
    text-align: center !important;
    white-space: nowrap !important;
}

/* Valor + etiqueta juntos y centrados en la misma línea. */
.rm-v1 .rm-comparacion-tabla .rm-diferencia-celda .rm-delta-valor {
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 0 7px 0 0 !important;
    white-space: nowrap !important;
}

.rm-v1 .rm-comparacion-tabla .rm-diferencia-celda .rm-delta-contexto {
    display: inline-flex !important;
    vertical-align: middle !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

/* Continuidad de las líneas de fila. */
.rm-v1 .rm-comparacion-tabla tbody td.rm-diferencia-celda {
    border-top: 1px solid #e7edf0 !important;
}

.rm-v1 .rm-comparacion-tabla tbody tr:first-child td.rm-diferencia-celda {
    border-top: 0 !important;
}

/* Mantiene el marco térmico tenue. */
.rm-v1 .rm-comparacion-tabla tbody tr.rm-comparacion-temp-inicio td.rm-diferencia-celda {
    border-top: 1px solid #d7e1e6 !important;
}

.rm-v1 .rm-comparacion-tabla tbody tr.rm-comparacion-temp-fin td.rm-diferencia-celda {
    border-bottom: 1px solid #d7e1e6 !important;
}


/* =========================================================
   RESUMEN MENSUAL V21 · CABECERAS Y SEPARADOR HISTÓRICO
========================================================= */

/* Cabeceras centradas verticalmente dentro de su fila. */
.rm-v1 .rm-comparacion-tabla thead th {
    vertical-align: middle !important;
    height: 54px !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
}

.rm-v1 .rm-comparacion-tabla thead th small {
    margin-top: 3px !important;
    line-height: 1.15 !important;
}

/* Separador que faltaba entre MEDIA HISTÓRICA y EXTREMOS HISTÓRICOS.
   Se dibuja desde la cabecera y continúa por todo el bloque térmico. */
.rm-v1 .rm-comparacion-tabla thead th:nth-child(6) {
    border-left: 1px solid #d4dfe4 !important;
}

.rm-v1 .rm-extremos-celda-global {
    border-left: 1px solid #d4dfe4 !important;
}

/* En las filas no térmicas, donde las dos columnas se fusionan con colspan,
   no añadimos ningún separador interior artificial. */
.rm-v1 .rm-historica-no-aplica {
    border-left: 0 !important;
}


/* =========================================================
   RESUMEN MENSUAL V22 · DETALLE DÍA A DÍA
========================================================= */

.rm-v1 .rm-titulo-bloque-detalle p {
    max-width: 980px;
    line-height: 1.45 !important;
}

.rm-v1 .rm-titulo-bloque-detalle p strong {
    color: #456d84;
    font-weight: 800;
}

/* Zebra más perceptible para facilitar el seguimiento horizontal. */
.rm-v1 .rm-dia-a-dia tbody tr.rm-dia-impar > th,
.rm-v1 .rm-dia-a-dia tbody tr.rm-dia-impar > td {
    background: #ffffff !important;
}

.rm-v1 .rm-dia-a-dia tbody tr.rm-dia-par > th,
.rm-v1 .rm-dia-a-dia tbody tr.rm-dia-par > td {
    background: #eceff1 !important;
}

/* El hover sigue destacándose sobre el zebra. */
.rm-v1 .rm-dia-a-dia tbody tr:hover > th,
.rm-v1 .rm-dia-a-dia tbody tr:hover > td {
    background: #e2e9ed !important;
}

/* La jornada actual mantiene prioridad. */
.rm-v1 .rm-dia-a-dia tbody tr.rm-dia-hoy > th,
.rm-v1 .rm-dia-a-dia tbody tr.rm-dia-hoy > td {
    background: #e8f2f7 !important;
}


/* =========================================================
   RESUMEN MENSUAL V23 · GRÁFICO DE PRECIPITACIONES
   ---------------------------------------------------------
   El contorno de cada columna con lluvia se aplica por JS para
   evitar que las barras 0,0 mm creen una línea azul continua.
========================================================= */

.rm-v1 #rmGraficoLluvia .apexcharts-bar-area {
    shape-rendering: crispEdges;
}


/* =========================================================
   RESUMEN MENSUAL V25 · AJUSTES SVG DE GRÁFICOS
========================================================= */

.rm-v1 #rmGraficoPresion .rm-presion-banda,
.rm-v1 #rmGraficoViento .rm-flecha-viento,
.rm-v1 #rmGraficoLluvia .rm-borde-lluvia {
    pointer-events: none;
}

.rm-v1 #rmGraficoPresion .apexcharts-line {
    shape-rendering: geometricPrecision;
}

.rm-v1 #rmGraficoLluvia .apexcharts-bar-area,
.rm-v1 #rmGraficoLluvia .rm-borde-lluvia {
    shape-rendering: crispEdges;
}


/* =========================================================
   RESUMEN MENSUAL V26 · LEYENDA T/HR + PANEL SUPERIOR
========================================================= */

/* Leyenda del gráfico alternable: algo más grande y fácil de leer. */
.rm-v1 .rm-grafico-leyenda {
    font-size: 10.5px !important;
    gap: 14px !important;
}

.rm-v1 .rm-grafico-leyenda span::before {
    width: 8px !important;
    height: 8px !important;
    margin-right: 5px !important;
}

.rm-v1 .rm-grafico-alternar {
    font-size: 11px !important;
}

/* "El mes en cifras": réplica tipográfica del panel diario. */
.rm-v1 .rm-cifras-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
}

.rm-v1 .rm-cifra {
    display: grid !important;
    grid-template-columns: 31px minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: center !important;
    min-width: 0 !important;
    padding: 10px 9px !important;
}

.rm-v1 .rm-cifra-icono {
    width: 31px !important;
    height: 31px !important;
    min-width: 31px !important;
    flex: 0 0 31px !important;
    border-radius: 8px !important;
}

.rm-v1 .rm-cifra-icono .resumen-icono {
    width: 18px !important;
    height: 18px !important;
}

.rm-v1 .rm-cifra > div {
    min-width: 0 !important;
}

.rm-v1 .rm-cifra small {
    display: block !important;
    overflow: hidden !important;
    color: #6d838f !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

.rm-v1 .rm-cifra strong {
    display: block !important;
    margin: 2px 0 0 !important;
    color: #25465a;
    font-size: 22px !important;
    line-height: 1.05 !important;
    letter-spacing: -.025em !important;
    white-space: nowrap !important;
}

.rm-v1 .rm-cifra strong em {
    margin-left: 3px !important;
    color: #607987 !important;
    font-size: 10px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}

.rm-v1 .rm-cifra > div > span {
    display: block !important;
    margin-top: 3px !important;
    overflow: hidden !important;
    color: #8b9aa3 !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Colores del diario. */
.rm-v1 .rm-cifra-max strong { color: #c44343 !important; }
.rm-v1 .rm-cifra-min strong { color: #3d79b6 !important; }

.rm-v1 .rm-cifra-max .rm-cifra-icono { background:#fff0f0 !important; color:#d85858 !important; }
.rm-v1 .rm-cifra-min .rm-cifra-icono { background:#edf5fb !important; color:#4d8dbc !important; }
.rm-v1 .rm-cifra-media .rm-cifra-icono { background:#f4f1f1 !important; color:#956f70 !important; }
.rm-v1 .rm-cifra-lluvia .rm-cifra-icono { background:#f2edfb !important; color:#7355b4 !important; }
.rm-v1 .rm-cifra-viento .rm-cifra-icono { background:#fff0f0 !important; color:#d85858 !important; }
.rm-v1 .rm-cifra-sol .rm-cifra-icono { background:#fff8e6 !important; color:#d4a01f !important; }
.rm-v1 .rm-cifra-presion .rm-cifra-icono { background:#eef4f7 !important; color:#607e91 !important; }

/* El perfil de lluvia es una línea, no necesita ningún contorno SVG adicional. */
.rm-v1 #rmGraficoLluvia .apexcharts-bar-area {
    stroke: none !important;
}


/* =========================================================
   RESUMEN MENSUAL V27 · PANEL "EL MES EN CIFRAS"
   ---------------------------------------------------------
   Ajuste visual tomando como referencia directa el panel
   "La jornada en cifras": más presencia, iconos y cifras
   principales de tamaño equivalente y jerarquía más clara.
========================================================= */

.rm-v1 .rm-cifras {
    border-radius: 11px !important;
    box-shadow: 0 3px 10px rgba(32,75,105,.05) !important;
}

.rm-v1 .rm-cifras > header {
    min-height: 42px !important;
    padding: 10px 15px !important;
}

.rm-v1 .rm-cifras > header h2 {
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
}

.rm-v1 .rm-cifras > header span {
    margin-left: 8px !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
}

.rm-v1 .rm-cifras > header > small {
    font-size: 11px !important;
    line-height: 1.15 !important;
}

.rm-v1 .rm-cifra {
    grid-template-columns: 40px minmax(0, 1fr) !important;
    gap: 10px !important;
    min-height: 82px !important;
    padding: 12px 12px !important;
}

.rm-v1 .rm-cifra-icono {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    flex: 0 0 40px !important;
    border-radius: 9px !important;
}

.rm-v1 .rm-cifra-icono .resumen-icono {
    width: 21px !important;
    height: 21px !important;
}

.rm-v1 .rm-cifra small {
    color: #6c808b !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
}

.rm-v1 .rm-cifra strong {
    margin-top: 2px !important;
    font-size: 27px !important;
    font-weight: 800 !important;
    line-height: 1.02 !important;
    letter-spacing: -.03em !important;
}

.rm-v1 .rm-cifra strong em {
    margin-left: 3px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

.rm-v1 .rm-cifra > div > span {
    margin-top: 4px !important;
    color: #8999a2 !important;
    font-size: 10.5px !important;
    line-height: 1.15 !important;
}

/* Máxima/mínima con el mismo protagonismo térmico que en el diario. */
.rm-v1 .rm-cifra-max strong,
.rm-v1 .rm-cifra-max strong em {
    color: #d83b39 !important;
}

.rm-v1 .rm-cifra-min strong,
.rm-v1 .rm-cifra-min strong em {
    color: #2d7fbe !important;
}

/* El resto mantiene el tono principal del panel diario. */
.rm-v1 .rm-cifra-media strong,
.rm-v1 .rm-cifra-lluvia strong,
.rm-v1 .rm-cifra-viento strong,
.rm-v1 .rm-cifra-sol strong,
.rm-v1 .rm-cifra-presion strong {
    color: #25465a !important;
}

/* Mantener proporción en pantallas algo más estrechas sin volver al aspecto pequeño. */
@media (max-width: 1250px) {
    .rm-v1 .rm-cifra {
        grid-template-columns: 36px minmax(0, 1fr) !important;
        gap: 8px !important;
        padding: 11px 9px !important;
    }

    .rm-v1 .rm-cifra-icono {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
    }

    .rm-v1 .rm-cifra strong {
        font-size: 24px !important;
    }
}


/* =========================================================
   RESUMEN MENSUAL V28 · PANEL SUPERIOR
   COPIA LITERAL DEL PANEL "LA JORNADA EN CIFRAS"
   ---------------------------------------------------------
   Estos valores reproducen exactamente las reglas vigentes
   del resumen diario, sustituyendo únicamente rd-* por rm-*.
========================================================= */

.rm-v1 .rm-cifras {
    overflow: hidden !important;
    margin-bottom: 18px !important;
    border: 1px solid #dce6ec !important;
    border-radius: 11px !important;
    background: #fff !important;
    box-shadow: 0 3px 10px rgba(32,75,105,.05) !important;
}

.rm-v1 .rm-cifras > header {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    min-height: 0 !important;
    padding: 9px 13px !important;
    border-bottom: 1px solid #d2dde3 !important;
    background: linear-gradient(180deg,#e7eef2 0%,#f2f6f8 100%) !important;
}

.rm-v1 .rm-cifras > header h2 {
    display: inline !important;
    margin: 0 8px 0 0 !important;
    color: #24465d !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: normal !important;
}

.rm-v1 .rm-cifras > header span,
.rm-v1 .rm-cifras > header > small {
    margin: 0 !important;
    color: #8496a0 !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    line-height: normal !important;
}

.rm-v1 .rm-cifras-grid {
    display: grid !important;
    grid-template-columns: repeat(7,minmax(0,1fr)) !important;
}

.rm-v1 .rm-cifra {
    display: grid !important;
    grid-template-columns: 31px minmax(0,1fr) !important;
    gap: 8px !important;
    align-items: center !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 10px 9px !important;
    border-right: 1px solid #e7eef2 !important;
    border-top: 0 !important;
}

.rm-v1 .rm-cifra:last-child {
    border-right: 0 !important;
}

.rm-v1 .rm-cifra-icono {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 31px !important;
    height: 31px !important;
    min-width: 31px !important;
    flex: 0 0 31px !important;
    border-radius: 8px !important;
    background: #eef4f7 !important;
    color: #607e91 !important;
}

.rm-v1 .rm-cifra-icono .resumen-icono {
    width: 18px !important;
    height: 18px !important;
}

.rm-v1 .rm-cifra small,
.rm-v1 .rm-cifra strong,
.rm-v1 .rm-cifra span {
    display: block;
}

.rm-v1 .rm-cifra small {
    overflow: hidden !important;
    color: #6d838f !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

.rm-v1 .rm-cifra strong {
    margin-top: 2px !important;
    color: #25465a !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
    letter-spacing: -.025em !important;
    white-space: nowrap !important;
}

.rm-v1 .rm-cifra strong em {
    margin-left: 3px !important;
    color: #607987 !important;
    font-size: 10px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}

.rm-v1 .rm-cifra div > span {
    margin-top: 3px !important;
    overflow: hidden !important;
    color: #8b9aa3 !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Colores de iconos: exactamente los del resumen diario vigente. */
.rm-v1 .rm-cifra-max .rm-cifra-icono {
    background: #fff0f0 !important;
    color: #d85858 !important;
}

.rm-v1 .rm-cifra-min .rm-cifra-icono {
    background: #edf5fb !important;
    color: #4d8dbc !important;
}

.rm-v1 .rm-cifra-media .rm-cifra-icono {
    background: #f4f1f1 !important;
    color: #956f70 !important;
}

.rm-v1 .rm-cifra-lluvia .rm-cifra-icono {
    background: #f2edfb !important;
    color: #7355b4 !important;
}

.rm-v1 .rm-cifra-viento .rm-cifra-icono {
    background: #fff0f0 !important;
    color: #d85858 !important;
}

.rm-v1 .rm-cifra-sol .rm-cifra-icono {
    background: #fff8e6 !important;
    color: #d4a01f !important;
}

/* Presión no existe en el panel diario: conserva el neutro base del mismo sistema. */
.rm-v1 .rm-cifra-presion .rm-cifra-icono {
    background: #eef4f7 !important;
    color: #607e91 !important;
}

/* Máxima/mínima: mismo código visual posterior del diario. */
.rm-v1 .rm-cifra-max strong,
.rm-v1 .rm-cifra-max strong em {
    color: #d83b39 !important;
    font-weight: 800 !important;
}

.rm-v1 .rm-cifra-min strong,
.rm-v1 .rm-cifra-min strong em {
    color: #2d7fbe !important;
    font-weight: 800 !important;
}

/* El resto vuelve al peso/tono exacto del panel diario. */
.rm-v1 .rm-cifra-media strong,
.rm-v1 .rm-cifra-lluvia strong,
.rm-v1 .rm-cifra-viento strong,
.rm-v1 .rm-cifra-sol strong,
.rm-v1 .rm-cifra-presion strong {
    color: #25465a !important;
    font-weight: 700 !important;
}

/* Responsive: mismos cortes del diario. */
@media (max-width:1180px) {
    .rm-v1 .rm-cifras-grid {
        grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    }

    .rm-v1 .rm-cifra:nth-child(4) {
        border-right: 0 !important;
    }

    .rm-v1 .rm-cifra:nth-child(n+5) {
        border-top: 1px solid #e7eef2 !important;
    }
}

@media (max-width:680px) {
    .rm-v1 .rm-cifras-grid {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }

    .rm-v1 .rm-cifra {
        border-top: 1px solid #e7eef2 !important;
    }

    .rm-v1 .rm-cifra:nth-child(-n+2) {
        border-top: 0 !important;
    }

    .rm-v1 .rm-cifra:nth-child(2n) {
        border-right: 0 !important;
    }

    .rm-v1 .rm-cifra strong {
        font-size: 24px !important;
    }
}


/* =========================================================
   RESUMEN MENSUAL V37 · DESCRIPCIÓN Y EVOLUCIÓN MENSUAL
========================================================= */

/* Marco propio para la cabecera "Evolución mensual". */
.rm-v1 .rm-titulo-bloque-evolucion {
    margin-top: 20px !important;
    margin-bottom: 9px !important;
    padding: 9px 12px !important;
    border: 1px solid #d7e1e6 !important;
    border-radius: 9px !important;
    background: linear-gradient(180deg, #edf2f5 0%, #f7f9fa 100%) !important;
}

/* Línea vertical azul de acento en "Descripción del mes". */
.rm-v1 .rm-autotexto {
    position: relative;
    border-left: 4px solid #6fa7c4 !important;
    padding-left: 14px !important;
}

/* Mantener el redondeo limpio junto a la banda azul. */
.rm-v1 .rm-autotexto::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: -4px;
    width: 4px;
    border-radius: 4px;
    background: #6fa7c4;
    pointer-events: none;
}


/* =========================================================
   RESUMEN MENSUAL V40 · TABLAS SIN ESPACIO INTERIOR VACÍO
   ---------------------------------------------------------
   La tabla izquierda termina justo tras su última fila.
   El gráfico conserva su altura actual y sigue determinando
   la altura general del bloque cuando es el elemento mayor.
========================================================= */

.rm-v1 .rm-bloque-principal > .rm-tabla {
    align-self: start !important;
    height: auto !important;
    min-height: 0 !important;
}

/* El contenido tabular no se fuerza a ocupar la altura del gráfico. */
.rm-v1 .rm-bloque-principal > .rm-tabla table {
    height: auto !important;
}

/* El gráfico mantiene exactamente su comportamiento y altura vigentes. */
.rm-v1 .rm-bloque-principal > .rm-grafico-card {
    align-self: stretch !important;
}


/* =========================================================
   RESUMEN MENSUAL V45 · VIENTO Y LLUVIA
   Ensanchado correcto sin invadir las escalas Y
========================================================= */

.rm-v1 .rm-grafico-card:has(#rmGraficoViento),
.rm-v1 .rm-grafico-card:has(#rmGraficoLluvia) {
    padding-left: 1px !important;
    padding-right: 0 !important;
}

/* 8 px adicionales por la derecha: junto a los 7 px de padding
   eliminados suman 15 px extra. Apex recalcula ejes y plot como
   una unidad, por lo que las escalas permanecen fuera del gráfico. */
.rm-v1 #rmGraficoViento {
    width: calc(100% + 13px) !important;
    max-width: none !important;
}

.rm-v1 #rmGraficoLluvia {
    width: calc(100% + 8px) !important;
    max-width: none !important;
}

/* Elementos alternativos específicos para el resumen diario móvil. */
.rd-v4 .rd-titulo-temp-movil,
.rd-v4 .rd-dir-movil {
    display: none;
}

/* =========================================================
   RESPONSIVE MÓVIL · RESUMEN DIARIO
   Ajustes exclusivos para teléfonos (<= 760 px).
========================================================= */
.rd-v4 .rd-aviso-movil {
    display: none;
}

@media (max-width: 760px) {
    /* Selector de jornada: en móvil queda sólo fecha + Ver día (+ Hoy si procede). */
    .rd-v4 .rd-calendario .rd-dia-nav,
    .rd-v4 .rd-calendario .rd-dia-nav-off,
    .rd-v4 .rd-calendario .rd-ayer-boton {
        display: none !important;
    }

    /* Aviso discreto de que la vista móvil es una versión resumida. */
    .rd-v4 .rd-aviso-movil {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        margin: 0 0 14px;
        padding: 9px 11px;
        border: 1px solid #d8e5ec;
        border-radius: 9px;
        background: #f5f9fb;
        color: #607985;
    }

    .rd-v4 .rd-aviso-movil-icono {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 19px;
        width: 19px;
        height: 19px;
        color: #5d8eab;
    }

    .rd-v4 .rd-aviso-movil-icono .resumen-icono {
        width: 17px;
        height: 17px;
    }

    .rd-v4 .rd-aviso-movil p {
        margin: 0;
        font-size: 11.5px;
        line-height: 1.45;
        text-align: justify;
    }

    /* La jornada en cifras: subtítulo debajo del título, no en línea. */
    .rd-v4 .rd-cifras > header {
        display: block;
    }

    .rd-v4 .rd-cifras > header > div {
        display: block;
    }

    .rd-v4 .rd-cifras > header h2 {
        display: block;
        margin: 0;
    }

    .rd-v4 .rd-cifras > header span {
        display: block;
        margin-top: 2px;
        line-height: 1.3;
    }

    /* En teléfono se ofrece sólo el resumen tabular. */
    .rd-v4 .rd-grafico-card,
    .rd-v4 .rd-custom-modulo,
    .rd-v4 .rd-comparacion {
        display: none !important;
    }

    /* Al desaparecer las gráficas, evitamos un marco doble alrededor de cada tabla. */
    .rd-v4 .rd-bloque-principal,
    .rd-v4 .rd-modulo {
        display: block !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .rd-v4 .rd-mosaico {
        gap: 12px;
    }

    /* Filas secundarias que se omiten en la versión móvil resumida. */
    .rd-v4 tr.rd-movil-ocultar {
        display: none !important;
    }

    /* Cabecera abreviada de la tabla térmica. */
    .rd-v4 .rd-titulo-temp-escritorio {
        display: none !important;
    }
    .rd-v4 .rd-titulo-temp-movil {
        display: inline !important;
    }

    /* En móvil la dirección dominante muestra únicamente el nombre (p. ej. Oeste). */
    .rd-v4 .rd-dir-escritorio {
        display: none !important;
    }
    .rd-v4 .rd-dir-movil {
        display: inline !important;
    }

    /* Extremos y racha: conservar tipografía normal de los valores de la tabla; sólo cambia el color. */
    .rd-v4 .rd-tabla-temperatura td.dato-rojo,
    .rd-v4 .rd-tabla-temperatura td.dato-azul,
    .rd-v4 .tabla-verdeagua td.dato-rojo {
        font-weight: 700 !important;
        font-size: inherit !important;
        font-style: normal !important;
    }
}

/* =========================================================
   RESPONSIVE MÓVIL · RESUMEN MENSUAL
   Ajustes exclusivos para teléfonos (<= 760 px).
========================================================= */
.rm-v1 .rm-aviso-movil,
.rm-v1 .rm-fecha-movil {
    display: none;
}

@media (max-width: 760px) {
    /* Selector mensual: sin navegación rápida al mes anterior/siguiente. */
    .rm-v1 .rm-calendario .rm-mes-nav,
    .rm-v1 .rm-calendario .rm-mes-nav-off {
        display: none !important;
    }

    /* Aviso de que la vista móvil es deliberadamente resumida. */
    .rm-v1 .rm-aviso-movil {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        margin: 0 0 14px;
        padding: 9px 11px;
        border: 1px solid #d8e5ec;
        border-radius: 9px;
        background: #f5f9fb;
        color: #607985;
    }

    .rm-v1 .rm-aviso-movil-icono {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 20px;
        width: 20px;
        height: 20px;
        color: #5d8eab;
    }

    .rm-v1 .rm-aviso-movil-icono .resumen-icono {
        width: 18px;
        height: 18px;
    }

    .rm-v1 .rm-aviso-movil p {
        margin: 0;
        font-size: 11.5px;
        line-height: 1.45;
        text-align: justify;
        text-justify: inter-word;
    }

    /* Fechas compactas específicas de móvil. */
    .rm-v1 .rm-fecha-escritorio {
        display: none !important;
    }

    .rm-v1 .rm-fecha-movil {
        display: inline-block !important;
    }

    .rm-v1 .rm-fecha-panel .rm-fecha-movil {
        display: block !important;
        margin-top: 0;
    }

    .rm-v1 .dato-secundario-tabla .rm-fecha-movil {
        margin-left: 2px;
        line-height: 1.18;
        text-align: right;
        vertical-align: middle;
    }

    .rm-v1 .rm-fecha-movil-hora {
        display: block;
        margin-top: 2px;
        color: #91a0a8;
        font-size: 9.5px;
        font-weight: 500;
        white-space: nowrap;
    }

    /* En móvil se conservan las tablas-resumen, pero no las gráficas. */
    .rm-v1 .rm-grafico-card {
        display: none !important;
    }

    .rm-v1 .rm-bloque-principal {
        display: block !important;
        grid-template-columns: 1fr !important;
        overflow: hidden !important;
    }

    .rm-v1 .rm-bloque-principal > .rm-tabla {
        width: 100% !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
        border-radius: 9px !important;
    }

    /* Contenido avanzado reservado a la versión de escritorio. */
    .rm-v1 .rm-comparacion-cabecera-movil,
    .rm-v1 .rm-comparacion,
    .rm-v1 .rm-titulo-bloque-detalle,
    .rm-v1 .rm-dia-a-dia {
        display: none !important;
    }

    /* Fila secundaria omitida en el resumen móvil. */
    .rm-v1 tr.rm-movil-ocultar {
        display: none !important;
    }
}

/* =========================================================
   RESPONSIVE MÓVIL · RESUMEN MENSUAL V29
   Recupera Temperatura, Viento y Precipitaciones en formato
   compacto, siguiendo el criterio visual del resumen anual.
========================================================= */
.rm-v1 .rm-grafico-cabecera-movil {
    display: none;
}

@media (max-width: 760px) {
    /* Solo se recuperan los tres gráficos de consulta más útil. */
    .rm-v1 .rm-grafico-temperatura,
    .rm-v1 .rm-grafico-viento,
    .rm-v1 .rm-grafico-lluvia {
        display: block !important;
        min-height: 0 !important;
        align-self: auto !important;
        background: #fff;
        overflow: hidden !important;
    }

    .rm-v1 .rm-grafico-presion,
    .rm-v1 .rm-grafico-solar {
        display: none !important;
    }

    /* Tabla + gráfico vuelven a formar una única tarjeta vertical. */
    .rm-v1 .rm-bloque-con-grafico-movil {
        overflow: hidden !important;
    }

    .rm-v1 .rm-bloque-con-grafico-movil > .rm-tabla {
        border-radius: 0 !important;
        border-bottom: 1px solid #e5edf1 !important;
    }

    .rm-v1 .rm-bloque-con-grafico-movil > .rm-grafico-card {
        border-radius: 0 !important;
    }

    .rm-v1 .rm-grafico-card::before {
        display: none !important;
    }

    /* Cabeceras/leyendas compactas: sin botones de cambio de variable. */
    .rm-v1 .rm-grafico-cabecera-alternable {
        height: 27px !important;
        min-height: 27px !important;
        justify-content: flex-start !important;
        padding: 5px 7px 0 10px !important;
        gap: 7px !important;
    }

    .rm-v1 .rm-grafico-alternar {
        display: none !important;
    }

    .rm-v1 .rm-grafico-leyenda {
        gap: 8px !important;
        font-size: 8.8px !important;
    }

    .rm-v1 .rm-grafico-leyenda span::before {
        width: 7px !important;
        height: 7px !important;
        margin-right: 4px !important;
    }

    .rm-v1 .rm-grafico-leyenda span:nth-child(1)::before { background: #c94747 !important; }
    .rm-v1 .rm-grafico-leyenda span:nth-child(2)::before { background: #6b7780 !important; }
    .rm-v1 .rm-grafico-leyenda span:nth-child(3)::before { background: #4a83b8 !important; }

    .rm-v1 .rm-grafico-cabecera-movil {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 6px 10px;
        min-height: 25px;
        padding: 5px 8px 0 10px;
        color: #6d818d;
        font-size: 8.6px;
        font-weight: 700;
        line-height: 1.1;
        text-transform: uppercase;
    }

    .rm-v1 .rm-grafico-cabecera-movil span {
        white-space: nowrap;
    }

    .rm-v1 .rm-grafico-cabecera-movil span::before {
        content: "";
        display: inline-block;
        width: 7px;
        height: 7px;
        margin-right: 4px;
        border-radius: 50%;
        vertical-align: 0;
    }

    .rm-v1 .rm-leyenda-racha::before { background: #e6007e; }
    .rm-v1 .rm-leyenda-viento::before { background: #a83263; }
    .rm-v1 .rm-leyenda-direccion::before { background: #5b788d; }
    .rm-v1 .rm-leyenda-lluvia::before { background: #4f91c7; }
    .rm-v1 .rm-leyenda-acumulada::before { background: #397fae; }

    .rm-v1 .rm-grafico-cabecera-movil .rm-leyenda-unidad,
    .rm-v1 .rm-grafico-leyenda .rm-leyenda-unidad {
        margin-left: 1px;
        color: #82939c;
        font-weight: 700;
        letter-spacing: .01em;
        text-transform: none;
    }

    .rm-v1 .rm-grafico-cabecera-movil .rm-leyenda-unidad::before,
    .rm-v1 .rm-grafico-leyenda .rm-leyenda-unidad::before {
        display: none !important;
        content: none !important;
    }

    /* Altura y aprovechamiento horizontal similares a los gráficos anuales. */
    .rm-v1 .rm-grafico-temperatura {
        padding: 1px 3px 5px 5px !important;
    }

    .rm-v1 .rm-grafico-temperatura #rmGraficoTemperatura {
        /* V32: el render móvil ya mide 245 px; igualamos el contenedor para
           recortar 15 px de hueco inferior sin reducir el área del gráfico. */
        height: 245px !important;
        min-height: 245px !important;
        margin-top: -22px !important;
        /* V31: el borde izquierdo entra 30 px; el derecho permanece prácticamente igual. */
        margin-left: 3px !important;
        width: calc(100% - 2px) !important;
        max-width: none !important;
    }

    .rm-v1 .rm-grafico-viento {
        padding: 1px 2px 5px 4px !important;
    }

    .rm-v1 .rm-grafico-viento #rmGraficoViento {
        height: 235px !important;
        min-height: 235px !important;
        margin-top: -20px !important;
        margin-left: 18px !important;
        width: calc(100% - 7px) !important;
        max-width: none !important;
    }

    .rm-v1 .rm-grafico-lluvia {
        padding: 1px 2px 5px 4px !important;
    }

    .rm-v1 .rm-grafico-lluvia #rmGraficoLluvia {
        /* V47 móvil: 10 px adicionales más corto por la derecha. */
        height: 245px !important;
        min-height: 245px !important;
        margin-top: -20px !important;
        margin-left: 11px !important;
        width: calc(100% - 15px) !important;
        max-width: none !important;
    }

    /* En móvil el gráfico mensual ya representa solo lluvia diaria. */
    .rm-v1 .rm-grafico-lluvia .rm-leyenda-acumulada {
        display: none !important;
    }

    /* Escalas más discretas para que las series conserven anchura útil. */
    .rm-v1 .rm-grafico-temperatura .apexcharts-yaxis-title,
    .rm-v1 .rm-grafico-viento .apexcharts-yaxis-title,
    .rm-v1 .rm-grafico-lluvia .apexcharts-yaxis-title {
        display: none !important;
    }
}


/* =========================================================
   RESPONSIVE MÓVIL · RESUMEN MENSUAL V30
   Afinado geométrico solicitado de las tres áreas gráficas.
   - Temperatura: 15 px hacia izquierda y 15 px hacia arriba.
   - Viento: borde izq. +30 px, borde dcho. +5 px, 15 px arriba.
   - Lluvia: borde izq. +30 px y 15 px arriba.
========================================================= */


/* =========================================================
   RESPONSIVE MÓVIL · RESUMEN MENSUAL V31
   - Temperatura: borde izquierdo 30 px hacia la derecha.
   - Viento: escalas separadas 3 px adicionales del área gráfica.
   - Lluvia: +15 px de altura hacia abajo.
========================================================= */


/* =========================================================
   RESPONSIVE MÓVIL · RESUMEN MENSUAL V32
   - Escala izquierda de temperatura: 3 px más separada del gráfico.
   - Tarjeta Temperatura + gráfico: 15 px menos de hueco inferior,
     igualando la altura del contenedor al render real de ApexCharts.
========================================================= */


/* =========================================================
   RESPONSIVE MÓVIL · RESUMEN MENSUAL V33
   - Dirección del viento: escala derecha +4 px hacia fuera.
   - Viento y precipitación: elimina 15 px de hueco inferior
     del encuadrado, igualando contenedor y render de Apex.
   - Unidades de leyenda entre paréntesis.
========================================================= */


/* =========================================================
   RESUMEN MENSUAL MÓVIL V37 · COLOR Y FUENTE
========================================================= */
.rm-v1 .rm-tabla-viento td.rm-viento-alerta {
    color: #c94747 !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: 700 !important;
}

.rm-v1 .rm-fuente {
    display: block;
}
.rm-v1 .rm-fuente span {
    display: block;
    margin-top: 2px;
}
.rm-v1 .rm-fuente strong {
    display: inline;
}


/* =========================================================
   V43 · AJUSTE FINAL COLOR LLUVIA + PROTECCIÓN DE ESCRITORIO
========================================================= */
/* Mismo azul oscuro utilizado para los valores de precipitación.
   No modifica las series de los gráficos. */
.rm-v1 .tarjeta-tabla td.rm-rain-total {
    color: #397fae !important;
}
.ra-v1 .ra-rain-total {
    color: #397fae !important;
}

/* En escritorio nunca se muestra el formato numérico dd/mm/aaaa
   reservado para la vista móvil. */
@media (min-width: 761px) {
    .rm-v1 .rm-fecha-movil,
    .ra-v1 .ra-fecha-movil {
        display: none !important;
    }

    .rm-v1 .rm-fecha-escritorio,
    .ra-v1 .ra-fecha-escritorio {
        display: inline !important;
    }
}

/* =========================================================
   RESPONSIVE MÓVIL · RESUMEN DIARIO V54
   Recupera Temperatura/Humedad (alternables), Viento y Lluvia
   con gráficos compactos específicos para teléfono.
========================================================= */
.rd-v4 .rd-grafico-cabecera-movil {
    display: none;
}

@media (max-width: 760px) {
    /* Recuperar únicamente los tres gráficos seleccionados. */
    .rd-v4 .rd-grafico-temperatura-movil,
    .rd-v4 .rd-grafico-viento-movil,
    .rd-v4 .rd-grafico-lluvia-movil {
        display: block !important;
        background: #fff !important;
        min-height: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    /* Presión y Solar/UV continúan sin gráfico en móvil. */
    .rd-v4 #resumenGraficoPresion,
    .rd-v4 #resumenGraficoSolar,
    .rd-v4 .rd-grafico-card:has(#resumenGraficoPresion),
    .rd-v4 .rd-grafico-card[data-chart="solar"] {
        display: none !important;
    }

    /* Tabla + gráfico forman una sola pieza vertical, como en mensual. */
    .rd-v4 .rd-bloque-temperatura-movil,
    .rd-v4 .rd-modulo-viento-movil,
    .rd-v4 .rd-modulo-lluvia-movil {
        display: block !important;
        overflow: hidden !important;
        background: #fff !important;
        border: 1px solid #dfe8ed !important;
        border-radius: 10px !important;
        box-shadow: 0 2px 8px rgba(51, 74, 86, .07) !important;
        padding: 0 !important;
    }

    .rd-v4 .rd-bloque-temperatura-movil > .rd-tabla,
    .rd-v4 .rd-modulo-viento-movil > .rd-tabla,
    .rd-v4 .rd-modulo-lluvia-movil > .rd-tabla {
        border: 0 !important;
        border-bottom: 1px solid #e5edf1 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .rd-v4 .rd-grafico-cabecera-escritorio {
        display: none !important;
    }

    .rd-v4 .rd-grafico-cabecera-movil {
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 6px 9px;
        min-height: 26px;
        padding: 6px 8px 0 10px;
        color: #6d818d;
        font-size: 8.7px;
        font-weight: 700;
        line-height: 1.1;
        text-transform: uppercase;
    }

    .rd-v4 .rd-grafico-cabecera-movil span,
    .rd-v4 .rd-grafico-leyenda-movil span {
        white-space: nowrap;
    }

    .rd-v4 .rd-grafico-cabecera-movil > span::before,
    .rd-v4 .rd-grafico-leyenda-movil > span:first-child::before {
        content: "";
        display: inline-block;
        width: 7px;
        height: 7px;
        margin-right: 4px;
        border-radius: 50%;
        vertical-align: 0;
    }

    .rd-v4 .rd-grafico-leyenda-movil {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .rd-v4 .rd-leyenda-temp::before { background: #c94747; }
    .rd-v4 .rd-leyenda-humedad::before { background: #2f6f55; }
    .rd-v4 .rd-leyenda-viento::before { background: #c93232; }
    .rd-v4 .rd-leyenda-racha::before { background: #e6007e; }
    .rd-v4 .rd-leyenda-direccion::before { background: #5b788d; }
    .rd-v4 .rd-leyenda-lluvia::before { background: #4f91c7; }
    .rd-v4 .rd-leyenda-intensidad::before { background: #76539a; }

    .rd-v4 .rd-leyenda-unidad {
        margin-left: 1px;
        color: #82939c;
        font-weight: 700;
        text-transform: none;
    }
    .rd-v4 .rd-leyenda-unidad::before {
        display: none !important;
        content: none !important;
    }

    .rd-v4 .rd-grafico-cabecera-temp-movil {
        justify-content: space-between;
        flex-wrap: nowrap;
    }

    .rd-v4 .rd-grafico-alternar-movil {
        flex: 0 0 auto;
        margin: 0;
        padding: 3px 7px;
        border: 1px solid #cbd9e0;
        border-radius: 5px;
        background: #f7fafb;
        color: #607985;
        font: 600 8.5px/1.1 "Segoe UI", Arial, sans-serif;
        text-transform: none;
        cursor: pointer;
    }

    .rd-v4 .rd-grafico-temperatura-movil #resumenGraficoTemperatura {
        height: 218px !important;
        min-height: 218px !important;
        margin-top: -3px !important;
        margin-left: 5px !important;
        width: calc(100% - 10px) !important;
        max-width: none !important;
    }

    .rd-v4 .rd-grafico-viento-movil #resumenGraficoViento,
    .rd-v4 .rd-grafico-lluvia-movil #resumenGraficoLluvia {
        height: 215px !important;
        min-height: 215px !important;
        margin-top: -3px !important;
        margin-left: 5px !important;
        width: calc(100% - 10px) !important;
        max-width: none !important;
    }

    .rd-v4 .rd-grafico-temperatura-movil,
    .rd-v4 .rd-grafico-viento-movil,
    .rd-v4 .rd-grafico-lluvia-movil {
        padding: 0 2px 4px 2px !important;
    }

    .rd-v4 .rd-grafico-temperatura-movil .apexcharts-yaxis-title,
    .rd-v4 .rd-grafico-viento-movil .apexcharts-yaxis-title,
    .rd-v4 .rd-grafico-lluvia-movil .apexcharts-yaxis-title {
        display: none !important;
    }

    .rd-v4 .rd-grafico-temperatura-movil .rd-sin-detalle,
    .rd-v4 .rd-grafico-viento-movil .rd-sin-detalle,
    .rd-v4 .rd-grafico-lluvia-movil .rd-sin-detalle {
        min-height: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 18px;
        color: #82959f;
        font-size: 11px;
        text-align: center;
    }
}

/* =========================================================
   RESPONSIVE MÓVIL · RESUMEN DIARIO V55
   Ajuste definitivo de los gráficos diarios:
   Tª + HR simultáneas, eje horario fijo y retícula por horas.
========================================================= */
.rd-v4 .rd-eje-tiempo-movil { display:none; }

@media (max-width: 760px) {
    /* Nunca mostrar los mensajes de carga de los gráficos de escritorio. */
    .rd-v4 .rd-grafico-temperatura-movil .grafico-cargando,
    .rd-v4 .rd-grafico-viento-movil .grafico-cargando,
    .rd-v4 .rd-grafico-lluvia-movil .grafico-cargando {
        display:none !important;
    }

    .rd-v4 .rd-grafico-cabecera-temp-movil {
        justify-content:flex-start !important;
        flex-wrap:wrap !important;
    }

    .rd-v4 .rd-grafico-leyenda-termica-movil {
        display:flex;
        align-items:center;
        flex-wrap:wrap;
        gap:5px 7px;
    }

    .rd-v4 .rd-grafico-leyenda-termica-movil .rd-leyenda-humedad {
        margin-left:3px;
    }

    /* La escala temporal se dibuja fuera de Apex para que 00/06/12/18/00
       permanezcan siempre visibles y alineados también con dos ejes Y. */
    .rd-v4 .rd-eje-tiempo-movil {
        display:flex !important;
        justify-content:space-between;
        align-items:center;
        height:17px;
        margin-top:-5px;
        padding-bottom:3px;
        color:#5b707c;
        font:600 8.5px/1 "Segoe UI", Arial, sans-serif;
        box-sizing:border-box;
        pointer-events:none;
    }

    .rd-v4 .rd-eje-tiempo-termico { padding-left:34px; padding-right:34px; }
    .rd-v4 .rd-eje-tiempo-viento  { padding-left:36px; padding-right:27px; }
    .rd-v4 .rd-eje-tiempo-lluvia  { padding-left:34px; padding-right:34px; }

    .rd-v4 .rd-grafico-temperatura-movil #resumenGraficoTemperatura {
        height:198px !important;
        min-height:198px !important;
        margin-top:-1px !important;
        margin-left:8px !important;
        width:calc(100% - 16px) !important;
        overflow:visible !important;
    }

    .rd-v4 .rd-grafico-viento-movil #resumenGraficoViento,
    .rd-v4 .rd-grafico-lluvia-movil #resumenGraficoLluvia {
        height:195px !important;
        min-height:195px !important;
        margin-top:-1px !important;
        margin-left:8px !important;
        width:calc(100% - 16px) !important;
        overflow:visible !important;
    }

    .rd-v4 .rd-grafico-temperatura-movil .apexcharts-canvas,
    .rd-v4 .rd-grafico-temperatura-movil .apexcharts-svg,
    .rd-v4 .rd-grafico-viento-movil .apexcharts-canvas,
    .rd-v4 .rd-grafico-viento-movil .apexcharts-svg,
    .rd-v4 .rd-grafico-lluvia-movil .apexcharts-canvas,
    .rd-v4 .rd-grafico-lluvia-movil .apexcharts-svg {
        overflow:visible !important;
    }

    /* Un poco de margen físico para que el eje de velocidad no desaparezca
       contra el borde de la tarjeta. */
    .rd-v4 .rd-grafico-viento-movil {
        padding-left:3px !important;
        padding-right:3px !important;
    }

    .rd-v4 .rd-grafico-temperatura-movil,
    .rd-v4 .rd-grafico-viento-movil,
    .rd-v4 .rd-grafico-lluvia-movil {
        padding-bottom:3px !important;
    }
}

@media (max-width: 760px) {
    .rd-v4 .rd-grafico-leyenda-termica-movil .rd-leyenda-humedad::before {
        content:"";
        display:inline-block;
        width:7px;
        height:7px;
        margin-right:4px;
        border-radius:50%;
        vertical-align:0;
        background:#2f6f55;
    }
}

/* =========================================================
   RESPONSIVE MÓVIL · RESUMEN DIARIO V56
   Compactación y alineación fina de los tres gráficos.
========================================================= */
@media (max-width: 760px) {
    /* Apex vuelve a dibujar el eje 00/06/12/18/00; anulamos el eje auxiliar. */
    .rd-v4 .rd-eje-tiempo-movil {
        display: none !important;
    }

    .rd-v4 .rd-grafico-cabecera-movil {
        min-height: 22px !important;
        padding: 6px 6px 0 7px !important;
        gap: 5px 7px !important;
    }

    .rd-v4 .rd-grafico-cabecera-movil,
    .rd-v4 .rd-grafico-leyenda-termica-movil {
        line-height: 1 !important;
    }

    .rd-v4 .rd-grafico-temperatura-movil,
    .rd-v4 .rd-grafico-viento-movil,
    .rd-v4 .rd-grafico-lluvia-movil {
        padding: 0 4px 1px 4px !important;
        overflow: hidden !important;
    }

    .rd-v4 .rd-grafico-temperatura-movil #resumenGraficoTemperatura,
    .rd-v4 .rd-grafico-viento-movil #resumenGraficoViento,
    .rd-v4 .rd-grafico-lluvia-movil #resumenGraficoLluvia {
        height: 184px !important;
        min-height: 184px !important;
        margin: -1px 0 0 0 !important;
        width: 100% !important;
        max-width: none !important;
        overflow: visible !important;
    }

    .rd-v4 .rd-grafico-temperatura-movil .apexcharts-canvas,
    .rd-v4 .rd-grafico-temperatura-movil .apexcharts-svg,
    .rd-v4 .rd-grafico-viento-movil .apexcharts-canvas,
    .rd-v4 .rd-grafico-viento-movil .apexcharts-svg,
    .rd-v4 .rd-grafico-lluvia-movil .apexcharts-canvas,
    .rd-v4 .rd-grafico-lluvia-movil .apexcharts-svg {
        overflow: visible !important;
    }

    /* Evitar que Apex reserve altura por encima/debajo del área útil. */
    .rd-v4 .rd-grafico-temperatura-movil .apexcharts-inner,
    .rd-v4 .rd-grafico-viento-movil .apexcharts-inner,
    .rd-v4 .rd-grafico-lluvia-movil .apexcharts-inner {
        transform-box: fill-box;
    }
}

/* =========================================================
   RESPONSIVE MÓVIL · RESUMEN DIARIO V64
   Geometría consolidada de los tres gráficos.
   Se eliminan los desplazamientos experimentales V58–V63.
========================================================= */
@media (max-width: 760px) {
    /* No recortar escalas: el problema de las capturas provenía de que
       el contenedor ocultaba la parte de los ejes que Apex coloca fuera
       del plot. El gráfico sigue contenido mediante márgenes propios. */
    .rd-v4 .rd-grafico-temperatura-movil,
    .rd-v4 .rd-grafico-viento-movil,
    .rd-v4 .rd-grafico-lluvia-movil {
        overflow: visible !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
        padding-bottom: 3px !important;
    }

    /* Tª + HR: desplazar de verdad el conjunto hacia la derecha,
       pero reduciendo su anchura para que la escala de HR no salga
       por el borde derecho. */
    .rd-v4 .rd-grafico-temperatura-movil #resumenGraficoTemperatura {
        height: 190px !important;
        min-height: 190px !important;
        width: calc(100% - 16px) !important;
        margin: -1px 0 0 12px !important;
        transform: none !important;
        overflow: visible !important;
    }

    /* Viento: reparto simétrico y reserva real para km/h + dirección. */
    .rd-v4 .rd-grafico-viento-movil #resumenGraficoViento {
        height: 190px !important;
        min-height: 190px !important;
        width: calc(100% - 10px) !important;
        margin: -1px 0 0 5px !important;
        transform: none !important;
        overflow: visible !important;
    }

    /* Lluvia: un poco más de reserva lateral porque hay dos escalas
       numéricas; así ninguna queda cortada. */
    .rd-v4 .rd-grafico-lluvia-movil #resumenGraficoLluvia {
        height: 188px !important;
        min-height: 188px !important;
        width: calc(100% - 12px) !important;
        margin: -1px 0 0 6px !important;
        transform: none !important;
        overflow: visible !important;
    }

    .rd-v4 .rd-grafico-temperatura-movil .apexcharts-canvas,
    .rd-v4 .rd-grafico-temperatura-movil .apexcharts-svg,
    .rd-v4 .rd-grafico-viento-movil .apexcharts-canvas,
    .rd-v4 .rd-grafico-viento-movil .apexcharts-svg,
    .rd-v4 .rd-grafico-lluvia-movil .apexcharts-canvas,
    .rd-v4 .rd-grafico-lluvia-movil .apexcharts-svg {
        left: auto !important;
        transform: none !important;
        overflow: visible !important;
    }

    /* Evitar que el primer/último 00 y las escalas queden contra el marco. */
    .rd-v4 .rd-grafico-temperatura-movil .apexcharts-xaxis-texts-g,
    .rd-v4 .rd-grafico-viento-movil .apexcharts-xaxis-texts-g,
    .rd-v4 .rd-grafico-lluvia-movil .apexcharts-xaxis-texts-g {
        transform: translateY(-1px);
    }
}

/* =========================================================
   RESPONSIVE MÓVIL · RESUMEN DIARIO V65
   Viento: ampliar 10 px el área completa hacia la izquierda
   manteniendo fijo el borde derecho.
========================================================= */
@media (max-width: 760px) {
    .rd-v4 .rd-grafico-viento-movil #resumenGraficoViento {
        width: 100% !important;
        margin-left: -5px !important;
    }
}


/* =========================================================
   RESPONSIVE MÓVIL · RESUMEN DIARIO V67
   Temperatura + HR: ajuste geométrico solicitado.
========================================================= */
@media (max-width: 760px) {
    .rd-v4 .rd-grafico-temperatura-movil #resumenGraficoTemperatura {
        /* Estado acumulado: 25 px más de alcance a la derecha y
           20 px extra de altura; ahora el conjunto sube 15 px adicionales. */
        height: 210px !important;
        min-height: 210px !important;
        width: calc(100% + 9px) !important;
        margin-top: -26px !important;
        margin-left: 12px !important;
        max-width: none !important;
        overflow: visible !important;
    }

    .rd-v4 .rd-grafico-temperatura-movil {
        overflow: visible !important;
    }
}


/* =========================================================
   RESPONSIVE MÓVIL · RESUMEN DIARIO V69
   Temperatura + HR: ajuste fino solicitado.
========================================================= */
@media (max-width: 760px) {
    /* Bajar 4 px todo el gráfico respecto a V68. */
    .rd-v4 .rd-grafico-temperatura-movil #resumenGraficoTemperatura {
        margin-top: -15px !important;
    }

    /* Subir 3 px adicionales la escala temporal hacia el gráfico. */
    .rd-v4 .rd-grafico-temperatura-movil .apexcharts-xaxis-texts-g {
        transform: translateY(-9px) !important;
    }
}


/* =========================================================
   RESPONSIVE MÓVIL · RESUMEN DIARIO V72
   Ajuste fino Tª + HR: escala HR 4 px más a la derecha y
   recorte de 4 px del hueco inferior del bloque completo.
========================================================= */
@media (max-width: 760px) {
    .rd-v4 .rd-grafico-temperatura-movil #resumenGraficoTemperatura {
        height: 206px !important;
        min-height: 206px !important;
    }
}

/* =========================================================
   RESPONSIVE MÓVIL · RESUMEN DIARIO V74
   Temperatura + HR: desplazar 3 px a la derecha todo el
   gráfico, incluidas ambas escalas, sin alterar su tamaño.
========================================================= */
@media (max-width: 760px) {
    .rd-v4 .rd-grafico-temperatura-movil #resumenGraficoTemperatura {
        position: relative !important;
        left: 3px !important;
    }
}


/* =========================================================
   RESPONSIVE MÓVIL · RESUMEN DIARIO V75
   Viento y precipitación ajustados a la geometría ya aprobada
   del gráfico Temperatura + Humedad.
========================================================= */
@media (max-width: 760px) {
    /* Viento: menos hueco superior, plot más centrado y espacio real
       para las dos escalas. El borde derecho deja de pisar N/O/S/E/N. */
    .rd-v4 .rd-grafico-viento-movil #resumenGraficoViento {
        height: 198px !important;
        min-height: 198px !important;
        width: calc(100% - 8px) !important;
        margin-top: -9px !important;
        margin-left: -6px !important;
        max-width: none !important;
        overflow: visible !important;
    }

    /* Precipitación: reservamos márgenes simétricos para mm y mm/h,
       y acercamos el área gráfica a la leyenda como en Tª + HR. */
    .rd-v4 .rd-grafico-lluvia-movil #resumenGraficoLluvia {
        height: 198px !important;
        min-height: 198px !important;
        width: calc(100% - 22px) !important;
        margin-top: -10px !important;
        margin-left: 11px !important;
        max-width: none !important;
        overflow: visible !important;
    }

    .rd-v4 .rd-grafico-viento-movil,
    .rd-v4 .rd-grafico-lluvia-movil {
        overflow: visible !important;
    }
}


/* =========================================================
   RESPONSIVE MÓVIL · RESUMEN DIARIO V76
   Viento: afinado geométrico solicitado.
========================================================= */
@media (max-width: 760px) {
    /* Extender 10 px el conjunto por la izquierda manteniendo
       prácticamente el mismo borde derecho de V75. */
    .rd-v4 .rd-grafico-viento-movil #resumenGraficoViento {
        width: calc(100% + 2px) !important;
        margin-left: -16px !important;
        margin-top: -19px !important;
    }

    /* Acercar el eje temporal 8 px al área gráfica. */
    .rd-v4 .rd-grafico-viento-movil .apexcharts-xaxis-texts-g {
        transform: translateY(-9px) !important;
    }
}


/* =========================================================
   RESPONSIVE MÓVIL · RESUMEN DIARIO V77
   Viento: ajuste fino posterior a V76.
========================================================= */
@media (max-width: 760px) {
    /* 6 px adicionales de anchura hacia la izquierda, conservando
       prácticamente fijo el borde derecho; y 5 px más hacia la leyenda. */
    .rd-v4 .rd-grafico-viento-movil #resumenGraficoViento {
        width: calc(100% + 8px) !important;
        margin-left: -22px !important;
        margin-top: -24px !important;
    }
}


/* =========================================================
   RESPONSIVE MÓVIL · RESUMEN DIARIO V78
   Viento: ajuste fino de escala de dirección y geometría.
========================================================= */
@media (max-width: 760px) {
    /* 10 px adicionales de anchura hacia la izquierda manteniendo
       prácticamente fijo el borde derecho; 5 px más hacia la leyenda. */
    .rd-v4 .rd-grafico-viento-movil #resumenGraficoViento {
        width: calc(100% + 18px) !important;
        margin-left: -32px !important;
        margin-top: -29px !important;
    }
}

/* =========================================================
   RESPONSIVE MÓVIL · RESUMEN DIARIO V80
   Viento: 5 px más hacia la leyenda para reducir el aire
   entre la leyenda y el gráfico; se conserva la anchura de V79.
========================================================= */
@media (max-width: 760px) {
    .rd-v4 .rd-grafico-viento-movil #resumenGraficoViento {
        width: calc(100% + 24px) !important;
        margin-left: -38px !important;
        margin-top: -40px !important;
    }
}

/* =========================================================
   RESPONSIVE MÓVIL · RESUMEN DIARIO V81
   Viento: 4 px más hacia la leyenda y 5 px adicionales
   de anchura hacia la izquierda, manteniendo fijo el borde derecho.
========================================================= */
@media (max-width: 760px) {
    .rd-v4 .rd-grafico-viento-movil #resumenGraficoViento {
        width: calc(100% + 29px) !important;
        margin-left: -43px !important;
        margin-top: -44px !important;
    }
}

/* =========================================================
   RESPONSIVE MÓVIL · RESUMEN DIARIO V82
   Viento: 10 px adicionales de anchura hacia la izquierda,
   manteniendo fijo el borde derecho respecto a V81.
========================================================= */
@media (max-width: 760px) {
    .rd-v4 .rd-grafico-viento-movil #resumenGraficoViento {
        width: calc(100% + 39px) !important;
        margin-left: -53px !important;
        margin-top: -44px !important;
    }
}


/* =========================================================
   RESPONSIVE MÓVIL · RESUMEN DIARIO V83
   Viento: consolidación. Se vuelve a la geometría V81 del
   contenedor y la ampliación adicional de 10 px se realiza
   dentro de Apex (JS), para que sea visible de verdad.
========================================================= */
@media (max-width: 760px) {
    .rd-v4 .rd-grafico-viento-movil #resumenGraficoViento {
        width: calc(100% + 29px) !important;
        margin-left: -43px !important;
        margin-top: -44px !important;
        max-width: none !important;
        overflow: visible !important;
    }
}

/* =========================================================
   RESPONSIVE MÓVIL · RESUMEN DIARIO V86
   Viento: ajuste final sobre geometría consolidada.
   Corrige la combinación de márgenes negativos + ancho Apex
   que quedaba recortada por overflow:hidden y hacía invisibles
   los últimos cambios. Esta regla es la única autoridad final.
========================================================= */
@media (max-width: 760px) {
    .rd-v4 .rd-grafico-viento-movil #resumenGraficoViento {
        /* V86: 5 px más de ancho por la derecha y 5 px más arriba. */
        width: calc(100% - 4px) !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: -54px !important;
        position: relative !important;
        left: 0 !important;
        overflow: visible !important;
    }

    /* El canvas completo (plot + ejes + escalas) se desplaza 5 px
       hacia la izquierda. Al no usar offsetX/width de Apex, el cambio
       sí es visible y no se compensa durante el render. */
    .rd-v4 .rd-grafico-viento-movil #resumenGraficoViento > .apexcharts-canvas {
        position: relative !important;
        left: -5px !important;
        transform: none !important;
        overflow: visible !important;
    }

    .rd-v4 .rd-grafico-viento-movil #resumenGraficoViento .apexcharts-svg {
        overflow: visible !important;
    }
}

/* =========================================================
   RESPONSIVE MÓVIL · RESUMEN DIARIO V87
   Viento: desplazamiento VISIBLE del conjunto Apex 5 px
   hacia la leyenda. Se actúa sobre el canvas completo para
   mover a la vez plot, ejes y escalas.
========================================================= */
@media (max-width: 760px) {
    .rd-v4 .rd-grafico-viento-movil #resumenGraficoViento > .apexcharts-canvas {
        position: relative !important;
        left: -5px !important;
        top: -5px !important;
        transform: none !important;
        overflow: visible !important;
    }
}

/* =========================================================
   RESPONSIVE MÓVIL · RESUMEN DIARIO V88
   Viento: 6 px adicionales de anchura por la derecha,
   conservando el borde izquierdo y el desplazamiento vertical V87.
========================================================= */
@media (max-width: 760px) {
    .rd-v4 .rd-grafico-viento-movil #resumenGraficoViento {
        width: calc(100% + 2px) !important; /* V87: 100% - 4px; +6px por la derecha */
        max-width: none !important;
        overflow: visible !important;
    }
}

/* =========================================================
   RESPONSIVE MÓVIL · RESUMEN DIARIO V91
   Viento: 6 px adicionales de recorte por la derecha respecto a V90.
   El borde izquierdo y la posición vertical permanecen intactos.
========================================================= */
@media (max-width: 760px) {
    .rd-v4 .rd-grafico-viento-movil #resumenGraficoViento {
        width: calc(100% - 22px) !important; /* V91: 6px adicionales menos por la derecha */
        max-width: none !important;
        overflow: visible !important;
    }
}


/* =========================================================
   RESPONSIVE MÓVIL · RESUMEN DIARIO V92
   Viento: consolidación del recorte derecho.
   Las V89–V91 reducían el host CSS, pero Apex conservaba una
   geometría interna prácticamente idéntica. El recorte real se
   realiza ahora en JS mediante grid.padding.right. Aquí dejamos
   estable el host para que no haya reglas de ancho contrapuestas.
========================================================= */
@media (max-width: 760px) {
    .rd-v4 .rd-grafico-viento-movil #resumenGraficoViento {
        width: calc(100% - 4px) !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: -54px !important;
        position: relative !important;
        left: 0 !important;
        overflow: visible !important;
    }

    .rd-v4 .rd-grafico-viento-movil #resumenGraficoViento > .apexcharts-canvas {
        position: relative !important;
        left: -5px !important;
        top: -5px !important;
        transform: none !important;
        overflow: visible !important;
    }
}

/* =========================================================
   RESPONSIVE MÓVIL · RESUMEN DIARIO V104
   Precipitaciones: geometría consolidada. El borde izquierdo
   entra 60 px respecto a V75 y el borde derecho permanece a 11 px.
========================================================= */
@media (max-width: 760px) {
    .rd-v4 .rd-grafico-lluvia-movil #resumenGraficoLluvia {
        width: calc(100% - 82px) !important;
        margin-left: 71px !important;
        margin-right: 11px !important;
        max-width: none !important;
        overflow: visible !important;
    }

    .rd-v4 .rd-grafico-lluvia-movil,
    .rd-v4 .rd-grafico-lluvia-movil .apexcharts-canvas,
    .rd-v4 .rd-grafico-lluvia-movil .apexcharts-svg {
        overflow: visible !important;
    }
}


/* =========================================================
   RESPONSIVE MÓVIL · RESUMEN DIARIO V105
   Precipitaciones: recuperar anchura útil y eje temporal.
   V104 había estrechado el host en 82 px, generando demasiado
   aire lateral. Se vuelve a una geometría equilibrada y se
   fuerza la visibilidad de 00 / 06 / 12 / 18 / 00.
========================================================= */
@media (max-width: 760px) {
    .rd-v4 .rd-grafico-lluvia-movil #resumenGraficoLluvia {
        width: calc(100% - 12px) !important;
        margin-left: 6px !important;
        margin-right: 6px !important;
        height: 198px !important;
        min-height: 198px !important;
        max-width: none !important;
        overflow: visible !important;
    }

    .rd-v4 .rd-grafico-lluvia-movil #resumenGraficoLluvia > .apexcharts-canvas,
    .rd-v4 .rd-grafico-lluvia-movil #resumenGraficoLluvia .apexcharts-svg {
        overflow: visible !important;
    }

    .rd-v4 .rd-grafico-lluvia-movil .apexcharts-xaxis-texts-g {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(-1px) !important;
    }
}

/* =========================================================
   RESPONSIVE MÓVIL · RESUMEN DIARIO V106
   Precipitaciones: desplazar 30 px a la derecha el conjunto
   Apex completo (plot + escalas + eje temporal), sin tocar
   la leyenda ni la anchura del host.
========================================================= */
@media (max-width: 760px) {
    .rd-v4 .rd-grafico-lluvia-movil #resumenGraficoLluvia > .apexcharts-canvas {
        position: relative !important;
        left: 30px !important;
        transform: none !important;
        overflow: visible !important;
    }

    .rd-v4 .rd-grafico-lluvia-movil #resumenGraficoLluvia .apexcharts-svg {
        overflow: visible !important;
    }
}

/* =========================================================
   RESPONSIVE MÓVIL · RESUMEN DIARIO V107
   Precipitaciones: ensanchar 20 px por el lado izquierdo
   manteniendo fijo el borde derecho visual.
========================================================= */
@media (max-width: 760px) {
    .rd-v4 .rd-grafico-lluvia-movil #resumenGraficoLluvia {
        width: calc(100% + 8px) !important;
        margin-left: -14px !important;
        margin-right: 6px !important;
    }
}

/* =========================================================
   RESPONSIVE MÓVIL · RESUMEN DIARIO V108
   Precipitaciones: consolidación REAL del ensanchado izquierdo.
   El host vuelve a V105. Apex renderiza un canvas 20 px más ancho
   (JS) y aquí se coloca a +10 px. Resultado respecto a V106:
   borde izquierdo 20 px más a la izquierda y borde derecho fijo.
========================================================= */
@media (max-width: 760px) {
    .rd-v4 .rd-grafico-lluvia-movil #resumenGraficoLluvia {
        width: calc(100% - 12px) !important;
        margin-left: 6px !important;
        margin-right: 6px !important;
        max-width: none !important;
        overflow: visible !important;
    }

    .rd-v4 .rd-grafico-lluvia-movil #resumenGraficoLluvia > .apexcharts-canvas {
        position: relative !important;
        left: 10px !important;
        transform: none !important;
        overflow: visible !important;
    }

    .rd-v4 .rd-grafico-lluvia-movil #resumenGraficoLluvia .apexcharts-svg {
        overflow: visible !important;
    }
}


/* =========================================================
   RESPONSIVE MÓVIL · RESUMEN DIARIO V109
   Precipitaciones: eje temporal externo y estable.
   Se usa el eje auxiliar 00/06/12/18/00 ya presente en el HTML,
   pegado al gráfico para que nunca quede recortado por Apex.
========================================================= */
@media (max-width: 760px) {
    .rd-v4 .rd-grafico-lluvia-movil .rd-eje-tiempo-lluvia {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        height: 14px !important;
        margin-top: -5px !important;
        padding: 0 31px 2px 34px !important;
        box-sizing: border-box !important;
        color: #5b707c !important;
        font: 600 8.5px/1 "Segoe UI", Arial, sans-serif !important;
        line-height: 1 !important;
        pointer-events: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .rd-v4 .rd-grafico-lluvia-movil {
        padding-bottom: 2px !important;
    }
}


/* =========================================================
   RESPONSIVE MÓVIL · RESUMEN DIARIO V112
   Precipitaciones: subir 5 px el conjunto completo del gráfico
   (área, escalas y eje temporal externo), sin alterar anchura.
========================================================= */
@media (max-width: 760px) {
    .rd-v4 .rd-grafico-lluvia-movil #resumenGraficoLluvia {
        transform: translateY(-5px) !important;
    }

    .rd-v4 .rd-grafico-lluvia-movil .rd-eje-tiempo-lluvia {
        transform: translateY(-5px) !important;
    }
}


/* =========================================================
   RESPONSIVE MÓVIL · RESUMEN DIARIO V113
   Viento: ampliar el área gráfica 4 px por arriba y 2 px por abajo,
   manteniendo el encuadre actual; velocidad del viento en rojo.
========================================================= */
@media (max-width: 760px) {
    .rd-v4 .rd-grafico-viento-movil #resumenGraficoViento {
        height: 200px !important;
        min-height: 200px !important;
    }

    /* V92/V87 dejan el canvas en top:-5px. Al pasarlo a -9px y
       renderizar Apex a 204px, gana 4px arriba y 2px abajo. */
    .rd-v4 .rd-grafico-viento-movil #resumenGraficoViento > .apexcharts-canvas {
        top: -9px !important;
    }

    .rd-v4 .rd-leyenda-viento::before {
        background: #c93232 !important;
    }
}

/* =========================================================
   RESUMEN DIARIO · MÓVIL · V114
   Centrado real de los iconos del panel "La jornada en cifras".
   La regla genérica `.rd-cifra span { display:block; }` anulaba
   el inline-flex del contenedor del icono y dejaba el SVG arriba
   a la izquierda dentro del sombreado.
========================================================= */
@media (max-width: 760px) {
    .rd-v4 .rd-cifra .rd-cifra-icono {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .rd-v4 .rd-cifra .rd-cifra-icono .resumen-icono {
        display: block !important;
        margin: 0 !important;
        transform: none !important;
    }

    .rd-v4 .rd-cifra .rd-cifra-icono-uv-texto {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }
}


/* =========================================================
   RESPONSIVE MÓVIL · RESUMEN DIARIO V115
   Precipitaciones: 4 px menos de altura por abajo y eje temporal
   separado 3 px adicionales del área gráfica.
========================================================= */
@media (max-width: 760px) {
    .rd-v4 .rd-grafico-lluvia-movil #resumenGraficoLluvia {
        height: 194px !important;
        min-height: 194px !important;
    }

    .rd-v4 .rd-grafico-lluvia-movil .rd-eje-tiempo-lluvia {
        margin-top: -2px !important;
    }
}


/* =========================================================
   RESPONSIVE MÓVIL · RESUMEN DIARIO V116
   Precipitaciones: las etiquetas 00/06/12/18/00 se posicionan
   por JS sobre las verticales reales del plot, no con padding fijo.
========================================================= */
@media (max-width: 760px) {
    .rd-v4 .rd-grafico-lluvia-movil .rd-eje-tiempo-lluvia {
        position: relative !important;
        display: block !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow: visible !important;
    }

    .rd-v4 .rd-grafico-lluvia-movil .rd-eje-tiempo-lluvia > span {
        position: absolute;
        white-space: nowrap;
    }
}

/* =========================================================
   PANELES DE CIFRAS · CENTRADO REAL DE ICONOS · ESCRITORIO/MÓVIL
   La regla genérica `.rd-cifra span { display:block; }` prevalece
   sobre el inline-flex del contenedor y desplaza el pictograma.
   Se fuerza el centrado del contenido dentro del sombreado.
========================================================= */
.rd-v4 .rd-cifra .rd-cifra-icono {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.rd-v4 .rd-cifra .rd-cifra-icono .resumen-icono {
    display: block !important;
    margin: 0 auto !important;
    flex: 0 0 auto !important;
    transform: none !important;
}

.rd-v4 .rd-cifra .rd-cifra-icono-uv-texto {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}


/* =========================================================
   RESUMEN MENSUAL · DETALLE DÍA A DÍA · VIENTO DOMINANTE
   Nueva columna con la dirección dominante de cada jornada.
========================================================= */
.rm-v1 .rm-dia-a-dia table {
    min-width: 1120px !important;
}

.rm-v1 .rm-dia-a-dia thead th:first-child,
.rm-v1 .rm-dia-a-dia tbody th {
    width: 52px !important;
}

.rm-v1 .rm-dia-a-dia th:nth-child(2),
.rm-v1 .rm-dia-a-dia td:nth-child(2),
.rm-v1 .rm-dia-a-dia th:nth-child(3),
.rm-v1 .rm-dia-a-dia td:nth-child(3),
.rm-v1 .rm-dia-a-dia th:nth-child(4),
.rm-v1 .rm-dia-a-dia td:nth-child(4) {
    width: 11% !important;
}

.rm-v1 .rm-dia-a-dia th:nth-child(5),
.rm-v1 .rm-dia-a-dia td:nth-child(5) {
    width: 10% !important;
}

.rm-v1 .rm-dia-a-dia th:nth-child(6),
.rm-v1 .rm-dia-a-dia td:nth-child(6) {
    width: 17% !important;
}

.rm-v1 .rm-dia-a-dia th:nth-child(7),
.rm-v1 .rm-dia-a-dia td:nth-child(7) {
    width: 11% !important;
}

.rm-v1 .rm-dia-a-dia th:nth-child(8),
.rm-v1 .rm-dia-a-dia td:nth-child(8) {
    width: 11% !important;
}

.rm-v1 .rm-dia-a-dia th:nth-child(9),
.rm-v1 .rm-dia-a-dia td:nth-child(9) {
    width: 104px !important;
}

.rm-v1 .rm-dia-a-dia td.rm-dir-viento-dom {
    white-space: nowrap;
    color: #405762 !important;
    font-weight: 550 !important;
}


/* =========================================================
   INFORMES NOAA · acceso desde resúmenes mensual y anual
   Solo escritorio. Se separa visualmente de las pestañas
   Diario / Mensual / Anual para indicar que es otra vista.
========================================================= */
.resumen-tabs a.resumen-noaa-link {
    margin-left: 16px;
    border-color: #a9bbc5;
    border-style: dashed;
    border-radius: 8px;
    background: #f2f6f8;
    color: #405d6d;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.7);
    letter-spacing: .01em;
}
.resumen-tabs a.resumen-noaa-link::before {
    content: "TXT";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 18px;
    margin-right: 7px;
    padding: 0 5px;
    border-radius: 4px;
    background: #dfe9ee;
    color: #587383;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
}
.resumen-tabs a.resumen-noaa-link:hover {
    border-color: #6f95aa;
    background: #eaf2f6;
    color: #2f566b;
}

/* Visor integrado de informes NOAA. */
.noaa-page .noaa-cabecera {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}
.noaa-page .noaa-cabecera h1 {
    margin: 3px 0 4px;
}
.noaa-page .noaa-periodo {
    margin: 0;
    color: #6f828d;
    font-size: 14px;
}
.noaa-page .noaa-volver {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 13px;
    border: 1px solid #d2e0e7;
    border-radius: 8px;
    background: #fff;
    color: #4d6c7c;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
}
.noaa-page .noaa-volver:hover {
    border-color: #8fb9d6;
    color: #315d77;
}
.noaa-page .noaa-documento {
    overflow-x: auto;
    border: 1px solid #dce7ec;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(52,78,91,.07);
}
.noaa-page .noaa-documento pre {
    min-width: max-content;
    margin: 0;
    padding: 24px 28px 28px;
    color: #263943;
    font: 13px/1.48 Consolas, "Courier New", monospace;
    white-space: pre;
    tab-size: 4;
}
.noaa-page .noaa-aviso {
    padding: 18px 20px;
    border: 1px solid #e4d6a5;
    border-radius: 10px;
    background: #fffaf0;
    color: #6d5a25;
    font-size: 14px;
}
.noaa-page .noaa-archivo {
    margin-top: 10px;
    color: #82919a;
    font-size: 11px;
}

@media (max-width: 820px) {
    .resumen-tabs a.resumen-noaa-link {
        display: none !important;
    }
}

/* =========================================================
   ALMANAQUE METEOROLÓGICO · acceso desde Resumen anual
========================================================= */
.resumen-tabs a.resumen-almanaque-link {
    margin-left: 16px;
    border-color: #9fb9c8;
    border-radius: 8px;
    background: #f3f8fa;
    color: #3f667c;
    letter-spacing: .01em;
}
.resumen-tabs a.resumen-almanaque-link .resumen-icono {
    width: 15px;
    height: 15px;
    margin-right: 7px;
    flex: 0 0 auto;
}
.resumen-tabs a.resumen-almanaque-link:hover {
    border-color: #6f9bb3;
    background: #eaf3f7;
    color: #2f5b72;
}
@media (max-width: 760px) {
    .resumen-tabs a.resumen-almanaque-link {
        margin-left: 0;
    }
}