/* ══════════════════════════════════════════════════════════════════════════════════════════
   PALETA — un solo lugar (2026-08-24, pedido del dueño: "no hay paleta de colores definida").
   Antes cada componente traía su propio verde a mano (~12 hex distintos, sin relación entre sí,
   repetidos con variaciones al azar). Ahora todo sale de acá: cambiar la marca es cambiar estas
   variables, no perseguir cada `.btn-primary`/`.card-custom` del archivo.

   Tomada del logo de PMS (public/images/PMSLogo.jpg, 2026-08-27): el azul profundo de la figura
   como primario, el celeste del degradé como luz y el verde agua de la columna/tilde como acento.
   Los tres valores salen de muestrear el archivo, no de inventarlos al lado. Los semánticos
   (peligro/alerta) son DELIBERADAMENTE otra familia de color, no variaciones de azul — así un
   estado (error, aviso) nunca se confunde con "esto es de la marca".

   CONTRASTE: cada par texto/fondo de acá abajo pasa WCAG AA (4.5:1). Los dos claros
   (`primary-light`, `accent-light`) NO lo pasan y por eso nunca llevan texto blanco encima:
   son decorativos (degradés, bordes, chips con tinta oscura). Antes `.btn-success` pintaba
   texto blanco sobre el claro y quedaba en 2.6:1 — ahora usa `accent`, que da 5.2:1.
   ══════════════════════════════════════════════════════════════════════════════════════════ */
/* Tipografía (2026-08-25). Bootstrap deja la del sistema, que en Windows es Segoe UI y en otras
   máquinas cualquier cosa — el panel se veía distinto según dónde se abriera. Inter es una
   humanista pensada para interfaces: números legibles y buena densidad en tablas y texto chico,
   que es casi todo lo que hay acá.

   SERVIDA DESDE public/vendor/, no desde Google Fonts: el panel tiene que funcionar sin internet
   (ver TODO.md — es la máquina de un fisio atendiendo, no un sitio web). Es una fuente VARIABLE:
   un solo archivo cubre de 400 a 800, por eso hay un @font-face por subset y no uno por peso.
   Solo latin y latin-ext — el resto de los subsets de Google (cirílico, griego, vietnamita) no
   los usa nadie en es-UY y sumaban 300 KB al pedo. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/vendor/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/vendor/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --pms-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Marca — el azul del logo */
  --pms-primary: #0D63B0;        /* fondo de botón y header; texto blanco encima da 6.1:1 */
  --pms-primary-dark: #0A4A85;   /* hover, links y títulos sobre claro: 9.0:1 */
  --pms-primary-light: #2BA7D8;  /* el celeste — decorativo, nunca bajo texto blanco */
  --pms-primary-soft: #E3F1FB;   /* fondo tenue de badges y botón secundario */

  /* Acento — el verde agua del logo (la columna y el tilde del calendario) */
  --pms-accent: #0B7A6D;         /* texto blanco encima: 5.2:1 */
  --pms-accent-light: #16BFA6;   /* decorativo */
  --pms-accent-soft: #DEF5F0;

  /* Neutrales fríos — un gris con azul adentro, para que apoyen a la marca sin competirle */
  --pms-ink: #15232E;
  --pms-ink-soft: #54646F;
  --pms-line: #D2E0EA;
  --pms-bg-from: #DBEBF8;        /* el degradé del fondo va de azul a agua, como el logo */
  --pms-bg-to: #E8F5F3;
  --pms-surface: #F4F9FC;

  /* Semántico — otra familia de color a propósito, no tonos de azul */
  --pms-danger: #B3261E;
  --pms-warning: #8A6A00;
}

body {
  font-family: var(--pms-font);
  color: var(--pms-ink);
  /* Los números de una tabla (dolor, sesiones, fechas) tienen que alinearse en columna. */
  font-variant-numeric: tabular-nums;
}

/* Títulos: un poco más apretados que el default. A tamaños grandes el tracking suelto de Inter
   se nota, y el panel tiene muchos h1/h2 cortos. */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  letter-spacing: -0.011em;
}

/* Foco visible y consistente en todo lo interactivo. Bootstrap lo resuelve por componente y
   quedaban elementos (los botones-link de editar, los ítems del nav) sin nada. */
