/* Tokens de diseño (sistema de diseño aprobado). Todo color, tamaño, radio y
   sombra de los CSS de la app sale de acá: no usar valores sueltos. */

:root{
  /* tipografía */
  --font-sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --text-xs:12px; --text-sm:13px; --text-base:14px; --text-md:15px;
  --text-lg:18px; --text-xl:22px; --text-2xl:28px;
  --leading-tight:1.25; --leading-base:1.45;

  /* superficies y texto */
  --color-bg:#F3F5F6;
  --color-surface:#FFFFFF;
  --color-surface-muted:#F8FAFB;
  --color-surface-hover:#F1F5F6;
  --color-border:#DCE2E6;
  --color-border-soft:#E8ECEF;
  --color-border-strong:#BFC9CF;
  --color-text:#182126;
  --color-text-muted:#4F5E67;
  --color-text-disabled:#87939B;

  /* acento institucional (azul petróleo) */
  --color-accent:#0F5C6E;
  --color-accent-hover:#0B4A59;
  --color-accent-soft:#E4F0F3;
  --color-accent-border:#A9CDD6;
  --color-on-accent:#FFFFFF;
  --color-focus:#1C8FA8;
  --color-focus-soft:rgba(28,143,168,.28);

  /* navegación lateral */
  --color-nav-bg:#12292F;
  --color-nav-text:#BFD0D5;
  --color-nav-muted:#8FA8AF;
  --color-nav-strong:#FFFFFF;
  --color-nav-hover:rgba(255,255,255,.06);
  --color-nav-active:rgba(255,255,255,.10);
  --color-nav-bar:#6FC3D6;

  /* estados */
  --color-success:#17714A;
  --color-success-soft:#E3F3EA;
  --color-success-border:#A5D5BB;
  --color-warning:#7A4F00;
  --color-warning-soft:#FFF4D9;
  --color-warning-border:#E8C877;
  --color-warning-bar:#D9A520;
  --color-danger:#B3261E;
  --color-danger-soft:#FDECEA;
  --color-danger-border:#F0B4AF;

  /* origen del dato en un campo */
  --color-prefill:#5C9AA9;
  --color-prefill-bg:#F1F7F9;
  --color-manual:#0F5C6E;
  --color-vaciado:#7A8790;

  /* espaciado (base 4) */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px;

  /* radios */
  --radius-sm:4px; --radius-md:6px; --radius-lg:8px; --radius-xl:12px; --radius-pill:999px;

  /* sombras */
  --shadow-sm:0 1px 2px rgba(18,41,47,.07);
  --shadow-md:0 4px 14px rgba(18,41,47,.10);
  --shadow-lg:0 14px 36px rgba(18,41,47,.20);

  /* medidas de control */
  --control-h:36px; --control-h-sm:30px; --control-h-lg:42px; --row-h:38px;
  --sidebar-w:232px;
}

/* Tacto: en teléfono (< 768 px) y en cualquier pantalla con puntero grueso
   (tablets) los controles pasan a 44 px —el mínimo para tocar sin errar— y la
   altura de fila de tabla los acompaña. Es la única regla de tamaño táctil: las
   pantallas no redefinen estas variables. Ver "Responsive y táctil" en
   docs/DISENO.md. */
@media (max-width: 767px), (pointer: coarse) {
  :root{
    --control-h:44px; --control-h-sm:44px; --control-h-lg:48px; --row-h:44px;
  }
}

/* Derivados de los tokens del diseño: matices que el sistema usa en hover,
   deshabilitado, fondos suaves y listas. Siguen siendo tokens: los CSS no
   escriben colores sueltos. */
:root{
  --color-disabled-bg:#EEF1F3;
  --color-border-hover:#A4B2B9;
  --color-placeholder:#66757E;
  --color-danger-hover:#8F1E18;
  --color-danger-focus:rgba(179,38,30,.2);
  --color-danger-field-bg:#FFFBFA;
  --color-row-hover:#F6F9FA;
  --color-row-selected-hover:#DCEBEF;
  --color-count-bg:#E8EDEF;
  --color-track:#E3E9EC;
  --color-borrador-text:#3B4A52;
  --color-borrador-border:#D3DBE0;
  --color-info-text:#0A3E4B;
  --color-avatar-bg:#1E4650;
  --color-avatar-soft:#DCE8EB;
  --color-nav-divider:rgba(255,255,255,.12);
  --color-nav-focus:#6FC3D6;
  --color-toast-ok:#7ED6A3;
  --color-toast-err:#FFA39B;
  --color-toast-action:#BFE3EC;
  --color-overlay:rgba(18,41,47,.5);
  --color-stripe-a:#F5F7F8;
  --color-stripe-b:#ECF0F2;
  --z-nav:40;
  --z-modal:50;
  --z-toast:60;
}

/* Alias de los nombres anteriores a este diseño (los usan editor.css,
   lotes.css, estilos en línea de templates y JS). No usar en código nuevo. */
:root{
  --color-primary:var(--color-accent);
  --color-primary-hover:var(--color-accent-hover);
  --color-primary-contrast:var(--color-on-accent);
  --color-danger-contrast:#FFFFFF;
  --border:var(--color-border);
}