:root {
  --superficie: #fcfcfb;
  --fondo: #f4f3ef;
  --texto: #0b0b0b;
  --texto-2: #52514e;
  --texto-3: #8a8984;
  --borde: #e4e3de;
  --azul: #2a78d6;
  --critico: #d03b3b;
  --advertencia: #b07800;
  --bien: #0a7f0a;
}
body { background: var(--fondo); color: var(--texto); font-family: Inter, system-ui, sans-serif; }

.barra { background: #0d366b; padding: 10px 20px; }
.barra .marca { color: #fff; font-weight: 600; font-size: 1.05rem; letter-spacing: .2px; }
.barra .marca small { color: #9ec5f4; font-weight: 400; margin-left: 8px; }
.barra .nav-link { color: #cde2fb !important; font-size: .92rem; padding: 6px 12px !important; border-radius: 6px; }
.barra .nav-link.active, .barra .nav-link:hover { background: rgba(255,255,255,.12); color: #fff !important; }
.sello { background: rgba(255,255,255,.12); color: #fff; border-radius: 999px; padding: 3px 12px; font-size: .8rem; }

.contenido { padding: 18px 20px 40px; max-width: 1500px; margin: 0 auto; }
.pagina-titulo { font-size: 1.35rem; font-weight: 600; margin: 4px 0 2px; }
.pagina-sub { color: var(--texto-2); margin-bottom: 14px; font-size: .93rem; }

.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; padding: 14px 16px; height: 100%; }
.tarjeta h6 { font-size: .8rem; text-transform: uppercase; letter-spacing: .5px; color: var(--texto-2); margin-bottom: 8px; font-weight: 600; }

.kpi { background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; padding: 12px 16px; height: 100%; }
.kpi .etq { font-size: .78rem; color: var(--texto-2); text-transform: uppercase; letter-spacing: .4px; }
.kpi .val { font-size: 1.65rem; font-weight: 650; line-height: 1.2; font-variant-numeric: tabular-nums; }
.kpi .det { font-size: .8rem; color: var(--texto-3); }
.sube { color: var(--bien); } .baja { color: var(--critico); }

.filtros { background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; }
.filtros label { font-size: .78rem; color: var(--texto-2); margin-bottom: 2px; font-weight: 600; }

.ficha-titulo { font-size: 1.15rem; font-weight: 650; }
.ficha-dato { display: flex; justify-content: space-between; border-bottom: 1px dashed var(--borde); padding: 4px 0; font-size: .9rem; }
.ficha-dato span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; }
.pista { color: var(--texto-3); font-size: .85rem; }

.etiqueta-estado { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 2px 10px; font-size: .8rem; font-weight: 600; }
.est-alta, .est-error { background: #fbe9e9; color: var(--critico); }
.est-media { background: #fff4dc; color: var(--advertencia); }
.est-ok { background: #e6f5e6; color: var(--bien); }

.nota { background: #eef5fd; border-left: 3px solid var(--azul); padding: 8px 12px; border-radius: 6px; font-size: .88rem; color: var(--texto-2); }
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th { background: #f1f0ec !important; font-weight: 600; }