:root {
    --rativ-primario: #1F4E79;
    --rativ-texto: #1B2430;
    --rativ-texto-2: #5B6776;
    --rativ-linea: #E3E8EF;
    --rativ-fondo: #F4F6F9;
    --rativ-fatal: #C0392B;
    --rativ-lesion: #E0A31F;
    --rativ-danos: #8FA3B8;
    --rativ-ok: #2E8B57;
}

html, body { font-family: Inter, "Segoe UI", Roboto, sans-serif; background: var(--rativ-fondo); color: var(--rativ-texto); }

/* Barra superior */
.app-bar { border-bottom: 1px solid rgba(255,255,255,.08); }
.brand { display: flex; align-items: center; gap: 12px; margin-left: 8px; }
.brand-mark { width: 34px; height: 34px; border-radius: 8px; background: #E07A1F; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 18px; }
.brand-title { font-weight: 700; letter-spacing: .08em; line-height: 1.1; }
.brand-sub { font-size: 12px; opacity: .75; }
.btn-filtros { text-transform: none; font-weight: 600; }
.drawer { border-right: 1px solid var(--rativ-linea); }
.nav-section { color: var(--rativ-texto-2); letter-spacing: .1em; }
.panel-filtros { padding: 16px 18px; }

/* Encabezado de página */
.page-head { margin: 4px 0 16px; }
.page-head h1 { font-size: 26px; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.page-head p { margin: 4px 0 0; color: var(--rativ-texto-2); }

/* Contexto de filtros */
.filtros-activos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; margin-bottom: 10px; min-height: 32px; }

/* KPIs */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.kpi { padding: 16px 18px; border-radius: 12px !important; border-color: var(--rativ-linea) !important; }
.kpi-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--rativ-texto-2); }
.kpi-valor { font-size: 32px; font-weight: 700; line-height: 1.15; margin-top: 6px; font-variant-numeric: tabular-nums; color: var(--rativ-texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi-detalle { font-size: 13px; color: var(--rativ-texto-2); margin-top: 4px; }

/* Secciones */
.seccion { padding: 16px 18px 12px; border-radius: 12px !important; border-color: var(--rativ-linea) !important; height: 100%; }
.seccion-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.seccion-titulo { font-weight: 600; font-size: 15px; }
.seccion-sub { font-size: 12.5px; color: var(--rativ-texto-2); margin-top: 2px; }
.nota { font-size: 12px; color: var(--rativ-texto-2); margin-top: 8px; line-height: 1.45; }
.vacio { padding: 32px 0; text-align: center; color: var(--rativ-texto-2); }

/* Tablas */
.tabla th { font-size: 12px !important; font-weight: 600 !important; color: var(--rativ-texto-2) !important; white-space: nowrap; }
.tabla td { font-size: 13px !important; }
.tabla .num, .num { text-align: right !important; font-variant-numeric: tabular-nums; }
.nota-celda { font-size: 12px !important; color: var(--rativ-texto-2); max-width: 360px; }
.fila-error td { background: #FDECEA; }
.sube { color: var(--rativ-fatal); font-weight: 600; }
.baja { color: var(--rativ-ok); font-weight: 600; }

/* Severidad en detalle */
.sev { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; }
.sev-fatal { background: #FBE3E0; color: var(--rativ-fatal); }
.sev-lesion { background: #FCF1D8; color: #9A6B00; }
.sev-danos { background: #EEF2F6; color: #4B5B6B; }
.estado { font-weight: 600; font-size: 12px; }
.estado-ok { color: var(--rativ-ok); }
.estado-error { color: var(--rativ-fatal); }
.estado-encurso { color: var(--rativ-primario); }

/* Mapa */
.mapa { height: 620px; border-radius: 8px; overflow: hidden; border: 1px solid var(--rativ-linea); }
.cobertura-banner { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; margin-bottom: 14px; font-size: 13.5px; border: 1px solid; }
.cobertura-banner.alta { background: #EAF6EF; border-color: #BFE3CD; }
.cobertura-banner.media { background: #FFF7E6; border-color: #F3D9A4; }
.cobertura-banner.baja { background: #FDECEA; border-color: #F2C0BA; }
.barra-pct { display: inline-block; width: 46px; height: 6px; background: #E9EEF4; border-radius: 3px; margin-right: 6px; vertical-align: middle; overflow: hidden; }
.barra-pct span { display: block; height: 100%; background: var(--rativ-primario); }

/* Cobertura (calidad) */
.celda-pct { position: relative; height: 22px; background: #F1F4F8; border-radius: 4px; overflow: hidden; min-width: 80px; }
.celda-pct span { position: absolute; inset: 0 auto 0 0; }
.celda-pct.ok span { background: #CDEBD8; }
.celda-pct.media span { background: #F8E3B5; }
.celda-pct.baja span { background: #F6CFCA; }
.celda-pct em { position: relative; font-style: normal; font-size: 12px; padding-left: 6px; line-height: 22px; font-variant-numeric: tabular-nums; }
.chips > div { font-size: 13px; margin-bottom: 4px; }

/* Accesos rápidos */
.mini-nav { display: flex; gap: 12px; align-items: center; padding: 14px 16px; cursor: pointer; border-radius: 12px !important; transition: border-color .15s; }
.mini-nav:hover { border-color: var(--rativ-primario) !important; }
.mini-nav b { display: block; }
.mini-nav span { font-size: 12.5px; color: var(--rativ-texto-2); }

code { font-size: 12px; background: #EEF2F6; padding: 1px 5px; border-radius: 4px; }

#blazor-error-ui { background: #FFF3CD; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2); display: none; left: 0; padding: .6rem 1.25rem .7rem; position: fixed; width: 100%; z-index: 2000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

/* Sesión */
.usuario-actual { font-size: 13px; opacity: .85; margin-left: 16px; }
.form-salir { display: inline; margin: 0; }

/* Pie de página */
.pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 14px 24px; border-top: 1px solid var(--rativ-linea); font-size: 12.5px; color: var(--rativ-texto-2); }
.pie a { color: var(--rativ-primario); font-weight: 600; text-decoration: none; }
.pie a:hover { text-decoration: underline; }
.pie-lema { font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: 11.5px; }

/* Login */
.login-page { min-height: 100vh; display: flex; flex-direction: column; background: linear-gradient(160deg, #12304B 0%, #1F4E79 55%, var(--rativ-fondo) 55%); }
.login-main { flex: 1; display: grid; place-items: center; padding: 24px 16px; }
.login-page .pie { border-top: none; }
.login-card { width: 100%; max-width: 400px; background: #fff; border-radius: 14px; padding: 28px 28px 24px; box-shadow: 0 12px 40px rgba(18, 48, 75, .18); }
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.login-titulo { font-weight: 700; letter-spacing: .08em; font-size: 18px; }
.login-sub { font-size: 12.5px; color: var(--rativ-texto-2); }
.login-form { display: flex; flex-direction: column; gap: 6px; }
.login-form label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--rativ-texto-2); margin-top: 8px; }
.login-form input { font: inherit; padding: 10px 12px; border: 1px solid var(--rativ-linea); border-radius: 8px; outline: none; }
.login-form input:focus { border-color: var(--rativ-primario); box-shadow: 0 0 0 3px rgba(31, 78, 121, .15); }
.login-form button { margin-top: 18px; padding: 11px; border: none; border-radius: 8px; background: var(--rativ-primario); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.login-form button:hover { background: #12304B; }
.login-error { margin-top: 10px; padding: 8px 12px; border-radius: 8px; background: #FDECEA; color: var(--rativ-fatal); font-size: 13px; }