:focus-visible {
  outline: 2px solid var(--pms-primary);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Fondo general */
.bg-custom {
  background: linear-gradient(135deg, var(--pms-bg-from), var(--pms-bg-to));
  min-height: 100vh;
}

/* Tarjetas y controles: bordes un toque más suaves y una transición corta en lo que responde al
   mouse. Nada de animación decorativa — solo que el hover no sea un salto. */
.card-custom { border-radius: .6rem; }
.btn { transition: background-color .12s ease, border-color .12s ease, color .12s ease; }

/* Bloques dentro de la tarjeta de episodio (Triage, Observación, Preconsulta...). Antes eran
   `div`s sueltos separados solo por margen: con seis seguidos no se leía dónde terminaba uno y
   empezaba el otro. Una línea al tope alcanza — más peso visual competiría con las tarjetas. */
.ep-bloque {
  padding-top: .75rem;
  border-top: 1px solid var(--pms-line);
}

/* Encabezado */
.bg-header {
  background-color: var(--pms-primary);
}

/* La lupita de la navbar (D133). Fondo azul tenue en vez del blanco, a pedido del dueño.

   Usa `--pms-primary-soft`, el token que ya existía para "fondo tenue de la marca" (badges y
   botón secundario) en vez de un celeste nuevo: el `--pms-primary-light` saturado bajo texto
   está declarado como DECORATIVO en la paleta (D130) y no se lee bien. Sobre este, la tinta
   normal da contraste de sobra.

   Al enfocarlo pasa a blanco: es la señal de que está activo, y sobre el header azul un campo
   que no cambia al tocarlo se siente muerto. El anillo de foco es el celeste de la marca, no el
   azul default de Bootstrap. */
.pms-buscador .form-control,
.pms-buscador .input-group-text {
  background-color: var(--pms-primary-soft);
  border: 0;
  color: var(--pms-ink);
}
.pms-buscador .form-control::placeholder {
  color: var(--pms-ink-soft);
  opacity: 1; /* Firefox lo baja a .54 por su cuenta y el placeholder queda casi invisible */
}
.pms-buscador .form-control:focus {
  background-color: #fff;
  box-shadow: 0 0 0 0.2rem rgba(43, 167, 216, 0.45);
}

/* Marca de PMS. El logo YA es un cuadrado redondeado con esquinas transparentes (lo genera
   scripts/generar-icono.js a partir de PMSLogo.jpg), así que acá no hay nada que recortar ni
   que escalar: se muestra entero. El `scale(1.35)` que había antes existía para tapar el fondo
   papel del logo viejo y hoy solo comería el borde del cuadrado. */
.pms-mark {
  width: 30px;
  height: 30px;
  display: inline-flex;
  flex-shrink: 0;
}
.pms-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.pms-mark-lg {
  width: 76px;
  height: 76px;
  margin: 0 auto 12px;
}
.pms-mark-lg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Tarjeta del formulario */
.card-custom {
  background-color: var(--pms-surface);
  border: 1px solid var(--pms-line);
}

/* Títulos dentro de la tarjeta */
.card-custom h2 {
  color: var(--pms-primary-dark);
  font-weight: bold;
}

/* Botones personalizados */
.btn-primary {
  background-color: var(--pms-primary);
  border-color: var(--pms-primary-dark);
}

.btn-primary:hover {
  background-color: var(--pms-primary-dark);
  border-color: var(--pms-primary-dark);
}

/* `.btn-success` es el verde agua de la marca, no el verde de Bootstrap: es la acción que
   confirma (guardar la sesión, confirmar el turno) y conviene que se distinga del azul de la
   acción principal sin salirse del logo. Va sobre `accent` y no sobre `accent-light` porque
   Bootstrap le pone texto blanco: el claro daría 2.3:1. */
.btn-success {
  background-color: var(--pms-accent);
  border-color: var(--pms-accent);
}

.btn-success:hover {
  background-color: #095F55;
  border-color: #095F55;
}

.btn-secondary {
  background-color: var(--pms-primary-soft);
  border-color: var(--pms-line);
  color: var(--pms-primary-dark);
}

.btn-secondary:hover {
  background-color: var(--pms-line);
  border-color: var(--pms-primary-light);
}

/* Links: por defecto Bootstrap los pinta azules — quedaban desentonando contra un panel entero
   en verde (el síntoma más visible: los "Volver" con azul de fábrica). */
a { color: var(--pms-primary-dark); }
a:hover { color: var(--pms-primary); }

/* Slider escala de dolor */
.dolor-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(to right, var(--pms-primary-light), var(--pms-danger));
  outline: none;
  cursor: pointer;
  margin: .5rem 0 .25rem;
}

