/*
 * Ficha de estación
 *
 * Todos los estilos quedan limitados a:
 * - #myModal
 * - .station-sheet
 *
 * De esta forma no se modifican otras tablas,
 * modales o apartados de la aplicación.
 */


/* =========================================================
   Ventana modal
   ========================================================= */

#myModal .modal-dialog {
    width: calc(100% - 30px);
    max-width: 1180px;
    margin: 30px auto;
}

#myModal .modal-content {
    overflow: hidden;

    border: 0;
    border-radius: 14px;

    background: #f4f7f9;

    box-shadow:
        0 20px 55px
        rgba(22, 48, 63, .28);
}


/* =========================================================
   Contenedor principal
   ========================================================= */

.station-sheet {
    color: #294452;
    background: #f4f7f9;

    font-family:
        "Open Sans",
        Arial,
        sans-serif;
}


/* =========================================================
   Cabecera
   ========================================================= */

.station-sheet__header {
    min-height: 68px;
    padding: 18px 56px 18px 22px;

    border-bottom: 0;

    background:
        linear-gradient(
            135deg,
            #20495b 0%,
            #33758d 100%
        );

    color: #fff;
}

.station-sheet__header .modal-title {
    margin: 0;
    padding: 0;

    color: #fff;

    font-size: 19px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: .01em;
}

.station-sheet__header .close {
    position: absolute;
    top: 17px;
    right: 20px;

    margin: 0;

    color: #fff;
    opacity: .82;

    font-size: 30px;
    font-weight: 300;
    line-height: 1;

    text-shadow: none;
}

.station-sheet__header .close:hover,
.station-sheet__header .close:focus {
    color: #fff;
    opacity: 1;
}


/* =========================================================
   Cuerpo
   ========================================================= */

.station-sheet__body {
    float: none;
    width: auto;

    padding: 20px;

    background: #f4f7f9;
}

.station-sheet__body::before,
.station-sheet__body::after {
    display: table;
    content: " ";
}

.station-sheet__body::after {
    clear: both;
}

/*
 * La vista antigua coloca un col-sm-12 directamente
 * dentro del modal-body, sin una fila Bootstrap.
 */
.station-sheet__body > .col-sm-12 {
    float: none;
    width: 100%;

    padding-right: 0;
    padding-left: 0;
}


/* =========================================================
   Cabeceras actuales de sección
   ========================================================= */

.station-sheet .thFicha {
    padding: 11px 14px !important;

    border: 0 !important;
    border-bottom:
        1px solid #d6e1e6 !important;

    background: #e7eff3 !important;
    color: #284c5d !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.4;

    text-align: left !important;
    text-transform: none !important;
    letter-spacing: .01em;
}


/* =========================================================
   Tablas heredadas
   ========================================================= */

.station-sheet table {
    width: 100%;
    margin-bottom: 16px;

    border-collapse: collapse;

    background: #fff;

    box-shadow:
        0 2px 8px
        rgba(38, 65, 80, .06);
}

.station-sheet table td {
    padding: 8px 10px;

    border-color: #dce5e9;

    color: #334f5d;
    font-size: 12px;
    line-height: 1.4;
}

.station-sheet table td b {
    color: #254655;
    font-weight: 600;
}


/* Mantener las imágenes centradas. */

.station-sheet #img_foto,
.station-sheet #img_esquema {
    display: block;

    max-width: 100%;
    height: auto;

    margin: 0 auto;

    object-fit: contain;
}


/* =========================================================
   Pie
   ========================================================= */

.station-sheet__footer {
    padding: 13px 20px;

    border-top: 1px solid #d9e3e7;

    background: #fff;
}

.station-sheet__footer .btn {
    min-width: 94px;
    padding: 7px 18px;

    border-color: #bccbd2;
    border-radius: 5px;

    color: #314e5c;
    font-weight: 600;
}

.station-sheet__footer .btn:hover,
.station-sheet__footer .btn:focus {
    border-color: #7897a5;

    background: #edf3f6;
    color: #203e4d;
}


/* =========================================================
   Adaptación móvil
   ========================================================= */

