/* ============================================================
   ActualizaSF Design System — Tokens & Base Styles
   Steelblue (#4682B4) · Inter · 4px grid
   ============================================================ */

/* ── 1. Design Tokens ──────────────────────────────────────── */

:root {

  /* ── 1.1 Steelblue palette ────────────────────────────────── */
  --steel-50:  #EDF3F8;
  --steel-100: #D6E3ED;
  --steel-200: #B8CCD9;
  --steel-300: #8BAFC6;
  --steel-400: #5A9AC8;
  --steel-500: #4682B4;   /* primary */
  --steel-600: #3A6F9A;
  --steel-700: #2C5170;
  --steel-800: #1E3A52;
  --steel-900: #152C3F;
  --steel-950: #0D1B28;

  /* ── 1.2 Accent amber (CTAs, badges, highlights) ──────────── */
  --accent-50:  #FFFBEB;
  --accent-100: #FEF3C7;
  --accent-200: #FDE68A;
  --accent-300: #FCD34D;
  --accent-400: #FBBF24;
  --accent-500: #F59E0B;
  --accent-600: #D97706;
  --accent-700: #B45309;

  /* ── 1.3 Slate neutrals ──────────────────────────────────── */
  --slate-50:  #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1E293B;
  --slate-900: #0F172A;

  /* ── 1.4 Semantic colors ─────────────────────────────────── */
  --success-50:  #F0FDF4;
  --success-500: #22C55E;
  --success-600: #16A34A;

  --danger-50:  #FEF2F2;
  --danger-500: #EF4444;
  --danger-600: #DC2626;

  --warning-50:  #FFFBEB;
  --warning-500: #F59E0B;
  --warning-600: #D97706;

  --info-50:  #EFF6FF;
  --info-500: #3B82F6;
  --info-600: #2563EB;

  /* ── 1.5 Typography ──────────────────────────────────────── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.8125rem;  /* 13px */
  --text-base: 0.875rem;   /* 14px */
  --text-lg:   1rem;       /* 16px */
  --text-xl:   1.125rem;   /* 18px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */

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

  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* ── 1.6 Spacing (4px base grid) ─────────────────────────── */
  --space-0:  0;
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */

  /* ── 1.7 Shadows ─────────────────────────────────────────── */
  --shadow-xs:  0 1px 2px  rgba(15, 23, 42, 0.05);
  --shadow-sm:  0 1px 3px  rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md:  0 4px 6px  rgba(15, 23, 42, 0.07), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg:  0 10px 15px rgba(15, 23, 42, 0.08), 0 4px 6px rgba(15, 23, 42, 0.04);
  --shadow-xl:  0 20px 25px rgba(15, 23, 42, 0.10), 0 8px 10px rgba(15, 23, 42, 0.04);

  /* ── 1.8 Border radius ───────────────────────────────────── */
  --radius-sm:   0.25rem;  /*  4px */
  --radius-md:   0.5rem;   /*  8px */
  --radius-lg:   0.75rem;  /* 12px */
  --radius-xl:   1rem;     /* 16px */
  --radius-2xl:  1.5rem;   /* 24px */
  --radius-full: 9999px;

  /* ── 1.9 Transitions ─────────────────────────────────────── */
  --duration-fast:   150ms;
  --duration-normal: 200ms;
  --duration-slow:   300ms;
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);

  /* ── 1.10 Layout ─────────────────────────────────────────── */
  --sidebar-width:     260px;
  --sidebar-collapsed:  72px;
  --navbar-height:      56px;
  --content-max-width: 1400px;

  /* ── 1.11 Z-index scale ──────────────────────────────────── */
  --z-sidebar:  1030;
  --z-backdrop: 1025;
  --z-dropdown: 1050;
  --z-modal:    1055;
  --z-toast:    1090;

  /* ── 2. Bootstrap 5 Overrides ────────────────────────────── */
  --bs-primary:     #4682B4;
  --bs-primary-rgb: 70, 130, 180;
  --bs-body-font-family: var(--font-sans);
  --bs-body-font-size:   var(--text-base);
  --bs-body-color:       var(--slate-800);
  --bs-body-bg:          var(--slate-100);
  --bs-border-radius:    var(--radius-md);
  --bs-border-color:     var(--slate-200);
  --bs-success:          var(--success-500);
  --bs-info:             var(--info-500);
  --bs-warning:          var(--warning-500);
  --bs-danger:           var(--danger-500);

  /* ── 3. Backward Compatibility ───────────────────────────── */
  /* These map old variable names used across site.css & archivos.css
     to the new design tokens. DO NOT REMOVE until all references are migrated. */
  --primary:         var(--steel-500);
  --primary-dark:    var(--steel-600);
  --primary-darker:  var(--steel-700);
  --primary-darkest: var(--steel-800);
  --primary-light:   var(--steel-400);
  --secondary:       #6C8EAD;

  --success: var(--success-500);
  --warning: var(--warning-500);
  --danger:  var(--danger-500);
  --info:    var(--info-500);

  --bg-body:           var(--slate-100);
  --bg-gradient-start: var(--steel-100);
  --bg-gradient-end:   var(--steel-200);
  --text-primary:   var(--steel-800);
  --text-secondary: #4A6278;
  --text-muted:     var(--slate-500);
  --text-light:     #FFFFFF;

  --card-bg:     #FFFFFF;
  --card-border: var(--steel-200);
  --card-shadow: rgba(30, 58, 82, 0.15);
  --navbar-bg:   #FFFFFF;
  --sidebar-bg:  linear-gradient(180deg, var(--steel-700) 0%, var(--steel-800) 100%);

  --glass-bg:     rgba(70, 130, 180, 0.08);
  --glass-border: var(--steel-200);

  --input-bg:           #FFFFFF;
  --input-border:       var(--slate-300);
  --input-focus-border: var(--steel-500);

  --hover-bg:  rgba(70, 130, 180, 0.12);
  --active-bg: rgba(70, 130, 180, 0.20);
}


