/* ═══════════════════════════════════════════════════════════════════
   modo-trabajo-app.css — el modo trabajo entero

   Viste las pantallas del modo: el lanzador (/trabajo.html) y las interiores
   —agenda, pacientes, finanzas, recordatorios, confirmaciones y citas en
   línea—. Todas comparten la misma columna de 460 px, la misma cabecera
   turquesa y las mismas tarjetas blancas: son una sola app de teléfono, y el
   doctor la usa igual en el móvil, en el escritorio y en la app de Mac.

   NO es /modo-trabajo.css. Ese otro sigue vistiendo el expediente
   (/patient.html) con el lenguaje de iOS —gris agrupado, tinta negra, tokens
   --ios-*—, y las dos hojas no se mezclan: cargarlas juntas dejaba el gris de
   iOS peleando con el degradado celeste.

   ── Dos reglas de la casa que aquí importan ──

   1. PREFIJO PROPIO Y <div>. /theme-dark.css entra por un @import de
      layout.css y secuestra .card, .kpi, .modal, .field y TODO <section> con
      !important. Por eso cada clase de aquí empieza por `ti-` (trabajo-inicio)
      y la pantalla se construye con <div>: ni un <section>, ni un <nav> suelto
      colgando del body.

   2. TEMA CLARO CLAVADO. /trabajo.html lleva data-theme-lock="light" en <html>
      (ver /theme.js), así que las reglas de theme-dark.css —todas bajo
      html[data-theme="dark"]— no llegan a casar. El diseño solo existe en
      claro; no hay paleta oscura que derivar y no hace falta escribir
      contra-reglas.

   Los tokens se declaran sobre `.ti-body` y no sobre `:root`, por lo mismo que
   avisa la cascada de layout.css: un `:root` pelado en una hoja importada
   termina pisando tokens de otra. Colgados del body no salen de esta pantalla.
   ═══════════════════════════════════════════════════════════════════ */