.dolor-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--pms-primary);
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: border-color .15s;
}

.dolor-slider::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--pms-primary);
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  cursor: pointer;
}

.dolor-slider::-webkit-slider-thumb:hover,
.dolor-slider::-moz-range-thumb:hover {
  border-color: var(--pms-danger);
}

.dolor-labels {
  display: flex;
  justify-content: space-between;
  font-size: .78rem;
  color: #757575;
}

/* Badges obligatorio / opcional */
/* Badge que puede llevar texto largo (banderas de triage, sobre todo). Bootstrap le pone
   `white-space: nowrap` a TODO .badge, así que un badge con cuatro criterios adentro no corta
   nunca: se estira hacia la derecha y arrastra la fila entera fuera de la pantalla. Esto lo
   deja envolver como cualquier texto, alineado a la izquierda (el default de .badge es
   centrado, que en dos o tres líneas se lee mal). */
.badge-wrap {
  white-space: normal;
  text-align: left;
  display: inline-block;
  max-width: 100%;
}

.badge-req {
  font-size: .7rem;
  font-weight: 600;
  color: var(--pms-danger);
  margin-left: .4rem;
}

.badge-opt {
  font-size: .7rem;
  font-weight: 400;
  color: var(--pms-ink-soft);
  margin-left: .4rem;
}

/* Secciones del formulario */
.form-section {
  margin-bottom: 1.75rem;
}

.section-header {
  background-color: var(--pms-primary-soft);
  color: var(--pms-primary-dark);
  font-weight: 700;
  font-size: .85rem;
  padding: .45rem .75rem;
  border-left: 4px solid var(--pms-primary);
  border-radius: .25rem;
  margin-bottom: 1.25rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Labels más legibles para adultos mayores */
.form-label {
  font-size: 1rem;
  font-weight: 500;
  color: var(--pms-ink);
}

/* Ítems de los menús de categoría del nav (admin-nav.ejs) — sin esto, pasar el mouse sobre
   "Preconsultas"/"Cuestionarios"/etc no pintaba nada: no había ninguna regla de :hover propia y
   la de Bootstrap no estaba pegando contra el resto de la cascada. */
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--pms-primary-soft);
  color: var(--pms-primary-dark);
}

/* ── Volver / flechas (2026-08-24, pedido del dueño) ──────────────────────────────────────────
   Antes: 7 links de "Volver" repetidos a mano, cada uno `class="small"` sin más — heredaban el
   azul y el subrayado de fábrica de Bootstrap, que no pega con un panel en verde. Y `←`/
   `→` como texto crudo en ~20 lugares — el glifo depende de la fuente del sistema, así que
   se ve distinto (y chico/grueso) según el navegador. Acá se dibujan con dos bordes rotados
   45°: un triángulo limpio que escala con `currentColor`, no con la tipografía. */
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--pms-primary-dark);
  text-decoration: none;
}
.btn-back:hover { color: var(--pms-primary); }
.btn-back::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  flex-shrink: 0;
}

.icon-chevron {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
  margin: 0 .15rem 1px .3rem;
  vertical-align: middle;
}
.icon-chevron.left {
  transform: rotate(-135deg);
  margin: 0 .3rem 1px .15rem;
}

/* Checkboxes en columnas */
.check-grid {
  columns: 2;
  column-gap: 1.5rem;
}

.check-grid .form-check {
  break-inside: avoid;
}

