/* ============================================================
   15 de Sofi — Tokens de diseño (seccion 3.1 de la especificacion)
   Valores EXACTOS. No aproximar. Tema oscuro unico.
   ============================================================ */
:root{
  /* Fondos */
  --fondo:            #0b0a0f;  /* fondo de la app */
  --superficie:       #15131c;  /* tarjetas */
  --superficie-2:     #1e1a28;  /* hojas inferiores, modales */
  --barra:            #0e0c13;  /* barra superior e inferior */
  --menu:             #110f17;  /* menu lateral (PC) */

  /* Texto */
  --texto:            #ece8f4;
  --texto-dim:        #a39cb8;
  --sobre-primario:   #1a1325;  /* texto SOBRE botones lila (nunca blanco) */
  --sobre-oro:        #2a1d05;  /* texto SOBRE fondos dorados */

  /* Lila */
  --primario:         #b99af0;  /* botones, iconos, links, barras de progreso */
  --primario-activo:  #7c5cc9;  /* item activo del menu lateral (texto blanco) */
  --primario-suave:   rgba(185,154,240,.16);
  --primario-texto:   #cdb8f7;  /* texto lila sobre fondo lila suave */

  /* Oro */
  --oro:              #f5c93a;  /* oro solido para textos chicos (fechas, chips) */
  --oro-suave:        rgba(245,201,58,.14);
  --oro-degradado:    linear-gradient(135deg, #7a5a12 0%, #c9971f 16%, #ffe9a3 36%, #f5c93a 50%, #b8861a 70%, #ffe08a 86%, #9a7318 100%);
  --oro-linea:        linear-gradient(90deg, #7a5a12, #f5c93a 25%, #fff1b8 50%, #f5c93a 75%, #7a5a12);
  --oro-vertical:     linear-gradient(180deg, #fff1b8, #f5c93a 40%, #9a7318);
  --oro-halo:         0 0 12px rgba(245,201,58,.25);

  /* Estados */
  --positivo:         #6fd6a0;  /* Listo, mesa completa */
  --pendiente:        #f0a35e;  /* Pendiente (ambar, NO amarillo) */
  --negativo:         #ff6b81;  /* Vencido, excedido, errores, borrar */

  /* Bordes */
  --borde:            #2d2840;  /* separar tarjetas y filas (decorativo) */
  --borde-control:    #6b6285;  /* TODO lo que se toca: inputs, botones secundarios */

  /* Otros */
  --velo:             rgba(5,4,8,.55);
  --radio:            12px;
  --radio-chico:      10px;
  --fuente:           'Barlow', system-ui, sans-serif;
  --fuente-titulos:   'Barlow Condensed', sans-serif;
}

/* Reset minimo */
*{ box-sizing: border-box; margin: 0; padding: 0; }
/* El atributo hidden SIEMPRE gana (si no, display:flex/grid lo anula) */
[hidden]{ display: none !important; }
html, body{ height: 100%; }
body{
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

/* Tipografia (seccion 3.4) */
h1{ font-family: var(--fuente); font-weight: 600; font-size: 22px; }
@media (min-width: 821px){ h1{ font-size: 24px; } }

.rotulo{
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.2px; color: var(--texto-dim);
}

/* Foco de teclado visible (seccion 3.5) */
:focus-visible{
  outline: 2px solid var(--primario);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Utilidad: texto con degradado dorado (marca, porcentajes) */
.texto-oro{
  background: var(--oro-degradado);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

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

/* Respetar reduccion de movimiento en toda la app */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}