/* ============================================================
   MEDICONECTA PY — Design Tokens
   Colors, Typography, Radii, Shadows, Motion
   ============================================================ */

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

:root {
  /* ---------- BRAND (Pantone 908 U — celeste médico) ---------- */
  --brand:              #4cb1dc;   /* primary — acciones, highlights, barras activas */
  --brand-dark:         #2a8cb8;   /* gradient end (login logo), deep states */
  --brand-hover:        #3a9ac4;   /* hover, shadows */
  --brand-light:        #e8f4fa;   /* sidebar active bg suave, tinted icon bg */
  --brand-50:           #f1f9fd;

  /* Semantic aliases */
  --primary:            var(--brand);
  --primary-dark:       var(--brand-hover);
  --primary-light:      var(--brand-light);

  /* ---------- SURFACES ---------- */
  --bg-canvas:          #f6f7f8;   /* main scroll canvas */
  --bg-surface:         #ffffff;   /* cards, sidebar, header */
  --bg-subtle:          #f8fafc;   /* slate-50 — table headers, hover zones */
  --bg-muted:           #f1f5f9;   /* slate-100 */

  /* Login / dark backdrop */
  --bg-login:           linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);

  /* ---------- SLATE (neutral foundation) ---------- */
  --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;

  /* Text aliases */
  --fg-strong:          var(--slate-800);   /* títulos card */
  --fg-body:            var(--slate-700);   /* body */
  --fg-muted:           var(--slate-500);
  --fg-subtle:          var(--slate-400);   /* labels uppercase */
  --fg-inverse:         #ffffff;
  --border-default:     var(--slate-200);
  --border-subtle:      var(--slate-100);

  /* ---------- SEMANTIC STATES (50/100/400/500/600/700) ---------- */
  /* emerald — activo / success / aprobado */
  --emerald-50:  #ecfdf5;  --emerald-100: #d1fae5;
  --emerald-400: #34d399;  --emerald-500: #10b981;
  --emerald-600: #059669;  --emerald-700: #047857;

  /* amber — pendiente / warning / urgente */
  --amber-50:  #fffbeb;  --amber-100: #fef3c7;
  --amber-400: #fbbf24;  --amber-500: #f59e0b;
  --amber-600: #d97706;  --amber-700: #b45309;

  /* red — rechazado / error / docs vencidos */
  --red-50:  #fef2f2;  --red-100: #fee2e2;
  --red-400: #f87171;  --red-500: #ef4444;
  --red-600: #dc2626;  --red-700: #b91c1c;

  /* violet — contrato / Mediconecta / información */
  --violet-50:  #f5f3ff;  --violet-100: #ede9fe;
  --violet-400: #a78bfa;  --violet-500: #8b5cf6;
  --violet-600: #7c3aed;  --violet-700: #6d28d9;

  /* teal — Oftalmología / accent */
  --teal-50:  #f0fdfa;  --teal-100: #ccfbf1;
  --teal-400: #2dd4bf;  --teal-500: #14b8a6;
  --teal-600: #0d9488;  --teal-700: #0f766e;

  /* pink — Ginecología */
  --pink-50:  #fdf2f8;  --pink-100: #fce7f3;
  --pink-400: #f472b6;  --pink-500: #ec4899;
  --pink-600: #db2777;  --pink-700: #be185d;

  /* orange — Traumatología */
  --orange-50:  #fff7ed;  --orange-100: #ffedd5;
  --orange-400: #fb923c;  --orange-500: #f97316;
  --orange-600: #ea580c;  --orange-700: #c2410c;

  /* ---------- SPECIALTY SEMANTIC MAP ---------- */
  --esp-cardiologia:    var(--red-400);
  --esp-clinica:        var(--brand);
  --esp-ginecologia:    var(--pink-400);
  --esp-traumatologia:  var(--orange-400);
  --esp-pediatria:      var(--violet-400);
  --esp-oftalmologia:   var(--teal-400);

  /* ---------- TYPOGRAPHY ---------- */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Scale (matches tailwind-style usage in spec) */
  --text-2xs:   10px;   --leading-2xs:  14px;
  --text-xs:    12px;   --leading-xs:   16px;
  --text-sm:    14px;   --leading-sm:   20px;
  --text-base:  16px;   --leading-base: 24px;
  --text-lg:    18px;   --leading-lg:   28px;
  --text-xl:    20px;   --leading-xl:   28px;
  --text-2xl:   24px;   --leading-2xl:  32px;
  --text-3xl:   30px;   --leading-3xl:  36px;

  /* Weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold:800;
  --fw-black:    900;

  /* ---------- RADIUS ---------- */
  --radius-sm:   0.25rem;   /* 4px  — default, badges */
  --radius-md:   0.375rem;  /* 6px  — sidebar number badge */
  --radius-lg:   0.5rem;    /* 8px  — buttons, sidebar items */
  --radius-xl:   0.75rem;   /* 12px — cards */
  --radius-2xl:  1rem;      /* 16px — hero cards, modals */
  --radius-full: 9999px;

  /* ---------- SHADOW ELEVATION ---------- */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.12);
  --shadow-xl:  0 16px 40px rgba(15,23,42,0.16);
  --shadow-brand: 0 6px 20px rgba(76,177,220,0.25);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.04);

  /* ---------- SPACING (4px base) ---------- */
  --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;

  /* ---------- LAYOUT ---------- */
  --header-h:      56px;
  --sidebar-w:     280px;
  --content-max:   1440px;

  /* ---------- MOTION ---------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --dur-fast:      120ms;
  --dur-base:      200ms;
  --dur-slow:      500ms;
  --dur-slower:    800ms;
}

/* ============================================================
   BASE / SEMANTIC STYLES
   ============================================================ */

