/* ═══════════════════════════════════════════════════════════
   Oficio&Circular — Design Tokens (Iteración 2)
   Auditados WCAG AA · vanilla CSS · sin build
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ─── Brand navy (azul marino conservado) ─── */
  --navy-950: #0a1834;  /* AAA sobre blanco · 17.4:1 */
  --navy-900: #0f2147;  /* AAA · 14.8:1 */
  --navy-800: #15295a;  /* AAA · 12.1:1 */
  --navy-700: #1d3878;  /* AAA · 9.4:1 — color de cuerpo de enlaces */
  --navy-600: #2a4f9e;  /* AA · 6.1:1 */
  --navy-500: #3d6ac9;  /* AA Large · 4.1:1 — solo texto >18pt */
  --navy-400: #6b8fd9;  /* decorativo */
  --navy-300: #a3bbe6;
  --navy-200: #d0ddf0;
  --navy-100: #e8eef8;
  --navy-50:  #f4f7fc;

  /* ─── Neutros warm paper ─── */
  --paper:    #fbfaf7;  /* fondo principal */
  --white:    #ffffff;
  --ink-50:   #f6f7fa;
  --ink-100:  #ecedf2;
  --ink-200:  #dee1e8;  /* borders */
  --ink-300:  #c0c5cf;  /* borders strong */
  --ink-400:  #9aa1ae;  /* texto deshabilitado solamente */
  --ink-500:  #6b7280;  /* AA · 4.7:1 — texto secundario MIN */
  --ink-600:  #565c6a;  /* AA · 7.1:1 — texto secundario */
  --ink-700:  #3a3f4b;  /* AAA · 10.2:1 */
  --ink-800:  #232730;  /* AAA · 13.8:1 */
  --ink-900:  #16181d;  /* AAA · 16.6:1 — body text */
  --ink-950:  #0c0d10;  /* AAA · 18.9:1 — headings */

  /* ─── Acento editorial (uso muy restringido: sello/circular/destacado) ─── */
  --accent-700: #6a4a14; /* AA · 7.0:1 — solo si necesita texto */
  --accent:     #8a6c2a; /* sello / detalle puntual, NUNCA decorativo */
  --accent-soft:#f1ebde; /* fondo de tag circular */
  --rojo-700: #9a2f2f;  /* AA · 6.4:1 — chip rechaza */
  --rojo:     #b53a3a;
  --verde-700:#256449; /* AA · 6.8:1 — chip acoge */
  --verde:    #2f7a55;
  --ambar-700:#a36d10; /* AA · 5.2:1 — chip parcial */
  --ambar:    #c98a17;
  --gris-700: #4a5160; /* AA · 8.1:1 — chip indeterminado (4to estado) */
  --gris:     #6b7280;

  /* ─── Semantic ─── */
  --bg:           var(--paper);
  --surface:      var(--white);
  --surface-alt:  var(--ink-50);
  --border:       var(--ink-200);
  --border-strong:var(--ink-300);
  --text:         var(--ink-900);
  --text-muted:   var(--ink-600);
  --text-faint:   var(--ink-500);
  --link:         var(--navy-700);
  --link-hover:   var(--navy-800);
  --focus-ring:   var(--navy-600);

  /* ─── Tipografía ─── */
  --font-sans: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-serif: "Source Serif 4", "Source Serif Pro", "Charter", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

  /* Type scale (modular 1.2 desde 13/14) */
  --fs-xs:    11px;
  --fs-sm:    12.5px;
  --fs-base:  14px;
  --fs-md:    15px;
  --fs-lg:    17px;
  --fs-xl:    20px;
  --fs-2xl:   24px;
  --fs-3xl:   30px;
  --fs-4xl:   38px;
  --fs-5xl:   48px;
  --fs-6xl:   60px;

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-base:  1.55;
  --lh-loose: 1.75;

  /* ─── Espaciado (4px base) ─── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;
  --sp-10: 56px;
  --sp-11: 64px;
  --sp-12: 80px;

  /* ─── Radii ─── */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-full: 9999px;

  /* ─── Shadows (tinte navy para coherencia) ─── */
  --shadow-sm: 0 1px 2px rgba(15,33,71,0.04), 0 1px 1px rgba(15,33,71,0.03);
  --shadow-md: 0 2px 4px rgba(15,33,71,0.06), 0 4px 12px rgba(15,33,71,0.05);
  --shadow-lg: 0 8px 24px rgba(15,33,71,0.08), 0 2px 6px rgba(15,33,71,0.04);
  --shadow-xl: 0 24px 48px rgba(15,33,71,0.12), 0 4px 12px rgba(15,33,71,0.06);

  /* ─── Motion ─── */
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-in-out: cubic-bezier(.4,0,.2,1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;

  /* ─── Layout ─── */
  --container-max: 1280px;
  --sidebar-w: 240px;
  --filter-w: 240px;
  --header-h: 64px;
  --utility-h: 36px;

  /* ─── Z-index ─── */
  --z-base: 1;
  --z-sticky: 100;
  --z-overlay: 500;
  --z-modal: 1000;
  --z-toast: 2000;
}

