/* Sky Terra Gestión — capa visual v1
   Tokens de diseño. CSS plano, sin build step, sin dependencias externas.
   Los colores de marca (bloque 1) NO se cambian: todo lo demás deriva de ellos.
   Ratios de contraste indicados como <ratio> vs <fondo>, calculados con la
   fórmula WCAG 2.1 de luminancia relativa sobre sRGB (truncados a 2 decimales).
*/

:root {
  /* ── 1. marca (sin cambios) ─────────────────────────────────────────── */
  --petroleo:   #1B2A3B;  /* primario            · 14,57:1 vs #fff */
  --petroleo-2: #24374d;  /* hover, foco, info   · 12,15:1 vs #fff */
  --crema:      #F5F2ED;  /* fondo de app        · tinta 13,05:1 */
  --arena:      #C8B89A;  /* separador / rótulo sobre petróleo 7,48:1 */
  --dorado:     #B8973E;  /* SOLO fondo: 2,79:1 vs #fff (ver bloqueos) */
  --gris:       #E8E4DF;  /* superficie inactiva · tinta 11,52:1 */
  --terracota:  #9E6B4A;  /* acento              · 4,51:1 vs #fff */

  /* ── 2. variantes derivadas ─────────────────────────────────────────── */
  --petroleo-hover:  #24374d;  /* 12,15:1 vs #fff */
  --petroleo-active: #16222F;  /* 16,10:1 vs #fff */
  --dorado-txt:      #8F722A;  /* 4,56:1 vs #fff — texto/borde de acento */
  --dorado-suave:    #F1ECE3;  /* fondo tonal */
  --terracota-hover: #8A5B3E;
  --terracota-tenue: #F3E9E2;

  /* ── 3. superficies ─────────────────────────────────────────────────── */
  --bg:            #F5F2ED;
  --surface:       #ffffff;
  --surface-2:     #FBF9F5;  /* pie de tabla, zonas de apoyo */
  --surface-3:     #F1ECE3;  /* cabecera de tabla, chips */
  --surface-sel:   #DDE5EE;  /* fila seleccionada / info · tinta 11,46:1 */
  --surface-hover: #F3EDE1;  /* hover de fila · tinta 12,50:1 */

  /* ── 4. bordes ──────────────────────────────────────────────────────── */
  --hairline:     #E2DCD1;  /* separador de fila · 1,36:1 — decorativo */
  --borde:        #DED7CC;  /* borde de card     · 1,43:1 — decorativo */
  --borde-fuerte: #8F8A82;  /* borde de control  · 3,43:1 vs #fff ✓ AA */

  /* ── 5. texto ───────────────────────────────────────────────────────── */
  --ink:          #1B2A3B;  /* 14,57:1 vs #fff */
  --ink-2:        #4A4A4A;  /*  8,87:1 vs #fff */
  --ink-3:        #6A6E73;  /*  5,13:1 vs #fff — secundario, .sub */
  --ink-inv:      #ffffff;
  --ink-disabled: #6E6E6E;  /*  4,03:1 sobre --gris — exento (WCAG 1.4.3) */

  /* ── 6. semánticos ──────────────────────────────────────────────────── */
  --ok:       #2E7D32;  /* 5,13:1 vs #fff — icono/fondo */
  --ok-txt:   #276B2B;  /* 5,51:1 sobre --ok-bg */
  --ok-bg:    #E4EFE4;
  --warn:     #D4830A;  /* 2,98:1 vs #fff — NO usar como texto ni icono */
  --warn-txt: #8A5407;  /* 6,27:1 vs #fff · 5,48:1 sobre --warn-bg */
  --warn-bg:  #FAEFD6;
  --err:      #C0392B;  /* 5,44:1 vs #fff */
  --err-txt:  #A53125;  /* 5,75:1 sobre --err-bg */
  --err-bg:   #FAE7E4;
  --info:     #24374d;
  --info-txt: #24374d;
  --info-bg:  #DDE5EE;

  /* Significado contable, no decorativo: --err/--err-txt es plata que falta
     o que se debe; --ok/--ok-txt es plata que entra. Por eso todo mensaje
     de sistema lleva icono + texto además del color. */

  /* ── 7. tipografía (stack local, sin CDN) ───────────────────────────── */
  --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fuente-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-caption: 12px;  --lh-caption: 16px;
  --fs-body:    13px;  --lh-body:    18px;
  --fs-lead:    14px;  --lh-lead:    20px;
  --fs-h4:      16px;  --lh-h4:      22px;
  --fs-h3:      20px;  --lh-h3:      26px;
  --fs-h2:      24px;  --lh-h2:      30px;
  --peso-reg: 400;  --peso-med: 600;

  /* ── 8. espaciado (escala de 4 px) ──────────────────────────────────── */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px;  --e-4: 16px;
  --e-5: 20px; --e-6: 24px; --e-8: 32px;  --e-10: 40px;

  /* ── 9. forma ───────────────────────────────────────────────────────── */
  --radio: 6px;            /* UN solo radio para toda la app */
  --radio-pill: 999px;     /* solo chips y badges */
  --sombra-raised:  0 1px 2px rgba(27,42,59,.08);   /* cards, tablas */
  --sombra-overlay: 0 8px 24px rgba(27,42,59,.16);  /* menús, modales, toasts */
  --foco: 2px solid #24374d;
  --foco-offset: 2px;

  /* ── 9b. la lateral ──────────────────────────────────────────────────
     La navegación es petróleo en tema claro y casi negra en oscuro: en los dos
     casos es una superficie OSCURA. Por eso su tinta no puede salir de --gris
     ni de --ink, que se dan vuelta con el tema — necesita tokens propios que
     no cambien. */
  --nav-txt:        #C9D1D9;  /* 9,31:1 sobre #1B2A3B */
  --nav-txt-activo: #ffffff;  /* 14,57:1 */
  --nav-rotulo:     #C8B89A;  /* rótulo de grupo · 7,48:1 sobre petróleo */

  /* ── 10. controles ──────────────────────────────────────────────────── */
  --ctrl-s: 32px;  /* en tabla / barra de filtros */
  --ctrl-m: 36px;  /* por defecto en escritorio */
  --ctrl-l: 40px;  /* táctil (móvil en obra) */
  --fila-compacta: 36px;
  --fila-comoda:   40px;
  --toque-min: 44px;  /* área táctil mínima bajo 600 px */
}

