/* ============================================================
   Tomorrow Night Blue — design tokens
   Paleta canonica de Chris Kempson (skin elegido por el usuario;
   reemplaza al Solarized Dark del CLAUDE.md para esta app).
   Los nombres --w-* se conservan: solo cambian sus valores.
   OJO: en Tomorrow Night Blue los acentos son pasteles CLAROS,
   por eso el texto sobre un acento relleno va OSCURO (--w-on-accent).
   ============================================================ */
:root {
  /* -- Tomorrow Night Blue canonical palette -- */
  --tnb-bg:      #002451;   /* background */
  --tnb-line:    #00346e;   /* current line / panels */
  --tnb-sel:     #003f8e;   /* selection / elevated */
  --tnb-fg:      #ffffff;   /* foreground */
  --tnb-comment: #7285b7;   /* comments / muted */
  --tnb-red:     #ff9da4;
  --tnb-orange:  #ffc58f;
  --tnb-yellow:  #ffeead;
  --tnb-green:   #d1f1a9;
  --tnb-aqua:    #99ffff;
  --tnb-blue:    #bbdaff;
  --tnb-purple:  #ebbbff;

  /* -- tonos derivados (interpolados dentro de la familia) -- */
  --tnb-deep:    #001733;   /* mas profundo que el fondo (tracks, pozos) */
  --tnb-border:  #0f3e7d;   /* bordes de tarjetas / divisores */
  --tnb-ctrl:    #2c5f9e;   /* bordes de inputs / controles */
  --tnb-fg-sec:  #a8bde3;   /* texto secundario (entre fg y comment) */
  --tnb-blue-dk: #7fb2ee;   /* acento presionado */
  --tnb-hint:    #778bc0;   /* comment +5% luminosidad -> AA (4.55:1) sobre el fondo */

  /* -- Backgrounds -- */
  --w-bg:          var(--tnb-bg);
  --w-surface:     var(--tnb-line);     /* cards, panels, inputs */
  --w-surface-alt: var(--tnb-sel);      /* paneles elevados */

  /* -- Text -- */
  --w-text:        var(--tnb-fg);       /* primary */
  --w-text-sec:    var(--tnb-fg-sec);   /* secondary */
  --w-text-dis:    var(--tnb-hint);     /* disabled / hint (AA sobre --w-bg) */

  /* -- Borders / strokes -- */
  --w-border:      var(--tnb-border);
  --w-border-ctrl: var(--tnb-ctrl);

  /* -- Accent -- */
  --w-accent:      var(--tnb-blue);     /* links / accion principal */
  --w-accent-hov:  var(--tnb-aqua);     /* hover */
  --w-accent-dk:   var(--tnb-blue-dk);
  --w-on-accent:   var(--tnb-bg);       /* texto OSCURO sobre acento claro */

  /* -- Status -- */
  --w-success:     var(--tnb-green);
  --w-warning:     var(--tnb-yellow);
  --w-danger:      var(--tnb-red);
  --w-info:        var(--tnb-blue);

  /* -- Triplets RGB (para tintes rgba(); reskin = una sola linea) -- */
  --w-accent-rgb:  187, 218, 255;   /* blue   */
  --w-success-rgb: 209, 241, 169;   /* green  */
  --w-warning-rgb: 255, 238, 173;   /* yellow */
  --w-danger-rgb:  255, 157, 164;   /* red    */
  --w-aqua-rgb:    153, 255, 255;   /* aqua   */
  --w-text-rgb:    255, 255, 255;   /* fg     */
  --w-surface-rgb:   0,  52, 110;   /* line   */

  /* -- Shadows (fondo azul profundo) -- */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.35), 0 0 1px rgba(0,0,0,0.45);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.40), 0 0 1px rgba(0,0,0,0.45);
  --shadow-lg:  0 12px 28px rgba(0,0,0,0.50), 0 0 1px rgba(0,0,0,0.55);

  /* -- Alias semanticos (usados en markup inline + JS) -- */
  --bg:          var(--tnb-bg);
  --bg-elev:     var(--tnb-line);
  --fg:          var(--tnb-fg);
  --fg-strong:   var(--tnb-fg);
  --fg-muted:    var(--tnb-comment);
  --link:        var(--tnb-blue);
  --link-hover:  var(--tnb-aqua);
  --success:     var(--tnb-green);
  --warning:     var(--tnb-yellow);
  --danger:      var(--tnb-red);

  /* Bootstrap 5 overrides */
  --bs-body-bg:      var(--w-bg);
  --bs-body-color:   var(--w-text);
  --bs-primary:      var(--w-accent);
  --bs-success:      var(--w-success);
  --bs-danger:       var(--w-danger);
  --bs-warning:      var(--w-warning);
  --bs-secondary:    var(--w-text-sec);
  --bs-border-color: var(--w-border);
  --bs-card-bg:      var(--w-surface);
}


