/* ============================================================
   UI System · Multi-tema
   Componentes del pack A (refresh-system.css / EnConsultaMédica)
   + tipografía del pack B (system fonts, mkmedico-v2)
   + paleta variable por proyecto.

   Uso:
   1. Cargar este archivo en el <head> del proyecto.
   2. Setear el tema en el <body>: data-theme="mkmedico"|"enconsultamedica"|"efemerides"
   3. Cargar iconos Material Symbols Outlined (link separado en <head>).
   ============================================================ */

:root {
  /* ─────────── Tipografía (idéntica en todos los temas) ─────────── */
  --dsmk-font-body: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --dsmk-font-mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;

  /* Escala en rem (base 16 px): crece con la raíz fluida de `html` (ver "Base recomendada").
     Equivalencias en un notebook: xs 12 · sm 13 · base 15 · md 16 · lg 18 · xl 22 · 2xl 28 · 3xl 38 · 4xl 48 px. */
  --dsmk-fs-xs:   0.75rem;
  --dsmk-fs-sm:   0.8125rem;
  --dsmk-fs-base: 0.9375rem;
  --dsmk-fs-md:   1rem;
  --dsmk-fs-lg:   1.125rem;
  --dsmk-fs-xl:   1.375rem;
  --dsmk-fs-2xl:  1.75rem;
  --dsmk-fs-3xl:  2.375rem;
  --dsmk-fs-4xl:  3rem;

  --dsmk-lh-tight:   1.12;
  --dsmk-lh-snug:    1.30;
  --dsmk-lh-normal:  1.50;
  --dsmk-lh-relaxed: 1.65;

  /* ─────────── Espaciado ─────────── */
  --dsmk-sp-1:  4px;   --dsmk-sp-2:  8px;   --dsmk-sp-3:  12px;  --dsmk-sp-4:  16px;
  --dsmk-sp-5:  20px;  --dsmk-sp-6:  24px;  --dsmk-sp-8:  32px;  --dsmk-sp-10: 40px;
  --dsmk-sp-12: 48px;  --dsmk-sp-16: 64px;  --dsmk-sp-20: 80px;

  /* ─────────── Radios ─────────── */
  --dsmk-r-xs:   4px;
  --dsmk-r-sm:   8px;
  --dsmk-r-md:   12px;  /* inputs, cards */
  --dsmk-r-lg:   16px;  /* cards grandes */
  --dsmk-r-xl:   24px;
  --dsmk-r-pill: 999px;

  /* ─────────── Motion ─────────── */
  --dsmk-t-fast: 120ms ease;
  --dsmk-t-base: 150ms ease;
  --dsmk-t-slow: 250ms ease;

  /* ─────────── Container ─────────── */
  --dsmk-container:     1440px;
  --dsmk-container-pad: 32px;
  /* Apps admin (patrón Morris / team): menú lateral fijo + contenido centrado con ancho de notebook. */
  --dsmk-sidebar-w:     240px;
  --dsmk-content-max:   1200px;
}