/* ═══════════════════════════════════════════════════════════
   Reset mínimo + base
   ═══════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
}

p { margin: 0; }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 2px; }

button { font-family: inherit; cursor: pointer; }

img, svg { display: block; max-width: 100%; }

input, textarea, select, button {
  font: inherit;
  color: inherit;
}

/* Focus rings WCAG-compliant */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   Utility classes (úsalas con moderación)
   ═══════════════════════════════════════════════════════════ */
.serif    { font-family: var(--font-serif); letter-spacing: -0.01em; }
.mono     { font-family: var(--font-mono); }
.tabular  { font-variant-numeric: tabular-nums; }
.sr-only  { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Container */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}
@media (min-width: 768px)  { .container { padding-inline: var(--sp-7); } }
@media (min-width: 1280px) { .container { padding-inline: var(--sp-9); } }

/* ═══════════════════════════════════════════════════════════
   Componentes base reutilizables
   ═══════════════════════════════════════════════════════════ */

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  padding: 9px 16px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 1;
  min-height: 44px;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}
@media (min-width: 768px) { .btn { min-height: 38px; padding: 8px 14px; } }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn--primary { background: var(--navy-800); color: var(--white); }
.btn--primary:hover:not(:disabled) { background: var(--navy-900); color: var(--white); text-decoration: none; }
.btn--primary:active:not(:disabled) { background: var(--navy-950); }

.btn--secondary { background: var(--white); color: var(--ink-900); border-color: var(--border-strong); }
.btn--secondary:hover:not(:disabled) { background: var(--ink-50); border-color: var(--ink-400); text-decoration: none; }

.btn--ghost { background: transparent; color: var(--ink-700); }
.btn--ghost:hover:not(:disabled) { background: var(--ink-100); text-decoration: none; }

.btn--sm { padding: 6px 10px; font-size: var(--fs-sm); min-height: 36px; }

/* Chips de resultado (acoge/rechaza/parcial/indeterminado) */
.chip-result {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: 600;
  line-height: 1.4;
}
.chip-result::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.chip-result--acoge        { color: var(--verde-700);  background: color-mix(in srgb, var(--verde) 12%, white); }
.chip-result--rechaza      { color: var(--rojo-700);   background: color-mix(in srgb, var(--rojo) 12%, white); }
.chip-result--parcial      { color: var(--ambar-700);  background: color-mix(in srgb, var(--ambar) 14%, white); }
.chip-result--indeterminado{ color: var(--gris-700);   background: color-mix(in srgb, var(--gris) 12%, white); }

/* Tags de tipo de fuente */
.tag {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1.4;
}
.tag--oficio   { color: var(--navy-700);  background: var(--navy-100); }
.tag--circular { color: var(--accent-700); background: var(--accent-soft); }
.tag--fallo    { color: var(--rojo-700);  background: color-mix(in srgb, var(--rojo) 12%, white); }
.tag--ley      { color: var(--verde-700); background: color-mix(in srgb, var(--verde) 12%, white); }
.tag--pro      { color: var(--navy-800);  background: var(--navy-100); border: 1px solid var(--navy-300); }

