/*
=========================================================
EL TIEMPO SEVILLA · CAPA RESPONSIVE
=========================================================

IMPORTANTE:
- Este archivo NO modifica el diseño de escritorio.
- Solo actúa por debajo de 1100 px.
- Tablet: <= 1100 px
- Móvil: <= 760 px
=========================================================
*/


/* =====================================================
   TABLET
   ===================================================== */

@media (max-width: 1100px) {

    /* -----------------------------------------------
       CONTENEDORES GENERALES
    ------------------------------------------------ */

    .contenedor {
        width: calc(100% - 32px) !important;
        max-width: none !important;
    }

    .contenido-principal {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }


    /* -----------------------------------------------
       CABECERA SUPERIOR
    ------------------------------------------------ */

    .cabecera-contenido {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 18px !important;
    }

    .logo-grafico {
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    .logo-grafico img {
        max-width: 100% !important;
        height: auto !important;
    }

    .redes-cabecera {
        flex: 0 0 auto !important;
        margin-left: 12px !important;
    }


    /* -----------------------------------------------
       CABECERA DE LA PÁGINA
    ------------------------------------------------ */

    .cabecera-pagina {
        display: flex !important;
        align-items: flex-start !important;
        gap: 22px !important;
    }

    .cabecera-pagina-titulos {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .estado-superior {
        flex: 0 1 350px !important;
        min-width: 0 !important;
        margin-right: 0 !important;
    }

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


    /* -----------------------------------------------
       PANEL PRINCIPAL
    ------------------------------------------------ */

    .panel-meteo,
    .panel-meteo-avanzado {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .panel-meteo-izquierda,
    .panel-meteo-izquierda-nueva {
        width: 100% !important;
        max-width: none !important;
    }

    .panel-meteo-derecha,
    .panel-meteo-derecha-avanzado {
        width: 100% !important;
        max-width: none !important;

        grid-template-columns: 1fr 1fr !important;
        column-gap: 28px !important;
        row-gap: 12px !important;

        justify-content: stretch !important;
    }

    /* Neutralizar desplazamientos pensados para escritorio */
    .columna-indicadores {
        transform: none !important;
    }

    .metrica-viento-bajo-precipitaciones,
    .metrica-precipitaciones-panel {
        transform: none !important;
    }


    /* -----------------------------------------------
       TABLAS
    ------------------------------------------------ */

    .grid-tablas,
    .tablas-grid,
    .tablas-meteorologicas {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }

    .tarjeta-tabla {
        min-width: 0 !important;
    }

    .tarjeta-tabla table {
        width: 100% !important;
    }


    /* -----------------------------------------------
       GRÁFICOS
    ------------------------------------------------ */

    .titulo-graficos {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 16px !important;
    }

    .grafico-card {
        width: 100% !important;
        max-width: none !important;
    }

    .grafico-card-cabecera {
        gap: 14px !important;
    }

    .selector-series {
        justify-content: flex-start !important;
    }


    /* -----------------------------------------------
       SOBRE ESTOS DATOS
    ------------------------------------------------ */

    .sobre-datos,
    .sobre-datos-contenido,
    .sobre-datos-nota {
        max-width: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}


/* =====================================================
   MÓVIL
   ===================================================== */

@media (max-width: 760px) {

    /* -----------------------------------------------
       CONTENEDORES
    ------------------------------------------------ */

    .contenedor {
        width: calc(100% - 20px) !important;
    }

    .contenido-principal {
        padding-top: 10px !important;
    }

    .pagina-meteo {
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }


    /* -----------------------------------------------
       CABECERA / LOGO / REDES
    ------------------------------------------------ */

    .cabecera-contenido {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .logo-grafico {
        width: 100% !important;
    }

    .logo-grafico img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    .redes-cabecera {
        display: flex !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;

        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        gap: 6px !important;
    }

    .red-social {
        width: 32px !important;
        height: 32px !important;
    }


    /* -----------------------------------------------
       CABECERA DE LA PÁGINA
    ------------------------------------------------ */

    .cabecera-pagina {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
    }

    .cabecera-pagina h1 {
        font-size: 24px !important;
        line-height: 1.1 !important;
    }

    .subtitulo-pagina {
        font-size: 13px !important;
    }

    .estado-superior {
        width: 100% !important;
        min-width: 0 !important;

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

    .estado-superior .actualizacion-datos,
    .estado-superior .estado-avisos-rapido {
        width: 100% !important;
        min-width: 0 !important;

        white-space: normal !important;
        font-size: 12px !important;
    }


    /* -----------------------------------------------
       PANEL PRINCIPAL
    ------------------------------------------------ */

    .panel-meteo,
    .panel-meteo-avanzado {
        display: block !important;
    }

    .panel-meteo-izquierda,
    .panel-meteo-izquierda-nueva {
        display: block !important;
        width: 100% !important;
    }

    .eje-temp-humedad,
    .eje-temp-humedad-reordenado {
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 auto !important;
    }

    .temperatura-linea {
        justify-content: center !important;
    }

    .temperatura-etiqueta-principal,
    .humedad-etiqueta-superior,
    .estado-texto-integrado {
        text-align: center !important;
    }

    .estado-con-icono {
        justify-content: center !important;
    }

    .microcontexto-temp {
        justify-content: center !important;
        text-align: center !important;
    }

    .humedad-bloque-reordenado .humedad-valor-linea {
        justify-content: center !important;
    }

    .humedad-bloque-reordenado .microcontexto-hum {
        justify-content: center !important;
        text-align: center !important;
    }

    .extremos-reordenados {
        justify-content: center !important;
        gap: 28px !important;
    }

    /* Indicadores laterales pasan debajo en rejilla */
    .columna-indicadores {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        width: 100% !important;
        max-width: none !important;

        margin: 18px 0 0 !important;
        transform: none !important;

        gap: 8px !important;
    }

    .columna-indicadores > * {
        min-width: 0 !important;
    }

    /* Métricas en una sola columna */
    .panel-meteo-derecha,
    .panel-meteo-derecha-avanzado {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: none !important;

        width: 100% !important;

        margin-top: 22px !important;
        column-gap: 0 !important;
        row-gap: 12px !important;
    }

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

        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        transform: none !important;
    }

    /* Orden meteorológico natural */
    .metrica-presion-avanzada {
        order: 1 !important;
    }

    .metrica-viento,
    .metrica-viento-bajo-precipitaciones {
        order: 2 !important;
    }

    .metrica-precipitaciones-panel {
        order: 3 !important;
    }

    .metrica-solar-panel,
    .metrica-uv-mejorada {
        order: 4 !important;
    }

    .metrica-aqi,
    .metrica-aqi-bajo-solar {
        order: 5 !important;
    }

    .panel-avisos {
        margin-top: 16px !important;
    }


    /* -----------------------------------------------
       TABLAS
    ------------------------------------------------ */

    .grid-tablas,
    .tablas-grid,
    .tablas-meteorologicas {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .tarjeta-tabla {
        width: 100% !important;
        min-width: 0 !important;
    }

    .tarjeta-tabla td {
        font-size: 12px !important;
    }

    .tarjeta-tabla td:last-child {
        text-align: right !important;
    }


    /* -----------------------------------------------
       DESCRIPCIÓN
    ------------------------------------------------ */

    .descripcion-condiciones,
    .descripcion-meteo,
    .texto-condiciones {
        width: 100% !important;
        max-width: none !important;
    }


    /* -----------------------------------------------
       GRÁFICOS
    ------------------------------------------------ */

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

    .selector-rango {
        align-self: flex-start !important;
    }

    .grafico-card {
        width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .grafico-card-cabecera {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .selector-series {
        width: 100% !important;
        gap: 5px !important;
    }

    .boton-serie {
        font-size: 10px !important;
        padding: 7px 8px !important;
    }

    .grafico-demo,
    .grafico-demo-temp-hum {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 210px !important;
    }


    /* -----------------------------------------------
       SOBRE ESTOS DATOS
    ------------------------------------------------ */

    .sobre-datos {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .sobre-datos-cabecera {
        display: flex !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .sobre-datos-cabecera h2 {
        font-size: 20px !important;
    }

    .sobre-datos-contenido {
        width: 100% !important;
        max-width: none !important;
    }

    .sobre-datos-nota {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }


    /* -----------------------------------------------
       PIE
    ------------------------------------------------ */

    .pie-principal .contenedor {
        width: calc(100% - 20px) !important;
    }
}


/* =====================================================
   MÓVIL MUY ESTRECHO
   ===================================================== */

@media (max-width: 460px) {

    .cabecera-pagina h1 {
        font-size: 21px !important;
    }

    .columna-indicadores {
        grid-template-columns: 1fr !important;
    }

    .extremos-reordenados {
        gap: 18px !important;
    }

    .selector-series {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .boton-serie {
        width: 100% !important;
        text-align: left !important;
    }
}


/* =========================================================
   CORRECCIÓN MÓVIL 2 · COMPACTAR SIN TOCAR ESCRITORIO
========================================================= */

@media (max-width: 760px) {

    /* -----------------------------------------------
       CABECERA DE PÁGINA: sin huecos extra
    ------------------------------------------------ */
    .cabecera-pagina {
        margin-bottom: 12px !important;
        padding-bottom: 0 !important;
    }

    .estado-superior {
        margin-top: 4px !important;
    }


    /* -----------------------------------------------
       PANEL PRINCIPAL: eliminar alturas heredadas
    ------------------------------------------------ */
    .panel-meteo,
    .panel-meteo-avanzado {
        min-height: 0 !important;
        height: auto !important;

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

        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    .panel-meteo-izquierda,
    .panel-meteo-izquierda-nueva,
    .bloque-temperatura-nuevo,
    .eje-temp-humedad,
    .eje-temp-humedad-reordenado {
        min-height: 0 !important;
        height: auto !important;
    }

    .panel-meteo-izquierda,
    .panel-meteo-izquierda-nueva {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
    }

    .bloque-temperatura-nuevo {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .eje-temp-humedad,
    .eje-temp-humedad-reordenado {
        margin: 0 auto !important;
        padding: 0 !important;
    }

    .estado-texto-integrado {
        margin-top: 0 !important;
        margin-bottom: 8px !important;
    }

    .temperatura-etiqueta-principal {
        margin-top: 0 !important;
    }

    .microcontexto-temp {
        margin-bottom: 0 !important;
    }

    .extremos-reordenados {
        margin-top: 10px !important;
        margin-bottom: 14px !important;
    }

    .humedad-bloque-reordenado {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }


    /* -----------------------------------------------
       INDICADORES: compactos debajo de humedad
    ------------------------------------------------ */
    .columna-indicadores {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        width: 100% !important;
        gap: 8px !important;

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

        transform: none !important;
    }

    .columna-indicadores > * {
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
    }


    /* -----------------------------------------------
       MÉTRICAS: una debajo de otra SIN huecos
    ------------------------------------------------ */
    .panel-meteo-derecha,
    .panel-meteo-derecha-avanzado {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;

        width: 100% !important;

        min-height: 0 !important;
        height: auto !important;

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

    .panel-meteo-derecha > .metrica,
    .panel-meteo-derecha-avanzado > .metrica {
        position: static !important;

        width: 100% !important;
        max-width: none !important;

        min-height: 0 !important;
        height: auto !important;

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

        transform: none !important;
    }

    .metrica-presion-avanzada,
    .metrica-viento,
    .metrica-viento-bajo-precipitaciones,
    .metrica-precipitaciones-panel,
    .metrica-solar-panel,
    .metrica-uv-mejorada,
    .metrica-aqi,
    .metrica-aqi-bajo-solar {
        align-self: stretch !important;
    }


    /* -----------------------------------------------
       AVISOS: pegado al final del panel
    ------------------------------------------------ */
    .panel-avisos {
        margin-top: 2px !important;
        min-height: 0 !important;
    }


    /* -----------------------------------------------
       TABLAS: mantener una columna y sin alturas forzadas
    ------------------------------------------------ */
    .grid-tablas,
    .tablas-grid,
    .tablas-meteorologicas {
        margin-top: 14px !important;
    }

    .tarjeta-tabla,
    .tarjeta-tabla > table {
        min-height: 0 !important;
        height: auto !important;
    }


    /* -----------------------------------------------
       GRÁFICOS Y BLOQUES FINALES
    ------------------------------------------------ */
    .grafico-card,
    .sobre-datos,
    .descripcion-condiciones {
        margin-top: 14px !important;
    }
}


/* =========================================================
   MÓVIL MUY ESTRECHO
========================================================= */

@media (max-width: 460px) {

    .columna-indicadores {
        grid-template-columns: 1fr 1fr !important;
    }

    .cabecera-pagina h1 {
        font-size: 22px !important;
    }

    .panel-meteo,
    .panel-meteo-avanzado {
        padding: 14px !important;
    }
}

/* =========================================================
   MÓVIL V1 · PORTADA SIMPLIFICADA
   Solo <= 760 px. Tablet y escritorio quedan intactos.
========================================================= */

.etiqueta-vista-movil,
.pronosticos-titulo-movil,
.pronostico-portada-texto-movil,
.descripcion-titulo-movil,
.texto-condiciones-actuales-movil {
    display: none;
}

@media (max-width: 760px) {

    /* CABECERA: logo más contenido + identificación de modo móvil */
    .cabecera-contenido {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "logo logo"
            "modo redes" !important;
        align-items: center !important;
        gap: 8px 12px !important;
    }

    .logo-grafico {
        grid-area: logo !important;
        width: 88% !important;
        max-width: 330px !important;
        justify-self: start !important;
    }

    .logo-grafico img {
        width: 100% !important;
        max-width: 330px !important;
    }

    .etiqueta-vista-movil {
        grid-area: modo !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-self: start !important;
        gap: 6px !important;
        width: max-content !important;
        max-width: 100% !important;
        padding: 5px 8px !important;
        border: 1px solid rgba(61, 114, 151, .20) !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, .48) !important;
        color: #587486 !important;
        font-size: 9px !important;
        font-weight: 800 !important;
        letter-spacing: .9px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .etiqueta-vista-movil svg {
        width: 12px !important;
        height: 12px !important;
        fill: none !important;
        stroke: currentColor !important;
        stroke-width: 1.8 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
    }

    .redes-cabecera {
        grid-area: redes !important;
        justify-self: end !important;
        width: auto !important;
        margin: 0 !important;
    }

    /* CONTENEDOR: aprovechar un poco mejor el ancho real del teléfono */
    .contenedor {
        width: calc(100% - 16px) !important;
    }

    .pagina-meteo {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* CABECERA DE PÁGINA: corregir el enorme hueco en blanco.
       El flex-basis de 350 px heredado de tablet pasaba a ser vertical. */
    .cabecera-pagina {
        gap: 12px !important;
        margin-bottom: 12px !important;
        min-height: 0 !important;
        height: auto !important;
    }

    .estado-superior {
        flex: none !important;
        flex-basis: auto !important;
        align-self: stretch !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        row-gap: 4px !important;
    }

    .estado-superior .actualizacion-datos,
    .estado-superior .estado-avisos-rapido {
        min-height: 0 !important;
        line-height: 1.35 !important;
    }

    /* PANEL PRINCIPAL: fuera los seis indicadores secundarios
       (evolución, confort, sensación, visibilidad, viento y rocío). */
    .columna-indicadores {
        display: none !important;
    }

    .panel-meteo,
    .panel-meteo-avanzado {
        gap: 12px !important;
        padding: 14px !important;
    }

    .panel-meteo-izquierda,
    .panel-meteo-izquierda-nueva {
        gap: 10px !important;
    }

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

    /* PRONÓSTICO: texto específico y más corto para móvil */
    .pronosticos-titulo-escritorio,
    .pronostico-portada-texto-escritorio {
        display: none !important;
    }

    .pronosticos-titulo-movil {
        display: inline !important;
    }

    .pronostico-portada-texto-movil {
        display: block !important;
    }

    .pronosticos-portada-cabecera {
        min-height: 0 !important;
        padding-top: 11px !important;
        padding-bottom: 11px !important;
    }

    .pronosticos-portada-cabecera > span:nth-child(2) {
        font-size: 14px !important;
        line-height: 1.15 !important;
    }

    .pronostico-portada-texto-movil {
        font-size: 13px !important;
        line-height: 1.48 !important;
    }

    .pronostico-aviso-inline-movil {
        display: inline-flex !important;
        margin-right: 4px !important;
        white-space: nowrap !important;
    }

    /* GRÁFICOS HISTÓRICOS: no se muestran en móvil.
       Las tablas con los datos permanecen visibles. */
    .seccion-datos .bloque-rango-graficos,
    .seccion-datos .grafico-card {
        display: none !important;
    }

    .seccion-datos .grid-tablas {
        margin-top: 0 !important;
        gap: 14px !important;
    }

    /* DESCRIPCIÓN: resumen móvil en lugar del párrafo extenso */
    .descripcion-titulo-escritorio,
    .texto-condiciones-actuales-escritorio {
        display: none !important;
    }

    .descripcion-titulo-movil,
    .texto-condiciones-actuales-movil {
        display: inline !important;
    }

    .condiciones-descriptivas {
        padding-top: 18px !important;
        padding-bottom: 18px !important;
    }

    .condiciones-descriptivas h2 {
        font-size: 19px !important;
        line-height: 1.2 !important;
    }

    .condiciones-descriptivas .fecha-condiciones {
        font-size: 12px !important;
        line-height: 1.45 !important;
    }

    .condiciones-descriptivas .texto-condiciones-actuales-movil {
        display: block !important;
        margin-top: 10px !important;
        font-size: 13px !important;
        line-height: 1.55 !important;
    }

    .condiciones-descriptivas .resumen-tendencias {
        display: none !important;
    }
}

@media (max-width: 460px) {
    .logo-grafico {
        width: 90% !important;
        max-width: 315px !important;
    }

    .logo-grafico img {
        max-width: 315px !important;
    }

    .etiqueta-vista-movil {
        font-size: 8.5px !important;
        letter-spacing: .7px !important;
    }
}



/* =====================================================
   MÓVIL · SEGUNDA PASADA DE SIMPLIFICACIÓN
   Solo <= 760 px. No afecta a tablet ni escritorio.
   ===================================================== */

/* Elementos alternativos que solo se activan en móvil */
.tabla-titulo-movil,
.solar-titulo-movil,
.efemeride-proximo-movil,
.astronomia-movil-resumen,
.embalses-indicadores-movil {
    display: none !important;
}

@media (max-width: 760px) {

    /* Cabecera superior */
    .red-social {
        width: 28px !important;
        height: 28px !important;
    }

    .redes-cabecera {
        gap: 5px !important;
    }

    /* Menos aire entre los avisos rápidos y el estado del cielo */
    .cabecera-pagina {
        margin-bottom: 3px !important;
    }

    .panel-meteo,
    .panel-meteo-avanzado {
        margin-top: 0 !important;
    }

    /* Etiquetas/categorías junto a valores: ocultarlas en móvil */
    .tarjeta-tabla .badge-en-linea,
    .tarjeta-tabla .badge-temp24,
    .panel-meteo .badge,
    .panel-meteo-avanzado .badge {
        display: none !important;
    }

    /* Títulos de tablas más compactos */
    .tabla-titulo-escritorio {
        display: none !important;
    }

    .tabla-titulo-movil {
        display: inline !important;
    }

    /* Efemérides lunares: fase actual + próxima fase principal */
    .tarjeta-lunar .efemeride-grid,
    .tarjeta-lunar .efemeride-proximos {
        display: none !important;
    }

    .tarjeta-lunar .efemeride-proximo-movil {
        display: block !important;
        padding: 14px 16px !important;
        border-top: 1px solid rgba(84, 101, 118, .12);
    }

    .tarjeta-lunar .efemeride-proximo-movil strong {
        display: block;
        margin-top: 4px;
    }

    /* Actividad solar: solo rayos X y estado */
    .tarjeta-solar .solar-titulo-escritorio,
    .tarjeta-solar .tarjeta-efemeride-cabecera p,
    .tarjeta-solar .efemeride-grid-solar,
    .tarjeta-solar .efemeride-destacada .efemeride-valor-grande,
    .tarjeta-solar .efemeride-estado small {
        display: none !important;
    }

    .tarjeta-solar .solar-titulo-movil {
        display: inline !important;
    }

    .tarjeta-solar .efemeride-destacada {
        grid-template-columns: 1fr !important;
    }

    /* Astronomía: solo salida/puesta, próximo eclipse y estación */
    .tarjeta-astronomica .astro-ciclo,
    .tarjeta-astronomica .efemerides-astro-grid,
    .tarjeta-astronomica .efemerides-estacionales,
    .tarjeta-astronomica .tarjeta-efemeride-cabecera p {
        display: none !important;
    }

    .tarjeta-astronomica .astronomia-movil-resumen {
        display: block !important;
    }

    .astronomia-movil-sol {
        display: grid;
        grid-template-columns: 1fr 1fr;
        border-bottom: 1px solid rgba(84, 101, 118, .12);
    }

    .astronomia-movil-sol > div,
    .astronomia-movil-evento {
        padding: 14px 16px;
    }

    .astronomia-movil-sol > div + div {
        border-left: 1px solid rgba(84, 101, 118, .12);
    }

    .astronomia-movil-sol strong,
    .astronomia-movil-evento strong {
        display: block;
        margin-top: 4px;
        line-height: 1.35;
    }

    .astronomia-movil-evento + .astronomia-movil-evento {
        border-top: 1px solid rgba(84, 101, 118, .12);
    }

    /* Embalses: resumen conjunto + capacidad/volumen en una fila */
    .tarjeta-embalses .embalses-indicadores,
    .tarjeta-embalses .embalses-tabla-bloque {
        display: none !important;
    }

    .tarjeta-embalses .embalses-indicadores-movil {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        margin: 0 16px 14px;
        border: 1px solid rgba(84, 101, 118, .12);
        border-radius: 10px;
        overflow: hidden;
    }

    .embalses-indicadores-movil > div {
        min-width: 0;
        padding: 11px 8px;
        text-align: center;
    }

    .embalses-indicadores-movil > div + div {
        border-left: 1px solid rgba(84, 101, 118, .12);
    }

    .embalses-indicadores-movil .embalses-indicador-valor,
    .embalses-indicadores-movil .embalses-indicador-texto {
        display: block;
    }

    /* Actividad sísmica: provincia de Sevilla + significativo 10 días */
    .tarjeta-sismologia .sismologia-indicadores,
    .tarjeta-sismologia .sismologia-tabla-bloque,
    .tarjeta-sismologia .sismologia-destacado-zona,
    .tarjeta-sismologia .sismologia-destacado-intensidad {
        display: none !important;
    }

    .tarjeta-sismologia .sismologia-destacados {
        display: block !important;
    }

    .tarjeta-sismologia .sismologia-destacado-significativo {
        display: block !important;
    }
}


/* =====================================================
   MÓVIL · TERCERA PASADA DE AJUSTES
   Solo <= 760 px. No afecta a tablet ni escritorio.
   ===================================================== */
@media (max-width: 760px) {

    /* Solo el rótulo TEMPERATURA del panel principal a la izquierda */
    .temperatura-etiqueta-principal {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: left !important;
        align-self: stretch !important;
    }

    /* En móvil el acceso a Pronósticos se realiza desde el menú/página, no desde esta cabecera */
    .pronosticos-portada-cabecera-boton {
        display: none !important;
    }

    /* Tabla de viento: detalle principal de la racha alineado con el resto de valores */
    .tarjeta-viento-grid .celda-racha-maxima .linea-racha-maxima {
        justify-content: flex-end !important;
        text-align: right !important;
    }

    .tarjeta-viento-grid .celda-racha-maxima .hora-racha-maxima {
        width: 100% !important;
        margin-left: 0 !important;
        text-align: right !important;
    }

    /* Dirección: en móvil dejamos solo la denominación, sin abreviatura/grados entre paréntesis */
    .tarjeta-viento-grid .viento-detalle-parentesis {
        display: none !important;
    }

    /* Calidad del aire: partículas individuales fuera de la tabla móvil */
    .tarjeta-calidad-aire-grid .calidad-particulas-movil-oculta {
        display: none !important;
    }

    /* La fuente de sismología debe seguir visible también en la versión simplificada */
    .tarjeta-sismologia .sismologia-fuente {
        display: block !important;
    }
}


/* =====================================================
   MÓVIL · CUARTA PASADA DE SIMPLIFICACIÓN DE TABLAS
   Solo <= 760 px. No afecta a tablet ni escritorio.
   ===================================================== */

.tabla-texto-movil {
    display: none !important;
}

@media (max-width: 760px) {
    /* Filas secundarias que se eliminan de las tablas en móvil */
    .tarjeta-tabla tr.movil-ocultar-fila {
        display: none !important;
    }

    /* Humedad: ocultar únicamente el valor absoluto entre paréntesis */
    .tarjeta-temp-grid .humedad-absoluta-movil-oculta {
        display: none !important;
    }

    /* Etiqueta abreviada de la variación térmica para que quepa mejor */
    .tabla-texto-escritorio {
        display: none !important;
    }

    .tabla-texto-movil {
        display: inline !important;
    }
}

/* =====================================================
   MÓVIL · QUINTA PASADA DE AJUSTES
   Solo <= 760 px. No afecta a tablet ni escritorio.
   ===================================================== */
@media (max-width: 760px) {
    /* Viento: igualamos la caja del icono y el hueco con Presión,
       Precipitaciones, Solar/UV y Calidad del aire para que títulos
       y valores comiencen exactamente en el mismo eje vertical. */
    .panel-meteo-derecha .metrica-viento-compacta,
    .panel-meteo-derecha-avanzado .metrica-viento-compacta {
        gap: 15px !important;
    }

    .panel-meteo-derecha .indicador-viento-simple,
    .panel-meteo-derecha-avanzado .indicador-viento-simple {
        width: 58px !important;
        height: 58px !important;
        flex: 0 0 58px !important;
    }

    .panel-meteo-derecha .flecha-viento,
    .panel-meteo-derecha-avanzado .flecha-viento {
        width: 43px !important;
        height: 43px !important;
    }
}

/* =====================================================
   MÓVIL · SEXTA PASADA · RESPIRACIÓN SUAVE PANEL PRINCIPAL
   Solo <= 760 px. No afecta a tablet ni escritorio.
   ===================================================== */
@media (max-width: 760px) {
    /* Un poco más de aire entre Presión, Viento, Precipitaciones,
       Solar/UV y Calidad del aire, sin alargar en exceso el panel. */
    .panel-meteo-derecha,
    .panel-meteo-derecha-avanzado {
        row-gap: 16px !important;
    }
}