/* ═════════════════════════════════════════════
   AGS · Theme compartido
   Tokens de diseño + componentes base reutilizables.
   Los módulos pueden extender con sus propios estilos
   pero nunca sobrescribir variables raíz.
   ───────────────────────────────────────────── */

/* ── Variables raíz (Warm Ivory Theme) ── */
:root{
  --navy:#1B2A4A;
  --navy-mid:#243B5C;
  --navy-light:#2E4A6E;
  --navy-pale:#F0EDE6;
  --cream:#FAFAF7;
  --ink:#3C3832;
  --muted:#8A8578;
  --border:#E8E5DE;
  --border2:#F0EDE6;
  --gold:#C8A84B;
  --coral:#9F1239;
  --green:#15803d;
  --amber:#BA7517;
  --red:#b91c1c;
  --purple:#5B21B6;
  --teal:#0F766E;
  --radius-sm:5px;
  --radius-md:6px;
  --radius-lg:8px;
  --radius-xl:10px;
}

/* ── Reset mínimo ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:'Inter',sans-serif;background:var(--cream);color:var(--ink);font-size:13px;-webkit-text-size-adjust:100%}
html{overflow-x:hidden}
body{overflow-x:hidden;max-width:100vw}
img,svg,video,canvas{max-width:100%}
input,select,textarea,button{font-family:'Inter',sans-serif}

/* ── Inputs ── */
.fi{padding:8px 11px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:12px;color:var(--ink);background:#fff;outline:none;transition:border .18s;width:100%;font-family:'Inter',sans-serif}
.fi:focus{border-color:var(--navy-light);box-shadow:0 0 0 3px rgba(26,45,90,.1)}
.fi-mono{font-family:'DM Mono',monospace}

/* ── Card ── */
.card{background:#fff;border:1px solid var(--border);padding:18px;border-radius:var(--radius-lg)}
.ct{font-size:13px;font-weight:600;color:var(--navy);letter-spacing:-.01em;display:inline-flex;align-items:center;gap:8px}
.ct-badge{font-family:'DM Mono',monospace;font-size:9px;color:var(--muted);background:var(--navy-pale);padding:1px 7px;border-radius:3px;font-weight:600}
.cs{font-size:11px;color:var(--muted);margin-top:2px;margin-bottom:10px}

/* ── KPI ── */
.kpi{background:#fff;padding:14px 16px;border-left:3px solid var(--border);border-radius:var(--radius-md);transition:border-color .2s}
.kpi-v{font-family:'DM Mono',monospace;font-size:20px;font-weight:600;color:var(--navy);letter-spacing:-.01em;line-height:1}
.kpi-u{font-family:'DM Mono',monospace;font-size:11px;color:var(--muted);font-weight:500;margin-left:3px}
.kpi-l{font-size:11px;color:var(--ink);font-weight:500;margin-top:6px}
.kpi-s{font-size:10px;color:var(--muted);margin-top:2px;display:flex;align-items:center;gap:5px}
.kpi-dot{width:5px;height:5px;border-radius:50%}

/* ── Chips de estado ── */
.chip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:3px;font-family:'DM Mono',monospace;font-size:9px;font-weight:600;letter-spacing:.05em}
.chip-green{background:rgba(21,128,61,.08);color:var(--green)}
.chip-amber{background:#FAEEDA;color:var(--amber)}
.chip-purple{background:#EDE9FE;color:var(--purple)}
.chip-red{background:rgba(185,28,28,.07);color:var(--red)}
.chip-gray{background:var(--navy-pale);color:var(--navy)}
.chip-navy{background:var(--navy-pale);color:var(--navy)}

/* ── Botones ── */
.btn{background:var(--navy);color:#fff;border:none;padding:9px 14px;font-size:12px;font-weight:500;cursor:pointer;border-radius:var(--radius-md);box-shadow:0 1px 0 rgba(27,42,74,.2),0 2px 4px rgba(27,42,74,.08);transition:background .15s;font-family:'Inter',sans-serif;display:inline-flex;align-items:center;gap:6px;letter-spacing:.01em}
.btn:hover{background:var(--navy-mid)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-secondary{background:#fff;color:var(--navy);border:1px solid var(--border);box-shadow:none}
.btn-secondary:hover{background:var(--cream);border-color:var(--navy-light)}

/* ── Navegación sidebar (módulos con menú lateral) ── */
.ni{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius-sm);cursor:pointer;color:rgba(255,255,255,.5);font-size:12px;font-weight:400;transition:all .15s;border-left:2px solid transparent;white-space:nowrap;overflow:hidden}
.ni:hover{color:rgba(255,255,255,.8);background:rgba(255,255,255,.04)}
.ni.active{background:rgba(200,168,75,.12);color:#fff;border-left-color:var(--gold);font-weight:500}
.ni-badge{margin-left:auto;background:var(--navy-light);color:rgba(255,255,255,.85);font-family:'DM Mono',monospace;font-size:9px;font-weight:500;padding:1px 6px;border-radius:3px;flex-shrink:0}
.ni.active .ni-badge{background:var(--gold);color:var(--navy);font-weight:600}

/* ── Progress bars ── */
.pbar{height:6px;background:var(--navy-pale);border-radius:3px;overflow:hidden}
.pbar-fill{height:100%;background:linear-gradient(90deg,var(--navy),var(--navy-mid));border-radius:3px;transition:width .3s}
.pbar-fill-green{background:var(--green)}
.pbar-fill-amber{background:var(--amber)}
.pbar-fill-red{background:var(--red)}

/* ── Grid helpers ── */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:12px}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px}

/* ── Responsive global (móvil) ── */
@media(max-width:768px){
  html,body{overflow-x:hidden!important;max-width:100vw!important}
  .g2{grid-template-columns:1fr;gap:10px}
  .g3{grid-template-columns:1fr;gap:10px}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .card{padding:14px;border-radius:var(--radius-md)}
  .kpi{padding:12px 14px}
  .kpi-v{font-size:18px}
  /* Inputs a 16px evita zoom automático de iOS */
  .fi{font-size:16px;padding:10px 12px}
  .btn{padding:10px 14px;font-size:13px}
}