html, body {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--fg-body);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Screen titles: text-2xl/3xl font-extrabold tracking-tight */
.t-display, h1.display {
  font-size: var(--text-3xl);
  line-height: var(--leading-3xl);
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em;
  color: var(--slate-900);
}
.t-title, h2.title {
  font-size: var(--text-2xl);
  line-height: var(--leading-2xl);
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em;
  color: var(--slate-900);
}
/* Card titles: text-sm font-bold slate-800 */
.t-card-title, h3.card-title {
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--fg-strong);
  letter-spacing: -0.01em;
}
/* KPI number */
.t-kpi {
  font-size: var(--text-2xl);
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em;
  color: var(--slate-900);
  font-variant-numeric: tabular-nums;
}
/* Secondary labels: uppercase tracking-wider */
.t-label {
  font-size: var(--text-2xs);
  line-height: var(--leading-2xs);
  color: var(--fg-subtle);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
/* Body */
.t-body { font-size: var(--text-sm); color: var(--fg-body); }
.t-body-xs { font-size: var(--text-xs); color: var(--fg-body); }
.t-mono { font-family: var(--font-mono); font-feature-settings: 'tnum' 1; }

/* ============================================================
   ANIMATIONS (globals)
   ============================================================ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes countUp {
  from { opacity: 0; transform: translateY(4px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes slideRight {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}
@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.5); }
  50%      { box-shadow: 0 0 0 6px rgba(16,185,129,0); }
}
@keyframes drawLine {
  from { stroke-dashoffset: 400; }
  to   { stroke-dashoffset: 0; }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@keyframes shake {
  0%, 100%           { transform: translateX(0); }
  20%, 60%           { transform: translateX(-6px); }
  40%, 80%           { transform: translateX(6px); }
}
@keyframes pulseRing {
  0%   { box-shadow: 0 0 0 0 rgba(76,177,220,0.6); }
  100% { box-shadow: 0 0 0 18px rgba(76,177,220,0); }
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes toastOut {
  to { opacity: 0; transform: translateY(12px); }
}
@keyframes dropIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.fade-up { animation: fadeInUp var(--dur-slow) var(--ease-out) both; }
.count-up { animation: countUp 600ms var(--ease-out) both; }
.bar-fill { animation: slideRight var(--dur-slower) var(--ease-out) both; }
.live-dot { animation: pulseDot 2s ease-in-out infinite; }
.spark    { animation: drawLine 1200ms var(--ease-out) both; }

.delay-1 { animation-delay: 0.05s; }
.delay-2 { animation-delay: 0.10s; }
.delay-3 { animation-delay: 0.15s; }
.delay-4 { animation-delay: 0.20s; }
.delay-5 { animation-delay: 0.25s; }
.delay-6 { animation-delay: 0.30s; }
.delay-7 { animation-delay: 0.35s; }
.delay-8 { animation-delay: 0.40s; }