/* ===========================================================================
   Tema del producto — tokens (iteración 1.10, RF-10.1 · C11 · VIS-V1..V7)
   ===========================================================================

   NINGÚN color se escribe suelto en las reglas de abajo: todos son variables
   declaradas aquí, en :root. Esa es la condición para que exista el white-label
   — un color escrito a mano en una regla es un color que la marca de la clínica
   no puede cambiar, y ninguna pantalla puede tener uno.

   Las variables están en TRES familias, y la separación no es cosmética:

     MARCA    --brand-*   LO ÚNICO configurable por clínica. La SPA las
                          SOBREESCRIBE en :root con un <style> generado desde
                          /me al abrir sesión. Los valores de aquí son la
                          identidad del PRODUCTO: es lo que ve la pantalla de
                          login (todavía no se sabe de qué clínica es quien
                          entra) y lo que ve una clínica que no ha configurado
                          nada.

     BASE     el resto    Estructura del producto: fondo, superficie, borde,
                          texto, micro-texto, paletas de módulo (parrilla de
                          citación, estados de cita). No se personaliza.

     ESTADO   --state-*   SIGNIFICADO, no decoración (C11). El ámbar de BLOQUEO
                          ("falta un consentimiento": un paso pendiente, no un
                          fallo — VIS-V2) NO es el rojo de ERROR, y esa
                          distinción tiene que valer igual en las 40 clínicas.
                          El servidor descarta estos tokens aunque el cliente
                          los mande: no hay forma de cambiarlos por API.

   CONTRASTE: los valores de --brand-* y de --state-* están calculados para
   cumplir AAA (7:1 texto normal, 3:1 componentes) sobre las superficies donde
   se usan. La aritmética vive en src/contrast.js —el mismo fichero que el
   servidor usa para RECHAZAR una paleta que no llega—, y ahí están los pares
   comprobados. Si tocas un color de aquí, pásalo por ese validador.
   =========================================================================== */

