/* Piezas propias del centro: ficha del cliente, bono gastado por una visita, filtros con fecha y avisos de cobro. */
.kpi.warn .val {
  color: var(--warn);
}
.ficha-volver {
  margin: 4px 0 10px;
}
.ficha-contacto {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  align-items: center;
  margin-top: 6px;
  color: var(--muted);
}
.ficha-contacto a {
  color: var(--accent);
  text-decoration: none;
}
.cv-head {
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.cv-head .bactions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
h2.sec-t {
  font-family: var(--f-display);
  font-size: 1.05rem;
  margin: 22px 0 10px;
}
/* Bono que gasta una visita (detalle de la visita) */
.bono-uso {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bono-uso .bactions {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.bono-uso .bactions .fld {
  flex: 1 1 260px;
}
.bcard-h .ttl a.t-title {
  color: var(--accent);
  text-decoration: none;
}
.tachado {
  text-decoration: line-through;
  color: var(--muted);
}
/* Fecha con etiqueta dentro de la barra de filtros */
.fld-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}
.aj-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Tablet: botones y filas algo más altos para el dedo */
@media (pointer: coarse) {
  .btn {
    min-height: 40px;
  }
  .btn.sm {
    min-height: 34px;
  }
  tr.click td {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .seg button {
    min-height: 38px;
  }
}
/* Enlace al cliente en la cabecera de una ventana */
.m-head h2 a {
  color: var(--accent);
  text-decoration: none;
}
/* Aviso de contraindicaciones (ficha y visitas) */
.contra-aviso {
  border: 2px solid var(--crit);
  background: var(--crit-soft);
  color: var(--crit);
  border-radius: var(--r);
  padding: 10px 14px;
  margin: 0 0 12px;
  font-size: 15px;
}
.contra-aviso b {
  font-size: 16px;
}
.contra-aviso ul {
  margin: 4px 0 0;
  padding-left: 20px;
}
.contra-aviso.cargando {
  border-style: dashed;
  font-size: 13px;
}
.consent-aviso {
  margin: 0 0 12px;
}
.consent-aviso a {
  color: inherit;
  font-weight: 600;
}
/* Capas a pantalla completa: modo firma y pantalla bloqueada (por encima de todo) */
html.con-capa body {
  overflow: hidden;
}
.capa {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.capa-bloqueo {
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.capa[hidden] {
  display: none;
}
.bloq-card {
  width: min(360px, 100%);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.bloq-card h1 {
  font-family: var(--f-display);
  margin: 0;
}
.bloq-card p {
  margin: 0;
}
.bloq-ico svg {
  width: 44px;
  height: 44px;
  color: var(--accent);
}
.pin-puntos {
  display: flex;
  gap: 12px;
  min-height: 18px;
  margin: 6px 0;
}
.pin-puntos i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--accent);
}
.pin-puntos i.on {
  background: var(--accent);
}
.pin-teclas {
  display: grid;
  grid-template-columns: repeat(3, 76px);
  gap: 12px;
}
.tecla {
  height: 64px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--fg);
  font-size: 24px;
  font-family: var(--f-body);
  cursor: pointer;
}
.tecla:active {
  background: var(--accent-soft);
}
.tecla.ok {
  border-radius: 32px;
  font-size: 15px;
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.bloq-pass {
  display: flex;
  gap: 8px;
  width: 100%;
}
.bloq-pass input {
  flex: 1;
}
/* Modo firma */
.firma-cab {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px max(16px, env(safe-area-inset-left));
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.firma-cuerpo {
  max-width: 860px;
  margin: 0 auto;
  padding: 20px 16px 10px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.firma-cuerpo h1 {
  font-family: var(--f-display);
  margin: 0;
}
.firma-cuerpo > .muted {
  margin: -10px 0 0;
}
.firma-texto {
  white-space: pre-wrap;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px 18px;
  font-size: 16px;
  line-height: 1.55;
  max-height: 46vh;
  overflow: auto;
}
.firma-acepto {
  font-size: 17px;
}
.firma-acepto input {
  width: 24px;
  height: 24px;
}
.firma-decision button {
  min-height: 46px;
  min-width: 140px;
  font-size: 16px;
}
.firma-lienzo {
  position: relative;
  height: 220px;
  background: #fff;
  border: 2px dashed var(--line-strong);
  border-radius: var(--r);
}
.firma-lienzo canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
}
.firma-guia {
  position: absolute;
  left: 16px;
  bottom: 12px;
  color: #8d938a;
  pointer-events: none;
}
.firma-lienzo.con-firma .firma-guia {
  display: none;
}
.firma-pie {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.firma-pie .btn {
  min-height: 48px;
  min-width: 130px;
  font-size: 16px;
}
/* Los avisos emergentes, por encima de las capas */
.toast {
  z-index: 120;
}
.firma-lienzo,
.firma-pie,
.firma-cab {
  -webkit-user-select: none;
  user-select: none;
}
/* Que la barra fija de abajo no tape el lienzo al desplazarse hasta él */
.capa-firma {
  scroll-padding: 70px 0 90px;
}
.firma-cuerpo {
  padding-bottom: 24px;
}
/* La barra de «Firmar» siempre abajo, aunque el texto sea corto */
.capa-firma:not([hidden]) {
  display: flex;
  flex-direction: column;
}
.capa-firma .firma-cuerpo {
  flex: 1 0 auto;
  width: 100%;
}
/* ===== Fase 4 · Mapa, editor, historial, fotos y temporizador ===== */
/* Colores de las técnicas: paleta categórica validada (orden fijo); cada técnica tiene además su forma */
:root {
  --tec-aguja: #2a78d6;
  --tec-moxa: #eb6834;
  --tec-ventosa: #1baf7a;
  --tec-electro: #eda100;
  --tec-semilla: #e87ba4;
  --serie-1: #2a78d6;
  --sil: #ece8e1;
  --sil-borde: #8d938a;
  --sil-det: #b9b2a5;
  --mapa-fondo: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --tec-aguja: #3987e5;
    --tec-moxa: #d95926;
    --tec-ventosa: #199e70;
    --tec-electro: #c98500;
    --tec-semilla: #d55181;
    --serie-1: #3987e5;
    --sil: #2a312b;
    --sil-borde: #778073;
    --sil-det: #4c554d;
    --mapa-fondo: #191d1a;
  }
}
:root[data-theme='dark'] {
  --tec-aguja: #3987e5;
  --tec-moxa: #d95926;
  --tec-ventosa: #199e70;
  --tec-electro: #c98500;
  --tec-semilla: #d55181;
  --serie-1: #3987e5;
  --sil: #2a312b;
  --sil-borde: #778073;
  --sil-det: #4c554d;
  --mapa-fondo: #191d1a;
}
.modal {
  z-index: 105; /* por encima del editor, por debajo de la pantalla bloqueada */
}
svg.mapa {
  display: block;
  max-width: 100%;
  height: auto;
}
.mapa .sil {
  fill: var(--sil);
  stroke: var(--sil-borde);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}
.mapa .sil-det {
  fill: none;
  stroke: var(--sil-det);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.mapa-lado {
  fill: var(--muted);
  font-family: var(--f-body);
  font-weight: 600;
}
/* Marca: color de su técnica y anillo del color del fondo para separarla de la silueta y de las demás */
.marca {
  stroke: var(--mapa-fondo);
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
}
.marca.t-aguja {
  fill: var(--tec-aguja);
}
.marca.t-moxa {
  fill: var(--tec-moxa);
}
.marca.t-electro {
  fill: var(--tec-electro);
}
.marca.t-semilla {
  fill: var(--tec-semilla);
}
.marca.t-ventosa {
  fill: none;
  stroke: var(--tec-ventosa);
  stroke-width: 3px;
}
.marca.previa {
  fill: var(--sil-det);
  stroke: var(--mapa-fondo);
  opacity: 0.85;
}
.marca.previa.t-ventosa {
  fill: none;
  stroke: var(--sil-det);
}
.marca.sel {
  stroke: var(--fg);
  stroke-width: 3px;
}
.marca-et {
  fill: var(--fg);
  font-family: var(--f-mono);
  paint-order: stroke;
  stroke: var(--mapa-fondo);
  stroke-width: 3px;
  vector-effect: non-scaling-stroke;
}
.mapa-minis {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.mapa-mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px;
  background: var(--mapa-fondo);
  border: 1px solid var(--line);
  border-radius: var(--r);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  color: var(--muted);
}
button.mapa-mini:hover {
  border-color: var(--accent);
}
.mapa-grande {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--mapa-fondo);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 10px;
  margin: 10px 0;
}
.mapa-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 13px;
  color: var(--muted);
  margin: 6px 0 10px;
}
.mapa-leyenda span,
.tec {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.mapa-leyenda svg .marca,
.tec svg .marca,
.marcas-tabla svg .marca,
.ed-herr svg .marca {
  stroke-width: 1.5px;
}
.marcas-tabla tr.sel td {
  background: var(--accent-soft);
}
.clinica {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 4px 0 6px;
}
/* Fotos */
.fotos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.foto-mini {
  width: 96px;
  height: 96px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-weight: 600;
}
.foto-mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.foto-nueva {
  border-style: dashed;
}
.foto-grande {
  display: block;
  max-width: 100%;
  max-height: 70vh;
  margin: 0 auto;
  border-radius: var(--r);
}
/* Editor de la visita (pantalla completa) */
.capa-editor:not([hidden]) {
  display: flex;
  flex-direction: column;
}
.ed-cab {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.ed-cab .bactions {
  display: flex;
  gap: 8px;
}
.ed-avisos {
  padding: 10px 16px 0;
}
.ed-avisos:empty {
  display: none;
}
.ed-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr);
  gap: 16px;
  padding: 12px 16px 24px;
  align-items: start;
}
.ed-mapa,
.ed-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.ed-vistas,
.ed-herr .seg {
  flex-wrap: wrap;
}
.ed-herr {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ed-herr .seg button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ed-lienzo {
  display: flex;
  justify-content: center;
  background: var(--mapa-fondo);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 8px;
}
.ed-lienzo svg {
  touch-action: none;
  cursor: crosshair;
  -webkit-user-select: none;
  user-select: none;
}
.ed-lienzo .marca:not(.previa) {
  cursor: grab;
}
.ed-ayuda {
  margin: 0;
}
.ed-mapa .bactions,
.ed-panel .bactions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ed-marca {
  border-color: var(--accent);
}
.dolor-escala {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: 4px;
}
.dolor-escala button {
  min-height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  cursor: pointer;
}
.dolor-escala button[aria-pressed='true'] {
  background: var(--fg);
  color: var(--surface);
  border-color: var(--fg);
}
@media (max-width: 900px) {
  .ed-cuerpo {
    grid-template-columns: 1fr;
  }
}
/* Historial */
.dolor-graf {
  margin: 0 0 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px 14px;
}
.dolor-lienzo {
  position: relative;
}
.dolor-lienzo svg {
  display: block;
  width: 100%;
  height: auto;
}
.dolor-graf .rejilla {
  stroke: var(--line);
  stroke-width: 1;
}
.dolor-graf .eje {
  fill: var(--muted);
  font-size: 12px;
  font-family: var(--f-body);
}
.dolor-graf .serie {
  fill: none;
  stroke: var(--serie-1);
  stroke-width: 2;
  stroke-linejoin: round;
}
.dolor-graf .punto {
  fill: var(--serie-1);
  stroke: var(--surface);
  stroke-width: 2;
}
.dolor-graf .hit {
  fill: transparent;
}
.dolor-graf .pt:hover .punto {
  r: 6;
}
.dolor-graf .tt {
  position: absolute;
  pointer-events: none;
  background: var(--fg);
  color: var(--surface);
  font-size: 12.5px;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
}
.hi-acciones {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 12px;
}
.hcard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px 16px;
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hcard-h {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  justify-content: space-between;
}
.hcard-datos {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.hcard.anulada {
  opacity: 0.7;
}
.hcard.anulada .hcard-h b,
.hcard.anulada .code {
  text-decoration: line-through;
}
.hcard .bactions {
  display: flex;
}
.cmp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 10px;
}
.cmp-col {
  min-width: 0;
}
.cmp-col h3 {
  margin: 0;
  font-size: 15px;
}
/* Temporizador (arriba, por encima de todo) */
.temporizador:not([hidden]) {
  position: fixed;
  top: max(8px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 130;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 6px 14px;
  background: var(--fg);
  color: var(--surface);
  border-radius: 999px;
  box-shadow: var(--shadow);
  font-size: 14px;
}
.temporizador .btn {
  color: inherit;
  background: transparent;
  border-color: currentColor;
}
.temporizador.alarma {
  background: var(--crit);
  color: #fff;
  font-size: 16px;
  animation: latido 1s ease-in-out infinite;
}
@keyframes latido {
  50% {
    background: #7d1a14;
  }
}
@media (prefers-reduced-motion: reduce) {
  .temporizador.alarma {
    animation: none;
  }
}