*, *::before, *::after { box-sizing: border-box; }

html, body {
  background: var(--w-bg);
  color: var(--w-text);
  font-family: 'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system, sans-serif;
  min-height: 100vh;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--w-bg); }
::-webkit-scrollbar-thumb { background: var(--w-border-ctrl); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--w-accent); }

/* ── Top navbar ── */
.navbar {
  background: rgba(var(--w-surface-rgb),0.85) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--w-border);
  padding: 0.75rem 1.5rem;
  box-shadow: var(--shadow-sm);
}
.navbar-brand {
  color: var(--w-text) !important;
  font-weight: 700;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.navbar-brand .icon { color: var(--w-accent); font-size: 1.4rem; }
.navbar-info { color: var(--w-text-sec); font-size: 0.82rem; }

/* ── Breadcrumb / steps ── */
.steps-bar {
  background: var(--w-surface);
  border-bottom: 1px solid var(--w-border);
  padding: 0.6rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.step-crumb {
  color: var(--w-text-sec);
  font-size: 0.85rem;
  cursor: pointer;
  transition: color 0.15s;
}
.step-crumb:hover { color: var(--w-text); }
.step-crumb.active { color: var(--w-accent); font-weight: 600; }
.step-sep { color: var(--w-text-dis); font-size: 0.8rem; }

/* ── Page sections ── */
.section { display: none; }
.section.active { display: block; }

.section-title {
  color: var(--w-text);
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.section-title .badge-count {
  background: var(--w-border);
  color: var(--w-text-sec);
  font-size: 0.75rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font-weight: 500;
}

/* ── Specialty cards ── */
.specialty-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}
.specialty-card {
  background: var(--w-surface);
  border: 1px solid var(--w-border);
  border-radius: 10px;
  padding: 1.25rem 1rem;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
  box-shadow: var(--shadow-sm);
}
.specialty-card:hover {
  border-color: var(--w-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
/* Dos emoji que tienen que leerse como una sola imagen: el letter-spacing
   negativo les come el espacio lateral que traen de fábrica, y el padding
   izquierdo compensa el que también se le resta al último glifo, para que el
   par siga centrado en la tarjeta. `color` no pinta un emoji de color, pero
   queda por si la plataforma cae en un glifo monocromo. */
.specialty-card .sp-icon {
  font-size: 1.85rem;
  line-height: 1.15;
  letter-spacing: -0.1em;
  padding-left: 0.1em;
  color: var(--w-accent);
}
.specialty-card .sp-name {
  color: var(--w-text);
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.3;
}

/* ── Doctor list ── */
.doctor-list { display: flex; flex-direction: column; gap: 0.75rem; }
.doctor-card {
  background: var(--w-surface);
  border: 1px solid var(--w-border);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.doctor-card:hover { border-color: var(--w-accent); box-shadow: var(--shadow-md); }
.doctor-info { flex: 1; min-width: 0; }
.doctor-name { color: var(--w-text); font-weight: 600; font-size: 1rem; margin-bottom: 0.2rem; }
.doctor-specialty { color: var(--w-accent); font-size: 0.82rem; }
/* Días y horarios de atención en la tarjeta del médico. Reemplazó al teléfono
   personal, que no se publica. */
.doctor-agenda {
  margin-top: 0.35rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
  font-size: 0.8rem;
  color: var(--w-text-sec);
  line-height: 1.5;
}
.doctor-agenda--vacia { color: var(--w-text-dis); font-style: italic; }
.agenda-dia { white-space: nowrap; }
.agenda-dia strong {
  color: var(--w-accent);
  font-weight: 600;
  margin-right: 0.15rem;
}
.badge-online {
  background: rgba(var(--w-success-rgb),0.1);
  color: var(--w-success);
  border: 1px solid rgba(var(--w-success-rgb),0.35);
  font-size: 0.73rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.badge-phone {
  background: rgba(var(--w-warning-rgb),0.1);
  color: var(--w-warning);
  border: 1px solid rgba(var(--w-warning-rgb),0.3);
  font-size: 0.73rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

/* ── Banderas del profesional: seña y preparación previa ──────────────────────
   Mismo molde que .badge-online / .badge-phone; sólo cambia la familia de color.
   El amarillo no choca con .badge-phone porque nunca aparecen juntos: ese badge
   es de los médicos SIN turno web, y la seña sólo existe donde sí lo hay. */
.badge-sena,
.badge-prep {
  font-size: 0.73rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.badge-sena {
  background: rgba(var(--w-warning-rgb),0.1);
  color: var(--w-warning);
  border: 1px solid rgba(var(--w-warning-rgb),0.3);
}
.badge-prep {
  background: rgba(var(--w-aqua-rgb),0.1);
  color: var(--w-accent-hov);
  border: 1px solid rgba(var(--w-aqua-rgb),0.3);
}

/* ── Los avisos: seña por transferencia y preparación previa ──────────────────
   Se usan en tres lugares: el cartel que se muestra ANTES del calendario, el
   recordatorio del paso de datos y la pantalla de turno reservado. */
.aviso-panel {
  border-radius: 8px;
  padding: 0.8rem 0.9rem;
  font-size: 0.85rem;
  line-height: 1.5;
  margin-bottom: 0.9rem;
  text-align: left;
  color: var(--w-text-sec);
}
.aviso-panel--sena {
  background: rgba(var(--w-warning-rgb),0.08);
  border: 1px solid rgba(var(--w-warning-rgb),0.3);
}
.aviso-panel--prep {
  background: rgba(var(--w-aqua-rgb),0.08);
  border: 1px solid rgba(var(--w-aqua-rgb),0.3);
}
.aviso-panel strong { color: var(--w-text); }
.aviso-titulo {
  font-weight: 700;
  margin-bottom: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.aviso-panel--sena .aviso-titulo { color: var(--w-warning); }
.aviso-panel--prep .aviso-titulo { color: var(--w-accent-hov); }

/* El alias, en grande y con un botón para copiarlo: se va a tipear en la app del
   banco, así que tiene que poder leerse sin dudar entre un 0 y una O. */
.alias-caja {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.6rem 0 0.3rem;
}
.alias-valor {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--w-text);
  background: var(--w-surface-alt);
  border: 1px solid var(--w-border);
  border-radius: 6px;
  padding: 0.35rem 0.7rem;
  letter-spacing: 0.02em;
  word-break: break-all;
}
/* Texto OSCURO sobre el acento claro: es la inversión de contraste del tema. */
.btn-copiar {
  background: var(--w-accent);
  color: var(--w-on-accent);
  border: none;
  border-radius: 6px;
  padding: 0.35rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.btn-copiar:hover { background: var(--w-accent-hov); color: var(--w-on-accent); }

/* El plazo, que es lo que el paciente necesita recordar. */
.sena-plazo {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--w-text);
}
.sena-plazo b { color: var(--w-warning); }

/* Por qué este profesional no se reserva por internet. Va en la tarjeta, debajo
   del teléfono: la ausencia del botón tiene que leerse como una decisión del
   centro y no como una página rota. */
.nota-prep {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--w-text-sec);
  background: rgba(var(--w-aqua-rgb),0.07);
  border: 1px solid rgba(var(--w-aqua-rgb),0.25);
  border-radius: 6px;
  padding: 0.45rem 0.6rem;
}
.nota-prep strong { color: var(--w-accent-hov); }

/* ── ¿Qué estudio te vas a hacer? ─────────────────────────────────────────────
   La lista de prácticas web del médico, con tildes: se pueden elegir varias
   (una eco abdominal y una renal el mismo día). La elegida se marca con el
   tinte del acento, no sólo con el tilde, para que se lea de un vistazo. */
.pw-lista {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0.6rem 0 0.9rem;
  max-height: 260px;
  overflow-y: auto;
}
.pw-opcion {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--w-border);
  border-radius: 8px;
  background: var(--w-surface-alt);
  color: var(--w-text);
  font-size: 0.9rem;
  cursor: pointer;
}
.pw-opcion:hover { border-color: rgba(var(--w-accent-rgb),0.6); }
.pw-opcion.elegida {
  background: rgba(var(--w-accent-rgb),0.12);
  border-color: var(--w-accent);
}
.pw-opcion input { accent-color: var(--w-accent); }
.pw-sin-prep { font-size: 0.75rem; color: var(--w-text-dis); margin-left: auto; }

/* Cada indicación con su nombre: es el mismo texto que después le llega por mail. */
.prep-indicacion { margin-top: 0.45rem; }
.prep-indicacion b { color: var(--w-text); display: block; margin-bottom: 0.15rem; }
.prep-indicacion p { margin: 0; white-space: pre-line; }
.prep-anticipacion {
  margin-top: 0.55rem;
  font-size: 0.82rem;
  color: var(--w-warning);
}

.prep-acepta {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: var(--w-text);
  margin: 0 0 0.8rem;
  cursor: pointer;
}
.prep-acepta input { margin-top: 0.2rem; accent-color: var(--w-accent); }
.pw-nota { font-size: 0.78rem; color: var(--w-text-sec); }
.pw-nota strong { color: var(--w-text); }

/* En el encabezado del calendario: qué estudio eligió, con el atajo para cambiarlo. */
.cal-practicas {
  margin-top: 0.45rem;
  font-size: 0.82rem;
  color: var(--w-text-sec);
}
.cal-practicas strong { color: var(--w-accent-hov); }
.cal-practicas button {
  background: none;
  border: none;
  color: var(--w-accent);
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.82rem;
  padding: 0;
  margin-left: 0.3rem;
}
.cal-practicas button:hover { color: var(--w-accent-hov); }
.btn-ver-turnos {
  background: var(--w-accent);
  color: var(--w-on-accent);
  border: none;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.btn-ver-turnos:hover { background: var(--w-accent-hov); }
.btn-call {
  background: transparent;
  color: var(--w-warning);
  border: 1px solid rgba(var(--w-warning-rgb),0.4);
  border-radius: 6px;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: default;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* ── Calendar ── */
.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.calendar-nav { display: flex; align-items: center; gap: 0.5rem; }
.btn-nav {
  background: var(--w-surface);
  border: 1px solid var(--w-border-ctrl);
  color: var(--w-text);
  width: 36px;
  height: 36px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, border-color 0.12s;
}
.btn-nav:hover:not(:disabled) { background: rgba(var(--w-accent-rgb),0.15); border-color: var(--w-accent); color: var(--w-accent); }
/* En el borde del horizonte la flecha se apaga: un botón que no responde al
   tocarlo parece una pantalla colgada. */
.btn-nav:disabled { opacity: 0.35; cursor: not-allowed; }
.week-label {
  color: var(--w-text);
  font-weight: 600;
  font-size: 0.95rem;
  min-width: 180px;
  text-align: center;
}
.btn-today {
  background: var(--w-surface);
  border: 1px solid var(--w-border-ctrl);
  color: var(--w-text);
  padding: 0.35rem 0.9rem;
  border-radius: 6px;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.btn-today:hover { background: rgba(var(--w-accent-rgb),0.15); border-color: var(--w-accent); color: var(--w-accent); }

/* ── Doctor schedule summary ── */
.cal-schedule-text {
  font-size: 0.8rem;
  color: var(--w-text-sec);
  margin-top: 0.3rem;
  line-height: 1.6;
}
.cal-schedule-text strong { color: var(--w-text); font-weight: 600; }

/* ── Próximos turnos disponibles ───────────────────────────────
   La franja de arriba del calendario. Es el atajo para el caso normal —
   el que entra quiere el turno más cercano, no recorrer la grilla— así
   que va rellena con el acento y no con un tinte: tiene que leerse como
   la acción principal de la pantalla.
   Texto OSCURO sobre el acento claro (inversión de contraste TNB). */
.prox-franja {
  background: rgba(var(--w-accent-rgb),0.07);
  border: 1px solid rgba(var(--w-accent-rgb),0.28);
  border-radius: 10px;
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}
.prox-titulo {
  color: var(--w-text-sec);
  font-size: 0.82rem;
  font-weight: 600;
}
.prox-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.prox-turno {
  background: var(--w-accent);
  color: var(--w-on-accent);
  border: none;
  border-radius: 8px;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.25;
  transition: background 0.12s, transform 0.12s;
}
.prox-turno:hover { background: var(--w-accent-hov); transform: translateY(-1px); }
.prox-dia  { font-size: 0.72rem; opacity: 0.8; }
.prox-hora { font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Sólo lo usan los atajos a otros días del cartel "no hay turnos esta
   semana" (.proxima-dias). Ya no hay grilla que lo estire. */
.slot-btn {
  height: 38px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.slot-btn.available {
  background: rgba(var(--w-success-rgb),0.08);
  color: var(--w-success);
  border-color: rgba(var(--w-success-rgb),0.3);
}
.slot-btn.available:hover {
  background: rgba(var(--w-success-rgb),0.16);
  box-shadow: 0 2px 6px rgba(var(--w-success-rgb),0.2);
  transform: scale(1.03);
}
/* ── No-slots message ── */
.no-slots-msg {
  background: var(--w-surface);
  border: 1px dashed var(--w-border-ctrl);
  border-radius: 10px;
  padding: 2rem;
  text-align: center;
  color: var(--w-text-sec);
  box-shadow: var(--shadow-sm);
}
.no-slots-msg .icon { font-size: 2.5rem; margin-bottom: 0.75rem; color: var(--w-text-dis); }

/* ── Atajos a los próximos días con turnos ──
   Van dentro del cartel "no hay turnos esta semana". Reusan .slot-btn
   .available a propósito: se leen como lo que son, algo que se puede tomar.
   El ancho fijo del slot no sirve acá, donde el texto es 'mié 17/09'. */
.proxima-dias {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 0.8rem;
}
.proxima-dias .slot-btn {
  padding: 0 0.95rem;
  font-size: 0.82rem;
  white-space: nowrap;
}

/* ── Phone-only banner ── */
.phone-banner {
  background: rgba(var(--w-warning-rgb),0.06);
  border: 1px solid rgba(var(--w-warning-rgb),0.25);
  border-radius: 10px;
  padding: 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.phone-banner .pb-icon { font-size: 2rem; color: var(--w-warning); flex-shrink: 0; }
.phone-banner .pb-title { color: var(--w-warning); font-weight: 700; margin-bottom: 0.3rem; }
.phone-banner .pb-tel { font-size: 1.4rem; font-weight: 700; color: var(--w-text); letter-spacing: 0.03em; }
.phone-banner .pb-note { color: var(--w-text-sec); font-size: 0.83rem; margin-top: 0.4rem; }

/* ── Patient banner ── */
.patient-banner {
  border-radius: 6px;
  padding: 0.6rem 0.9rem;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}
.patient-banner.found {
  background: rgba(var(--w-success-rgb),0.08);
  border: 1px solid rgba(var(--w-success-rgb),0.3);
  color: var(--w-success);
}
.patient-banner.notfound {
  background: rgba(var(--w-warning-rgb),0.07);
  border: 1px solid rgba(var(--w-warning-rgb),0.28);
  color: var(--w-warning);
}

/* ── Turno mini-summary (step 2 header) ── */
.turno-mini-summary { margin-bottom: 1rem; }
.turno-mini {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  font-size: 0.83rem;
  color: var(--w-text-sec);
  background: var(--w-bg);
  border: 1px solid var(--w-border);
  border-radius: 8px;
  padding: 0.55rem 0.9rem;
}
.turno-mini .mini-hora {
  color: var(--w-accent);
  font-weight: 700;
  font-size: 1rem;
}

/* ── Radio group ── */
.radio-group { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.radio-option {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  border: 1px solid var(--w-border-ctrl);
  font-size: 0.88rem;
  color: var(--w-text);
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  user-select: none;
}
.radio-option:has(input:checked) {
  border-color: var(--w-accent);
  background: rgba(var(--w-accent-rgb),0.07);
  color: var(--w-accent);
}
.radio-option input[type="radio"] { display: none; }

/* ── Modal ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }
.modal-box {
  background: var(--w-surface);
  border: 1px solid var(--w-border);
  border-radius: 12px;
  padding: 2rem;
  width: 100%;
  max-width: 480px;
  box-shadow: var(--shadow-lg);
  transform: translateY(12px);
  transition: transform 0.2s;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-overlay.open .modal-box { transform: translateY(0); }
.modal-title {
  color: var(--w-text);
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.modal-subtitle {
  color: var(--w-text-sec);
  font-size: 0.85rem;
  margin-bottom: 1.25rem;
}
.turno-summary {
  background: var(--w-bg);
  border: 1px solid var(--w-border);
  border-radius: 8px;
  padding: 0.9rem 1rem;
  margin-bottom: 1.25rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.ts-label { color: var(--w-text-sec); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }
.ts-value { color: var(--w-text); font-weight: 600; font-size: 0.9rem; margin-top: 0.1rem; }

.form-group { margin-bottom: 1rem; }
.form-label { color: var(--w-text-sec); font-size: 0.82rem; margin-bottom: 0.35rem; display: block; }
.form-control {
  background: var(--w-surface);
  border: 1px solid var(--w-border-ctrl);
  color: var(--w-text);
  border-radius: 6px;
  padding: 0.55rem 0.8rem;
  width: 100%;
  font-size: 0.92rem;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
/* ── Campo de fecha dd/mm/aaaa ──────────────────────────────
   El <input type="date"> nativo se dibuja con el formato del navegador
   (09/11/2026 para el 11 de septiembre en un Chrome en inglés) y eso no
   se puede cambiar desde la página. Así que el que se ve es un campo de
   texto, y el nativo queda detrás del botón del calendario: invisible,
   pero clickeable, para los navegadores sin showPicker().
   Ver activarCampoFecha() en js/fecha.js. */
.campo-fecha {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  max-width: 100%;
}
.campo-fecha > input[type="text"] {
  width: 100%;
  padding-right: 2.4rem;   /* deja lugar al botón del calendario */
  font-variant-numeric: tabular-nums;
}
/* Queda en el DOM sólo como portador del valor —conserva su id— y para que
   showPicker() tenga a quién abrirle el calendario. No recibe clics: el
   botón está encima y es el que manda. */
.campo-fecha-nativo {
  position: absolute;
  top: 0;
  right: 0;
  width: 2.4rem;
  height: 100%;
  opacity: 0;
  border: none;
  padding: 0;
  background: transparent;
  pointer-events: none;
}
.campo-fecha-cal {
  position: absolute;
  top: 0;
  right: 0;
  width: 2.4rem;
  height: 100%;
  border: none;
  background: transparent;
  color: var(--w-text-sec);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.campo-fecha-cal:hover { color: var(--w-accent); }

.form-control:focus {
  border-color: var(--w-accent);
  box-shadow: 0 0 0 2px rgba(var(--w-accent-rgb),0.15);
}
.form-control::placeholder { color: var(--w-text-dis); }
textarea.form-control { resize: vertical; min-height: 80px; }
select.form-control { appearance: auto; }

.modal-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 1.5rem;
}
.btn-cancel {
  background: var(--w-surface);
  border: 1px solid var(--w-border-ctrl);
  color: var(--w-text);
  border-radius: 6px;
  padding: 0.55rem 1.1rem;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.btn-cancel:hover { background: rgba(var(--w-danger-rgb),0.12); border-color: var(--w-danger); color: var(--w-danger); }
.btn-confirm {
  background: var(--w-accent);
  border: none;
  color: var(--w-on-accent);
  border-radius: 6px;
  padding: 0.55rem 1.4rem;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-confirm:hover { background: var(--w-accent-hov); }
.btn-confirm:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Success modal ── */
.success-box { text-align: center; padding: 1rem 0; }
.success-box .s-icon { font-size: 3rem; color: var(--w-success); margin-bottom: 0.75rem; }
.success-box .s-title { color: var(--w-text); font-size: 1.25rem; font-weight: 700; margin-bottom: 0.4rem; }
.success-box .s-detail { color: var(--w-text-sec); font-size: 0.88rem; line-height: 1.6; }
.success-box .s-summary {
  background: var(--w-bg);
  border: 1px solid var(--w-border);
  border-radius: 8px;
  padding: 1rem;
  margin: 1rem 0;
  text-align: left;
}

/* ── Loading spinner ── */
.spinner {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2px solid rgba(var(--w-accent-rgb),0.25);
  border-top-color: var(--w-accent);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  gap: 1rem;
  color: var(--w-text-sec);
}
.loading-overlay .spinner { width: 32px; height: 32px; }

/* ── Layout ── */
.main-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 1rem;
}

.back-btn {
  background: transparent;
  border: none;
  color: var(--w-accent);
  font-size: 0.88rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 1rem;
  padding: 0;
}
.back-btn:hover { color: var(--w-accent-hov); }

/* ── Mobile breakpoint: card view replaces grid ── */
@media (max-width: 768px) {
  /* La vista es la misma en todas las pantallas; acá solo se aprieta un poco.
     El mes se cae porque el nombre del día y el número ya ubican la fecha. */
  .specialty-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .doctor-card { flex-wrap: wrap; }
  .turno-summary { grid-template-columns: 1fr; }

  .prox-franja { flex-direction: column; align-items: stretch; }
  /* Hasta cuatro botones (dos de mañana y dos de tarde): de a dos por fila,
     que en 360px es lo que entra sin que la hora quede ilegible. */
  .prox-turno { flex: 1 1 40%; padding: 0.55rem 0.7rem; }

  /* ── Modales en pantalla chica ──────────────────────────────
     El overlay centra en vertical y el box scrollea por dentro
     (max-height 90vh). Cuando el contenido es más alto que la
     pantalla —el alta de paciente son catorce campos, y con el
     teclado abierto queda la mitad del alto— el borde de arriba
     se va fuera del área visible y no hay forma de llegar a él:
     el scroll interno arranca ya recortado.

     Acá el que scrollea es el overlay y el box crece libre. El
     margin auto lo sigue centrando mientras entre; cuando no
     entra, los márgenes se colapsan solos y queda pegado arriba.
     ─────────────────────────────────────────────────────────── */
  .modal-overlay {
    padding: 0.6rem;
    align-items: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .modal-box {
    padding: 1.25rem;
    max-height: none;
    margin: auto 0;
  }
  .modal-actions { flex-wrap: wrap; }
  .modal-actions button { flex: 1 1 auto; }

  .flow-modal-box { padding: 1.15rem 1.15rem 1rem; }
  .flow-modal-box .section-title { padding-right: 2.4rem; }
  .flow-close { top: 0.6rem; right: 0.6rem; }

  /* iOS Safari hace zoom al enfocar un campo de menos de 16px y deja
     la página corrida a un costado. 16px exactos lo evitan. */
  input:not([type="checkbox"]):not([type="radio"]),
  select, textarea, .form-control { font-size: 16px; }

}

/* ── Error toast ── */
.toast-error {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--w-danger);
  color: var(--w-on-accent);
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  font-size: 0.88rem;
  font-weight: 600;
  z-index: 2000;
  transition: transform 0.3s;
  max-width: 90vw;
  text-align: center;
  box-shadow: var(--shadow-md);
}
.toast-error.show { transform: translateX(-50%) translateY(0); }

/* ── Admin strip ── */
.admin-strip {
  background: rgba(var(--w-accent-rgb),0.06);
  border: 1px solid rgba(var(--w-accent-rgb),0.2);
  border-radius: 6px;
  padding: 0.5rem 0.9rem;
  font-size: 0.8rem;
  color: var(--w-accent);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

/* ── Flow modal (desktop only): Médicos + Calendario en modal ── */
.flow-modal { z-index: 900; }          /* debajo de booking(1000)/success(2000) */
.flow-modal-box {
  max-width: 920px;
  width: 100%;
  position: relative;
  padding: 1.75rem 1.75rem 1.5rem;
}
/* Las secciones movidas al modal ya no necesitan su propio botón "atrás"
   fuera de contexto; el back-btn interno + la × del modal manejan la navegación. */
.flow-modal-box .section { margin: 0; }
.flow-modal-box .section-title { padding-right: 2.5rem; }  /* deja lugar a la × */

.flow-close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--w-border-ctrl);
  background: var(--w-surface);
  color: var(--w-text-sec);
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  z-index: 2;
}
.flow-close:hover {
  color: var(--w-danger);
  border-color: var(--w-danger);
  background: rgba(var(--w-danger-rgb),0.08);
}

/* ── Aviso de feriado en el calendario de turnos ────────────────
   Los feriados llegan del servidor sin horarios; sin este aviso el
   paciente ve el día vacío y no sabe por qué. Amarillo = advertencia,
   con texto oscuro encima del acento (inversión de contraste TNB). */
.feriado-aviso {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-bottom: 1rem;
  padding: 0.8rem 1rem;
  background: rgba(var(--w-warning-rgb), 0.14);
  border: 1px solid var(--w-warning);
  border-radius: 10px;
  color: var(--w-text);
  font-size: 0.88rem;
}
.feriado-aviso .feriado-icono { font-size: 1.15rem; line-height: 1.2; }
.feriado-aviso strong { color: var(--w-warning); }
.feriado-aviso ul { margin: 0.35rem 0 0; padding-left: 1.1rem; }
.feriado-aviso li { margin-bottom: 0.15rem; }
.feriado-aviso li strong { color: var(--w-text); text-transform: capitalize; }

/* ── Días extra de agenda (panel → Agendas) ─────────────────────
   La grilla de arriba es semanal y no puede decir "un jueves cada tres
   semanas". Estas reglas viven en su propia tarjeta, debajo, porque son otra
   cosa: no se editan en una celda, se agregan y se borran enteras. */
.agx-card {
  margin-top: 1.75rem;
  background: var(--w-surface);
  border: 1px solid var(--w-border);
  border-radius: 10px;
  padding: 1rem 1.1rem 1.15rem;
}
.agx-titulo { font-weight: 600; color: var(--w-text); margin: 0 0 0.25rem; }
.agx-ayuda  { color: var(--w-text-sec); font-size: 0.82rem; margin: 0 0 1rem; }

.agx-lista { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.1rem; }
.agx-item {
  display: flex; align-items: flex-start; gap: 0.85rem; flex-wrap: wrap;
  padding: 0.7rem 0.85rem;
  background: var(--w-surface-alt);
  border: 1px solid var(--w-border);
  border-left: 3px solid var(--w-accent);
  border-radius: 8px;
}
/* Una regla vencida no genera turnos: se atenúa y pierde el filo de color para
   que no se confunda con las que sí están rigiendo. */
.agx-item.vencido { opacity: 0.55; border-left-color: var(--w-text-dis); }
.agx-datos { flex: 1; min-width: 200px; }
.agx-regla { color: var(--w-text); font-weight: 600; }
.agx-horario { color: var(--w-text-sec); font-size: 0.85rem; margin-top: 0.15rem; }
.agx-proximas { color: var(--w-accent); font-size: 0.82rem; margin-top: 0.3rem; }
.agx-proximas.sin { color: var(--w-text-dis); }
.agx-nota { color: var(--w-text-dis); font-size: 0.82rem; margin-top: 0.2rem; font-style: italic; }
.agx-vacio {
  color: var(--w-text-dis); font-size: 0.85rem; padding: 0.8rem 0.9rem;
  border: 1px dashed var(--w-border-ctrl); border-radius: 8px; margin-bottom: 1.1rem;
}

.agx-form {
  display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: flex-end;
  padding-top: 1rem; border-top: 1px solid var(--w-border);
}
.agx-campo { display: flex; flex-direction: column; gap: 0.25rem; }
.agx-campo > label { color: var(--w-text-sec); font-size: 0.78rem; }
.agx-campo select, .agx-campo input {
  padding: 0.4rem 0.5rem;
  background: var(--w-surface-alt); color: var(--w-text);
  border: 1px solid var(--w-border-ctrl); border-radius: 6px;
  font-family: inherit; font-size: 0.9rem;
}
.agx-par { display: flex; align-items: center; gap: 0.35rem; }
.agx-par span { color: var(--w-text-dis); font-size: 0.85rem; }

@media (max-width: 768px) {
  /* En el teléfono cada campo ocupa el ancho: apretados de a tres por fila los
     selectores de día y de ordinal quedan sin lugar para su etiqueta. */
  .agx-form { flex-direction: column; align-items: stretch; gap: 0.85rem; }
  .agx-campo { width: 100%; }
  .agx-campo select, .agx-campo input { width: 100%; }
  /* 16px: menos que eso y iOS hace zoom solo al enfocar el campo. */
  .agx-campo input, .agx-campo select { font-size: 16px; }
  .agx-par > * { flex: 1; }
  .agx-item { flex-direction: column; }
  .agx-item .btn-cancel { width: 100%; }
}

/* ── Aviso de aprobación con ficha (panel → Pacientes pendientes) ───
   Después de aceptar un paciente se ofrece imprimir su ficha. Es un aviso y no
   un modal a propósito: quien está despachando varios pendientes seguidos no
   tiene por qué frenar en cada uno para cerrar una ventana. */
.ficha-aviso {
  display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap;
  margin-bottom: 1.25rem; padding: 0.8rem 1rem;
  background: rgba(var(--w-success-rgb), 0.12);
  border: 1px solid var(--w-success);
  border-radius: 10px;
}
.ficha-aviso .texto { flex: 1; min-width: 200px; color: var(--w-text); font-size: 0.9rem; }
.ficha-aviso .texto strong { color: var(--w-success); }
.ficha-aviso .detalle { color: var(--w-text-sec); font-size: 0.82rem; margin-top: 0.15rem; }
/* Recordar la inversión de contraste del tema: sobre un acento claro relleno,
   el texto va OSCURO. */
.ficha-aviso .btn-imprimir {
  padding: 0.5rem 1.1rem; border: none; border-radius: 8px; cursor: pointer;
  background: var(--w-accent); color: var(--w-on-accent);
  font-family: inherit; font-size: 0.9rem; font-weight: 600;
}
.ficha-aviso .btn-imprimir:hover { background: var(--w-accent-hov); }
.ficha-aviso .btn-cerrar {
  padding: 0.5rem 0.9rem; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--w-text-sec);
  border: 1px solid var(--w-border-ctrl); font-family: inherit; font-size: 0.9rem;
}

@media (max-width: 768px) {
  .ficha-aviso { flex-direction: column; align-items: stretch; }
  .ficha-aviso .btn-imprimir, .ficha-aviso .btn-cerrar { width: 100%; }
}

/* ── Buscador de pacientes (panel → Cargar turno) ───────────────
   El mostrador tipea DNI o apellido y elige de una lista, en vez de volver a
   cargar a mano a alguien que ya está en el maestro. */
.cg-ac { position: relative; }
.cg-ac-lista {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40;
  max-height: 280px; overflow-y: auto;
  background: var(--w-surface-alt);
  border: 1px solid var(--w-accent);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.cg-ac-item {
  display: block; width: 100%; text-align: left;
  padding: 0.55rem 0.75rem; cursor: pointer;
  background: transparent; border: none; border-bottom: 1px solid var(--w-border);
  font-family: inherit; font-size: 0.88rem; color: var(--w-text);
}
.cg-ac-item:last-child { border-bottom: none; }
.cg-ac-item:hover, .cg-ac-item.sel { background: rgba(var(--w-accent-rgb), 0.15); }
.cg-ac-item .nom { font-weight: 600; }
.cg-ac-item .det { color: var(--w-text-sec); font-size: 0.8rem; margin-top: 0.1rem; }
.cg-ac-item .incompleta { color: var(--w-warning); }
.cg-ac-vacio {
  padding: 0.6rem 0.75rem; color: var(--w-text-sec); font-size: 0.85rem;
  background: var(--w-surface-alt); border: 1px solid var(--w-border);
  border-radius: 8px;
}
/* Cartel de "este paciente sale del maestro" / "va a quedar pendiente". */
.cg-ficha-nota {
  margin-top: 0.5rem; font-size: 0.82rem; display: flex; align-items: center;
  gap: 0.4rem; flex-wrap: wrap;
}
.cg-ficha-nota.ok     { color: var(--w-success); }
.cg-ficha-nota.aviso  { color: var(--w-warning); }

/* ── Encabezados que ordenan la grilla (public/js/tabla-orden.js) ──────────
   Va acá y no en cada pantalla: son doce grillas repartidas en seis archivos.
   El <th> ya es sticky en varias tablas, así que el cursor y el resalte tienen
   que funcionar sin tocar `position`. */
.orden-th {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.orden-th:hover   { color: var(--w-accent); }
.orden-th:focus-visible {
  outline: 2px solid var(--w-accent);
  outline-offset: -2px;
}
/* La flecha ocupa lugar SIEMPRE (aunque esté vacía): si apareciera y
   desapareciera, la columna cambiaría de ancho a cada click. */
.orden-flecha {
  display: inline-block;
  min-width: 0.9em;
  font-size: 0.85em;
  color: var(--w-accent);
}
.orden-th.orden-activo { color: var(--w-accent); }