/*
 * tokens.css — Sistema de Diseño Strategic
 * F1: Design system tokens
 * Filosofía: minimalista monocromático Apple HIG + Starlink
 * Tecnología: CSS Custom Properties + OKLCH + clamp() + prefers-reduced-motion
 */

/* ============================================================
   F17 — INTER SELF-HOSTED (variable axis, woff2)
   Archivos en assets/fonts/. Si no existen, fallback a system-ui.
   Descarga: https://rsms.me/inter/download/ (ver assets/fonts/README.md)
   ============================================================ */
@font-face {
  font-family: 'Inter var';
  font-weight: 100 900;
  font-style:  normal;
  font-display:swap;
  src: url('fonts/Inter-roman.var.woff2') format('woff2-variations'),
       url('fonts/Inter-roman.var.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter var';
  font-weight: 100 900;
  font-style:  italic;
  font-display:swap;
  src: url('fonts/Inter-italic.var.woff2') format('woff2-variations'),
       url('fonts/Inter-italic.var.woff2') format('woff2');
}
/* Fallback CDN: queda como respaldo automático del navegador si los .woff2
   locales no existen. Comentar tras subir los archivos para eliminar la
   dependencia externa por completo. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ============================================================
   1. COLOR — Escala neutral OKLCH (modo claro por defecto)
   ============================================================ */
:root {
  /* Fondos */
  --color-bg:           oklch(100% 0 0);        /* blanco puro */
  --color-surface-1:    oklch(98.5% 0 0);       /* tarjetas, paneles */
  --color-surface-2:    oklch(96% 0 0);         /* hover sutil */
  --color-surface-3:    oklch(93% 0 0);         /* inputs, campos */

  /* Bordes */
  --color-border:       oklch(88% 0 0);         /* divisores finos 1px (subido contraste vs 92%) */
  --color-border-strong:oklch(80% 0 0);         /* inputs, botones secundarios */

  /* Texto — todos AA (≥4.5:1) sobre --color-bg */
  --color-text-muted:   oklch(46% 0 0);         /* labels, helper text — antes 55% (3.9:1) */
  --color-text-soft:    oklch(32% 0 0);         /* texto secundario */
  --color-text:         oklch(15% 0 0);         /* texto principal */
  --color-fg:           oklch(8% 0 0);          /* near-black, headings */

  /* Focus */
  --color-focus:        oklch(55% 0 0);         /* anillo de focus = gris medio, no azul */

  /* Señales semánticas — solo en estados de UI, NUNCA en superficies grandes */
  --color-success:      oklch(62% 0.12 150);    /* verde apagado */
  --color-success-bg:   oklch(96% 0.03 150);
  --color-warning:      oklch(72% 0.12 80);     /* ámbar discreto */
  --color-warning-bg:   oklch(97% 0.03 80);
  --color-danger:       oklch(58% 0.18 25);     /* rojo controlado */
  --color-danger-bg:    oklch(97% 0.04 25);
  --color-info:         oklch(60% 0.1 240);     /* azul apagado */
  --color-info-bg:      oklch(97% 0.02 240);
}

/* ============================================================
   MODO OSCURO — inversión completa, mismo eje de luminosidad
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:           oklch(8% 0 0);
    --color-surface-1:    oklch(13% 0 0);
    --color-surface-2:    oklch(18% 0 0);
    --color-surface-3:    oklch(22% 0 0);
    --color-border:       oklch(26% 0 0);
    --color-border-strong:oklch(38% 0 0);
    --color-text-muted:   oklch(68% 0 0);          /* subido para AA en dark (antes 55%) */
    --color-text-soft:    oklch(78% 0 0);
    --color-text:         oklch(90% 0 0);
    --color-fg:           oklch(96% 0 0);
    --color-focus:        oklch(70% 0 0);
  }
}

/* ============================================================
   2. TIPOGRAFÍA
   ============================================================ */