/* Foco: uno solo para toda la app. Doble anillo (Carbon $focus):
   exterior oscuro + interior claro, para que se lea igual sobre fondo
   claro y sobre botón petróleo. El dorado NO puede ser color de foco. */
:focus-visible {
  outline: var(--foco);
  outline-offset: var(--foco-offset);
  border-radius: 2px;
}
.btn-primario:focus-visible { box-shadow: inset 0 0 0 1px var(--ink-inv); }

/* Todo número es tabular y va a la derecha. No negociable: los importes se
   comparan columna contra columna. Los montos nunca se abrevian y usan
   separador argentino (punto para miles, coma para decimales). */
.num { font-variant-numeric: tabular-nums; text-align: right; }

/* ────────────────────────────────────────────────────────────────────────
   PUENTES CON EL CSS QUE YA ESTABA
   styles.css tiene 2.000 líneas escritas contra los nombres viejos. En vez de
   reescribirlas todas de una, los nombres viejos pasan a apuntar a los nuevos:
   así toda la app adopta el radio, la sombra y los grises del rediseño sin que
   haya que tocar cada regla, y lo que queda por migrar se migra tranquilo.
   ──────────────────────────────────────────────────────────────────────── */
:root {
  --radius: var(--radio);            /* 12px → 6px, un solo radio */
  --sombra: var(--sombra-raised);    /* una sola escala de elevación */
  --fondo:  var(--bg);
}