/* ============================================================
   4. Base Component Styles
   ============================================================ */

/* ── 4.1 Buttons ───────────────────────────────────────────── */

.btn-ds-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  line-height: var(--leading-normal);
  color: #FFFFFF;
  background: var(--steel-500);
  border: 1px solid var(--steel-500);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  text-decoration: none;
}
.btn-ds-primary:hover {
  background: var(--steel-600);
  border-color: var(--steel-600);
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn-ds-primary:active {
  background: var(--steel-700);
  border-color: var(--steel-700);
  transform: translateY(0);
  box-shadow: none;
}
.btn-ds-primary:focus-visible {
  outline: 2px solid var(--steel-500);
  outline-offset: 2px;
}

.btn-ds-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  line-height: var(--leading-normal);
  color: var(--steel-700);
  background: #FFFFFF;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  text-decoration: none;
}
.btn-ds-secondary:hover {
  background: var(--slate-50);
  border-color: var(--slate-400);
  color: var(--steel-800);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.btn-ds-secondary:active {
  background: var(--slate-100);
  transform: translateY(0);
}
.btn-ds-secondary:focus-visible {
  outline: 2px solid var(--steel-500);
  outline-offset: 2px;
}

.btn-ds-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: var(--leading-normal);
  color: var(--slate-600);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  text-decoration: none;
}
.btn-ds-ghost:hover {
  background: var(--slate-100);
  color: var(--slate-800);
}
.btn-ds-ghost:active {
  background: var(--slate-200);
}
.btn-ds-ghost:focus-visible {
  outline: 2px solid var(--steel-500);
  outline-offset: 2px;
}

.btn-ds-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  line-height: var(--leading-normal);
  color: #FFFFFF;
  background: var(--danger-500);
  border: 1px solid var(--danger-500);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  text-decoration: none;
}
.btn-ds-danger:hover {
  background: var(--danger-600);
  border-color: var(--danger-600);
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn-ds-danger:active {
  background: #B91C1C;
  transform: translateY(0);
}
.btn-ds-danger:focus-visible {
  outline: 2px solid var(--danger-500);
  outline-offset: 2px;
}

/* Button sizes */
.btn-ds-sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
}
.btn-ds-lg {
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-base);
}

/* Button loading state */
.btn-ds-loading {
  pointer-events: none;
  opacity: 0.75;
}
.btn-ds-loading .btn-ds-spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radius-full);
  animation: ds-spin 0.6s linear infinite;
}
@keyframes ds-spin {
  to { transform: rotate(360deg); }
}


/* ── 4.2 Form Inputs ──────────────────────────────────────── */

