/* ════════════════════════════════════════════════════════════════════════════
 * lk-md.css · LUZOkit Modal language v1.0 · LKMD-2026-05-14
 * ════════════════════════════════════════════════════════════════════════════
 * Aplica el lenguaje visual LUZOkit a cualquier modal de Reservas.
 * Compatible con el wrapper _open() actualizado de reservas-modals.js que
 * renderiza con clases .lk-md-* en lugar de .rs-m-*.
 *
 * Los bodies internos siguen usando .rs-m-field, .rs-m-label, etc (legacy).
 * Este CSS los re-estiliza vía alias dentro de .lk-md-shell para que se vean
 * alineados al lenguaje nuevo sin tocar el HTML de cada modal.
 *
 * Variants disponibles: brand (default) · amber · red
 *   - El header tinta su gradient con --acc-soft
 *   - El botón .rs-m-btn--primary toma --acc como fondo
 *   - El shadow ring exterior toma --acc-soft
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── TOKENS · alias del sistema actual + extensiones LUZOkit ─────────────── */
:root,
[data-theme="light"] {
  --lk-md-bg-card     : var(--bg-card, #ffffff);
  --lk-md-bg-surface  : var(--bg-surface, #f8fafc);
  --lk-md-bg-hover    : var(--bg-hover, rgba(0,0,0,.04));
  --lk-md-text-primary: var(--tx-base, #0f172a);
  --lk-md-text-sec    : var(--tx-dim, #475569);
  --lk-md-text-ter    : var(--tx-muted, #94a3b8);
  --lk-md-border      : var(--border, rgba(0,0,0,.10));
  --lk-md-border-soft : rgba(0,0,0,.05);
  --lk-md-brand       : var(--c-brand, #6d28d9);
  --lk-md-brand-soft  : rgba(109,40,217,.12);
  --lk-md-brand-border: rgba(109,40,217,.25);
  --lk-md-amber       : var(--tx-amber, #d97706);
  --lk-md-amber-soft  : rgba(217,119,6,.10);
  --lk-md-amber-border: rgba(217,119,6,.30);
  --lk-md-amber-ct-tx : #ffffff;
  --lk-md-red         : var(--tx-red, #dc2626);
  --lk-md-red-soft    : rgba(220,38,38,.10);
  --lk-md-red-border  : rgba(220,38,38,.30);
  --lk-md-green       : var(--tx-green, #16a34a);
  --lk-md-backdrop    : rgba(15,23,42,0.40);
}
[data-theme="dark"] {
  --lk-md-bg-card     : #1e1e1e;
  --lk-md-bg-surface  : #181818;
  --lk-md-bg-hover    : rgba(255,255,255,.06);
  --lk-md-text-primary: #e8e8e8;
  --lk-md-text-sec    : #a0a0a0;
  --lk-md-text-ter    : #6e7681;
  --lk-md-border      : rgba(255,255,255,.10);
  --lk-md-border-soft : rgba(255,255,255,.05);
  --lk-md-brand       : #8b5cf6;
  --lk-md-brand-soft  : rgba(139,92,246,.20);
  --lk-md-brand-border: rgba(139,92,246,.30);
  --lk-md-amber       : #EF9F27;
  --lk-md-amber-soft  : rgba(186,117,23,.12);
  --lk-md-amber-border: rgba(186,117,23,.28);
  --lk-md-amber-ct-tx : #1a1305;
  --lk-md-red         : #E24B4A;
  --lk-md-red-soft    : rgba(163,45,45,.10);
  --lk-md-red-border  : rgba(226,75,74,.30);
  --lk-md-green       : #5DCAA5;
  --lk-md-backdrop    : rgba(0,0,0,0.55);
}
[data-theme="midnight"] {
  --lk-md-bg-card     : #0f1318;
  --lk-md-bg-surface  : #0a0e16;
  --lk-md-bg-hover    : rgba(130,160,255,.05);
  --lk-md-text-primary: #d4dae5;
  --lk-md-text-sec    : #8a9aa8;
  --lk-md-text-ter    : #5a6b80;
  --lk-md-border      : rgba(100,140,220,.10);
  --lk-md-border-soft : rgba(100,140,220,.05);
  --lk-md-brand       : #7c3aed;
  --lk-md-brand-soft  : rgba(124,58,237,.18);
  --lk-md-brand-border: rgba(124,58,237,.30);
  --lk-md-amber       : #EF9F27;
  --lk-md-amber-soft  : rgba(186,117,23,.10);
  --lk-md-amber-border: rgba(186,117,23,.28);
  --lk-md-amber-ct-tx : #1a1305;
  --lk-md-red         : #E24B4A;
  --lk-md-red-soft    : rgba(163,45,45,.10);
  --lk-md-red-border  : rgba(226,75,74,.30);
  --lk-md-green       : #5DCAA5;
  --lk-md-backdrop    : rgba(0,0,0,0.65);
}

/* ── OVERLAY · backdrop con animación ────────────────────────────────────── */
.lk-md-overlay {
  position: fixed;
  inset: 0;
  z-index: 8000;
  background: var(--lk-md-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  transition: opacity .18s ease;
}
.lk-md-overlay--on { opacity: 1; }

/* ── SHELL · el modal + variants ─────────────────────────────────────────── */
.lk-md-shell {
  /* Defaults: brand */
  --acc       : var(--lk-md-brand);
  --acc-soft  : var(--lk-md-brand-soft);
  --acc-border: var(--lk-md-brand-border);
  --acc-cta-tx: #ffffff;

  background: var(--lk-md-bg-card);
  border: 0.5px solid var(--lk-md-border);
  border-radius: 14px;
  width: 100%;
  max-width: 620px;
  max-height: 90vh;
  overflow: hidden;
  color: var(--lk-md-text-primary);
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5), 0 0 0 1px var(--acc-soft);
  animation: lk-md-in .4s cubic-bezier(.34, 1.4, .64, 1);
}
.lk-md-shell.lk-md--720 { max-width: 720px; }

.lk-md-shell[data-variant="amber"] {
  --acc       : var(--lk-md-amber);
  --acc-soft  : var(--lk-md-amber-soft);
  --acc-border: var(--lk-md-amber-border);
  --acc-cta-tx: var(--lk-md-amber-ct-tx);
}
.lk-md-shell[data-variant="red"] {
  --acc       : var(--lk-md-red);
  --acc-soft  : var(--lk-md-red-soft);
  --acc-border: var(--lk-md-red-border);
  --acc-cta-tx: #ffffff;
}

@keyframes lk-md-in {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── HEADER ──────────────────────────────────────────────────────────────── */
.lk-md-head {
  position: relative;
  padding: 18px 20px 14px;
  background: linear-gradient(135deg, var(--acc-soft) 0%, transparent 70%);
  border-bottom: 0.5px solid var(--lk-md-border-soft);
  flex-shrink: 0;
}
.lk-md-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  color: var(--acc);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 6px;
}
.lk-md-eyebrow svg {
  width: 11px;
  height: 11px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lk-md-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--lk-md-text-primary);
  line-height: 1.3;
  padding-right: 38px;
}
.lk-md-sub {
  font-size: 11px;
  color: var(--lk-md-text-sec);
  margin-top: 4px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-feature-settings: "tnum";
}
.lk-md-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 0.5px solid var(--lk-md-border);
  background: var(--lk-md-bg-surface);
  color: var(--lk-md-text-sec);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.lk-md-close:hover {
  background: var(--lk-md-red-soft);
  color: var(--lk-md-red);
  border-color: var(--lk-md-red-border);
}
.lk-md-close svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── BODY ────────────────────────────────────────────────────────────────── */
.lk-md-body {
  padding: 18px 20px 14px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

/* ── FOOTER ──────────────────────────────────────────────────────────────── */
.lk-md-foot {
  padding: 12px 18px;
  border-top: 0.5px solid var(--lk-md-border);
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  background: var(--lk-md-bg-surface);
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════════════════
   ALIAS · estiliza las clases .rs-m-* legacy dentro del shell nuevo
   ════════════════════════════════════════════════════════════════════════════ */

/* Section / cards de paciente */
.lk-md-body .rs-m-section {
  margin-bottom: 14px;
}

/* Fields */
.lk-md-body .rs-m-field {
  margin-bottom: 14px;
}
.lk-md-body .rs-m-field:last-child { margin-bottom: 0; }

.lk-md-body .rs-m-label {
  display: block;
  font-size: 10.5px;
  color: var(--lk-md-text-sec);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
  font-weight: 500;
}
.lk-md-body .rs-m-label-required::after {
  content: " *";
  color: var(--acc);
}

/* Inputs / Selects / Textareas */
.lk-md-body .rs-m-input,
.lk-md-body .rs-m-select,
.lk-md-body .rs-m-textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--lk-md-bg-surface);
  border: 0.5px solid var(--lk-md-border);
  border-radius: 8px;
  color: var(--lk-md-text-primary);
  font-size: 12.5px;
  font-family: inherit;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.lk-md-body .rs-m-textarea {
  min-height: 88px;
  line-height: 1.5;
  resize: vertical;
}
.lk-md-body .rs-m-input:focus,
.lk-md-body .rs-m-select:focus,
.lk-md-body .rs-m-textarea:focus {
  outline: 0;
  border-color: var(--acc);
  background: var(--lk-md-bg-card);
  box-shadow: 0 0 0 3px var(--acc-soft);
}
.lk-md-body .rs-m-input::placeholder,
.lk-md-body .rs-m-textarea::placeholder {
  color: var(--lk-md-text-ter);
}

/* Read-only field (e.g. "Profesional actual") */
.lk-md-body .rs-m-readonly {
  padding: 10px 12px;
  background: var(--lk-md-bg-surface);
  border: 0.5px solid var(--lk-md-border-soft);
  border-radius: 8px;
  color: var(--lk-md-text-primary);
  font-size: 12.5px;
}

/* Smart placeholder banner (sugerencias futuras) */
.lk-md-body .rs-m-smart-placeholder {
  padding: 11px 13px;
  background: var(--lk-md-brand-soft);
  border: 0.5px dashed var(--lk-md-brand-border);
  border-radius: 8px;
  margin-bottom: 14px;
}
.lk-md-body .rs-m-smart-placeholder strong {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--lk-md-brand);
  margin-bottom: 2px;
}
.lk-md-body .rs-m-smart-placeholder span {
  font-size: 11px;
  color: var(--lk-md-text-sec);
  line-height: 1.5;
}

/* Buttons */
.lk-md-foot .rs-m-btn,
.lk-md-body .rs-m-btn {
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0.5px solid transparent;
  transition: background .20s ease, border-color .20s ease, filter .20s ease;
}
.lk-md-foot .rs-m-btn--ghost,
.lk-md-body .rs-m-btn--ghost {
  background: transparent;
  border-color: var(--lk-md-border);
  color: var(--lk-md-text-primary);
}
.lk-md-foot .rs-m-btn--ghost:hover,
.lk-md-body .rs-m-btn--ghost:hover {
  background: var(--lk-md-bg-hover);
  border-color: var(--lk-md-text-sec);
}
.lk-md-foot .rs-m-btn--primary,
.lk-md-body .rs-m-btn--primary {
  background: var(--acc);
  color: var(--acc-cta-tx);
  border-color: var(--acc);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--acc) 25%, transparent);
}
.lk-md-foot .rs-m-btn--primary:hover,
.lk-md-body .rs-m-btn--primary:hover {
  filter: brightness(1.08);
}
.lk-md-foot .rs-m-btn:disabled,
.lk-md-body .rs-m-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
  box-shadow: none;
}

/* Danger variant del botón (por si el código viejo lo usa) */
.lk-md-foot .rs-m-btn--danger,
.lk-md-body .rs-m-btn--danger {
  background: var(--lk-md-red);
  color: #fff;
  border-color: var(--lk-md-red);
}

/* Patient card (que devuelve _patientCard) — typical estructura interna */
.lk-md-body .rs-m-section > * {
  font-size: 12.5px;
  color: var(--lk-md-text-primary);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .lk-md-shell, .lk-md-overlay { animation: none !important; transition: none !important; }
}

/* /LKMD-2026-05-14 */