/* ContaFlex · tokens de marca aprobados (Norman/Christian):
   rojo #e2231a · azul #16306e / #0d1f46 · topbar/footer #0b1c3f ·
   cyan #1c9ad6 (wordmark "Flex") · fondo contenido #f7fafc · fuente Archivo */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&display=swap');
* { box-sizing: border-box; margin: 0; }
body { font-family: 'Archivo', system-ui, sans-serif; background: #f7fafc; color: #0d1f46; }
.wordmark { font-weight: 800; letter-spacing: -.5px; }
.wordmark .conta { color: #fff; } .wordmark .flex { color: #1c9ad6; }
.wordmark.oscuro .conta { color: #16306e; }

.topbar { position: fixed; inset: 0 0 auto 0; height: 58px; background: #0b1c3f;
  border-bottom: 3px solid #e2231a; display: flex; align-items: center;
  gap: 18px; padding: 0 20px; z-index: 20; }
.topbar .buscador { flex: 1; max-width: 520px; }
.topbar input { width: 100%; background: #16306e; border: 1px solid #274b8f;
  border-radius: 8px; color: #fff; padding: 8px 12px; font-family: inherit; }
.topbar input::placeholder { color: #9fb3d9; }
.topbar .sp { flex: 1; }
.topbar .usr { color: #cdd9f2; font-size: 14px; }
.topbar button { background: transparent; border: 1px solid #274b8f; color: #cdd9f2;
  border-radius: 8px; padding: 7px 12px; cursor: pointer; font-family: inherit; }

.sidebar { position: fixed; left: 0; top: 58px; bottom: 40px; width: 248px;
  background: #16306e; color: #dbe6fa; padding: 14px 0; z-index: 10; }
.sidebar a { display: flex; align-items: center; gap: 10px; padding: 11px 18px;
  color: #dbe6fa; text-decoration: none; font-size: 14.5px; position: relative; }
.sidebar a.activo { background: #fff; color: #16306e; font-weight: 600; }
.sidebar a.activo::before { content: ''; position: absolute; left: 0; top: 0;
  bottom: 0; width: 3px; background: #e2231a; }
.sidebar .pie { position: absolute; bottom: 12px; left: 0; right: 0;
  padding: 10px 18px; font-size: 13px; color: #9fb3d9;
  border-top: 1px solid #274b8f; }

.contenido { margin: 58px 0 40px 248px; padding: 26px; max-width: 1380px; }
.footer { position: fixed; inset: auto 0 0 0; height: 40px; background: #0b1c3f;
  color: #9fb3d9; display: flex; align-items: center; gap: 22px;
  padding: 0 20px; font-size: 12.5px; z-index: 20; }
.footer a { color: #9fb3d9; text-decoration: none; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px; margin-bottom: 22px; }
.kpi { background: #fff; border: 1px solid #e2e8f0; border-radius: 11px;
  padding: 14px 16px; }
.kpi.alerta { border-top: 3px solid #e2231a; }
.kpi .num { font-weight: 800; font-size: 24px; }
.kpi .lbl { font-size: 13px; color: #5a6b8c; margin-top: 2px; }

.card { background: #fff; border: 1px solid #e2e8f0; border-radius: 11px;
  padding: 18px; margin-bottom: 18px; }
h1 { font-size: 20px; margin-bottom: 14px; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; color: #5a6b8c; font-weight: 600; padding: 8px 10px;
  border-bottom: 2px solid #e2e8f0; white-space: nowrap; }
td { padding: 8px 10px; border-bottom: 1px solid #eef2f7; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.estado { display: inline-block; border-radius: 999px; padding: 3px 10px;
  font-size: 12px; font-weight: 600; background: #eef2f7; color: #16306e; }
.estado.ok { background: #e6f6ec; color: #157347; }
.estado.err { background: #fdecea; color: #c0271f; }

.btn { background: #16306e; color: #fff; border: 0; border-radius: 8px;
  padding: 10px 18px; font: 600 14px 'Archivo', sans-serif; cursor: pointer; }
.btn.rojo { background: #e2231a; }
.btn.sec { background: #fff; color: #16306e; border: 1px solid #cdd9f2; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
textarea, input[type=text], input[type=email], input[type=password] {
  width: 100%; border: 1px solid #cdd9f2; border-radius: 8px; padding: 10px 12px;
  font-family: inherit; font-size: 14px; }
textarea { font-family: ui-monospace, monospace; font-size: 12px; }
label { display: block; font-size: 13px; font-weight: 600; color: #16306e;
  margin: 12px 0 5px; }
.error { color: #c0271f; font-size: 13.5px; margin-top: 10px; min-height: 18px; }
.tot { display: flex; gap: 22px; align-items: center; flex-wrap: wrap;
  font-size: 14px; margin: 14px 0; }
.tot b { font-variant-numeric: tabular-nums; }