/* ============================================================
   SISTEMA DE FINANZAS INTRA — Design System
   Tokens, variables, reset y tipografia base.
   ============================================================ */

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

/* ─── TOKENS — MODO CLARO (por defecto) ──────────────────── */
:root {
  /* Paleta principal */
  --sf-accent:        #03c4ce;
  --sf-accent-dim:    rgba(3, 196, 206, 0.12);
  --sf-accent-glow:   rgba(3, 196, 206, 0.25);
  --sf-danger:        #fa1622;
  --sf-danger-dim:    rgba(250, 22, 34, 0.10);
  --sf-dark:          #1a1516;
  --sf-dark-80:       rgba(26, 21, 22, 0.80);

  /* Superficies modo claro */
  --sf-bg-base:       #f0f2f5;
  --sf-bg-surface:    #ffffff;
  --sf-bg-sidebar:    #1a1516;
  --sf-bg-elevated:   #ffffff;
  --sf-border:        rgba(26, 21, 22, 0.08);
  --sf-border-accent: rgba(3, 196, 206, 0.35);

  /* Texto modo claro */
  --sf-text-primary:  #1a1516;
  --sf-text-secondary: rgba(26, 21, 22, 0.55);
  --sf-text-muted:    rgba(26, 21, 22, 0.35);
  --sf-text-on-dark:  #ffffff;
  --sf-text-on-dark-dim: rgba(255, 255, 255, 0.60);

  /* Sombras neumorficas */
  --sf-shadow-sm:     4px 4px 10px rgba(0,0,0,0.06), -2px -2px 6px rgba(255,255,255,0.80);
  --sf-shadow-md:     8px 8px 20px rgba(0,0,0,0.08), -4px -4px 12px rgba(255,255,255,0.75);
  --sf-shadow-lg:     12px 12px 32px rgba(0,0,0,0.10), -6px -6px 18px rgba(255,255,255,0.70);
  --sf-shadow-inset:  inset 4px 4px 8px rgba(0,0,0,0.07), inset -2px -2px 6px rgba(255,255,255,0.80);
  --sf-shadow-accent: 0 4px 20px rgba(3, 196, 206, 0.25);

  /* Skeleton shimmer */
  --sf-skeleton-from: #e8eaed;
  --sf-skeleton-to:   #f4f5f7;

  /* Espaciado y forma */
  --sf-radius-sm:     6px;
  --sf-radius-md:     12px;
  --sf-radius-lg:     18px;
  --sf-radius-xl:     24px;
  --sf-radius-full:   9999px;

  /* Sidebar */
  --sf-sidebar-width: 240px;
  --sf-header-height: 68px;

  /* Transiciones */
  --sf-transition:    all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  --sf-transition-fast: all 0.12s ease;

  /* Tipografia */
  --sf-font:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sf-font-mono:     'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
}

/* ─── TOKENS — MODO OSCURO ───────────────────────────────── */
[data-theme="dark"] {
  --sf-bg-base:       #000000;
  --sf-bg-surface:    #0e0e0e;
  --sf-bg-sidebar:    #0a0a0a;
  --sf-bg-elevated:   #181818;
  --sf-border:        rgba(255, 255, 255, 0.08);
  --sf-border-accent: rgba(3, 196, 206, 0.30);

  --sf-text-primary:  #f0f0f0;
  --sf-text-secondary: rgba(240, 240, 240, 0.60);
  --sf-text-muted:    rgba(240, 240, 240, 0.35);
  --sf-text-on-dark:  #f0f0f0;
  --sf-text-on-dark-dim: rgba(240, 240, 240, 0.55);

  --sf-shadow-sm:     0 2px 8px rgba(0,0,0,0.50);
  --sf-shadow-md:     0 4px 20px rgba(0,0,0,0.60);
  --sf-shadow-lg:     0 8px 36px rgba(0,0,0,0.70);
  --sf-shadow-inset:  inset 0 2px 8px rgba(0,0,0,0.50);
  --sf-shadow-accent: 0 4px 24px rgba(3, 196, 206, 0.20);

  --sf-skeleton-from: #1c1c1c;
  --sf-skeleton-to:   #262626;

  --sf-accent-dim:    rgba(3, 196, 206, 0.10);
  --sf-accent-glow:   rgba(3, 196, 206, 0.18);
}

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--sf-font);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--sf-text-primary);
  background-color: var(--sf-bg-base);
  transition: background-color 0.25s ease, color 0.25s ease;
  min-height: 100vh;
}

a {
  color: var(--sf-accent);
  text-decoration: none;
  transition: var(--sf-transition-fast);
}

a:hover { opacity: 0.80; }

img, svg { display: block; max-width: 100%; }

ul, ol { list-style: none; }

button {
  font-family: var(--sf-font);
  cursor: pointer;
  border: none;
  background: none;
}

input, select, textarea {
  font-family: var(--sf-font);
}

/* ─── TIPOGRAFIA ─────────────────────────────────────────── */
.sf-text-xs   { font-size: 0.75rem;   line-height: 1.5; }
.sf-text-sm   { font-size: 0.8125rem; line-height: 1.5; }
.sf-text-base { font-size: 0.9375rem; line-height: 1.6; }
.sf-text-lg   { font-size: 1.0625rem; line-height: 1.5; }
.sf-text-xl   { font-size: 1.25rem;   line-height: 1.4; }
.sf-text-2xl  { font-size: 1.5rem;    line-height: 1.3; }
.sf-text-3xl  { font-size: 1.875rem;  line-height: 1.25; }

.sf-font-400 { font-weight: 400; }
.sf-font-500 { font-weight: 500; }
.sf-font-600 { font-weight: 600; }
.sf-font-700 { font-weight: 700; }

.sf-text-primary   { color: var(--sf-text-primary); }
.sf-text-secondary { color: var(--sf-text-secondary); }
.sf-text-muted     { color: var(--sf-text-muted); }
.sf-text-accent    { color: var(--sf-accent); }
.sf-text-danger    { color: var(--sf-danger); }

/* ─── SKELETON / SHIMMER ─────────────────────────────────── */
@keyframes sf-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}

.sf-skeleton {
  background: linear-gradient(
    90deg,
    var(--sf-skeleton-from) 25%,
    var(--sf-skeleton-to)   50%,
    var(--sf-skeleton-from) 75%
  );
  background-size: 800px 100%;
  animation: sf-shimmer 1.6s infinite linear;
  border-radius: var(--sf-radius-sm);
}

.sf-skeleton-text {
  height: 0.875rem;
  border-radius: var(--sf-radius-full);
}

.sf-skeleton-text--lg  { height: 1.25rem; }
.sf-skeleton-text--sm  { height: 0.625rem; }
.sf-skeleton-circle    { border-radius: 50%; }

/* ─── UTILIDADES ─────────────────────────────────────────── */
.sf-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}