:root {
  /* La aplicación es de tema CLARO. Declararlo evita que un navegador en modo
     oscuro repinte por su cuenta los controles de formulario (y que un campo
     obligatorio acabe con texto claro sobre fondo claro). */
  color-scheme: light;

  /* --- Familia de MARCA (configurable por clínica) ----------------------- */
  --brand-primary: #0a4f9e;
  --brand-primary-contrast: #ffffff;
  --brand-accent: #2a5a65;
  --brand-header-surface: #ffffff;
  /* Derivado del primario para el estado :hover de los botones principales.
     Se recalcula junto con la marca (la SPA lo inyecta con los demás). */
  --brand-primary-hover: #073d7a;

  /* --- Familia BASE (estructura del producto) ---------------------------- */
  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface-sunken: #f8fafc;      /* fila resaltada, fondos hundidos */
  --surface-quiet: #eef2f7;       /* code, barras, chips neutros */
  --surface-tint: #fbfcfe;        /* cajas de lectura larga */
  --border: #dde3ea;
  --border-strong: #c4ccd6;
  --text: #1c2733;
  --muted: #475264;               /* micro-texto: 7.9:1 sobre blanco */
  --radius: 10px;

  /* Colores del PRODUCTO para la pantalla de acceso. NO son tokens de marca a
     propósito: el login se pinta antes de saber de qué clínica es quien entra
     (RF-10.2), así que no puede depender de la marca de nadie. */
  --login-from: #10263f;
  --login-to: #0a4f9e;

  /* Sombras y velos (el mismo azul oscuro del producto, con alfa) */
  --shadow-card: 0 20px 50px rgba(8, 25, 45, 0.35);
  --shadow-modal: 0 24px 60px rgba(8, 25, 45, 0.35);
  --backdrop: rgba(12, 24, 40, 0.55);

  /* --- Familia de ESTADO (NUNCA configurable — C11, VIS-V2) --------------- */
  /* Bloqueo ámbar: falta un paso y se puede resolver ahora. NO es un error. */
  --state-blocked: #7a4400;
  --state-blocked-bg: #fdf6e3;
  --state-blocked-border: #b97c09;
  /* Error: algo ha fallado. */
  --state-error: #981a1a;
  --state-error-bg: #fdecec;
  /* Éxito / activo. */
  --state-ok: #125c36;
  --state-ok-bg: #e9f7f0;
  --state-ok-border: #b7e2cc;
  /* Neutro: chips de remesa y estados sin carga semántica. */
  --state-neutral: #3b4a5c;
  --state-neutral-bg: #eef2f7;
  /* Banda de datos de DEMOSTRACIÓN. */
  --state-demo: #4a3a86;
  --state-demo-bg: #efecfa;

  /* --- Compatibilidad ----------------------------------------------------- */
  /* La SPA pinta cientos de `style="…"` con var(--primary), var(--border)…
     Estos alias mantienen esos nombres apuntando a la familia correcta, para
     no reescribir 7.000 líneas de cliente en una iteración de tema. */
  --primary: var(--brand-primary);
  --primary-dark: var(--brand-primary-hover);
  --danger: var(--state-error);
  --ok: var(--state-ok);
  --warn: var(--state-blocked);
  --line: var(--border);

  /* --- Paleta del módulo de CITACIÓN (base, no configurable salvo el acento) */
  --cita-head-text: var(--brand-primary-contrast);
  --cita-col-bg: #eef1f5;
  --cita-window: #ffffff;
  --cita-ruler-bg: #dcebee;
  --cita-ruler-border: #bcd4d9;
  --cita-ruler-line: #cadfe3;
  --cita-ruler-text: #2c5560;
  --cita-hour-line: #eef2f6;
  --cita-hour-line-strong: #dbe3ea;
  --cita-slot-hover: #dcebfd;
  --cita-past: rgba(148, 163, 184, 0.10);
  --cita-past-alt: rgba(148, 163, 184, 0.20);
  --on-brand-soft: rgba(255, 255, 255, 0.85);
  --on-brand-line: rgba(255, 255, 255, 0.35);
  --on-brand-hover: rgba(255, 255, 255, 0.25);
  --on-brand-outline: rgba(255, 255, 255, 0.9);
  --on-brand-border: rgba(255, 255, 255, 0.5);

  /* --- Estados de CITA (familia de estado del módulo de agenda) ----------- */
  --appt-scheduled-bg: #e3edfb;  --appt-scheduled-border: #9ec2ee;  --appt-scheduled-text: #17406f;
  --appt-confirmed-bg: #d9f0f6;  --appt-confirmed-border: #7cc6da;  --appt-confirmed-text: #0d4d5e;
  --appt-checked-bg: #fdf3dc;    --appt-checked-border: #eccf7d;    --appt-checked-text: #6a4f0c;
  --appt-progress-bg: #dcf3e6;   --appt-progress-border: #7fcfa4;   --appt-progress-text: #10552f;
  --appt-completed-bg: #e9ecf1;  --appt-completed-border: #c4ccd6;  --appt-completed-text: #4c5a6b;

  /* --- Azules suaves reutilizados (selección, sugerencias, insignias) ----- */
  --btn-neutral-bg: #e8edf3;
  --accent-soft-bg: #e7f0fd;
  --accent-soft-border: #b9d4f5;
  --bar-fill: #4a7fc1;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
}

.hidden { display: none !important; }
.muted { color: var(--muted); }
code { background: var(--surface-quiet); padding: 1px 5px; border-radius: 4px; font-size: 13px; }

/* Solo para lectores de pantalla: etiqueta un control que en pantalla se
   entiende por su contexto (RF-1.6). */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Foco VISIBLE en todo lo accionable. Sin esto, quien navega con el teclado no
   sabe dónde está (RF-1.6, AA en los flujos nuevos). */
:focus-visible {
  outline: 3px solid var(--brand-primary);
  outline-offset: 2px;
}

/* ---------- Login ---------- */
#login-view {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--login-from) 0%, var(--login-to) 130%);
  padding: 24px;
}

.login-card {
  background: var(--surface);
  border-radius: 14px;
  padding: 36px;
  width: 100%;
  max-width: 400px;
  box-shadow: var(--shadow-card);
}

