/* ══════════════════════════════════════════════════════════════════════════════
   MediDirect · Design System (fuente única de verdad de tokens + componentes)
   ------------------------------------------------------------------------------
   Los COLORES de marca los inyecta base.html por paleta (paletas.py → tema_de →
   :root{ --azul --oro --rojo --card --paper --texto ... }). Cambiar la paleta del
   médico re-tiñe toda la app. Este archivo NO redefine esos colores: los REUSA.

   Qué aporta (todo ADITIVO — no pisa nada que ya exista):
   1) Tokens que hoy son números mágicos repetidos inline: tipografía, espaciado,
      radios, sombras, y el semáforo clínico (semántico y fijo).
   2) Componentes reutilizables con prefijo .ds- (opt-in): no chocan con clases
      existentes; una página los adopta cuando quiere.

   NOTA de vocabulario: las páginas nuevas usan nombres en inglés (--navy/--gold/--red)
   y la app usa la paleta en español (--azul/--oro/--rojo). La UNIFICACIÓN se hace
   página por página al migrar (con verificación visual), NO aquí — para no re-teñir
   nada por accidente. Por eso las clases .ds-* usan las variables de base con respaldo.
   ══════════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Tipografía ── */
  --disp: 'Plus Jakarta Sans','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; /* titulares/marca */
  --sans: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;      /* cuerpo */
  --fs-xs:9px; --fs-sm:12px; --fs-base:14px; --fs-lg:17px; --fs-xl:22px; --fs-2xl:28px;

  /* ── Espaciado (escala 4px) ── */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-8:48px;

  /* ── Radios ── */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-pill:999px;

  /* ── Sombras ── */
  --sh-sm:0 1px 3px rgba(24,43,92,.08);
  --sh-md:0 4px 16px rgba(24,43,92,.10);
  --sh-lg:0 12px 32px rgba(24,43,92,.14);

  /* ── Semáforo clínico (semántico y FIJO — no depende de la paleta) ── */
  --sem-baja:#3c7a5e; --sem-intermedia:#d09a1e; --sem-alta:#c0392b; --sem-critica:#7a1f16;
  --sem-baja-bg:#e6f6ec; --sem-intermedia-bg:#fdf3d9; --sem-alta-bg:#fbe3d6;

  /* ── Neutros de UI (FIJOS — no dependen de la paleta de marca) ──
     Son los grises/rojo que hoy están hardcodeados inline en toda la app (números
     mágicos). Estos tokens conservan EXACTAMENTE esos valores, así migrar una página
     a ellos es byte-idéntico; y quedan como fuente única para bordes/fondos/texto tenue. */
  --ui-borde:#e2e6ef;        /* borde/hairline de tarjetas, inputs, tablas (uso masivo) */
  --ui-fondo-suave:#f3f6fb;  /* fondo suave de inputs/paneles */
  --ui-ink:#41506b;          /* texto tenue primario */
  --ui-ink-2:#5d6a80;        /* texto tenue secundario */
  --ui-rojo:#b3261e;         /* rojo de alerta/peligro para UI (distinto del semáforo/marca) */
}

/* ══════════════════════════════════════════════════════════════════════════════
   Componentes reutilizables (opt-in · prefijo .ds-)
   Usan las variables de marca de base.html (--azul/--oro/--rojo) con respaldo
   institucional, así funcionan tal cual en cualquier página del panel.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Superficies — ALINEADAS al .card del panel (misma franja dorada superior, radio 10, sombra
   y margen) para que adoptar .ds-card sea un drop-in INVISIBLE respecto a la .card de hoy. */
.ds-card{ background:var(--card,#fff); border:1px solid var(--linea,#e2e5ec);
  border-top:3px solid var(--oro,#d09a1e); border-radius:var(--r-md); padding:20px 22px;
  box-shadow:0 1px 4px rgba(20,30,60,.05); margin-bottom:var(--sp-4); }
.ds-card--tint{ background:var(--azul-tenue,#f4f6fb); }
.ds-card--plain{ border-top:1px solid var(--linea,#e2e5ec); }   /* variante sin la franja dorada */

/* Botones — ALINEADOS a .btn / .btn2 / .btn-oro del panel (radio 7, peso 800, mismos hover)
   para que .ds-btn* sea drop-in invisible. Cada variante corrige su hover (si no, heredaría el navy). */
.ds-btn{ font:inherit; font-weight:800; font-size:var(--fs-base); line-height:1;
  border:none; border-radius:7px; padding:10px 20px; cursor:pointer;
  background:var(--azul,#182b5c); color:#fff; text-decoration:none; display:inline-flex;
  align-items:center; gap:var(--sp-2); transition:background .15s; }
.ds-btn:hover{ background:#16264c; }
.ds-btn--ghost{ background:#fff; border:1px solid var(--azul,#182b5c); color:var(--azul,#182b5c);
  font-weight:700; font-size:13.5px; padding:9px 16px; }
.ds-btn--ghost:hover{ background:var(--azul-tenue,#eceef1); }
.ds-btn--gold{ background:var(--oro,#d09a1e); color:#1a1a1a; font-size:13.5px; padding:9px 16px; }
.ds-btn--gold:hover{ background:var(--oro,#d09a1e); }            /* .btn-oro no cambia en hover */
.ds-btn--danger{ background:none; border:1px solid #d8b4b0; color:#a23b2e; font-weight:700; }
.ds-btn--danger:hover{ background:rgba(178,38,30,.06); }
.ds-btn--sm{ padding:5px 11px; font-size:var(--fs-sm); }

/* Chips y etiquetas */
.ds-chip{ display:inline-flex; align-items:center; gap:var(--sp-1); font-size:var(--fs-sm);
  font-weight:700; border-radius:var(--r-pill); padding:3px 10px;
  background:rgba(24,43,92,.06); color:var(--azul,#182b5c); }
.ds-tag{ display:inline-block; font-size:var(--fs-xs); font-weight:800; text-transform:uppercase;
  letter-spacing:.03em; border-radius:5px; padding:2px 7px; background:rgba(24,43,92,.08); color:var(--azul,#182b5c); }

/* Eyebrow / rótulo de sección */
.ds-eyebrow{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--rojo,#c0392b); }

/* Semáforo (pastilla de categoría clínica) */
.ds-sem{ display:inline-block; font-size:var(--fs-xs); font-weight:800; text-transform:uppercase;
  letter-spacing:.03em; border-radius:5px; padding:2px 8px; color:#fff; }
.ds-sem-baja{ background:var(--sem-baja); }
.ds-sem-intermedia{ background:var(--sem-intermedia); }
.ds-sem-alta{ background:var(--sem-alta); }
.ds-sem-critica{ background:var(--sem-critica); }

/* Aviso de éxito (p. ej. "✓ Enviado a tu médico") */
.ds-ok{ background:var(--sem-baja-bg); border:1px solid #b7e0c6; color:#155e3b;
  border-radius:var(--r-md); padding:12px 14px; font-weight:700; text-align:center; }

/* Barra tricolor de marca (membrete) */
.ds-tricolor{ display:flex; height:6px; border-radius:var(--r-pill); overflow:hidden; }
.ds-tricolor > i{ display:block; height:100%; }
.ds-tricolor > i:nth-child(1){ flex:1; background:var(--azul,#182b5c); }
.ds-tricolor > i:nth-child(2){ width:34px; background:var(--rojo,#c0392b); }
.ds-tricolor > i:nth-child(3){ width:34px; background:var(--oro,#d09a1e); }