/* Tokens de la interfaz: tipografía, radios, sombras y los colores en claro y oscuro (referencia: docs/rediseno/tokens.md).
   Los colores están declarados tres veces a propósito: claro (:root), oscuro elegido a mano ([data-theme='dark'])
   y oscuro por preferencia del sistema (@media con :not([data-theme='light'])). Una sola lista de selectores no puede,
   porque la elección explícita tiene que ganarle a la media query. Si cambiás un valor, cambialo en los dos oscuros. */

@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url('/static/fonts/inter.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono'; font-style: normal; font-weight: 400 500;
  font-display: swap; src: url('/static/fonts/geist-mono.woff2') format('woff2');
}

:root {
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --r-sm: 10px;      /* botones de ícono, chips internos */
  --r-md: 14px;      /* campos, bloques de texto */
  --r-lg: 20px;      /* tarjetas */
  --r-pill: 999px;   /* botones, filtros, etiquetas */
  --gut: 32px;
  --ancho: 920px;    /* columna de lectura */
  --ancho-lista: 1216px;   /* Prospectos, en dos columnas */
  --menu: 264px;     /* menú lateral abierto */
  --menu-plegado: 76px;

  --bg:             #F6F7FB;
  --surface:        #FFFFFF;
  --line:           #E6E9F0;
  --line-strong:    #8591A6;   /* borde de campos y casillas: 3:1 contra la superficie */
  --ink:            #0F172A;
  --muted:          #5B6679;
  --soft:           #F1F3F9;
  --brand:          #4F46E5;   /* el acento: el cliente puede reemplazarlo por JS */
  --on-brand:       #FFFFFF;
  --brand-soft:     #EEF0FF;
  --brand-soft-ink: #3730A3;
  --focus:          #4F46E5;
  --ring:           rgba(79, 70, 229, 0.22);
  --sky-bg: #E0F2FE;  --sky: #0369A1;
  --em-bg:  #D1FAE5;  --em:  #047857;
  --am-bg:  #FEF3C7;  --am:  #92400E;
  --ro-bg:  #FFE4E6;  --ro:  #BE123C;  --on-ro: #FFFFFF;
  --vi-bg:  #EDE9FE;  --vi:  #6D28D9;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 6px 18px -6px rgba(15, 23, 42, 0.14), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow:    0 14px 34px -10px rgba(15, 23, 42, 0.28);
  --shadow-menu: 0 24px 64px rgba(15, 23, 42, 0.4);
  --scrim: rgba(15, 23, 42, 0.5);
  color-scheme: light;
}

:root[data-theme='dark'] {
  --bg:             #0B0F19;
  --surface:        #131A2A;
  --line:           #25314A;
  --line-strong:    #5E6E92;
  --ink:            #EEF1F8;
  --muted:          #9AA6BC;
  --soft:           #1A2338;
  --brand-soft:     #1E2150;
  --brand-soft-ink: #C7CBFF;
  --focus:          #A5B4FC;
  --ring:           rgba(165, 180, 252, 0.28);
  --sky-bg: #0C2A40;  --sky: #7DD3FC;
  --em-bg:  #0B2F26;  --em:  #6EE7B7;
  --am-bg:  #3A2A0B;  --am:  #FCD34D;
  --ro-bg:  #3D1420;  --ro:  #FDA4AF;  --on-ro: #3D1420;
  --vi-bg:  #271C4A;  --vi:  #C4B5FD;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 22px -8px rgba(0, 0, 0, 0.6);
  --shadow:    0 16px 36px -10px rgba(0, 0, 0, 0.75);
  --shadow-menu: 0 24px 64px rgba(0, 0, 0, 0.7);
  --scrim: rgba(3, 6, 12, 0.66);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg:#0B0F19; --surface:#131A2A; --line:#25314A; --line-strong:#5E6E92; --ink:#EEF1F8; --muted:#9AA6BC; --soft:#1A2338;
    --brand-soft:#1E2150; --brand-soft-ink:#C7CBFF; --focus:#A5B4FC; --ring:rgba(165,180,252,0.28);
    --sky-bg:#0C2A40; --sky:#7DD3FC; --em-bg:#0B2F26; --em:#6EE7B7; --am-bg:#3A2A0B; --am:#FCD34D;
    --ro-bg:#3D1420; --ro:#FDA4AF; --on-ro:#3D1420; --vi-bg:#271C4A; --vi:#C4B5FD;
    --shadow-sm:0 1px 2px rgba(0,0,0,0.4);
    --shadow-md:0 8px 22px -8px rgba(0,0,0,0.6);
    --shadow:0 16px 36px -10px rgba(0,0,0,0.75);
    --shadow-menu:0 24px 64px rgba(0,0,0,0.7);
    --scrim:rgba(3,6,12,0.66);
    color-scheme: dark;
  }
}