/* ============================================================
   MIA · Design Tokens · v1
   Mobile-first · AAA · Senior-friendly · Light only (dark-ready)
   ============================================================
   Principios:
   - Una variable de marca alimenta toda la escala de azules.
     Cuando llegue el azul SICOM exacto, se cambia --mia-brand-h
     y el sistema se reajusta.
   - Tokens primitivos (--blue-*, --neutral-*) y tokens semánticos
     (--surface-*, --text-*, --color-*). Los componentes SOLO usan
     tokens semánticos. Los semánticos referencian primitivos.
     Esto permite añadir [data-theme="dark"] en el futuro
     reasignando solo los semánticos.
   - Tipografía dual: Atkinson Hyperlegible (legibilidad pura)
     para body, inputs, helpers, labels y meta. Inter para
     titulares y UI chrome (botones, badges, navegación).
   - AAA en todos los pares de uso de texto. Pares que solo llegan
     a AA-grande quedan reservados a tipografía ≥22px o iconos.
   ============================================================ */

:root {
  /* ====================== BRAND ====================== */
  /* Cambia estos tres valores cuando llegue el azul SICOM exacto */
  --mia-brand-h: 217;
  --mia-brand-c: 0.13;
  --mia-brand-l: 39%;

  /* ====================== PRIMITIVOS · AZUL ====================== */
  --blue-50:  oklch(97%   0.018 var(--mia-brand-h));
  --blue-100: oklch(94%   0.035 var(--mia-brand-h));
  --blue-200: oklch(88%   0.060 var(--mia-brand-h));
  --blue-300: oklch(78%   0.095 var(--mia-brand-h));
  --blue-400: oklch(64%   0.135 var(--mia-brand-h));   /* solo fondo / decorativo */
  --blue-500: oklch(52%   0.150 var(--mia-brand-h));   /* solo fondo / decorativo */
  --blue-600: oklch(var(--mia-brand-l) var(--mia-brand-c) var(--mia-brand-h)); /* primary, AAA sobre #fff */
  --blue-700: oklch(32%   0.110 var(--mia-brand-h));
  --blue-800: oklch(24%   0.080 var(--mia-brand-h));
  --blue-900: oklch(16%   0.050 var(--mia-brand-h));

  /* ====================== PRIMITIVOS · NEUTRO ====================== */
  --neutral-0:   #ffffff;
  --neutral-50:  oklch(98.5% 0.005 240);
  --neutral-100: oklch(96.5% 0.008 240);
  --neutral-150: oklch(94%   0.009 240);  /* fila zebra / bg-subtle-2 */
  --neutral-200: oklch(91%   0.010 240);
  --neutral-300: oklch(83%   0.013 240);
  --neutral-400: oklch(66%   0.016 240);
  --neutral-500: oklch(52%   0.018 240);
  --neutral-600: oklch(40%   0.020 240);  /* AA-grande sobre blanco; NO body 18 */
  --neutral-700: oklch(30%   0.020 240);  /* AAA sobre blanco */
  --neutral-800: oklch(20%   0.018 240);
  --neutral-900: oklch(13%   0.015 240);  /* AAA fuerte */

  /* ====================== PRIMITIVOS · FEEDBACK ====================== */
  /* Verde AAA sobre blanco */
  --green-50:  oklch(96%   0.030 155);
  --green-600: oklch(36%   0.130 155);   /* texto sobre blanco · AAA */
  --green-700: oklch(28%   0.110 155);

  /* Ámbar — el warning del v0 no llegaba a AAA texto.
     Subimos saturación y bajamos lightness para alcanzar AAA. */
  --amber-50:  oklch(96%   0.040 80);
  --amber-700: oklch(38%   0.130 60);    /* AAA sobre blanco */
  --amber-800: oklch(30%   0.110 55);

  --red-50:    oklch(96%   0.030 25);
  --red-600:   oklch(40%   0.170 25);    /* AAA sobre blanco */
  --red-700:   oklch(32%   0.150 25);

  /* ====================== SEMÁNTICOS · SUPERFICIE ====================== */
  --surface-page:        var(--neutral-50);   /* fondo de página admin */
  --surface-1:           var(--neutral-0);    /* tarjeta, panel */
  --surface-2:           var(--neutral-50);   /* contenedor secundario */
  --surface-subtle:      var(--neutral-100);  /* hover suave, headers tabla */
  --surface-subtle-2:    var(--neutral-150);  /* zebra de tabla, hover row */
  --surface-soft:        var(--blue-50);      /* tarjetas info/ayuda */
  --surface-overlay:     oklch(13% 0.015 240 / 0.55); /* scrim modal/drawer */

  /* ====================== SEMÁNTICOS · TEXTO ====================== */
  --text-strong:         var(--neutral-900);  /* AAA fuerte */
  --text-base:           var(--neutral-800);  /* body por defecto · AAA */
  --text-muted:          var(--neutral-700);  /* secundario · AAA */
  --text-meta:           var(--neutral-600);  /* solo ≤15px o ≥22px · AA-grande */
  --text-subtle:         var(--neutral-500);  /* solo placeholders / disabled */
  --text-on-primary:     var(--neutral-0);
  --text-on-soft:        var(--blue-800);
  --text-link:           var(--blue-700);     /* AAA sobre #fff */

  /* ====================== SEMÁNTICOS · BORDE ====================== */
  --border-subtle:       var(--neutral-200);  /* separadores estructurales 1px */
  --border-base:         var(--neutral-300);  /* bordes interactivos 1.5px */
  --border-strong:       var(--neutral-500);
  --border-focus:        var(--blue-300);

  /* ====================== SEMÁNTICOS · COLOR DE MARCA ====================== */
  --color-primary:       var(--blue-600);
  --color-primary-hover: var(--blue-700);
  --color-primary-soft:  var(--blue-50);
  --color-primary-soft-hover: var(--blue-100);

  /* Feedback */
  --color-success:       var(--green-600);
  --color-success-soft:  var(--green-50);
  --color-warning:       var(--amber-700);
  --color-warning-soft:  var(--amber-50);
  --color-danger:        var(--red-600);
  --color-danger-soft:   var(--red-50);

  /* Auxiliares */
  --color-overlay:       var(--surface-overlay);
  --color-focus-ring:    var(--blue-300);
  --color-selection:     var(--blue-100);

  /* ====================== TIPOGRAFÍA ====================== */
  --font-body:    "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Escala consolidada — minor third (1.2x) en zonas críticas */
  --text-meta-size:   13px;   /* solo metas; nunca body */
  --text-helper:      15px;   /* helper / caption */
  --text-label:       16px;   /* labels, body secundario */
  --text-base-size:   18px;   /* BODY · base mobile-first */
  --text-lg:          20px;   /* énfasis body */
  --text-xl:          24px;   /* H3 */
  --text-2xl:         30px;   /* H2 */
  --text-3xl:         38px;   /* H1 */
  --text-display:     48px;   /* hero login / bienvenida */

  --text-input:       17px;   /* ≥16 — evita auto-zoom iOS Safari */

  --leading-tight:    1.2;
  --leading-snug:     1.35;
  --leading-normal:   1.55;
  --leading-loose:    1.7;

  --tracking-tight:   -0.015em;
  --tracking-normal:  0;
  --tracking-loose:   0.02em;
  --tracking-caps:    0.06em;

  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;

  /* ====================== ESPACIADO ====================== */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   32px;
  --space-8:   40px;
  --space-9:   48px;
  --space-10:  64px;
  --space-11:  80px;
  --space-12:  96px;

  /* ====================== TARGETS TÁCTILES ====================== */
  --touch-min:         48px;
  --touch-comfortable: 56px;
  --touch-large:       64px;

  /* ====================== RADIOS ====================== */
  --radius-sm:     6px;
  --radius-md:     10px;
  --radius-lg:     14px;
  --radius-xl:     20px;
  --radius-pill:   999px;
  --radius-control:12px;   /* botones e inputs comparten radio */

  /* ====================== BORDES ====================== */
  --border-thin:    1px;    /* separadores estructurales */
  --border-thick:   1.5px;  /* default interactivo */
  --border-emph:    2px;
  --border-focus-w: 3px;

  /* ====================== ELEVACIÓN (mínima) ====================== */
  --shadow-none: none;
  --shadow-xs:   0 1px 2px oklch(13% 0.015 240 / 0.06);
  --shadow-sm:   0 2px 6px oklch(13% 0.015 240 / 0.06);
  --shadow-md:   0 6px 18px oklch(13% 0.015 240 / 0.08);   /* solo modal/drawer */

  /* ====================== MOTION ====================== */
  --motion-instant: 0ms;
  --motion-fast:    100ms;
  --motion-base:    150ms;
  --motion-slow:    220ms;
  --ease-out:       cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.4, 0.1, 0.3, 1);

  /* ====================== Z-INDEX ====================== */
  --z-base:     0;
  --z-sticky:   50;
  --z-dropdown: 100;
  --z-drawer:   200;
  --z-modal:    300;
  --z-toast:    400;
  --z-tooltip:  500;

  /* ====================== BREAKPOINTS ====================== */
  --bp-mobile:   375px;   /* base */
  --bp-tablet:   768px;
  --bp-desktop: 1024px;
  --bp-wide:    1280px;
}