/* ─────────── TEMA · mkmedico (agencia marketing médico) ─────────── */
[data-theme="mkmedico"] {
  --dsmk-ink-900: #0b1220; --dsmk-ink-800: #1a2236; --dsmk-ink-700: #334155;
  --dsmk-ink-600: #4a5568; --dsmk-ink-500: #6b7688; --dsmk-ink-400: #9aa4b5;
  --dsmk-ink-300: #cbd5e1; --dsmk-ink-200: #e4e8ef; --dsmk-ink-100: #f2f4f8; --dsmk-ink-50: #f8fafc;

  --dsmk-brand-700: #1B5C87;  --dsmk-brand-600: #2186C6;  --dsmk-brand-500: #3BB7E8;
  --dsmk-brand-100: #d6ecfa;  --dsmk-brand-50:  #eaf6fd;
  --dsmk-brand-grad: linear-gradient(100deg, #3BB7E8, #2186C6 48%, #1B5C87);

  --dsmk-success-600: #059669; --dsmk-success-500: #10b981; --dsmk-success-50: #ecfdf5;
  --dsmk-amber-500:   #f59e0b; --dsmk-amber-50:    #fffbeb;
  --dsmk-error-600:   #dc2626; --dsmk-error-50:    #fef2f2;

  --dsmk-sh-sm: 0 1px 2px rgba(11,18,32,.04), 0 1px 1px rgba(11,18,32,.03);
  --dsmk-sh-md: 0 4px 12px rgba(11,18,32,.06), 0 2px 4px rgba(11,18,32,.04);
  --dsmk-sh-lg: 0 12px 40px rgba(11,18,32,.08), 0 4px 12px rgba(11,18,32,.04);
  --dsmk-sh-xl: 0 24px 60px rgba(11,18,32,.10), 0 8px 20px rgba(11,18,32,.05);
  --dsmk-selection: rgba(59,183,232,.28);
}

/* ─────────── TEMA · enconsultamedica (directorio confiable) ─────────── */
[data-theme="enconsultamedica"] {
  --dsmk-ink-900: #0b1220; --dsmk-ink-800: #1a2236; --dsmk-ink-700: #334155;
  --dsmk-ink-600: #4a5568; --dsmk-ink-500: #6b7688; --dsmk-ink-400: #9aa4b5;
  --dsmk-ink-300: #cbd5e1; --dsmk-ink-200: #e4e8ef; --dsmk-ink-100: #f2f4f8; --dsmk-ink-50: #f8fafc;

  --dsmk-brand-700: #1857c9;  --dsmk-brand-600: #1f6feb;  --dsmk-brand-500: #3b82f6;
  --dsmk-brand-100: #dbeafe;  --dsmk-brand-50:  #eff6ff;
  --dsmk-brand-grad: linear-gradient(120deg, #3b82f6, #1f6feb 60%, #1857c9);

  --dsmk-success-700: #047857; --dsmk-success-600: #059669; --dsmk-success-500: #10b981; --dsmk-success-50: #ecfdf5;
  --dsmk-amber-500:   #f59e0b; --dsmk-amber-50:    #fffbeb;
  --dsmk-error-600:   #dc2626; --dsmk-error-50:    #fef2f2;

  --dsmk-sh-sm: 0 1px 2px rgba(11,18,32,.04), 0 1px 1px rgba(11,18,32,.03);
  --dsmk-sh-md: 0 4px 12px rgba(11,18,32,.06), 0 2px 4px rgba(11,18,32,.04);
  --dsmk-sh-lg: 0 12px 40px rgba(11,18,32,.08), 0 4px 12px rgba(11,18,32,.04);
  --dsmk-sh-xl: 0 24px 60px rgba(11,18,32,.10), 0 8px 20px rgba(11,18,32,.05);
  --dsmk-selection: rgba(31,111,235,.20);
}

/* ─────────── TEMA · efemerides (editorial · calendario médico) ─────────── */
[data-theme="efemerides"] {
  --dsmk-ink-900: #1a1614; --dsmk-ink-800: #2a231e; --dsmk-ink-700: #443831;
  --dsmk-ink-600: #5c4d43; --dsmk-ink-500: #7a6a5f; --dsmk-ink-400: #a19487;
  --dsmk-ink-300: #d1c8bf; --dsmk-ink-200: #e8e2dc; --dsmk-ink-100: #f5f1ec; --dsmk-ink-50: #faf7f3;

  --dsmk-brand-700: #0f766e;  --dsmk-brand-600: #0d9488;  --dsmk-brand-500: #14b8a6;
  --dsmk-brand-100: #ccfbf1;  --dsmk-brand-50:  #f0fdfa;
  --dsmk-brand-grad: linear-gradient(120deg, #14b8a6, #0d9488 55%, #0f766e);

  --dsmk-amber-600:   #d97706; --dsmk-amber-500: #f59e0b; --dsmk-amber-50: #fffbeb;
  --dsmk-success-600: #059669; --dsmk-success-500: #10b981; --dsmk-success-50: #ecfdf5;
  --dsmk-error-600:   #dc2626; --dsmk-error-50:   #fef2f2;

  --dsmk-sh-sm: 0 1px 2px rgba(26,22,20,.05), 0 1px 1px rgba(26,22,20,.03);
  --dsmk-sh-md: 0 4px 12px rgba(26,22,20,.07), 0 2px 4px rgba(26,22,20,.04);
  --dsmk-sh-lg: 0 12px 40px rgba(26,22,20,.09), 0 4px 12px rgba(26,22,20,.05);
  --dsmk-sh-xl: 0 24px 60px rgba(26,22,20,.11), 0 8px 20px rgba(26,22,20,.06);
  --dsmk-selection: rgba(13,148,136,.20);
}

/* ─────────── Base recomendada ─────────── */
*, *::before, *::after { box-sizing: border-box; }
/* Tipografía fluida (2026-10-22): la raíz vale 100 % (lo que el usuario tenga en su navegador, 16 px por
   defecto) hasta 1366 px de ancho y crece en suave hasta 121,25 % (~19,4 px) a 1920 px o más. Todo lo que
   esté en rem escala solo; lo que siga en px queda fijo. Los anchos de layout se mantienen en px. */
html {
  font-size: clamp(100%, calc(100% + (100vw - 1366px) * 0.0068), 121.25%);
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
}
body {
  font-family: var(--dsmk-font-body);
  font-size: var(--dsmk-fs-base);
  line-height: var(--dsmk-lh-normal);
  color: var(--dsmk-ink-800);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--dsmk-brand-600); text-decoration: none; transition: color var(--dsmk-t-fast); }
a:hover { color: var(--dsmk-brand-700); }
::selection { background: var(--dsmk-selection); color: var(--dsmk-ink-900); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}