/* ============================================================
   LevelUp · tokens
   Base: pack a_brainClaude/05_design-system/mkmedico-ui (tokens comunes .dsmk-*)
   + temas data-theme="levelup-light" (claro, default) y "levelup" (oscuro),
   con las superficies y el eje azul de mkmedico-v2. Si llega una guía de marca distinta, se cambia SOLO este bloque.
   ============================================================ */
:root {
  --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: crece con la raíz fluida de html (biblia, mkmedico-ui §Tipografía fluida). */
  --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;

  --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;

  --dsmk-r-xs: 4px; --dsmk-r-sm: 8px; --dsmk-r-md: 12px; --dsmk-r-lg: 16px; --dsmk-r-xl: 24px; --dsmk-r-pill: 999px;

  --dsmk-t-fast: 120ms ease; --dsmk-t-base: 150ms ease; --dsmk-t-slow: 250ms ease;
  --dsmk-ease: cubic-bezier(.16, 1, .3, 1);

  --dsmk-container: 1200px; --dsmk-container-pad: 24px;
  /* Anchos de layout en px, patrón Morris: en pantallas grandes crece la letra, no el ancho. */
  --dsmk-sidebar-w: 240px; --dsmk-content-max: 1200px;
}

/* ─────────── TEMA · levelup (oscuro, minimal, cinematográfico) ─────────── */
[data-theme="levelup"] {
  color-scheme: dark;

  /* Superficies: negro violáceo al estilo morrisopazo.com (#1a1030 como fondo elevado) */
  --dsmk-bg:        #0A0713;
  --dsmk-bg-2:      #0F0A1C;
  --dsmk-surface:   #150F27;
  --dsmk-surface-2: #1A1030;
  --dsmk-overlay:   rgba(10, 7, 19, .72);

  /* Ink invertido: 900 = texto más fuerte, 50 = tinte de fondo más sutil */
  --dsmk-ink-900: #f7f5fb; --dsmk-ink-800: #e4dff0; --dsmk-ink-700: #bdb6d0;
  --dsmk-ink-600: #9a92b3; --dsmk-ink-500: #81789d; --dsmk-ink-400: #605878;
  --dsmk-ink-300: #40385a;
  --dsmk-ink-200: rgba(255, 255, 255, .09);   /* hairlines */
  --dsmk-ink-100: rgba(255, 255, 255, .055);  /* hover */
  --dsmk-ink-50:  rgba(255, 255, 255, .03);

  /* Paleta de marca Morris (morrisopazo.com): magenta → violeta → turquesa */
  --dsmk-brand-700: #d7bfff;   /* texto de marca sobre tinte oscuro */
  --dsmk-brand-600: #8638eb;   /* primario (botones) */
  --dsmk-brand-500: #b57bff;   /* acento / enlaces */
  --dsmk-brand-400: #e30cc9;   /* magenta */
  --dsmk-teal:      #2aeac3;   /* turquesa */
  --dsmk-brand-100: rgba(134, 56, 235, .30);
  --dsmk-brand-50:  rgba(134, 56, 235, .14);
  --dsmk-brand-grad: linear-gradient(90deg, #e30cc9 0%, #8638eb 50%, #2aeac3 100%);
  --dsmk-on-brand: #ffffff;

  --dsmk-success-600: #34d399; --dsmk-success-500: #22c55e; --dsmk-success-50: rgba(34, 197, 94, .12);
  --dsmk-amber-600: #fbbf24;   --dsmk-amber-500: #f59e0b;   --dsmk-amber-50: rgba(245, 158, 11, .12);
  --dsmk-error-600: #ff7a6e;   --dsmk-error-500: #ff5a4d;   --dsmk-error-50: rgba(255, 90, 77, .12);

  --dsmk-sh-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --dsmk-sh-md: 0 8px 24px -8px rgba(0, 0, 0, .45);
  --dsmk-sh-lg: 0 18px 40px -12px rgba(0, 0, 0, .55);
  --dsmk-sh-glow: 0 16px 44px rgba(134, 56, 235, .38);
  --dsmk-sh-focus: 0 0 0 3px rgba(181, 123, 255, .35);
  --dsmk-selection: rgba(134, 56, 235, .38);

  /* Propios de LevelUp: vidrio de barras sticky y fuerza de la aurora */
  --lu-glass:        rgba(10, 7, 19, .78);
  --lu-glass-strong: rgba(10, 7, 19, .86);
  --lu-aurora-op:    .55;
}

/* ─────────── TEMA · levelup-light (claro, default; admin siempre) ───────────
   Inversión del tema oscuro: mismas claves, ink de oscuro a claro, eje azul
   oscurecido para mantener contraste AA sobre blanco. */
[data-theme="levelup-light"] {
  color-scheme: light;

  --dsmk-bg:        #ffffff;
  --dsmk-bg-2:      #F7F5FB;
  --dsmk-surface:   #ffffff;
  --dsmk-surface-2: #F4F1FA;
  --dsmk-overlay:   rgba(26, 16, 48, .45);

  --dsmk-ink-900: #111111; --dsmk-ink-800: #222222; --dsmk-ink-700: #333333;
  --dsmk-ink-600: #54595F; --dsmk-ink-500: #7A7A7A; --dsmk-ink-400: #A3A6AB;
  --dsmk-ink-300: #D5D8DC;
  --dsmk-ink-200: rgba(26, 16, 48, .11);
  --dsmk-ink-100: rgba(26, 16, 48, .06);
  --dsmk-ink-50:  rgba(26, 16, 48, .03);

  --dsmk-brand-700: #5a1fb5;
  --dsmk-brand-600: #8638eb;
  --dsmk-brand-500: #7a2fd8;
  --dsmk-brand-400: #e30cc9;   /* magenta */
  --dsmk-teal:      #2aeac3;   /* turquesa */
  --dsmk-brand-100: rgba(134, 56, 235, .18);
  --dsmk-brand-50:  rgba(134, 56, 235, .07);
  --dsmk-brand-grad: linear-gradient(90deg, #e30cc9 0%, #8638eb 50%, #2aeac3 100%);
  --dsmk-on-brand: #ffffff;

  --dsmk-success-600: #15803d; --dsmk-success-500: #22c55e; --dsmk-success-50: rgba(34, 197, 94, .10);
  --dsmk-amber-600: #b45309;   --dsmk-amber-500: #f59e0b;   --dsmk-amber-50: rgba(245, 158, 11, .12);
  --dsmk-error-600: #dc2626;   --dsmk-error-500: #ef4444;   --dsmk-error-50: rgba(239, 68, 68, .08);

  --dsmk-sh-sm: 0 1px 2px rgba(26,16,48, .06);
  --dsmk-sh-md: 0 8px 24px -8px rgba(26,16,48, .14);
  --dsmk-sh-lg: 0 18px 40px -12px rgba(26,16,48, .18);
  --dsmk-sh-glow: 0 16px 44px rgba(134, 56, 235, .22);
  --dsmk-sh-focus: 0 0 0 3px rgba(134, 56, 235, .25);
  --dsmk-selection: rgba(134, 56, 235, .20);

  --lu-glass:        rgba(255, 255, 255, .82);
  --lu-glass-strong: rgba(255, 255, 255, .90);
  --lu-aurora-op:    .28;
}

*, *::before, *::after { box-sizing: border-box; }
/* Raíz fluida: 100 % hasta 1366 px, crece hasta 121,25 % (~19,4 px) a 1920 px. Nunca fijar font-size en html desde otro CSS. */
html {
  font-size: clamp(100%, calc(100% + (100vw - 1366px) * 0.0068), 121.25%);
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: var(--dsmk-font-body);
  font-size: var(--dsmk-fs-base);
  line-height: var(--dsmk-lh-normal);
  color: var(--dsmk-ink-800);
  background: var(--dsmk-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--dsmk-brand-500); 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); }
h1, h2, h3, h4 { color: var(--dsmk-ink-900); margin: 0; letter-spacing: -.012em; line-height: var(--dsmk-lh-snug); }
p { margin: 0; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--dsmk-brand-500); outline-offset: 2px; border-radius: 4px; }

.material-symbols-rounded {
  font-family: "Material Symbols Rounded"; font-weight: normal; font-style: normal; font-size: 1.25rem; line-height: 1;
  letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; direction: ltr;
  -webkit-font-smoothing: antialiased; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; vertical-align: middle;
}
.material-symbols-rounded.fill { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }

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