:root {
  /* Familia */
  --font-sans: 'Inter var', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;

  /* Tamaños fluidos con clamp() */
  --text-xs:   clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem);   /* mín 13px — antes 12px (mejor legibilidad) */
  --text-sm:   clamp(0.9375rem, 0.9rem  + 0.25vw, 1rem);      /* mín 15px — antes 14px */
  --text-base: clamp(1rem,      0.95rem + 0.3vw,  1.0625rem);
  --text-lg:   clamp(1.125rem,  1.05rem + 0.4vw,  1.25rem);
  --text-xl:   clamp(1.5rem,    1.3rem  + 1vw,    1.875rem);
  --text-2xl:  clamp(2rem,      1.7rem  + 1.5vw,  2.75rem);
  --text-3xl:  clamp(2.75rem,   2.2rem  + 2.5vw,  4rem);     /* hero */

  /* Pesos */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700; /* solo hero */

  /* Line heights */
  --leading-tight:  1.15;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;

  /* Letter spacing */
  --tracking-tight:  -0.02em;  /* headings grandes */
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;  /* labels pequeños en uppercase */
}

/* ============================================================
   3. ESPACIADO — Escala base 4px
   ============================================================ */
:root {
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-14:  56px;
  --space-20:  80px;
  --space-30:  120px;

  /* Contenedores */
  --container-sm:   640px;   /* formulario público */
  --container-md:   960px;   /* contenido centrado */
  --container-lg:  1280px;   /* dashboard */
  --container-xl:  1440px;   /* máximo con aire lateral */
}

/* ============================================================
   4. RADIOS DE BORDE
   ============================================================ */
:root {
  --radius-sm:   6px;      /* botones, inputs */
  --radius-md:   10px;     /* cards */
  --radius-lg:   16px;     /* modales, contenedores grandes */
  --radius-xl:   24px;     /* drawers, panels */
  --radius-pill: 9999px;   /* badges, tags */
}

/* ============================================================
   5. SOMBRAS — suaves, casi invisibles
   ============================================================ */
:root {
  --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.04);
  --shadow-md: 0 4px 12px oklch(0% 0 0 / 0.06);
  --shadow-lg: 0 16px 40px oklch(0% 0 0 / 0.08);  /* solo modales */
  --shadow-xl: 0 24px 64px oklch(0% 0 0 / 0.10);  /* drawers de pantalla completa */
}

@media (prefers-color-scheme: dark) {
  :root {
    --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.2);
    --shadow-md: 0 4px 12px oklch(0% 0 0 / 0.3);
    --shadow-lg: 0 16px 40px oklch(0% 0 0 / 0.4);
    --shadow-xl: 0 24px 64px oklch(0% 0 0 / 0.5);
  }
}

/* ============================================================
   6. MOTION — animaciones sutiles
   ============================================================ */
:root {
  --motion-fast:   120ms;
  --motion-base:   200ms;
  --motion-slow:   320ms;
  --motion-xslow:  500ms;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);      /* Apple-like spring */
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* rebote sutil */
}

/* Respeta prefers-reduced-motion — todas las animaciones a 1ms, no 0 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast:  1ms;
    --motion-base:  1ms;
    --motion-slow:  1ms;
    --motion-xslow: 1ms;
  }

  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   7. RESET Y BASE GLOBAL
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

[hidden] {
  display: none !important;
}

fieldset {
  border: none;
  padding: 0;
  margin: 0;
  min-width: 0;
}
html {
  /* Viewport fix para notch / home indicator */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family:      var(--font-sans);
  font-size:        var(--text-base);
  font-weight:      var(--weight-regular);
  line-height:      var(--leading-normal);
  color:            var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100dvh; /* dvh para móviles con barra del browser */
}

/* Tipografía base */
h1, h2, h3, h4, h5, h6 {
  font-weight:    var(--weight-semibold);
  line-height:    var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color:          var(--color-fg);
}

