/* ═══════════════════════════════════════════════════════════════
   Paymoder — capa base del sistema visual
   Tokens según paymoder.docs/redisenio/DESIGNSYSTEM_V2.md §1
   Referencia funcional: paymoder.docs/redisenio/SISTEMA_VISUAL.html

   Cuando se incorpore Tailwind + daisyUI, este bloque de tokens pasa
   a ser el tema personalizado; el resto se sustituye por sus clases.
   ═══════════════════════════════════════════════════════════════ */

@layer tokens, base, componentes, utilidades;

@layer tokens {
  :root {
    /* Marca primaria — #6422FF (--w-blue del sistema actual) */
    --b50:#F5F1FF;  --b100:#EAE2FF; --b200:#D8C9FF; --b300:#BCA4FF;
    --b400:#9871FF; --b500:#6422FF; --b600:#5417DC; --b700:#4411AE; --b800:#320C7E;

    /* Marca secundaria — #FF5032 (--w-red del sistema actual) */
    --c50:#FFF2EF; --c100:#FFE1DA; --c200:#FFC4B7; --c400:#FF7A5F;
    --c500:#FF5032; --c600:#E63E22;

    --grad:linear-gradient(135deg,#FF5032 0%,#6422FF 100%);

    /* Superficies y texto — neutros con sesgo violeta, no grises puros */
    --bg-page:#F6F5F9; --bg-surface:#FFFFFF; --bg-raised:#FBFAFD;
    --bg-sunken:#EFEDF4; --bg-hover:#F5F2FE;
    --bd:rgba(24,20,36,.08); --bd-mid:rgba(24,20,36,.14); --bd-strong:rgba(24,20,36,.26);
    --tx-1:#181424; --tx-2:#514A63; --tx-3:#8B849C;

    /* Semánticos — desaturados, exclusivos de estado */
    --ok:#2F7D4F;   --ok-bg:#EDF6F0;   --ok-bd:#C3E0CE;
    --warn:#96601A; --warn-bg:#FBF3E7; --warn-bd:#E8D2AC;
    --err:#A83232;  --err-bg:#FBEDED;  --err-bd:#EDC2C2;

    --glass:rgba(255,255,255,.74); --glass-bd:rgba(24,20,36,.07);
    --sh-sm:0 1px 2px rgba(24,20,36,.05);
    --sh-md:0 4px 14px rgba(24,20,36,.09);
    --sh-lg:0 16px 44px rgba(24,20,36,.17);

    --r-sm:6px; --r-md:10px; --r-lg:14px; --r-full:999px;
    --sans:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    --mono:"JetBrains Mono",ui-monospace,"SF Mono","Cascadia Mono",Menlo,monospace;

    --sidebar-w:288px; --topbar-h:56px;
    --row-y:9px; --row-fs:13px;
    --ease:cubic-bezier(.22,.85,.3,1);

    color-scheme: light;
  }

  /* Tema oscuro — solo redefine tokens, nunca componentes */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { color-scheme: dark; }
  }
  :root[data-theme="dark"] { color-scheme: dark; }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --b50:#1E1733; --b100:#271D45; --b200:#342659; --b300:#4A3585;
      --b400:#7B54E8; --b500:#9871FF; --b600:#A98AFF; --b700:#BDA4FF; --b800:#D3C1FF;
      --c50:#331A14; --c100:#4A2418; --c200:#6B3524; --c400:#FF8A72;
      --c500:#FF6E52; --c600:#FF8A72;
      --grad:linear-gradient(135deg,#FF6E52 0%,#9871FF 100%);
      --bg-page:#100D1B; --bg-surface:#191424; --bg-raised:#201A2E;
      --bg-sunken:#0C0915; --bg-hover:#241D35;
      --bd:rgba(255,255,255,.08); --bd-mid:rgba(255,255,255,.14); --bd-strong:rgba(255,255,255,.28);
      --tx-1:#F1EDFA; --tx-2:#B5AEC8; --tx-3:#7F7893;
      --ok:#63C48D; --ok-bg:#14261B; --ok-bd:#26482F;
      --warn:#DFA85E; --warn-bg:#281D0E; --warn-bd:#4E3A1A;
      --err:#E88585; --err-bg:#291416; --err-bd:#53272A;
      --glass:rgba(25,20,36,.74); --glass-bd:rgba(255,255,255,.08);
      --sh-sm:0 1px 2px rgba(0,0,0,.45); --sh-md:0 4px 16px rgba(0,0,0,.5);
      --sh-lg:0 16px 44px rgba(0,0,0,.6);
    }
  }
  :root[data-theme="dark"] {
    --b50:#1E1733; --b100:#271D45; --b200:#342659; --b300:#4A3585;
    --b400:#7B54E8; --b500:#9871FF; --b600:#A98AFF; --b700:#BDA4FF; --b800:#D3C1FF;
    --c50:#331A14; --c100:#4A2418; --c200:#6B3524; --c400:#FF8A72;
    --c500:#FF6E52; --c600:#FF8A72;
    --grad:linear-gradient(135deg,#FF6E52 0%,#9871FF 100%);
    --bg-page:#100D1B; --bg-surface:#191424; --bg-raised:#201A2E;
    --bg-sunken:#0C0915; --bg-hover:#241D35;
    --bd:rgba(255,255,255,.08); --bd-mid:rgba(255,255,255,.14); --bd-strong:rgba(255,255,255,.28);
    --tx-1:#F1EDFA; --tx-2:#B5AEC8; --tx-3:#7F7893;
    --ok:#63C48D; --ok-bg:#14261B; --ok-bd:#26482F;
    --warn:#DFA85E; --warn-bg:#281D0E; --warn-bd:#4E3A1A;
    --err:#E88585; --err-bg:#291416; --err-bd:#53272A;
    --glass:rgba(25,20,36,.74); --glass-bd:rgba(255,255,255,.08);
    --sh-sm:0 1px 2px rgba(0,0,0,.45); --sh-md:0 4px 16px rgba(0,0,0,.5);
    --sh-lg:0 16px 44px rgba(0,0,0,.6);
  }
}