.input-ds {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  color: var(--slate-800);
  background: #FFFFFF;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-default),
              box-shadow var(--duration-fast) var(--ease-default);
}
.input-ds::placeholder {
  color: var(--slate-400);
}
.input-ds:focus {
  outline: none;
  border-color: var(--steel-500);
  box-shadow: 0 0 0 3px rgba(70, 130, 180, 0.15);
}
.input-ds:disabled {
  background: var(--slate-100);
  color: var(--slate-400);
  cursor: not-allowed;
}
.input-ds.is-invalid {
  border-color: var(--danger-500);
}
.input-ds.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

/* Form floating enhancement */
.form-ds-floating {
  position: relative;
}
.form-ds-floating .input-ds {
  padding: 1.625rem var(--space-3) 0.625rem;
  height: 3.5rem;
}
.form-ds-floating label {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1rem var(--space-3);
  font-size: var(--text-sm);
  color: var(--slate-500);
  pointer-events: none;
  transform-origin: 0 0;
  transition: opacity var(--duration-fast) var(--ease-default),
              transform var(--duration-fast) var(--ease-default);
}
.form-ds-floating .input-ds:focus ~ label,
.form-ds-floating .input-ds:not(:placeholder-shown) ~ label {
  opacity: 0.75;
  transform: scale(0.85) translateY(-0.5rem);
}


/* ── 4.3 Badges ────────────────────────────────────────────── */

.badge-ds {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.125rem var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: var(--leading-normal);
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.badge-ds-steel {
  color: var(--steel-700);
  background: var(--steel-50);
}
.badge-ds-success {
  color: var(--success-600);
  background: var(--success-50);
}
.badge-ds-danger {
  color: var(--danger-600);
  background: var(--danger-50);
}
.badge-ds-warning {
  color: var(--warning-600);
  background: var(--warning-50);
}
.badge-ds-info {
  color: var(--info-600);
  background: var(--info-50);
}
.badge-ds-neutral {
  color: var(--slate-600);
  background: var(--slate-100);
}


/* ── 4.4 Cards ─────────────────────────────────────────────── */

.card-ds {
  background: #FFFFFF;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-normal) var(--ease-default);
}
.card-ds:hover {
  box-shadow: var(--shadow-md);
}
.card-ds-header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--slate-200);
}
.card-ds-body {
  padding: var(--space-5);
}
.card-ds-footer {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--slate-100);
  background: var(--slate-50);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}


/* ── 4.5 Utility classes ───────────────────────────────────── */

.text-ds-xs   { font-size: var(--text-xs); }
.text-ds-sm   { font-size: var(--text-sm); }
.text-ds-base { font-size: var(--text-base); }
.text-ds-lg   { font-size: var(--text-lg); }
.text-ds-xl   { font-size: var(--text-xl); }
.text-ds-2xl  { font-size: var(--text-2xl); }

.font-ds-medium   { font-weight: var(--font-medium); }
.font-ds-semibold { font-weight: var(--font-semibold); }
.font-ds-bold     { font-weight: var(--font-bold); }

.text-ds-steel  { color: var(--steel-500); }
.text-ds-muted  { color: var(--slate-500); }
.text-ds-danger { color: var(--danger-500); }

.truncate-ds {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ── 4.6 Animations ───────────────────────────────────────── */

@keyframes ds-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ds-fade-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ds-slide-in-left {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

.animate-ds-fade-in {
  animation: ds-fade-in var(--duration-slow) var(--ease-out) both;
}
.animate-ds-fade-in-up {
  animation: ds-fade-in-up 500ms var(--ease-out) both;
}


/* ============================================================
   5. Typography Reset
   ============================================================ */

/* Font-smoothing para Inter (crítico en Windows) */
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--slate-800);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Headings con peso y tracking definidos */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  color: var(--slate-900);
  letter-spacing: -0.025em;
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-base); }
h6 { font-size: var(--text-sm); }

/* Párrafos y texto corrido */
p { line-height: var(--leading-relaxed); color: var(--slate-700); }

/* Labels de formulario más definidos */
label, .form-label {
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
  color: var(--slate-700);
}

/* Tablas: texto más legible */
th { font-weight: var(--font-semibold); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.5px; color: var(--slate-600); }
td { font-size: var(--text-sm); color: var(--slate-700); }

/* Small/muted text */
small, .text-muted { font-size: var(--text-xs); }

/* Strong text */
strong, b { font-weight: var(--font-semibold); }