/* Color dots */
.color-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  transition: .15s;
}
.color-dot.selected {
  border-color: #000;
  transform: scale(1.1);
}
.color-dot[data-color="blue"]   { background: #0064ff; }
.color-dot[data-color="violet"] { background: #7800c8; }
/* Lápiz del body chart de la sesión: verde y opaco, para flechas y marcas precisas. Se distingue
   del pincel a propósito — el azul es una mancha difusa que señala zonas, esto es un trazo. */
.color-dot[data-color="green"]  { background: #00963c; }

/* "Mover" no es un dot, pero usa el mismo lenguaje de selección que pincel/goma: borde
   negro cuando está activo, sin cambiar de color de fondo (nada de btn-secondary). */
#moveTool.tool-active {
  border: 2px solid #000;
  font-weight: 600;
}

/* Cartelito que avisa que "Mover" solo tiene sentido con zoom activo. Aparece pegado al
   botón y se oculta solo (lo maneja el JS con un timeout). */
.move-toast {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: .35rem;
  background: #333;
  color: #fff;
  font-size: .75rem;
  padding: .3rem .6rem;
  border-radius: .35rem;
  white-space: nowrap;
  z-index: 50;
  pointer-events: none;
}

/* Goma: mismo tamaño/borde/selección que los dots de color, para que elegirla se sienta
   igual que elegir un color (nada de un botón con otra forma/estilo aparte). */
.eraser-dot {
  background: #eceff1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='rotate(-25 12 12)'%3E%3Crect x='5' y='9' width='14' height='8' rx='1.6' fill='%23ffffff' stroke='%23666' stroke-width='1.2'/%3E%3Crect x='5' y='9' width='14' height='3.5' rx='1.6' fill='%23ff8fa3'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / 16px 16px;
}

.eraser-label {
  cursor: pointer;
  user-select: none;
}

/* Canvas grid */
.chart-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

/* Alterna entre las dos vistas de un par (frente/espalda, derecho/izquierdo). Solo tiene sentido
   en desktop: en mobile el nav de abajo ya recorre las cuatro de a una. */
.chart-swap {
  display: block;
  margin: 0 auto .5rem;
  font-size: .8rem;
}

@media (max-width: 768px) {
  .chart-swap { display: none; }
}

.chart-card {
  background: white;
  padding: .75rem;
  border-radius: .5rem;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
  text-align: center;
}

.chart-card h6 { margin-bottom: .5rem; }

/* Ventana de zoom: a 100% no tiene overflow ni alto fijo (se ve todo el cuerpo, como
   siempre). Al hacer zoom el JS le fija un alto (el que tenía a 100%) y prende overflow:auto
   — ahí el scroll nativo (mouse wheel/scrollbar en desktop, o gesto de "Mover"/2 dedos en
   mobile) permite pasear la vista ampliada. */
.chart-viewport { overflow: hidden; }

/* Dos canvas apilados: el de fondo (silueta, fijo) fija el tamaño en flujo normal;
   el de pintura va absoluto encima, transparente, mismo tamaño. Así "Borrar" y la goma
   solo tocan la capa de pintura sin perder ni tener que redibujar el fondo. El wrap crece
   en ancho (%) cuando hay zoom; a 100% ocupa el mismo lugar de siempre. */
.chart-canvas-wrap { position: relative; width: 100%; }

.chart-canvas-bg {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #e0e0e0;
  border-radius: .25rem;
  background-color: #fff;
}

.chart-canvas-paint {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* pan-x + pan-y: permite scroll nativo en ambos ejes (necesario con zoom, que puede
     desbordar en ancho y alto) por defecto; el JS llama preventDefault() solo cuando el
     toque cae sobre el cuerpo y se está pintando/borrando con un dedo. */
  touch-action: pan-x pan-y;
}

@media (max-width: 768px) {
  .chart-grid { grid-template-columns: 1fr; }
}

/* Círculo que sigue al dedo mientras se borra en mobile (ahí no hay cursor que muestre el
   tamaño de la goma como en desktop). Posición/tamaño los pone el JS en cada touchmove. */
.eraser-indicator {
  display: none;
  position: fixed;
  border: 2px solid #ff5c7a;
  border-radius: 50%;
  background: rgba(255, 92, 122, 0.15);
  pointer-events: none;
  z-index: 2000;
  transform: translate(-50%, -50%);
}

/* Mobile nav del body chart */
.mobile-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: .75rem;
  padding: .6rem .75rem;
  background: var(--pms-primary-soft);
  border: 1px solid var(--pms-line);
  border-radius: .5rem;
}

.mobile-nav .btn {
  min-width: 90px;
  font-weight: 600;
  font-size: .9rem;
  background-color: var(--pms-primary);
  border-color: var(--pms-primary-dark);
  color: #fff;
}

.mobile-nav .btn:hover {
  background-color: var(--pms-primary-dark);
  border-color: var(--pms-primary-dark);
}

#mobileViewLabel {
  font-size: 1rem;
  font-weight: 700;
  color: var(--pms-primary-dark);
  text-align: center;
  line-height: 1.3;
}

/* Tooltip informativo sobre tarjetas del dashboard (admin/dashboard.ejs): un "?" al lado del
   título de la tarjeta que explica exactamente qué mide el número, sobre qué base se calcula.
   CSS puro, sin JS ni Popper/bootstrap.bundle.js: el texto vive en data-tooltip y se muestra con
   ::before al hacer hover o foco (tabindex="0", así funciona con teclado, no solo con mouse). */