@layer base {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    background: var(--bg-page);
    color: var(--tx-1);
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  button, input, select, textarea { font: inherit; color: inherit; }
  a { color: inherit; text-decoration: none; }

  :focus-visible {
    outline: 2px solid var(--b500);
    outline-offset: 2px;
    border-radius: var(--r-sm);
  }

  /* Todo importe, RUC, CCI y código va en monoespaciada tabular */
  .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
  /* El marcador de posición no es el dato: aunque el campo escriba en
     monoespaciada —RUC, cuentas, CCI—, el texto de "vacío" es prosa y
     se lee mejor con la tipografía de la interfaz. */
  ::placeholder { font-family: var(--sans); font-variant-numeric: normal; }

  @media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  }

  /* Barras de desplazamiento — hueco reservado: cero salto al aparecer */
  /* `hidden` tiene que ganarle a cualquier `display` de componente: un
     .field es flex, y sin esto el atributo no ocultaría nada. */
  [hidden] { display: none !important; }
  /* Para lectores de pantalla y no para la vista: la etiqueta que en
     pantalla ya dice el título de la sección, pero de la que un control
     no puede prescindir. `display:none` la borraría también del árbol de
     accesibilidad, que es justo lo contrario de lo que se busca. */
  .oculto-visual { position: absolute; width: 1px; height: 1px; margin: -1px;
                   padding: 0; overflow: hidden; clip-path: inset(50%);
                   white-space: nowrap; border: 0; }

  html { scrollbar-gutter: stable; }
  * { scrollbar-width: thin; scrollbar-color: var(--bd-mid) transparent; }
  *::-webkit-scrollbar { width: 11px; height: 11px; }
  *::-webkit-scrollbar-track { background: transparent; }
  *::-webkit-scrollbar-thumb {
    background: var(--bd-mid);
    border-radius: var(--r-full);
    border: 3.5px solid transparent;
    background-clip: content-box;
  }
  *::-webkit-scrollbar-thumb:hover { background: var(--bd-strong); background-clip: content-box; }
  *::-webkit-scrollbar-corner, *::-webkit-scrollbar-button { display: none; }
}