.brand { text-align: center; margin-bottom: 24px; }
.brand h1 { font-size: 20px; margin: 12px 0 4px; }
.brand p { margin: 0; font-size: 13px; }

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 12px;
  background: var(--brand-primary);
  color: var(--brand-primary-contrast);
  font-weight: 700;
  letter-spacing: 1px;
}
.brand-mark.small { width: 34px; height: 34px; border-radius: 8px; font-size: 12px; }
/* Las pantallas SIN sesión llevan la marca del PRODUCTO, no la de una clínica:
   todavía no se sabe quién va a entrar (RF-10.2). */
#login-view .brand-mark, #totp-view .brand-mark, #credential-view .brand-mark {
  background: var(--login-to);
  color: var(--surface);
}

/* Logotipo de la clínica en la cabecera (si lo hay). Altura fija y ancho
   libre: un logotipo apaisado y uno cuadrado tienen que caber igual. */
.brand-logo { height: 30px; width: auto; max-width: 190px; object-fit: contain; display: block; }

label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 14px; }
input, select {
  width: 100%;
  margin-top: 5px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  background: var(--surface);
  color: var(--text);
}
input:focus, select:focus { outline: 2px solid var(--brand-primary); border-color: var(--brand-primary); }

.btn {
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: var(--btn-neutral-bg);
  color: var(--text);
}
.btn:hover { filter: brightness(0.96); }
.btn.primary { background: var(--brand-primary); color: var(--brand-primary-contrast); }
.btn.primary:hover { background: var(--brand-primary-hover); }
.btn.ghost { background: transparent; border-color: var(--border); }
.btn.danger { background: var(--state-error-bg); color: var(--state-error); }
.btn.full { width: 100%; }
.btn.sm { padding: 5px 10px; font-size: 13px; }

.error {
  background: var(--state-error-bg);
  color: var(--state-error);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
  margin: 12px 0 0;
}
.notice {
  background: var(--state-ok-bg);
  color: var(--state-ok);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
  margin: 12px 0 0;
}
/* Bloqueo que requiere una acción, no error (VIS-V2). Mismo hueco visual que
   .error y .notice, otro significado y otro color. */
.blocked {
  background: var(--state-blocked-bg);
  color: var(--state-blocked);
  border-left: 3px solid var(--state-blocked-border);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
  margin: 12px 0 0;
}
.pill.warn { background: var(--state-blocked-bg); color: var(--state-blocked); }
/* Texto legal desplazable del modal de consentimiento: se lee, no se adivina. */
.consent-text {
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--surface-tint);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.demo-users { margin-top: 20px; font-size: 13px; }
.demo-users summary { cursor: pointer; color: var(--state-demo); font-weight: 600; }
.demo-users ul { padding-left: 18px; margin: 8px 0 0; }
.demo-users li { margin-bottom: 3px; cursor: pointer; }
.demo-users li:hover { color: var(--brand-primary); }
/* Banda de DEMOSTRACIÓN: color de estado, idéntico en todas las clínicas. */
.demo-band {
  background: var(--state-demo-bg);
  color: var(--state-demo);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
}

/* ---------- App ---------- */
header {
  background: var(--brand-header-surface);
  border-bottom: 1px solid var(--border);
  padding: 12px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.header-user { display: flex; align-items: center; gap: 14px; font-size: 14px; }

.badge {
  display: inline-block;
  background: var(--accent-soft-bg);
  color: var(--brand-primary);
  font-size: 12px;
  font-weight: 600;
  border-radius: 20px;
  padding: 2px 10px;
  margin-left: 8px;
}

nav#tabs {
  display: flex;
  flex-wrap: wrap;   /* en tablet las pestañas saltan de línea, nunca se cortan */
  gap: 4px;
  padding: 10px 28px 0;
  background: var(--brand-header-surface);
  border-bottom: 1px solid var(--border);
}
header { flex-wrap: wrap; gap: 8px; }
nav#tabs button {
  border: none;
  background: none;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 3px solid transparent;
}
nav#tabs button.active { color: var(--brand-primary); border-bottom-color: var(--brand-primary); }

main { padding: 26px 28px; max-width: 1200px; margin: 0 auto; }

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 22px;
}
.panel h2 { margin: 0 0 4px; font-size: 17px; }
.panel .sub { margin: 0 0 16px; font-size: 13px; color: var(--muted); }

.panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.panel-head h2 { margin: 0; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); }
tr:hover td { background: var(--surface-sunken); }

.pill { display: inline-block; border-radius: 20px; padding: 2px 10px; font-size: 12px; font-weight: 600; }
.pill.on { background: var(--state-ok-bg); color: var(--state-ok); }
.pill.off { background: var(--state-error-bg); color: var(--state-error); }
.pill.perm { background: var(--state-neutral-bg); color: var(--state-neutral); margin: 2px 3px 2px 0; font-weight: 500; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  align-items: end;
}
.form-grid label { margin-bottom: 0; }

.perm-list { display: flex; flex-wrap: wrap; }

/* ---------- Panel (dashboard) ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 14px;
}
.stat-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
}
.stat-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.stat-value { font-size: 26px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }
.stat-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

.hbar-row {
  display: grid;
  grid-template-columns: minmax(120px, 170px) 1fr 84px;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 13px;
}
.hbar-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbar-track { background: var(--surface-quiet); border-radius: 4px; height: 16px; }
.hbar-fill { height: 100%; border-radius: 0 4px 4px 0; background: var(--bar-fill); min-width: 2px; }
.hbar-val { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- Modales ---------- */
dialog.modal {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  width: min(440px, 92vw);
  box-shadow: var(--shadow-modal);
  color: var(--text);
  background: var(--surface);
}
dialog.modal::backdrop { background: var(--backdrop); }
dialog.modal h3 { margin: 0 0 16px; font-size: 16px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* ---------- Citación: parrilla de huecos ---------- */
.cita-layout { display: flex; gap: 14px; align-items: flex-start; }
.cita-grid {
  display: flex;
  flex: 1 1 auto; min-width: 0;
  gap: 6px;
  overflow-x: auto;
  align-items: flex-start;
}
/* Banda lateral de mini-calendarios (estilo agenda clásica) */
.cita-months {
  flex: 0 0 148px;
  display: flex; flex-direction: column; gap: 8px;
  max-height: 860px; overflow-y: auto;
  padding-right: 2px;
}
.mini-month { background: var(--brand-accent); border-radius: 8px; padding: 6px 8px 8px; color: var(--cita-head-text); }
.mini-month .mm-head {
  font-size: 12px; font-weight: 700; text-transform: capitalize;
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid var(--on-brand-line); padding-bottom: 3px; margin-bottom: 3px;
}
.mini-month .mm-head span { font-weight: 500; font-size: 11px; color: var(--on-brand-soft); }
.mm-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; text-align: center; }
.mm-dow { font-size: 9px; color: var(--on-brand-soft); }
.mm-day {
  border: none; background: transparent; color: var(--cita-head-text);
  font-size: 10.5px; padding: 2px 0; cursor: pointer; border-radius: 4px;
  font-variant-numeric: tabular-nums;
}
.mm-day:hover { background: var(--on-brand-hover); }
.mm-day.today { outline: 1px solid var(--on-brand-outline); }
.mm-day.sel { background: var(--surface); color: var(--brand-accent); font-weight: 700; }
@media (max-width: 1000px) { .cita-months { display: none; } }

.cita-col {
  flex: 1 1 0; min-width: 230px; position: relative;
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
  background: var(--cita-col-bg);
}
.cita-col-head {
  position: sticky; top: 0; z-index: 5;
  background: var(--brand-accent); color: var(--cita-head-text); border-bottom: 1px solid var(--border);
  padding: 6px 10px; font-size: 13px; font-weight: 700; text-align: center;
  /* Altura FIJA: si cada cabecera midiera distinto (nombre a 2 líneas, etiquetas,
     botón), los cuerpos de columna quedarían desalineados respecto a su regla
     de horas y los huecos parecerían estar en otra hora. */
  height: 84px;
  overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px;
}
.cita-col-head .head-name {
  max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cita-col-head .muted { display: block; font-weight: 500; font-size: 11px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--on-brand-soft); }