@media (max-width: 767px) {
    #myModal .modal-dialog {
        width: auto;
        max-width: none;

        margin: 10px;
    }

    #myModal .modal-content {
        border-radius: 10px;
    }

    .station-sheet__header {
        min-height: 60px;
        padding:
            15px
            48px
            15px
            16px;
    }

    .station-sheet__header .modal-title {
        font-size: 16px;
    }

    .station-sheet__header .close {
        top: 13px;
        right: 15px;
    }

    .station-sheet__body {
        padding: 12px;
    }

    .station-sheet table {
        display: block;
        overflow-x: auto;

        white-space: nowrap;

        -webkit-overflow-scrolling: touch;
    }

    .station-sheet__footer {
        padding: 11px 12px;
    }
}

/*
 * Contenedor proporcional del esquema.
 *
 * Su tamaño se adapta al tamaño real mostrado
 * por la imagen, por lo que los porcentajes de
 * posición de los gauges siguen coincidiendo.
 */
.station-scheme {
    position: relative;

    display: inline-block;

    max-width: 100%;

    overflow: hidden;

    line-height: 0;
    vertical-align: middle;
}


/*
 * El PNG queda por delante.
 *
 * Las zonas transparentes permiten ver el agua
 * dibujada detrás.
 */
.station-scheme__image {
    position: relative;
    z-index: 10;

    display: block;

    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 229px !important;

    margin: 0 auto;
}


/*
 * Zona física donde puede subir o bajar el agua.
 */
.station-scheme__gauge {
    position: absolute;
    z-index: 2;

    overflow: hidden;

    pointer-events: none;

    opacity: .75;
}


/*
 * Agua dinámica.
 *
 * Crece desde abajo usando el porcentaje calculado
 * mediante valor actual, mínimo y máximo.
 */
.station-scheme__water {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

    height:
        var(
            --station-water-height,
            0%
        );

    background:
        rgba(
            35,
            145,
            205,
            .82
        );

    transition:
        height
        .6s
        ease;
}

/* =========================================================
   Cabecera informativa
   ========================================================= */

.station-sheet__header {
    position: relative;
}

.station-sheet__header-layout {
    display: flex;
    align-items: center;
    gap: 15px;

    width: 100%;
}


/*
 * Icono del tipo de estación.
 */
.station-sheet__type-icon {
    display: flex;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    border:
        1px solid
        rgba(255, 255, 255, .25);

    border-radius: 12px;

    background:
        rgba(255, 255, 255, .13);

    color: #fff;

    font-size: 22px;
}


/*
 * Bloque central.
 */
.station-sheet__heading {
    flex: 1;
    min-width: 0;
}

.station-sheet__eyebrow {
    margin-bottom: 2px;

    color:
        rgba(255, 255, 255, .72);

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

    line-height: 1.3;

    text-transform: uppercase;
    letter-spacing: .08em;
}