/* prefers-reduced-motion → desactiva todo */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-base: 0ms;
    --motion-slow: 0ms;
  }
}

/* ============================================================
   RESET MÍNIMO
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-size: var(--text-base-size);
  line-height: var(--leading-normal);
  color: var(--text-base);
  background: var(--surface-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--color-selection); color: var(--text-strong); }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; }
a { color: var(--text-link); text-underline-offset: 3px; }
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0;
  color: var(--text-strong);
}

/* ============================================================
   PRIMITIVOS DE COMPONENTE (utilizados en galerías)
   ============================================================ */

/* --- Button --- */
.mia-btn {
  font-family: var(--font-display);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: var(--touch-comfortable);
  padding: 0 var(--space-6);
  border: var(--border-thick) solid transparent;
  border-radius: var(--radius-control);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-normal);
  transition: background var(--motion-base) var(--ease-out),
              border-color var(--motion-base) var(--ease-out),
              color var(--motion-base) var(--ease-out);
  text-decoration: none;
  white-space: nowrap;
}
.mia-btn:focus-visible {
  outline: var(--border-focus-w) solid var(--color-focus-ring);
  outline-offset: 2px;
}
.mia-btn--primary    { background: var(--color-primary); color: var(--text-on-primary); }
.mia-btn--primary:hover { background: var(--color-primary-hover); }
.mia-btn--secondary  { background: var(--surface-1); color: var(--text-base); border-color: var(--border-base); }
.mia-btn--secondary:hover { border-color: var(--border-strong); background: var(--surface-subtle); }
.mia-btn--ghost      { background: transparent; color: var(--text-link); }
.mia-btn--ghost:hover { background: var(--color-primary-soft); }
.mia-btn--danger     { background: var(--color-danger); color: var(--neutral-0); }
.mia-btn--danger:hover { background: var(--red-700); }
.mia-btn--block      { width: 100%; }
.mia-btn--lg         { min-height: var(--touch-large); font-size: var(--text-xl); padding: 0 var(--space-7); }
.mia-btn--sm         { min-height: var(--touch-min); font-size: var(--text-label); padding: 0 var(--space-4); }
.mia-btn[disabled], .mia-btn[aria-disabled="true"] {
  opacity: 0.55; cursor: not-allowed; pointer-events: none;
}