h1 { font-size: var(--text-3xl); font-weight: var(--weight-bold); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); letter-spacing: var(--tracking-normal); }
h5 { font-size: var(--text-base); letter-spacing: var(--tracking-normal); }
h6 { font-size: var(--text-sm); letter-spacing: var(--tracking-normal); }

p { line-height: var(--leading-normal); }

a {
  color:           var(--color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition:      color var(--motion-base) var(--ease-out),
                   opacity var(--motion-base) var(--ease-out);
}
a:hover { color: var(--color-fg); }

/* Focus ring universal — gris, no azul */
:focus-visible {
  outline:        2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius:  var(--radius-sm);
}

img, video {
  max-width: 100%;
  height:    auto;
  display:   block;
}

/* ============================================================
   SCROLLBAR — siempre visible, grueso y refinado
   Vertical 12px · Horizontal 14px (más alto, fácil de agarrar).
   Firefox: scrollbar-width + scrollbar-color.
   ============================================================ */
* {
  scrollbar-width: auto;
  scrollbar-color: var(--color-border-strong) var(--color-surface-2);
}

::-webkit-scrollbar {
  width:  12px;
  height: 14px;
  background: var(--color-surface-2);
}
::-webkit-scrollbar-track {
  background:    var(--color-surface-2);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
}
::-webkit-scrollbar-thumb {
  background:    linear-gradient(180deg, var(--color-border-strong), var(--color-text-muted));
  border-radius: var(--radius-pill);
  border:        3px solid var(--color-surface-2);
  background-clip: padding-box;
  min-height: 40px;
  min-width:  40px;
  transition: background var(--motion-base) var(--ease-out);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--color-text-muted), var(--color-text-soft));
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:active {
  background: var(--color-fg);
  background-clip: padding-box;
}
::-webkit-scrollbar-corner { background: var(--color-surface-2); }

/* Scrollbar horizontal específica (barra inferior de tablas) — más alta y notoria */
.table-container::-webkit-scrollbar,
.scroll-x::-webkit-scrollbar {
  height: 16px;
}
.table-container::-webkit-scrollbar-thumb,
.scroll-x::-webkit-scrollbar-thumb {
  background: var(--color-text-muted);
  border:     3px solid var(--color-surface-1);
  background-clip: padding-box;
  min-width: 60px;
}
.table-container::-webkit-scrollbar-thumb:hover,
.scroll-x::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-soft);
  background-clip: padding-box;
}
.table-container::-webkit-scrollbar-track,
.scroll-x::-webkit-scrollbar-track {
  background:    var(--color-surface-2);
  border-radius: var(--radius-pill);
  margin-inline: var(--space-2);
}

/* Forzar visibilidad permanente en macOS / iOS (no overlay) */
.table-container,
.scroll-x {
  scrollbar-width: auto;
  scrollbar-color: var(--color-text-muted) var(--color-surface-2);
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

@media (prefers-color-scheme: dark) {
  ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--color-border-strong), var(--color-text-muted));
    background-clip: padding-box;
  }
}

/* ============================================================
   8. UTILIDADES BASE
   ============================================================ */

/* Visually hidden — accesible para screen readers */
.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;
}

/* Contenedor centrado */
.container {
  width:     100%;
  max-width: var(--container-lg);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
.container--sm  { max-width: var(--container-sm);  }
.container--md  { max-width: var(--container-md);  }
.container--xl  { max-width: var(--container-xl);  }

/* Divisor */
.divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin-block: var(--space-6);
}

/* Texto muted */
.text-muted { color: var(--color-text-muted); }
.text-soft  { color: var(--color-text-soft);  }

/* ============================================================
   9. LOGO ADAPTATIVO — Dark mode
   Todos los logos usan class="site-logo" (o login-card__logo).
   filter: invert(1) convierte el SVG negro → blanco en dark mode.
   ============================================================ */
.site-logo,
.login-card__logo {
  transition: filter var(--motion-base) ease;
}

@media (prefers-color-scheme: dark) {
  .site-logo,
  .login-card__logo {
    filter: invert(1);
  }
}