/* SISTEMA SEBA — Base CSS
   Söhne · Paleta Stripe · Reset y tipografía.
*/

:root {
  /* ── Fondos ───────────────────────────────────────────────────────────── */
  --color-bg:           #F4F6F9;
  --color-surface:      #FFFFFF;
  --color-border:       #E2E8EF;
  --color-border-hover: #BEC8D4;

  /* ── Texto ────────────────────────────────────────────────────────────── */
  --color-text-primary:   #0A1929;
  --color-text-secondary: #3D5166;
  --color-text-hint:      #7A90A4;

  /* ── Acento global — Stripe Blurple ─────────────────────────────────── */
  --color-accent:        #635BFF;
  --color-accent-hover:  #4E46E5;
  --color-accent-light:  rgba(99,91,255,0.08);
  --color-accent-border: rgba(99,91,255,0.20);

  /* ── Semánticos ──────────────────────────────────────────────────────── */
  --color-success:        #16A34A;
  --color-success-light:  rgba(22,163,74,0.08);
  --color-success-border: rgba(22,163,74,0.22);

  --color-danger:        #DC2626;
  --color-danger-light:  rgba(220,38,38,0.08);
  --color-danger-border: rgba(220,38,38,0.22);

  --color-warning:        #D97706;
  --color-warning-light:  rgba(217,119,6,0.08);
  --color-warning-border: rgba(217,119,6,0.22);

  /* ── Colores de módulo ───────────────────────────────────────────────── */
  --color-finanzas:        #16A34A;
  --color-finanzas-light:  rgba(22,163,74,0.08);
  --color-finanzas-border: rgba(22,163,74,0.22);

  --color-sebascodes:        #635BFF;
  --color-sebascodes-light:  rgba(99,91,255,0.08);
  --color-sebascodes-border: rgba(99,91,255,0.20);
  --color-equipo:        #0891B2;
  --color-equipo-light:  rgba(8,145,178,0.08);
  --color-equipo-border: rgba(8,145,178,0.22);

  --color-escort:        #EC4899;
  --color-escort-light:  rgba(236,72,153,0.08);
  --color-escort-border: rgba(236,72,153,0.22);

  /* ── Tipografía ──────────────────────────────────────────────────────── */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-numeric: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── Radios ──────────────────────────────────────────────────────────── */
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  8px;
  --radius-xl:  12px;
  --radius-2xl: 16px;
  --radius-tag: 100px;

  /* ── Sombras ─────────────────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(10,25,41,0.05);
  --shadow-sm: 0 1px 3px rgba(10,25,41,0.07), 0 1px 2px rgba(10,25,41,0.04);
  --shadow-md: 0 4px 12px rgba(10,25,41,0.08), 0 2px 4px rgba(10,25,41,0.04);
  --shadow-lg: 0 8px 24px rgba(10,25,41,0.10), 0 3px 8px rgba(10,25,41,0.05);
  --shadow-xl: 0 20px 48px rgba(10,25,41,0.12), 0 6px 16px rgba(10,25,41,0.06);

  /* ── Transiciones ────────────────────────────────────────────────────── */
  --transition-fast: 0.14s cubic-bezier(0.4,0,0.2,1);
  --transition-base: 0.20s cubic-bezier(0.4,0,0.2,1);
  --transition-slow: 0.28s cubic-bezier(0.4,0,0.2,1);

  --sidebar-w: 230px;
}

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

html, body {
  height: 100%;
  font-family: var(--font-body);
  font-weight: 400;
  background: #FFFFFF;
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 15px;
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea, button { font-family: inherit; }

/* Scrollbar — delgado y sutil */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #D1D9E0; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #B0BAC4; }

/* ── Animaciones globales ── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInBg {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes modalRise {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

/* ── Utilidades globales ── */
.hidden      { display: none !important; }
.text-right  { text-align: right; }
.text-center { text-align: center; }
.text-hint   { color: var(--color-text-hint); }
.text-success { color: var(--color-success); }
.text-danger  { color: var(--color-danger); }