/* --- Field / Input --- */
.mia-field { display: flex; flex-direction: column; gap: var(--space-2); }
.mia-label {
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  color: var(--text-base);
}
.mia-input {
  height: var(--touch-comfortable);
  padding: 0 var(--space-4);
  border: var(--border-thick) solid var(--border-base);
  border-radius: var(--radius-control);
  background: var(--surface-1);
  font-size: var(--text-input);
  color: var(--text-strong);
  font-family: var(--font-body);
  transition: border-color var(--motion-base) var(--ease-out),
              box-shadow var(--motion-base) var(--ease-out);
}
.mia-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 var(--border-focus-w) var(--blue-100);
}
.mia-input::placeholder { color: var(--text-subtle); }
.mia-input[disabled] { background: var(--surface-subtle); color: var(--text-subtle); cursor: not-allowed; }
.mia-input--error { border-color: var(--color-danger); }
.mia-input--error:focus { box-shadow: 0 0 0 var(--border-focus-w) var(--red-50); }
.mia-helper { font-size: var(--text-helper); color: var(--text-meta); }
.mia-helper--error { color: var(--color-danger); font-weight: var(--weight-medium); }

textarea.mia-input { min-height: 120px; height: auto; padding: var(--space-3) var(--space-4); line-height: var(--leading-snug); }

/* --- Card --- */
.mia-card {
  background: var(--surface-1);
  border: var(--border-thin) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.mia-card--soft {
  background: var(--surface-soft);
  border-color: var(--blue-100);
}

/* --- Badge --- */
.mia-badge {
  font-family: var(--font-display);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-helper);
  font-weight: var(--weight-medium);
  background: var(--surface-subtle);
  color: var(--text-muted);
}
.mia-badge--info    { background: var(--color-primary-soft); color: var(--blue-800); }
.mia-badge--success { background: var(--color-success-soft); color: var(--color-success); }
.mia-badge--warning { background: var(--color-warning-soft); color: var(--color-warning); }
.mia-badge--danger  { background: var(--color-danger-soft);  color: var(--color-danger); }
.mia-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* --- Toast --- */
.mia-toast {
  display: flex; gap: var(--space-3); align-items: flex-start;
  background: var(--surface-1);
  border: var(--border-thin) solid var(--border-subtle);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  max-width: 420px;
}
.mia-toast--success { border-left-color: var(--color-success); }
.mia-toast--warning { border-left-color: var(--color-warning); }
.mia-toast--danger  { border-left-color: var(--color-danger); }

/* --- Modal scrim --- */
.mia-scrim {
  position: absolute; inset: 0;
  background: var(--color-overlay);
  z-index: var(--z-drawer);
}

/* DS ADDITIONS */
.ds-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-7);
}

.doc-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.doc-meta-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
}

.doc-meta-row dt {
  min-width: 100px;
  flex-shrink: 0;
}

.ds-check-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: var(--border-thick) solid var(--neutral-200);
  border-radius: var(--radius-control);
}

.ds-check-label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--neutral-800);
  font-family: var(--font-body);
  font-size: var(--text-input);
  cursor: pointer;
}

.ds-check-label:hover {
  background: var(--neutral-100);
}

.ds-check {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: var(--blue-700);
  cursor: pointer;
}

.ds-input--textarea {
  height: auto;
  min-height: 96px;
  resize: vertical;
  padding: var(--space-3) var(--space-4);
}

/* 8.5.4 — DS aplicado */