.station-sheet__header .station-sheet__title {
    overflow: hidden;

    margin: 0;
    padding: 0;

    color: #fff;

    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/*
 * Código y localización.
 */
.station-sheet__metadata {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 15px;

    margin-top: 6px;

    color:
        rgba(255, 255, 255, .82);

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

.station-sheet__metadata-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.station-sheet__metadata-item .glyphicon {
    color:
        rgba(255, 255, 255, .65);

    font-size: 10px;
}


/*
 * Fecha de actualización.
 */
.station-sheet__update {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 3px;

    min-width: 175px;
    padding: 9px 12px;

    border:
        1px solid
        rgba(255, 255, 255, .18);

    border-radius: 7px;

    background:
        rgba(0, 0, 0, .10);

    text-align: right;
}

.station-sheet__update-label {
    color:
        rgba(255, 255, 255, .68);

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

    text-transform: uppercase;
    letter-spacing: .04em;
}

.station-sheet__update-label .glyphicon {
    margin-right: 3px;
}

.station-sheet__update strong {
    color: #fff;

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


/*
 * Matiz del icono según el tipo.
 */
.station-sheet[data-station-type="A"]
.station-sheet__type-icon {
    background:
        rgba(83, 182, 211, .24);
}

.station-sheet[data-station-type="E"]
.station-sheet__type-icon {
    background:
        rgba(49, 151, 218, .28);
}

.station-sheet[data-station-type="P"]
.station-sheet__type-icon {
    background:
        rgba(135, 184, 228, .25);
}

.station-sheet[data-station-type="M"]
.station-sheet__type-icon {
    background:
        rgba(245, 188, 66, .22);
}

.station-sheet[data-station-type="D"]
.station-sheet__type-icon {
    background:
        rgba(96, 202, 163, .22);
}


/* =========================================================
   Cabecera en móvil
   ========================================================= */

@media (max-width: 767px) {
    .station-sheet__header-layout {
        align-items: flex-start;
        flex-wrap: wrap;

        gap: 10px;
    }

    .station-sheet__type-icon {
        flex-basis: 42px;

        width: 42px;
        height: 42px;

        border-radius: 9px;

        font-size: 19px;
    }

    .station-sheet__header .station-sheet__title {
        font-size: 16px;

        white-space: normal;
    }

    .station-sheet__metadata {
        display: block;

        margin-top: 5px;
    }

    .station-sheet__metadata-item {
        display: flex;

        margin-top: 3px;
    }

    .station-sheet__update {
        flex-basis: 100%;

        min-width: 0;
        margin-left: 52px;

        padding: 7px 10px;

        text-align: left;
    }
}

/* =========================================================
   Resumen operativo
   ========================================================= */

.station-summary {
    margin-bottom: 18px;
}

.station-summary__heading {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 9px;

    color: #345563;

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

    text-transform: uppercase;
    letter-spacing: .045em;
}

.station-summary__heading .glyphicon {
    color: #4d879d;
    font-size: 13px;
}

.station-summary__grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(175px, 1fr)
        );

    gap: 10px;
}


/*
 * Tarjeta individual.
 */
.station-metric {
    display: flex;
    align-items: center;
    gap: 12px;

    min-height: 78px;
    padding: 12px 14px;

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

    background: #fff;

    box-shadow:
        0 2px 7px
        rgba(37, 66, 81, .055);
}

.station-metric__icon {
    display: flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    border-radius: 10px;

    background: #e9f2f5;
    color: #36738b;

    font-size: 17px;
}

.station-metric__content {
    min-width: 0;
}

.station-metric__label {
    display: block;

    margin-bottom: 3px;

    color: #71838c;

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

    line-height: 1.25;

    text-transform: uppercase;
    letter-spacing: .04em;
}

.station-metric__reading {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;
}

.station-metric__reading strong {
    color: #213f4d;

    font-size: 21px;
    font-weight: 600;
    line-height: 1.1;
}

.station-metric__reading span {
    color: #647a85;

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


/*
 * Matices según la magnitud.
 */
.station-metric--volume
.station-metric__icon,

.station-metric--fill
.station-metric__icon,

.station-metric--level
.station-metric__icon {
    background: #e5f2f8;
    color: #2d84a5;
}

.station-metric--flow
.station-metric__icon {
    background: #e4f2f1;
    color: #347e7a;
}

.station-metric--rain
.station-metric__icon {
    background: #e8eff9;
    color: #527cad;
}


/*
 * Tendencias sin utilizar colores de alarma.
 */
.station-metric--rising
.station-metric__icon {
    background: #e2f1f6;
    color: #247f9e;
}

.station-metric--falling
.station-metric__icon {
    background: #eceefa;
    color: #6472aa;
}

.station-metric--stable
.station-metric__icon {
    background: #edf1f2;
    color: #657c86;
}

.station-metric--nodata {
    opacity: .68;
}

.station-metric--nodata
.station-metric__icon {
    background: #eef1f2;
    color: #89979d;
}


/* =========================================================
   Resumen operativo en móvil
   ========================================================= */

@media (max-width: 767px) {
    .station-summary__grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 8px;
    }

    .station-metric {
        align-items: flex-start;

        min-height: 86px;
        padding: 10px;

        gap: 8px;
    }

    .station-metric__icon {
        flex-basis: 32px;

        width: 32px;
        height: 32px;

        border-radius: 8px;

        font-size: 14px;
    }

    .station-metric__reading strong {
        font-size: 17px;
    }
}

@media (max-width: 420px) {
    .station-summary__grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Zona visual: esquema y fotografía
   ========================================================= */

.station-visual {
    margin-bottom: 18px;
}

.station-tabs {
    padding-left: 6px;

    border-bottom: 1px solid #ccdce3;
}

.station-tabs > li {
    margin-bottom: -1px;
}

.station-tabs > li > a {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-right: 4px;
    padding: 10px 16px;

    border: 1px solid transparent;
    border-radius: 7px 7px 0 0;

    color: #55717e;

    font-size: 12px;
    font-weight: 600;

    text-decoration: none;
}

.station-tabs > li > a:hover,
.station-tabs > li > a:focus {
    border-color:
        #dce6ea
        #dce6ea
        #ccdce3;

    background: #edf3f6;
    color: #2d5f73;
}

.station-tabs > li.active > a,
.station-tabs > li.active > a:hover,
.station-tabs > li.active > a:focus {
    border-color:
        #ccdce3
        #ccdce3
        #fff;

    background: #fff;
    color: #25576c;
}

.station-tabs > li.active > a .glyphicon {
    color: #3184a4;
}


/*
 * Contenido de la pestaña.
 */
.station-tabs__content {
    min-height: 300px;

    border:
        1px solid
        #ccdce3;

    border-top: 0;
    border-radius: 0 0 9px 9px;

    background: #fff;
}

.station-tabs__content > .tab-pane {
    padding: 16px;
}


/*
 * Zona centrada de imagen.
 */
.station-visual__stage {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 340px;

    padding: 10px;

    overflow: hidden;

    border-radius: 7px;

    background:
        linear-gradient(
            180deg,
            #f8fafb 0%,
            #eef3f5 100%
        );
}


/*
 * El wrapper sigue ajustándose al tamaño real
 * de la imagen. Así el gauge mantiene su posición.
 */
.station-visual__stage .station-scheme {
    position: relative;

    display: inline-block;

    max-width: 100%;

    margin: 0 auto;

    line-height: 0;
}


/*
 * Ampliamos el esquema únicamente dentro
 * de esta nueva pestaña.
 */
.station-visual__stage
.station-scheme__image {
    display: block;

    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 520px !important;

    margin: 0 auto;
}


/*
 * Fotografía.
 */
.station-visual__photo {
    display: block;

    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 480px !important;

    margin: 0 auto;

    border-radius: 7px;

    object-fit: contain;

    box-shadow:
        0 4px 16px
        rgba(30, 57, 70, .12);
}


/*
 * Mensaje cuando falta una imagen.
 */
.station-visual__missing {
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 9px;

    min-height: 260px;

    color: #71858f;

    font-size: 12px;
}

.station-visual__missing .glyphicon {
    font-size: 31px;
    opacity: .65;
}


/* =========================================================
   Zona visual en móvil
   ========================================================= */

@media (max-width: 767px) {
    .station-tabs {
        display: flex;

        padding-left: 0;
    }

    .station-tabs > li {
        flex: 1;
    }

    .station-tabs > li > a {
        justify-content: center;

        margin-right: 0;
        padding: 9px 7px;

        font-size: 11px;

        text-align: center;
    }

    .station-tabs__content {
        min-height: 220px;
    }

    .station-tabs__content > .tab-pane {
        padding: 8px;
    }

    .station-visual__stage {
        min-height: 220px;
        padding: 5px;
    }

    .station-visual__stage
    .station-scheme__image {
        max-height: 65vh !important;
    }

    .station-visual__photo {
        max-height: 65vh !important;
    }
}

/* =========================================================
   Ficha técnica
   ========================================================= */

.station-technical {
    padding: 4px;
}

.station-technical__section + 
.station-technical__section {
    margin-top: 24px;
}

.station-technical__title {
    display: flex;
    align-items: center;
    gap: 8px;

    margin: 0 0 11px;
    padding-bottom: 9px;

    border-bottom: 1px solid #dce6ea;

    color: #345867;

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

    line-height: 1.4;
}

.station-technical__title .glyphicon {
    color: #45839a;
    font-size: 13px;
}

.station-technical__grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(210px, 1fr)
        );

    gap: 10px;
}


