/* Sistema de diseño — Registro de Marca Arizu. Ver docs/design-system.md
   Ola R1 (rediseño premium): concepto "papel de estudio jurídico" — superficies
   cálidas tipo papel, tinta verde botella profundo, acentos semáforo en dorado
   envejecido y granate. El tema claro es SIEMPRE el default y el protagonista;
   el oscuro se mantiene digno pero es secundario (ver más abajo).
   Todos los nombres de variable pre-existentes se conservan intactos para no
   romper a quien ya los consume: se AGREGAN escalas nuevas (--primary-50..900,
   --neutral-50..900) y los tokens semánticos ya existentes (--bg, --accent,
   --rojo, etc.) ahora derivan de esas escalas en vez de ser hex sueltos. */

/* Fraunces autohosteado (variable: opsz 9-144 + wght 400-700, subset "latin" de
   Google Fonts) — cubre español (ñ, tildes, ¿¡) sin depender de una CDN externa
   en runtime. Un solo archivo (67kb) reemplaza el TODO anterior de este archivo. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/fraunces/fraunces-variable.woff2") format("woff2");
}

:root {
  /* --- Tipografía ---------------------------------------------------------- */
  --font-sans: ui-sans-serif, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;

  --text-xs: 11px;
  --text-sm: 12.5px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  /* Escala display (serif): títulos y números protagonistas. clamp = fluida. */
  --text-display-xs: clamp(1.25rem, 1.16rem + 0.4vw, 1.5rem);
  --text-display-sm: clamp(1.5rem, 1.32rem + 0.8vw, 1.875rem);
  --text-display-md: clamp(1.875rem, 1.5rem + 1.6vw, 2.5rem);
  --text-display-lg: clamp(2.25rem, 1.7rem + 2.4vw, 3.25rem);
  --text-display-xl: clamp(2.75rem, 1.9rem + 3.8vw, 4.5rem);

  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;

  /* --- Espaciado ------------------------------------------------------------ */
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 20px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 40px;
  --space-4xl: 56px;

  /* --- Escala neutra cálida (papel/tinta), 50 claro → 900 oscuro ------------ */
  --neutral-50: #FBFAF8;
  --neutral-100: #F5F3EF;
  --neutral-200: #E8E4DC;
  --neutral-300: #D8D2C4;
  --neutral-400: #B3AB9C;
  --neutral-500: #8C8478;
  --neutral-600: #6F6A62;
  --neutral-700: #57524A;
  --neutral-800: #3A3730;
  --neutral-900: #23211E;

  /* --- Escala primaria: verde botella profundo (tinta del estudio) ---------- */
  --primary-50: #F0F5F1;
  --primary-100: #DEECE3;
  --primary-200: #BFDAC9;
  --primary-300: #99C0A9;
  --primary-400: #6EA385;
  --primary-500: #498267;
  --primary-600: #2F6449;
  --primary-700: #1F4E3D;
  --primary-800: #163A2C;
  --primary-900: #102A20;

  /* --- Modo claro (default) -------------------------------------------------- */
  --bg: var(--neutral-50);
  --surface: #FFFFFF;
  --surface-2: var(--neutral-100);
  --text-primary: var(--neutral-900);
  --text-secondary: var(--neutral-600);
  --border: var(--neutral-200);
  --border-strong: var(--neutral-300);

  --accent: var(--primary-700);
  --accent-hover: var(--primary-800);
  --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent);
  --accent-strong: var(--primary-900);

  /* Semáforo: granate (rojo) y dorado envejecido (amarillo) — fondos "wash"
     derivados por color-mix (4-8%) en vez de hex planos: se adaptan solos al
     modo oscuro porque mezclan con --surface. */
  --rojo: #9C2B3A;
  --rojo-bg: color-mix(in srgb, var(--rojo) 8%, var(--surface));
  --rojo-border: color-mix(in srgb, var(--rojo) 28%, transparent);

  --amarillo: #8A6A1F;
  --amarillo-bg: color-mix(in srgb, var(--amarillo) 9%, var(--surface));
  --amarillo-border: color-mix(in srgb, var(--amarillo) 30%, transparent);

  --verde: #3E7E46;
  --verde-bg: color-mix(in srgb, var(--verde) 8%, var(--surface));
  --verde-border: color-mix(in srgb, var(--verde) 28%, transparent);

  /* Sombras de dos capas: una de definición (contacto) + una difusa (elevación). */
  --shadow-xs: 0 1px 2px rgba(35, 33, 30, 0.05);
  --shadow-sm: 0 1px 2px rgba(35, 33, 30, 0.05), 0 1px 1px rgba(35, 33, 30, 0.04);
  --shadow-md: 0 2px 4px rgba(35, 33, 30, 0.045), 0 12px 28px -10px rgba(35, 33, 30, 0.16);
  --shadow-lg: 0 4px 10px rgba(35, 33, 30, 0.06), 0 28px 56px -20px rgba(35, 33, 30, 0.2);
  --shadow-xl: 0 8px 16px rgba(35, 33, 30, 0.07), 0 40px 80px -24px rgba(35, 33, 30, 0.26);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 999px;

  --focus-ring: 0 0 0 3px var(--accent-soft);

  --duration-fast: 150ms;
  --duration-normal: 220ms;
  --duration-slow: 400ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* Shell (sección 9.2) */
  --sidebar-w: 264px;
  --sidebar-w-rail: 68px;
  --topbar-h: 56px;
  --content-pad: 32px;

  --z-topbar: 20;
  --z-sidebar: 30;
  --z-scrim: 40;
  --z-sheet: 50;
  --z-toast: 60;
  --z-popover: 70;
  --z-palette: 80;

  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #1C1B1A;
  --surface: #242220;
  --surface-2: #2B2924;
  --text-primary: #F1EDE6;
  --text-secondary: #A39C90;
  --border: #38352F;
  --border-strong: #454138;

  --accent: #4A8F87;
  --accent-hover: #5FA69D;
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-strong: #DCEDE9;

  --rojo: #E0737E;
  --rojo-bg: color-mix(in srgb, var(--rojo) 14%, var(--surface));
  --rojo-border: color-mix(in srgb, var(--rojo) 32%, transparent);

  --amarillo: #E3B75B;
  --amarillo-bg: color-mix(in srgb, var(--amarillo) 14%, var(--surface));
  --amarillo-border: color-mix(in srgb, var(--amarillo) 32%, transparent);

  --verde: #5CAD5F;
  --verde-bg: color-mix(in srgb, var(--verde) 14%, var(--surface));
  --verde-border: color-mix(in srgb, var(--verde) 32%, transparent);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.28), 0 12px 28px -10px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.3), 0 28px 56px -20px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.32), 0 40px 80px -24px rgba(0, 0, 0, 0.55);

  color-scheme: dark;
}

/* El tema claro es SIEMPRE el default (pedido explícito del cliente). El oscuro
   se activa únicamente con el toggle del usuario (data-theme="dark"), nunca
   siguiendo la preferencia del sistema operativo. */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  font-optical-sizing: auto;
  margin: 0;
}

/* Utilidad para números/títulos protagonistas: mismas reglas que h1-h3 más
   tabular-nums, pensada para valores que cambian (KPIs, montos) donde el ancho
   fijo de cada dígito evita que el layout salte. */
.rma-display {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: var(--tracking-tight);
}

.tabular-nums { font-variant-numeric: tabular-nums; }

a { color: var(--accent); }

::selection { background: var(--accent-soft); }

/* Primitiva compartida entre componentes (ThemeToggle, NotificationBell, Topbar) —
   vive acá y no en CSS isolation porque cruza límites de componentes hermanos. */
.rma-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.rma-icon-btn:hover {
  background: color-mix(in srgb, var(--text-primary) 6%, transparent);
  color: var(--text-primary);
}

.rma-icon-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}