/* ============================================================
   base.css — tipografías, tokens de marca y reset.
   Cargar SIEMPRE primero: aquí viven las variables :root.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

:root {
  /* --- color de marca --- */
  --bg:         #060606;
  --bg-elev:    #0E0E0E;
  --bg-elev2:   #141414;
  --ink:        #ECEAE3;
  --gold:       #C9A24B;
  --gold-dark:  #9A7726;
  --gold-light: #E8C878;
  --muted:      #8B8B85;
  --linea:      rgba(236, 234, 227, .10);
  --linea-2:    rgba(236, 234, 227, .18);

  /* --- estados --- */
  --rojo:   #C96A5E;
  --verde:  #6B9E7A;
  --ambar:  #C9A24B;
  --azul:   #6E8CA8;

  /* --- tipografía --- */
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans:  Inter, system-ui, -apple-system, sans-serif;

  /* --- movimiento: una sola curva en todo el panel --- */
  --ease-kaaos: cubic-bezier(.21, .86, .26, 1);
}

/* el atributo `hidden` debe ganar SIEMPRE, aunque una clase ponga
   display:flex/grid. Sin esto, el login se queda encima del panel. */
[hidden] { display: none !important; }

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

html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); }
body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.sin-scroll { overflow: hidden; }

img { display: block; max-width: 100%; }
a { color: var(--ink); text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 500; }
p { margin: 0; }

/* las cifras del panel se leen en columna: la Cormorant en old-style
   hacía que "41" pareciera "4I" */
b, strong, td, th, .px-stat-v, .ag-pers b {
  font-variant-numeric: lining-nums tabular-nums;
}

::selection { background: var(--gold); color: var(--bg); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

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