/*
 * Elemento de la ficha técnica.
 */
.station-detail-card {
    display: flex;
    align-items: center;
    gap: 11px;

    min-height: 68px;
    padding: 11px 13px;

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

    background: #fff;

    box-shadow:
        0 2px 6px
        rgba(38, 66, 80, .045);
}

.station-detail-card--wide {
    grid-column: span 2;
}

.station-detail-card__icon {
    display: flex;
    flex: 0 0 35px;
    align-items: center;
    justify-content: center;

    width: 35px;
    height: 35px;

    border-radius: 8px;

    background: #e9f1f4;
    color: #3e788e;

    font-size: 14px;
}

.station-detail-card__content {
    min-width: 0;
}

.station-detail-card__label {
    display: block;

    margin-bottom: 3px;

    color: #75868e;

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

    line-height: 1.3;

    text-transform: uppercase;
    letter-spacing: .045em;
}

.station-detail-card__content strong {
    display: block;

    overflow-wrap: anywhere;

    color: #2d4b59;

    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}


/* =========================================================
   Ficha técnica en móvil
   ========================================================= */

@media (max-width: 767px) {
    .station-technical__grid {
        grid-template-columns: 1fr;
    }

    .station-detail-card--wide {
        grid-column: auto;
    }

    .station-detail-card {
        min-height: 62px;
    }
}