.stat-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--pms-primary-soft);
  color: var(--pms-primary-dark);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  margin-left: .35rem;
  vertical-align: middle;
}

.stat-info::before,
.stat-info::after {
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease;
  position: absolute;
  z-index: 30;
  pointer-events: none;
}

.stat-info::before {
  content: attr(data-tooltip);
  bottom: 135%;
  left: 50%;
  transform: translateX(-50%);
  background: #263238;
  color: #fff;
  padding: .5rem .65rem;
  border-radius: .35rem;
  font-size: .75rem;
  font-weight: 400;
  line-height: 1.35;
  width: max-content;
  max-width: 240px;
  text-align: left;
  white-space: normal;
}

.stat-info::after {
  content: "";
  bottom: 122%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #263238;
}

.stat-info:hover::before, .stat-info:hover::after,
.stat-info:focus-visible::before, .stat-info:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

/* Visor ampliado de body chart (partials/body-chart-visor.ejs). Overlay propio, sin el modal de
   Bootstrap ni ninguna librería de lightbox: son 30 líneas y evita cargar bootstrap.bundle.js. */
.chart-visor {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, .82);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.chart-visor-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  max-width: 720px;
  color: #fff;
  font-weight: 600;
  margin-bottom: .5rem;
}

.chart-visor img {
  max-width: min(92vw, 720px);
  /* El alto lo limita el viewport menos la barra, para que nunca haya que scrollear el overlay */
  max-height: 82vh;
  object-fit: contain;
  background: #fff;
  border-radius: .5rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}

/* Slider NEUTRO para los cuestionarios. `.dolor-slider` pinta un degradado verde→rojo, que en la
   escala de dolor es correcto (10 = peor) pero en un cuestionario miente: varios ítems están
   redactados al revés —"¿podés dormir de noche?", donde 10 es lo BUENO— y el degradado los
   pintaría de rojo justo en la respuesta deseable. Como la dirección cambia ítem por ítem, la
   única opción honesta es no sugerir ninguna: gris parejo, y que hablen los rótulos de las puntas. */
.escala-neutra {
  background: var(--pms-line);
}

/* Barra de aporte de un ítem de cuestionario. El puntaje total dice cuánto; esto dice de dónde
   viene. Es lo que vuelve escaneable la lista de respuestas: los ítems que empujan el puntaje se
   ven sin leer un solo número. Va de claro a oscuro y no de verde a rojo — "aporta mucho" no es
   ni bueno ni malo por sí solo, depende de qué mida el instrumento. */
.barra-item {
  background: var(--pms-line);
  border-radius: 3px;
  height: 8px;
  overflow: hidden;
}
.barra-item > span {
  display: block;
  height: 100%;
  background: var(--pms-primary, #0D63B0);
  /* Un aporte de 0 tiene que verse como una barra vacía, no como una barra rota. */
  min-width: 0;
}

/* D136 — los cuatro dibujos del patrón temporal del painDETECT. El trazo usa currentColor, así que
   toma el color del botón: azul sin elegir, blanco sobre azul cuando está elegido. */
.bq-trayectoria svg {
  display: block;
  width: 100%;
  max-width: 140px;
  height: 48px;
  margin: 0 auto .25rem;
}
.bq-trayectoria path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.bq-trayectoria .bq-eje {
  stroke: currentColor;
  stroke-width: 1;
  opacity: .35;
}
/* D141 — el deslizador de los ítems sensoriales del painDETECT. Sin tocar se ve apagado: el
   pulgar está en 0 solo porque un range tiene que estar en algún lado, y eso no es una respuesta. */
.bq-deslizador { max-width: 560px; }
.bq-deslizador .bq-sin-tocar { opacity: .4; }
.bq-deslizador-marcas span { flex: 1; text-align: center; font-size: .75rem; }
.bq-deslizador-marcas span:first-child { text-align: left; }
.bq-deslizador-marcas span:last-child { text-align: right; }
.bq-deslizador.bq-falta { outline: 2px solid #dc3545; outline-offset: 4px; border-radius: 4px; }

/* D141 — el aviso al paciente cuando el pretriage da emergencia o urgencia. */
.pretriaje-aviso { text-align: left; }

/* Los números de las escalas de 0 a 10: todos del mismo ancho, para que la fila no baile. */
.bq-escala-num {
  min-width: 2.4rem;
}