/* ═══════════════════════════════════════════════════════════════════════
   niveles.css · módulo de estación hidrométrica

   Hoja compartida (no scoped) porque la usan la pantalla de gráficos y la de
   importación; el CSS con ámbito no cruza de un componente a otro.
   ═══════════════════════════════════════════════════════════════════════ */
.nv {
    --ink: #0C2740;
    --muted: #5b7186;
    --line: #e3e9f0;
    --azul: #185FA5;
    --cielo: #9fd0f2;
    --verde: #2e7d32;
    --ambar: #e0a128;
    --rojo: #c62828;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    color: var(--ink);
}

/* ── Cabecera ── */
.nv-cab {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.nv-eyebrow {
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--muted);
}

.nv h1 {
    font-size: 21px;
    font-weight: 700;
    margin: 2px 0 4px;
}

.nv-ayuda {
    font-size: 12.5px;
    color: var(--muted);
    margin: 0;
    line-height: 1.5;
    max-width: 72ch;
}

.nv-acciones {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Botones ── */
.nv-btn {
    height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid #cdd7e1;
    background: #fff;
    color: var(--ink);
    cursor: pointer;
}

    .nv-btn:hover:not(:disabled) { background: #f7f9fb; border-color: #a9bccd; }

    .nv-btn .material-symbols-outlined { font-size: 18px; }

    .nv-btn:disabled { opacity: .5; cursor: default; }

.nv-btn-primario {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}

    .nv-btn-primario:hover:not(:disabled) { background: #123b5e; }

.nv-chip {
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid #cdd7e1;
    background: #fff;
    color: var(--muted);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
}

    .nv-chip:hover { border-color: var(--azul); color: var(--azul); }

/* ── Filtros ── */
.nv-filtros {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
}

    .nv-filtros label {
        display: flex;
        flex-direction: column;
        gap: 4px;
        font-size: 11px;
        font-weight: 600;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: .08em;
    }

.nv-atajos {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

/* ── Tarjetas ── */
.nv-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.nv-kpi {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
}

    .nv-kpi .e {
        font-size: 9.5px;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--muted);
        font-weight: 600;
    }

    .nv-kpi .v {
        font-family: 'IBM Plex Mono', monospace;
        font-size: 19px;
        font-weight: 600;
        margin-top: 2px;
        line-height: 1.15;
    }

    .nv-kpi .u {
        font-size: 10px;
        color: var(--muted);
        margin-top: 2px;
    }

    .nv-kpi.alerta {
        border-color: rgba(198,40,40,.4);
        background: #fdf7f7;
    }

        .nv-kpi.alerta .v { color: var(--rojo); }

/* ── Gráfico ── */
.nv-gráfico {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
}

.nv-svg {
    width: 100%;
    height: 340px;
    display: block;
}

    /* vector-effect: sin esto el preserveAspectRatio="none" estira el grosor de
       la línea junto con el eje y el trazo se ve deforme al ensanchar. */
    .nv-svg path,
    .nv-svg line {
        vector-effect: non-scaling-stroke;
    }

.nv-svg-eje {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px;
    fill: #8095a8;
}

.nv-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 10px;
    font-size: 11.5px;
    color: var(--muted);
}

.nv-leyenda-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .nv-leyenda-item i {
        width: 14px;
        height: 3px;
        border-radius: 2px;
        display: inline-block;
    }

        .nv-leyenda-item i.linea {
            height: 0;
            border-top: 2px dashed var(--rojo);
            background: none !important;
        }

/* ── Importación ── */
.nv-panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 14px;
}

.nv-archivo {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 2px dashed #cdd7e1;
    border-radius: 10px;
    padding: 16px 18px;
    cursor: pointer;
    position: relative;
}

    .nv-archivo:hover { border-color: var(--azul); background: #f7fafc; }

    .nv-archivo .material-symbols-outlined {
        font-size: 28px;
        color: var(--azul);
        flex: none;
    }

    .nv-archivo > span:last-of-type { display: flex; flex-direction: column; }

    .nv-archivo b { font-size: 13.5px; }

    .nv-archivo small { font-size: 11px; color: var(--muted); margin-top: 2px; }

    /* El input nativo se superpone invisible: el recuadro entero es el objetivo. */
    .nv-archivo input[type=file] {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: pointer;
    }

.nv-check {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 12px 0;
    font-size: 12.5px;
    cursor: pointer;
}

    .nv-check input { margin-top: 2px; accent-color: var(--azul); }

    .nv-check small {
        display: block;
        color: var(--muted);
        font-size: 11px;
        margin-top: 2px;
    }

.nv-pie-acciones {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.nv-resumen {
    font-size: 12px;
    color: var(--muted);
    font-weight: 600;
}

/* ── Tabla ── */
.nv-seccion {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--muted);
    margin: 18px 0 8px;
}

    .nv-seccion::after {
        content: "";
        flex: 1 1 auto;
        border-top: 1px solid var(--line);
    }

.nv-scroll {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
}

.nv-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

    .nv-tabla th {
        text-align: left;
        font-size: 9px;
        letter-spacing: .09em;
        text-transform: uppercase;
        color: var(--muted);
        font-weight: 600;
        border-bottom: 1.5px solid var(--ink);
        padding: 7px 10px;
        white-space: nowrap;
    }

        .nv-tabla th.n { text-align: right; }

    .nv-tabla td {
        padding: 7px 10px;
        border-bottom: 1px solid #f0f4f8;
    }

        .nv-tabla td.n {
            text-align: right;
            font-family: 'IBM Plex Mono', monospace;
            font-size: 11.5px;
        }

        .nv-tabla td.chk { text-align: center; width: 44px; }

        .nv-tabla td.chk input { accent-color: var(--azul); width: 15px; height: 15px; }

        .nv-tabla td.motivo { font-size: 11px; color: var(--muted); }

    .nv-tabla .mono { font-family: 'IBM Plex Mono', monospace; font-size: 11px; }

    /* Una pestaña que no se puede importar se apaga, pero sigue visible con su
       motivo: saber por qué no entra es tan útil como poder marcarla. */
    .nv-tabla tr.invalida { opacity: .55; background: #fafbfc; }

/* ── Avisos y estados ── */
.nv-aviso {
    border-radius: 10px;
    padding: 12px 16px;
    margin: 14px 0;
    font-size: 12.5px;
    line-height: 1.55;
}

    .nv-aviso b { display: block; margin-bottom: 3px; font-size: 13px; }

    .nv-aviso p { margin: 0; }

    .nv-aviso ul { margin: 8px 0 0; padding-left: 18px; }

    .nv-aviso li { margin-bottom: 2px; }

    .nv-aviso.rojo {
        background: #fdf7f7;
        border: 1px solid rgba(198,40,40,.35);
        color: #8e2020;
    }

    .nv-aviso.verde {
        background: #f7fbf8;
        border: 1px solid rgba(46,125,50,.35);
        color: #1e5c22;
    }

.nv-vacio {
    text-align: center;
    padding: 44px 16px;
    color: var(--muted);
    font-size: 13px;
}

.nv-spinner {
    width: 32px;
    height: 32px;
    margin: 0 auto 12px;
    border: 3px solid var(--line);
    border-top-color: var(--ink);
    border-radius: 50%;
    animation: nv-giro .8s linear infinite;
}

@keyframes nv-giro {
    to { transform: rotate(360deg); }
}

/* ── Aviso informativo y realce de cifras en la carga de registros ── */
.nv-aviso.azul {
    background: #f5f9fd;
    border: 1px solid rgba(24,95,165,.28);
    color: #16456f;
}

.nv-tabla td.resalta {
    color: var(--ambar);
    font-weight: 700;
}

.nv-avisos {
    margin: 10px 0 0;
    padding-left: 18px;
    font-size: 11.5px;
    color: var(--muted);
    line-height: 1.6;
}