/**
 * design-tokens.css
 * Variables CSS globales — RSProyecto Texpro
 * Fuente de verdad para todos los módulos
 * Referencia visual: https://texpro.cl
 */

:root {

  /* ════════════════════════════════════════
     COLORES
  ════════════════════════════════════════ */

  /* Primarios — Verde corporativo Texpro */
  --color-primary:        #00E2A7;
  --color-primary-dark:   #00A885;
  --color-primary-light:  #19BF94;

  /* Secundarios — Celeste agua */
  --color-secondary:      #00AEEF;
  --color-accent:         #F5A623;

  /* ────────────────────────────────────────
     Verdes corporativos Texpro
  ──────────────────────────────────────── */
  --color-green:          #00E2A7;  /* Verde principal (vibrante) */
  --color-green-mid:      #19BF94;  /* Verde medio (hover / variante) */
  --color-green-dark:     #00A885;  /* Verde oscuro (activo / pressed) */

  /* Gris corporativo */
  --color-corporate-gray: #3A3A3A;  /* Gris oscuro Texpro */

  /* Neutros */
  --color-white:          #FFFFFF;
  --color-gray-light:     #F4F6F9;
  --color-gray-mid:       #BDC3C7;
  --color-gray-dark:      #4A4A4A;
  --color-black:          #1A1A1A;

  /* Estados */
  --color-success:        #27AE60;
  --color-success-light:  #EAFAF1;
  --color-warning:        #F39C12;
  --color-warning-light:  #FEF9E7;
  --color-danger:         #E74C3C;
  --color-danger-light:   #FDEDEC;
  --color-info:           #2980B9;
  --color-info-light:     #EBF5FB;

  /* ════════════════════════════════════════
     TIPOGRAFÍA
  ════════════════════════════════════════ */

  --font-primary:   'Montserrat', 'Segoe UI', Arial, sans-serif;
  --font-secondary: 'Open Sans', 'Roboto', sans-serif;

  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;
  --text-4xl:   2.25rem;

  --font-regular:   400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;

  --line-height-tight:  1.25;
  --line-height-normal: 1.5;
  --line-height-loose:  1.75;

  /* ════════════════════════════════════════
     ESPACIADO
  ════════════════════════════════════════ */

  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;

  /* ════════════════════════════════════════
     BORDES Y RADIOS
  ════════════════════════════════════════ */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  --border-thin:   1px solid var(--color-gray-mid);
  --border-medium: 2px solid var(--color-gray-mid);
  --border-accent: 3px solid var(--color-secondary);

  /* ════════════════════════════════════════
     SOMBRAS
  ════════════════════════════════════════ */

  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.16);
  --shadow-xl:  0 16px 40px rgba(0, 0, 0, 0.20);

  /* ════════════════════════════════════════
     LAYOUT
  ════════════════════════════════════════ */

  --sidebar-width:           240px;
  --sidebar-width-collapsed: 112px;
  --header-height:           60px;
  --content-max-width:       1400px;

  /* ════════════════════════════════════════
     TRANSICIONES
  ════════════════════════════════════════ */

  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;

  /* ════════════════════════════════════════
     Z-INDEX
  ════════════════════════════════════════ */

  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}

/* ════════════════════════════════════════
   INDICADORES ECONÓMICOS — Header
   Compartido por todos los módulos
════════════════════════════════════════ */

.header-indicadores {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-secondary);
  font-size: var(--text-xs);
  color: var(--color-gray-dark);
  background: rgba(0, 226, 167, 0.07);
  border: 1px solid rgba(0, 226, 167, 0.2);
  border-radius: var(--radius-full);
  padding: 3px 10px;
  white-space: nowrap;
  cursor: default;
  transition: background var(--transition-fast);
  line-height: 1;
}

.header-indicadores:hover {
  background: rgba(0, 226, 167, 0.13);
}

.hind-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.hind-label {
  font-weight: var(--font-semibold);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-gray-dark);
  opacity: 0.7;
}

.hind-valor {
  font-weight: var(--font-bold);
  font-size: var(--text-xs);
}

.hind-valor--usd { color: #27AE60; }
.hind-valor--uf  { color: #2980B9; }

.hind-sep {
  color: var(--color-gray-mid);
  font-size: 0.65rem;
  user-select: none;
}

.hind-error {
  color: var(--color-gray-mid);
  font-size: var(--text-xs);
}

/* En móvil se oculta para no saturar el header */
@media (max-width: 640px) {
  .header-indicadores { display: none; }
}

.sidebar-nav:empty {
  visibility: hidden;
}