.ti-body {
  /* ── Marca ── */
  --ti-marca:        #0891B2;   /* el turquesa de los iconos y los botones */
  --ti-marca-media:  #0E7490;   /* el mismo, pulsado */
  --ti-marca-honda:  #0B5F84;   /* los números y los títulos grandes */
  /* El recorrido va de #09526F a #0C9CC2. Antes era #0B5F84 → #0891B2: un
     salto tan corto que la cabecera se leía plana. Se abre un paso por cada
     extremo —el marino baja, el turquesa sube— sin llegar a que el degradado
     se vuelva el protagonista de la pantalla. El tono de en medio no se toca:
     es `--ti-marca-media`, y de él cuelga media app. */
  --ti-cabecera:     linear-gradient(105deg, #09526F 0%, #0E7490 52%, #0C9CC2 100%);

  /* ── Tinta ── */
  --ti-tinta:        #16222C;
  --ti-tinta-2:      #26343E;
  --ti-tinta-3:      #62737F;
  --ti-tinta-4:      #8496A2;
  --ti-tinta-5:      #C2D2DC;   /* los chevrones: se ven, no se leen */

  /* ── Superficies ── */
  --ti-tarjeta:      #FFFFFF;
  --ti-hueco:        #F4F8FB;   /* un hueco DENTRO de una tarjeta */
  --ti-filo:         #EEF4F8;   /* la línea entre dos filas de una lista */
  --ti-filo-2:       #E2EDF3;   /* la que separa dos bloques */
  --ti-canto:        #C9DDE6;   /* el borde de un botón secundario */

  /* ── Estados ── */
  --ti-ok:           #15803D;
  --ti-aviso:        #B45309;
  --ti-peligro:      #B42318;
  --ti-peligro-piel: #FEF3F2;

  /* ── Sombras ──
     Dos capas: una corta que separa la tarjeta del fondo y una larga y muy
     difuminada que la levanta. El color es el azul de la marca y no negro: un
     negro al 10 % sobre celeste se ve gris sucio. */
  --ti-sombra:       0 2px 8px rgba(11, 95, 132, .10), 0 10px 22px -16px rgba(11, 95, 132, .40);
  --ti-sombra-alta:  0 2px 8px rgba(11, 95, 132, .10), 0 14px 30px -20px rgba(11, 95, 132, .45);
  --ti-sombra-baja:  0 1px 3px rgba(11, 95, 132, .10);

  /* ── Movimiento ──
     La misma curva en todo: sale rápido y frena largo. */
  --ti-curva:        cubic-bezier(.22, .9, .24, 1);
  --ti-curva-suave:  cubic-bezier(.2, .8, .2, 1);
  /* La que se PASA un poco antes de asentarse. Solo para lo que vuelve de un
     toque: el dedo empujó, así que hay inercia que devolver. Nunca para algo
     que solo aparece — un menú que rebota al abrirse no es físico, es ruido. */
  --ti-rebote:       cubic-bezier(.34, 1.42, .64, 1);

  /* ── Los cantos ──
     Todo colgaba de un número escrito a mano en cada regla: 83 radios sueltos
     entre 9 y 24 px. Ahora salen de aquí, que es lo que permite ajustar la
     forma de la app entera sin perseguir reglas.

     Más cuadrado que redondo: una tarjeta a 14 px sigue siendo amable pero se
     lee como una ficha, no como una pastilla. Lo único que se queda circular
     es lo que PIERDE su significado si deja de serlo —el interruptor, que
     imita una palanca; los avatares, que son retratos; y los puntos, que son
     puntos—. */
  --ti-r-xs:     4px;    /* insignias y contadores cuadrados */
  --ti-r-sm:     6px;    /* fichas, chips, botones de icono */
  --ti-r-md:     7px;    /* botones y campos */
  --ti-r-lg:     8px;    /* un hueco dentro de una tarjeta */
  --ti-r-xl:    10px;    /* la tarjeta */
  --ti-circulo: 980px;   /* solo lo que debe serlo */

  /* El ancho de la columna. 460 px es el diseño de teléfono; en tableta y
     escritorio crece (ver «ANCHO: TABLETA Y ESCRITORIO» más abajo) para no
     dejar la pantalla vacía a los lados. */
  --ti-columna: 460px;
}

/* Tableta en vertical y para arriba. El teléfono se queda a tamaño real: ahí la
   columna ya ocupa la pantalla entera y agrandarla solo quitaría contenido.

   1.25 y no 1.5: es el escalón anterior de los que ofrece el zoom del navegador
   (100 · 110 · 125 · 150) y el mismo que ya usaba el modo antes del rediseño.
   Con 1.5 la columna se comía la pantalla de una tableta y cabían tres cosas. */
@media (min-width: 768px) { .ti-body { --ti-zoom: 1.25; } }

/* ── Base ──
   `body.ti-body` y no `body`: layout.css lleva `html, body { background:
   var(--card) }` dentro de un @media de móvil, y a igual peso gana el que
   viene después. Con la clase, este fondo gana siempre. */
body.ti-body {
  /* ── Por qué `zoom` y no "subir todas las medidas" ──
     En un monitor o en una tableta la columna de 460 px se veía pequeña y
     perdida en el centro. `zoom` agranda TODO por igual —tipografía, iconos,
     separaciones, grosores— que es exactamente lo que hace el zoom del
     navegador y lo que se pidió; subir los tamaños a mano habría cambiado las
     proporciones del diseño.

     OJO al tocar los @media de este archivo: miden la VENTANA, no la caja ya
     escalada. Con zoom 1.25 en 1200 px, el contenido se maqueta como si tuviera
     960. Por eso el corte está en 768 px de ventana (una tableta en vertical) y
     no en un número sacado del contenido. */
  zoom: var(--ti-zoom, 1);
  margin: 0;
  padding: 0;
  /* ── `100vh` DIVIDIDO por el zoom ──
     `zoom` escala también las unidades: dentro de un elemento ampliado 1.25,
     `100vh` son 100vh de pantalla × 1.25, o sea un cuarto de página de más que
     siempre sobra por abajo. En una pantalla de entrar eso obligaba a bajar
     para llegar a los campos aunque la tarjeta cupiera de sobra. */
  min-height: calc(100vh / var(--ti-zoom, 1));
  background: #EAF2F8;
  color: var(--ti-tinta);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.ti-body *, .ti-body *::before, .ti-body *::after { box-sizing: border-box; }
.ti-body ::selection { background: #CFEFF7; }

/* El degradado va en un envoltorio y no en el body: así llega al alto real del
   contenido y no se estira ni se corta cuando la página crece. */
.ti-fondo {
  min-height: calc(100vh / var(--ti-zoom, 1));
  background: linear-gradient(180deg, #DCEDF7 0%, #EDF5FA 38%, #F4F8FB 100%);
}

/* Mientras una capa está abierta (menú, perfil, hoja) el fondo no se mueve: si
   no, al arrastrar sobre el velo se desplaza la pantalla de debajo. */
body.ti-body.ti-quieto { overflow: hidden; }

.ti-body a { color: var(--ti-marca-media); text-decoration: none; }
.ti-body button { font-family: inherit; color: inherit; }
.ti-oculto { display: none !important; }

/* ═══════════════════════════ CABECERA ═══════════════════════════ */

.ti-cabecera {
  /* Pegada arriba. En una lista larga —los pacientes, las reservas— la flecha
     de volver y el nombre de la pantalla son lo único que dice dónde estás; que
     se fueran con el primer desplazamiento dejaba al doctor sin salida visible
     y sin título. Por debajo de las capas (menú 60, perfil 70, hoja 75) y por
     encima de todo lo demás. */
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--ti-cabecera);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .08);
  /* En la app instalada la cabecera sube hasta la muesca: el degradado tiene
     que seguir debajo de la barra de estado o queda una franja de otro color
     (por eso la meta theme-color de la página es el #0B5F84 de aquí). */
  padding-top: env(safe-area-inset-top, 0px);
}
.ti-cabecera-caja {
  max-width: var(--ti-columna);
  margin: 0 auto;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* El botón de la cabecera: hamburguesa, campana, cerrar. Todos el mismo. */
.ti-btn-cabecera {
  cursor: pointer;
  width: 38px;
  height: 38px;
  border-radius: var(--ti-r-sm);
  border: none;
  background: rgba(255, 255, 255, .18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  position: relative;
  transition: background .2s;
}
.ti-btn-cabecera svg { width: 20px; height: 20px; stroke: #FFFFFF; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.ti-marca-caja {
  width: 38px;
  height: 38px;
  border-radius: var(--ti-r-sm);
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.ti-marca-caja img { display: block; width: 26px; height: 26px; object-fit: contain; }

.ti-titulo { min-width: 0; flex: 1; }
.ti-titulo-nombre {
  display: block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.015em;
  color: #FFFFFF;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ti-titulo-ojo {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* La cuenta de avisos sin leer, sobre la campana. La pinta /layout.js: el id
   es el que busca su módulo de notificaciones. */
.ti-campana-cuenta {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--ti-circulo);
  background: var(--ti-aviso);
  box-shadow: 0 0 0 2px #0C6588;
  color: #FFFFFF;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}

/* ── El perfil y su menú ── */
.ti-perfil-caja { position: relative; flex: 0 0 auto; }
.ti-perfil-btn {
  cursor: pointer;
  border: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px 4px 4px;
  border-radius: var(--ti-r-sm);
  background: rgba(255, 255, 255, .18);
  flex: 0 0 auto;
  transition: background .2s;
}
.ti-perfil-ini {
  width: 29px;
  height: 29px;
  border-radius: var(--ti-r-xs);
  background: rgba(255, 255, 255, .9);
  color: var(--ti-marca-media);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
.ti-perfil-flecha {
  font-size: 11px;
  color: #FFFFFF;
  opacity: .85;
  transition: transform .3s var(--ti-curva-suave);
}
.ti-perfil-btn[aria-expanded="true"] .ti-perfil-flecha { transform: rotate(180deg); }

.ti-menu-perfil {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  z-index: 70;
  width: 262px;
  border-radius: var(--ti-r-lg);
  background: var(--ti-tarjeta);
  box-shadow: 0 10px 20px -8px rgba(9, 38, 52, .22), 0 24px 48px -16px rgba(9, 38, 52, .34);
  overflow: hidden;
  transform-origin: top right;
  opacity: 0;
  transform: translateY(-8px) scale(.94);
  pointer-events: none;
  transition: opacity .22s ease, transform .28s var(--ti-curva);
}
.ti-menu-perfil.is-abierto { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.ti-mp-cab {
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 11px;
  border-bottom: 1px solid var(--ti-filo);
}
.ti-mp-ini {
  width: 42px;
  height: 42px;
  border-radius: var(--ti-r-md);
  background: rgba(8, 145, 178, .11);
  color: var(--ti-marca-media);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  flex: 0 0 auto;
}
.ti-mp-datos { min-width: 0; flex: 1; }
.ti-mp-nombre {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--ti-tinta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ti-mp-meta {
  display: block;
  font-size: 12.5px;
  color: var(--ti-tinta-3);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ti-mp-cifras { padding: 11px 14px; display: flex; gap: 8px; border-bottom: 1px solid var(--ti-filo); }
.ti-mp-cifra { flex: 1; padding: 9px 10px; border-radius: var(--ti-r-sm); background: var(--ti-hueco); }
.ti-mp-cifra-eti { display: block; font-size: 11px; color: var(--ti-tinta-4); }
.ti-mp-cifra-val {
  display: block;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ti-marca-honda);
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
}

.ti-mp-fila {
  cursor: pointer;
  width: 100%;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  text-align: left;
  transition: background .2s;
}
.ti-mp-fila svg { width: 17px; height: 17px; fill: none; stroke: var(--ti-marca); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.ti-mp-fila-txt { flex: 1; font-size: 14.5px; font-weight: 500; color: var(--ti-tinta); }
.ti-mp-fila-chev { font-size: 16px; color: var(--ti-tinta-5); }
/* La línea arranca donde arranca el texto, no en el canto: así el icono queda
   fuera de la separación y la lista se lee como una sola columna. */
.ti-mp-linea { height: 1px; background: var(--ti-filo); margin-left: 42px; }
.ti-mp-linea--entera { height: 1px; background: var(--ti-filo); }

.ti-mp-fila--salir { padding: 12px 14px; }
.ti-mp-fila--salir svg { stroke: var(--ti-peligro); }
.ti-mp-fila--salir .ti-mp-fila-txt { font-weight: 600; color: var(--ti-peligro); }

/* La línea de estado de Face ID en Mi perfil, cuando algo no salió. */
.ti-lista-sub.is-error { color: var(--ti-peligro); }

/* Al llegar desde el atajo del menú (Mi perfil#faceid) la tarjeta se marca un
   momento: la página es larga y, sin esto, el ojo no sabe a qué bajó. Un
   anillo que se apaga, no un salto ni un cambio de tamaño. */
.ti-tarjeta.is-destacada {
  outline: 3px solid transparent;
  outline-offset: 3px;
  animation: ti-destacar 1.8s var(--ti-curva-suave) both;
}
@keyframes ti-destacar {
  0%, 45% { outline-color: var(--ti-marca); }
  100%    { outline-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .ti-tarjeta.is-destacada { animation: none; outline-color: var(--ti-marca); }
}

/* El velo que cierra el menú del perfil al tocar fuera. Transparente a
   propósito: no oscurece nada, solo recoge el clic.

   z-index 30 y NO 55: la cabecera está pegada con `z-index: 40`, y eso le crea
   su propio contexto de apilado. El `70` del desplegable se mide DENTRO de ese
   contexto, así que contra el velo compite la cabecera entera con su 40 — con
   55 el velo quedaba encima del menú y se comía todos los toques: se veía
   abierto pero no se podía pulsar nada. Por debajo de la cabecera, el velo
   sigue tapando el resto de la pantalla, que es su único trabajo. */
.ti-velo-perfil { position: fixed; inset: 0; z-index: 30; pointer-events: none; }
.ti-velo-perfil.is-abierto { pointer-events: auto; }

/* ═══════════════════════════ MENÚ LATERAL ═══════════════════════════ */

.ti-menu { position: fixed; inset: 0; z-index: 60; display: flex; pointer-events: none; }
.ti-menu.is-abierto { pointer-events: auto; }

.ti-velo {
  position: absolute;
  inset: 0;
  background: rgba(9, 38, 52, .42);
  opacity: 0;
  transition: opacity .34s var(--ti-curva-suave);
}
.ti-menu.is-abierto .ti-velo { opacity: 1; }
/* ── El desenfoque llega DESPUÉS de la animación ──
   Un backdrop-filter sobre un velo a pantalla completa obliga a WKWebView (la
   app de Mac) a recalcular el desenfoque en CADA fotograma mientras el cajón
   se desliza por encima: es exactamente el patrón que dejaba la app a ~10fps
   (ver la nota de rendimiento del modo trabajo). Así que el velo entra opaco y
   liso, y el desenfoque se pone cuando ya no se mueve nada. Se quita en cuanto
   empieza a cerrarse. */
.ti-velo.is-quieto { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }

.ti-cajon {
  position: relative;
  width: min(324px, 88vw);
  height: 100%;
  background: var(--ti-hueco);
  box-shadow: 18px 0 48px rgba(9, 38, 52, .28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(-102%);
  transition: transform .38s var(--ti-curva);
  /* `pan-y` y no `none`: el gesto de CERRAR es horizontal y lo recoge
     /trabajo-tacto.js; el vertical se lo queda el navegador para desplazar la
     lista de dentro. Los dos conviven sin pisarse. */
  touch-action: pan-y;
}
.ti-menu.is-abierto .ti-cajon { transform: translateX(0); }

.ti-cajon-cab {
  /* El asa del cajón (ver /trabajo-tacto.js): aquí el gesto es nuestro entero,
     porque esta franja no se desplaza. La lista de abajo se queda `pan-y`. */
  touch-action: none;
  background: var(--ti-cabecera);
  padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 18px;
  flex: 0 0 auto;
}
.ti-cajon-ojo {
  min-width: 0;
  flex: 1;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}
.ti-cajon-cerrar {
  cursor: pointer;
  width: 30px;
  height: 30px;
  border-radius: var(--ti-r-xs);
  border: none;
  background: rgba(255, 255, 255, .18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.ti-cajon-cerrar svg { width: 16px; height: 16px; fill: none; stroke: #FFFFFF; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.ti-cajon-yo { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.ti-cajon-ini {
  width: 50px;
  height: 50px;
  border-radius: var(--ti-r-lg);
  background: rgba(255, 255, 255, .92);
  color: var(--ti-marca-media);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  flex: 0 0 auto;
}
.ti-cajon-nombre {
  display: block;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.018em;
  color: #FFFFFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ti-cajon-meta {
  display: block;
  font-size: 13px;
  color: rgba(255, 255, 255, .8);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ti-cajon-botones { display: flex; gap: 8px; margin-top: 14px; }
.ti-cajon-boton {
  flex: 1;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 12px;
  border-radius: var(--ti-r-sm);
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}
.ti-cajon-boton--claro { background: rgba(255, 255, 255, .94); color: var(--ti-marca-media); }
.ti-cajon-boton--velado { background: rgba(255, 255, 255, .18); color: #FFFFFF; }

.ti-cajon-lista {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 12px calc(20px + env(safe-area-inset-bottom, 0px));
}
.ti-grupo { margin-bottom: 14px; }
.ti-grupo-tt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ti-tinta-4);
  padding: 0 8px 7px;
}
.ti-grupo-caja {
  border-radius: var(--ti-r-lg);
  background: var(--ti-tarjeta);
  box-shadow: var(--ti-sombra-baja);
  overflow: hidden;
}
.ti-fila-menu {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 13px;
  border-top: 1px solid var(--ti-filo);
  transition: background .2s;
}
/* La primera de cada tarjeta sin línea: la línea separa filas, no abre la
   lista. */
.ti-fila-menu:first-child { border-top: none; }
.ti-fila-icono {
  width: 30px;
  height: 30px;
  border-radius: var(--ti-r-xs);
  background: rgba(8, 145, 178, .1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.ti-fila-icono svg { width: 17px; height: 17px; fill: none; stroke: var(--ti-marca); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ti-fila-nombre {
  min-width: 0;
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.012em;
  color: var(--ti-tinta);
}
/* Una segunda línea bajo el nombre de la fila: dice lo que hay dentro sin
   obligar a entrar. Se corta con puntos suspensivos — es un adelanto, no el
   texto. */
.ti-fila-sub {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--ti-tinta-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ti-fila-chev { font-size: 17px; color: var(--ti-tinta-5); flex: 0 0 auto; }
.ti-insignia {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--ti-r-sm);
  background: var(--ti-aviso);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  flex: 0 0 auto;
}

/* Salir del modo y cerrar sesión: fuera de los grupos, al pie del cajón. */
.ti-cajon-pie { display: grid; gap: 8px; margin-top: 4px; }
.ti-pie-boton {
  cursor: pointer;
  width: 100%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px;
  border-radius: var(--ti-r-md);
  background: var(--ti-tarjeta);
  box-shadow: var(--ti-sombra-baja);
  font-size: 15px;
  font-weight: 600;
  min-height: 48px;
  transition: background .2s;
}
.ti-pie-boton svg { width: 17px; height: 17px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ti-pie-boton--modo { color: var(--ti-marca-media); }
.ti-pie-boton--modo svg { stroke: var(--ti-marca); }
.ti-pie-boton--salir { color: var(--ti-peligro); }
.ti-pie-boton--salir svg { stroke: var(--ti-peligro); }
.ti-cajon-version { text-align: center; font-size: 11.5px; color: var(--ti-tinta-4); margin-top: 14px; }

/* ═══════════════════════════ HOJA DE MENSAJERÍA ═══════════════════════════ */

.ti-hoja {
  position: fixed;
  inset: 0;
  z-index: 75;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}
.ti-hoja.is-abierta { pointer-events: auto; }
.ti-hoja-velo {
  position: absolute;
  inset: 0;
  background: rgba(9, 38, 52, .45);
  opacity: 0;
  transition: opacity .28s var(--ti-curva-suave);
}
.ti-hoja.is-abierta .ti-hoja-velo { opacity: 1; }
.ti-hoja-panel {
  position: relative;
  width: 100%;
  max-width: var(--ti-columna);
  background: var(--ti-hueco);
  border-radius: var(--ti-r-xl) var(--ti-r-xl) 0 0;
  box-shadow: 0 -12px 40px rgba(9, 38, 52, .3);
  padding: 16px 14px calc(18px + env(safe-area-inset-bottom, 0px));
  transform: translateY(102%);
  transition: transform .32s var(--ti-curva);
  /* La hoja no tiene nada que desplazar por dentro, así que se queda el gesto
     vertical entero: bajarla con el dedo es la forma de cerrarla. */
  touch-action: none;
}
.ti-hoja.is-abierta .ti-hoja-panel { transform: translateY(0); }
/* El asa. No decora: es lo único que dice que la hoja se puede agarrar y bajar.
   Sin ella el gesto existe pero nadie lo descubre. */
.ti-hoja-panel::before {
  content: '';
  position: absolute;
  top: 7px;
  left: 50%;
  width: 36px;
  height: 5px;
  margin-left: -18px;
  border-radius: var(--ti-circulo);
  background: var(--ti-tinta-5);
}
.ti-hoja-cab { padding-top: 6px; }
.ti-hoja-cab { display: flex; align-items: flex-start; gap: 12px; }
.ti-hoja-tt {
  display: block;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.022em;
  color: var(--ti-marca-honda);
}
.ti-hoja-sub { display: block; font-size: 13px; color: var(--ti-tinta-3); margin-top: 2px; }
.ti-hoja-cerrar {
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: var(--ti-r-sm);
  border: none;
  background: var(--ti-tarjeta);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.ti-hoja-cerrar svg { width: 16px; height: 16px; fill: none; stroke: var(--ti-tinta-3); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ti-hoja-lista {
  margin-top: 14px;
  border-radius: var(--ti-r-lg);
  background: var(--ti-tarjeta);
  box-shadow: 0 1px 3px rgba(11, 95, 132, .12);
  overflow: hidden;
}
.ti-hoja-fila {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-top: 1px solid var(--ti-filo);
  transition: background .2s;
}
.ti-hoja-fila:first-child { border-top: none; }
.ti-hoja-icono {
  width: 36px;
  height: 36px;
  border-radius: var(--ti-r-sm);
  background: rgba(8, 145, 178, .1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.ti-hoja-icono svg { width: 19px; height: 19px; fill: none; stroke: var(--ti-marca); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ti-hoja-datos { min-width: 0; flex: 1; }
.ti-hoja-nombre {
  display: block;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -.012em;
  color: var(--ti-tinta);
}
.ti-hoja-detalle { display: block; font-size: 13px; color: var(--ti-tinta-3); margin-top: 2px; }

/* ═══════════════════════════ LO DE EN MEDIO ═══════════════════════════ */

.ti-main { max-width: var(--ti-columna); margin: 0 auto; padding: 0 14px 40px; }

.ti-saludo-fila { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px 0 18px; }
.ti-saludo {
  margin: 0;
  font-size: 26px;
  line-height: 1.12;
  letter-spacing: -.028em;
  font-weight: 700;
  color: var(--ti-marca-honda);
  text-align: center;
}
.ti-engrane {
  width: 30px;
  height: 30px;
  border-radius: var(--ti-r-sm);
  background: var(--ti-tarjeta);
  box-shadow: 0 1px 3px rgba(11, 95, 132, .18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.ti-engrane svg { width: 17px; height: 17px; fill: none; stroke: var(--ti-marca); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── La rejilla de iconos ──
   Tres columnas fijas. `minmax(0, 1fr)` y no `1fr`: una celda con una etiqueta
   larga ("Arma tu consulta") empujaría la rejilla y las tres columnas dejarían
   de medir lo mismo. */
.ti-rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ti-loza {
  cursor: pointer;
  border: none;
  border-radius: var(--ti-r-lg);
  background: var(--ti-tarjeta);
  box-shadow: var(--ti-sombra);
  padding: 15px 8px 13px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 9px;
  min-height: 108px;
  position: relative;
  transition: transform .34s var(--ti-rebote), box-shadow .25s;
}
.ti-loza svg { width: 34px; height: 34px; fill: none; stroke: var(--ti-marca); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ti-loza-txt {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  color: var(--ti-tinta);
}
.ti-loza-cuenta {
  position: absolute;
  top: 9px;
  right: 9px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--ti-circulo);
  background: var(--ti-aviso);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

/* ── Tarjetas ── */
.ti-tarjeta {
  border-radius: var(--ti-r-xl);
  background: var(--ti-tarjeta);
  box-shadow: var(--ti-sombra-alta);
  padding: 16px;
}
.ti-tarjeta--proxima { margin-top: 14px; position: relative; overflow: hidden; }
.ti-tarjeta--aviso { margin-top: 12px; }

.ti-prox-btn {
  cursor: pointer;
  width: 100%;
  background: transparent;
  border: none;
  padding: 0;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 11px;
}
.ti-prox-icono {
  width: 34px;
  height: 34px;
  border-radius: var(--ti-r-xs);
  background: rgba(8, 145, 178, .11);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.ti-prox-icono svg { width: 19px; height: 19px; fill: none; stroke: var(--ti-marca); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ti-prox-tt { display: block; font-size: 16.5px; font-weight: 700; letter-spacing: -.018em; }
.ti-prox-sub { display: block; font-size: 13px; color: var(--ti-tinta-3); margin-top: 2px; }
.ti-prox-flecha {
  width: 28px;
  height: 28px;
  border-radius: var(--ti-r-sm);
  background: var(--ti-hueco);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.ti-prox-flecha svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--ti-marca);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .3s var(--ti-curva-suave);
}
.ti-prox-btn[aria-expanded="true"] .ti-prox-flecha svg { transform: rotate(180deg); }

.ti-prox-cuerpo { display: flex; gap: 16px; margin-top: 15px; }
.ti-fecha-caja { flex: 0 0 auto; text-align: center; width: 54px; }
.ti-fecha-mes { font-size: 13.5px; font-weight: 600; color: var(--ti-marca); }
.ti-fecha-dia {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1;
  color: var(--ti-marca-honda);
  font-variant-numeric: tabular-nums;
}
.ti-fecha-dow { font-size: 13px; font-weight: 500; color: var(--ti-tinta-3); margin-top: 2px; }

.ti-prox-lineas { flex: 1; min-width: 0; display: grid; gap: 9px; align-content: start; }
/* `min-width: 0` en la FILA y no solo en el texto: la fila es hija de un grid,
   y un hijo de grid nace con `min-width: auto` —no baja de lo que mida su
   contenido—, así que el nombre largo de una clínica se salía de la tarjeta por
   la derecha en vez de cortarse con puntos suspensivos. */
.ti-prox-linea { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ti-prox-linea svg { width: 17px; height: 17px; fill: none; stroke: var(--ti-tinta-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.ti-prox-linea span { flex: 1; font-size: 14.5px; color: var(--ti-tinta-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ti-botonera { display: flex; gap: 9px; margin-top: 16px; }
.ti-boton {
  cursor: pointer;
  border: none;
  text-align: center;
  font-size: 15px;
  padding: 12px 16px;
  border-radius: var(--ti-r-sm);
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .25s, border-color .25s;
}
/* Con `.ti-body` delante por un motivo concreto: estos botones a veces son un
   <a>, y `.ti-body a { color: … }` pesa (0,1,1) más que una clase sola (0,1,0).
   Sin esto, «Enviar confirmación» salía turquesa sobre fondo turquesa. */
.ti-boton--fuerte { flex: 1 1 auto; background: var(--ti-marca); font-weight: 600; }
.ti-boton--suave {
  flex: 0 1 auto;
  background: var(--ti-tarjeta);
  border: 1px solid var(--ti-canto);
  font-weight: 500;
}
.ti-boton--ancho { width: 100%; margin-top: 13px; }
/* El color va aquí y no solo en el bloque `@media (hover: hover)`: ese
   bloque no existe en un teléfono, y sin esto el botón fuerte heredaba
   `--ti-tinta` — tinta oscura sobre turquesa. */
.ti-body .ti-boton--fuerte { color: #FFFFFF; }
.ti-body .ti-boton--suave  { color: var(--ti-marca-media); }

/* ── El resto del día, dentro de la tarjeta ── */
.ti-resto { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ti-filo-2); }
.ti-resto-cab { display: flex; align-items: baseline; gap: 12px; }
.ti-resto-eti {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ti-tinta-4);
}
.ti-resto-lista { display: grid; gap: 2px; margin-top: 10px; }
.ti-cita {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 10px;
  border-radius: var(--ti-r-sm);
  border-top: 1px solid var(--ti-filo);
  transition: background .2s;
  /* `.ti-resto-lista` es un grid, y un hijo de grid nace con `min-width: auto`:
     se niega a encoger por debajo de su contenido. Con un nombre largo la fila
     medía 453 px dentro de una lista de 260 y el estado se salía de la tarjeta
     —cortado a media palabra— en cuanto el teléfono era pequeño o el zoom
     grande. Dejándola encoger, el nombre y el motivo se cortan con puntos
     suspensivos, que es lo que ya tenían previsto. */
  min-width: 0;
}
.ti-cita:first-child { border-top: none; }
.ti-cita-hora {
  width: 58px;
  flex: 0 0 auto;
  min-width: 0;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  color: var(--ti-marca-honda);
}
.ti-cita-datos { min-width: 0; flex: 1; }
.ti-cita-nombre {
  display: block;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.012em;
  color: var(--ti-tinta);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ti-cita-motivo {
  display: block;
  font-size: 13px;
  color: var(--ti-tinta-3);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ti-cita-estado { font-size: 12.5px; font-weight: 600; white-space: nowrap; flex: 0 0 auto; }

/* Teléfono pequeño o zoom alto: la fila se aprieta antes de cortar nada. */
@media (max-width: 380px) {
  .ti-cita { gap: 9px; padding: 11px 6px; }
  .ti-cita-hora { width: 48px; font-size: 13.5px; }
  .ti-cita-estado { font-size: 11.5px; }
}
.ti-estado--ok { color: var(--ti-ok); }
.ti-estado--aviso { color: var(--ti-aviso); }
.ti-estado--gris { color: var(--ti-tinta-4); }

/* ── La tarjeta de avisos (citas sin confirmar) ── */
.ti-aviso-cab { display: flex; gap: 12px; }
.ti-aviso-icono {
  width: 34px;
  height: 34px;
  border-radius: var(--ti-r-xs);
  background: rgba(217, 119, 6, .12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.ti-aviso-icono svg { width: 19px; height: 19px; fill: none; stroke: var(--ti-aviso); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── La misma tarjeta, sin nada que avisar ──
   La tarjeta de «sin confirmar» se queda SIEMPRE, también cuando no hay
   ninguna: desaparecer dejaba un hueco distinto cada día —y en pantalla ancha
   vaciaba media columna—, y el doctor no sabía si es que todo está confirmado
   o si la tarjeta no había cargado. Lo que cambia es el tono: en calma no es
   ámbar ni lleva campana, porque no hay nada que atender. */
.ti-tarjeta--aviso.is-calma .ti-aviso-icono { background: rgba(21, 128, 61, .10); }
.ti-tarjeta--aviso.is-calma .ti-aviso-icono svg { stroke: var(--ti-ok); }
.ti-tarjeta--aviso.is-calma .ti-aviso-caja { display: none; }
.ti-aviso-tt { font-size: 15.5px; font-weight: 600; letter-spacing: -.012em; line-height: 1.35; }
.ti-aviso-txt { font-size: 14px; line-height: 1.45; color: var(--ti-tinta-3); margin-top: 4px; }
.ti-aviso-caja {
  margin-top: 13px;
  padding: 12px 14px;
  border-radius: var(--ti-r-md);
  background: var(--ti-hueco);
  border: 1px solid var(--ti-filo-2);
}
.ti-aviso-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ti-aviso-fila + .ti-aviso-fila { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ti-filo-2); }
.ti-aviso-nombre { font-size: 14.5px; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ti-aviso-hora { font-size: 13.5px; color: var(--ti-tinta-3); font-variant-numeric: tabular-nums; flex: 0 0 auto; }

.ti-vacio { font-size: 14.5px; color: var(--ti-tinta-3); padding: 4px 0; }

.ti-pie { display: flex; align-items: baseline; gap: 12px; margin-top: 22px; padding: 0 4px; }
.ti-pie-txt { font-size: 12.5px; color: var(--ti-tinta-4); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ti-pie-hueco { flex: 1; }
.ti-body .ti-pie-enlace { font-size: 12.5px; color: var(--ti-tinta-4); flex: 0 0 auto; }

/* ═══════════════════════════ PANTALLAS INTERIORES ═══════════════════════════
   Lo que comparten agenda, pacientes, finanzas, recordatorios, confirmaciones y
   citas en línea: la misma cabecera con flecha de volver, las mismas píldoras de
   filtro y las mismas fichas de lista. Escrito una vez aquí y no copiado en cada
   página, por lo mismo que avisa /modo-trabajo.js: una copia que se queda atrás
   en el modo trabajo se nota enseguida — dos pantallas del mismo sitio dejan de
   parecerse. */

/* La flecha de volver es el mismo botón de la cabecera, pero como <a>: hay que
   fijarle el color o `.ti-body a` (0,1,1) le gana al `stroke` heredado. */
.ti-body a.ti-btn-cabecera { color: #FFFFFF; }

/* ── El aviso de "ya está hecho" ──
   La barra que confirma un cobro registrado o un mensaje enviado. Nace oculta y
   se descuelga sola; no es un modal, no pide que la cierren. */
.ti-nota {
  margin-bottom: 12px;
  border-radius: var(--ti-r-md);
  background: var(--ti-tarjeta);
  box-shadow: var(--ti-sombra);
  padding: 13px 14px;
  display: flex;
  align-items: center;
  gap: 11px;
}
.ti-nota-icono {
  width: 30px;
  height: 30px;
  border-radius: var(--ti-r-xs);
  background: rgba(8, 145, 178, .11);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.ti-nota-icono svg { width: 17px; height: 17px; fill: none; stroke: var(--ti-marca); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ti-nota-txt { min-width: 0; flex: 1; font-size: 14.5px; line-height: 1.4; color: var(--ti-tinta-2); }

/* ── La tarjeta oscura de cabecera (el "hero") ──
   La cifra grande del periodo. Es la única superficie oscura del modo: lleva el
   dinero, y separarla del resto es lo que hace que se lea de un vistazo.
   Los dos halos son <span> vacíos posicionados, no `background-image`: así se
   quedan quietos si la tarjeta cambia de alto. */
.ti-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--ti-r-xl);
  background: linear-gradient(140deg, #08344B 0%, #0B5F84 46%, #0E7490 100%);
  box-shadow: 0 10px 22px -12px rgba(9, 38, 52, .55), 0 28px 50px -28px rgba(9, 38, 52, .7);
  padding: 18px 18px 16px;
  color: #FFFFFF;
}
.ti-hero-halo { position: absolute; border-radius: var(--ti-circulo); pointer-events: none; }
.ti-hero-halo--alto {
  top: -70px; right: -60px; width: 220px; height: 220px;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 70%);
}
.ti-hero-halo--bajo {
  bottom: -90px; left: -40px; width: 200px; height: 200px;
  background: radial-gradient(circle at 50% 50%, rgba(155, 208, 234, .18), rgba(255, 255, 255, 0) 70%);
}
.ti-hero > *:not(.ti-hero-halo) { position: relative; }
.ti-hero-cab { display: flex; align-items: center; gap: 10px; }
.ti-hero-logo {
  width: 30px; height: 30px; border-radius: var(--ti-r-xs);
  background: rgba(255, 255, 255, .94);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.ti-hero-logo img { display: block; width: 20px; height: 20px; object-fit: contain; }
.ti-hero-ojo {
  min-width: 0; flex: 1;
  font-size: 10px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255, 255, 255, .72);
}
.ti-hero-periodo { flex: 0 0 auto; font-size: 12px; color: rgba(255, 255, 255, .78); }
.ti-hero-eti { font-size: 12.5px; color: rgba(255, 255, 255, .72); margin-top: 20px; }
.ti-hero-cifra {
  font-size: 40px; font-weight: 700; letter-spacing: -.035em; line-height: 1.05;
  margin-top: 2px; font-variant-numeric: tabular-nums;
}
.ti-hero-sub { font-size: 13.5px; color: rgba(255, 255, 255, .74); margin-top: 5px; }
.ti-hero-pares { display: flex; gap: 22px; margin-top: 18px; }
.ti-hero-par-eti { display: block; font-size: 11.5px; color: rgba(255, 255, 255, .68); }
.ti-hero-par-val {
  display: block; font-size: 17px; font-weight: 600; letter-spacing: -.018em;
  margin-top: 2px; font-variant-numeric: tabular-nums;
}
.ti-hero-raya { width: 1px; background: rgba(255, 255, 255, .18); }

/* ── El segmentado (Hoy · Semana · Mes) ──
   Dentro del hero, así que se dibuja en claro sobre oscuro. */
.ti-segmento {
  display: flex; gap: 4px; margin-top: 18px; padding: 4px;
  border-radius: var(--ti-r-md); background: rgba(255, 255, 255, .14);
}
.ti-segmento button {
  cursor: pointer; flex: 1; border: none; border-radius: var(--ti-r-xs); min-height: 38px;
  font-size: 14px; font-weight: 600;
  background: transparent; color: rgba(255, 255, 255, .86);
  transition: background .2s, color .2s;
}
.ti-segmento button.is-on { background: #FFFFFF; color: var(--ti-marca-honda); }

/* ── La fila de vistas de la agenda ──
   El segmentado se lleva el ancho y «Configuración» ocupa lo justo a su
   derecha, con el mismo alto para que la fila se lea como una sola pieza. */
.ti-fila-vistas { display: flex; align-items: center; gap: 8px; margin-top: 18px; }
.ti-fila-vistas .ti-segmento { flex: 1; min-width: 0; margin-top: 0; }
/* Va sobre el FONDO DE LA PÁGINA, no sobre la cabecera turquesa: se viste
   como el segmentado claro que tiene al lado —superficie blanca, canto
   finísimo, tinta de marca— y no como los botones de la barra, que son
   blancos sobre turquesa. */
.ti-ajuste-agenda {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 7px;
  min-height: 46px; padding: 0 14px;
  border-radius: var(--ti-r-md);
  background: rgba(255, 255, 255, .72);
  box-shadow: inset 0 0 0 1px var(--ti-filo-2);
  font-size: 14px; font-weight: 600;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background .2s, box-shadow .2s, transform .12s var(--ti-curva);
}
.ti-body .ti-ajuste-agenda { color: var(--ti-marca-media); }
.ti-ajuste-agenda svg {
  width: 17px; height: 17px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.ti-body .ti-ajuste-agenda:active { transform: scale(.97); background: #FFFFFF; }

/* En el teléfono la palabra no cabe junto a «Día» y «Mes»: queda el engrane,
   que con su `aria-label` sigue diciendo lo que es. */
@media (max-width: 400px) {
  .ti-ajuste-agenda span { display: none; }
  .ti-ajuste-agenda { padding: 0 12px; }
}

/* ── Píldoras de filtro ── */
.ti-pildoras { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.ti-pildora {
  cursor: pointer;
  border: 1px solid var(--ti-filo-2);
  background: var(--ti-tarjeta);
  border-radius: var(--ti-r-sm);
  min-height: 38px;
  padding: 8px 15px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: border-color .2s, background .2s, color .2s;
}
.ti-body .ti-pildora { color: var(--ti-tinta-2); }
.ti-pildora.is-on { background: #EAF4FA; border-color: var(--ti-marca); }
.ti-body .ti-pildora.is-on { color: var(--ti-marca-honda); }

/* ── La ficha de una lista ──
   Una tarjeta por fila, no una tabla: en 430 px una tabla obliga a desplazar de
   lado, y lo que el doctor busca (nombre, cuánto, en qué estado) cabe de sobra
   en dos renglones. */
.ti-fichas { display: grid; gap: 10px; margin-top: 14px; }
.ti-ficha {
  border-radius: var(--ti-r-xl);
  background: var(--ti-tarjeta);
  box-shadow: var(--ti-sombra-alta);
  overflow: hidden;
}
.ti-ficha-btn {
  cursor: pointer; width: 100%; border: none; background: transparent;
  text-align: left; padding: 15px 16px;
  display: flex; align-items: center; gap: 12px;
  /* La raya de la izquierda marca lo que falta por hacer. Siempre puesta —aunque
     sea transparente— para que la tarjeta no cambie de ancho al cobrarse. */
  border-left: 3px solid transparent;
  transition: background .2s;
}
.ti-ficha-btn.is-pendiente { border-left-color: #E0992E; }

/* ── La papelera de una ficha ──
   Va al lado del enlace, no dentro: un <button> dentro de un <a> no lo sabe
   activar ningún navegador sin ambigüedad. Por eso la ficha se vuelve una fila
   y el enlace se queda con todo el ancho que sobra. */
.ti-ficha:has(.ti-ficha-borrar) { display: flex; align-items: stretch; }
.ti-ficha:has(.ti-ficha-borrar) .ti-ficha-btn { flex: 1; min-width: 0; }
.ti-ficha-borrar {
  cursor: pointer; flex: 0 0 auto;
  width: 48px; border: none; background: transparent;
  display: grid; place-items: center;
  border-left: 1px solid var(--ti-filo);
  transition: background .2s;
}
.ti-body .ti-ficha-borrar { color: var(--ti-tinta-5); }
.ti-ficha-borrar svg {
  width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.ti-ficha-borrar:active { background: var(--ti-peligro-piel); }
.ti-body .ti-ficha-borrar:active { color: var(--ti-peligro); }
@media (hover: hover) {
  .ti-body .ti-ficha-borrar:hover { background: var(--ti-peligro-piel); color: var(--ti-peligro); }
}
.ti-ficha-datos { min-width: 0; flex: 1; }
.ti-ficha-tt {
  display: block; font-size: 16px; font-weight: 600; letter-spacing: -.014em;
  color: var(--ti-tinta);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ti-ficha-sub {
  display: block; font-size: 13.5px; color: var(--ti-tinta-3); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ti-ficha-der { flex: 0 0 auto; text-align: right; }
.ti-ficha-monto {
  display: block; font-size: 16px; font-weight: 700; letter-spacing: -.018em;
  color: var(--ti-marca-honda); font-variant-numeric: tabular-nums;
}
.ti-ficha-estado { display: block; font-size: 12.5px; font-weight: 600; margin-top: 2px; }
.ti-ficha-cuerpo { padding: 0 16px 16px; }

/* ── Botones redondos de opción (los métodos de pago) ── */
.ti-opciones { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.ti-opcion {
  cursor: pointer;
  border: 1px solid var(--ti-filo-2);
  background: var(--ti-tarjeta);
  border-radius: var(--ti-r-sm);
  min-height: 42px;
  padding: 9px 16px;
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: border-color .2s, color .2s;
}
.ti-body .ti-opcion { color: var(--ti-tinta-2); }

.ti-eti-mini {
  font-size: 11.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ti-tinta-4);
}
.ti-seccion-tt { font-size: 16.5px; font-weight: 700; letter-spacing: -.018em; }

/* ── Una caja de "no hay nada" ── */
.ti-vacio-caja {
  border-radius: var(--ti-r-xl);
  background: var(--ti-tarjeta);
  box-shadow: var(--ti-sombra);
  padding: 26px 18px;
  text-align: center;
}
.ti-vacio-tt { font-size: 16px; font-weight: 600; letter-spacing: -.014em; }
.ti-vacio-sub { font-size: 14px; color: var(--ti-tinta-3); margin-top: 6px; line-height: 1.45; }

/* ── Filas sueltas nombre / cifra ── */
.ti-repaso { display: grid; gap: 2px; margin-top: 10px; }
.ti-repaso-fila {
  display: flex; align-items: center; gap: 12px; padding: 11px 0;
  border-top: 1px solid var(--ti-filo);
}
.ti-repaso-fila:first-child { border-top: none; }
.ti-repaso-nombre { min-width: 0; flex: 1; font-size: 14.5px; color: var(--ti-tinta-2); }
.ti-repaso-val {
  flex: 0 0 auto; font-size: 14.5px; font-weight: 600;
  color: var(--ti-marca-honda); font-variant-numeric: tabular-nums;
}

/* ── De qué número sale el mensaje ──
   WhatsApp no deja elegir remitente: el enlace `wa.me` abre la aplicación y
   escribe desde la cuenta que esté abierta EN ESE APARATO. El número que se
   guardaba como «desde el que escribes» no se usaba para nada —ni al enviar,
   ni en la tarjeta del paciente, ni en el servidor—, así que en vez de
   enseñar un dato que no manda, se explica la regla que sí manda. */
.ti-desde {
  display: flex; align-items: flex-start; gap: 11px;
  margin-top: 14px; padding: 12px 13px;
  border-radius: var(--ti-r-md);
  background: var(--ti-hueco);
  border: 1px solid var(--ti-filo-2);
}
.ti-desde-ico {
  width: 28px; height: 28px; border-radius: var(--ti-r-xs); flex: 0 0 auto;
  background: rgba(21, 128, 61, .10);
  display: flex; align-items: center; justify-content: center;
}
.ti-desde-ico svg {
  width: 16px; height: 16px; fill: none; stroke: var(--ti-ok);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.ti-desde-txt { min-width: 0; flex: 1; font-size: 13px; line-height: 1.45; color: var(--ti-tinta-3); }
.ti-desde-txt b {
  display: block; font-size: 14px; font-weight: 600;
  color: var(--ti-tinta); margin-bottom: 2px;
}

/* ── El interruptor ── */
.ti-switch {
  cursor: pointer;
  flex: 0 0 auto;
  width: 50px;
  height: 30px;
  border-radius: var(--ti-circulo);
  border: none;
  background: var(--ti-tinta-5);
  padding: 3px;
  display: flex;
  justify-content: flex-start;
  transition: background .2s;
}
.ti-switch span {
  width: 24px;
  height: 24px;
  border-radius: var(--ti-circulo);
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(9, 38, 52, .25);
  transition: transform .2s var(--ti-curva-suave);
}
.ti-switch.is-on { background: var(--ti-marca); }
.ti-switch.is-on span { transform: translateX(20px); }
.ti-switch:disabled { opacity: .5; cursor: default; }

/* ── La burbuja de vista previa ──
   Verde de WhatsApp a propósito: el doctor tiene que reconocer de un vistazo
   que eso es lo que va a leer el paciente en su teléfono, no un campo más. */
.ti-burbuja {
  margin-top: 12px;
  border-radius: var(--ti-r-lg);
  background: #E7F3E8;
  border: 1px solid #D4E9D6;
  padding: 12px 13px;
}
.ti-burbuja-txt {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ti-tinta);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Campo de texto ── */
.ti-campo {
  width: 100%;
  margin-top: 12px;
  background: var(--ti-hueco);
  border: 1px solid var(--ti-filo-2);
  border-radius: var(--ti-r-md);
  padding: 12px 13px;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ti-tinta);
  resize: vertical;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.ti-campo:focus { border-color: var(--ti-marca); box-shadow: 0 0 0 4px rgba(8, 145, 178, .16); }

/* ── Chips pequeños (las variables que se insertan) ── */
.ti-chips { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.ti-chip {
  cursor: pointer;
  border: 1px solid var(--ti-filo-2);
  background: var(--ti-tarjeta);
  border-radius: var(--ti-r-sm);
  min-height: 36px;
  padding: 7px 13px;
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: border-color .2s;
}
.ti-body .ti-chip { color: var(--ti-marca-media); }

/* ── Una fila de envío ── */
.ti-envio {
  cursor: pointer;
  width: 100%;
  border: none;
  background: transparent;
  text-align: left;
  padding: 12px 16px;
  min-height: 58px;
  border-top: 1px solid var(--ti-filo);
  display: flex;
  align-items: center;
  gap: 12px;
  border-left: 3px solid transparent;
  transition: background .2s;
}
.ti-envio.is-pendiente { border-left-color: #E0992E; }
.ti-envio-hora {
  width: 52px;
  flex: 0 0 auto;
  font-size: 14.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ti-marca-honda);
}
.ti-envio-datos { min-width: 0; flex: 1; }
.ti-envio-nombre {
  display: block;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.012em;
  color: var(--ti-tinta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ti-envio-detalle {
  display: block;
  font-size: 12.5px;
  color: var(--ti-tinta-4);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ti-envio-estado { flex: 0 0 auto; font-size: 12.5px; font-weight: 600; white-space: nowrap; }

/* ── La vista previa de la tarjeta del paciente ──
   Es un papel, así que se dibuja como un papel: blanco, canto fino y sombra
   corta. No lleva el turquesa del modo — el color lo pone el tema que el doctor
   elija, que es justo lo que tiene que poder juzgar aquí. */
.ti-vista {
  margin-top: 13px;
  border-radius: var(--ti-r-lg);
  overflow: hidden;
  border: 1px solid var(--ti-filo-2);
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(11, 95, 132, .12);
}
.ti-vista-cab { padding: 14px 16px; }
.ti-vista-clinica { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ti-tinta-3); }
.ti-vista-tt { font-size: 18px; font-weight: 700; letter-spacing: -.02em; margin-top: 4px; }
.ti-vista-cuerpo { padding: 14px 16px 16px; display: grid; gap: 12px; }
.ti-vista-saludo { font-size: 14px; line-height: 1.45; color: var(--ti-tinta-2); }
.ti-vista-bloque-tt { font-size: 12.5px; font-weight: 700; letter-spacing: .02em; }
.ti-vista-bloque-txt { font-size: 13.5px; line-height: 1.45; color: var(--ti-tinta-3); margin-top: 3px; }
.ti-vista-despedida {
  font-size: 13.5px; line-height: 1.45; color: var(--ti-tinta-3);
  padding-top: 11px; border-top: 1px solid var(--ti-filo);
}

/* El disco de color dentro de una píldora de tema. */
.ti-punto-color {
  display: inline-block; width: 11px; height: 11px; border-radius: var(--ti-circulo);
  margin-right: 7px; vertical-align: -1px;
  box-shadow: inset 0 0 0 1px rgba(9, 38, 52, .12);
}

/* ── La cabecera de «Mi perfil» ── */
.ti-perfil-cab { display: flex; align-items: center; gap: 13px; }
.ti-retrato {
  width: 64px; height: 64px; border-radius: var(--ti-circulo); flex: 0 0 auto;
  background: rgba(8, 145, 178, .11);
  color: var(--ti-marca-media);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700;
  /* La foto entra como `background-image` desde el JS, y con `important`
     porque los temas pintan el avatar con `background: … !important`. */
  background-repeat: no-repeat;
}
.ti-perfil-nombre {
  display: block; font-size: 20px; font-weight: 700; letter-spacing: -.022em;
  color: var(--ti-marca-honda); line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ti-perfil-meta {
  display: block; font-size: 13.5px; color: var(--ti-tinta-3); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── El mapa de la clínica (OpenStreetMap con Leaflet, vía map-picker.js) ──
   El mismo selector de Configuración, vestido de modo trabajo: un hueco
   redondeado DENTRO de la tarjeta, sin marco propio, y los controles de
   Leaflet reescritos para que no parezcan de otra aplicación. */
.ti-mapa-cab { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; }
.ti-mapa-cab > div:first-child { flex: 1; min-width: 0; }
.ti-mapa {
  height: 240px; margin-top: 10px;
  border-radius: var(--ti-r-lg); overflow: hidden;
  background: var(--ti-hueco);
  border: 1px solid var(--ti-filo-2);
  /* Leaflet apila sus paneles con `z-index: 400+`. Un contexto propio los
     deja por debajo de la cabecera pegajosa, del menú y de la hoja. */
  position: relative; z-index: 0;
}
.ti-mapa .leaflet-container { font-family: inherit; background: var(--ti-hueco); }
.ti-mapa .leaflet-control-zoom {
  border: none; border-radius: var(--ti-r-sm); overflow: hidden;
  box-shadow: 0 1px 3px rgba(11, 95, 132, .22);
}
.ti-mapa .leaflet-control-zoom a {
  width: 32px; height: 32px; line-height: 32px;
  background: var(--ti-tarjeta); color: var(--ti-tinta-2);
  border-bottom-color: var(--ti-filo);
}
.ti-mapa .leaflet-control-zoom a:hover { background: var(--ti-hueco); color: var(--ti-marca-media); }
/* En una columna ancha 240 px de alto dejan una franja: el mapa crece con ella
   para que se siga leyendo como un mapa y no como un recorte. */
@media (min-width: 768px)  { .ti-mapa { height: 300px; } }
@media (min-width: 1180px) { .ti-mapa { height: 360px; } }

.ti-mapa-coords {
  display: flex; align-items: flex-start; gap: 7px;
  margin-top: 10px; font-size: 12.5px; line-height: 1.45; color: var(--ti-tinta-3);
}
.ti-mapa-coords b { color: var(--ti-tinta-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.ti-mapa-coords svg {
  width: 14px; height: 14px; margin-top: 2px; flex: 0 0 auto;
  fill: none; stroke: var(--ti-marca); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* Un botón chico, para las acciones que acompañan a un campo o a un mapa. */
.ti-boton--chico {
  min-height: 38px; padding: 9px 13px; font-size: 13.5px;
  border-radius: var(--ti-r-sm); flex: 0 0 auto; gap: 6px;
}
.ti-boton--chico svg {
  width: 15px; height: 15px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* Campo y acción en la misma línea: buscar una dirección, leer un enlace. */
.ti-linea-campo { display: flex; gap: 8px; align-items: stretch; margin-top: 8px; }
.ti-linea-campo .ti-campo { margin-top: 0; min-height: 46px; min-width: 0; }
.ti-linea-campo .ti-boton { margin-top: 0; }

/* Los resultados de la búsqueda de direcciones. */
.ti-resultados {
  margin-top: 8px; border-radius: var(--ti-r-md); overflow: hidden;
  border: 1px solid var(--ti-filo-2); background: var(--ti-tarjeta);
}
.ti-resultado {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: transparent; border: none; border-bottom: 1px solid var(--ti-filo);
  padding: 11px 13px; font-family: inherit; font-size: 13.5px; line-height: 1.45;
  color: var(--ti-tinta-2);
}
.ti-resultado:last-child { border-bottom: none; }
.ti-resultado-vacio { padding: 11px 13px; font-size: 13px; line-height: 1.45; color: var(--ti-tinta-3); }

/* ── Pacientes ── */

.ti-buscar { position: relative; }
.ti-buscar svg {
  position: absolute; left: 14px; top: 15px; width: 18px; height: 18px;
  fill: none; stroke: var(--ti-tinta-4); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  pointer-events: none;
}
.ti-buscar input {
  width: 100%; background: var(--ti-tarjeta); border: none;
  box-shadow: var(--ti-sombra-baja);
  border-radius: var(--ti-r-md); min-height: 48px; padding: 0 14px 0 40px;
  font-family: inherit; font-size: 15px; color: var(--ti-tinta);
  outline: none; transition: box-shadow .2s;
}
.ti-buscar input::placeholder { color: var(--ti-tinta-4); }
.ti-buscar input:focus { box-shadow: 0 0 0 4px rgba(8, 145, 178, .16); }

.ti-pac {
  /* Hijo de `.ti-fichas`, que es un grid: sin esto nace con `min-width: auto`
     y no encoge por debajo del nombre más largo. En un teléfono de 320 px la
     ficha medía 386 y se salía de la pantalla. */
  min-width: 0;
  cursor: pointer; width: 100%; border: none; text-align: left;
  border-radius: var(--ti-r-xl); background: var(--ti-tarjeta); box-shadow: var(--ti-sombra-alta);
  padding: 14px 16px; display: flex; align-items: center; gap: 13px;
  transition: transform .3s var(--ti-rebote), box-shadow .2s;
}
/* El avatar sale del mismo par de colores por nombre que /patients.html y el
   expediente (SDTrabajo.degradado): un paciente tiene que ser del mismo color
   en toda la plataforma o deja de servir para reconocerlo de un vistazo. El
   diseño lo dibujaba liso; se conserva la forma —círculo de 44 px con las
   iniciales— y se le devuelve su color. */
.ti-avatar {
  width: 44px; height: 44px; border-radius: var(--ti-circulo); flex: 0 0 auto;
  background: linear-gradient(135deg, var(--c1, #0891B2), var(--c2, #0E7490));
  color: #FFFFFF; display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; letter-spacing: -.01em;
}
.ti-pac-datos { min-width: 0; flex: 1; }
.ti-pac-nombre {
  display: block; font-size: 16px; font-weight: 600; letter-spacing: -.014em;
  color: var(--ti-tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ti-pac-meta {
  display: block; font-size: 13.5px; color: var(--ti-tinta-3); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ti-pac-chev { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: var(--ti-tinta-5); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.ti-mas {
  cursor: pointer; width: 100%; margin-top: 12px;
  border: 1px solid var(--ti-canto); background: var(--ti-tarjeta);
  font-size: 15px; font-weight: 500; padding: 12px; border-radius: var(--ti-r-md); min-height: 48px;
  transition: border-color .2s;
}
.ti-body .ti-mas { color: var(--ti-marca-media); }
.ti-mas:disabled { opacity: .6; cursor: default; }

/* ── El abecedario de la lista de pacientes ──
   Como la agenda de un teléfono: la lista va por letras, cada letra se queda
   pegada mientras pasan sus nombres, y a la derecha hay una tira para saltar.
   No es adorno: con trescientos expedientes, llegar a la M desplazando es medio
   minuto. */
.ti-letra {
  position: sticky;
  /* Debajo de la cabecera, que también está pegada. Si las dos pidieran el
     mismo `top`, la letra se metería debajo del turquesa y no se leería. */
  top: calc(62px + env(safe-area-inset-top, 0px));
  z-index: 5;
  margin: 14px 0 6px;
  padding: 5px 12px;
  border-radius: var(--ti-r-sm);
  /* Cápsula propia y no una franja de lado a lado: la lista son tarjetas
     sueltas sobre el degradado, y una franja las cortaría en dos bloques.
     `justify-self: start` porque la lista es un grid y, sin él, la cápsula se
     estira hasta el otro canto y vuelve a ser la franja que no se quería. */
  display: inline-block;
  justify-self: start;
  /* Con la lista en varias columnas, la letra tiene que CORTAR la fila entera:
     si ocupa una celda más, se queda flotando en medio de los nombres y deja de
     separar nada. */
  grid-column: 1 / -1;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  box-shadow: 0 1px 3px rgba(11, 95, 132, .14);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--ti-marca-honda);
}
.ti-letra:first-child { margin-top: 2px; }

/* La tira de letras. Pegada al canto derecho y centrada en vertical. */
.ti-indice {
  position: fixed;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 4px;
  border-radius: var(--ti-r-sm);
  background: rgba(255, 255, 255, .6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  /* El gesto es nuestro entero: si el navegador se queda el arrastre vertical
     para desplazar la página, la tira no sirve para nada. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
}
.ti-indice-letra {
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.16;
  color: var(--ti-marca-media);
  width: 14px;
  text-align: center;
  pointer-events: none;   /* el que manda es el contenedor, no cada letra */
}
.ti-indice-letra.is-vacia { color: var(--ti-tinta-5); }
.ti-indice.is-usando { background: rgba(255, 255, 255, .88); }

/* El globo que sale bajo el dedo. Grande a propósito: el dedo tapa la tira, así
   que la letra elegida tiene que verse FUERA de donde está el dedo. */
.ti-globo {
  position: fixed;
  right: 46px;
  z-index: 31;
  width: 74px;
  height: 74px;
  margin-top: -37px;
  border-radius: var(--ti-r-xl);
  background: var(--ti-marca-honda);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -.02em;
  box-shadow: 0 10px 24px -10px rgba(9, 38, 52, .6);
  pointer-events: none;
  opacity: 0;
  transform: scale(.82);
  transition: opacity 140ms ease, transform 200ms var(--ti-rebote);
}
.ti-globo.is-visible { opacity: 1; transform: scale(1); }

/* Con la tira puesta, la columna se aparta: si no, las letras quedan encima del
   chevron de las tarjetas y no se sabe si se está tocando una cosa o la otra. */
body.ti-con-indice .ti-main { padding-right: 30px; }

/* En una ventana estrecha la tira se come el canto de las tarjetas. */
@media (max-width: 379px) {
  .ti-indice-letra { font-size: 9.5px; width: 12px; }
  .ti-globo { right: 40px; width: 64px; height: 64px; margin-top: -32px; font-size: 29px; }
}

/* ── La agenda ── */

/* El botón claro de la cabecera (el «+» de agendar). */
.ti-btn-cabecera--claro { background: rgba(255, 255, 255, .92); }
.ti-btn-cabecera--claro svg { stroke: var(--ti-marca-media); stroke-width: 2.4; }

.ti-nav-dia { display: flex; align-items: center; gap: 10px; padding-top: 4px; }
.ti-nav-btn {
  cursor: pointer; width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: var(--ti-r-sm); border: none; background: var(--ti-tarjeta);
  box-shadow: 0 1px 3px rgba(11, 95, 132, .18);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.ti-nav-btn svg { width: 17px; height: 17px; fill: none; stroke: var(--ti-marca); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* El título es un botón: tocarlo devuelve a hoy. No lleva adorno de botón
   porque no tiene que parecerlo — es el atajo de quien ya se perdió de mes. */
.ti-nav-tt {
  cursor: pointer; min-width: 0; flex: 1; border: none; background: transparent;
  padding: 0; text-align: center;
}
.ti-nav-tt-dia {
  display: block;
  font-size: 22px; font-weight: 700; letter-spacing: -.026em;
  color: var(--ti-marca-honda); line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ti-nav-tt-sub { display: block; font-size: 13px; color: var(--ti-tinta-3); margin-top: 2px; }

/* El segmentado Día · Mes, sobre el fondo celeste (no dentro del hero). */
.ti-segmento--claro {
  margin-top: 14px;
  background: rgba(255, 255, 255, .72);
  box-shadow: inset 0 0 0 1px var(--ti-filo-2);
}
.ti-segmento--claro button { color: var(--ti-tinta-3); }
.ti-segmento--claro button.is-on {
  background: #FFFFFF; color: var(--ti-marca-honda);
  box-shadow: 0 1px 3px rgba(11, 95, 132, .18);
}

/* La tira de la semana. */
.ti-semana { display: flex; gap: 7px; margin-top: 14px; }
.ti-sem-dia {
  cursor: pointer; flex: 1; min-width: 0; border: none; border-radius: var(--ti-r-md);
  background: rgba(255, 255, 255, .72);
  padding: 9px 2px 8px; display: grid; justify-items: center; gap: 3px;
  min-height: 62px; align-content: center;
  transition: background .2s, box-shadow .2s;
}
.ti-sem-dia.is-on { background: var(--ti-marca); box-shadow: 0 6px 14px -8px rgba(11, 95, 132, .8); }
.ti-sem-dow { font-size: 11px; font-weight: 600; color: var(--ti-tinta-4); }
.ti-sem-num {
  font-size: 17px; font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--ti-tinta);
}
.ti-sem-dia.is-hoy .ti-sem-num { color: var(--ti-marca-honda); }
.ti-sem-dia.is-on .ti-sem-dow, .ti-sem-dia.is-on .ti-sem-num { color: #FFFFFF; }
.ti-punto { width: 5px; height: 5px; border-radius: var(--ti-circulo); background: transparent; }
.ti-punto.is-lleno { background: var(--ti-marca); }
.ti-sem-dia.is-on .ti-punto.is-lleno { background: #FFFFFF; }

/* La rejilla del mes. */
.ti-mes { margin-top: 14px; padding: 14px 12px 12px; }
/* El día elegido, con palabras, encima de sus citas. */
.ti-dia-tt {
  margin: 16px 2px 10px;
  font-size: 12px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ti-tinta-4);
}
.ti-mes-cab, .ti-mes-rejilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ti-mes-rejilla { gap: 3px; }
.ti-mes-dow {
  text-align: center; font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ti-tinta-4); padding-bottom: 8px;
}
.ti-mes-dia {
  cursor: pointer; border: none; border-radius: var(--ti-r-sm); background: transparent;
  min-height: 46px; display: grid; justify-items: center; align-content: center;
  gap: 4px; padding: 4px 0; transition: background .2s;
}
.ti-mes-num { font-size: 15px; font-variant-numeric: tabular-nums; color: var(--ti-tinta); line-height: 1; }
.ti-mes-dia.is-fuera .ti-mes-num { color: var(--ti-tinta-5); }
.ti-mes-dia.is-hoy { background: #EAF4FA; }
.ti-mes-dia.is-hoy .ti-mes-num { font-weight: 700; color: var(--ti-marca-honda); }
.ti-mes-dia.is-on { background: var(--ti-marca); }
.ti-mes-dia.is-on .ti-mes-num { font-weight: 700; color: #FFFFFF; }
.ti-mes-dia.is-on .ti-punto.is-lleno { background: #FFFFFF; }

/* La tarjeta de una cita del día. */
.ti-cita-btn {
  cursor: pointer; width: 100%; border: none; background: transparent;
  text-align: left; padding: 15px 16px; display: flex; align-items: center; gap: 13px;
  transition: background .2s;
}
/* La cabecera de una cita ya no se pliega: las tarjetas van abiertas. Conserva
   la misma caja —por eso lleva `.ti-cita-btn`— pero sin el gesto ni el
   chevrón, que apuntarían a algo que no pasa. */
.ti-cita-fija { cursor: default; }
.ti-cita-fija .ti-cita-chev { display: none; }
.ti-body .ti-cita-fija:active, .ti-body .ti-cita-fija:hover { transform: none; background: transparent; }
.ti-cita-col { width: 62px; flex: 0 0 auto; }
.ti-cita-h {
  display: block; font-size: 17px; font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--ti-marca-honda);
}
.ti-cita-dur { display: block; font-size: 12px; color: var(--ti-tinta-4); margin-top: 1px; }
.ti-cita-der { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.ti-cita-chev { width: 15px; height: 15px; fill: none; stroke: var(--ti-tinta-5); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ti-curva-suave); }
.ti-cita-btn[aria-expanded="true"] .ti-cita-chev { transform: rotate(180deg); }
.ti-datos {
  padding: 12px 14px; border-radius: var(--ti-r-md); background: var(--ti-hueco);
  border: 1px solid var(--ti-filo-2); display: grid; gap: 9px;
}
.ti-datos-fila { display: flex; align-items: center; gap: 10px; }
.ti-datos-fila svg { width: 16px; height: 16px; fill: none; stroke: var(--ti-tinta-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.ti-datos-fila span { min-width: 0; font-size: 14px; color: var(--ti-tinta-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* El botón de abajo del todo, con su «+». */
.ti-anadir {
  cursor: pointer; width: 100%; margin-top: 14px;
  border: 1px solid var(--ti-canto); background: var(--ti-tarjeta);
  font-size: 15px; font-weight: 600; padding: 13px; border-radius: var(--ti-r-md);
  min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 9px;
  transition: border-color .2s;
}
.ti-body .ti-anadir { color: var(--ti-marca-media); }
.ti-anadir svg { width: 18px; height: 18px; fill: none; stroke: var(--ti-marca); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ── El editor del horario semanal ──
   Un día por fila. El paso de una hora se toca con −/+ y no con un <input
   type="time">: el teclado de hora del teléfono tapa media pantalla para algo
   que casi siempre es «una hora antes» o «una hora después». */
.ti-dias { margin-top: 12px; border-radius: var(--ti-r-lg); border: 1px solid var(--ti-filo-2); overflow: hidden; }
.ti-dia { padding: 12px 14px; border-top: 1px solid var(--ti-filo); background: var(--ti-tarjeta); }
.ti-dia:first-child { border-top: none; }
.ti-dia.is-cerrado { background: #FBFDFE; }
.ti-dia-cab { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ti-dia-nombre {
  font-size: 14.5px; font-weight: 500; color: var(--ti-tinta);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ti-dia-resumen {
  min-width: 0; flex: 1; font-size: 13px; color: var(--ti-tinta-4);
  font-variant-numeric: tabular-nums;
}
.ti-dia-linea { display: flex; align-items: center; gap: 9px; margin-top: 9px; }
.ti-dia-eti { font-size: 12.5px; color: var(--ti-tinta-4); width: 42px; flex: 0 0 auto; }
.ti-paso {
  cursor: pointer; width: 34px; height: 34px; flex: 0 0 auto;
  border: 1px solid var(--ti-filo-2); background: var(--ti-tarjeta);
  border-radius: var(--ti-r-xs); display: flex; align-items: center; justify-content: center;
  transition: border-color .2s;
}
.ti-body .ti-paso { color: var(--ti-marca-media); }
.ti-paso svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.ti-hora-val {
  min-width: 56px; text-align: center; font-size: 14.5px; font-weight: 600;
  color: var(--ti-marca-honda); font-variant-numeric: tabular-nums;
}
.ti-dia-copiar {
  cursor: pointer; flex: 0 0 auto;
  background: var(--ti-tarjeta); border: 1px solid var(--ti-canto);
  border-radius: var(--ti-r-xs); min-height: 38px; padding: 0 12px; font-size: 13px; white-space: nowrap;
  transition: border-color .2s;
}
.ti-body .ti-dia-copiar { color: var(--ti-marca-media); }

/* Teléfono pequeño: «Copiar a todos» va en la misma fila que la hora de cierre
   (etiqueta + dos pasos + el valor ya ocupan 200 px), así que se salía de la
   pantalla. Dejando envolver la fila, el separador `flex:1` se queda arriba y el
   botón cae entero en su propio renglón. */
@media (max-width: 430px) {
  .ti-dia-linea { flex-wrap: wrap; row-gap: 9px; }
  .ti-dia-copiar { width: 100%; }
}

/* ── La alerta de algo roto ──
   Distinta del aviso ámbar de `.ti-tarjeta--aviso`, que informa de algo que
   está pasando (citas sin confirmar). Esta dice que algo NO FUNCIONA ahora
   mismo y que hay que ir a arreglarlo, así que va en rojo y con su botón:
   sin acción a la vista, un aviso rojo solo es una mancha que se aprende a
   ignorar. */
.ti-alerta {
  /* Margen por los DOS lados. En esta hoja cada bloque declara su propio
     `margin-top` y `.ti-tarjeta` pelada no lleva ninguno, así que la alerta
     quedaba pegada a lo que viniera detrás. Con los dos márgenes da igual qué
     la siga: si el de abajo se junta con el `margin-top` del siguiente, los
     dos colapsan en 12 y no se suman —son hermanos en flujo normal—, y si el
     siguiente no declara nada, estos 12 son los que separan. */
  margin-top: 12px;
  margin-bottom: 12px;
  padding: 14px;
  border-radius: var(--ti-r-lg);
  background: var(--ti-peligro-piel);
  box-shadow: inset 0 0 0 1px rgba(180, 35, 24, .16);
}
/* Cuando la alerta es lo primero de la pantalla no necesita su margen de
   arriba: el `padding-top` de la columna ya la separa de la cabecera, y con los
   dos arrancaba 12 px más abajo que una tarjeta normal. No sirve `:first-child`
   —el aviso `.ti-nota` va antes en el marcado aunque esté oculto—, así que se
   apunta a ese caso concreto. */
.ti-main--interior > .ti-alerta:first-child,
.ti-nota.ti-oculto + .ti-alerta { margin-top: 0; }

.ti-alerta-cab { display: flex; gap: 11px; align-items: flex-start; }
.ti-alerta-icono {
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: var(--ti-r-sm); display: grid; place-items: center;
  background: rgba(180, 35, 24, .11);
}
.ti-alerta-icono svg {
  width: 19px; height: 19px; fill: none; stroke: var(--ti-peligro);
  stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round;
}
.ti-alerta-cuerpo { min-width: 0; flex: 1; }
.ti-body .ti-alerta-tt {
  display: block;
  font-size: 15px; font-weight: 650; letter-spacing: -.012em; line-height: 1.32;
  color: var(--ti-peligro);
}
.ti-alerta-txt {
  display: block;
  margin-top: 4px;
  font-size: 13.5px; line-height: 1.45; color: var(--ti-tinta-2);
}
.ti-body .ti-alerta-btn {
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 42px; margin-top: 12px;
  border: none; border-radius: var(--ti-r-sm);
  background: var(--ti-peligro); color: #fff;
  font-size: 14.5px; font-weight: 600;
  transition: opacity .2s;
}
.ti-body .ti-alerta-btn:active { opacity: .82; }

/* El escalón de abajo: la clínica SÍ tiene dirección escrita, pero sin punto
   marcado el mapa deja al paciente en un sitio aproximado. Funciona, así que
   no es rojo —un aviso que exagera se aprende a ignorar—, pero sigue siendo
   algo que arreglar. */
.ti-alerta.is-aviso {
  background: #FFF8EB;
  box-shadow: inset 0 0 0 1px rgba(180, 83, 9, .18);
}
.ti-alerta.is-aviso .ti-alerta-icono { background: rgba(180, 83, 9, .11); }
.ti-alerta.is-aviso .ti-alerta-icono svg { stroke: var(--ti-aviso); }
.ti-body .ti-alerta.is-aviso .ti-alerta-tt { color: var(--ti-aviso); }
.ti-body .ti-alerta.is-aviso .ti-alerta-btn { background: var(--ti-aviso); }

/* ── El logo de la clínica ── */
.ti-logo-caja {
  margin-top: 14px; padding: 14px;
  border-radius: var(--ti-r-lg); background: var(--ti-hueco);
  box-shadow: inset 0 0 0 1px var(--ti-filo-2);
}
.ti-logo-cab { display: flex; align-items: center; gap: 12px; }
.ti-logo-muestra {
  flex: 0 0 52px; width: 52px; height: 52px;
  border-radius: var(--ti-r-md); overflow: hidden;
  display: grid; place-items: center;
  background: var(--ti-tarjeta);
  box-shadow: inset 0 0 0 1px var(--ti-filo-2);
  font-size: 16px; font-weight: 700; letter-spacing: .02em;
}
.ti-body .ti-logo-muestra { color: var(--ti-marca-honda); }
/* `contain` y no `cover`: un logo recortado es peor que ninguno. */
.ti-logo-muestra img { width: 100%; height: 100%; object-fit: contain; padding: 5px; display: block; }
.ti-logo-tx { min-width: 0; flex: 1; }
.ti-logo-tx b { display: block; font-size: 15px; font-weight: 650; letter-spacing: -.012em; }
.ti-logo-tx span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--ti-tinta-3); }

/* ── El QR y el enlace ── */
.ti-qr-caja {
  display: flex; justify-content: center; margin-top: 14px;
}
.ti-qr {
  padding: 14px; border-radius: var(--ti-r-xl); background: var(--ti-tarjeta);
  border: 1px solid var(--ti-filo-2); box-shadow: 0 2px 10px rgba(11, 95, 132, .12);
}
.ti-qr svg { display: block; width: 176px; height: 176px; color: #0B1C28; }
.ti-enlace {
  display: flex; align-items: center; gap: 10px; margin-top: 14px;
  padding: 9px 9px 9px 13px; border-radius: var(--ti-r-md);
  background: var(--ti-hueco); border: 1px solid var(--ti-filo-2);
}
.ti-enlace-txt {
  min-width: 0; flex: 1; font-size: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--ti-tinta-2);
}

/* ── El corte de día dentro de una lista ──
   Las listas de envíos y confirmaciones van de la cita más próxima a la más
   lejana. Eso ya era así, pero no se VEÍA: quince filas con su hora seguidas no
   dicen dónde acaba hoy y empieza mañana. Con el corte, el orden se lee solo. */
.ti-corte {
  padding: 9px 16px 7px;
  background: var(--ti-hueco);
  border-top: 1px solid var(--ti-filo-2);
  border-bottom: 1px solid var(--ti-filo-2);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ti-tinta-4);
}
/* El de HOY se distingue: es el único día sobre el que todavía se puede actuar. */
.ti-corte.es-hoy { color: var(--ti-marca-honda); background: #EAF4FA; }
.ti-corte:first-child { border-top: none; }

/* ── El botón de enviar de una fila ──
   Verde de WhatsApp y con su glifo: la fila entera era pulsable, pero nada
   decía que al tocarla se abría WhatsApp. Un destino que no se anuncia no se
   usa. Va a la derecha, separado del estado, para que se distinga «cómo está»
   de «qué puedo hacer». */
.ti-enviar {
  cursor: pointer;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  border-radius: var(--ti-r-sm);
  min-height: 36px;
  padding: 0 13px;
  background: #25D366;
  color: #FFFFFF;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: background .2s;
}
.ti-body .ti-enviar { color: #FFFFFF; }
.ti-enviar svg { width: 15px; height: 15px; fill: currentColor; }
.ti-enviar:disabled { background: var(--ti-filo); color: var(--ti-tinta-4); cursor: default; }
.ti-body .ti-enviar:disabled { color: var(--ti-tinta-4); }
/* Reenviar pesa menos que enviar por primera vez: ya se hizo una vez. */
.ti-enviar--otra { background: var(--ti-tarjeta); box-shadow: inset 0 0 0 1px var(--ti-canto); }
.ti-body .ti-enviar--otra { color: var(--ti-marca-media); }

/* La fila deja de ser un botón: ahora es una fila con un botón dentro. */
.ti-envio--fija { cursor: default; }
.ti-body .ti-envio--fija:hover { background: transparent; }
.ti-body .ti-envio--fija:active { transform: none; background: transparent; }

/* La cabecera de una tarjeta que después lleva filas pegadas al canto. */
.ti-tarjeta--lista { padding: 0; overflow: hidden; }
.ti-tarjeta--lista .ti-lista-cab { padding: 15px 16px 13px; }
.ti-lista-sub { font-size: 13.5px; color: var(--ti-tinta-3); margin-top: 2px; }

/* El <main> de una pantalla interior arranca con aire arriba: no lleva el
   saludo del lanzador, que era quien lo abría. */
.ti-main--interior { padding-top: 16px; }

/* ── La columna de las pantallas prestadas ──
   El expediente, las consultas y Configuración no usan `.ti-main`: son
   pantallas de la app de siempre, vestidas con el lenguaje del modo, y su
   contenido cuelga de `main.layout-main`. /layout.css le deja a ese elemento
   `width: calc(100% - var(--sidebar-w))` y el margen del carril para hacerle
   sitio al menú lateral. Dentro del modo no hay menú, así que esos 278 px
   eran un hueco: el contenido salía más estrecho que su propia cabecera y
   descentrado respecto a ella. Aquí la columna es la del modo y nada más.

   Con `:has(.ti-cabecera)` para no tocar una pantalla que lleve `ti-body`
   sin cabecera del modo: sin cabecera no hay con qué alinearse. */
.ti-body:has(.ti-cabecera) main.layout-main,
.ti-body:has(.ti-cabecera) .layout-main {
  width: auto;
  max-width: var(--ti-columna);
  margin-left: auto;
  margin-right: auto;
  /* El carril lo pinta .ti-fondo (o el propio cuerpo), no este bloque. */
  background: transparent;
  /* `clip` y no el `hidden` que pone /layout.css en el teléfono: `hidden`
     convierte al elemento en CONTENEDOR DE SCROLL, y a partir de ahí todo lo
     pegajoso que lleve dentro se ancla a él —que no se desplaza— en vez de a
     la ventana. Resultado: barras que decían `sticky` y se iban con el dedo.
     `clip` corta igual lo que sobresale por los lados sin crear scroller. */
  overflow-x: clip;
  /* La entrada de /layout.css deja un `transform` residual, y un ancestro con
     transform es el bloque contenedor de lo fijo y lo pegajoso que lleve
     dentro. Entre pantallas del modo ya manda la transición de vista. */
  animation: none;
}


/* ═══════════════════════ ENTRE PANTALLAS ═══════════════════════
   El modo trabajo son ocho documentos HTML distintos, así que pasar de uno a
   otro era un CORTE de navegador: parpadeo en blanco y aparición seca. En una
   app eso no pasa nunca — la pantalla nueva ENTRA por un lado y la anterior se
   va por el otro, más despacio, y esa diferencia de velocidad es lo que dice
   cuál está encima de cuál.

   Se hace con transiciones de vista entre documentos. Dos cosas que conviene
   saber antes de tocarlo:

   1. Hacen falta LAS DOS páginas declarando `@view-transition`, y eso lo da
      esta hoja: el empujón ocurre entre CUALQUIER par de pantallas que la
      carguen. Hoy son las del modo más el expediente, /configuracion.html, el
      editor de formatos y las pantallas de consulta y de ver consulta. Lo que
      no la carga —/citas.html, /dashboard.html y el resto del panel— sigue con
      su corte de siempre, y está bien que así sea: saltar a otro lenguaje
      visual con una animación de continuidad mentiría sobre lo que pasa.
   2. La dirección la decide /trabajo-tacto.js y la escribe en `data-vt` del
      <html> ANTES del primer pixel (evento `pagereveal`). Sin eso las dos
      direcciones se verían iguales y «volver» se sentiría como «entrar».
   ═══════════════════════════════════════════════════════════════ */
@view-transition { navigation: auto; }

/* ── Lo que viaja es la RAÍZ, no el <main> ──
   Aquí hubo un fallo que costó encontrar. La versión anterior le ponía
   `view-transition-name` al <main>, y parecía correcta en pantallas cortas.
   Pero el <main> de Pacientes con sesenta fichas mide varios MILES de píxeles
   de alto, y el navegador tiene que sacarle una foto entera: al pasar del techo
   de textura, la transición se cae sin avisar — el doctor tocaba «volver» desde
   una lista desplazada y la pantalla cambiaba de golpe, sin animación.

   La raíz mide SIEMPRE una ventana (su foto es el bloque contenedor de la
   transición), así que no depende de lo larga que sea la pantalla ni de por
   dónde vaya el desplazamiento. Y como la cabecera tiene nombre propio, queda
   FUERA de esa foto: se queda quieta mientras el resto viaja, que es el efecto
   que se buscaba. Por eso también los desplazamientos vuelven a ser `100%` —
   el 100% de una ventana— en vez de `100vw`. */

/* La cabecera turquesa NO se va: se queda donde está y solo cambia lo que dice.
   Es lo que convierte nueve páginas en una sola app. */
.ti-cabecera { view-transition-name: sd-barra; }

/* ── Y no se anima NADA de ella ──
   Darle nombre propio la saca de la foto que se desliza, que es lo que la deja
   quieta. Pero el navegador, por defecto, le monta además su propio número:
   funde la vieja con la nueva (240 ms) y morfea su grupo (300 ms) mientras el
   resto de la pantalla viaja (380 ms). Tres relojes distintos sobre una barra
   que está EXACTAMENTE en el mismo sitio en las dos pantallas — eso es lo que
   se veía como una animación repetida.
   No hay nada que interpolar: la barra ya está donde tiene que estar, y lo
   único que cambia es el texto del título. Un cambio seco de texto por debajo
   de un deslizamiento de 380 ms no se ve. */
::view-transition-group(sd-barra) { animation: none; }
::view-transition-old(sd-barra) { animation: none; opacity: 0; }
::view-transition-new(sd-barra) { animation: none; opacity: 1; }

/* El grupo de la raíz, al mismo reloj que el deslizamiento. La foto vieja y la
   nueva miden las dos una ventana, así que su morfeo no mueve nada — pero
   corría 250 ms por su cuenta, y una animación de más es una animación de más. */
::view-transition-group(root) { animation-duration: 380ms; }

/* La curva de iOS: sale disparado y frena largo. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 380ms;
  animation-timing-function: cubic-bezier(.32, .72, 0, 1);
  animation-fill-mode: both;
  mix-blend-mode: normal;
}

/* ── Entrar (empujar una pantalla encima) ──
   La que se va recorre solo un 28% y se apaga un poco: se queda DETRÁS, no se
   marcha. La nueva llega entera desde el borde. */
html[data-vt="push"]::view-transition-old(root) { animation-name: sd-atras-izq; }
html[data-vt="push"]::view-transition-new(root) { animation-name: sd-llega-der; }

/* ── Volver ──
   Exactamente el camino inverso. Si algo desaparece por un lado, se espera que
   vuelva a salir por ese mismo lado. */
html[data-vt="pop"]::view-transition-old(root) { animation-name: sd-sale-der; }
html[data-vt="pop"]::view-transition-new(root) { animation-name: sd-vuelve-izq; }

/* En `%` del grupo, que ahora ES la ventana. */
@keyframes sd-llega-der  { from { transform: translateX(100%); } }
@keyframes sd-atras-izq  { to   { transform: translateX(-28%); opacity: .45; } }
@keyframes sd-sale-der   { to   { transform: translateX(100%); } }
@keyframes sd-vuelve-izq { from { transform: translateX(-28%); opacity: .45; } }

/* ── La entrada en frío ──
   Solo cuando NO se viene de otra pantalla del modo (arranque, recarga, volver
   del expediente): las piezas suben escalonadas. Después de un empujón no se
   repite — encadenar dos movimientos para una sola navegación se lee como un
   tartamudeo. La clase la pone /trabajo-tacto.js. */
html.sd-frio .ti-saludo-fila,
html.sd-frio .ti-rejilla > *,
html.sd-frio .ti-main > .ti-tarjeta,
html.sd-frio .ti-main > .ti-fichas,
html.sd-frio .ti-main > .ti-nav-dia,
html.sd-frio .ti-main > .ti-segmento,
html.sd-frio .ti-main > .ti-buscar,
html.sd-frio .ti-main > .ti-hero {
  animation: sd-sube 420ms cubic-bezier(.22, .9, .24, 1) both;
}
@keyframes sd-sube {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
/* 45 ms entre piezas: lo justo para que se lea como una secuencia y no como un
   desfile. Más allá de la sexta ya no se nota, y esperar estorba. */
html.sd-frio .ti-rejilla > *:nth-child(1) { animation-delay: 30ms; }
html.sd-frio .ti-rejilla > *:nth-child(2) { animation-delay: 60ms; }
html.sd-frio .ti-rejilla > *:nth-child(3) { animation-delay: 90ms; }
html.sd-frio .ti-rejilla > *:nth-child(4) { animation-delay: 105ms; }
html.sd-frio .ti-rejilla > *:nth-child(5) { animation-delay: 120ms; }
html.sd-frio .ti-rejilla > *:nth-child(6) { animation-delay: 135ms; }
html.sd-frio .ti-main > .ti-tarjeta:nth-of-type(1) { animation-delay: 150ms; }
html.sd-frio .ti-main > .ti-tarjeta:nth-of-type(2) { animation-delay: 195ms; }
html.sd-frio .ti-main > .ti-tarjeta:nth-of-type(3) { animation-delay: 240ms; }
html.sd-frio .ti-main > .ti-fichas { animation-delay: 120ms; }

/* Con movimiento reducido no hay empujón ni escalera: el navegador funde y ya.
   `navigation: none` desactiva la transición entre documentos entera. */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html.sd-frio .ti-saludo-fila,
  html.sd-frio .ti-rejilla > *,
  html.sd-frio .ti-main > .ti-tarjeta,
  html.sd-frio .ti-main > .ti-fichas,
  html.sd-frio .ti-main > .ti-nav-dia,
  html.sd-frio .ti-main > .ti-segmento,
  html.sd-frio .ti-main > .ti-buscar,
  html.sd-frio .ti-main > .ti-hero { animation: none; }
}

/* ═══════════════════════════ TACTO ═══════════════════════════
   El modo se usa con el DEDO y con el paciente delante.

   1. Los `:hover` viven todos aquí dentro, detrás de `(hover: hover) and
      (pointer: fine)`. En una pantalla táctil no existe "pasar por encima": lo
      que pasaba es que el estado se quedaba PEGADO tras el toque y la tarjeta
      seguía iluminada como si estuviera seleccionada. Si añades un `:hover`
      nuevo, va aquí o repetirás el fallo.
   2. La respuesta al dedo es el `:active` de abajo, y llega en el pointer-down,
      no al soltar: esperar al clic se siente muerto.
   ═══════════════════════════════════════════════════════════ */
@media (hover: hover) and (pointer: fine) {
  .ti-body a:hover { color: var(--ti-marca); text-decoration: none; }
  .ti-btn-cabecera:hover { background: rgba(255, 255, 255, .28); }
  .ti-perfil-btn:hover { background: rgba(255, 255, 255, .28); }
  .ti-mp-fila:hover { background: var(--ti-hueco); }
  .ti-mp-fila--salir:hover { background: var(--ti-peligro-piel); }
  .ti-body .ti-cajon-boton--claro:hover { background: #FFFFFF; color: var(--ti-marca-honda); }
  .ti-body .ti-cajon-boton--velado:hover { background: rgba(255, 255, 255, .28); color: #FFFFFF; }
  .ti-body .ti-fila-menu:hover { background: var(--ti-hueco); }
  .ti-body .ti-pie-boton--modo:hover { background: #FFFFFF; color: var(--ti-marca-honda); }
  .ti-body .ti-pie-boton--salir:hover { background: var(--ti-peligro-piel); color: var(--ti-peligro); }
  .ti-body .ti-hoja-fila:hover { background: var(--ti-hueco); }
  .ti-body .ti-resultado:hover { background: var(--ti-hueco); }
  .ti-body .ti-loza:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(11, 95, 132, .12), 0 16px 28px -16px rgba(11, 95, 132, .5);
  }
  .ti-body .ti-boton--fuerte, .ti-body .ti-boton--fuerte:hover { color: #FFFFFF; }
  .ti-body .ti-boton--fuerte:hover { background: var(--ti-marca-media); }
  .ti-body .ti-boton--suave, .ti-body .ti-boton--suave:hover { color: var(--ti-marca-media); }
  .ti-body .ti-boton--suave:hover { border-color: var(--ti-marca); color: var(--ti-marca-media); }
  .ti-body .ti-cita:hover { background: var(--ti-hueco); }
  .ti-body .ti-pie-enlace:hover { color: var(--ti-marca); }
  .ti-body .ti-pildora:hover { border-color: var(--ti-marca); }
  .ti-body .ti-ajuste-agenda:hover { background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--ti-canto); }
  .ti-body .ti-ficha-btn:hover { background: var(--ti-hueco); }
  .ti-body .ti-opcion:hover { border-color: var(--ti-marca); color: var(--ti-marca-media); }
  .ti-body .ti-chip:hover { border-color: var(--ti-marca); }
  .ti-body .ti-envio:hover { background: var(--ti-hueco); }
  .ti-body .ti-pac:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(11, 95, 132, .12), 0 16px 28px -18px rgba(11, 95, 132, .5);
  }
  .ti-body .ti-mas:hover { border-color: var(--ti-marca); }
  .ti-btn-cabecera--claro:hover { background: #FFFFFF; }
  .ti-nav-btn:hover { background: #FFFFFF; }
  .ti-sem-dia:hover { background: #FFFFFF; }
  .ti-mes-dia:hover { background: var(--ti-hueco); }
  /* Con la marca en un pseudo-elemento, el hover de la casilla ancha también
     tiene que ser el cuadro, o se vuelve a ver la pastilla estirada. */
  @media (min-width: 768px) {
    .ti-mes-dia:hover { background: transparent; }
    .ti-mes-dia:hover::before {
      content: ''; position: absolute; left: 50%; top: 50%;
      width: 52px; height: 52px; transform: translate(-50%, -50%);
      border-radius: var(--ti-r-lg); background: var(--ti-hueco); z-index: 0;
    }
    .ti-mes-dia.is-hoy:hover::before { background: #E0EEF6; }
    .ti-mes-dia.is-on:hover::before  { background: var(--ti-marca-media); }
  }
  .ti-body .ti-cita-btn:hover { background: var(--ti-hueco); }
  .ti-body .ti-anadir:hover { border-color: var(--ti-marca); }
  .ti-body .ti-paso:hover { border-color: var(--ti-marca); }
  .ti-body .ti-dia-copiar:hover { border-color: var(--ti-marca); }
}

/* ── La respuesta al dedo ──
   120 ms: por debajo el ojo no llega a ver el hundimiento, por encima se nota
   el retraso. Se escala hacia DENTRO, nunca hacia fuera — algo que crece bajo
   el dedo lo tapa justo cuando lo estás mirando.

   Solo `transform`: es la única propiedad, con `opacity`, que el compositor
   anima sin repintar. En la app de Mac (WKWebView) cualquier otra obliga a
   recalcular el desenfoque de las superficies de cristal. */
.ti-body .ti-loza,
.ti-body .ti-pac,
.ti-body .ti-ficha-btn,
.ti-body .ti-cita-btn,
.ti-body .ti-envio,
.ti-body .ti-cita,
.ti-body .ti-fila-menu,
.ti-body .ti-hoja-fila,
.ti-body .ti-mp-fila,
.ti-body .ti-resultado,
.ti-body .ti-boton,
.ti-body .ti-opcion,
.ti-body .ti-pildora,
.ti-body .ti-chip,
.ti-body .ti-anadir,
.ti-body .ti-mas,
.ti-body .ti-pie-boton,
.ti-body .ti-cajon-boton,
.ti-body .ti-nav-btn,
.ti-body .ti-nav-tt,
.ti-body .ti-sem-dia,
.ti-body .ti-mes-dia,
.ti-body .ti-paso,
.ti-body .ti-dia-copiar,
.ti-body .ti-btn-cabecera,
.ti-body .ti-perfil-btn,
.ti-body .ti-engrane,
.ti-body .ti-prox-btn,
.ti-body .ti-cajon-cerrar,
.ti-body .ti-hoja-cerrar,
.ti-body .ti-switch,
.ti-body .ti-segmento button {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.ti-body .ti-loza:active,
.ti-body .ti-pac:active,
.ti-body .ti-boton:active,
.ti-body .ti-anadir:active,
.ti-body .ti-mas:active,
.ti-body .ti-pie-boton:active,
.ti-body .ti-cajon-boton:active,
.ti-body .ti-sem-dia:active,
.ti-body .ti-mes-dia:active { transform: scale(.97); }

/* Las filas de una lista se hunden MENOS: son anchas, y un tres por ciento en
   430 px de ancho se lee como un salto. Se hunden y además se tiñen. */
.ti-body .ti-ficha-btn:active,
.ti-body .ti-cita-btn:active,

.ti-body .ti-envio:active,
.ti-body .ti-cita:active,
.ti-body .ti-fila-menu:active,
.ti-body .ti-hoja-fila:active,
.ti-body .ti-mp-fila:active,
.ti-body .ti-resultado:active,
.ti-body .ti-prox-btn:active { transform: scale(.985); background: var(--ti-hueco); }

/* Los redondos y pequeños aguantan más hundimiento sin verse raros. */
.ti-body .ti-btn-cabecera:active,
.ti-body .ti-perfil-btn:active,
.ti-body .ti-engrane:active,
.ti-body .ti-nav-btn:active,
.ti-body .ti-paso:active,
.ti-body .ti-cajon-cerrar:active,
.ti-body .ti-hoja-cerrar:active,
.ti-body .ti-opcion:active,
.ti-body .ti-pildora:active,
.ti-body .ti-chip:active,
.ti-body .ti-dia-copiar:active,
.ti-body .ti-segmento button:active { transform: scale(.94); }

.ti-body .ti-nav-tt:active { transform: scale(.96); }

/* El interruptor no se encoge entero: lo que se mueve es su bolita, y encogerlo
   a la vez hace que el recorrido parezca corto. */
.ti-body .ti-switch:active span { transform: scale(.92); }
.ti-body .ti-switch.is-on:active span { transform: translateX(20px) scale(.92); }

/* Que el hundimiento ENTRE rápido y SALGA despacio: al soltar, el dedo ya se
   fue y la vuelta es la que se ve. */
.ti-body [class*="ti-"]:active { transition-duration: 120ms; }

/* ═══════════════════════ ANCHO: TABLETA Y ESCRITORIO ═══════════════════════
   El modo nació como una columna de 460 px porque el diseño es de teléfono. En
   una tableta o un monitor eso dejaba dos tercios de la pantalla vacíos, y el
   empujón entre pantallas se veía roto: la que entra no llegaba a TAPAR a la
   que sale, así que se veían las dos a la vez, una encima de otra. Ensanchar la
   columna arregla las dos cosas de una vez.

   No se añade navegación ni piezas nuevas: lo único que cambia es cuánto mide
   la columna y en cuántas columnas se reparte lo que ya había.

   ── Ojo con las medidas ──
   Estos @media miden la VENTANA, pero el contenido se maqueta dentro del zoom.
   Con `zoom: 1.25`, una ventana de 1440 px deja 1152 px de maquetación. Por eso
   los topes de abajo (600 · 940 · 1180) son menores que los cortes: son el
   ancho REAL que queda después de escalar.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tableta en vertical: ~667 px de maquetación. Caben dos tarjetas por fila. */
@media (min-width: 768px) {
  .ti-body { --ti-columna: 600px; }
  /* Las casillas del mes crecen con la columna. Va en ESTE bloque, que está
     antes que el de 1180 px: a igual especificidad manda el que va después,
     así que escrito más abajo pisaría al grande. */
  .ti-mes-dia { min-height: 54px; }
  .ti-mes-num { font-size: 16px; }

  /* ── La marca del día, un cuadro y no una pastilla ──
     Con la casilla ancha (191 px en un monitor) teñir el botón entero daba una
     pastilla estirada. La marca pasa a un cuadro centrado que no depende del
     ancho de la casilla; el botón sigue ocupando toda la celda, que es lo que
     hace falta para acertarle con el dedo. */
  .ti-mes-dia { position: relative; background: transparent; }
  .ti-mes-dia.is-hoy, .ti-mes-dia.is-on { background: transparent; }
  .ti-mes-dia.is-hoy::before, .ti-mes-dia.is-on::before {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 52px; height: 52px; transform: translate(-50%, -50%);
    border-radius: var(--ti-r-lg); z-index: 0;
  }
  .ti-mes-dia.is-hoy::before { background: #EAF4FA; }
  .ti-mes-dia.is-on::before  { background: var(--ti-marca); }
  .ti-mes-dia > * { position: relative; z-index: 1; }
  .ti-main { padding-left: 20px; padding-right: 20px; }

  /* Las listas dejan de ser una tira: se reparten en cuantas columnas quepan.
     `auto-fill` y no un número fijo — así el mismo bloque sirve para 667 px y
     para 1536 sin una regla por tamaño. */
  /* Sin `align-items: start`: así todas las tarjetas de una fila miden lo mismo
     aunque una traiga un renglón más. Una rejilla con las celdas desiguales se
     lee como un montón, no como una tabla. */
  /* 380 y no 290: desde que las citas van abiertas, dentro de la tarjeta
     caben el nombre, la especialidad, el teléfono y dos botones. A 290 px el
     nombre se cortaba a la tercera letra y «Iniciar consulta» partía en dos
     líneas. Mejor dos tarjetas anchas que tres recortadas. */
  .ti-fichas { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }
}

/* Tableta apaisada y portátil: ~944 px. */
@media (min-width: 1180px) {
  .ti-body { --ti-columna: 940px; }

  /* Los seis iconos en una sola fila: es el menú del doctor y verlo entero de
     un vistazo es justo para lo que está. */
  .ti-rejilla { grid-template-columns: repeat(6, minmax(0, 1fr)); }

  /* Las dos tarjetas del inicio, lado a lado. Se emparejan por id porque son
     hermanas sueltas dentro del <main>: no hay un contenedor que agarrar y
     añadir uno obligaría a tocar el marcado de la pantalla. */
  /* `stretch` y no `start`: las dos tarjetas acaban a la misma altura y el
     bloque queda rectangular. Con `start`, la de la derecha —que casi siempre
     trae menos— dejaba un escalón de doscientos píxeles. */
  .ti-main:has(#mtProximo) { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; align-items: stretch; }
  .ti-main:has(#mtProximo) > .ti-saludo-fila,
  .ti-main:has(#mtProximo) > .ti-rejilla,
  .ti-main:has(#mtProximo) > .ti-pie { grid-column: 1 / -1; }
  .ti-main:has(#mtProximo) > .ti-tarjeta--proxima,
  .ti-main:has(#mtProximo) > .ti-tarjeta--aviso { margin-top: 14px; }

  /* ── El mes y el día, uno al lado del otro ──
     Elegir un día en el calendario no cambia de pantalla: enseña sus citas.
     En una columna ancha las dos cosas caben en paralelo, y entonces el
     calendario NO tiene que ocupar los 1180 px —a ese tamaño las casillas
     quedaban enormes—: se queda en su columna y la lista se lleva el resto. */
  .ti-main:has(#taMes:not(.ti-oculto)) {
    display: grid;
    grid-template-columns: 512px minmax(0, 1fr);
    gap: 0 16px;
    align-items: start;
  }
  /* `.ti-fila-vistas` y no solo `.ti-segmento`: desde que «Configuración» vive
     al lado de Día/Mes, el segmentado va envuelto y el hijo directo del grid es
     la FILA. Sin nombrarla aquí caía en la columna del calendario —512 px— y lo
     empujaba a la derecha, dejando medio metro de hueco debajo del interruptor.
     Se deja también `.ti-segmento` por si alguna pantalla lo usa suelto. */
  .ti-main:has(#taMes:not(.ti-oculto)) > .ti-nav-dia,
  .ti-main:has(#taMes:not(.ti-oculto)) > .ti-fila-vistas,
  .ti-main:has(#taMes:not(.ti-oculto)) > .ti-segmento,
  .ti-main:has(#taMes:not(.ti-oculto)) > .ti-nota { grid-column: 1 / -1; }
  .ti-main:has(#taMes:not(.ti-oculto)) > #taDia { margin-top: 14px; }
  .ti-main:has(#taMes:not(.ti-oculto)) .ti-dia-tt { margin-top: 0; }

  .ti-mes { padding: 16px 14px 14px; }
  .ti-mes-rejilla { gap: 4px; }
  .ti-mes-dow { font-size: 11.5px; padding-bottom: 10px; }
  .ti-mes-dia { min-height: 56px; gap: 5px; }
  .ti-mes-dia.is-hoy::before, .ti-mes-dia.is-on::before,
  .ti-mes-dia:hover::before { width: 46px; height: 46px; border-radius: var(--ti-r-md); }
  .ti-mes-num { font-size: 16.5px; }
}

/* Monitor: ~1280 px o más. */
@media (min-width: 1600px) {
  .ti-body { --ti-columna: 1180px; }
  .ti-fichas { grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); }
  .ti-main:has(#taMes:not(.ti-oculto)) { grid-template-columns: 560px minmax(0, 1fr); }
  .ti-mes-dia { min-height: 62px; }
  .ti-mes-num { font-size: 17.5px; }
}

/* ── El panel de notificaciones cuelga de SU campana ──
   /layout.css lo ancla al carril del menú lateral —`left: var(--sidebar-w)`—,
   que es donde vive la campana en la app de siempre. En modo trabajo no hay
   carril y la campana está en la punta DERECHA de la cabecera, así que el
   panel abría en la esquina contraria, despegado de lo que lo abre. Aquí se
   cuelga justo debajo de ella, alineado al canto derecho de la columna, que es
   exactamente donde está el botón.

   Se escribe con `.ti-body` delante para ganarle al bloque `@media
   (min-width: 861px)` de layout.css: las consultas de medios no suman
   especificidad, así que (0,2,0) le pasa por encima a cualquier ancho. */
.ti-body .sd-notif-panel {
  top: calc(62px + 8px + env(safe-area-inset-top, 0px));
  bottom: auto;
  left: auto;
  right: max(14px, calc(50% - var(--ti-columna) / 2));
  transform-origin: top right;
  max-height: min(560px, calc(100vh - 92px - env(safe-area-inset-top, 0px)));
}

/* ── La cabecera acompaña a la columna ──
   Su caja interior usa el mismo ancho, así que el logo y el perfil se quedan en
   los cantos del contenido y no flotando en medio de la pantalla. */
.ti-cabecera-caja { max-width: var(--ti-columna); }

/* Con la columna ancha, la tira del abecedario se pega al canto del CONTENIDO y
   no al de la ventana: a dos palmos de la lista no la alcanza el pulgar. */
@media (min-width: 768px) {
  .ti-indice { right: calc(50% - var(--ti-columna) / 2 - 22px); }
}

/* ── Que el teléfono no se acerque al tocar un campo ──
   No es una preferencia de tamaño: es una regla de Safari en el iPhone. Si el
   campo que recibe el foco tiene la letra por debajo de 16 px, la página se
   ACERCA sola —y no se vuelve a alejar—, así que escribir un nombre deja la
   pantalla torcida y hay que arreglarla a mano. Pasa en todos los campos y es
   lo más incómodo del modo en el móvil.

   `user-scalable=no` en el viewport NO sirve: iOS lo ignora desde iOS 10, por
   accesibilidad. Lo único que evita el acercamiento es que el campo mida 16 px
   o más, así que se fuerza el mínimo.

   Solo por debajo de 768 px. De ahí para arriba `.ti-body` ya lleva `zoom:
   1.25`, que escala los campos muy por encima de 16, y además no hay foco que
   acerque nada en una tableta o un monitor.

   Va con `!important` a regañadientes: estas pantallas prestadas traen sus
   propias hojas —`.pe-in`, `.mt-input`, los campos de Configuración— y varias
   pesan (0,2,0) o más. La alternativa era perseguir cada una. */
@media (max-width: 767px) {
  .ti-body input,
  .ti-body select,
  .ti-body textarea { font-size: 16px !important; }
  /* Los campos nativos de fecha y hora también: el segmento que se enfoca
     dentro de ellos cuenta igual para Safari. */
  .ti-body input[type="date"],
  .ti-body input[type="time"],
  .ti-body input[type="datetime-local"] { font-size: 16px !important; }
}

/* ═══════════════════════════ AJUSTES FINOS ═══════════════════════════ */

/* En un teléfono estrecho (iPhone SE, 320-360 px) la cabecera lleva cinco
   piezas y el nombre de la app se queda sin sitio. Se va el renglón de arriba
   —"EXPEDIENTE CLÍNICO", que es decoración— antes que el nombre. */
@media (max-width: 379px) {
  .ti-titulo-ojo { display: none; }
  .ti-cabecera-caja { gap: 9px; }
  .ti-saludo { font-size: 23px; }
  .ti-loza { min-height: 98px; padding: 12px 6px 11px; }
  .ti-loza svg { width: 30px; height: 30px; }
  .ti-loza-txt { font-size: 11.5px; }
  .ti-cita-hora { width: 52px; }
}

/* La botonera de la tarjeta en dos renglones cuando no caben de lado: antes se
   comprimían hasta que "Iniciar consulta" se partía en tres líneas. */
@media (max-width: 359px) {
  .ti-botonera { flex-wrap: wrap; }
  .ti-botonera .ti-boton { flex: 1 1 100%; }
}

/* ── Movimiento reducido ──
   No es "sin respuesta": es la MISMA información sin desplazamiento. Lo que se
   quita es lo que mueve cosas por la pantalla (el cajón que entra de lado, la
   hoja que sube, el hundimiento al tocar); lo que se queda es el fundido, que
   sigue diciendo que algo apareció o se fue. Un doctor con sensibilidad al
   movimiento necesita saber que su toque llegó igual que cualquier otro. */
@media (prefers-reduced-motion: reduce) {
  .ti-body *, .ti-body *::before, .ti-body *::after {
    transition-property: opacity, background-color, border-color, color, box-shadow;
    transition-duration: 160ms !important;
    animation-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* Nada se desplaza ni se encoge: las capas aparecen y desaparecen en su
     sitio, y el toque contesta solo con color. */
  .ti-body .ti-cajon,
  .ti-body .ti-hoja-panel,
  .ti-body .ti-menu-perfil { transform: none !important; }
  .ti-body [class*="ti-"]:active { transform: none !important; }
  .ti-body .ti-switch span { transition: none !important; }
  .ti-body .ti-switch.is-on span { transform: translateX(20px); }
  /* Las capas siguen contándose con opacidad, que es lo que se conserva. */
  .ti-menu:not(.is-abierto) .ti-cajon,
  .ti-hoja:not(.is-abierta) .ti-hoja-panel { opacity: 0; }
  .ti-menu.is-abierto .ti-cajon,
  .ti-hoja.is-abierta .ti-hoja-panel { opacity: 1; transition: opacity 160ms ease; }
}