/* Inputs */
.input {
  width: 100%;
  padding: 10px 14px;
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-size: var(--fs-base);
  color: var(--text);
  min-height: 44px;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.input::placeholder { color: var(--ink-500); }
.input:hover { border-color: var(--ink-400); }
.input:focus { outline: none; border-color: var(--navy-600); box-shadow: 0 0 0 3px color-mix(in srgb, var(--navy-600) 18%, transparent); }
.input:disabled { background: var(--ink-100); cursor: not-allowed; }

/* Cards */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.card--hover:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.card--interactive { cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.card--interactive:hover { border-color: var(--navy-300); box-shadow: var(--shadow-md); }

/* Skeleton (loading state) */
.skel {
  background: linear-gradient(90deg, var(--ink-100) 0%, var(--ink-50) 50%, var(--ink-100) 100%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.6s var(--ease-in-out) infinite;
  border-radius: var(--r-xs);
  color: transparent;
}
@keyframes skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─────────────────────────────────────────────
   Tabla densa role-based (Safari < 17 safe)
   Estructura esperada:
   <div role="table" class="table-grid" style="--cols: ...">
     <div role="rowgroup">
       <div role="row">
         <div role="columnheader">…</div>
       </div>
     </div>
     <div role="rowgroup">
       <div role="row"><div role="cell">…</div></div>
     </div>
   </div>
   ─────────────────────────────────────────────*/
.table-grid {
  width: 100%;
  display: block;
  border-top: 1px solid var(--border);
}
.table-grid [role="rowgroup"] { display: block; }
.table-grid [role="row"] {
  display: grid;
  grid-template-columns: var(--cols, repeat(auto-fit, minmax(0, 1fr)));
  align-items: start;
  border-bottom: 1px solid var(--ink-100);
}
.table-grid [role="columnheader"],
.table-grid [role="cell"] {
  padding: var(--sp-3) var(--sp-3);
  font-size: var(--fs-sm);
  text-align: left;
  vertical-align: top;
  min-width: 0; /* permite truncate */
}
.table-grid [role="rowgroup"]:first-child [role="row"] {
  background: var(--ink-50);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 1;
}
.table-grid [role="columnheader"] {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.table-grid [role="rowgroup"]:not(:first-child) [role="row"]:hover {
  background: var(--ink-50);
  cursor: pointer;
}
.table-grid [role="rowgroup"]:not(:first-child) [role="row"]:focus-visible {
  outline: 2px solid var(--navy-700);
  outline-offset: -2px;
}

/* Fallback para <table>/<thead>/<tbody>/<tr>/<th>/<td> nativos.
   Los selectores [role="..."] no matchean roles implícitos, así que duplicamos
   los estilos sobre los elementos semánticos. Soporta ambas formas de uso.
   IMPORTANTE: este bloque debe permanecer — el equipo técnico lo necesita
   porque las pantallas usan <table> nativo, no divs con role. */
.table-grid > thead,
.table-grid > tbody { display: block; }
.table-grid > thead > tr,
.table-grid > tbody > tr {
  display: grid;
  grid-template-columns: var(--cols, repeat(auto-fit, minmax(0, 1fr)));
  align-items: start;
  border-bottom: 1px solid var(--ink-100);
}
.table-grid > thead > tr > th,
.table-grid > tbody > tr > td {
  padding: var(--sp-3) var(--sp-3);
  font-size: var(--fs-sm);
  text-align: left;
  vertical-align: top;
  min-width: 0;
}
.table-grid > thead > tr {
  background: var(--ink-50);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 1;
}
.table-grid > thead > tr > th {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.table-grid > tbody > tr:hover { background: var(--ink-50); cursor: pointer; }
.table-grid > tbody > tr:focus-visible { outline: 2px solid var(--navy-700); outline-offset: -2px; }

/* Pull-quote citation copiable */
.citation {
  margin: var(--sp-5) 0;
  padding: var(--sp-4) var(--sp-6);
  border-left: 3px solid var(--navy-700);
  background: var(--navy-50);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  position: relative;
}
.citation blockquote {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  font-style: italic;
  color: var(--ink-800);
  line-height: 1.5;
}
.citation cite {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-style: normal;
  color: var(--navy-800);
}
.citation cite strong { color: var(--navy-900); }

/* Chat message structure */
.msg { display: flex; gap: var(--sp-4); align-items: flex-start; }
.msg__avatar { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; }
.msg__body { flex: 1; min-width: 0; }

/* Empty / error / loading containers */
.state {
  padding: var(--sp-9) var(--sp-6);
  text-align: center;
  color: var(--text-muted);
}
.state__icon { width: 48px; height: 48px; margin: 0 auto var(--sp-4); color: var(--ink-400); }
.state__title { font-size: var(--fs-xl); color: var(--text); font-weight: 600; margin-bottom: var(--sp-2); }
.state__body { font-size: var(--fs-base); max-width: 420px; margin: 0 auto var(--sp-5); line-height: var(--lh-base); }