.cita-col-head .head-actions { display: flex; align-items: center; gap: 6px; }
.cita-col-head .btn.ghost { color: var(--cita-head-text); border-color: var(--on-brand-border); }
.cita-body { position: relative; }
/* Regla horaria propia de cada columna */
.col-times {
  position: absolute; left: 0; top: 0; width: 46px; z-index: 1;
  background: var(--cita-ruler-bg); border-right: 1px solid var(--cita-ruler-border);
}
.col-time {
  position: absolute; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; color: var(--cita-ruler-text);
  border-bottom: 1px solid var(--cita-ruler-line);
  font-variant-numeric: tabular-nums;
}
.sch-window { position: absolute; right: 0; background: var(--cita-window); }
.hour-line { position: absolute; right: 0; border-top: 1px solid var(--cita-hour-line); pointer-events: none; }
.hour-line.strong { border-top-color: var(--cita-hour-line-strong); }
.slot {
  position: absolute; right: 2px; z-index: 2;
  border-radius: 4px; cursor: pointer;
  display: flex; align-items: center;
  padding: 0 8px;
  color: transparent; font-size: 10px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.slot:hover { background: var(--cita-slot-hover); color: var(--brand-primary); outline: 1px dashed var(--brand-primary); }
.slot:hover span::after { content: '  ·  citar aquí'; font-weight: 500; }
/* Horas ya pasadas (hoy): rayado gris, no citables. */
.past-overlay {
  position: absolute; left: 0; right: 0; z-index: 2;
  pointer-events: none;
  background: repeating-linear-gradient(-45deg,
    var(--cita-past) 0 6px, var(--cita-past-alt) 6px 12px);
}

.appt-block {
  position: absolute; right: 3px; z-index: 3;
  border-radius: 6px; padding: 3px 8px; font-size: 12px; overflow: hidden;
  cursor: pointer; border: 1px solid;
}
.appt-block strong {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-transform: uppercase; font-size: 11.5px; letter-spacing: .2px;
}
.appt-block .appt-payer {
  display: block; font-size: 10px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.appt-block .muted { display: block; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appt-scheduled  { background: var(--appt-scheduled-bg); border-color: var(--appt-scheduled-border); color: var(--appt-scheduled-text); }
.appt-confirmed  { background: var(--appt-confirmed-bg); border-color: var(--appt-confirmed-border); color: var(--appt-confirmed-text); }
.appt-checked_in { background: var(--appt-checked-bg);   border-color: var(--appt-checked-border);   color: var(--appt-checked-text); }
.appt-in_progress{ background: var(--appt-progress-bg);  border-color: var(--appt-progress-border);  color: var(--appt-progress-text); }
.appt-completed  { background: var(--appt-completed-bg); border-color: var(--appt-completed-border); color: var(--appt-completed-text); }
/* Dentro de un bloque de cita el .muted hereda el color del estado (que ya
   cumple contraste sobre su propio fondo); el gris general no valdría. */
.appt-block .muted, .appt-block .appt-payer { color: inherit; }
.slot-chip {
  display: inline-block; margin: 3px 5px 3px 0; padding: 6px 12px;
  background: var(--accent-soft-bg); color: var(--brand-primary);
  border: 1px solid var(--accent-soft-border); border-radius: 8px;
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.slot-chip:hover { background: var(--brand-primary); color: var(--brand-primary-contrast); }
.act-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 14px; }

/* Botones de comunicación (llamar / WhatsApp / SMS) */
.comm-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface);
  cursor: pointer; font-size: 13px; line-height: 1;
  margin-left: 3px; vertical-align: middle;
  text-decoration: none;
}
.comm-btn:hover { background: var(--accent-soft-bg); border-color: var(--brand-primary); }

.dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: baseline;
  flex: 0 0 auto;
}
.reason-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 12px; font-size: 12px; color: var(--muted); }
.reason-legend span { display: inline-flex; align-items: center; }

/* Búsqueda de paciente en la reserva */
.patient-results { max-height: 170px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; margin-top: 6px; }
.patient-results div { padding: 8px 12px; cursor: pointer; font-size: 14px; border-bottom: 1px solid var(--border); }
.patient-results div:last-child { border-bottom: none; }
.patient-results div:hover { background: var(--accent-soft-bg); }
.patient-selected {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--state-ok-bg); border: 1px solid var(--state-ok-border); border-radius: 8px;
  padding: 8px 12px; margin-top: 6px; font-size: 14px;
}