/* =========================================================
   Datos en tiempo real
   ========================================================= */

.station-realtime {
    padding: 4px;
}

.station-realtime__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;

    margin-bottom: 13px;
    padding-bottom: 11px;

    border-bottom: 1px solid #dce6ea;
}

.station-realtime__title {
    display: flex;
    align-items: center;
    gap: 8px;

    margin: 0;

    color: #345867;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

.station-realtime__title .glyphicon {
    color: #45839a;
}

.station-realtime__description {
    margin: 4px 0 0;

    color: #778a93;

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

.station-realtime__updated {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;

    padding: 6px 9px;

    border: 1px solid #dbe5e9;
    border-radius: 6px;

    background: #f4f7f8;
    color: #637b86;

    font-size: 11px;
    font-weight: 600;

    white-space: nowrap;
}


/*
 * Contenedor desplazable en pantallas pequeñas.
 */
.station-realtime__table {
    margin: 0;

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

    background: #fff;
}


/*
 * Tabla de sensores.
 */
.station-data-table {
    width: 100%;

    margin: 0;

    border: 0;
    border-collapse: separate;
    border-spacing: 0;

    background: #fff;
}

.station-data-table td {
    padding: 9px 10px !important;

    border: 0;
    border-bottom: 1px solid #e4ebee;

    color: #465f6b;

    font-size: 11px;
    line-height: 1.4;

    vertical-align: middle;
}


/*
 * Primera fila: nombres de columnas.
 */
.station-data-table
tbody > tr:first-child > td {
    padding-top: 8px !important;
    padding-bottom: 8px !important;

    background: #edf3f5;
    color: #526d79;

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

    letter-spacing: .045em;

    white-space: nowrap;
}

.station-data-table
tbody > tr:first-child > td:first-child {
    border-radius: 7px 0 0 0;
}

.station-data-table
tbody > tr:first-child > td:last-child {
    border-radius: 0 7px 0 0;
}


/*
 * Filas de datos.
 */
.station-data-table
tbody > tr:not(:first-child):hover > td {
    background: #f6f9fa;
}

.station-data-table
tbody > tr:last-child > td {
    border-bottom: 0;
}

.station-data-table td:nth-child(2),
.station-data-table td:nth-child(3),
.station-data-table td:nth-child(4),
.station-data-table td:nth-child(5),
.station-data-table td:nth-child(6) {
    text-align: center;
}


/*
 * Imágenes de tendencia y gráfica.
 */
.station-data-table img {
    display: inline-block;

    width: auto;
    max-width: 24px;
    height: auto;
    max-height: 20px;

    vertical-align: middle;
}

.station-data-table a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 28px;
    min-height: 28px;

    border-radius: 6px;

    transition:
        background-color .18s ease,
        transform .18s ease;
}

.station-data-table a:hover,
.station-data-table a:focus {
    background: #e6f0f4;

    text-decoration: none;

    transform: translateY(-1px);
}


/* =========================================================
   Tiempo real en móvil
   ========================================================= */

@media (max-width: 767px) {
    .station-realtime__heading {
        display: block;
    }

    .station-realtime__updated {
        margin-top: 9px;
    }

    .station-realtime__table {
        overflow-x: auto;

        -webkit-overflow-scrolling: touch;
    }

    .station-data-table {
        min-width: 720px;
    }

    /*
     * Con cuatro pestañas permitimos desplazamiento
     * horizontal en vez de comprimirlas.
     */
    .station-tabs {
        display: flex;
        flex-wrap: nowrap;

        overflow-x: auto;
        overflow-y: hidden;

        -webkit-overflow-scrolling: touch;
    }

    .station-tabs > li {
        flex: 0 0 auto;
    }

    .station-tabs > li > a {
        min-width: 125px;

        white-space: nowrap;
    }
}

/* =========================================================
   Estadísticas
   ========================================================= */

.station-statistics {
    padding: 4px;
}

.station-statistics__heading {
    margin-bottom: 14px;
    padding-bottom: 11px;

    border-bottom: 1px solid #dce6ea;
}

.station-statistics__title {
    display: flex;
    align-items: center;
    gap: 8px;

    margin: 0;

    color: #345867;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

.station-statistics__title .glyphicon {
    color: #45839a;
}

.station-statistics__description {
    margin: 4px 0 0;

    color: #778a93;

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


/*
 * Separación entre bloques estadísticos.
 */
.station-statistics__section {
    overflow: hidden;

    margin-top: 12px;

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

    background: #fff;
}

.station-statistics__section:first-of-type {
    margin-top: 0;
}

.station-statistics__section-title {
    display: flex;
    align-items: center;
    gap: 7px;

    margin: 0;
    padding: 10px 12px;

    border-bottom: 1px solid #dce5e9;

    background: #eaf1f4;
    color: #476875;

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

    text-transform: uppercase;
    letter-spacing: .04em;
}

.station-statistics__section-title .glyphicon {
    color: #4c879e;
}


/*
 * Tablas.
 */
.station-statistics__table {
    width: 100%;
    min-width: 720px;

    margin: 0;

    border: 0;
    border-collapse: collapse;

    background: #fff;
}

.station-statistics__table td,
.station-statistics__table th {
    padding: 8px 9px !important;

    border: 0;
    border-bottom: 1px solid #e4ebee;

    color: #465f6b;

    font-size: 10px;
    line-height: 1.4;

    text-align: center;
    vertical-align: middle;
}

.station-statistics__table td:first-child,
.station-statistics__table th:first-child {
    text-align: left;
}


/*
 * Títulos generados por datosEstadisticos().
 */
.station-statistics__table .thFicha {
    padding: 10px 12px !important;

    border: 0 !important;

    background: #eaf1f4 !important;
    color: #476875 !important;

    font-size: 11px !important;
    font-weight: 700 !important;

    text-align: left;

    text-transform: uppercase;
    letter-spacing: .04em;
}


/*
 * Cabeceras de columnas.
 */
.station-statistics__table thead th,
.station-statistics__table
tbody > tr:first-of-type > td {
    color: #5a737e;

    font-size: 12px;
    letter-spacing: .035em;

    white-space: nowrap;
}

.station-statistics__table tbody tr:last-child td {
    border-bottom: 0;
}

.station-statistics__table
tbody tr:hover td {
    background: #f7f9fa;
}


/*
 * Aviso de período incompleto.
 */
.station-statistics__notice {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-top: 12px;
    padding: 9px 11px;

    border: 1px solid #dce5e9;
    border-radius: 7px;

    background: #f4f7f8;
    color: #657a84;

    font-size: 10px;
}

.station-statistics__notice .glyphicon {
    color: #56849a;
}


/*
 * Estado vacío.
 */
.station-statistics__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    min-height: 180px;
    padding: 20px;

    border: 1px dashed #cedce2;
    border-radius: 8px;

    background: #f7f9fa;
    color: #71858f;

    font-size: 11px;
}


/* =========================================================
   Estadísticas en móvil
   ========================================================= */

@media (max-width: 767px) {
    .station-statistics__section
    .table-responsive {
        margin: 0;

        border: 0;
    }

    .station-statistics__table {
        min-width: 720px;
    }
}

/* =========================================================
   Ajustes finales de estadísticas
   ========================================================= */

/*
 * Unificar las cabeceras:
 * - Datos estadísticos mes en curso
 * - Datos estadísticos año hidrológico actual
 * - Acumulados pluviométricos
 */
.station-statistics__table .thFicha,
.station-statistics__section-title {
    margin: 0;

    padding: 11px 14px !important;

    border: 0 !important;
    border-bottom:
        1px solid #d6e1e6 !important;

    background: #e7eff3 !important;
    color: #284c5d !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.4;

    text-align: left !important;
    text-transform: none !important;
    letter-spacing: .01em;
}


/*
 * Acumulados pluviométricos utiliza un h6,
 * por lo que mantenemos su estructura flexible.
 */
.station-statistics__section-title {
    display: flex;
    align-items: center;
    gap: 7px;
}

.station-statistics__section-title .glyphicon {
    color: #4c879e;
    font-size: 13px;
}

/* =========================================================
   Mayor aprovechamiento de la zona visual
   ========================================================= */

@media (min-width: 768px) {

    #myModal .modal-dialog {
        max-width: 1280px;
    }

    .station-tabs__content > .tab-pane {
        padding: 9px;
    }

    .station-visual__stage {
        min-height: 420px;
        padding: 5px;
    }

    /*
     * El contenedor y la imagen ocupan exactamente
     * la misma anchura. Esto mantiene alineados
     * los porcentajes del gauge.
     */
    .station-visual__stage .station-scheme {
        width: 100%;
        max-width: 1120px;

        margin-right: auto;
        margin-left: auto;
    }

    /*
     * Selector con suficiente prioridad para superar
     * las reglas antiguas basadas en #img_esquema.
     */
    .station-sheet
    .station-visual__stage
    #img_esquema {
        display: block;

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

        margin: 0 auto;

        border-radius: 0;

        object-fit: contain;
    }

    .station-sheet
    .station-visual__stage
    #img_foto {
        display: block;

        width: auto;
        max-width: 100%;
        height: auto;
        max-height: 560px !important;

        margin: 0 auto;

        object-fit: contain;
    }
}


/* =========================================================
   Cabecera de acumulados igual que las demás estadísticas
   ========================================================= */

.station-statistics__table--rain thead th {
    padding: 8px 10px !important;

    border: 0 !important;
    border-bottom: 1px solid #dce5e9 !important;

    background: #fff !important;
    color: #254655 !important;

    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.4;

    text-transform: none !important;
    letter-spacing: 0 !important;

    white-space: nowrap;
}

.station-statistics__table--rain thead th:first-child {
    text-align: left;
}

.station-statistics__table--rain thead th:not(:first-child) {
    text-align: center;
}

/*
 * =========================================================
 * Estados de alerta de aforos
 * =========================================================
 */

/* Nivel 1 */
.station-metric.station-metric--alert-1
.station-metric__icon {
    background: #fff2bd;
    color: #9a6b00;
}


/* Nivel 2 */
.station-metric.station-metric--alert-2
.station-metric__icon {
    background: #ffe0bd;
    color: #bd5f00;
}


/* Nivel 3 */
.station-metric.station-metric--alert-3
.station-metric__icon {
    background: #f8d5d8;
    color: #b32632;
}