/* ══════════════════════════════════════════════
   HADS365 — VARIABLES DEL TEMA
   Único lugar donde se definen los colores. Se carga antes que el resto del CSS.
   Las fuentes Outfit y DM Sans se cargan desde index.html.
   ══════════════════════════════════════════════ */

:root {
  /* ── MARCA ── */
  --marca:          #084D6E;
  --marca-hover:    #0A5F88;
  --marca-activa:   #06384F;
  --marca-tinte:    #E6F0F5;
  --marca-a08:      rgba(8,77,110,0.08);
  --marca-a12:      rgba(8,77,110,0.12);
  --marca-a20:      rgba(8,77,110,0.20);
  --marca-a25:      rgba(8,77,110,0.25);
  --marca-a40:      rgba(8,77,110,0.40);
  --marca-a50:      rgba(8,77,110,0.50);

  /* Sobre blanco el naranja da 2,45: nunca para texto. En texto pequeño, --acento-texto */
  --acento:         #F28C28;
  --acento-texto:   #A85508;
  --acento-tinte:   #FEF1E3;

  /* ── TEXTO Y SUPERFICIES ── */
  --blanco:         #FFFFFF;
  --fondo:          #F4F7F9;
  --tinta:          #17212B;
  --texto-medio:    #374151;
  --texto-suave:    #5B6B79;
  --borde:          #DCE4EA;
  --borde-control:  #75899A;

  /* ── MENÚ LATERAL ── */
  --lateral:        #0F2A3A;
  --lateral-texto:  #C9D8E2;
  --lateral-sub:    #0B2130;
  --lateral-peligro:#FFB4AB;

  /* ── SIGNIFICADO (tarjetas del dashboard) ── */
  --dinero:         #0F7A52;
  --cantidad:       #17638F;
  --pendiente:      #F28C28;
  --sobre-pendiente:#17212B;
  --alerta:         #B3261E;
  --dinero-hover:   #0B5E3F;
  --cantidad-hover: #114E71;
  --acento-hover:   #DD7A17;
  --alerta-hover:   #8F1D17;

  /* ── AVISOS Y ETIQUETAS: fondo, borde y texto ── */
  --exito-fondo:    #E5F4EE;
  --exito-borde:    #B7DDCB;
  --exito-texto:    #0F7A52;
  --alerta-fondo:   #FCEBEA;
  --alerta-borde:   #F3C1BD;
  --alerta-texto:   #B3261E;
  --atencion-fondo: #FEF1E3;
  --atencion-borde: #F9D4AE;
  --atencion-texto: #A85508;
  --info-borde:     #BCD6E3;

  /* ── BOTONES DESHABILITADOS ── */
  --desactivado-fondo: var(--color-gray-200);
  --desactivado-texto: var(--texto-medio);

  /* ── COLORES DE APOYO (avatares, roles, transferencia) ── */
  --teal:           #0D9488;
  --teal-fondo:     #CCFBF1;
  --teal-texto:     #0F766E;
  --violeta:        #7C3AED;
  --violeta-fondo:  #F3E8FF;

  /* ── FOCO DE TECLADO ── */
  --foco:           var(--marca);
  --foco-oscuro:    var(--acento);

  /* ── NOMBRES USADOS POR tables.css Y LAS VISTAS ── */
  --color-primary:        var(--marca);
  --color-primary-dark:   var(--marca-activa);
  --color-primary-deeper: var(--marca-activa);
  --color-primary-light:  var(--marca-hover);
  --color-primary-soft:   var(--marca-tinte);
  --color-primary-glow:   var(--marca-a12);

  --color-accent:         var(--acento);
  --color-accent-dark:    var(--acento-texto);
  --color-accent-soft:    var(--acento-tinte);
  --color-accent-glow:    rgba(242,140,40,0.15);

  --color-success:        var(--dinero);
  --color-success-soft:   var(--exito-fondo);
  --color-success-dark:   var(--exito-texto);
  --color-warning:        var(--acento-texto);
  --color-warning-soft:   var(--atencion-fondo);
  --color-danger:         var(--alerta);
  --color-danger-soft:    var(--alerta-fondo);
  --color-danger-light:   var(--alerta-fondo);
  --color-info:           var(--cantidad);
  --color-info-soft:      var(--marca-tinte);

  --color-white:          var(--blanco);
  --color-gray-50:        #F8FAFC;
  --color-gray-100:       #F1F5F9;
  --color-gray-150:       #E8EDF5;
  --color-gray-200:       #E2E8F0;
  --color-gray-300:       #CBD5E1;
  --color-gray-400:       #94A3B8;
  --color-gray-500:       #64748B;
  --color-gray-600:       #475569;
  --color-gray-700:       #334155;
  --color-gray-800:       #1E293B;
  --color-gray-900:       #0F172A;
  --color-gray-950:       #080E1C;

  --sidebar-bg:           var(--lateral);
  --sidebar-bg-hover:     rgba(255,255,255,0.08);
  --sidebar-active-bg:    var(--marca);
  --sidebar-text:         var(--lateral-texto);
  --sidebar-text-active:  var(--blanco);
  --sidebar-border:       rgba(255,255,255,0.10);

  --color-bg:             var(--fondo);
  --color-surface:        var(--blanco);
  --color-surface-2:      var(--color-gray-50);
  --color-surface-3:      var(--color-gray-100);
  --color-border:         var(--borde);
  --color-border-strong:  var(--borde-control);
  --color-text:           var(--tinta);
  --color-text-secondary: var(--texto-medio);
  --color-text-muted:     var(--texto-suave);
  --color-text-faint:     var(--texto-suave);

  /* ── TIPOGRAFÍA ── */
  --font-display:         'Outfit', 'Segoe UI', system-ui, sans-serif;
  --font-body:            'DM Sans', 'Segoe UI', system-ui, sans-serif;
  --font-family:          var(--font-body);

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

  --font-weight-light:    300;
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-extrabold:800;
  --font-weight-black:    900;

  --line-height-tight:    1.2;
  --line-height-snug:     1.35;
  --line-height-normal:   1.5;
  --line-height-relaxed:  1.7;

  --letter-spacing-tight: -0.025em;
  --letter-spacing-snug:  -0.015em;
  --letter-spacing-normal: 0em;
  --letter-spacing-wide:  0.025em;
  --letter-spacing-wider: 0.05em;

  /* ── 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;
  --space-24: 6rem;

  /* ── BORDES ── */
  --radio-tarjeta: 0.25rem;
  --radio-control: 0.375rem;
  --radius-xs:   0.25rem;
  --radius-sm:   0.375rem;
  --radius-md:   0.625rem;
  --radius-lg:   0.875rem;
  --radius-xl:   1.25rem;
  --radius-2xl:  1.75rem;
  --radius-full: 9999px;

  /* ── SOMBRAS ── */
  --shadow-xs:  0 1px 2px rgba(15,23,42,0.04);
  --shadow-sm:  0 1px 3px rgba(15,23,42,0.08), 0 1px 2px rgba(15,23,42,0.04);
  --shadow-md:  0 4px 12px rgba(15,23,42,0.08), 0 2px 4px rgba(15,23,42,0.04);
  --shadow-lg:  0 8px 24px rgba(15,23,42,0.10), 0 4px 8px rgba(15,23,42,0.06);
  --shadow-xl:  0 16px 40px rgba(15,23,42,0.12), 0 8px 16px rgba(15,23,42,0.06);
  --shadow-2xl: 0 24px 64px rgba(15,23,42,0.16);
  --shadow-glow: 0 0 0 3px var(--color-primary-glow);
  --shadow-accent-glow: 0 4px 20px var(--marca-a25);

  /* ── TRANSICIONES ── */
  --transition-fast:   120ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:   200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   350ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── LAYOUT ── */
  --navbar-height:           56px;
  --sidebar-width:           220px;
  --margin-left-width:       220px;
  --sidebar-collapsed-width: 60px;
  --content-max-width:       1320px;

  /* ── Z-INDEX ── */
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-toast:     500;
  --z-onboarding:600;
}