/* estilo-funcar.css -- tokens visuales compartidos de func.ar.
   Fuente canónica de este archivo: ESTILO_VISUAL_FUNCAR.md (funcar-hermes).
   Copia idéntica en facturador (frontend/estilo-funcar.css) y gastos
   (frontend_web/estilo-funcar.css) -- si se actualiza acá, se actualiza en
   los tres lugares (mismo criterio que el documento de estilo en sí).

   Por qué un archivo compartido y no 37 bloques <style> duplicados
   (decisión 2026-10-14): "estándar antes que invención" -- un archivo CSS
   enlazado es el mecanismo nativo de la web para esto, no hace falta
   inventar nada. El próximo ajuste de paleta es un archivo, no 37. */

:root {
  /* claro -- DEFAULT en todo el producto (2026-10-14, reemplaza el
     default oscuro que tenía landing/marketing) */
  --ink:#F3F4EF; --surface:#FFFFFF; --surface-2:#E8EADF; --surface-3:#F0EEE7;
  --bone:#0B0D0A; --muted:#5A6350; --line:rgba(11,13,10,.14);
  --line-hl:rgba(217,123,79,.35);
  --danger:#A63A25; --alerta:#8A5F13; --ok:#2E7A5C;

  /* acento único de marca -- terracota, reemplaza la distinción anterior
     lima=Personas/terracota=Empresas (opción A, confirmada por Rodrigo
     sobre un mockup comparativo, 2026-10-14) */
  --acento:#D97B4F; --acento-hover:#C15E31;
  --acento-texto:#A3481F;   /* AA sobre blanco -- nunca --acento crudo como texto */
  --acento-suave:#FBE9DE;   /* fondo de chips/badges, siempre con --acento-texto encima */

  --wa:#25D366; /* WhatsApp, marca de terceros, no se toca */

  /* translúcidos -- NUNCA un rgba(11,13,10,…) hardcodeado para esto (hallazgo
     real 2026-10-14: el nav de la landing quedó con fondo oscuro fijo tras
     migrar a claro, porque su rgba() no dependía de ningún token de tema).
     --surface-translucent: nav/header sticky con blur. --wash: fondo sutil
     de hover sobre una superficie (ej. btn-ghost:hover). */
  --surface-translucent:rgba(255,255,255,.82);
  --wash:rgba(11,13,10,.05);
  color-scheme: light;
}

/* oscuro -- SIEMPRE OPCIONAL, nunca default (toggle sol/luna, ver tema.js) */
:root[data-tema="oscuro"] {
  --ink:#0B0D0A; --surface:#14180F; --surface-2:#1C2116; --surface-3:#20261A;
  --bone:#F3F4EF; --muted:#A3A99A; --line:rgba(243,244,239,.14);
  --line-hl:rgba(217,123,79,.4);
  --danger:#E08B78; --alerta:#E0B978; --ok:#6FBF9E;

  --acento:#D97B4F; --acento-hover:#E8926A;
  --acento-texto:#F0B896;   /* AA sobre el fondo oscuro de --surface */
  --acento-suave:#3A2318;

  --surface-translucent:rgba(11,13,10,.82);
  --wash:rgba(243,244,239,.06);
  color-scheme: dark;
}

/* ---------------------------------------------------------------- botones
   Estados y animación (ESTILO_VISUAL_FUNCAR.md, sección "Botones" --
   patrón "state layer" de Material/Airbnb: cambio de tono plano en hover,
   scale leve al presionar, nunca una sombra que aparece/desaparece). */
.btn-primario {
  display:inline-flex; align-items:center; gap:9px;
  background:var(--acento); color:#FFFFFF; border:none; border-radius:10px;
  font-weight:600; font-size:15px; padding:12px 22px;
  text-decoration:none; cursor:pointer;
  transition:background-color 150ms ease, transform 80ms ease;
}
.btn-primario:hover  { background:var(--acento-hover); }
.btn-primario:active { background:var(--acento-hover); transform:scale(.97); }
.btn-primario:focus-visible { outline:2px solid var(--acento-texto); outline-offset:2px; }

.btn-secundario {
  display:inline-flex; align-items:center; gap:9px;
  background:transparent; color:var(--bone); border:1px solid var(--line); border-radius:10px;
  font-weight:600; font-size:15px; padding:12px 22px;
  text-decoration:none; cursor:pointer;
  transition:background-color 150ms ease, border-color 150ms ease, transform 80ms ease;
}
.btn-secundario:hover  { background:var(--surface-2); border-color:var(--muted); }
.btn-secundario:active { transform:scale(.97); }
.btn-secundario:focus-visible { outline:2px solid var(--acento-texto); outline-offset:2px; }

@media (prefers-reduced-motion: reduce) {
  .btn-primario, .btn-secundario { transition:none; }
  .btn-primario:active, .btn-secundario:active { transform:none; }
}

/* ---------------------------------------------------------------- toggle sol/luna */
.toggle-tema {
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:999px; border:1px solid var(--line);
  background:transparent; color:var(--bone); cursor:pointer; flex-shrink:0;
  transition:background-color 150ms ease, border-color 150ms ease;
}
.toggle-tema:hover { background:var(--surface-2); border-color:var(--muted); }
.toggle-tema:focus-visible { outline:2px solid var(--acento-texto); outline-offset:2px; }
.toggle-tema svg { width:17px; height:17px; }