/* Tokens de la dirección de Julio. Entrada única: --brand-h / --brand-c (se copian de config/tema.json).
   Respaldo hex en tokens-hex.css (generado por scripts/tokens.mjs). */
@layer reset, tokens, base, components, utilities;
@layer tokens {
  :root {
    --brand-h: 165; --brand-c: .10; --accent-h: 80; --danger-h: 28;
    --f-titulo: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
    --f-cuerpo: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --step--1: clamp(.8rem, .78rem + .1vw, .85rem);
    --step-0: 1rem;
    --step-1: clamp(1.1rem, 1.04rem + .3vw, 1.25rem);
    --step-2: clamp(1.25rem, 1.12rem + .6vw, 1.563rem);
    --step-3: clamp(1.5rem, 1.25rem + 1.1vw, 1.953rem);
    --step-4: clamp(1.9rem, 1.4rem + 2vw, 2.441rem);
    --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px; --s12: 48px;
    --r-s: 6px; --r-m: 12px; --r-l: 20px; --r-full: 999px;
    --gutter: max(16px, env(safe-area-inset-left, 0px));
    --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  }
  @supports (color: oklch(0 0 0)) {
    :root {
      --surface: oklch(.985 calc(var(--brand-c) * .06) var(--brand-h));
      --surface-2: oklch(.965 calc(var(--brand-c) * .12) var(--brand-h));
      --surface-3: oklch(.93 calc(var(--brand-c) * .20) var(--brand-h));
      --line: oklch(.60 calc(var(--brand-c) * .30) var(--brand-h));
      --text: oklch(.22 calc(var(--brand-c) * .30) var(--brand-h));
      --text-2: oklch(.42 calc(var(--brand-c) * .30) var(--brand-h));
      --brand: oklch(.44 var(--brand-c) var(--brand-h));
      --on-brand: oklch(.985 calc(var(--brand-c) * .06) var(--brand-h));
      --brand-soft: oklch(.94 calc(var(--brand-c) * .35) var(--brand-h));
      --accent: oklch(.84 calc(var(--brand-c) * 1.6) var(--accent-h));
      --on-accent: oklch(.24 calc(var(--brand-c) * .5) var(--accent-h));
      --danger: oklch(.50 calc(var(--brand-c) * 1.9) var(--danger-h));
      --danger-soft: oklch(.95 calc(var(--brand-c) * .5) var(--danger-h));
      --ok: oklch(.46 calc(var(--brand-c) * .9) var(--brand-h));
    }
    @media (prefers-color-scheme: dark) {
      :root:not([data-tema="claro"]) { --_dark: 1;
        --surface: oklch(.20 calc(var(--brand-c) * .30) var(--brand-h));
        --surface-2: oklch(.245 calc(var(--brand-c) * .30) var(--brand-h));
        --surface-3: oklch(.30 calc(var(--brand-c) * .30) var(--brand-h));
        --line: oklch(.58 calc(var(--brand-c) * .30) var(--brand-h));
        --text: oklch(.95 calc(var(--brand-c) * .12) var(--brand-h));
        --text-2: oklch(.80 calc(var(--brand-c) * .15) var(--brand-h));
        --brand: oklch(.78 var(--brand-c) var(--brand-h));
        --on-brand: oklch(.20 calc(var(--brand-c) * .30) var(--brand-h));
        --brand-soft: oklch(.30 calc(var(--brand-c) * .50) var(--brand-h));
        --danger: oklch(.74 calc(var(--brand-c) * 1.9) var(--danger-h));
        --danger-soft: oklch(.30 calc(var(--brand-c) * .30) var(--danger-h));
        --ok: oklch(.78 calc(var(--brand-c) * .9) var(--brand-h));
      }
    }
    :root[data-tema="oscuro"] {
      --surface: oklch(.20 calc(var(--brand-c) * .30) var(--brand-h));
      --surface-2: oklch(.245 calc(var(--brand-c) * .30) var(--brand-h));
      --surface-3: oklch(.30 calc(var(--brand-c) * .30) var(--brand-h));
      --line: oklch(.58 calc(var(--brand-c) * .30) var(--brand-h));
      --text: oklch(.95 calc(var(--brand-c) * .12) var(--brand-h));
      --text-2: oklch(.80 calc(var(--brand-c) * .15) var(--brand-h));
      --brand: oklch(.78 var(--brand-c) var(--brand-h));
      --on-brand: oklch(.20 calc(var(--brand-c) * .30) var(--brand-h));
      --brand-soft: oklch(.30 calc(var(--brand-c) * .50) var(--brand-h));
      --danger: oklch(.74 calc(var(--brand-c) * 1.9) var(--danger-h));
      --danger-soft: oklch(.30 calc(var(--brand-c) * .30) var(--danger-h));
      --ok: oklch(.78 calc(var(--brand-c) * .9) var(--brand-h));
    }
  }
}
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; color-scheme: light dark; }
  :root[data-tema="claro"] { color-scheme: light; }
  :root[data-tema="oscuro"] { color-scheme: dark; }
  body { margin: 0; }
  img, svg { display: block; max-width: 100%; }
  button, input, select, textarea { font: inherit; color: inherit; }
  h1, h2, h3, p { margin: 0; }
  ul { margin: 0; padding: 0; list-style: none; }
}
@layer base {
  html { scroll-behavior: auto; }
  @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
  body { font: 400 var(--step-0)/1.5 var(--f-cuerpo); background: var(--surface); color: var(--text); overflow-x: hidden; }
  h1, h2, h3 { font-family: var(--f-titulo); line-height: 1.15; text-wrap: balance; font-weight: 700; }
  .num { font-variant-numeric: tabular-nums; }
  :focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .salto { position: absolute; left: var(--s4); top: -100px; background: var(--brand); color: var(--on-brand); padding: var(--s3) var(--s4); border-radius: var(--r-s); z-index: 100; }
  .salto:focus { top: var(--s2); }
  [hidden] { display: none !important; }
}
@layer components {
  /* Filete de 3 franjas (brand, surface-3, danger), 4 px */
  .filete { height: 4px; background: linear-gradient(to bottom, var(--brand) 0 33.4%, var(--surface-3) 33.4% 66.7%, var(--danger) 66.7% 100%); border: 0; }
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 48px; padding: 0 var(--s4); border-radius: var(--r-m); border: 2px solid var(--brand); background: var(--brand); color: var(--on-brand); font-weight: 700; cursor: pointer; text-decoration: none; text-align: center; }
  .btn.sec { background: transparent; color: var(--brand); min-height: 44px; }
  .btn.peligro { background: transparent; color: var(--danger); border-color: var(--danger); }
  .btn.chico { min-height: 44px; }
  .btn[aria-disabled="true"], .btn:disabled { opacity: .5; cursor: not-allowed; }
  .pill { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 var(--s3); border-radius: var(--r-full); background: var(--brand-soft); color: var(--text); font-size: var(--step--1); font-weight: 600; }
  .pill.abierto { background: var(--accent); color: var(--on-accent); }
  .pill.cerrado { background: var(--danger-soft); color: var(--danger); }
  .campo { display: grid; gap: 6px; min-width: 0; }
  .campo > span { font-weight: 600; font-size: .95rem; }
  .campo input, .campo select, .campo textarea { width: 100%; min-width: 0; min-height: 48px; padding: 0 var(--s3); background: var(--surface); border: 2px solid var(--line); border-radius: var(--r-s); }
  .campo textarea { padding: var(--s3); min-height: 84px; }
  .campo .err { color: var(--danger); font-size: .9rem; }
  .campo input[aria-invalid="true"] { border-color: var(--danger); }
  .ilu { width: 100%; height: 100%; }
}
@layer components {
  .inst-banner { display: grid; gap: var(--s3); padding: var(--s4); border: 2px solid var(--brand); background: var(--brand-soft); border-radius: var(--r-m); margin: var(--s4) 0; }
  .inst-banner p { font-weight: 600; }
  .inst-hoja { border: 0; background: transparent; padding: 0; width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; color: var(--text); }
  .inst-hoja::backdrop { background: color-mix(in oklch, var(--text) 55%, transparent); }
  .inst-card { position: absolute; inset: 0; margin: auto; width: min(92vw, 380px); height: fit-content; background: var(--surface); border-radius: var(--r-l); padding: var(--s6); display: grid; gap: var(--s4); }
  .inst-card h2 { font-size: var(--step-1); }
  .inst-pasos { display: grid; gap: var(--s3); margin: 0; padding: 0; list-style: none; }
  .inst-pasos li { display: grid; grid-template-columns: 36px 1fr; gap: var(--s3); align-items: center; }
  .inst-ico { color: var(--brand); }
  .inst-flecha { position: fixed; left: 0; right: 0; margin: 0 auto; color: var(--accent); filter: drop-shadow(0 0 2px var(--text)); }
  .inst-flecha.abajo { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  .inst-flecha.arriba { top: 8px; left: auto; right: 24px; margin: 0; }
  @media (prefers-reduced-motion: no-preference) { .inst-flecha.abajo { animation: rebota 1s ease-in-out infinite alternate; } .inst-flecha.arriba { animation: rebota-arriba 1s ease-in-out infinite alternate; } @keyframes rebota { to { transform: translateY(-10px); } } @keyframes rebota-arriba { to { transform: translateY(10px); } } }
  .inst-estado { font-size: var(--step--1); color: var(--ok); font-weight: 700; min-height: 1.2em; }
}
@layer components { .fila-btn { display: flex; gap: var(--s2); flex-wrap: wrap; } .fila-btn > * { flex: 1 1 120px; } }
@layer components {
  .combo { display: grid; gap: var(--s2); min-width: 0; }
  .combo-btn { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); width: 100%; min-height: 48px; padding: 0 var(--s3); background: var(--surface); color: var(--text); border: 2px solid var(--line); border-radius: var(--r-s); text-align: left; cursor: pointer; }
  .combo-valor { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .combo-pop { display: grid; gap: var(--s2); padding: var(--s2); border: 2px solid var(--line); border-radius: var(--r-s); background: var(--surface-2); }
  .combo-pop[hidden] { display: none; }
  .combo-buscar { width: 100%; min-height: 44px; padding: 0 var(--s3); border: 2px solid var(--line); border-radius: var(--r-s); background: var(--surface); color: var(--text); }
  .combo-filtros { display: flex; gap: var(--s2); overflow-x: auto; scrollbar-width: none; }
  .combo-lista { max-height: 220px; overflow-y: auto; margin: 0; padding: 0; list-style: none; border-radius: var(--r-s); }
  .combo-op { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); min-height: 44px; padding: 0 var(--s3); cursor: pointer; border-radius: var(--r-s); }
  .combo-op small { color: var(--text-2); }
  .combo-op.activo { background: var(--brand-soft); }
  .combo-op[aria-selected="true"] { font-weight: 700; box-shadow: inset 4px 0 0 var(--brand); }
  .combo-mas { padding: var(--s2) var(--s3); color: var(--text-2); font-size: var(--step--1); }
}