/* ---------- Historia clínica ---------- */
.note-card {
  border: 1px solid var(--border);
  border-left: 4px solid var(--brand-primary);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 12px;
  background: var(--surface-tint);
}
.note-card .note-meta { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.note-card p { margin: 0; white-space: pre-wrap; }
.note-card.rx { border-left-color: var(--state-ok); }
textarea {
  width: 100%;
  margin-top: 5px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  min-height: 90px;
  resize: vertical;
  background: var(--surface);
  color: var(--text);
}
.back-link { margin-bottom: 14px; display: inline-block; }

/* ---------- Segundo factor (rol plataforma) ---------- */
.totp-secret {
  display: block; font-size: 18px; letter-spacing: 2px;
  padding: 10px 12px; background: var(--surface-quiet); border: 1px solid var(--border);
  border-radius: 8px; word-break: break-all; text-align: center;
}
.totp-uri {
  display: block; font-size: 11px; padding: 8px 10px;
  background: var(--surface-quiet); border: 1px solid var(--border);
  border-radius: 8px; word-break: break-all; color: var(--muted);
}

/* ---------- Configurador de marca (iteración 1.10) ---------- */
.brand-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.brand-field input[type="color"] {
  width: 54px; height: 34px; padding: 2px; margin: 0 6px 0 0;
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface);
  vertical-align: middle; cursor: pointer;
}
.brand-field .brand-hex { width: 110px; display: inline-block; margin: 0; vertical-align: middle; }
.brand-field .brand-help { display: block; font-weight: 400; font-size: 12px; color: var(--muted); margin-top: 4px; }

/* Tabla de pares de contraste: aprobado/suspenso por par, en vivo. */
.pair-table td, .pair-table th { font-size: 13px; }
.pair-ratio { font-variant-numeric: tabular-nums; font-weight: 700; }
.pair-sample {
  display: inline-block; padding: 3px 10px; border-radius: 6px;
  font-size: 12px; font-weight: 600; border: 1px solid var(--border);
}
/* Muestra de un token de ESTADO: se enseña, no se edita (C11). */
.state-swatch {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--border);
}
.state-lock { font-size: 11px; color: var(--muted); font-weight: 500; }

/* ===========================================================================
   IMPRESIÓN (RF-1.5)
   ===========================================================================
   Dos cosas distintas se imprimen en este sistema:

     1. LOS IMPRESOS (ticket de caja, factura, presupuesto, receta oficial,
        justificante de supresión), que se abren en su propia ventana con su
        propia hoja de estilo — la escribe printHTML() en public/app.js.
     2. LA PANTALLA, cuando alguien pulsa Ctrl+P sobre la aplicación. Para eso
        es esta hoja: quita el cromo (cabecera, pestañas, botones, modales) y
        deja el contenido en negro sobre blanco.

   En ambos sitios se fuerza `color-scheme: light` y el fondo BLANCO. La lección
   es del justificante de la iteración 1.6: un navegador en modo oscuro le
   aplica su propio fondo a la página, y lo que sale por la impresora es un
   documento con bandas grises —o, en el peor caso, texto claro que no se lee.
   El impreso de una clínica es un documento fiscal: no puede depender de cómo
   tenga configurado el tema quien le da a imprimir. */
@media print {
  :root { color-scheme: light; }

  html, body {
    background: #ffffff !important;
    color: #000000 !important;
  }

  /* El cromo de la aplicación no es parte de ningún documento. */
  header, nav#tabs, .btn, button, dialog, .demo-users, .comm-btn { display: none !important; }

  main { padding: 0; max-width: none; }

  .panel, .stat-tile {
    background: #ffffff !important;
    border: 1px solid #999999;
    box-shadow: none;
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 10px;
  }

  /* Los colores de estado se convierten en texto legible: una píldora verde y
     una roja impresas en escala de grises son la misma mancha. */
  .pill, .badge {
    background: transparent !important;
    color: #000000 !important;
    border: 1px solid #666666;
  }

  a[href]::after { content: ""; }   /* nada de URLs pegadas al texto */
}