/* ===========================
   Estilos comunes Resumen
   =========================== */
    /* embalses.php */
    #resumenEmbalses .resumen-embalses-titulo {
        margin-top: 10px;
    }
    #resumenEmbalses .resumen-embalses-table th,
    #resumenEmbalses .resumen-embalses-table td {
        font-size: 13px;
        vertical-align: middle;
    }
    /* embalses.php + variacion.php */
    #resumenEmbalses tr.provincia-fechas th,
    #resumenVariacion tr.provincia-fechas th {
        background-color: #577987;
        border: 1px solid #acacacff;
        font-size: 14px;
        font-weight: 400;
    }

    #resumenEmbalses tr.provincia-titulo th,
    #resumenVariacion tr.provincia-titulo th {
        background-color: #608fa1;
        color: #fff;
        border: 1px solid #acacacff;
        font-size: 14px;
        font-weight: 400;
    }

    #resumenEmbalses tr.total-provincia th,
    #resumenVariacion tr.total-provincia th {
        background-color: #e9ecef;
        border: 1px solid #acacacff;
    }
    /* Contenedor del progreso (para posicionar el texto encima) */
    #resumenEmbalses .progress-embalse-wrapper {
        position: relative;
        width: 100%;
        height: 18px;
    }

    /* Barra de progreso nativa */
    #resumenEmbalses .progress-embalse {
        width: 100%;
        height: 100%;
        -webkit-appearance: none;
        appearance: none;
    }

    /* Fondo + borde del “cajetín” (WebKit: Chrome, Edge, Safari…) */
    #resumenEmbalses .progress-embalse::-webkit-progress-bar {
        background-color: #f4f7f9;
        border: 1px solid #577987;   /* 👉 color del recuadro */
        border-radius: 4px;
    }

    /* Parte rellena (valor actual) */
    #resumenEmbalses .progress-embalse::-webkit-progress-value {
        background-color: #5bc0de;   /* color del rellenado */
        border-radius: 4px;
    }

    /* Firefox */
    #resumenEmbalses .progress-embalse::-moz-progress-bar {
        background-color: #5bc0de;
    }

    /* Texto centrado dentro de la barra (embalses + totales) */
    #resumenEmbalses .progress-embalse-text,
    #resumenEmbalses .progress-embalse-label {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 400;   /* ← normal, sin negrita */
        color: #000;
        pointer-events: none;
    }
    /* Solo el texto del TOTAL en negrita */
    #resumenEmbalses .total-provincia .progress-embalse-label {
        font-weight: 700;   /* bold solo en TOTAL */
    }

    /*VARIACION*/
    /* Variación de volumen embalsado */
    #resumenVariacion .titulo-resumen-variacion {
        margin-top: 10px;
        margin-bottom: 15px;
    }
    #resumenVariacion .resumen-variacion-table th,
    #resumenVariacion .resumen-variacion-table td {
        font-size: 13px;
        vertical-align: middle;
    }
    /* Cabecera de variación */
    #resumenVariacion .resumen-variacion-header {
        margin-top: 10px;
        margin-bottom: 8px;
    }

    #resumenVariacion .titulo-resumen-variacion {
        margin: 0;
        font-size: 18px;
    }

    /* Cajetín de filtros tipo "previsiones" */
    .resumen-filtro-box {
        border: 1px solid #e3e3e3;
        border-radius: 4px;
        background-color: #f5f5f5;
        padding: 10px 15px;
        margin-bottom: 15px;
    }

    .resumen-filtro-box .form-group {
        margin-bottom: 8px;
    }

    /* Botón Consultar más pequeño y sin ocupar todo el ancho */
    .resumen-btn-consultar {
        padding: 4px 14px;
        min-width: 100px;
        font-size: 13px;
    }

    /* En móvil, que el botón pueda ocupar el ancho y baje debajo de las fechas */
    @media (max-width: 768px) {
        .resumen-filtro-box .resumen-btn-consultar {
            width: 100%;
            margin-top: 8px;
        }
    }

    /* ===========================
   VOL_MAXMIN
   =========================== */
    #resumenVolMaxMin .titulo-resumen-volmaxmin {
        margin-top: 0;
    }

    #resumenVolMaxMin .resumen-volmaxmin-header {
        margin-bottom: 5px;
    }

    #resumenVolMaxMin .resumen-volmaxmin-table th,
    #resumenVolMaxMin .resumen-volmaxmin-table td {
        font-size: 13px;
        vertical-align: middle;
    }

    /* Cabecera tipo “título” similar a embalses/variación */
    #resumenVolMaxMin .resumen-volmaxmin-table tr.volmaxmin-header-row th {
        background-color: #608fa1;
        color: #fff;
        border: 1px solid #acacacff;
    }

    /* Leyenda de máximos/mínimos */
    #resumenVolMaxMin .resumen-leyenda-volmaxmin .leyenda-cuadro {
        display: inline-block;
        height: 16px;
        width: 40px;
        border: 1px solid grey;
        margin-right: 5px;
    }

    #resumenVolMaxMin .resumen-leyenda-volmaxmin .leyenda-texto {
        margin-right: 10px;
        font-size: 13px;
        vertical-align: top;
    }

    /* Colores de resaltado (día de hoy) */
    #resumenVolMaxMin .azul {
        background-color: #12c7fd;

    }

    #resumenVolMaxMin .naranja {
        background-color: #ffa500;
    }

    /* ===========================
    Resumen ríos (rios.php)
    =========================== */

    #resumenRios .titulo-resumen-rios {
        margin-top: 0;
        margin-bottom: 10px;
    }

    #resumenRios .resumen-rios-table th,
    #resumenRios .resumen-rios-table td {
        font-size: 13px;
        vertical-align: middle;
    }

    /* Cabecera tipo “azul” como en otras tablas */
    #resumenRios .resumen-rios-header-row th {
        background-color: #608fa1;
        color: #fff;
        border: 1px solid #acacacff;
        font-size: 14px;
        font-weight: 400;
    }

    /* Leyenda niveles */
    #resumenRios .resumen-rios-legend {
        margin-top: 5px;
        margin-bottom: 10px;
    }

    #resumenRios .resumen-rios-legend-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    #resumenRios .resumen-rios-legend-list li {
        display: inline-block;
        margin-left: 6px;
        font-size: 12px;
        vertical-align: middle;
    }

    /* Cajitas de color para Nivel 1, 2, 3 */
    #resumenRios .resumen-rios-legend-list .color-box {
        width: 50px;
        height: 14px;
        border: 1px solid grey;
        margin-left: 8px;
        margin-right: 4px;
    }

    #resumenPluviometria .resumen-pluvio-header-row th {
        background-color: #608fa1;
        color: #fff;
        border: 1px solid #acacacff;
        vertical-align: middle;
        font-size: 13px;
        font-weight: 400;
    }

    /* Cajetín filtros de alerta (reutiliza estilo de previsiones) */
    .resumen-filtro-alertas {
        margin-top: 8px;
    }

    /* Botones de filtro */
    .resumen-filtro-alertas .filtro-alerta,
    .resumen-filtro-alertas .filtro-alerta-todos {
        margin-right: 6px;
        margin-bottom: 4px;
    }

    /* Estado activo del filtro */
    .resumen-filtro-alertas .filtro-alerta.activo {
        box-shadow: 0 0 0 2px #608fa1 inset;
        background-color: #275d8b;
        color: #fff;
    }

    /* Cuadrito de color delante del texto "Nivel X" */
    .resumen-filtro-alertas .leyenda-color {
        display: inline-block;
        width: 14px;
        height: 14px;
        margin-right: 4px;
        border: 1px solid #555;
        vertical-align: middle;
    }

    /* Ya tendrás las clases de colores, por si acaso: */
    .amarillo { background-color: #ffff99; }
    .naranja  { background-color: #ffcc66; }
    .rojo     { background-color: #ff6666; color: #fff; }


    /* Leyenda de máximos/mínimos Temperatura*/
    #resumenTemperaturas .resumen-leyenda-temperaturas .leyenda-cuadro {
        display: inline-block;
        height: 16px;
        width: 40px;
        border: 1px solid grey;
        margin-right: 5px;
    }

    #resumenTemperaturas .resumen-leyenda-temperaturas .leyenda-texto {
        margin-right: 10px;
        font-size: 13px;
        vertical-align: top;
    }

    /* Colores de resaltado (día de hoy) */
    #resumenTemperaturas .azul {
        background-color: #12c7fd;

    }

    #resumenTemperaturas .naranja {
        background-color: #ffa500;
    }
    /* Cabecera de la tabla de temperaturas */
    #resumenTemperaturas .resumen-table thead th {
        background-color: #608fa1;   /* mismo color que provincia-titulo */
        color: #fff;                 /* texto en blanco */
        border: 1px solid #acacacff; /* mismo borde que las otras */
    }

    #resumenPluviocomparada .resumen-table thead th {
        background-color: #608fa1;
        color: #fff;
        border: 1px solid #acacacff;
        vertical-align: middle;
    }

    #resumenVolumenHistorico .resumen-table thead th,
    #resumenPrecipitacionHistorica .resumen-table thead th {
        background-color: #608fa1;
        color: #fff;
        border: 1px solid #acacacff;
        vertical-align: middle;
    }

    .resumen-subheader-row th {
        background-color: #577987; /* #2b3e50 o el color que uses */
        color: #fff;
        font-weight: 600;
    }

    /* ===========================
    Datos a la carta
    =========================== */

    #datosALaCarta .resumen-variacion-header {
        margin-top: 10px;
        margin-bottom: 8px;
    }

    #datosALaCarta .titulo-resumen-variacion {
        margin: 0;
        font-size: 18px;
    }

    /* Que el cajetín de filtros abrace todas las filas (clearfix) */
    .resumen-filtro-box::after {
        content: "";
        display: block;
        clear: both;
    }

    /* Para este módulo concreto (por si quieres afinar más) */
    #datosALaCarta .resumen-filtro-box {
        width: 100%;
        
    }

    /* Caja de resultados de Datos a la carta */
    #datosALaCarta .resumen-table {
        width: 100%;
        margin: 20px 0;
    }

    /* Cabecera de la tabla, mismo estilo que resumenPrecipitacionHistorica */
    #datosALaCarta .resumen-table thead th {
        background-color: #608fa1;
        color: #fff;
        border: 1px solid #acacacff;
        vertical-align: middle;
    }

    #datosALaCarta .resumen-table tbody td {
        border: 1px solid #acacacff;
        vertical-align: middle;
    }