/* +Deu Studio — sistema de gestión
   Dos temas sobre las mismas variables: el HTML lleva data-tema="claro" u
   "oscuro" y todo lo demás sigue igual. */

:root,
[data-tema="oscuro"] {
  /* Lo que dibuja el navegador —el calendario de las fechas, las barras de
     scroll— sigue este dato: sin él salían en claro sobre el tema oscuro. */
  color-scheme: dark;

  /* El galon de plegar, para usarlo como mascara en un `::after`. Mismo trazo
     que `ICONO_CHEVRON` de comun.js. */
  --galon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.6 1.8 6 6.2 10.4 1.8' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --fondo:       #000;
  --superficie:  #0e0e0e;
  --superficie2: #171717;
  --borde:       #262626;
  /* Las líneas de la grilla de la agenda, aparte del borde: ahí se leen
     horarios cruzando una pantalla entera y el borde de una tarjeta es
     demasiado tenue para eso. */
  --linea-grilla:       #474749;
  --linea-grilla-suave: #363638;
  --dorado:      #b6a360;
  --dorado-fuerte: #b6a360;
  --dorado-suave: rgba(182, 163, 96, 0.14);
  --texto:       #f2f2f2;
  --texto-tenue: #8a8a8a;
  /* El rotulo de un campo se lee, no se ojea: va un punto mas fuerte que el
     resto del texto secundario. `--texto-tenue` sigue igual para las notas y
     los datos al pie, que son otra cosa. */
  --rotulo:      #b0b0b0;
  --sombra:      none;

  --atendido:   #4f9d69;
  --confirmado: #b6a360;
  --pendiente:  #6b7280;
  --anulado:    #8c4a4a;
  --anulado-suave: rgba(140, 74, 74, 0.16);
  /* El mismo tono, pero opaco: para las tarjetas de la agenda, que se apoyan
     sobre la grilla del día y con alfa dejaban ver las líneas de atrás. */
  --anulado-tarjeta: color-mix(in srgb, #8c4a4a 16%, var(--superficie));
  /* Los casilleros de la grilla, ya opacos: apoyados con transparencia
     dejaban pasar las líneas del fondo por encima. */
  --hueco-fondo:    #0e0d08;
  --hueco-hover:    #1d1a0f;
  --almuerzo-fondo: #160c0c;
  /* El bloqueo va rayado: la base tapa la grilla y la raya lo distingue del
     día que el profesional no atiende, que es del mismo rojo pero liso. */
  /* El motivo que no tiene color puesto: blanco, la ausencia de color. El
     punto ya lleva su borde tenue, así que se ve igual sobre cualquier fondo. */
  --sin-motivo: #fff;
  /* El dorado de hoy, ya mezclado contra el fondo: la cabecera queda fija
     mientras la agenda scrollea por detrás, y en translúcido se le veían pasar
     los turnos a través. */
  --hoy-cabeza: #262319;
  --bloqueo-fondo:  #131313;
  --bloqueo-raya:   rgba(255, 255, 255, 0.07);
  --bloqueo-fondo-hover: #1f1f1f;
  --bloqueo-raya-hover:  rgba(255, 255, 255, 0.13);
  --atendido-suave: rgba(79, 157, 105, 0.16);
  --ausente:    #b45309;

  /* Nombres viejos, para no tocar cada regla */
  --negro:       var(--fondo);
  --carbon:      var(--superficie);
  --carbon-alto: var(--superficie2);

  /* Sobre negro la tarjeta del turno usa la superficie de siempre; el tono
     propio hace falta solo en el tema claro. */
  --turno:       var(--carbon);
  --turno-alto:  var(--carbon-alto);

  --radio: 10px;
}

[data-tema="claro"] {
  color-scheme: light;

  --fondo:       #f6f6f7;
  --superficie:  #fff;
  --superficie2: #f0f0f2;
  --borde:       #e3e3e7;
  --linea-grilla:       #c2c2cc;
  --linea-grilla-suave: #d6d6de;
  /* Sobre blanco el dorado de marca no contrasta: para texto se usa uno
     más oscuro y el original queda para fondos y bordes. */
  --dorado:      #8a7838;
  --dorado-fuerte: #b6a360;
  --dorado-suave: rgba(182, 163, 96, 0.16);
  --texto:       #16161a;
  --texto-tenue: #6a6a72;
  --rotulo:      #494952;
  --sombra:      0 1px 2px rgba(0, 0, 0, 0.05);

  --atendido:   #2f7d4f;
  --confirmado: #8a7838;
  --pendiente:  #8b8b93;
  --anulado:    #a84848;
  --anulado-suave: rgba(168, 72, 72, 0.12);
  --anulado-tarjeta: color-mix(in srgb, #a84848 12%, var(--superficie));
  --hueco-fondo:    #f3f2ef;
  --hueco-hover:    #ece9df;
  --almuerzo-fondo: #ede1e2;
  --sin-motivo: #fff;
  --hoy-cabeza: #f3f0e6;
  --bloqueo-fondo:  #fff;
  --bloqueo-raya:   rgba(20, 20, 24, 0.09);
  --bloqueo-fondo-hover: #efeff1;
  --bloqueo-raya-hover:  rgba(20, 20, 24, 0.15);
  --atendido-suave: rgba(47, 125, 79, 0.12);
  --ausente:    #b45309;

  /* La tarjeta de un turno en la agenda: el mismo blanco de la fila de los
     días, arriba de cada columna. Al pasar por encima toma el dorado con el
     que se pintan los huecos libres, para que el turno y el hueco se
     iluminen igual. */
  --turno:       var(--superficie);
  /* Opaco a proposito: el mismo tono que tenia translucido, pero calculado
     contra el fondo de la tarjeta. Con alfa se veian pasar por detras las
     lineas de la grilla del dia. */
  --turno-alto:  color-mix(in srgb, #b6a360 7%, var(--superficie));
}

* { box-sizing: border-box; }

/* Va antes que cualquier regla de display: si algo está oculto, se oculta.
   Sin esto, un `display: grid` posterior gana y las pantallas se apilan. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--negro);
  color: var(--texto);
  font-family: Poppins, -apple-system, "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }

/* LOS LINKS NO VAN SUBRAYADOS. NUNCA.
   Y toman el color del texto, no el azul del navegador.

   No había ninguna regla para `a`, así que cada link que nadie vestía con una
   clase salía azul y subrayado: los nombres de los pacientes en turnos a
   reprogramar, los del CRM. No era un desvío de esas pantallas, es que la regla
   no existía y el default del navegador ganaba por goleada.

   Va con la especificidad más baja posible —el selector de elemento pelado— así
   que cualquier clase que quiera darle otro color se lo da sin pelear. Lo que
   distingue a un link de un texto en este sistema es el dorado al pasar por
   arriba, no una rayita. */
a { color: inherit; text-decoration: none; }

/* ------------------------------------------------------------- ingreso */

/*
 * Las tres capas de entrada —el logo del arranque, el ingreso y el cambio de
 * clave— se fijan a la ventana, no al documento.
 *
 * Antes eran bloques del documento con `min-height: 100vh`, y ahi su lugar
 * dependia de cuanto media la pagina y de donde estaba el scroll. Se veia asi:
 * el cuadro aparecia centrado en la ventana y un instante despues saltaba
 * doscientos pixeles hacia arriba, cuando el documento terminaba de acomodarse
 * y el scroll se iba a cero. Fijado a la ventana no tiene de donde moverse:
 * mide contra la ventana y la ventana no cambia.
 *
 * `safe center` en lugar de `center` a secas: centrado, pero si la caja no
 * entra en una ventana baja, se apoya arriba en vez de cortarse por la mitad,
 * y con `overflow-y: auto` se llega igual al boton de entrar.
 *
 * El fondo va explicito porque, tapando, tiene que tapar de verdad.
 */
.ingreso {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow-y: auto;
  background: var(--negro);
  display: grid;
  align-items: safe center;
  justify-items: center;
  align-content: safe center;
  padding: 24px;
}

.ingreso-caja {
  width: min(380px, 100%);
  background: var(--carbon);
  border: 1px solid var(--borde);
  border-radius: 16px;
  padding: 40px 32px;
}

.ingreso-marca {
  text-align: center;
  margin-bottom: 32px;
}

/* La proporcion va declarada, y esa es la linea que arregla el salto.
   El logo es una imagen remota sin ancho ni alto propios: hasta que llegaba
   ocupaba cero, y al aparecer la caja crecia 34 pixeles. Como la caja esta
   centrada en la pantalla, crecer significa subir: medido, el ingreso saltaba
   18 pixeles hacia arriba justo cuando terminaba de cargar el logo.
   Con `aspect-ratio` el navegador reserva el lugar exacto desde el primer
   pixel, aunque la imagen tarde o no llegue nunca. 1063x470 es su tamano
   real. */
.ingreso-marca img { width: 64px; height: auto; aspect-ratio: 1063 / 470; }

.ingreso-marca p {
  margin: 12px 0 0;
  color: var(--texto-tenue);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------- bienvenida */

/* La caja de la bienvenida es mas ancha que la del ingreso porque adentro hay
   que comparar dos opciones leyendo, no escribir usuario y contrasena. A 380px
   las descripciones quedaban en ocho renglones cada una y elegir entre dos
   parrafos altos y angostos obliga a recordar el primero mientras se lee el
   segundo. */
.ingreso-caja-ancha { width: min(620px, 100%); }

.bienvenida-hola {
  margin: 0 0 8px;
  font-size: 20px;
  color: var(--texto);
}

/* Se usa dos veces —«¿cómo te llamás?» y «¿qué tipo de negocio tenés?»— así que
   es un encabezado de sección, no un subtítulo suelto: separa de lo de arriba y
   queda pegado a lo suyo. */
.bienvenida-pregunta {
  margin: 0 0 14px;
  color: var(--texto-tenue);
}

.bienvenida-campo {
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--texto);
  letter-spacing: 0;
}

.bienvenida-ayuda {
  margin: 8px 0 28px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--texto-tenue);
}

.bienvenida-opciones {
  display: grid;
  gap: 12px;
  margin-bottom: 20px;
}

/* En dos columnas recien cuando entran de verdad: en un telefono, dos tarjetas
   con un parrafo adentro cada una quedan ilegibles. */
@media (min-width: 560px) {
  .bienvenida-opciones { grid-template-columns: 1fr 1fr; }
}

.bienvenida-opcion {
  display: block;
  width: 100%;
  text-align: left;
  padding: 18px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: var(--superficie);
  color: var(--texto);
  cursor: pointer;
  font: inherit;
}

.bienvenida-opcion:hover { border-color: var(--dorado-suave); }

/* La elegida se marca con el borde Y con el fondo, no solo con el borde: es
   una decision que no se deshace y tiene que verse cual quedo puesta desde el
   otro lado de la habitacion. */
.bienvenida-opcion.puesta {
  border-color: var(--dorado);
  background: var(--dorado-suave);
}

.bienvenida-opcion strong {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
}

.bienvenida-opcion span {
  display: block;
  font-size: 13px;
  line-height: 1.5;
  color: var(--texto-tenue);
}

.bienvenida-ojo {
  margin: 0 0 20px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--texto-tenue);
}

label {
  display: block;
  margin-bottom: 6px;
  font-size: 12.5px;
  color: var(--rotulo);
  letter-spacing: 0.04em;
}

input[type="text"], input[type="password"], input[type="date"], input[type="search"],
input[type="email"], input[type="tel"], input[type="url"], input[type="number"], select {
  width: 100%;
  padding: 11px 13px;
  margin-bottom: 18px;
  background: var(--negro);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  transition: border-color 0.15s;
}

/* Un número corto va CENTRADO en su caja.

   Son campos de dos o tres dígitos en una caja que mide bastante más —«2» en un
   campo de ochenta píxeles—, y contra el borde izquierdo el número queda solo
   en una punta, lejos de las palabras que lo rodean («escribir después de 2
   horas»). Va primero en el archivo a propósito: las tablas de plata y el
   contador de alineadores ya alinean a la derecha más abajo, y ésos ganan. */
input[type="number"] { text-align: center; }

/* Y la caja mide lo que necesita el número, no lo que le sobra a la columna.

   Centrar sólo mejora las cosas si la caja es chica. Un «72» en el medio de un
   campo que ocupa media tarjeta queda flotando en el aire, más lejos de su
   propio rótulo que si estuviera pegado a la izquierda, y ahí el centrado pasa
   de ordenar a estorbar. Así que el campo de un número se acota: en ciento
   sesenta píxeles entran nueve dígitos —más de lo que pide cualquier monto de
   la casa—, el borde izquierdo queda donde empieza el rótulo, y el número
   centrado adentro de algo de su tamaño.

   Sólo los campos de formulario. Los de una tabla, los que llevan un signo
   pegado al lado (`.campo-con-unidad`) y los que ya tienen ancho propio se
   miden solos, y meterse con ellos les rompería la fila. */
.campo-modal > input[type="number"],
.campo > input[type="number"],
.ia-tarjeta label > input[type="number"] { max-width: 160px; }

/* El campo para elegir un archivo.

   `input[type="file"]` no está en la lista de arriba y no puede estar: el
   navegador le dibuja adentro un botón que es suyo, dice «Choose File» en
   inglés aunque el sistema entero esté en castellano, y no hay CSS que lo
   alcance. Al lado de los otros campos se veía de otro programa.

   Así que el input va escondido y lo que se ve es esta etiqueta, que es un
   campo de verdad —el mismo alto, el mismo borde, el mismo dorado al pasar por
   encima— y adentro dice qué archivo se eligió. Es el mismo truco que ya
   usaban el logo de la clínica y la firma del profesional, escrito una vez y
   con forma de campo para que entre en una rejilla sin desalinearse. */
.campo-archivo {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-bottom: 18px;
  padding: 11px 13px;
  background: var(--negro);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  color: var(--texto-tenue);
  cursor: pointer;
  transition: border-color 0.15s;
}

.campo-archivo:hover { border-color: var(--dorado); }

/* El foco lo recibe el input escondido, así que el aro tiene que dibujarlo el
   que se ve: si no, moverse con el teclado por el formulario pasa por acá sin
   que nada lo muestre. */
.campo-archivo:focus-within { border-color: var(--dorado); }

.campo-archivo svg { flex: none; width: 17px; height: 17px; }

/* El nombre del archivo, en una sola línea: los que salen de una cámara son
   larguísimos y partidos en dos renglones estiraban el campo al doble de alto
   que los de al lado. */
.campo-archivo span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Con algo elegido deja de ser una invitación y pasa a ser un dato. */
.campo-archivo.con-archivo { color: var(--texto); }

/* El tilde del sitio, uno solo para todos lados.
 
   El del navegador se ve distinto en cada sistema operativo y con `accent-color`
   sólo se le cambia el relleno: el borde, el tamaño y la forma siguen siendo los
   de Windows o los de Mac. Al lado de un `.tilde` de una prestación realizada
   —un aro dorado con su ✓— parecía de otro programa.
 
   Este se dibuja entero: cuadrado redondeado del tamaño del texto, vacío
   mientras no está puesto, y dorado con el ✓ en blanco cuando sí. El ✓ va como
   SVG en la misma hoja para no depender de un archivo ni de una tipografía.
 
   Vale para los cincuenta y pico de checkbox del sistema, en quince pantallas:
   escrito una vez, cambian todos. */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 17px;
  height: 17px;
  margin: 0;
  border: 1.5px solid var(--borde);
  border-radius: 5px;
  background: var(--negro);
  cursor: pointer;
  vertical-align: -3px;
  transition: background .12s, border-color .12s;
}

input[type="checkbox"]:hover:not(:disabled) { border-color: var(--dorado); }

input[type="checkbox"]:checked {
  background-color: var(--dorado);
  border-color: var(--dorado);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px 13px;
}

input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--dorado);
  outline-offset: 2px;
}

input[type="checkbox"]:disabled {
  opacity: .5;
  cursor: default;
}

/* Los campos que el navegador rellena solo.
   Chrome les pinta encima un celeste propio —el suyo, no el nuestro— y no hay
   forma de cambiarlo con `background`: la unica que respeta es una sombra
   interior. Sin esto, entrar al sistema con el usuario guardado mostraba dos
   campos celestes que no se parecian a ningun otro campo del sitio.
   La transicion larguisima es el truco conocido para que el color de fondo
   nunca termine de animarse hacia el celeste. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--texto);
  -webkit-box-shadow: inset 0 0 0 100px var(--negro);
  caret-color: var(--texto);
  transition: background-color 100000s ease-in-out 0s;
}

input:focus, select:focus {
  outline: none;
  border-color: var(--dorado);
}

/* La flechita del desplegable.
 *
 * La que dibuja el navegador es finita, cuadrada y va pegada al borde, y cambia
 * de un navegador a otro. Se la apaga y se pone la nuestra: mismo trazo
 * redondeado que el resto de los íconos, y separada del borde. El espacio a la
 * derecha del campo se reserva para ella. */
select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.6 1.8 6 6.2 10.4 1.8' fill='none' stroke='%238a8a8a' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 12px 8px;
  padding-right: 36px;
}

[data-tema="claro"] select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.6 1.8 6 6.2 10.4 1.8' fill='none' stroke='%236a6a72' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* Los desplegables chicos —los de una fila de tabla, los de una fichita— llevan
   la flecha más cerca del borde, pero nunca encima del texto. */
.tabla-admin select,
.horas-dia select { background-position: right 7px center; background-size: 10px 7px; }

select:disabled { background-image: none; padding-right: 13px; }



/* Las flechitas de los campos numéricos no se usan nunca —los montos se
   escriben— y encima le dan al campo un aspecto distinto al resto. */
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Las otras especialidades: el desplegable para sumar a la izquierda y las
   puestas a la derecha, en el mismo renglón. */
.otras-especialidades {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 4px 0 18px;
}

.campo-modal .otras-especialidades select {
  width: auto;
  min-width: 210px;
  margin: 0;
  padding: 8px 34px 8px 11px;
  font-size: 12.5px;
}

.chips-especialidades {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip-especialidad {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px 4px 4px 11px;
  background: var(--superficie2);
  border: 1px solid var(--borde);
  border-radius: 20px;
  font-size: 12.5px;
}

/* La firma, tal como va a salir impresa. Sobre blanco siempre: una firma
   escaneada es negra sobre nada, y en el tema oscuro no se veria. */
.firma-cargada {
  display: inline-block;
  margin: 10px 0 4px;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

.firma-cargada img { display: block; max-width: 320px; max-height: 130px; }
.firma-vacia { margin: 12px 0 4px; }

/* El menú de un desplegable: alto acotado y la opción puesta marcada, que es
   lo que hacía la lista del navegador y hay que seguir haciendo. */
.menu.menu-desplegable {
  /* Arriba de todo: un desplegable se abre desde donde sea, y adentro de un
     popup —que va en 90— quedaba tapado. */
  z-index: 100;
  /* Sin tope propio: crece hasta donde dé la pantalla. El tope se lo pone
     `ubicarMenu()` solo cuando de verdad no entra, y ahí aparece el scroll.
     Con un máximo fijo, doce meses scrolleaban con media pantalla vacía. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* El que scrollea es el listado: el buscador de arriba se queda quieto. */
.menu-desplegable .opciones-desplegable { overflow-y: auto; }

.menu-desplegable .buscar-opcion {
  flex: none;
  margin: 8px 8px 6px;
  width: calc(100% - 16px);
}

/* El de un campo de la pagina, por debajo de las barras fijas.

   14 y no 100: la barra de arriba va en 20 y la cabecera de la ficha en 15, y
   este menu se mueve con la pagina, asi que al hacer scroll terminaba pasando
   por encima de las dos. Debajo de ellas y arriba del contenido, que es donde
   corresponde. El 100 se lo queda el que se abre adentro de un cartel, que si
   tiene que estar arriba del cartel. */
.menu.menu-desplegable.en-la-pagina { z-index: 14; }

.menu.menu-desplegable button.puesto { color: var(--dorado); font-weight: 600; }

/* La misma marca en un menú de botones sueltos: la opción vigente en dorado.
   Es lo que evita el menú que no contesta la pregunta con la que se lo abre
   —«¿cuál estoy mirando?»— y obliga a cerrarlo para averiguarlo. */
.menu button.puesto { color: var(--dorado); font-weight: 600; }

/* La hora escrita a mano, arriba de la lista: no es una de las que se ofrecen
   sino la que uno acaba de pedir, así que se marca como tal. */
.opcion-suelta { color: var(--dorado); }
.opcion-suelta small { margin-left: 8px; color: var(--texto-tenue); font-size: 11px; }

/* Las cruces del sitio, todas iguales: un círculo de 26 píxeles, tenue, que al
   pasar el mouse se enciende. Cierra un popup, vacía un campo o saca algo de
   una lista —lo único que cambia es el color de la que borra algo—.

   Van juntas a propósito: cada vez que una se dibujaba por su cuenta terminaba
   con otro tamaño y otro hover, y se notaba. */
.popup-cerrar,
.cajon-cerrar,
.campo-con-equis .limpiar-campo,
.quitar-motivo {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Adentro de una cabecera flex se achicaba hasta quedar un óvalo. */
  flex: none;
  width: 26px;
  height: 26px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--texto-tenue);
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
}

.popup-cerrar:hover,
.cajon-cerrar:hover,
.campo-con-equis .limpiar-campo:hover {
  background: var(--dorado-suave);
  color: var(--dorado);
}

/* El botón principal. Píldora, igual que el `.chip` que suele tener al lado.
   Antes era un rectángulo redondeado y el `.chip` una píldora, así que en el
   pie de cada popup «Cancelar» y «Guardar» se veían como dos cosas de familias
   distintas cuando son el mismo par.

   `999px` y no un número: así son píldora perfecta a cualquier alto, y el día
   que un botón cambie de padding no hay que recalcular nada. */
.boton {
  width: 100%;
  padding: 12px;
  background: var(--dorado);
  color: var(--negro);
  border: none;
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}

.boton:hover { opacity: 0.88; }
.boton:disabled { opacity: 0.45; cursor: default; }

.error {
  background: rgba(140, 74, 74, 0.16);
  border: 1px solid #8c4a4a;
  border-radius: var(--radio);
  padding: 10px 13px;
  margin-bottom: 16px;
  font-size: 13px;
}

.aviso {
  background: var(--dorado-suave);
  border: 1px solid var(--dorado);
  border-radius: var(--radio);
  padding: 10px 13px;
  margin-bottom: 16px;
  font-size: 13px;
}

/* Cuando el vacío es por un filtro y no porque no haya nada, va en rojo:
   casi siempre es una fecha equivocada. */
.vacio.alerta { color: var(--anulado); }

/* Los avisos de adentro de la ficha, con la misma convención de colores. */
.aviso.exito {
  border-color: var(--atendido);
  background: var(--atendido-suave);
  color: var(--atendido);
}

.aviso.alerta {
  border-color: var(--anulado);
  background: var(--anulado-suave);
  color: var(--anulado);
}

/* ---------------------------------------------------------------- capa */

.barra {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 20px;
  height: 58px;
  background: var(--carbon);
  border-bottom: 1px solid var(--borde);
  position: sticky;
  top: 0;
  z-index: 20;
}

/* El logo lleva el nombre escrito abajo: con 30px no se leía. */
.barra img { width: 52px; }

/* Las secciones del sistema, en la barra de arriba. */
.barra-menu {
  display: flex;
  align-items: center;
  gap: 4px;
}

.barra-menu a {
  padding: 7px 13px;
  border-radius: var(--radio);
  color: var(--texto-tenue);
  text-decoration: none;
  font-size: 13.5px;
  white-space: nowrap;
}

.barra-menu a:hover { color: var(--texto); background: var(--dorado-suave); }

.barra-menu a.actual {
  color: var(--dorado);
  background: var(--dorado-suave);
  font-weight: 500;
}

/* El CRM lleva sus números al lado del nombre. En línea y no superpuestos: un
   globito encima del rótulo tapa la última letra, y acá son dos números, no
   uno. El enlace pasa a `inline-flex` sólo cuando los tiene. */
.barra-menu a.con-numeros {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Lo tuyo, macizo: es lo único de los dos que pide que hagas algo. Va en rojo
   y no en dorado porque el dorado es el color de «estás acá», y pintado de lo
   mismo se leía como que el CRM estaba seleccionado. */
.crm-mias {
  background: var(--anulado);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 9px;
}

/* El tamaño del montón, en la letra tenue: está para consultarlo, no para
   avisar. Si gritaran los dos, ninguno de los dos diría nada. */
.crm-total { font-size: 11.5px; opacity: 0.75; }

/* Los botones de la derecha del encabezado. */
.acciones-seccion {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* Mientras corre una importación: dice por dónde va y no deja tocar nada. */
.importando {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.6);
  color: var(--texto);
  font-size: 14px;
}

.importando .barra-avance {
  display: block;
  width: min(420px, 70vw);
  height: 6px;
  background: var(--borde);
  border-radius: 3px;
  overflow: hidden;
}

.importando .barra-avance > span {
  display: block;
  height: 100%;
  background: var(--dorado);
  transition: width 0.2s;
}

.lista-fallados {
  max-height: 220px;
  overflow-y: auto;
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 12.5px;
  color: var(--texto-tenue);
}

/* Los diálogos con dos columnas o con listas piden más ancho que un
   «¿seguro?» de dos renglones. */
#modal-confirmar .modal-caja.angosta:has(.fusion),
#modal-confirmar .modal-caja.angosta:has(.dup-lista) { max-width: 820px; width: 92vw; }

/* Si el libro cuadra, debajo de los totales. Cuando cuadra —que es siempre—
   tiene que estar y no molestar: una línea chica y tenue. Cuando no cuadra ya
   se lleva la caja de aviso, que sí grita. */
.cuadre-libro {
  margin: 10px 0 0;
  color: var(--texto-tenue);
  font-size: 12.5px;
}

.aviso.cuadre-libro {
  color: inherit;
  font-size: 13px;
}

.aviso.cuadre-libro .chip {
  margin-left: 8px;
  vertical-align: middle;
}

/* El título de cada bloque del resumen, cuando hay ingresos y egresos y son
   dos tablas. Con una sola no se dibuja: la barra de arriba ya lo dice. */
.titulo-bloque {
  margin: 18px 0 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--texto-tenue);
}

.titulo-bloque:first-child { margin-top: 0; }

/* La previa de una importación es una tabla de cinco columnas por cientos de
   renglones: en 460px no se lee, y el paso entero existe para poder mirarla
   antes de decir que sí. */
#modal-confirmar .modal-caja.angosta:has(.importar-previa) { max-width: 880px; width: 94vw; }

/* Con scroll propio: sin esto, mil gastos empujan los botones del pie abajo de
   la pantalla y no queda forma de aceptar ni de cerrar. */
.importar-tabla {
  max-height: 46vh;
  overflow-y: auto;
  margin-top: 10px;
  border: 1px solid var(--borde);
  border-radius: 8px;
}

/* De qué archivo estamos hablando, arriba de todo. */
.importar-de {
  margin: 0;
  color: var(--texto-tenue);
  font-size: 12.5px;
}

.importar-problemas ul {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 12.5px;
}

/* La lista de feriados del año son veinte renglones: en 460px entran en una
   columna y hay que hacer scroll para verlos todos. Con más ancho entran en
   dos y se leen de un vistazo, que es de lo que se trata el paso. */
#modal-confirmar .modal-caja.angosta:has(.lista-feriados) { max-width: 640px; width: 92vw; }

/* Lo que hace cada columna, abajo del título: en el campo no entraba. */
.fusion-que {
  display: block;
  color: var(--texto-tenue);
  font-size: 11px;
  line-height: 1.35;
  min-height: 30px;
}

/* --------------------------------------------------------- administración */

/* El desplegable de una sección con partes adentro, en la barra de arriba. */
.menu-barra {
  min-width: 210px;
  padding: 6px;
}

.menu-barra a {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--texto);
  text-decoration: none;
  font-size: 13px;
}

.menu-barra a:hover { background: var(--dorado-suave); color: var(--dorado); }

/* La fila de un usuario: cómo se llama arriba, cómo se lo ubica abajo. */
.usuario-fila {
  display: flex;
  align-items: center;
  gap: 12px;
}

.usuario-inicial {
  flex: none;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--superficie2);
  border: 1px solid var(--borde);
  color: var(--texto-tenue);
  font-size: 13px;
  font-weight: 500;
}

.usuario-datos { display: flex; flex-direction: column; min-width: 0; }
.usuario-datos strong { font-weight: 500; }
.usuario-datos small { color: var(--texto-tenue); font-size: 11.5px; }

/* Lo único propio: el ancho de cada columna lo fija el `colgroup` y no el
   contenido, así dos listas con nombres de largos distintos se ven iguales. */
.tabla-usuarios { table-layout: fixed; }

/* Los botones de la punta de cada fila. */
.acciones-fila {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  white-space: nowrap;
}

.acciones-fila a.chip { text-decoration: none; }

/* Un menú cuyas opciones son enlaces, no botones. */
.menu a {
  display: block;
  width: 100%;
  padding: 11px 15px;
  color: var(--texto);
  text-decoration: none;
  font-size: 13px;
}

.menu a:hover { background: var(--dorado-suave); color: var(--dorado); }
.menu a small { display: block; color: var(--texto-tenue); font-size: 11px; margin-top: 2px; }

/* --------------------------------------------------- la ficha de un usuario */

.formulario h3 {
  margin: 22px 0 12px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dorado);
}

.formulario h3:first-child { margin-top: 0; }

/* Los campos que no se pueden dejar vacíos. */
.obligatorio { color: var(--anulado); font-weight: 600; }

/* Por qué no se puede seguir, abajo del campo que falta. Va en rojo apagado,
   el mismo de los avisos, y aparece recién cuando se intenta guardar: antes de
   intentarlo no hay nada que corregir. */
.falta-campo {
  display: block;
  margin-top: 4px;
  color: var(--anulado);
  font-size: 12px;
}

.falta-campo[hidden] { display: none; }

/* «Elegir» es lo que dice el campo mientras está vacío, y va ESCRITO ENCIMA.
   Como opción del desplegable no servía: ni `hidden` ni `display: none` la
   sacan de la lista, porque Chrome en Windows la dibuja con el sistema. */
.select-vacio {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--texto-tenue);
  font: inherit;
}

.select-vacio[hidden] { display: none; }

/* Y el campo se marca, para que el ojo vaya ahí sin leer. */
select.mal, input.mal, textarea.mal { border-color: var(--anulado); }

/* El estado de la cuenta y, contra la derecha, el botón de la contraseña: los
   dos en el renglón del rol, aprovechando el aire que quedaba al lado. */
.estado-cuenta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 37px;          /* el alto de un campo, para que quede en línea */
  margin-top: 4px;
}

/* Un pie de un solo botón: contra la derecha. La regla general reparte a los
   costados, y con uno solo lo dejaría a la izquierda. */
/* Todo contra el borde derecho. Vale para el pie de un formulario y para el
   de un cartel: es el mismo gesto —«los botones van juntos donde se los
   busca»— y por eso comparten el nombre en vez de tener uno cada uno. */
.pie-formulario.pie-derecha,
.modal-pie.pie-derecha { justify-content: flex-end; }

/* Las sucursales a las que entra un usuario: una por renglón, con la marca de
   cuál se le abre al entrar. */
.lista-sucursales {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0 10px;
}

.fila-sucursal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--superficie2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  font-size: 13px;
  color: var(--texto);
}

.fila-sucursal small { display: block; color: var(--texto-tenue); font-size: 11.5px; }
.fila-sucursal.sin-acceso { opacity: 0.55; }
.fila-sucursal .marca-inicial { font-size: 11.5px; white-space: nowrap; }

/* Los permisos, agrupados por dónde se usan. */
/* El nombre del perfil vive en la barra de arriba, con el lapicito al lado.
   Para qué es y quiénes lo usan van ahí también: son datos, no campos, y una
   sección entera para escribir una palabra era media pantalla desperdiciada. */
.dato-editable { display: flex; align-items: center; gap: 2px; min-width: 0; }
.titulo-perfil strong { font-size: 14px; }

.dato-editable input {
  margin: 0;
  padding: 6px 10px;
  font-size: 13.5px;
}

.titulo-perfil input { width: 220px; }
.datos-perfil .dato-editable input { width: min(420px, 46vw); }

/* El lapicito se ve siempre. Mostrarlo solo al pasar el puntero lo esconde en
   una tablet, que no tiene puntero: el dato quedaría sin forma de editarse. */

.datos-perfil {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 14px;
  min-width: 0;
  padding-left: 14px;
  border-left: 1px solid var(--borde);
  font-size: 12.5px;
}

.datos-perfil .para-que { color: var(--texto-tenue); }
.datos-perfil .lo-usan { color: var(--texto-tenue); white-space: nowrap; }
.datos-perfil .lo-usan strong { color: var(--dorado); font-weight: 500; }

/* El historial de un turno: una fila por movimiento, del más viejo al más
   nuevo, que es como se lee una historia. */
.tabla-historial {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.tabla-historial th {
  padding: 8px 10px;
  border-bottom: 1px solid var(--borde);
  color: var(--texto-tenue);
  font-size: 11px;
  font-weight: 600;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tabla-historial td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--borde);
  vertical-align: top;
}

.tabla-historial tr:last-child td { border-bottom: 0; }
.tabla-historial small { display: block; margin-top: 2px; color: var(--texto-tenue); font-size: 11px; }
.tabla-historial .cuando { color: var(--texto-tenue); white-space: nowrap; }

/* El último renglón del menú del turno, separado de los estados. */
.menu-turno-pie { border-top: 1px solid var(--borde); }

/* Lo mismo para un menú de botones sueltos: el último renglón es de otra
   especie que los de arriba —éstos eligen algo, aquél lleva a otro lado— y la
   línea lo dice sin tener que leerlo. */
.menu button.menu-pie { border-top: 1px solid var(--borde); }

/* El menú del filtro de estados: qué se ve y qué no en la agenda.

   Va `fixed` y no `absolute` como los demás menús: la agenda es una página
   larguísima y el botón queda arriba de todo, así que un menú apoyado en el
   documento aparecía a la altura del principio de la página en vez de debajo
   del botón. Es lo mismo que hace el menú del turno. */
.menu.menu-estados {
  position: fixed;
  z-index: 80;
  width: 280px;
  min-width: 0;
  padding: 6px;
  max-height: 70vh;
  overflow-y: auto;
}

.fila-estado {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12.5px;
  line-height: 1.3;
}

.fila-estado:hover { background: var(--dorado-suave); }
.fila-estado input { margin: 0; flex: none; }

/* La barrita del color con el que se pinta ese estado en la agenda. */
.tono-estado {
  flex: none;
  width: 4px;
  align-self: stretch;
  min-height: 15px;
  border-radius: 2px;
}

/* Cada grupo con su rótulo, separados por una línea. */
.grupo-estados + .grupo-estados {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--borde);
}

.grupo-estados > small {
  display: block;
  padding: 4px 8px 6px;
  color: var(--texto-tenue);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.fila-estado.marcar-todos {
  margin-bottom: 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--borde);
  border-radius: 0;
  font-weight: 500;
}

.fila-estado.marcar-todos:hover { background: none; }

/* El embudo encendido cuando hay algo escondido: media agenda oculta sin
   ninguna señal se lee como una agenda vacía. */
.lupa-agenda.con-filtro { color: var(--dorado); }
.lupa-agenda.con-filtro::after {
  content: '';
  position: absolute;
  top: 5px;
  right: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dorado);
}

/* Los perfiles, uno al lado del otro. Son pocos y se eligen de un vistazo:
   una lista en filas desperdiciaría la pantalla. */
.nota-perfiles { max-width: 620px; margin: 0 0 20px; }

.tarjetas-perfil {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.tarjeta-perfil {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--superficie);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s;
}

.tarjeta-perfil:hover { border-color: var(--dorado); }

.perfil-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.perfil-cabeza strong { font-size: 14px; }

.tarjeta-perfil p {
  flex: 1;
  margin: 0;
  color: var(--texto-tenue);
  font-size: 12.5px;
  line-height: 1.45;
}

.perfil-pie {
  display: flex;
  gap: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--borde);
  color: var(--dorado);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

/* El formulario del perfil nuevo, adentro del cartel. */
.formulario-perfil { margin-top: 4px; }
.formulario-perfil .campo-modal { margin-bottom: 14px; }

/* Cada grupo de permisos se abre y se cierra, como las etapas de un plan.
   Cerrados entran los ocho en una pantalla; abiertos, ninguno. */
.grupo-permisos {
  margin-bottom: 8px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  overflow: hidden;
}

.grupo-permisos summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
}

.grupo-permisos summary::-webkit-details-marker { display: none; }
.grupo-permisos summary:hover { background: var(--dorado-suave); }

/*
 * El galon de la casa, para las flechitas que se dibujan con CSS.
 *
 * Habia dos familias de flecha en el sistema: el SVG de `ICONO_CHEVRON` —los
 * desplegables, las categorias de Prestaciones, los grupos del CRM— y un
 * triangulito de texto «▸» en las secciones que se pliegan. Se veian de otro
 * grosor y otro tamaño, porque una es un dibujo y el otro una letra.
 *
 * Estas tres viven en un `::after`, donde no se puede meter un SVG. La forma de
 * usar el mismo dibujo es como MASCARA: el navegador recorta el color de fondo
 * con la silueta del galon, asi que sale identico y toma el color del texto con
 * `background: currentColor`.
 *
 * OJO: el trazo del galon esta escrito aca Y en `ICONO_CHEVRON` de comun.js. Es
 * el precio de poder usarlo en un pseudo-elemento; si alguna vez cambia el
 * dibujo, hay que cambiarlo en los dos lados.
 */
.grupo-permisos summary::after,
.etapa summary::after {
  content: '';
  width: 11px;
  height: 11px;
  background: currentColor;
  -webkit-mask: var(--galon) center / contain no-repeat;
  mask: var(--galon) center / contain no-repeat;

  /* Nacen apuntando abajo y giran a la izquierda cuando esta cerrado, que es
     como se comporta el galon en todo el resto del sistema. */
  transform: rotate(-90deg);
}

.grupo-permisos summary::after {
  order: 3;
  color: var(--texto-tenue);
  transition: transform 0.15s;
}

.grupo-permisos[open] summary::after { transform: rotate(0deg); }
.grupo-permisos[open] summary { border-bottom: 1px solid var(--borde); }

.nombre-grupo {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
}

.cuenta-grupo {
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--dorado-suave);
  color: var(--dorado);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cuenta-grupo.todos {
  background: var(--dorado-fuerte);
  color: #16161a;
}

.cuenta-grupo.ninguno {
  background: none;
  border: 1px solid var(--borde);
  color: var(--texto-tenue);
}

.cuerpo-grupo { padding: 6px 16px 12px; }

.fila-permiso {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 13px;
  color: var(--texto);
}

.fila-permiso .interruptor { gap: 10px; font-size: 13px; color: var(--texto); }

/* Qué hace cada permiso, a pedido: son noventa y pico y explicarlos todos de
   corrido llenaría la pantalla de texto que nadie lee. */
.info-permiso {
  display: inline-flex;
  padding: 0;
  background: none;
  border: none;
  color: var(--texto-tenue);
  cursor: pointer;
}

/* El cartel que explica un permiso.
 *
 * El nombre del permiso va en dorado y grande: es lo que se vino a leer. Los
 * subtítulos —para quién, cómo llegar, hoy— llevan una barrita al costado, así
 * se separan de un vistazo sin necesidad de leerlos. */
#modal-mostrar .titulo-info {
  margin: 0 0 8px;
  color: var(--dorado);
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
}

#modal-mostrar .que-hace { margin: 0; }

#modal-mostrar h5 {
  margin: 20px 0 6px;
  padding-left: 9px;
  border-left: 2px solid var(--dorado);
  color: var(--texto);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

#modal-mostrar h5 + p { margin: 0; }

/* El camino hasta la pantalla, escrito paso por paso. */
#modal-mostrar .ruta-permiso {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 5px;
  margin: 0;
  padding: 9px 11px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: var(--superficie2);
  font-size: 12.5px;
}

#modal-mostrar .ruta-desde {
  margin-right: 2px;
  color: var(--texto-tenue);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

#modal-mostrar .paso-ruta { color: var(--texto); }

#modal-mostrar .flecha-ruta {
  color: var(--dorado);
  font-size: 13px;
  line-height: 1;
}

.info-permiso:hover { color: var(--dorado); }

/* Los tres atajos de arriba de la lista de permisos. Son casi cien casilleros:
   sin esto, armar un usuario nuevo es tildar de a uno. */
.atajos-permisos {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 18px 0 10px;
  padding: 16px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--superficie2);
}

.atajo { flex: 1 1 240px; min-width: 0; }

.atajo label,
.atajo .etiqueta-campo {
  display: block;
  margin-bottom: 7px;
  color: var(--texto-tenue);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.atajo-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.atajo-fila select {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 8px 34px 8px 11px;
  font-size: 12.5px;
}

.atajo-fila .chip { white-space: nowrap; }

.pista-atajos { margin: 0 0 20px; }

/* Qué cambia un atajo, antes de decidir. */
.cambios-permisos {
  margin: 12px 0;
  padding: 0;
  list-style: none;
}

.cambios-permisos li {
  padding: 7px 0 7px 20px;
  border-bottom: 1px solid var(--borde);
  font-size: 13px;
  position: relative;
}

.cambios-permisos li:last-child { border-bottom: 0; }

.cambios-permisos li::before {
  position: absolute;
  left: 0;
  font-weight: 700;
}

.cambios-permisos .suma::before  { content: '+'; color: var(--atendido); }
.cambios-permisos .resta::before { content: '−'; color: var(--anulado); }
.cambios-permisos .queda::before { content: '='; color: var(--texto-tenue); }
.cambios-permisos .queda { color: var(--texto-tenue); }

/* EL ASTERISCO DORADO: ACÁ HAY ALGO CAMBIADO A MANO.

   Uno solo para las dos pantallas donde aparece la misma idea: al lado del
   perfil en la lista de usuarios, y al lado de cada permiso que no es el que
   ese perfil da. Antes el de la ficha era un « · a mano» escrito al final del
   nombre del permiso, que con cincuenta renglones se leía como parte del
   título; el de la lista era un «con ajustes» debajo del perfil.

   Qué se cambió —si es de más o de menos— lo dice la ayuda al pasar por
   encima: en la marca no entra, y puesto en el renglón vuelve el ruido que
   se sacó. */
.asterisco {
  color: var(--dorado);
  font-weight: 600;
  cursor: help;
}

/* El botón que guarda el formulario entero: al medio y suelto, sin tarjeta ni
   línea. No es de ninguna sección: son todas. */
.guardar-formulario {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 4px 0 10px;
}

/* La aclaración de qué guarda el botón va abajo, no al lado: al lado se lee
   como si fuera otro control de la fila. */
.guardar-formulario .pista { margin: 0; text-align: center; }

/* Una aclaración chica debajo de un campo.
 *
 * Los campos traen 18px de margen abajo —es el aire entre renglones del
 * formulario— y por eso la aclaración quedaba flotando lejos del campo que
 * explica, y a distinta altura según de qué campo colgara. Se la sube esos
 * 18px menos los 4 que tiene que quedar separada, y así todas quedan igual sin
 * tocar el aire entre renglones.
 */
.pista {
  display: block;
  margin-top: 4px;
  color: var(--dorado);
  font-size: 11px;
  line-height: 1.35;
}

.campo-modal input + .pista,
.campo-modal select + .pista,
.campo-modal textarea + .pista,
.campo-modal .dato-fijo + .pista,
.campo-modal .otras-especialidades + .pista { margin-top: -14px; }

/* Un dato que se muestra y no se toca: se ve como un campo apagado, pero no
   es un campo. Con un `input` deshabilitado el navegador igual le ofrecía
   autocompletar lo que tenía guardado, y escribía cualquier cosa encima. */
.dato-fijo {
  display: block;
  margin: 4px 0 18px;
  padding: 11px 13px;
  background: var(--superficie2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  color: var(--texto-tenue);
}

.etiqueta-campo {
  display: block;
  margin-bottom: 6px;
  color: var(--texto-tenue);
  font-size: 12px;
}

/* El pie de un formulario o de una tarjeta: la línea que lo separa y los
   botones.

   La línea llega de punta a punta de la sección. Estaba cortada a 1200px y en
   una tarjeta ancha quedaba colgando en el medio; lo mismo pasaba con la tabla
   de bloqueos. Si algo tiene que ser más angosto que su sección, se lo dice en
   su propia regla y no acá. */
.pie-formulario {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 8px;
  border-top: 1px solid var(--borde);
}

/* La barra de arriba: en qué sucursal y con qué horario se está trabajando,
   y las dos cosas que se agregan desde acá. */
.barra-horarios {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.campo-en-linea {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  color: var(--texto-tenue);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.campo-en-linea select {
  width: auto;
  max-width: 320px;
  min-width: 150px;
  margin: 0;
  padding: 8px 34px 8px 11px;
  font-size: 12.5px;
  text-transform: none;
  letter-spacing: normal;
}

.barra-horarios .chip.mini { padding: 7px 12px; font-size: 13px; line-height: 1.2; }

/* El menú de horarios especiales se ajusta a lo que dice: son fechas cortas y
   el ancho mínimo de los menús le dejaba un vacío a la derecha. */
#menu-especiales {
  min-width: 0;
  width: max-content;
  max-width: 420px;
}

/* La semana habitual y los horarios especiales: dos botones, y el que manda
   se ve. El de especiales no está cuando no hay ninguno. */
.elegir-horario { display: flex; align-items: center; gap: 6px; }
.elegir-horario .chip { padding: 8px 14px; white-space: nowrap; }

/* La semana entera de un vistazo: los siete días en una fila. En pantallas
   angostas se parte en dos, que es mejor que apretar siete columnas hasta que
   no entre la hora. */
/* `minmax(0, 1fr)` y no `1fr` a secas: con `1fr` una pista nunca baja del
   ancho mínimo de su contenido, así que en un recuadro angosto —el de la ficha
   de la sucursal— las siete columnas se salían por la derecha. Con el mínimo en
   cero, se achican y entran. */
.horarios-semana {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

/* Y los desplegables de adentro tampoco imponen un piso. */
.horas-dia select { min-width: 0; }

@media (max-width: 1100px) {
  .horarios-semana { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

.dia-horario {
  display: flex;
  flex-direction: column;
  padding: 10px;
  background: var(--superficie2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

/* El día que no se atiende no compite con los que sí. */
.dia-horario.sin-atender { opacity: 0.55; }

/* El nombre del día a la izquierda y su interruptor a la derecha, en el mismo
   renglón. Estaba al pie de la columna, con un tilde y la palabra «No atiende»
   debajo: dos renglones y una negación para decir algo que la píldora dice
   sola y arriba, que es donde uno la busca. */
.dia-horario-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.dia-horario-titulo > div { display: flex; flex-direction: column; min-width: 0; }
.dia-horario-titulo .interruptor { margin: 0; }

.dia-horario-titulo strong { font-size: 13px; }
.dia-horario-titulo small { color: var(--texto-tenue); font-size: 10.5px; }

/* Las horas del día, una por renglón: en una columna de la semana no entran
   cuatro en fila, y apiladas se leen mejor de todos modos. */
.horas-dia { display: flex; flex-direction: column; gap: 6px; }

/* El corte del mediodía del local, debajo de las horas de apertura y separado
   por una línea: es otra cosa —cuándo cierra en el medio— y sin la separación
   se leía como dos horas más de la misma lista. */
.corte-prende {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--borde);
  font-size: 11px;
}

.corte-prende input[type="checkbox"] { width: 28px; height: 16px; }
.horas-corte { margin-top: 8px; }

.horas-dia label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  color: var(--texto-tenue);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.horas-dia select {
  width: 100%;
  margin: 0;
  padding: 6px 22px 6px 7px;
  font-size: 12.5px;
  text-transform: none;
  letter-spacing: normal;
}

.horas-dia select:disabled { opacity: 0.45; cursor: not-allowed; }
.marca-corte input:disabled { cursor: not-allowed; }

/* El corte parte el día en dos, y así se ve. */
.marca-corte {
  flex-direction: row;
  gap: 6px;
  margin-top: 3px;
  padding-top: 8px;
  border-top: 1px dashed var(--borde);
  font-size: 11px;
  text-transform: none;
  letter-spacing: normal;
}
/* La clave que se muestra una sola vez. */
.clave-nueva {
  display: flex;
  gap: 22px;
  margin: 12px 0;
  padding: 12px 14px;
  background: var(--superficie2);
  border: 1px solid var(--dorado);
  border-radius: var(--radio);
}

.clave-nueva span { display: flex; flex-direction: column; gap: 2px; }
.clave-nueva small { color: var(--texto-tenue); font-size: 11px; }
.clave-nueva strong { font-size: 16px; font-family: ui-monospace, monospace; }

/* Un campo con su etiqueta al lado, para las barras de herramientas. */
.campo-en-linea {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--texto-tenue);
  font-size: 12.5px;
}

.campo-en-linea input { margin: 0; width: auto; }

/* El gasto del mes, partido por rubro. */
.resumen-categorias {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.tarjeta-categoria {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 14px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  font-size: 13px;
}

.tarjeta-categoria small { color: var(--texto-tenue); font-size: 11px; }

/* ---------------------------------------------- las listas del sistema

   Las tablas que listan cosas —usuarios, profesionales, pacientes, gastos,
   laboratorios, sucursales, inventario, plantillas— son LA MISMA TABLA. Cambia
   qué dice cada columna; el marco, el rayado, el alto de la fila y el ancho no.

   Estaba escrito tres veces —`.tabla-admin`, `.tabla-usuarios` y
   `.tabla-pacientes` declaraban el mismo recuadro, el mismo rayado y el mismo
   `small`— y pasó lo previsible: el tope de ancho se le puso a UNA sola, y
   encima colgado del id del contenedor (`.contenido #listado`) en vez de la
   tabla. Resultado: la lista de usuarios quedaba centrada a 1150 y la de
   profesionales se iba de lado a lado de la pantalla, siendo las dos caras de
   la misma gente.

   Es la misma lección que la barra de arriba: escrito una vez, cambian todas. */
.tabla-admin,
.tabla-usuarios,
.tabla-pacientes {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;

  /* El tope va en la TABLA y no en el contenedor: así vale en cualquier
     pantalla, tenga el suyo el id que tenga. En una caja más angosta que 1150
     no hace nada, que es lo que corresponde. */
  max-width: 1150px;
  margin-inline: auto;
}

/* La celda que identifica el renglón va un punto más pesada, no en negrita.

   `<strong>` da 700, que al lado del 400 del resto de la tabla se lee como otro
   color: Prestaciones parecía tener los nombres en un tono más oscuro
   que las demás pantallas. El peso correcto es 500, el mismo que ya usa
   `.link-paciente` para el nombre del paciente, que hace exactamente el mismo
   trabajo: ser lo primero que el ojo encuentra al recorrer la lista.

   Va sobre `strong` y no sobre una clase nueva porque el marcado ya dice cuál
   es la celda importante, en las cinco tablas que lo usan. */
.tabla-admin td strong,
.tabla-usuarios td strong,
.tabla-pacientes td strong { font-weight: 500; }

.tabla-admin tbody tr:nth-child(even),
.tabla-usuarios tbody tr:nth-child(even),
.tabla-pacientes tbody tr:nth-child(even) { background: var(--superficie2); }

.tabla-admin td,
.tabla-usuarios td,
.tabla-pacientes td { vertical-align: middle; }

.tabla-admin small.sin-dato,
.tabla-usuarios small.sin-dato,
.tabla-pacientes small.sin-dato { display: block; font-size: 11px; }

/* LA FILA DE TÍTULOS SE QUEDA ARRIBA AL BAJAR POR LA LISTA.

   Con catorce usuarios ya no se ve de qué columna es cada cosa cuando se
   llega al final. Se apoya en los 58px de `.barra`, que es lo único que hay
   más arriba: el encabezado con los filtros sí se va, porque es de la
   pantalla y no de la tabla.

   `overflow: clip` en vez del `hidden` de arriba, y ese detalle es todo: los
   dos recortan igual el redondeo de las esquinas, pero `hidden` arma un área
   de scroll propia, y entonces `sticky` se pega a esa área en vez de a la
   pantalla —o sea, no se pega a nada y la fila se va con el resto—.

   El `border-bottom` de `.tabla th` tampoco sirve pegado: con
   `border-collapse: collapse` el borde es de la tabla, no de la celda, y se
   queda arriba mientras la celda baja. La línea va como sombra adentro, que
   sí viaja con la celda. */
.tabla-usuarios { overflow: clip; }

.tabla-usuarios thead th {
  position: sticky;
  top: 58px;
  z-index: 2;
  background: var(--superficie);
  box-shadow: inset 0 -1px 0 var(--borde);
}

.tabla-admin select { margin: 0; padding: 5px 24px 5px 8px; font-size: 12.5px; }

/* Cada especialidad con sus motivos de atención.

   Se ve como una categoría de Prestaciones, y son sus mismas reglas:
   el nombre en dorado con la línea abajo y la tabla colgando, sin tarjeta que
   la envuelva. Están más abajo, junto al arancel; acá queda solo lo que es de
   esta pantalla. */
.especialidad-acciones { display: flex; gap: 6px; margin-left: auto; }

.sin-motivos { padding: 10px 6px 20px; margin: 0; font-size: 12.5px; }

/* Quiénes ejercen la especialidad, arriba de sus motivos. Con las etiquetas
   de Prestaciones, que dicen lo mismo un renglón más arriba: la llena
   es la de la ficha y la vacía la que se ejerce además de la propia. */
.quienes-ejercen {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0;
  padding: 12px 6px 4px;
}

.rotulo-quienes {
  margin-right: 2px;
  color: var(--texto-tenue);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* El color con el que se va a ver el borde de la cita en la agenda. Va
   pegado al nombre —es de ese motivo, no de la fila— y vacío se ve como un
   hueco punteado, que es lo que es. */
.motivo-y-color {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1;
  min-width: 0;
}

.color-motivo {
  flex: none;
  width: 15px;
  height: 15px;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

.color-motivo:hover { transform: scale(1.25); }

/* La paleta colgada del circulito.
   Va con `.menu.menu-paleta` y no con `.menu-paleta` solo: la regla de `.menu`
   está más abajo en este archivo y le ganaría el ancho mínimo. */
.menu.menu-paleta {
  padding: 10px;
  width: max-content;   /* lo que mida la grilla: diez familias de ancho */
  min-width: 0;
  overflow: visible;
}

.menu.menu-paleta .paleta { margin: 0; }

.color-motivo.sin-color {
  border: 1px dashed var(--texto-tenue);
  background: none;
}

.nombre-motivo { min-width: 0; }

.duracion-motivo {
  color: var(--texto-tenue);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}


/* La paleta del cartel de editar un motivo. */
/* La paleta: diez familias en columnas, del tono vivo al más oscuro. En
   grilla y no en flex porque lo que se lee es la columna —«el violeta, un poco
   más oscuro»— y con `flex-wrap` las columnas se corren solas. */
.paleta {
  display: grid;
  grid-template-columns: repeat(10, 22px);
  gap: 8px;
  margin-top: 6px;
}

/* Los grises, el «sin color» y el cuentagotas: no son una familia más, así que
   van abajo, separados por una línea. */
.paleta-pie {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--borde);
}

.paleta .tono {
  width: 22px;
  min-width: 0;
  height: 22px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  cursor: pointer;
}

.paleta .tono.sin-color { border: 1px dashed var(--borde); background: none; }
.paleta .tono:hover { transform: scale(1.15); }

.paleta .tono.puesto {
  border-color: var(--texto);
  box-shadow: 0 0 0 1px var(--fondo), 0 0 0 3px var(--texto);
}

/* El cuentagotas: la ventana de colores del sistema, para cualquier color que
   no esté en la grilla. El input va invisible encima porque el picker se abre
   al hacerle clic a él y no al recuadro. */
.paleta .tono-libre {
  position: relative;
  display: block;
  border: 1px dashed var(--texto-tenue);
  background-image: linear-gradient(135deg,
    #ff0000, #ff9900, #ffd700, #22c032, #00b0ff, #9900ff, #ff00ff);
  background-size: cover;
}

.paleta .tono-libre input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  opacity: 0;
  cursor: pointer;
}

/* Con un color puesto manda el color, no el arcoíris de fondo. */
.paleta .tono-libre[data-color]:not([data-color=""]) { background-image: none; }

.formulario-motivo .campo-modal { margin-bottom: 14px; }
/* El número de la especialidad. Sirve para nombrarla sin ambigüedad cuando
   hay dos que se llaman igual. */
.id-especialidad {
  padding: 2px 8px;
  border: 1px solid var(--borde);
  border-radius: 20px;
  color: var(--texto-tenue);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}



.quitar-motivo:hover { background: var(--anulado-suave); color: var(--anulado); }

.campo-modal.ancho-doble { grid-column: 1 / -1; }

/* Los duplicados encontrados. */
.dup-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 50vh;
  overflow-y: auto;
  margin-top: 12px;
}

.dup-grupo {
  padding: 11px 12px;
  background: var(--superficie2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

.dup-motivo {
  display: block;
  margin-bottom: 8px;
  color: var(--texto-tenue);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dup-fichas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.dup-ficha {
  padding: 8px 10px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 6px;
  font-size: 12.5px;
}

.dup-ficha small { display: block; color: var(--texto-tenue); font-size: 11px; }

/* Fusionar fichas: la que queda y la que se absorbe, una al lado de la otra
   con la flecha marcando hacia dónde va todo. */
.fusion {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 12px;
  margin: 14px 0;
}

.fusion-lado {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--superficie2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

.fusion-lado h4 {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

#lado-madre h4 { color: var(--dorado); }
#lado-duplicado h4 { color: var(--anulado); }

.fusion-lado input { margin: 0; }

.fusion-flecha {
  align-self: center;
  color: var(--dorado);
  font-size: 22px;
}

.fusion-resultados {
  display: flex;
  flex-direction: column;
  max-height: 190px;
  overflow-y: auto;
}

.fusion-resultados button {
  padding: 7px 8px;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--texto);
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  text-align: left;
}

.fusion-resultados button:hover { background: var(--dorado-suave); color: var(--dorado); }
.fusion-resultados small { display: block; color: var(--texto-tenue); font-size: 11px; }

.fusion-elegido:not(:empty) {
  padding: 9px 10px;
  background: var(--superficie);
  border: 1px solid var(--dorado);
  border-radius: 6px;
  font-size: 12.5px;
}

.fusion-elegido small { display: block; color: var(--texto-tenue); font-size: 11px; }

/* El alta pide poco: dos columnas y listo. */
.campos-alta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
}

/* Tres en un renglón, para los grupos que son UNA cosa dicha en tres campos.

   Los datos de matrícula son eso: provincia, número y tipo no son tres datos
   sueltos, son la matrícula. En dos columnas el tercero bajaba solo a un renglón
   propio y el grupo se leía como si tuviera algo de más.

   Abajo de 900 vuelven a dos y abajo de 620 a uno: tres campos en una pantalla
   angosta no son tres columnas, son tres franjas donde no entra el rótulo. */
.campos-alta.en-tres { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 900px) {
  .campos-alta.en-tres { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .campos-alta,
  .campos-alta.en-tres { grid-template-columns: 1fr; }
}

/* Un paciente dado de baja se lee, pero apagado. */
.dado-de-baja { opacity: 0.55; }

/* Los encabezados que ordenan. */
.tabla-pacientes th.ordenable { cursor: pointer; user-select: none; }
.tabla-pacientes th.ordenable:hover { color: var(--dorado); }
.tabla-pacientes th.ordenando { color: var(--dorado); }
.flecha-orden { display: inline-block; width: 12px; text-align: center; }

/* La vista previa: se abre abajo del paciente, sin sacarlo del listado. */
.fila-paciente { cursor: pointer; }
.fila-paciente.abierta { background: var(--dorado-suave) !important; }

.fila-previa td { vertical-align: top; padding: 0 12px; }
.fila-previa .previa-bloque { padding: 10px 0 12px; }

/* Cada columna de la previa arranca donde arranca la de arriba. */
.previa-columna { border-left: 1px solid var(--borde); }

/* La foto va al medio de su espacio, en las dos direcciones: es lo único que
   hay en esas dos columnas y arrinconada arriba a la izquierda quedaba
   suelta. */
/* La cortina que se despliega.

   Con `max-height` y no con una grilla de `0fr` a `1fr`: la grilla es más
   elegante, pero se lleva mal con el `height: 100%` que los bloques usan
   para alinear sus enlaces abajo, y la fila se abría de golpe. El tope está
   holgado respecto de lo que mide el contenido; de más no se nota, de menos
   cortaría la vista previa. */
.cortina {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.22s ease;
}

.cortina.abierta { max-height: 400px; }

/* A quien pidió que el sistema no le mueva cosas en la pantalla, no se le
   mueven. */
@media (prefers-reduced-motion: reduce) {
  .cortina { transition: none; }
}

/* La foto ocupa lo que sobra del bloque y se centra ahí adentro. */
.foto-envoltorio {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* El enlace de mentira que empareja el alto: se ve nada, ocupa lo mismo. */
.enlace-previa.espejo { visibility: hidden; }

/* Mientras no haya foto, las iniciales: el lugar queda hecho para cuando se
   puedan subir. */
.foto-paciente {
  display: inline-flex;
  flex: none;
  width: 84px;
  height: 84px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--superficie);
  border: 1px solid var(--borde);
  color: var(--texto-tenue);
  font-size: 24px;
  font-weight: 500;
}

/* Los tres bloques terminan midiendo lo mismo —el alto se empareja al
   dibujar, midiendo el más alto— y así los «Ir a…» quedan en la misma línea.
   Con `height: 100%` era más prolijo, pero eso impedía animar la apertura:
   la fila no tenía cómo crecer desde cero. */
.previa-bloque {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.dato-previa {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
}

/* El dibujo, del color del texto y un poco apagado: acompaña al dato, no
   compite con él. */
.icono-dato {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--texto-tenue);
}

.renglon-previa {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  font-size: 12.5px;
  color: var(--texto-tenue);
}

.renglon-previa strong { color: var(--texto); font-weight: 500; }

.enlace-previa {
  margin-top: auto;
  align-self: flex-end;
  padding-top: 12px;
  color: var(--dorado);
  text-decoration: none;
  font-size: 12.5px;
}

.enlace-previa:hover { color: var(--dorado); }

.fila-previa td { background: var(--superficie2); }

/* Un menú de una sola pregunta no necesita el ancho de los otros. */
.menu-angosto { min-width: 170px; }

/* Franjas: con dos mil filas iguales, el ojo se pierde de renglón al pasar
   de la primera columna a la última. */
.tabla-pacientes tbody tr:nth-child(even) { background: var(--superficie2); }
/* El hover sale del bloque de `.tabla`, que lo tiene para todo el sitio. */

.tabla-pacientes {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

/* Con los anchos fijos, lo que no entra se corta o se parte, según de qué
   dato se trate: un apellido largo con puntos suspensivos, un email en dos
   renglones. */
.tabla-pacientes td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dato-previa { white-space: normal; overflow-wrap: anywhere; }

/* Los títulos de columna, con más peso: son también los botones que ordenan
   la lista, así que tienen que verse como algo y no como un rótulo gris. */
.tabla-pacientes th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--superficie);
  padding: 14px 12px;
  background: var(--superficie2);
  color: var(--texto);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.05em;
  border-bottom: 2px solid var(--dorado);
}

/* La tabla, en su propia hoja y despegada del encabezado. */
/* La tabla, centrada y con aire a los costados: estirada de punta a punta en
   una pantalla ancha, el ojo tiene que cruzar medio metro para ir del
   apellido a la deuda. */




.id-paciente { color: var(--texto-tenue); font-size: 12px; }
.con-deuda { color: var(--anulado); font-weight: 500; }

.paginado {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 18px 0 6px;
  color: var(--texto-tenue);
  font-size: 12.5px;
}

.barra-buscador {
  position: relative;
  /* El `margin-left: auto` que lo empuja está unas líneas más abajo, con el de
     la ruedita y el de quién está: los tres son el mismo criterio y se leen
     juntos. Escrito acá también, cambiarlo en un lado no cambiaba nada. */
  width: min(320px, 34vw);
}

.barra-buscador input { margin: 0; }

/* Todo lo de la derecha va pegado a la derecha, haya o no buscador en el medio.

   El empujón lo da el PRIMERO del grupo, sea cual sea: el buscador si está, si
   no la ruedita, y si tampoco está —el usuario no puede abrir ninguna sección de
   configuración— el bloque de quién está. Los de atrás no empujan de nuevo.

   Antes el `auto` estaba sólo en `.barra-quien`, y como la ruedita se inserta
   ANTES que ella el margen caía en el medio de los dos: en las pantallas sin
   buscador —la ficha del usuario, la del profesional— la ruedita quedaba pegada
   al menú, a la izquierda de todo, mientras el resto se iba a la derecha. */
.barra-buscador,
.barra-ruedita,
.barra-quien { margin-left: auto; }

.barra-buscador ~ .barra-ruedita,
.barra-buscador ~ .barra-quien,
.barra-ruedita ~ .barra-quien { margin-left: 0; }

.barra-quien {
  text-align: right;
  line-height: 1.3;
  font-size: 12px;
}

.barra-quien strong { display: block; font-weight: 500; }
.barra-quien span { color: var(--dorado); text-transform: capitalize; }

/* El nombre de arriba a la derecha abre el menú de uno: se comporta como algo
   que se aprieta, así que se ve como algo que se aprieta. */
.barra-quien-menu {
  cursor: pointer;
  padding: 5px 9px;
  margin-right: -9px;
  border-radius: var(--radio);
  transition: background .12s;
}

.barra-quien-menu:hover,
.barra-quien-menu:focus-visible { background: var(--dorado-suave); }

/* La cabecera del menú de la cuenta: quién está. Se mudó acá desde la barra,
   donde ocupaba lugar fijo para decir algo que no cambia nunca. */
.menu-cabeza {
  padding: 11px 15px 9px;
  border-bottom: 1px solid var(--borde);
  line-height: 1.35;
}

.menu-cabeza strong { display: block; font-size: 13px; font-weight: 500; }
.menu-cabeza small { color: var(--dorado); font-size: 11px; text-transform: capitalize; }

.salir {
  background: none;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 7px 12px;
  color: var(--texto-tenue);
  cursor: pointer;
  font-size: 12px;
}

.salir:hover { border-color: var(--dorado); color: var(--dorado); }

/* --------------------------------------------------------- resultados */

.resultados {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: min(420px, 80vw);
  max-height: 60vh;
  overflow-y: auto;
  background: var(--carbon-alto);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  z-index: 30;
}

.resultados:empty { display: none; }

/* Cada resultado es un <a>, así que sin `display: flex` el relleno y el
   borde se dibujaban en línea y la lista quedaba amontonada. */
.resultado {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 13px;
  border-bottom: 1px solid var(--borde);
  color: var(--texto);
  text-decoration: none;
  cursor: pointer;
}

.resultado:last-child { border-bottom: none; }
.resultado:hover { background: var(--dorado-suave); }

.resultado-inicial {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--dorado-suave);
  border: 1px solid var(--borde);
  color: var(--dorado);
  font-size: 13px;
  font-weight: 600;
}

.resultado-datos {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.resultado-datos strong { font-weight: 500; font-size: 13.5px; }
.resultado-datos small,
.resultado small { color: var(--texto-tenue); font-size: 11.5px; }

/* La etiqueta de inactivo, al final de la fila. */
.resultado .etiqueta { margin-left: auto; flex: none; }
.sin-resultado { justify-content: center; }


/* ------------------------------------------------------------- controles */

.controles {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 20px;
}

/* En las secciones que no son la agenda, el encabezado se despega de lo que
   viene abajo: sin la línea, el título y los filtros parecían parte de la
   primera fila de la tabla. */
.controles.encabezado {
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
}

/* El encabezado que no encabeza una tabla, sino tarjetas.

   `.encabezado` se despega de lo de abajo con una linea, y eso esta bien cuando
   abajo viene una tabla pegada. En tareas de gestion abajo vienen tarjetas, que
   traen su propio borde y su propio aire: la linea quedaba a un pixel del borde
   de la primera tarjeta, como dos rayas juntas.

   Asi que en vez de la linea, aire. La clase se usaba en el marcado desde el
   dia uno pero nunca se habia escrito, asi que no hacia nada: el encabezado
   quedaba con su linea Y sin separacion. */
.controles.encabezado.sin-borde {
  border-bottom: 0;
  margin-bottom: 18px;
}

/* La barra del asistente no tiene título —la barra de arriba ya dice dónde
   estamos—, así que hay pantallas donde no le queda nada adentro. Vacía sigue
   midiendo 64 px de alto reservado, y eso es alto que le saca a la lista de
   charlas. Se muestra sólo si alguno de sus tres huecos tiene algo. */
#encabezado-asistente { display: none; }
#encabezado-asistente:has(> :not(:empty)) { display: flex; }

.controles input[type="date"], .controles select { width: auto; margin: 0; }

/* La fecha que se está mirando, escrita con todas las letras encima del campo
   que la elige. El campo sigue abajo, transparente: guarda el valor, abre el
   calendario al apretarlo y se puede escribir con el teclado como siempre. */
.campo-fecha {
  position: relative;
  flex: none;
  display: flex;
}

.campo-fecha input[type="date"] {
  width: 100%;
  min-width: 210px;
  padding-top: 7px;
  padding-bottom: 7px;
  color: transparent;
}

/* Al abrirlo, el rótulo se va y aparece la fecha del navegador en día, mes y
   año: es la que se tipea, y cada parte se cambia por separado. Encimadas no
   se leía ninguna de las dos. */
.campo-fecha:focus-within .fecha-rotulo { display: none; }

.campo-fecha:focus-within input[type="date"] {
  color: var(--texto);
  text-align: center;
}

.fecha-rotulo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  /* El clic es del campo de abajo, que es el que abre el calendario. */
  pointer-events: none;
  overflow: hidden;
}

.fecha-rotulo strong {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
}

.fecha-rotulo small {
  font-size: 11.5px;
  line-height: 1.15;
  color: var(--texto-tenue);
  white-space: nowrap;
}

.grupo-vista {
  display: flex;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
}

.vista {
  background: none;
  border: none;
  color: var(--texto-tenue);
  padding: 9px 16px;
  cursor: pointer;
}

.vista:hover { color: var(--texto); }
.vista.activa { background: var(--dorado); color: var(--negro); font-weight: 500; }

.flecha {
  background: var(--carbon);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  color: var(--texto);
  width: 34px;
  height: 38px;
  cursor: pointer;
}

.flecha:hover { border-color: var(--dorado); }

.hoy {
  background: none;
  border: 1px solid var(--dorado);
  color: var(--dorado);
  border-radius: var(--radio);
  padding: 9px 14px;
  cursor: pointer;
}

.interruptor {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--texto-tenue);
}

/* El interruptor es una PÍLDORA, no un tilde.
 *
 * Un tilde dice «esto está marcado»; una píldora dice «esto está prendido o
 * apagado», que es lo que estos controles significan en todo el sistema:
 * atiende o no atiende, la sucursal está abierta o cerrada, el paciente es apto
 * o no lo es. Se lee sin el rótulo al lado, que es justamente lo que permitió
 * sacar el «No atiende» escrito debajo de cada día.
 *
 * Va sobre `.interruptor` y no sobre una clase nueva: ese es el nombre que el
 * sistema ya usaba para esto, así que cambia en las veinte pantallas de una vez
 * y no queda medio sistema con tilde y medio con píldora.
 *
 * Los cuatro nombres —`interruptor`, `interruptor-modal`, `marca-modal` y
 * `marca-filtro`— son el MISMO control con cuatro nombres, que se fueron
 * inventando en pantallas distintas. Van todos acá en vez de renombrarlos en
 * los ocho archivos que los usan: el que quiera unificarlos algún día tiene la
 * lista escrita en esta regla.
 *
 * OJO: esto NO alcanza a los tildes de SELECCIÓN —elegir varias prestaciones,
 * marcar permisos, tildar los turnos a pagar—. Esos siguen siendo tildes, y
 * está bien: no prenden ni apagan nada, eligen elementos de una lista. Por eso
 * el estilo cuelga de `.interruptor` y no de `input[type="checkbox"]`.
 */
.interruptor-modal input[type="checkbox"],
.marca-modal input[type="checkbox"],
.marca-filtro input[type="checkbox"],
.interruptor input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  position: relative;
  width: 32px;
  height: 18px;
  margin: 0;
  border: none;
  border-radius: 999px;
  /* Un gris del medio: se ve tanto sobre el fondo claro como sobre el oscuro.
     Con `--borde` desaparecía en el tema claro. */
  background: var(--linea-grilla);
  cursor: pointer;
  transition: background 0.15s;
}

/* La perilla. Blanca siempre y con una sombra mínima: sobre el gris apagado y
   sobre el dorado prendido se lee igual, en los dos temas. */
.interruptor-modal input[type="checkbox"]::after,
.marca-modal input[type="checkbox"]::after,
.marca-filtro input[type="checkbox"]::after,
.interruptor input[type="checkbox"]::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s;
}

.interruptor-modal input[type="checkbox"]:checked,
.marca-modal input[type="checkbox"]:checked,
.marca-filtro input[type="checkbox"]:checked,
.interruptor input[type="checkbox"]:checked { background: var(--dorado); }

.interruptor-modal input[type="checkbox"]:checked::after,
.marca-modal input[type="checkbox"]:checked::after,
.marca-filtro input[type="checkbox"]:checked::after,
.interruptor input[type="checkbox"]:checked::after { transform: translateX(14px); }

.interruptor-modal input[type="checkbox"]:disabled,
.marca-modal input[type="checkbox"]:disabled,
.marca-filtro input[type="checkbox"]:disabled,
.interruptor input[type="checkbox"]:disabled { opacity: 0.4; cursor: not-allowed; }

.interruptor-modal input[type="checkbox"]:focus-visible,
.marca-modal input[type="checkbox"]:focus-visible,
.marca-filtro input[type="checkbox"]:focus-visible,
.interruptor input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--dorado);
  outline-offset: 2px;
}

/* Día o semana a la izquierda, y la cuenta de turnos en una tarjeta como
   las de la ficha del paciente. */
.contador {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Las dos salidas de un motivo repetido: tarjetas grandes, para que se lea
   qué hace cada una antes de apretar. */
.opciones-motivo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.opcion-motivo {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.opcion-motivo:hover { border-color: var(--dorado); background: var(--dorado-suave); }
.opcion-motivo small { color: var(--texto-tenue); }

/* Un campo con su acción al lado: el desplegable ocupa el lugar y el botón
   se apoya a la derecha. */
.campo-con-accion {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* El desplegable y el campo de la categoría nueva comparten el lugar, sin el
   margen de abajo que descentraba los botones de al lado. */
.campo-con-accion select,
.campo-con-accion input[type="text"] { flex: 1; min-width: 0; margin: 0; }

/* El aviso de que el paciente se atiende con otro: dice el problema y ofrece
   las dos salidas, en vez de dejarlo trabado o de dejarlo pasar sin decir
   nada. */
.aviso-cabecera p { margin: 0 0 10px; }

.salidas-aviso {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* El candado del profesional de cabecera: redondo, del par de los otros
   botones que van pegados a un campo. Puesto se pinta dorado —es una marca
   que queda, no una acción que se acaba de hacer—. */
.boton-candado {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: 50%;
  background: none;
  color: var(--texto-tenue);
  cursor: pointer;
}

.boton-candado:hover:not(:disabled) { color: var(--dorado); border-color: var(--dorado); }

.boton-candado.puesto {
  border-color: var(--dorado);
  background: var(--dorado-suave);
  color: var(--dorado);
}

.boton-candado:disabled { opacity: 0.4; cursor: default; }
.boton-candado .icono-candado { width: 17px; height: 17px; }

/* El desplegable con el candado puesto: se ve, pero no se toca. El profesional
   lo manda la preferencia del paciente. */
.campo-con-accion select:disabled { opacity: 0.75; }

/* El campo del profesional lleva el margen que el desplegable ya no tiene:
   sin esto la fila de abajo se le sube encima. */
.campo > .campo-con-accion { margin-bottom: 18px; }

/* La tabla de gastos ya no lleva tope propio: el de todas las listas del
   sistema —1150, centrado— sale de `.tabla-admin`. Acá decía 1100 y colgaba del
   id, así que era la misma decisión tomada dos veces con dos números. */

/* El más y el tachito de la categoría: gemelos. Mismo tamaño, misma forma
   redonda, los dos centrados contra el campo. */
.accion-categoria,
.campo-con-accion .borrar-detalle {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: 50%;
  background: none;
  color: var(--texto-tenue);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.campo-con-accion .borrar-detalle svg { width: 15px; height: 15px; }

.accion-categoria:hover { color: var(--dorado); border-color: var(--dorado); }
.campo-con-accion .borrar-detalle:hover { color: var(--anulado); border-color: var(--anulado); }

/* La lista de categorías para deshabilitar, con aire para marcar varias. */
.lista-categorias {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 320px;
  overflow-y: auto;
  margin: 12px 0 14px;
}

/* Los botones de una pregunta suelta, a la derecha como en los popups. */
.pie-suelto {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

/* El resultado de la consulta de evaluación. Va en un recuadro propio porque
   no es una nota más del formulario: es el dato del que después sale el
   llamado.

   El margen de abajo es el de cualquier par de campos del sitio —18px— y va
   acá porque este recuadro no tiene un campo propio que lo ponga: en el resto
   del formulario el aire lo pone el `margin-bottom` del `input`, y acá adentro
   hay botones y un desplegable envueltos en divs. Sin esto, el rótulo
   «Evolución» quedaba pegado al borde del recuadro, como metido entre los
   dos. */
.evaluacion-apto {
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 18px;
  background: var(--dorado-suave);
}

/* Y el desplegable de adentro no pone el suyo: si no, el recuadro cierra 30
   píxeles abajo del último campo y 12 arriba del primero, y se ve caído. El
   aire de abajo lo pone el `padding` del recuadro, igual que el de arriba. */
.evaluacion-apto select { margin-bottom: 0; }

/* Lo que se entendió de lo pegado, antes de guardarlo. Con scroll propio: la
   lista puede tener cincuenta filas y el diálogo no puede crecer sin fin. */
.vista-previa-carga {
  max-height: 260px;
  overflow: auto;
  margin: 10px 0 4px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 6px 10px;
}

.vista-previa-carga tr.apagada { opacity: .55; }

/* Un renglon que esta ahi para que se vea que existe y no porque haya algo que
   hacer con el: el profesional al que no se le debe nada. Esconderlo obligaria
   a preguntarse si falta o si esta en cero.

   Los datos se apagan; los botones de la fila NO. Apagar la fila entera dejaba
   la lupa medio borrada y se leia como deshabilitada, cuando de ese profesional
   igual se puede mirar el dia. */
.tabla-admin tr.apagada > td:not(.col-acciones) { opacity: .55; }

/* Un numero que ademas se puede tocar mantiene el color que tenia: en la
   columna de lo que falta cobrar, el dorado del enlace le sacaba justo la
   marca que dice que ahi hay algo pendiente. */
.en-rojo .como-enlace { color: inherit; }

/* Mi perfil: la cabecera con las iniciales y los datos en dos columnas. */
.cabeza-perfil {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.cabeza-perfil h3 { margin: 0; }

.avatar-perfil {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--dorado-suave);
  color: var(--dorado);
  font-size: 18px;
  font-weight: 600;
  flex: none;
}

.datos-perfil {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px 22px;
  margin: 0;
}

.dato-perfil dt {
  color: var(--texto-tenue);
  font-size: 11px;
  margin-bottom: 3px;
}

.dato-perfil dd { margin: 0; font-size: 13.5px; }

/* Cada permiso como una etiqueta: la lista se lee de un vistazo y no como un
   párrafo de claves separadas por comas. */
.permiso-chip {
  display: inline-block;
  padding: 3px 9px;
  margin: 2px 0;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  color: var(--texto-tenue);
  font-size: 11.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* La explicación de un campo, pegada a su campo.
 
   El problema era el espacio, no la tipografía: la explicación iba en un
   `<p class="nota">` suelto DESPUÉS del campo, con `margin-top: 18px`, o sea
   más cerca del rótulo del campo siguiente que del suyo propio. Se leía al
   revés, como el título del que venía abajo.
 
   Ahora va adentro del `<label>` y a cuatro píxeles de su campo. Mismo tamaño y
   mismo gris que cualquier `.nota` del sitio: no hace falta una tipografía
   nueva para esto, hacía falta que estuviera en el lugar correcto. */
.ayuda-campo {
  display: block;
  margin-top: 3px;
  color: var(--texto-tenue);
  /* Más chica que el rótulo, que es de 12. Antes era 12,5 y quedaba más
     grande que el título del campo: leído de arriba abajo, la explicación
     pesaba más que la cosa que explicaba. */
  font-size: 11px;
  line-height: 1.45;
  max-width: 62ch;
}

.ayuda-campo strong { color: var(--texto); }

/* El reset global deja los <a> del color del texto: un vínculo adentro de una
   ayuda no se distinguía de la prosa. Dorado para que se vea; subrayado no,
   que acá los links no van subrayados nunca. */
.ayuda-campo a { color: var(--dorado); }

.ayuda-campo a:hover { color: var(--dorado-fuerte); }

/* En un diálogo ancho la ayuda usa el ancho entero. Los 62 caracteres de arriba
   son el ancho cómodo de lectura de un párrafo, pero acá no hay párrafos: son
   una o dos líneas, y limitarlas las partía en tres renglones angostos con
   media caja vacía al lado. */
.modal-caja.ancha .ayuda-campo { max-width: none; }

/* La separación entre campos es la del resto del sitio: 18 píxeles, ni más ni
   menos, esté el campo solo o dentro de una grilla.
 
   En el sitio ese aire lo pone el `margin-bottom: 18px` del propio `input`, con
   los `.campo` en margen cero y las grillas en `row-gap: 0`. Acá hace falta
   correrlo del input a la etiqueta —el input queda en cero— porque si no la
   leyenda cae a dieciocho píxeles de su campo y parece el título del que sigue.
 
   El resultado es el mismo ritmo de siempre: pegada arriba a su campo,
   dieciocho abajo antes del próximo. Lo que cambia es quién pone el margen, no
   cuánto. */
.bloque-config .campo-modal {
  margin-top: 0;
  margin-bottom: 18px;
}

.bloque-config .campo-modal input,
.bloque-config .campo-modal select,
.bloque-config .campo-modal textarea { margin-bottom: 0; }

/* Y donde sea, no sólo en un bloque de configuración o adentro de un popup.

   El `textarea` faltaba en las dos listas y por eso el cuadro de texto del
   recordatorio se quedaba con SU margen de dieciocho, más los dieciocho de la
   etiqueta: la leyenda caía a treinta y seis píxeles de la caja que explica y a
   tres del rótulo de abajo. Leída así era el título del campo siguiente, que es
   exactamente lo que la regla vino a evitar.

   Escrito una vez y sin nombrar el contenedor, así el próximo formulario que
   use `.campo-modal` fuera de esos dos lugares nace bien y no hay que
   acordarse. */
.campo-modal:has(.ayuda-campo) { margin-bottom: 18px; }

.campo-modal:has(.ayuda-campo) > input,
.campo-modal:has(.ayuda-campo) > select,
.campo-modal:has(.ayuda-campo) > textarea { margin-bottom: 0; }

/* El caso simétrico: una nota ANTES de un campo.

   Es el mismo error visto del otro lado y volvió a pasar el 08/09/2026, en la
   tarjeta de WhatsApp: un párrafo que explica la conexión con Meta quedaba a
   tres píxeles del rótulo del campo de abajo, así que se leía como su
   explicación —Juan lo entendió como «el mensaje que se manda cuando falla la
   conexión», que no es—. La leyenda pega a lo suyo y el aire va contra lo que
   viene después, en las dos direcciones. */
.nota + .campo-modal,
.nota + label { margin-top: 18px; }

/* Y la leyenda suelta, sin `.campo-modal` que la envuelva: pasa en los paneles
   del asistente, donde el campo y su explicación son dos hermanos y nada más.
   Ahí el que la separaba era el propio campo con sus dieciocho de abajo, así
   que los entrega cuando tiene una leyenda pegada atrás. */
input:has(+ .ayuda-campo),
select:has(+ .ayuda-campo),
textarea:has(+ .ayuda-campo) { margin-bottom: 0; }

/* Y lo mismo adentro de un modal, donde el problema se ve peor porque los
   campos son varios seguidos: con el margen en el campo, la explicación caía a
   dieciocho píxeles de la caja que explica —más lejos de ella que del campo de
   abajo— y se leía como el título del que sigue. El aire pasa al bloque, así
   que la ayuda queda pegada a lo suyo y la separación entre campos es la misma
   de antes. */
.modal-cuerpo .campo-modal:has(.ayuda-campo) { margin-bottom: 18px; }

.modal-cuerpo .campo-modal:has(.ayuda-campo) > input,
.modal-cuerpo .campo-modal:has(.ayuda-campo) > select,
.modal-cuerpo .campo-modal:has(.ayuda-campo) > textarea { margin-bottom: 0; }

/* Los bloques de la pantalla de configuración. Uno por tema, separados, y cada
   uno con su propio botón de guardar: son cosas distintas y guardar el nombre
   de la clínica no tiene por qué guardar también los intervalos de la agenda.

   Sin `margin: auto`: desde que hay menú al costado, quien lo centra es la
   columna, y centrarse otra vez adentro lo dejaba corrido a la derecha. */
.bloque-config {
  max-width: 760px;
  margin: 0 0 20px;
  padding: 22px 26px;
}

/* El bloque que lleva la semana entera: siete columnas no entran en 760. */
.bloque-config.bloque-ancho { max-width: 1040px; }

/* En una ficha suelta —la sucursal— los bloques se centran en la pantalla.

   `.bloque-config` nace con `margin: 0 0 20px`, o sea pegado a la izquierda, y
   eso está bien en Configuración, donde la columna arranca al lado del menú
   lateral y todo queda alineado con él. En una ficha que ocupa el ancho entero
   no hay con qué alinearse: la tarjeta quedaba contra el borde izquierdo y
   media pantalla vacía a la derecha.

   Cada bloque se centra por su cuenta y conserva su ancho, así los 760 de los
   datos y los 1040 del horario quedan los dos al medio. */
.ficha-centrada > .bloque-config { margin-left: auto; margin-right: auto; }

/* El nombre del bloque y, al lado, la «i» que explica de qué se trata. Antes
   la explicación era un párrafo debajo del título: multiplicado por los doce
   bloques de esta pantalla, es una pantalla entera de texto que se lee una
   vez. */
.bloque-config h3 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 14px;
  /* Desde que un título puede llevar el interruptor de la sección a la derecha,
     los dos juntos no siempre entran en un renglón. Sin esto, el interruptor se
     salía de la tarjeta en vez de bajar. Un título solo no envuelve nunca, así
     que para el resto de los bloques no cambia nada. */
  flex-wrap: wrap;
}

.bloque-config .nota-suelta { margin: 0 0 18px; }

/* El mismo título con «i» al lado, fuera de la pantalla de configuraciones. */
.titulo-con-info { display: flex; align-items: center; gap: 7px; }
.bloque-config .nota { margin-top: 6px; }

/* El logo que está puesto, al lado de qué logo es. Con fondo claro siempre:
   un logo con fondo transparente sobre el tema oscuro no se ve. */
.logo-actual {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 6px 0 14px;
}

.logo-actual img {
  max-width: 220px;
  max-height: 90px;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 10px 14px;
  object-fit: contain;
}

.logo-actual small { display: block; margin-top: 3px; max-width: 320px; }

/* Los botones contra la derecha, en la misma fila que la imagen. Debajo y
   solos se comian un renglon entero de aire por nada. */
.logo-acciones {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

.logo-cual { flex: 1 1 auto; min-width: 0; }

/* Un `label` que se ve y se comporta como botón: es la forma de tener un
   selector de archivo con el estilo de la casa, porque el `input[type=file]`
   nativo no se puede estilar. */
.como-boton { cursor: pointer; display: inline-block; }

/* La barra de filtros del inventario. Los cuatro en un renglón, y se parten
   solos cuando la pantalla es angosta. Los `select` de acá no llevan el margen
   de abajo que tienen los de un formulario: no son un formulario. */
.filtros-inventario {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  max-width: 1200px;
  margin: 0 auto 4px;
  padding: 0 24px;
}

.campo-filtro {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 170px;
  flex: 1 1 170px;
  font-size: 12px;
  color: var(--texto-tenue);
}

.campo-filtro select { margin-bottom: 0; }

/* Apto, la radiografía y el tratamiento: todo en un renglón, que es como se
   piensa. Se parte recién cuando no entra. */
.renglon-apto {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
}

.rotulo-apto { font-size: 12.5px; color: var(--texto-tenue); }

/* Dos opciones que se excluyen: un solo control partido al medio, no dos
   redondelitos. Se ve de un vistazo cuál está puesta.

   NO es una píldora, y no por olvido: acá hay un tercer estado —«sin
   contestar»— que una píldora no puede mostrar. Se probó de las dos formas el
   30/08 y quedaron los botones.

   NO se llama `.segmento`: ese nombre ya era de los campos del seguimiento del
   plan —rótulo arriba, campo abajo— y ponerle acá un `display: inline-flex` se
   los rompió a todos, con los rótulos partidos en tres renglones.

   Y se llamaba `.dos-opciones` hasta que los antecedentes médicos necesitaron
   TRES —sí, no y «no sé»—. La regla nunca supo cuántos botones tenía adentro,
   así que servía igual; lo que no servía era el nombre. Se renombró en vez de
   agregar un `.tres-opciones` al lado: este sistema ya tuvo cinco nombres
   distintos para el mismo interruptor, y arreglarlo después costó una tarde. */
.opciones-en-linea {
  display: inline-flex;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--negro);
}

.opciones-en-linea button {
  padding: 6px 16px;
  border: 0;
  background: none;
  color: var(--texto-tenue);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background .12s, color .12s;
}

.opciones-en-linea button + button { border-left: 1px solid var(--borde); }
.opciones-en-linea button:hover { background: var(--dorado-suave); }

.opciones-en-linea button.puesta {
  background: var(--dorado);
  color: #fff;
  font-weight: 600;
}

/* Lo que falta contestar se marca en el control, no sólo en el aviso de
   arriba: con el diálogo largo, el aviso puede quedar fuera de la vista. */
/* El mismo rojo que usa `.error`, que es el de anulado. */
.opciones-en-linea.falta,
select.falta { border-color: var(--anulado); }

.evaluacion-apto .interruptor { margin: 0; white-space: nowrap; }

.evaluacion-apto .solo-si-apto[hidden] { display: none; }
.evaluacion-apto #rz-caja-tratamiento { margin-top: 12px; }

/* Lo que escribió el profesional, tal cual. Va entre comillas y en cursiva
   para que se lea como una cita y no como un campo del sistema: la lista sale
   de buscar una palabra en un texto libre, y quien llama tiene que poder ver
   el original y decidir por sí mismo. */
.tabla .dice-la-evolucion,
.dice-la-evolucion {
  display: block;
  margin: 3px 0 2px;
  padding-left: 8px;
  border-left: 2px solid var(--dorado-suave);
  color: var(--texto-tenue);
  font-size: 11.5px;
  font-style: italic;
  line-height: 1.45;
}

/* El resto del catálogo, plegado: son seiscientas que nunca se usaron y
   ocuparían toda la pantalla por nada. */
.plegable-catalogo { margin: 4px 0 14px; }

.plegable-catalogo > summary {
  cursor: pointer;
  color: var(--texto-tenue);
  font-size: 12.5px;
  padding: 4px 0;
}

/* Con setenta categorías, en una sola columna la lista es un rollo: en dos
   entra el doble en la misma altura. */
.lista-categorias.en-dos-columnas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 2px 16px;
}

/* El nombre de la categoría en el resumen es un enlace a su detalle. */
.ver-detalle-categoria {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.ver-detalle-categoria:hover { color: var(--dorado); }

/* La categoría deshabilitada, presente pero apagada: sus gastos viejos
   siguen acá, lo que no está es la opción de elegirla de nuevo. */
.categoria-oculta td { color: var(--texto-tenue); }

/* El lápiz de editar en las tablas de administración, del par de la
   papelera. */
/* Cada acción, adentro de su círculo.

   Dos cosas que estaban mal. El círculo existía pero sólo se veía al pasar por
   arriba, así que en reposo eran tres dibujos flotando sin decir dónde termina
   uno y empieza el otro. Y el contenido se apoyaba en la línea de base: el ✓ era
   un carácter y los otros dos SVG, así que quedaba más abajo. Con `inline-flex`
   se centra lo que sea que lleve adentro. */
.editar-detalle {
  width: 26px;
  height: 26px;
  /* Redondo SIEMPRE. Es un botón chico adentro de filas que son `flex`, y sin
     esto el vecino que no entra se lo come de ancho: los 26 se vuelven 19, el
     `border-radius: 50%` sigue obedeciendo y el círculo sale huevo. Se veía al
     pasarle el mouse, que es cuando aparece el borde y se nota la forma. */
  flex: none;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: 50%;
  background: none;
  color: var(--texto-tenue);
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

.editar-detalle:hover {
  color: var(--dorado);
  background: var(--dorado-suave);
  border-color: var(--dorado);
}

/* El buscador de gastos ocupa todo el hueco que le deja la barra.
   Con un ancho fijo el campo medía 220px adentro de una etiqueta de 473: los
   250px de sobra eran `<label>`, y un clic ahí —al lado del campo, para
   salirse— enfocaba el campo de nuevo, que es justo lo contrario de lo que
   quiere el que hace clic afuera. */
#buscar-gasto { margin: 0; }

/* Los encabezados que ordenan: parecen un título más, con la flecha cuando
   son el orden vigente. */
.ordenar-por {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.ordenar-por:hover { color: var(--dorado); }
.ordenar-por.activa { color: var(--texto); font-weight: 600; }

/* La tabla de citas del paciente: cada turno en un solo renglón. Nombres,
   estados y comentarios partidos en dos líneas desparejaban las filas y la
   tabla se leía a los saltos. */
.tabla-citas th,
.tabla-citas td { white-space: nowrap; }

/* Los largos se cortan con puntos suspensivos en vez de envolver: el motivo,
   el comentario y el profesional pueden venir kilométricos. */
.tabla-citas td {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tabla-citas .etiqueta { white-space: nowrap; }

/* Las celdas que se editan: parecen texto hasta que se pasa por encima, y
   ahí se ven como lo que son. */
.celda-editable {
  padding: 2px 6px;
  margin: -2px -6px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.celda-editable:hover {
  border-color: var(--borde);
  background: var(--dorado-suave);
}

/* El estado de un turno, en el historial de citas del paciente: se aprieta y
   se abre lo que le pasó a ese turno. */
.etiqueta.ver-historial {
  border: 0;
  font: inherit;
  cursor: pointer;
}

.etiqueta.ver-historial:hover { color: var(--dorado); }

/* Cuándo se agendó: la hora abajo, más chica, para no ensanchar la columna. */
.col-agendado small { display: block; }

/* --------------------------------- turnos a reprogramar (pantalla) */

/* El título de la pantalla, en la barra de arriba, al lado de los filtros. */
/* El total viaja con los controles en vez de quedarse al lado del título:
   pegado al buscador se lee como parte de lo que se está mirando —este mes,
   esta plata— y no como un dato suelto en el medio de la barra. */
/* El contador viaja siempre con las acciones, del lado derecho de la barra:
   pegado al botón principal se lee como parte de lo que se está mirando
   —estos usuarios, esta plata— y no como un dato suelto en el medio. Antes
   cada pantalla lo dejaba donde caía y no había dos iguales. */
.controles .contador { margin-left: auto; }
.controles .contador + .acciones-seccion { margin-left: 0; }

/* El título de la pantalla, primero en la barra, y los controles arrancan
   pegados a él.

   Antes llevaba `margin-right: auto` y el contador `margin-left: auto`: dos
   márgenes automáticos se reparten el hueco por igual, así que los controles
   quedaban flotando en el medio, lejos del título y lejos de la acción. El
   hueco lo empuja el contador solo, que es el que tiene que quedar contra el
   borde derecho junto al botón de la sección. */
.titulo-seccion {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  /* Y no se encoge: con la barra llena, el nombre de la sección se comía a sí
     mismo. La barra hace `wrap`, así que lo que no entra baja de renglón en vez
     de recortar lo primero que se lee. */
  flex-shrink: 0;
}

/* El título ocupa lo que mide y nada más: los controles arrancan pegados a él.

   Antes, arriba de 1400 píxeles, se le reservaba una columna fija de 280 para
   que Usuarios, Especialidades y Gastos tuvieran los botones en la misma
   columna. Se veía bien alineado entre secciones y mal en cada una: «Gastos»
   mide sesenta píxeles y los otros doscientos veinte quedaban en blanco, con
   los botones flotando lejos del título y lejos de la acción. Vale más que en
   cada pantalla lo primero que se lee esté junto a lo primero que se aprieta. */
/* El nombre de la sección no se corta nunca: con la barra llena, «Ingresos y
   egresos» aparecía como «Ingres…», que no es el nombre de nada. Lo que cede
   es la bajada, que explica y no nombra. */
.titulo-seccion strong {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}

.titulo-seccion small {
  font-size: 11px;
  color: var(--texto-tenue);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* La «i» que explica la sección: lo que queda a la vista de la leyenda que
   antes eran tres renglones arriba de la tabla. Tenue como la bajada del
   título —no es una acción, es una puerta a un texto— y dorada al apuntarla. */
.info-seccion {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 0;
  background: none;
  border: none;
  color: var(--texto-tenue);
  cursor: pointer;
}

.info-seccion:hover { color: var(--dorado); }
.info-seccion svg { display: block; width: 21px; height: 21px; }

#info-de-la-seccion { display: inline-flex; align-items: center; margin-left: 2px; }

/* La leyenda adentro del popup: es el mismo párrafo de antes, con el ancho de
   lectura que tenía cuando vivía en la pantalla. */
.leyenda { font-size: 13.5px; line-height: 1.6; }
.leyenda p { margin: 0 0 10px; }
.leyenda p:last-child { margin-bottom: 0; }

/* El arancel que se está mirando, pegado al título.

   Es un `.chip` y nada más: de ahí saca el fondo, el borde y el hover. Lo único
   propio es que no se estira cuando al encabezado le sobra ancho. */
.chip-arancel { flex: none; }

/* Cada fila es un paciente al que hay que llamar: el dato principal arriba y
   el de apoyo abajo, más chico. */
.tabla-reprogramar td { vertical-align: top; }
.tabla-reprogramar .sub {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--texto-tenue);
}

/* El nombre del paciente adentro de una tabla.
   Era un `<a>` pelado, y sin regla propia el navegador lo pintaba azul y
   subrayado: en una tabla de cien renglones eso es una columna de links de
   1996 al lado de texto gris. Va con el color del texto y un punto más de
   peso —es el ancla del renglón, lo primero que se busca— y el dorado
   aparece recién al pasar por arriba, que es el idioma del resto del
   sistema. La regla vivía scopeada a `.tabla-reprogramar`; se saca el scope
   porque la usan también las tareas del CRM y es la misma cosa. */
.link-paciente {
  color: inherit;
  text-decoration: none;
  font-weight: 500;
}

.link-paciente:hover { color: var(--dorado); }
.tabla-reprogramar .link-contacto { color: var(--texto); }
.tabla-reprogramar .link-contacto:hover { color: var(--dorado); }
.tabla-reprogramar .col-accion { width: 1%; white-space: nowrap; text-align: right; }
.tabla-reprogramar .turno-estado { display: inline-block; }

/* Los turnos caídos sin fecha nueva: la misma tarjeta que la cuenta de
   turnos, pero encendida, porque es algo que hay que hacer y no un dato. */
.aviso-reprogramar {
  flex: none;
  margin-left: auto;
  padding: 5px 14px;
  border-color: var(--anulado);
  background: var(--anulado-suave);
  color: var(--anulado);
  text-decoration: none;
  white-space: nowrap;
}

/* Todo en un renglon: es un aviso, no una estadistica. Apilado —el numero
   arriba y la palabra abajo— competia visualmente con los contadores de al
   lado, que si son estadisticas y se leen de esa forma. */
.aviso-reprogramar {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

/* Con la clase de la tarjeta adelante: `.tarjeta strong` vive mas abajo en el
   archivo y con la misma especificidad le ganaba, asi que el numero seguia
   saliendo en tamano de estadistica. */
.tarjeta.aviso-reprogramar strong {
  display: inline;
  font-size: 15px;
  line-height: 1;
  color: inherit;
}

.tarjeta.aviso-reprogramar small {
  font-size: 12px;
  line-height: 1;
  color: inherit;
}

/* El envoltorio del icono no aporta alto propio: solo sostiene el svg. */
.aviso-reprogramar #icono-reprogramar { display: flex; }

/* Del alto de la palabra que acompana, para que se lean como una sola cosa. */
.icono-advertencia {
  width: 14px;
  height: 14px;
  flex: none;
}
.aviso-reprogramar:hover { background: var(--anulado); color: #fff; }
.aviso-reprogramar:hover small { color: inherit; }

/* Con el aviso a la vista, el que empuja hacia la derecha es él. */
.aviso-reprogramar:not([hidden]) ~ .contador,
.aviso-reprogramar:not([hidden]) ~ #agendar { margin-left: 0; }

/* Los turnos pedidos por internet sin validar: la misma tarjeta que la de
   reprogramar —hereda todo de `.aviso-reprogramar`—, pero en dorado: es algo
   por hacer, no una alarma. Si están los dos, el segundo va pegado al primero. */
.aviso-online {
  border-color: var(--dorado);
  background: var(--dorado-suave);
  color: var(--dorado);
}
.aviso-online:hover { background: var(--dorado); color: #16161a; }
.aviso-online .icono-aviso { display: flex; }
.aviso-online .icono-aviso svg { width: 14px; height: 14px; }
.aviso-reprogramar:not([hidden]) ~ .aviso-online { margin-left: 0; }

/* La lista de pedidos por internet: cada renglón es un pedido, con el dato
   principal arriba y el de apoyo abajo, como en turnos a reprogramar. */
.tabla-online td { vertical-align: top; }
.tabla-online .sub {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--texto-tenue);
}
.tabla-online .sub.alerta { color: var(--ausente); }
.tabla-online .link-contacto { color: var(--texto); }
.tabla-online .link-contacto:hover { color: var(--dorado); }
.tabla-online .etiqueta { margin-left: 6px; vertical-align: 1px; }
.tabla-online .col-nota { max-width: 260px; }

/* El botón y las tarjetas van juntos a la derecha de la barra. Sin
   achicarse: el texto del botón no se parte en dos renglones. */
#agendar { flex: none; white-space: nowrap; }

/* La barra de la agenda va siempre en un solo renglón: cuando falta lugar
   se achica el selector de profesionales, no se baja nada a un segundo
   renglón que agranda el encabezado. */
#sistema > .controles { flex-wrap: nowrap; overflow-x: auto; }
#sistema > .controles #filtro-profesional { min-width: 130px; flex: 0 1 auto; }

/* El filtro de profesionales es un botón y no un `select`, porque se tildan
   varios a la vez. Se viste igual que un desplegable para que en la barra no
   se note la diferencia: mismo borde, mismo alto, misma flecha. */
#filtro-profesional {
  display: flex;
  align-items: center;
  /* El alto sale de igualar a los vecinos de la barra —el campo de fecha y
     el botón de hoy—, que es lo que se compara de un vistazo. */
  padding: 9px 36px 9px 13px;
  margin: 0;
  background: var(--negro);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.6 1.8 6 6.2 10.4 1.8' fill='none' stroke='%238a8a8a' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 12px 8px;
  transition: border-color 0.15s;
}

[data-tema="claro"] #filtro-profesional { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.6 1.8 6 6.2 10.4 1.8' fill='none' stroke='%236a6a72' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

#filtro-profesional:hover { border-color: var(--dorado); }
#filtro-profesional:disabled { cursor: default; opacity: 0.7; }

#rotulo-profesionales {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Con dos o más agendas, las iniciales en vez de los nombres: tres nombres
   enteros no entran en el campo, y cortados con puntos suspensivos no dicen
   quiénes son. Se superponen un poco, como las fichas de un mazo, para que se
   lean como un grupo y no como palabras sueltas. */
.iniciales-elegidos { display: flex; align-items: center; }

.inicial-profesional {
  flex: none;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--superficie);
  border-radius: 50%;
  background: var(--dorado-suave);
  color: var(--dorado);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.inicial-profesional + .inicial-profesional { margin-left: -7px; }

/* Cada agenda con su tilde: se marcan varias de una sentada y el menú se
   queda abierto hasta que se lo cierra. */
.menu-profesionales .opcion-tilde {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* La opción que está pero no aplica: se ve apagada y no responde. Esconderla
   haría pensar que el sistema no la tiene. */
.menu-profesionales .opcion-tilde:disabled {
  opacity: 0.45;
  cursor: default;
}

.menu-profesionales .opcion-tilde:disabled:hover { background: none; }

.tilde-opcion {
  flex: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--borde);
  border-radius: 4px;
  background: none;
}

.tilde-opcion.puesto {
  border-color: var(--dorado);
  background: var(--dorado) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 8'%3E%3Cpath d='M1 4.2 4 7.2 10 1.2' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 11px 8px;
}
#sistema > .controles .interruptor { white-space: nowrap; }
.contador { flex: none; }

.contador .tarjeta { padding: 5px 14px; min-width: 74px; white-space: nowrap; }
.contador .tarjeta strong { font-size: 16px; line-height: 1.2; }
.contador .tarjeta small { font-size: 10.5px; }

/* La fecha es texto y no un número: va sin cortar y un poco más chica. */
.tarjeta-fecha { min-width: 0; white-space: nowrap; }
.tarjeta-fecha strong { font-size: 14.5px; }

/* ---------------------------------------------------------- agenda: dia */

/* El encabezado NO es sticky a proposito: cuando lo era, se despegaba al
   hacer scroll y tapaba el primer turno de la columna. */

/* Una columna del día no pasa del ancho de dos de la semana —40% de la
   pantalla, que es lo que ocupan dos de cinco días—: con un solo profesional
   la agenda quedaba estirada de lado a lado y los turnos se leían como
   renglones sueltos en medio del vacío. Lo que hay se centra, con aire a los
   costados.

   Sin `gap`: las líneas que separan las columnas ahora son bordes de cada
   una. Con el truco de la separación pintada de fondo, ese fondo se veía
   también en el aire de los costados. */
#agenda.tiempo {
  display: flex;
  justify-content: center;
  align-items: stretch;
  border-top: 1px solid var(--borde);
  /* Sin scroll propio: `overflow-x: auto` le daba también scroll vertical
     —el navegador no deja uno sin el otro— y la página terminaba con dos
     barras. Con muchos profesionales scrollea la página, que es la barra
     que el usuario ya tiene en la mano. */
  overflow: visible;
}

/* Cada profesional en su columna y todas a la vista: al sumar profesionales
   las columnas se achican en vez de bajarse a otra fila, que era lo que
   hacía la grilla de antes con tres o más. Una o dos columnas no se estiran
   a toda la pantalla —con 40% alcanza y queda centrado—, y por abajo hay un
   piso: antes de hacerse ilegibles, la agenda scrollea a lo ancho.

   `container-type`: la columna es la vara de su contenido. Lo que no entra
   a lo ancho (los sobreturnos lado a lado, por ejemplo) se decide mirando
   el ancho real de la columna, no el de la pantalla. */
#agenda.tiempo .columna {
  flex: 1 1 0;
  /* Seis columnas por pantalla como mucho: a partir de ahí la agenda se va a
     lo ancho y se llega scrolleando. Repartidas entre más, las tarjetas se
     hacen ilegibles, y los 150px son el piso para pantallas chicas. */
  min-width: max(150px, calc((100% - 62px) / 6));
  /* Sin tope de ancho: lo que sobra después de la columna de horas se reparte
     entre las agendas que haya. Con dos, media pantalla cada una; con un tope
     quedaba una franja muerta a la derecha que no era de nadie. */
  container-type: inline-size;
}

/* Cuando no entran todas, se arranca desde la izquierda: centradas, la parte
   que se va por ese lado no se alcanza con el scroll. */
#agenda.tiempo.apretada { justify-content: flex-start; }

/* Y lo de arriba se queda quieto: al ir a buscar al último profesional, lo
   único que se mueve son las columnas.

   Van fijas y no pegadas: `sticky` necesita que la caja de alrededor sea más
   ancha que el elemento para tener por dónde deslizarse, y acá mide
   exactamente lo mismo que la pantalla. Al salirse del flujo dejan un hueco
   arriba, que el margen de la agenda devuelve. */
body.agenda-ancha .barra,
body.agenda-ancha #sistema > .controles {
  position: fixed;
  left: 0;
  width: 100%;
}

body.agenda-ancha .barra { top: 0; z-index: 20; }

body.agenda-ancha #sistema > .controles {
  top: var(--tope-dia, 58px);
  z-index: 19;
  background: var(--negro);
}

body.agenda-ancha #agenda { margin-top: var(--alto-barras, 122px); }

/* Con las dos barras fijas, la cabecera del profesional se apoya abajo de
   las dos y no solo de la primera: pegada a 58px quedaba escondida atrás de
   los botones del día.
 *
 * Y se mete dos píxeles por debajo en vez de apoyarse justo: el alto de las
 * barras tiene decimales, y al redondearlo quedaba una hendija de menos de un
 * píxel por la que se veían pasar los turnos. Solapadas no se nota —las dos
 * son opacas y la barra va por encima— y no hay redondeo que valga. */
body.agenda-ancha #agenda.tiempo .cabeza-horas,
body.agenda-ancha #agenda.tiempo .cabeza-profesional {
  top: calc(var(--alto-barras, 122px) - 2px);
}

/* --- la grilla horaria del día ---------------------------------------- */

/* La columna de horas, a la izquierda de todo. Ojo con el nombre: `.horas`
   a secas ya es de la pantalla de horarios del usuario. */
#agenda.tiempo .canal-horas {
  flex: none;
  width: 62px;
  background: var(--negro);
  border-left: 1px solid var(--borde);
  /* Las horas quedan clavadas a la izquierda: yendo a buscar al sexto
     profesional, sin ellas no se sabe a qué altura del día se está mirando.
     Se apoya en la pantalla, que es lo que scrollea. */
  position: sticky;
  left: 0;
  z-index: 7;
}

/* Arranca a la misma altura que las columnas: la cabecera del profesional
   tiene alto fijo en esta vista, justo para las dos líneas que trae. */
#agenda.tiempo .cabeza-horas,
#agenda.tiempo .cabeza-profesional {
  height: 64px;
  overflow: hidden;
}

/* El reloj es un botón: de él cuelga de cuánto es cada casillero. Lleva el
   número al lado para no tener que abrirlo sólo para saber en cuánto está. */
#agenda.tiempo .cabeza-horas {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 0;
  border: none;
  border-bottom: 1px solid var(--borde);
  background: var(--carbon);
  color: var(--texto-tenue);
  cursor: pointer;
}

#agenda.tiempo .cabeza-horas:hover { color: var(--dorado); }

#agenda.tiempo .cabeza-horas small {
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

#agenda.tiempo .icono-reloj { width: 19px; height: 19px; }

#agenda.tiempo .marcas { position: relative; }

/* Una marca por casillero, cada una adentro de su cuadradito: el renglón
   de las 13:40 dice 13:40. La hora en punto va más grande, de ancla. */
#agenda.tiempo .marca-hora {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--paso-fino, 42px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  color: var(--texto-tenue);
}

#agenda.tiempo .marca-hora.en-punto {
  font-size: 13px;
  font-weight: 600;
  color: var(--texto);
}

/* El área de tiempo: las celdas se apoyan por hora, y de fondo la grilla
   del intervalo de atención: una línea suave cada diez minutos (39px con
   ESCALA_DIA en 3,9) y una más marcada cada veinte (78px), que es lo que
   dura el turno típico. Las mismas líneas corren por el canal de horas, así
   cada renglón nace en su hora y cruza toda la agenda. */
.bloques.tiempo,
#agenda.tiempo .marcas {
  /* Las líneas bajan los mismos seis píxeles que las tarjetas: ese es el
     aire de arriba, el mismo que separa una tarjeta de la siguiente. El
     desplazamiento va acá y no en un `padding`, porque las celdas están
     posicionadas en absoluto y un padding no las movería. */
  background-position: 0 6px;
  background-image:
    repeating-linear-gradient(
      to bottom,
      var(--linea-grilla) 0, var(--linea-grilla) 1px,
      transparent 1px, transparent var(--paso-grueso, 84px)),
    repeating-linear-gradient(
      to bottom,
      var(--linea-grilla-suave) 0, var(--linea-grilla-suave) 1px,
      transparent 1px, transparent var(--paso-fino, 42px));
}

.bloques.tiempo {
  display: block;
  position: relative;
  padding: 0;
}

.bloques.tiempo .celda {
  position: absolute;
  /* El reparto lo pone `repartirAncho()`: sin nada que compartir es cero de
     cada lado y la celda ocupa la columna entera. */
  left: calc(var(--izq, 0%) + 4px);
  right: calc(var(--der, 0%) + 4px);
  /* El aire entre tarjetas: sin esto quedaban pegadas borde con borde y se
     leían como una sola tarjeta larga. Seis píxeles en total, el mismo que
     separa las tarjetas en la vista de la semana, y repartidos por igual: la
     tarjeta queda centrada en su casillero, a la misma distancia de la línea
     de arriba que de la de abajo. */
  padding-top: 3px;
  padding-bottom: 3px;
}

/* Adentro, cada pieza llena su celda: el alto ya lo puso la duración. */
.bloques.tiempo .celda > .turno,
.bloques.tiempo .celda > .hueco,
.bloques.tiempo .celda > .almuerzo,
.bloques.tiempo .celda > .fila-sobreturno {
  height: 100%;
  margin: 0;
}

/* El teléfono y el estado van siempre apoyados en el borde de abajo, dure
   lo que dure el turno: en una tarjeta alta quedaban flotando en el medio, y
   en una de veinte minutos rozando el borde. Con la tarjeta en columna, el
   pie se empuja al fondo y el resto queda arriba. */
.bloques.tiempo .turno {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* El nombre lleva a la ficha del paciente, así que tiene que medir lo que
   mide el nombre. Como hijo de una columna flexible se estiraba a lo ancho
   de la tarjeta, y un clic en el medio —donde no hay texto— abría la ficha
   en vez del plan de tratamiento. */
.bloques.tiempo .turno > .turno-paciente { align-self: flex-start; }
.bloques.tiempo .celda-corta .turno > .turno-paciente { align-self: center; }

/* El filtro tapa la tarjeta también acá: `.turno.oculto { display: none }`
   perdía contra la regla de arriba, que es más específica. */
.bloques.tiempo .turno.oculto { display: none; }

.bloques.tiempo .turno .turno-pie { margin-top: auto; }

.bloques.tiempo .hueco { padding-top: 2px; padding-bottom: 2px; }

/* Mirando el día de a media hora o de a una hora, la tarjeta es una barra: no
   hay lugar ni para el renglón entero. Primero se va el estado y se aprieta el
   nombre; después se va el nombre también y queda la barra de color, que
   igual dice a qué hora es y de quién —el globo lo cuenta— y se sigue
   pudiendo abrir y arrastrar. */
/* Centrado y no apoyado arriba: en una tarjeta de veintiséis píxeles el
   renglón entra justo, y arrimado al borde de arriba quedaban dos píxeles de
   un lado y siete del otro —se leía torcido—. */
.bloques.tiempo .celda-minima .turno,
.bloques.tiempo .celda-tira .turno {
  justify-content: center;
}

.bloques.tiempo .celda-minima .turno {
  padding-top: 0;
  padding-bottom: 0;
  gap: 6px;
}

.bloques.tiempo .celda-minima .turno-paciente { font-size: 11.5px; }
.bloques.tiempo .celda-minima .turno-estado { display: none; }

.bloques.tiempo .celda-tira .turno {
  padding: 0 8px;
  overflow: hidden;
}

.bloques.tiempo .celda-tira .turno-estado { display: none; }

/* En una tira queda el nombre y nada más, chiquito: antes se iba también y
   quedaba una barra de color muda. De quién es el turno no se deduce de
   ningún otro lado; la hora sí, de dónde está la tarjeta en la grilla. */
.bloques.tiempo .celda-tira .turno-paciente {
  margin: 0;
  font-size: 10.5px;
  line-height: 1.1;
}

.bloques.tiempo .celda-tira .turno-cuando,
.bloques.tiempo .celda-tira .marca-sobreturno { display: none; }

/* El casillero libre, opaco: la grilla dibuja sus líneas en el fondo de la
   columna, y con el casillero medio transparente pasaban por encima de la
   etiqueta de la hora —una raya cruzando el rato libre, como si estuviera
   partido—. Es el mismo color de siempre, calculado contra el fondo en vez
   de apoyado sobre él. */
.bloques.tiempo .hueco {
  background: var(--hueco-fondo);
}

.bloques.tiempo .hueco:hover {
  background: var(--hueco-hover);
}

/* Y el almuerzo igual: la línea de la grilla lo cruzaba por el medio como
   si estuviera partido en dos. */
.bloques.tiempo .almuerzo {
  background: var(--almuerzo-fondo);
}

/* Menos el bloqueo, que lleva su rayado. Va acá para ganarle a la regla de
   arriba, que le pondría el fondo liso del almuerzo. */
.bloques.tiempo .almuerzo.bloqueo {
  background-color: var(--bloqueo-fondo);
  background-image: repeating-linear-gradient(
    45deg,
    var(--bloqueo-raya) 0 7px,
    transparent 7px 14px);
}

.bloques.tiempo .almuerzo.bloqueo[data-bloqueo]:hover {
  background-color: var(--bloqueo-fondo-hover);
  background-image: repeating-linear-gradient(
    45deg,
    var(--bloqueo-raya-hover) 0 7px,
    transparent 7px 14px);
}

/* El día en que no se atiende no: eso no es una tarjeta sino la columna
   entera pintada, y tapar la grilla ahí sería borrar las horas de un día
   completo. Se mantiene apoyado, con la grilla a la vista por detrás. */
.bloques.tiempo .almuerzo.dia-cerrado { background: var(--anulado-suave); }

/* Las dos horas de una jornada, una al lado de la otra: son el principio y
   el final de lo mismo y apiladas se leen como dos preguntas sueltas. */
.rejilla.rejilla-horario { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Salvo al pasarle por encima: ahí sí se pinta entera y tapa las líneas, que
   es la señal de que esa columna se puede apretar para habilitarle el día. */
.bloques.tiempo .almuerzo.dia-cerrado.habilitable { cursor: pointer; }

.bloques.tiempo .almuerzo.dia-cerrado.habilitable:hover {
  background: var(--almuerzo-fondo);
  border-style: solid;
}

/* El globo del turno: lo que no entra en la ficha. Se abre al apoyar el mouse
   y alcanza para saber si hace falta abrirla o no.

   Fijo al viewport, como el cartel: se ubica con las medidas de la pantalla y
   con el scroll se esconde, así que no necesita seguir a la página. */
.globo-turno {
  position: fixed;
  z-index: 40;
  min-width: 230px;
  max-width: 320px;
  padding: 12px 14px;
  background: var(--superficie2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

/* El nombre se ve igual en los dos: es lo mismo, y con dos tamaños parecía
   que el globo dijera una cosa y el cartel otra. */
.globo-nombre { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; }

.globo-datos { margin: 0; display: flex; flex-direction: column; gap: 5px; }

.globo-fila { display: flex; gap: 10px; align-items: center; }

/* El comentario puede llevar varios renglones: ahí el ícono se queda arriba,
   a la altura del primero, y no flotando en el medio del texto. */
.globo-nota { align-items: flex-start; }
.globo-nota dt { margin-top: 1px; }

/* El ícono en lugar del rótulo: una columna angosta y pareja, para que los
   datos arranquen todos en la misma línea. */
.globo-fila dt {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  color: var(--texto-tenue);
}

.globo-fila dt svg { width: 14px; height: 14px; }

.globo-fila dd {
  margin: 0;
  font-size: 12.5px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}

/* El color del motivo o del estado, como una mancha al lado del nombre. Un
   borde tenue para que los muy claros —un celeste pálido— no desaparezcan
   sobre el fondo del globo. */
.punto-color {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(128, 128, 128, 0.35);
}

/* El comentario puede ser largo: se lee entero, en varios renglones. */
.globo-nota dd { white-space: pre-wrap; }

/* La ficha en limpio: el nombre a la izquierda y el horario contra el borde
   derecho, en un solo renglón que se achica con la grilla. */
.turno-quien {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

/* Con alto de sobra el nombre usa varios renglones en vez de cortarse en el
   primero mientras abajo sobra tarjeta. Cuántos, según lo que mida: es lo que
   ya dicen las clases de tamaño que le pone la grilla. */
/* Con alto de sobra el nombre usa varios renglones en vez de cortarse en el
   primero mientras abajo sobra tarjeta. Cuántos lo dice `--renglones`, que
   pone la grilla al dibujar: es la única que sabe cuánto mide la tarjeta. */
.turno-quien .turno-paciente {
  margin: 0;
  min-width: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--renglones, 1);
  line-clamp: var(--renglones, 1);
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Compartiendo el ancho, el nombre se lleva la tarjeta entera y la hora pasa
   abajo: al lado le dejaba cuarenta píxeles y todos los nombres terminaban en
   «Lor…». */
.bloques.tiempo .celda[data-carriles]:not([data-carriles="1"]) .turno-quien,
.bloques.tiempo .fila-sobreturno .turno-quien {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

/* Y si además es baja, ahí abajo no hay lugar: se va la hora, que es lo
   prescindible. */
.bloques.tiempo .celda-corta[data-carriles]:not([data-carriles="1"]) .turno-cuando,
.bloques.tiempo .celda-corta .fila-sobreturno .turno-cuando { display: none; }

.turno-cuando {
  flex: none;
  color: var(--texto-tenue);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------------------------------------- el cartel de una cita */

/* Los datos arriba y las acciones abajo, con el mismo aire que el globo del
   hover: es la misma información, sólo que acá se puede tocar. */
.cita-cabeza {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 12px 8px;
}

/* `.menu-turno button` estira todo botón a lo ancho del menú y le pone su
   propio relleno, que es lo que corresponde en una lista de opciones. Acá no:
   son botones que conviven en una línea, y estirados se empujaban unos a otros
   fuera del cartel. Va con el peso del menú adelante para poder ganarle. */
.menu-turno .cita-cabeza button,
.menu-turno .cita-datos button,
.menu-turno .cita-acciones button {
  width: auto;
  display: inline-flex;
  padding: 0;
}

/* `.menu-turno button` le pone a todo botón el borde, el radio y el color del
   menú, y le ganaba a `.cita-icono` por especificidad. Va todo junto acá, con
   el peso del menú adelante, para que el círculo se vea. */
.menu-turno .cita-cabeza button.cita-icono {
  width: 28px;
  height: 28px;
  /* El trazo del círculo, del color de la letra tenue y no del borde de las
     cajas: al lado del tacho, que va en rojo, un gris de fondo casi no se veía
     y la cruz parecía flotar sin botón. */
  border: 1px solid var(--texto-tenue);
  border-radius: 50%;
  color: var(--texto-tenue);
}

.menu-turno .cita-cabeza button.cita-icono:hover {
  border-color: var(--dorado);
  background: var(--dorado-suave);
  color: var(--dorado);
}

/* El tacho, rojo siempre: es el único de los dos que no se puede deshacer, y
   avisarlo recién en el hover es avisar tarde. */
.menu-turno .cita-cabeza button.cita-anular {
  color: var(--anulado);
  border-color: var(--anulado);
}

.menu-turno .cita-cabeza button.cita-anular:hover {
  color: var(--anulado);
  border-color: var(--anulado);
  background: var(--anulado-suave);
}

/* Y el aire de la pastilla del hover, que el relleno del menú también pisaba. */
.menu-turno .cita-cabeza button.cita-nombre { padding: 2px 6px; }

.menu-turno .cita-cabeza button.cita-plan {
  padding: 3px 11px;
  border: 1px solid var(--borde);
  border-radius: 999px;
}

.menu-turno .cita-cabeza button.cita-plan:hover {
  border-color: var(--dorado);
  background: var(--dorado-suave);
}
.menu-turno .cita-datos button.cita-linea { padding: 3px 7px; }

/* `min-width: 0` y el nombre adentro de su propio span: sin eso, un nombre
   largo partía el botón en tres renglones en vez de cortarse con puntos. */
/* Se aprieta el nombre y nada más. Ocupando el renglón entero, un clic en el
   vacío de la derecha también abría la ficha, que no es lo que se quiso. */
.cita-nombre {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.cita-nombre span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* El hover de todo lo que se aprieta adentro del cartel: la pastilla se
   enciende debajo. Con dorado y subrayado parecían enlaces a otra pantalla, y
   salvo el nombre ninguno lleva a ningún lado: abren su lista ahí mismo. */
.cita-nombre,
.cita-linea {
  border-radius: 6px;
  transition: background 0.12s ease;
}

.cita-nombre { padding: 2px 6px; margin-left: -6px; }
.cita-linea { padding: 3px 7px; margin-left: -7px; }

.cita-nombre:hover,
.cita-linea:hover { background: var(--superficie); }

.cita-nombre:hover .icono-salir { opacity: 1; }

/* Con el peso del menú adelante: `.menu-turno button` le pone a todo botón la
   letra del menú —doce y medio, normal— y al nombre le ganaba. */
.menu-turno .cita-cabeza button.cita-nombre { font-size: 14px; font-weight: 600; }

/* El nombre y el plan van juntos y empujan a los dos botones contra el borde
   derecho; el aire que sobra queda entre el plan y ellos. */
.cita-titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  /* Todo el aire que sobre, entre el título y los botones. Con
     `space-between` el sobrante se repartía también entre el tacho y la cruz,
     y quedaban dos botones sueltos en vez de una botonera. */
  margin-right: auto;
  flex: 0 1 auto;
}

/* La raya: separa dos cosas del mismo renglón que no son lo mismo —quién
   viene y a qué tratamiento pertenece este turno—. */
.cita-separador {
  flex: none;
  width: 1px;
  height: 15px;
  background: var(--borde);
}

/* El plan, como pastilla: se ve que es apretable sin tener que pasarle por
   encima, y se distingue del nombre, que es texto. */
/* La pastilla se muestra entera mientras no pase de poco menos de la mitad
   del renglón; el que cede el lugar es el nombre, que además se lee entero en
   el globo de ayuda y en la tarjeta de la grilla. */
.cita-plan {
  flex: 0 0 auto;
  min-width: 0;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
}

/* El nombre del plan solo: decir «Plan:» adelante era gastar la mitad de la
   pastilla en repetir lo que el globo de ayuda ya explica. */
.cita-plan { color: var(--texto); font-weight: 500; }

.cita-plan.sin-plan {
  color: var(--texto-tenue);
  font-weight: 400;
  font-style: italic;
}
.icono-salir { width: 13px; height: 13px; flex: none; opacity: 0.6; }

/* Los dos botones de la esquina: anular y cerrar, del mismo tamaño y pegados
   al borde derecho. El círculo se ve siempre —dibujado, no sólo al pasarle por
   encima— porque un ícono suelto en una esquina no se lee como un botón hasta
   que alguien prueba. */
.cita-icono {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: 50%;
  background: none;
  color: var(--texto-tenue);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.cita-icono svg { width: 15px; height: 15px; }



.cita-datos {
  margin: 0;
  padding: 0 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* El estado, en una línea como los demás datos: el color y el nombre. Se
   toca y ahí sí se abre la lista para cambiarlo; desplegada de entrada se
   comía media pantalla de cartel para algo que no siempre se cambia. */
.cita-linea {
  display: flex;
  align-items: center;
  gap: 7px;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}

.cita-estado-actual:hover { color: var(--dorado); }

/* En la lista, cada estado con su punto delante. */
.menu-turno .con-punto {
  display: flex;
  align-items: center;
  gap: 9px;
}

.cita-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 14px 12px;
  border-top: 1px solid var(--borde);
}

.cita-acciones .chip { flex: none; }

/* El cartel es más ancho que un menú de opciones: adentro entran una fecha
   larga, el nombre de un plan y un apellido doble. El ancho exacto lo pone la
   regla del final del archivo; acá va sólo el piso. */
.menu-turno:has(.cita-cabeza) { min-width: 300px; }

/* El turno corto, en un solo renglón: el nombre y su horario.
   `stretch` y no `center`: el renglón tiene que ocupar el ancho de la ficha
   para que el nombre arranque contra el borde izquierdo y el horario quede
   contra el derecho. Centrado, los dos quedaban flotando en el medio. */
.bloques.tiempo .celda-corta .turno {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding-top: 2px;
  padding-bottom: 2px;
}

.bloques.tiempo .celda-corta .turno-hora,
.bloques.tiempo .celda-corta .turno-tel,
.bloques.tiempo .celda-corta .nota-turno,
.bloques.tiempo .celda-corta .rueda-turno { display: none; }

.bloques.tiempo .celda-corta .turno-paciente {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bloques.tiempo .celda-corta .turno-pie { margin: 0; flex: none; }

/* En el calendario los sobreturnos van siempre lado a lado repartiéndose la
   columna, como cualquier calendario con dos citas a la misma hora. */
.bloques.tiempo .fila-sobreturno {
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  grid-template-columns: none;
}

.bloques.tiempo .fila-sobreturno .turno { height: 100%; overflow: hidden; }

/* Angostas les sobra el teléfono: el nombre y el estado son lo que se lee. */
/* Compartiendo el ancho sobra el telefono: el nombre y el estado son lo que
   se lee de un vistazo. `--carriles` lo pone `repartirAncho()`. */
.bloques.tiempo .celda[data-carriles]:not([data-carriles="1"]) .turno-tel { display: none; }

/* La celda de un turno que el filtro escondió: sin esto queda un rectángulo
   invisible del ancho de la columna tapando lo que hay abajo. */
.bloques.tiempo .celda-tapada { display: none; }

/* Al filtrar, fuera lo que no es un turno: igual que la vista de siempre. */
#agenda.filtrando .celda-libre,
#agenda.filtrando .celda-almuerzo { display: none; }

/* Y con el interruptor de «huecos libres» apagado, los casilleros vacíos se
   van en las dos vistas. La grilla del día queda igual: lo que cambia es que
   no se ven los cuadraditos, y los turnos se leen sin ese ruido. */

.columna {
  background: var(--negro);
  min-height: 200px;
  border-left: 1px solid var(--borde);
}

.columna:last-child { border-right: 1px solid var(--borde); }

.cabeza-profesional {
  background: var(--carbon);
  padding: 13px 14px;
  border-bottom: 1px solid var(--borde);
}

/* Dos renglones y no tres: el nombre con su horario al lado, contra el
   borde derecho, y abajo el tiempo libre. Apilados, tres datos cortos se
   comían una franja de cada columna. */
.cabeza-profesional-linea {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.cabeza-profesional strong {
  font-weight: 500;
  font-size: 14px;
  /* Si el nombre es largo, se corta él y no empuja el horario. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cabeza-profesional small {
  color: var(--texto-tenue);
  font-size: 11.5px;
  white-space: nowrap;
}
.cabeza-profesional.compacta { background: transparent; border-bottom: none; padding: 12px 12px 4px; }

.libre-total {
  display: inline-block;
  margin-top: 3px;
  font-size: 11px;
  color: var(--dorado);
}

.bloques { padding: 8px; display: flex; flex-direction: column; gap: 6px; }

/* El almuerzo, en su lugar de la jornada: un renglón para que se entienda
   por qué ahí no hay nada y no se puede agendar. */
.almuerzo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 10px;
  border: 1px dashed rgba(140, 74, 74, 0.5);
  border-radius: 6px;
  background: var(--anulado-suave);
  color: var(--anulado);
  font-size: 11px;
}

.almuerzo span:first-child { font-size: 11.5px; font-weight: 500; }

/* El día en que no atiende nadie: la jornada entera cerrada, de arriba abajo.
   Se ve la misma grilla que un día con turnos —las horas, las columnas, los
   nombres— y adentro nada que tocar, porque no hay nada que agendar.

   El texto va arriba y no centrado: en una columna de ochocientos píxeles,
   centrado quedaba flotando en el medio de la nada y lejos del nombre de
   quién es. Arriba se lee en el primer casillero, pegado a su cabecera. */
.almuerzo.dia-cerrado {
  height: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1px;
  cursor: default;
}

.almuerzo.dia-cerrado strong { font-size: 12px; font-weight: 500; }
.almuerzo.dia-cerrado small { color: inherit; font-size: 11.5px; font-weight: 500; }

/* El «No atiende» del encabezado, del mismo rojo que la franja cerrada de
   abajo: es la misma información dicha dos veces, y en gris se leía como un
   horario más. */
.cabeza-profesional .no-atiende { color: var(--anulado); }

/* Lo que se borra junto con el turno, dicho antes de apretar. */
.aviso-plan-vacio { color: var(--anulado); }

/* Buscar dentro de la agenda: los turnos que no son se van, y los huecos
   libres también —mientras se busca a una persona, son ruido—. Lo mismo el
   profesional que ese día no la atiende. */
.turno.oculto,
.bloque-profesional.oculto,
.columna.oculto { display: none; }
/* El turno que quedó adentro de un bloqueo. No se saca solo: se avisa, y de
   ahí mismo se lo manda a otro día. */
.turno-en-bloqueo {
  display: block;
  margin-top: 6px;
  padding: 4px 7px;
  border: 1px solid var(--anulado);
  border-radius: 5px;
  background: var(--anulado-suave);
  color: var(--anulado);
  cursor: pointer;
  font-size: 10.5px;
  line-height: 1.3;
}

.turno-en-bloqueo:hover { background: var(--anulado); color: #fff; }

/* Turnos que quedaron adentro de un bloqueo: el aviso arriba de los
   horarios, y la lista donde se decide qué hacer con cada uno. */
.aviso-conflictos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 12px 16px;
  border: 1px solid var(--anulado);
  border-radius: var(--radio);
  background: var(--anulado-suave);
  color: var(--anulado);
  font-size: 13px;
}

.aviso-conflictos .chip { color: var(--texto); }

#modal-mostrar .modal-caja.conflictos { width: min(1060px, 96vw); }

.tabla-conflictos .col-acciones { display: flex; gap: 8px; justify-content: flex-end; }
.tabla-conflictos .sin-dato { display: block; }

.lista-pisados {
  margin: 10px 0 0;
  padding-left: 18px;
  font-size: 12.5px;
  line-height: 1.6;
}

/* Los bloqueos, columna por columna. El de todo el día ocupa las dos horas:
   no hay dos horas que mirar. */
/* Con el tope de 1200px que traen las tablas, en una pantalla ancha le quedaba
   todo el aire de un solo lado. Centrada, el aire se reparte. */
.tabla-bloqueos { margin-inline: auto; }
.tabla-bloqueos .col-acciones { width: 56px; }

.tabla-bloqueos th {
  color: var(--texto-tenue);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tabla-bloqueos td { font-variant-numeric: tabular-nums; }
.tabla-bloqueos .todo-el-dia { color: var(--texto-tenue); }

/* Las tres salidas de un turno, arriba del diálogo: mover, pasar o anular. */
.solapas-turno {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 14px 0 4px;
}

.solapas-turno .chip { padding: 7px 13px; font-size: 12.5px; }

/* Quién puede tomar el turno. El que no puede se ve igual, con el motivo.
   Cada uno en un renglón —nombre a la izquierda, el porqué a la derecha— para
   que entren cinco o seis sin tener que empezar a bajar la lista. */
.lista-profesionales {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 300px;
  margin-top: 12px;
  overflow-y: auto;
}

.profesional {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 7px 11px;
  background: var(--superficie2);
  border: 1px solid var(--borde);
  border-radius: 8px;
  color: var(--texto);
  cursor: pointer;
  text-align: left;
}

.profesional strong { font-size: 12.5px; font-weight: 500; white-space: nowrap; }

.profesional small {
  color: var(--texto-tenue);
  font-size: 11px;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profesional:hover:not(:disabled) { border-color: var(--dorado); }
.profesional:disabled { opacity: 0.5; cursor: not-allowed; }

.profesional.elegido {
  border-color: var(--dorado);
  background: var(--dorado-suave);
}

.profesional.elegido strong { color: var(--dorado); }

/* El que ese día no atiende igual se puede elegir: se le abre el día. */
.profesional.sin_horario small,
.profesional.fuera_de_horario small { color: var(--anulado); }

.horas-cubrir { display: flex; gap: 12px; }
.horas-cubrir .campo-modal { flex: 1; }

/* Lo mismo para todos los turnos de la lista, de una vez. */
.acciones-masa {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 14px 0 4px;
  padding: 10px 12px;
  background: var(--superficie2);
  border-radius: var(--radio);
  font-size: 12.5px;
  color: var(--texto-tenue);
}

/* Los horarios que le entran a un turno el día que se lo quiere mover. */
.huecos-libres {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 220px;
  margin-top: 10px;
  overflow-y: auto;
}

.hueco-libre {
  padding: 6px 12px;
  background: var(--carbon);
  border: 1px solid var(--borde);
  border-radius: 20px;
  color: var(--texto);
  cursor: pointer;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.hueco-libre:hover { border-color: var(--dorado); color: var(--dorado); }

.hueco-libre.elegido {
  background: var(--dorado);
  border-color: var(--dorado);
  color: var(--negro);
  font-weight: 500;
}

/* El bloqueo programado, rayado: el día que el profesional no atiende es del
   mismo rojo, y liso contra liso los dos se leían igual. El rayado es la
   convención de «acá no se pasa» y no hace falta explicarlo.

   Las rayas van en gris y el rojo queda para el borde y el texto: en rojo
   sobre rojo el rayado competía con lo que hay escrito adentro.

   El fondo va opaco debajo de las rayas: la celda se apoya sobre la grilla, y
   con un fondo translúcido las líneas de las horas se veían cruzando el
   bloqueo de lado a lado. */
.almuerzo.bloqueo {
  border-style: solid;
  border-color: var(--anulado);
  background-color: var(--bloqueo-fondo);
  background-image: repeating-linear-gradient(
    45deg,
    var(--bloqueo-raya) 0 7px,
    transparent 7px 14px);
}

/* La hora entera en un renglón: «10:40 – 11:00» partido al medio no se lee. */
.almuerzo.bloqueo > span:first-child { white-space: nowrap; }

/* El bloqueo con id se puede desbloquear con un clic. */
.almuerzo.bloqueo[data-bloqueo] { cursor: pointer; }

/* Al pasarle por encima se pone más oscuro, con las rayas más marcadas. Antes
   el hover era un rojo translúcido que dejaba ver la grilla por debajo: se
   leía como si el bloqueo se estuviera borrando, justo lo contrario de lo que
   pasa al apretarlo. */
.almuerzo.bloqueo[data-bloqueo]:hover {
  background-color: var(--bloqueo-fondo-hover);
  background-image: repeating-linear-gradient(
    45deg,
    var(--bloqueo-raya-hover) 0 7px,
    transparent 7px 14px);
}

#agenda.filtrando .huecos,
#agenda.filtrando .almuerzo,
#agenda.filtrando .sin-horas { display: none; }

/* La lupa que abre la búsqueda, al lado de los interruptores. */
.lupa-agenda {
  /* Posicionado para el puntito que avisa que hay un filtro puesto. */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: none;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  color: var(--texto-tenue);
  cursor: pointer;
}

.lupa-agenda:hover { border-color: var(--dorado); color: var(--dorado); }

.lupa-agenda.abierta {
  background: var(--dorado-suave);
  border-color: var(--dorado);
  color: var(--dorado);
}

.icono-lupa { width: 17px; height: 17px; }

/* En su propio renglón, justo encima de las columnas: es lo que filtra, así
   que va pegado a lo filtrado y no mezclado con la fecha y la vista.

   Centrado y bajito: es un campo de paso —se escribe un apellido y se
   borra—, no un formulario. */
/* Adentro de la cabecera, en línea con los íconos: ya no es una barra propia
   debajo. Sin `padding` y con un ancho medido, así no se lleva el renglón
   entero ni empuja a los botones de la derecha a una segunda fila.

   Cerrada mide cero y no se esconde con `hidden`: de `display: none` no hay
   transición que salga, y el campo aparecía de golpe con la lupa saltando a su
   lugar nuevo. Lo que se anima es el ancho de esta caja, así que el campo se
   abre de izquierda a derecha y va empujando los íconos mientras crece. */
.barra-filtro {
  display: flex;
  align-items: center;
  padding: 0;
  width: 0;
  overflow: hidden;
  /* Sin encogerse: la cabecera es flex y va llena, y con `overflow: hidden` el
     mínimo automático de un ítem pasa a ser cero. El navegador aprovechaba eso
     y le comía los 250px enteros, así que el campo se abría midiendo nada. */
  flex: none;
  transition: width 220ms ease, margin-right 220ms ease;
}

.barra-filtro.abierta { width: 250px; margin-right: 4px; }

/* El campo mantiene su ancho mientras la caja crece: si se estirara con ella,
   el texto de adentro se vería aplastándose y no abriéndose. */
.barra-filtro input[type="search"] {
  width: 250px;
  min-width: 250px;
  margin: 0;
  opacity: 0;
  transition: opacity 160ms ease 60ms, visibility 0s;
}

.barra-filtro.abierta input[type="search"] { opacity: 1; }

/* Cerrado no se puede tabular hasta él: un campo de ancho cero sigue estando
   ahí para el teclado, y llegar tabulando a algo que no se ve es quedarse
   escribiendo en la nada. La visibilidad se apaga recién cuando la caja
   termina de cerrarse, así el texto se va recortando con ella y no desaparece
   de golpe. */
.barra-filtro:not(.abierta) input[type="search"] {
  visibility: hidden;
  transition: opacity 140ms ease, visibility 0s linear 220ms;
}

/* A quien prefiere no ver movimiento, el campo le aparece y listo. */
@media (prefers-reduced-motion: reduce) {
  .barra-filtro,
  .barra-filtro input[type="search"] { transition: none; }
}

.barra-filtro[hidden] { display: none; }

.filtro-agenda {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

/* La cruz propia, para cualquier campo de búsqueda del sitio: la del
   navegador es un cuadradito de doce pixeles que hay que apuntar con
   precisión, y encima viene con su color, ajeno al resto. */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/* En flex y no en bloque: así los márgenes del campo no se escapan de la
   caja —cuando lo hacían, la cruz se calculaba contra una caja sin alto y
   caía debajo del campo en vez de adentro—. */
.campo-con-equis {
  position: relative;
  display: flex;
  align-items: center;
}

.campo-con-equis input { padding-right: 32px; }

/* Con la caja adelante en el selector: adentro de un menú, la regla de
   `.menu-turno button` —que estira los botones a lo ancho— le ganaba y la
   cruz salía del ancho del menú. */
.campo-con-equis .limpiar-campo {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
}

/* En un formulario el campo trae margen abajo, y la caja que lo envuelve
   medía campo + margen: la cruz se centraba contra esa altura y caía por
   debajo del campo. El margen pasa a la caja, que es la que ocupa el lugar,
   y adentro la cruz se centra contra el campo solo. */
.campo > .campo-con-equis { margin-bottom: 18px; }
.campo > .campo-con-equis > input { margin-bottom: 0; }

.filtro-agenda input {
  width: min(460px, 60vw);
  margin: 0;
  padding: 6px 12px;
  font-size: 13px;
  text-align: center;
}

/* La cuenta va flotando al lado, así el campo queda centrado en la pantalla
   y no se corre cuando aparece el número. */
.filtro-cuenta {
  position: absolute;
  left: calc(100% + 10px);
}

.filtro-cuenta {
  color: var(--texto-tenue);
  font-size: 12px;
  white-space: nowrap;
}

/* El campo centrado, pero el texto que se escribe alineado a la izquierda
   una vez que hay algo: centrado se lee raro mientras se tipea. */
.filtro-agenda input:focus,
.filtro-agenda input:not(:placeholder-shown) { text-align: left; }

.filtro-cuenta.sin-nada-encontrado { color: var(--anulado); }

/* ------------------------------------------------------- agenda: semana */

/* La semana usa la misma grilla que el día —eso lo pone `#agenda.tiempo`—;
   lo suyo es cuánto mide cada columna.

   El divisor son los días que se están mostrando, no un número escrito acá:
   lo pone la pantalla en `--columnas` justo después de contarlos. Estuvo
   clavado en seis mientras los sábados eran una casilla del navegador; desde
   que la semana la decide el local pueden llegar los siete, y con seis de
   divisor la séptima columna no entraba: la agenda se iba a lo ancho y el
   lunes quedaba abajo de la columna de horas, que va pegada a la izquierda.

   Con menos días no cambia nada: las columnas tienen `flex-grow` y se estiran
   hasta llenar la pantalla igual. Los 150px son el piso de legibilidad, el
   mismo del día; abajo de eso la agenda scrollea, y ahora se llega, porque
   `acomodarAnchoDelDia` la arranca desde la izquierda también en la semana. */
#agenda.semana .columna {
  min-width: max(150px, calc((100% - 62px) / var(--columnas, 6)));
  max-width: none;
}

/* La columna del día que no se atiende no se apaga con transparencia: el
   texto tiene que leerse igual que el del almuerzo, que es el mismo aviso
   dicho para un rato en vez de para el día entero. Lo que la distingue es lo
   que dice, no que esté más clarita. */

.libre-total.no-atiende { color: var(--anulado); }



/* El número del día se lee tanto como el nombre: es lo que uno busca
   cuando repasa la semana. El mes queda atenuado al lado. */
/* Lo único propio de la cabecera de la semana: el número del día, un poco
   más marcado que el resto de la fecha. Todo lo demás —el nombre, la jornada,
   las horas libres— sale de las reglas de `.cabeza-profesional`, para que la
   columna se vea igual en las dos vistas. */
.cabeza-del-dia .dia-numero {
  color: var(--texto);
  font-weight: 600;
}

.columna.es-hoy .cabeza-del-dia .dia-numero { color: var(--dorado); }

/* Hoy, con la cabecera entera pintada y no sólo una raya abajo: mirando la
   semana de un vistazo, dos píxeles de línea entre cinco columnas iguales no
   alcanzan para encontrar el día en el que uno está parado. */
.columna.es-hoy .cabeza-del-dia {
  border-bottom: 2px solid var(--dorado);
  background: var(--hoy-cabeza);
}

.bloque-profesional { border-bottom: 1px solid var(--borde); }
.bloque-profesional:last-child { border-bottom: none; }

.sin-nada {
  padding: 22px 14px;
  color: var(--texto-tenue);
  font-size: 12.5px;
  text-align: center;
}

/* ------------------------------------------------------------- bloques */

.turno {
  display: block;
  background: var(--carbon);
  /* La franja del motivo: seis píxeles y no tres. Con tres, un color oscuro
     sobre la tarjeta oscura casi no se veía y había que buscarlo. */
  border-left: 6px solid var(--pendiente);
  border-radius: 6px;
  padding: 8px 10px;
  text-decoration: none;
  color: inherit;
  /* La manito de agarrar solo en los que se pueden mover. En un turno ya
     atendido prometía algo que después no pasa, y eso se lee como un sistema
     roto. Sigue siendo un enlace a la ficha, así que queda el dedito. */
  cursor: pointer;
  transition: background 0.12s;
}

.turno[data-movible] { cursor: grab; }

.turno:hover { background: var(--carbon-alto); }

/* El turno anulado o cambiado de fecha. Sigue en su horario —para saber qué
   pasó ahí— pero sin ocupar lugar: ese rato está libre y el hueco para
   agendarlo se dibuja igual, justo antes.
   Se viste como el almuerzo, que es el otro bloque que está y no está: línea
   punteada finita y el rojo apagado del anulado. Sin la franja del motivo,
   que es para elegir dónde agendar y acá no hay nada que elegir. */
/* Va con `.bloques` adelante: más abajo en este archivo el tema claro le pone
   fondo a `.turno` con la misma fuerza y le ganaba por orden. */
.bloques .turno.sin-lugar {
  border: 1px dashed rgba(140, 74, 74, 0.5);
  background: var(--anulado-tarjeta);
  color: var(--texto-tenue);
  cursor: default;
}

.bloques .turno.sin-lugar:hover { background: var(--anulado-tarjeta); }

/* El estado de un turno caído se aprieta para ver qué pasó. */
.turno-estado[data-ver-historial] { cursor: pointer; }
.turno-estado[data-ver-historial]:hover { color: var(--dorado); }
.turno.sin-lugar .turno-hora { color: var(--anulado); cursor: default; }
.turno.sin-lugar .turno-paciente { color: var(--texto-tenue); }

.turno.atendido   { border-left-color: var(--atendido); }
.turno.confirmado { border-left-color: var(--confirmado); }
.turno.ausente    { border-left-color: var(--ausente); }

/* El horario y el motivo comparten el primer renglón. El hueco de la
   derecha es para el globo y la ruedita, que van por encima de la tarjeta:
   sin él, un motivo largo se metía debajo.

   De este renglón también se agarra el turno: es la franja más ancha que
   queda libre. El motivo, adentro, vuelve a poner lo suyo. */
.turno-hora {
  cursor: grab;
  display: flex;
  align-items: baseline;
  gap: 7px;
  /* Lugar para la ruedita, que va por encima de la tarjeta. Antes eran sesenta
     porque el comentario iba al lado; ahora que bajó, el motivo se queda con
     esos veintiséis píxeles y se corta menos. */
  padding-right: 34px;
  color: var(--dorado);
  font-size: 12px;
  font-weight: 500;
}

/* La hora nunca se parte. En una columna angosta el navegador la cortaba por
   el guion y la tarjeta crecía un renglón, así que unas quedaban más altas que
   otras. Lo que cede es el motivo, que se corta con puntos suspensivos. */
.turno-reloj {
  flex: none;
  white-space: nowrap;
}
/* Un nombre largo se corta con puntos suspensivos. Envolviendo hacía crecer
   la tarjeta y esa columna quedaba con turnos de dos alturas distintas. */
.turno-paciente {
  display: block;
  /* El lugar que se le deja a la ruedita del menú va como margen y no como
     relleno: de relleno era parte del nombre, y hacerle clic a la derecha del
     texto —donde no hay nada escrito— abría la ficha del paciente en vez de
     dejar agarrar la tarjeta. */
  margin: 2px 34px 2px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
/* El teléfono y el estado comparten el último renglón, uno a cada punta. */
/* El teléfono a la izquierda y el estado a la derecha, siempre en un renglón.
   Todas las tarjetas miden lo mismo: una que crece desordena la columna y
   obliga a leer de nuevo dónde termina cada turno.
   Cuando no entran los dos, el que cede es el estado —se corta con puntos
   suspensivos—; el teléfono no, que es el dato que uno copia para llamar. */
.turno-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 3px;
}

.turno-tel { flex: none; }

.turno-estado {
  flex: 0 1 auto;
  min-width: 0;
  margin-left: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  white-space: nowrap;
  color: var(--texto-tenue);
}

/* Lo que todavía no se cargó, en cursiva: se ve que está para completar y
   no se confunde con un dato real. */
.turno-estado.vacio,
.turno-motivo.vacio { font-style: italic; opacity: 0.75; }

.turno-estado.atendido   { color: var(--atendido); }
.turno-estado.confirmado { color: var(--confirmado); }
.turno-estado.pendiente  { color: var(--pendiente); }
.turno-estado.ausente    { color: var(--ausente); }
.turno-estado.anulado    { color: var(--anulado); }

/* Se cambia desde acá: se nota al pasar por encima, como el motivo.

   El área de clic se estira para los cuatro lados con relleno, y los
   márgenes negativos lo devuelven a su lugar: la palabra es chica y apuntarle
   justo costaba, pero la tarjeta no tiene que crecer por eso. */
.turno-estado[data-cambiar-estado] {
  cursor: pointer;
  margin: -5px -8px;
  padding: 5px 8px;
  border-radius: 5px;
}

.turno-estado[data-cambiar-estado]:hover { color: var(--dorado); }

/* La etiqueta del estado, con el color que ese estado tiene en Dentalink.
 *
 * El color va acá y no en la tarjeta entera: pintar toda la tarjeta convierte
 * la agenda en un mosaico y tapa el estilo del sistema. Acá alcanza para
 * reconocer el estado de un vistazo sin perder el resto.
 *
 * La tinta se calcula según cuánta luz tenga el color, porque los elige la
 * clínica en Dentalink y puede venir cualquiera. */
/* La ficha, del color de su estado.
 *
 * Bajando por la columna se lee cómo viene el día sin detenerse en cada
 * tarjeta: los atendidos de un color, los confirmados de otro, el que todavía
 * no confirmó a la vista. La tinta la calcula el sistema según lo oscuro que
 * sea el color, así el nombre se lee igual sobre un verde oscuro que sobre un
 * celeste claro.
 *
 * El borde izquierdo sigue siendo del motivo: son dos datos distintos y cada
 * uno tiene su lugar.
 */
/* Con el `#agenda` adelante: más abajo hay una regla de tema que le pone a
   toda tarjeta el fondo de siempre, y sin esto le ganaba a esta. */
#agenda .turno.tenido {
  background: var(--fondo-estado);
  color: var(--tinta-estado);
}

#agenda .turno.tenido .turno-cuando { color: inherit; opacity: 0.75; }

/* Un punto más marcado al pasar por encima: sin esto, sobre el color propio
   el resalte de siempre no se notaba. */
#agenda .turno.tenido:hover { background: var(--fondo-estado); filter: brightness(1.08); }

#agenda .turno.tenido .turno-paciente { color: inherit; }

.turno-estado.pintado {
  padding: 2px 9px;
  border-radius: 20px;
  background: var(--fondo-estado);
  color: var(--tinta-estado);
  font-weight: 500;
}

/* Con relleno propio no hacen falta los márgenes negativos del clic. */
.turno-estado.pintado[data-cambiar-estado] { margin: 0; padding: 3px 10px; }

/* El nombre lleva a la ficha del paciente: se nota al pasar por encima,
   igual que el motivo. */
/* Es `inline-block` para que el área de clic termine donde termina el nombre y
   no ocupe el renglón entero. Sin el tope, un inline-block se estira con su
   contenido y un nombre largo se salía de la tarjeta. */
.turno-paciente[data-ficha-de] {
  display: inline-block;
  max-width: 100%;
  cursor: pointer;
}
.turno-paciente[data-ficha-de]:hover { color: var(--dorado); }

.turno-motivo   { color: var(--texto-tenue); font-size: 11.5px; font-weight: 400; }

/* Al lado del horario, sin robarle lugar: si el motivo es largo se corta
   con puntos suspensivos en vez de empujar la hora. Con una barrita en el
   medio: pegado al horario los dos datos se leían como uno solo. */
.turno-motivo {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-left: 4px;
  padding-left: 11px;
  border-left: 1px solid var(--borde);
}

/* El motivo se cambia acá mismo. Se nota al pasar por encima y no antes:
   marcarlo siempre llenaría la agenda de subrayados. Con el área de clic
   estirada, igual que el estado. */
.turno-motivo.editable {
  cursor: pointer;
  border-radius: 5px;
  margin: -5px -8px -5px 4px;
  padding: 5px 8px 5px 11px;
}

.turno-motivo.editable:hover { color: var(--dorado); }

/* Los huecos van partidos en casilleros de un intervalo: se ve de una
   cuántos turnos entran y a qué hora arranca cada uno. */
.huecos {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hueco {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  border: 1px dashed rgba(182, 163, 96, 0.45);
  border-radius: 6px;
  padding: 4px 10px;
  /* Opaco: la grilla dibuja sus líneas en el fondo de la columna y con el
     casillero translúcido pasaban por encima de la etiqueta de la hora. */
  background: var(--hueco-fondo);
}

.hueco:hover {
  border-style: solid;
  background: var(--dorado-suave);
}

.hueco-hora { color: var(--dorado); font-size: 11.5px; }
.hueco-min  { color: var(--texto-tenue); font-size: 10.5px; }

/* El casillero libre no cambia de tamaño porque sí: lo achica la grilla
   cuando se la mira de a cuarenta o sesenta minutos. Ahí primero se va el
   «libre» y después la hora, pero el casillero sigue siendo el mismo botón
   y el globo de ayuda sigue diciendo a qué hora es y cuánto hay. */
.celda-libre.hueco-bajo .hueco { padding: 1px 8px; align-items: center; }
.celda-libre.hueco-bajo .hueco-min { display: none; }
.celda-libre.hueco-bajo .hueco-hora { font-size: 10px; }

.celda-libre.hueco-mudo .hueco { padding: 0; }
.celda-libre.hueco-mudo .hueco-hora,
.celda-libre.hueco-mudo .hueco-min { display: none; }


/* Sobreturnos: los turnos del mismo horario van uno al lado del otro.
   Apilados se leen como horarios distintos y no lo son. */
/* El turno y su sobreturno, uno al lado del otro: primero lo agendado y
   después lo que se encimó, que es como se lee. */
.fila-sobreturno {
  display: grid;
  grid-auto-flow: column;
  /* `minmax(0, ...)`: sin el piso en cero la pista no baja del ancho del
     contenido y la tarjeta se sale de la columna. */
  grid-auto-columns: minmax(0, 1fr);
  gap: 5px;
}

/* Siempre lado a lado, por angosta que sea la columna. Apilados entraban
   mejor de a uno, pero la celda mide lo que dura el turno: dos tarjetas una
   arriba de la otra se aplastaban a la mitad y se salían de su horario, que
   en una agenda es peor que quedar angostas. */

.turno.sobreturno { border-left-color: var(--ausente); }

/* El rayo del sobreturno, delante del nombre: es lo primero que hay que saber
   de ese turno —entró encima de otro— y al final de la tarjeta quedaba tapado
   por el recorte en cuanto la grilla se cerraba un poco. */
.marca-sobreturno {
  flex: none;
  color: var(--ausente);
  font-size: 11px;
  margin-right: 2px;
}

.turno-tel {
  /* Ancho del número y no del renglón: el cursor de texto y el arrastre
     bloqueado valen sobre el número, no sobre el aire de al lado. */
  display: block;
  width: fit-content;
  color: var(--texto-tenue);
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 5px;
  /* Se selecciona con el mouse: es el dato que uno copia para llamar. El
     ícono queda afuera de la selección, así lo que se copia es el número
     solo y no un espacio de más adelante. */
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
}

/* --------------------------------------------------------------- ficha */

.volver {
  color: var(--texto-tenue);
  text-decoration: none;
  font-size: 13px;
  padding: 7px 10px;
  border-radius: var(--radio);
  white-space: nowrap;
}

.volver:hover { color: var(--dorado); }
.barra-marca { display: flex; }

#ficha { padding: 0 0 70px; }

.ficha-cabeza {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  flex-wrap: wrap;
  padding: 24px 28px 18px;
}

.ficha-cabeza h1 { margin: 0; font-size: 26px; font-weight: 500; }

.ficha-sub {
  display: flex;
  gap: 8px 18px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 3px;
  color: var(--texto-tenue);
  font-size: 12.5px;
}

.ficha-resumen { display: flex; gap: 8px; }

.tarjeta {
  background: var(--carbon);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 6px 14px;
  text-align: center;
  min-width: 78px;
}

.tarjeta strong { display: block; font-size: 16.5px; color: var(--dorado); font-weight: 500; }
.tarjeta small { color: var(--texto-tenue); font-size: 10.5px; }
.tarjeta.grande { padding: 18px 24px; min-width: 160px; }
.tarjeta.grande strong { font-size: 23px; }
.tarjeta.deuda strong { color: var(--ausente); }

/* -------------------------------------------------------- navegacion */

/* Las solapas de arriba, con la forma de las etapas de un plan.

   Antes eran texto subrayado: la elegida se distinguia por una linea dorada de
   2px abajo y nada mas. Las de etapa —«Primera Etapa», «Simulacion 3D»— ya
   tenian forma de carpeta, y son las mismas solapas haciendo lo mismo, asi que
   se ven igual. Una sola regla vale para las nueve pantallas que usan esta
   barra: paciente, sucursal, usuario, CRM, dinero, laboratorios, liquidaciones,
   plantillas y reportes.

   `align-items: flex-end` las apoya sobre la linea de abajo; sin eso, una
   solapa mas alta que otra deja a las demas flotando arriba. */
.pestanas {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 0 28px;
  border-bottom: 1px solid var(--borde);

  /* Se acomodan en dos renglones, no se deslizan.

     Antes era `overflow-x: auto`. Con el milimetro negativo de la solapa eso
     dispara una barra de scroll VERTICAL: pedir scroll en un eje convierte al
     contenedor en zona de scroll en los dos, y ese milimetro que sobresale
     pasa a ser contenido que no entra. Envolver es ademas lo que hacen las
     solapas de etapa, que son el modelo. */
  flex-wrap: wrap;
}

.pestana {
  /* El milimetro que hace la carpeta: la solapa baja uno y su borde inferior
     queda justo encima de la linea del contenedor, para que la elegida la
     pueda tapar y parecer parte de lo que hay debajo. */
  margin-bottom: -1px;

  background: var(--fondo);
  border: 1px solid var(--borde);
  /* La linea de arriba es lo que dibuja la solapa: sin ella las apagadas se
     pierden contra el fondo. */
  border-top: 3px solid var(--pendiente);
  border-radius: 9px 9px 0 0;
  color: var(--texto-tenue);
  padding: 6px 14px 8px;
  cursor: pointer;
  white-space: nowrap;
  font-size: 13px;
}

/* Al pasar el mouse se doran los tres lados de la carpeta —arriba y los dos
   costados— y el de abajo se queda como estaba.

   `border-color` pinta los cuatro de una, y el de abajo dorado cerraba la
   figura: quedaba una cajita completa en vez de una carpeta apoyada en la
   barra. Se lo devuelve a `--borde`, que es el mismo color de la linea del
   contenedor sobre la que se apoya, asi que los dos se leen como una sola. */
.pestana:hover {
  color: var(--texto);
  border-color: var(--dorado);
  border-top-color: var(--dorado);
  border-bottom-color: var(--borde);
}

/* La elegida se funde con lo que hay debajo y lleva la linea dorada arriba, que
   es lo que canta a la distancia cual esta abierta. */
.pestana.activa {
  background: var(--carbon);
  border-top: 3px solid var(--dorado-fuerte);
  border-bottom-color: var(--carbon);
  color: var(--dorado);
  font-weight: 500;
}

/* La elegida ya esta resaltada: el hover no le cambia el borde. */
.pestana.activa:hover {
  border-color: var(--borde);
  border-top-color: var(--dorado-fuerte);
  border-bottom-color: var(--carbon);
}

.subpestanas {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 28px;
  background: var(--carbon);
  border-bottom: 1px solid var(--borde);
  overflow-x: auto;
}

.subpestana {
  background: none;
  border: 1px solid transparent;
  border-radius: 20px;
  color: var(--texto-tenue);
  padding: 5px 12px;
  cursor: pointer;
  white-space: nowrap;
  font-size: 12.5px;
}

/* El volver de la fila de subpestañas. Es un enlace, no un botón, así que
   necesita alinearse y perder el subrayado a mano. */
.volver-atras {
  display: inline-flex;
  align-items: center;
  margin-right: 4px;
  color: var(--dorado);
  text-decoration: none;
}

.subpestana:hover { color: var(--texto); border-color: var(--borde); }
.subpestana.activa { background: var(--dorado-suave); border-color: var(--dorado); color: var(--dorado); }

/* Marca lo que todavia no esta construido. */
.punto {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--texto-tenue);
  margin-left: 7px;
  vertical-align: middle;
}

.contenido { padding: 24px 28px; max-width: 1500px; }

/* La ficha del paciente arranca pegada a la izquierda a propósito —tiene su
   panel lateral—; un listado suelto en una pantalla ancha, en cambio, se
   centra. */
.contenido.centrado { margin: 0 auto; }

/* Un listado de pocas columnas no se estira hasta los 1500 del resto: en una
   pantalla ancha quedan los datos pegados a un borde, los botones al otro y
   medio metro de nada en el medio. 900 es el ancho de lectura que ya usa el
   sistema en los formularios y en los paneles de una sola columna. */
.contenido.angosto { max-width: 900px; }

/* La misma idea para Prestaciones, que tiene seis columnas y no tres:
   1150 es el tope que `.tabla-admin` ya se pone a sí misma cuando está suelta.
   Va en el contenido y no en la tabla porque ahí adentro la tabla cuelga de la
   categoría y tiene que medir lo mismo que el encabezado de arriba: si se
   angostara sola, se leería como si le faltara un pedazo. */
.contenido.listado { max-width: 1150px; }

.contenido h3 {
  margin: 30px 0 14px;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dorado);
}

.contenido h3:first-child { margin-top: 0; }

.por-construir {
  border: 1px dashed var(--borde);
  border-radius: var(--radio);
  padding: 30px 26px;
  max-width: 620px;
}

.por-construir strong { color: var(--dorado); font-weight: 500; }
.por-construir p { margin: 8px 0 0; color: var(--texto-tenue); font-size: 13px; line-height: 1.55; }

.nota { color: var(--texto-tenue); font-size: 12.5px; margin-top: 18px; }

/* ------------------------------------------------- formularios en columnas */

/* El sistema se usa en monitor: los campos van en varias columnas, no uno
   por fila ocupando todo el ancho. */
.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0 22px;
  max-width: 1200px;
}

.campo.ancho { grid-column: 1 / -1; max-width: 780px; }

/* Sillón, plan, motivo y duración en una fila: son los cuatro datos del turno
   y se leen juntos. En pantalla angosta bajan a dos, que es donde el nombre
   de un plan deja de entrar. */
.rejilla-turno { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .rejilla-turno { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Los comentarios van a lo ancho del cartel: es texto libre, y cortarlo a
   780px dejaba media fila vacía a la derecha. Va con las dos clases porque
   `.campo.ancho` es la que pone ese tope. */
.campo.ancho.campo-comentarios { max-width: none; }

/* Cuándo y dónde: fecha, hora y sillón. Tres campos cortos, así que la fila
   no se estira a lo ancho del cartel —quedarían tres desplegables enormes
   para decir «10:00»—. */
.rejilla-turno.rejilla-cuando {
  grid-template-columns: 1.15fr 0.8fr 0.95fr;
  max-width: 640px;
}

/* Y para qué: plan, motivo y duración. El motivo se lleva el lugar porque es
   el que trae los nombres largos. */
.rejilla-turno.rejilla-que { grid-template-columns: 1.5fr 0.85fr; }

.rejilla-turno.rejilla-que:has(#t-campo-plan:not([hidden])) {
  grid-template-columns: 1.25fr 1.35fr 0.75fr;
}

/* Sin esto el campo de la fecha manda: un `input[type=date]` trae su propio
   ancho mínimo —el que necesita para «08/27/2026» y el iconito— y el grid se
   lo respeta por encima de las fracciones, dejando a los demás con lo que
   sobra. */
.rejilla-cuando > .campo,
.rejilla-que > .campo { min-width: 0; }
.rejilla-cuando input[type="date"] { min-width: 0; width: 100%; }

@media (max-width: 900px) {
  .rejilla-turno.rejilla-cuando,
  .rejilla-turno.rejilla-que { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Paciente y sillón, uno al lado del otro y siempre dos: si se dejaran fluir
   con el resto, en una pantalla ancha se irían a la misma fila que
   profesional y motivo, que es lo que se quiso separar. */
.rejilla-quien { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Con el paciente ya elegido, su ficha tiene tres cosas que decir —quién es,
   su documento y de qué turno se trata— y el campo de al lado sigue teniendo
   una sola: el nombre del profesional. A mitades iguales la ficha se partía en
   tres renglones mientras sobraba lugar a la derecha, así que la fila se
   reparte a favor del que lo necesita. */
.rejilla-quien:has(.paciente-elegido) {
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
}
.campo label { margin-bottom: 5px; }

textarea {
  width: 100%;
  padding: 11px 13px;
  margin-bottom: 18px;
  background: var(--negro);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  resize: vertical;
  font-family: inherit;
}

textarea:focus { outline: none; border-color: var(--dorado); }
input:disabled, textarea:disabled, select:disabled { opacity: 0.6; cursor: default; }

.pie-formulario small { color: var(--texto-tenue); }

/* En la semana de horarios, guardar va a la derecha: es donde se lo busca
   después de recorrer las siete columnas. */
.pie-formulario.pie-ancho {
  justify-content: flex-end;
  gap: 10px;
}

.pie-ancho .chip.peligro { margin-right: auto; }
.boton.angosto { width: auto; padding: 11px 24px; }

/* La accion de la seccion, a la derecha de la barra de solapas.

   Es donde el resto del sistema pone la accion de su pantalla —«+ Nueva
   prestacion», «+ Agendar cita»—, y por eso va aca y no arriba de la lista.
   `margin-left: auto` la empuja contra el borde; `flex: none` evita que la
   barra la comprima cuando hay muchas solapas. */
/* ---- «Subiendo 2 de 5», a la derecha de las solapas ----

   Estaba al pie del contenido, en una franja del ancho de la pantalla. Ocupaba
   ALTO —justo lo que la plantilla necesita para mostrar las fotos más grandes—
   y aparecía donde nadie mira mientras espera que algo termine. Acá arriba está
   a la vista y no le saca lugar a nada (pedido por Juan el 05/09/2026). */
.barra-trabajando {
  /* Sin `margin-left: auto`: ahora lo empuja a la derecha el grupo de la
     derecha (el ícono de ordenar), y el aviso queda pegado al botón «Subir»,
     que es lo que lo dispara. */
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 14px;
  font-size: 12.5px;
  color: var(--texto-tenue);
  white-space: nowrap;
  flex: none;
}

.barra-trabajando[hidden] { display: none; }

/* La ruedita. Un anillo al que se le pinta un solo cuarto: girando, ese cuarto
   es lo que se ve dar vueltas. */
.rueda {
  width: 13px;
  height: 13px;
  border: 2px solid var(--borde);
  border-top-color: var(--dorado-fuerte);
  border-radius: 50%;
  animation: rueda-gira .7s linear infinite;
  flex: none;
}

@keyframes rueda-gira { to { transform: rotate(360deg); } }

/* A quien pidió menos movimiento no se le hace girar nada, pero tampoco se le
   deja un anillo quieto: quieto no dice «esperá», dice «adorno». Se cambia el
   giro por un latido de opacidad, que es de las pocas cosas que siguen
   comunicando sin mover nada de lugar. */
@media (prefers-reduced-motion: reduce) {
  .rueda {
    animation: rueda-late 1.6s ease-in-out infinite;
    border-color: var(--dorado-fuerte);
  }
}

@keyframes rueda-late {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

/* ---- El ícono de ordenar, en la barra ----

   Ordenar es una preferencia de cómo mirar, no una acción: como rótulo con
   desplegable se llevaba un renglón entero de la galería. De ícono ocupa lo que
   ocupa un ícono, y lo que está elegido se lee en el globito y en la opción
   marcada del menú. */
/* El grupo de la derecha, todo junto. Es el GRUPO el que se corre al margen; sus
   partes van pegadas entre sí con una separación pareja. Cada una corriéndose
   por su cuenta dejaba huecos distintos entre ellas y le sumaba alto a la barra,
   que es alto que la galería pierde. */
.barra-derecha {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

/* El botón, a la altura de las solapas. Con el relleno que trae de fábrica la
   barra crecía dieciséis píxeles. */
.subpestanas .barra-subir,
.subpestanas .boton.angosto { padding: 7px 16px; font-size: 13px; }

.orden-menu { position: relative; }

.orden-boton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--borde);
  border-radius: 9px;
  background: var(--superficie);
  color: var(--texto-tenue);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}

.orden-boton:hover { border-color: var(--dorado); color: var(--dorado-fuerte); }

/* Fijo y ubicado por JS, como los demas menues del sistema: la barra de
   solapas scrollea de costado, y colgado de ella el menu se abria adentro de
   ese scroll —agregandole una barrita— en vez de por encima de todo. */
.orden-opciones {
  position: fixed;
  z-index: 200;
  min-width: 200px;
  padding: 5px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.orden-opciones[hidden] { display: none; }

.orden-opciones button {
  text-align: left;
  padding: 7px 10px;
  border: 0;
  border-radius: 7px;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--texto);
  cursor: pointer;
  white-space: nowrap;
}

.orden-opciones button:hover { background: var(--superficie2); }
.orden-opciones button.puesta { background: var(--dorado-suave); color: var(--dorado-fuerte); }

.subpestanas .accion-barra {
  margin-left: auto;
  flex: none;
  padding: 7px 16px;
  font-size: 12.5px;
}

/* ------------------------------------------------------------- tablas */

.tabla {
  /* A todo lo ancho del contenido: con un tope las líneas divisorias se
     cortaban antes que el resto de la pantalla y quedaba un vacío a la
     derecha, como si a la tabla le faltara un pedazo. */
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.tabla th {
  text-align: left;
  padding: 9px 12px;
  color: var(--texto-tenue);
  font-weight: 400;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--borde);

  /* En una sola linea, siempre. Partido en dos, el encabezado se lee como dos
     columnas —«A COBRAR DEL / PACIENTE» parecian dos— y ademas empuja para
     abajo toda la fila de titulos. Si no entra, la tabla se hace mas angosta en
     otro lado o se desplaza; el titulo no se rompe. */
  white-space: nowrap;
}

.tabla td { padding: 10px 12px; border-bottom: 1px solid var(--borde); }

/* La columna de acciones de cualquier tabla: ultima, pegada al borde derecho y
   del ancho de lo que tenga adentro. `width: 1%` es el modo de decirle a una
   tabla «lo mas angosta posible»: el resto del ancho se lo reparten las otras
   columnas y los botones quedan alineados con el borde de la tabla, no
   flotando a mitad de camino.

   Va aca arriba y no al final del archivo a proposito: las tablas que necesiten
   otra cosa la declaran despues y le ganan. */
.tabla .col-acciones {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

/* EL RESALTADO AL PASAR POR ENCIMA, PARA TODAS LAS TABLAS Y LISTAS DEL SITIO.
   Es el mismo dorado suave con el que se marca lo elegido en la agenda y en
   pacientes, y se declara una sola vez: una tabla nueva lo hereda sin escribir
   nada.

   Va como `background-image` y no como `background`, y ese detalle es todo:
   pintando el color se borraba lo que la fila tenía debajo. Con el degradado
   —dos veces el mismo color, que es la forma de escribir un color plano como
   imagen— el dorado se apoya ARRIBA de lo que ya estaba, así que la franja gris
   sigue siendo gris, la fila en rojo de una falta sigue leyéndose roja, y todas
   se tiñen igual. Antes se pintaba `--carbon`, que en claro es blanco: la fila
   gris se volvía blanca —o sea, se aclaraba, justo al revés de resaltarse— y la
   fila blanca no cambiaba nada.

   Sobre `> td` y no sobre `tr` porque hay filas que llevan su propio color en
   la celda, y el fondo de la celda tapa al de la fila.

   La fila de detalle queda afuera: no es una fila, es la caja que sostiene la
   tabla desplegada. Tiñéndola, entrar con el mouse en la tabla de adentro
   pintaba de dorado el bloque entero y encima el renglón que se estaba
   señalando: dos dorados y ninguno decía nada. */
.tabla tbody tr:hover:not(.fila-detalle) > td,
.tabla-anidada tbody tr:hover > td {
  background-image: linear-gradient(var(--dorado-suave), var(--dorado-suave));
}
.tabla .fecha { color: var(--dorado); white-space: nowrap; }
.tabla .debe { color: var(--ausente); }
.tabla .al-dia { color: var(--atendido); }

/* -------------------------------------------------------- planes */

.tarjetas-plan {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 16px;
  max-width: 1400px;
}

.plan {
  background: var(--carbon);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 18px 20px;
}

.plan-cabeza {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.plan-cabeza strong { font-weight: 500; }

.plan-datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 12px;
  font-size: 13px;
}

.plan-datos small {
  display: block;
  color: var(--texto-tenue);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

.plan-datos .debe { color: var(--ausente); }
.plan-datos .al-dia { color: var(--atendido); }

.barra-avance {
  height: 4px;
  background: var(--borde);
  border-radius: 3px;
  margin-top: 16px;
  overflow: hidden;
}

.barra-avance span { display: block; height: 100%; background: var(--dorado); }

.rejilla-balance { display: flex; gap: 14px; flex-wrap: wrap; }

/* -------------------------------------------------- linea de tiempo */

.linea-tiempo { position: relative; padding-left: 118px; max-width: 1100px; }

.linea-tiempo::before {
  content: '';
  position: absolute;
  left: 104px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--borde);
}

.hito { position: relative; margin-bottom: 18px; }

.hito-fecha {
  position: absolute;
  left: -118px;
  top: 12px;
  width: 88px;
  text-align: right;
  color: var(--texto-tenue);
  font-size: 12px;
}

.hito::before {
  content: '';
  position: absolute;
  left: -18px;
  top: 17px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--borde);
}

.hito.evolucion::before { background: var(--dorado); }

.hito-caja {
  background: var(--carbon);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 13px 16px;
}

.hito-tipo {
  display: inline-block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--texto-tenue);
  margin-bottom: 6px;
}

.hito-tipo.evo { color: var(--dorado); }
.hito-caja small { display: block; color: var(--texto-tenue); font-size: 11.5px; margin-top: 6px; }

/* --------------------------------------------------------------- lineas */

.linea { padding: 15px 0; border-bottom: 1px solid var(--borde); max-width: 1100px; }
.linea:last-child { border-bottom: none; }

.linea-cabeza {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--texto-tenue);
  margin-bottom: 5px;
}

.linea-cabeza .fecha { color: var(--dorado); }

.evolucion-texto { font-size: 13.5px; line-height: 1.6; margin-top: 6px; }
.evolucion-texto p { margin: 0 0 6px; }

.etiqueta {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 11px;
  background: var(--dorado-suave);
  color: var(--dorado);
}

.etiqueta.alerta   { background: rgba(180, 83, 9, 0.16); color: var(--ausente); }
.etiqueta.atendido { background: rgba(79, 157, 105, 0.16); color: var(--atendido); }
.etiqueta.anulado, .etiqueta.reprogramado { background: rgba(140, 74, 74, 0.16); color: #c98b8b; }
/* Un plan a medio hacer: ni empezado ni terminado. */
.etiqueta.parcial  { background: rgba(180, 83, 9, 0.16); color: var(--ausente); }

.vacio { padding: 36px 20px; text-align: center; color: var(--texto-tenue); }
/* Mientras algo carga: el marco de la página se queda y el circulito gira
   en el medio de la pantalla, no arriba de todo del bloque que carga. */
.cargando {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
  color: var(--texto-tenue);
  font-size: 13px;
  text-align: center;
  pointer-events: none;
}

.cargando::before {
  content: '';
  width: 26px;
  height: 26px;
  border: 2px solid var(--borde);
  border-top-color: var(--dorado);
  border-radius: 50%;
  animation: girar 0.7s linear infinite;
}

@keyframes girar { to { transform: rotate(360deg); } }

/* Si el sistema pide menos animación, el circulito se queda quieto. */
@media (prefers-reduced-motion: reduce) {
  .cargando::before { animation: none; }
}
/* El aviso de la agenda va pegado a la pantalla, no al principio de la
   página: se avisa de cosas que pasan donde uno está mirando —un turno del
   final de la tarde que no se puede mover— y arriba de todo no se veía. */
.aviso-flotante {
  position: fixed;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  margin: 0;
  max-width: min(520px, calc(100vw - 32px));
  /* Macizo: flota sobre la agenda y tiene que tapar lo que hay debajo. El
     `.aviso` de abajo lo tiñe con un dorado transparente, y eso solo por
     encima de un fondo sólido queda legible. */
  background: var(--superficie2);
  box-shadow: inset 0 0 0 999px var(--dorado-suave),
              0 10px 28px rgba(0, 0, 0, 0.28);
  text-align: center;
  animation: aviso-entra 0.16s ease-out;
}

/* Lo que salió bien, en verde. Los avisos se leen de reojo mientras uno
   sigue trabajando, así que el color tiene que decir en qué terminó la cosa
   antes de que uno lea la frase. */
.aviso-flotante.exito {
  border-color: var(--atendido);
  background: var(--superficie2);
  box-shadow: inset 0 0 0 999px var(--atendido-suave),
              0 10px 28px rgba(0, 0, 0, 0.28);
  color: var(--atendido);
  font-weight: 500;
}

/* Lo que no se pudo hacer, en rojo: un «no se puede mover» no se lee igual
   que un «listo, turno movido».

   El fondo va macizo y no con el rojo transparente de las etiquetas: esto
   flota sobre la agenda, y con los turnos asomándose por debajo no se leía
   ni el cartel ni lo de atrás. */
.aviso-flotante.alerta {
  border-color: var(--anulado);
  background: var(--superficie2);
  box-shadow: inset 0 0 0 999px var(--anulado-suave),
              0 10px 28px rgba(0, 0, 0, 0.28);
  color: var(--anulado);
  font-weight: 500;
}

@keyframes aviso-entra {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ------------------------------------------- plan de tratamiento */

/* Las dos columnas terminan a la misma altura.

   El fondo de este marco es el color del borde, y el hueco de 1px entre las
   columnas es lo que dibuja la linea que las separa: no hay ningun `border`,
   se ve el fondo por la rendija.

   Por eso `align-items` tiene que ser `stretch` y no `start`. Con `start` cada
   columna medía lo suyo, y como la de la izquierda —titulo, presupuesto y
   cuatro datos— es siempre mas corta que la lista de prestaciones, debajo de
   ella quedaba al descubierto el fondo del marco: un bloque gris de varios
   cientos de pixeles que parecia una seccion vacia y no una rendija de 1px.

   Estirando, la mas larga manda y la otra la acompaña. */
.plan-marco {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 1px;
  background: var(--borde);
  min-height: calc(100vh - 58px);
  align-items: stretch;
}

.plan-lateral {
  background: var(--carbon);
  padding: 22px 22px 40px;
  min-height: calc(100vh - 58px);
}

.plan-titulo small {
  color: var(--texto-tenue);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.plan-titulo h1 { margin: 4px 0 6px; font-size: 22px; font-weight: 500; }

/* Los campos a elegir, en dos columnas: son catorce, y en una sola el modal
   pedia scroll para una lista que entra de sobra al lado. */
/* Tres columnas en vez de dos: en el cartel de la evolucion son nueve o diez
   campos cortos, y a dos columnas el cartel medía media pantalla de alto. Con
   `auto-fit` se acomodan solos cuando la ventana es angosta. */
.rejilla.rejilla-tres { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* Los recuadros internos de la agenda: la jornada por un lado, los turnos por
   el otro. Cada uno engloba sus campos con borde y fondo propios, para que se
   lea qué cosa va con qué cosa. */
.recuadro-config {
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: var(--superficie2);
  padding: 14px 16px;
  margin-bottom: 14px;
}

.recuadro-config h4 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
}

/* El aire entre filas lo pone la rejilla de adentro, no cada campo: si no,
   los 18 del último campo se suman al padding y el recuadro cierra caído. */
.recuadro-config .campo-modal { margin-bottom: 0; }

/* El campo a la izquierda y su aclaración al lado, en la columna derecha. En
   un renglón el campo quedaba solo arriba y la aclaración sola abajo, cada
   uno con la mitad de la tarjeta vacía al lado.

   Las columnas van a proporción fija, no al ancho del contenido: los dos
   recuadros miden lo mismo, así que todas las aclaraciones arrancan en la
   misma vertical, en un recuadro y en el otro. */
.rejilla.rejilla-jornada {
  grid-template-columns: minmax(0, 9fr) minmax(0, 11fr);
  gap: 14px 40px;
  align-items: center;
}

/* Los turnos: el título de cada campo va en su propia fila, a lo ancho, y
   abajo la caja y la aclaración comparten renglón. Con el título adentro de
   la celda, la aclaración se centraba contra título-más-caja y quedaba
   flotando entre los dos. */
.rejilla-turnos { row-gap: 4px; }
.rejilla-turnos .titulo-suelto { grid-column: 1 / -1; }
/* El aire entre un campo y el título del siguiente. */
.rejilla-turnos .titulo-suelto:not(:first-child) { margin-top: 14px; }
/* El de arriba ya lo pone el hueco entre filas. */
.rejilla-turnos .numero-corto { margin-top: 0; }

/* La aclaración con su «i» adelante, chiquita, para que se lea como la
   leyenda del campo de al lado y no como un texto suelto. */
.ayuda-columna {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

.ayuda-columna > svg {
  flex: none;
  width: 13px;
  height: 13px;
  /* A la altura de la primera línea del texto, no del bloque entero. */
  margin-top: 1px;
}

/* Como la franja de los recordatorios: palabras en una columna, desplegables
   en otra, y los dos horarios alineados uno debajo del otro. Con las dos
   clases porque la regla suelta de `.franja-horas` viene después y ganaría. */
.franja-horas.franja-jornada {
  display: grid;
  grid-template-columns: max-content max-content;
  align-items: center;
  gap: 8px 9px;
}

@media (max-width: 700px) {
  .rejilla.rejilla-jornada { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* Pegada a su campo, y con el aire antes del campo siguiente. */
  .rejilla-jornada .ayuda-campo { margin-top: 8px; }
  .rejilla-jornada .ayuda-campo:not(:last-child) { margin-bottom: 16px; }
}

/* Cuatro campos cortos en una fila: los cuatro numeros del caso, o los cuatro
   datos de la sesion. `auto-fit` con un minimo mas chico que el de tres: son
   campos de dos o tres digitos y un desplegable corto, no nombres largos. En
   pantalla angosta bajan solos a dos y despues a uno. */
.rejilla.rejilla-cuatro {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  /* Alineados por abajo. Con cuatro columnas hay rotulos que no entran en un
     renglon —«Configuracion de elasticos»— y al ocupar dos empujaban su campo
     18px mas abajo que los de al lado, con la fila quedando escalonada. Todos
     los controles terminan con los mismos 18px de margen, asi que alineandolos
     por el pie quedan a la misma altura y el rotulo largo crece hacia arriba,
     que es donde hay lugar. */
  align-items: end;
}

/* Un número corto con la unidad al lado, afuera de la caja.

   La caja mide lo que mide el número —dos o tres dígitos— y la palabra que
   dice qué es queda al costado, como se lee en voz alta: «5 minutos», «24
   horas». Antes eso vivía adentro del rótulo («En minutos») o de la ayuda de
   abajo, y el campo se estiraba a la columna entera para mostrar un «5» que
   flotaba en el medio.

   Lo mismo que hace `.campo-con-unidad` con el `%` de un porcentaje, pero al
   revés: allá la unidad es un signo pegado al número y va adentro del campo;
   acá es una palabra, y adentro no entra. */
.numero-corto {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 4px;
}

.numero-corto > input[type="number"] {
  width: 74px;
  /* En cero los cuatro lados: el aire de arriba lo pone el envoltorio, si no
     se suma con el `margin-top` que traen todos los campos y la caja queda
     cuatro píxeles más abajo que la palabra que tiene al lado. */
  margin: 0;
}

.numero-corto > span { color: var(--texto-tenue); font-size: 12.5px; }

/* La lista de avisos: una línea por aviso, y cada línea se lee como una frase
   —«72 horas antes del turno»— con la equis para sacarlo al final. */
.lista-avisos {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}

/* El alto de un renglón, el mismo de los dos lados de la fila.

   La caja de las horas mide 40 y el desplegable de la hora 38, así que sin
   fijarlo la columna de la derecha se iba subiendo dos píxeles por renglón y
   para el segundo aviso ya se notaba que no estaban a la misma altura. Con el
   alto puesto —y las dos listas con el mismo aire arriba y entre renglones—
   cada fila de la izquierda mira a la de la derecha. */
.linea-aviso,
.rejilla-recordatorios .franja-horas > * { min-height: 40px; }

.linea-aviso {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--texto-tenue);
  font-size: 12.5px;
}

.linea-aviso > input[type="number"] {
  width: 74px;
  margin: 0;
}

/* La equis, al final de la línea y no pegada a la palabra: es otra cosa. */
.linea-aviso > .borrar { margin-left: 2px; }

/* El botón de agregar cierra la lista y necesita el mismo aire que cualquier
   campo antes de lo que sigue. Un `.chip` nace sin margen —casi siempre vive en
   un pie, que ya lo separa— y acá quedaba pegado al rótulo de abajo, como si
   fuera parte de él. */
.sumar-aviso { margin: 2px 0 18px; }

/* Por dónde sale cada aviso: el sobre y el globo de WhatsApp, en el botón
   redondo de la casa (`.editar-detalle`), prendidos o apagados.

   Los íconos son los mismos que el resto del sitio y el botón también: cinco
   renglones que decían «Mail WhatsApp» con todas las letras eran mucho texto
   para algo que un dibujo dice de un vistazo, y encima corrían la equis lejos
   del número al que pertenece. El nombre no se pierde: vive en el `data-ayuda`
   y en el `aria-label`.

   Prendido va relleno de dorado y no sólo con el borde: apagado y prendido
   tienen que distinguirse sin comparar contra el de al lado. */
.canales-aviso { display: flex; align-items: center; gap: 6px; }

/* Sin el margen de abajo que la casa le pone a TODA etiqueta.

   Un `label` nace con `margin-bottom: 6px` —es el aire entre el rótulo de un
   campo y el campo— y estos dos son etiquetas de un casillero, no rótulos de
   nada. Con esos seis píxeles la caja de los canales medía 32 en vez de 26, los
   dos círculos quedaban apoyados arriba y la equis, que es hermana y sí mide lo
   que mide, salía tres píxeles más abajo que ellos. */
.canal-aviso { margin: 0; }

/* El casillero sigue estando, escondido: el teclado y los lectores de pantalla
   lo necesitan, y el círculo entero es su etiqueta.

   Ocupa EXACTAMENTE el círculo —`inset: 0` sobre el label en `relative`— y no
   un punto de cero por cero. Así lo que se puede apretar es lo que se ve.

   Nombrado desde `.lista-avisos` a propósito, no por gusto: la lista vive
   adentro de un `.campo-modal`, y `.campo-modal input { width: 100% }` pesa lo
   mismo que `.canal-aviso input` y está más abajo en el archivo, así que le
   ganaba. El casillero medía OCHOCIENTOS VEINTE píxeles de ancho, el de un
   canal se montaba encima del otro, y por eso apretar «Mail» a veces apagaba
   WhatsApp: el clic caía sobre el casillero del vecino. Con el contenedor
   adelante la regla pesa más y no depende del orden. */
.lista-avisos .canal-aviso { position: relative; }

.lista-avisos .canal-aviso > input[type="checkbox"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.canal-aviso:has(input:checked) {
  background: var(--dorado);
  border-color: var(--dorado);
  color: var(--negro);
}

/* El hover de `.editar-detalle` aclara el fondo, y sobre el dorado lleno eso
   lo borraba: el prendido tiene que seguir viéndose prendido con el mouse
   encima. */
.canal-aviso:has(input:checked):hover {
  background: var(--dorado);
  border-color: var(--dorado);
  color: var(--negro);
}

.canal-aviso:has(input:focus-visible) { outline: 2px solid var(--dorado); outline-offset: 2px; }

/* La equis de sacar el aviso, en rojo al pasarle el mouse: es la única de la
   fila que no se puede deshacer con otro clic. */
.quitar-aviso:hover {
  color: var(--anulado);
  border-color: var(--anulado);
  background: none;
}

/* Los tres íconos, del mismo cuerpo. Sin esto cada uno trae el suyo —el sobre
   y el globo vienen con `.icono-dato`, la cruz también— y el círculo quedaba
   más lleno en unos que en otros. */
.canal-aviso svg,
.quitar-aviso svg { width: 15px; height: 15px; }

/* Los avisos a la izquierda y la franja horaria a la derecha, arriba de todo.

   Son dos cosas de distinto tamaño: la lista de avisos crece hasta cinco
   renglones y la franja son siempre dos. Puestas una debajo de la otra, la
   franja quedaba al fondo de la tarjeta, lejos de lo que condiciona. Al lado se
   leen juntas —cuándo sale cada uno, y entre qué horas se puede— que es como se
   piensan.

   La columna de la izquierda se lleva el lugar que sobra porque es la que puede
   crecer; la de la derecha mide lo que miden dos desplegables de hora. */
.rejilla.rejilla-recordatorios {
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 0 40px;
  align-items: start;
}

/* Cuando no hay lugar para las dos, la franja vuelve abajo.

   El corte va en 1250 y no en los 900 de siempre porque acá el que manda no es
   la ventana sino la tarjeta, y la tarjeta lleva descontado el menú de ajustes
   del costado: medido, la fila entera necesita unos 680 píxeles, y a 1250 de
   ventana la tarjeta ronda los 760. Más abajo, la línea del aviso —caja,
   palabras, las dos píldoras y la equis— se sale de su columna. */
@media (max-width: 1250px) {
  .rejilla.rejilla-recordatorios { grid-template-columns: minmax(0, 1fr); }
}

/* Adentro de esa columna, la franja va en dos renglones y no en uno: las
   palabras en una columna y los desplegables en otra, así los dos horarios
   quedan alineados uno debajo del otro y se comparan de un vistazo.

   El aire de arriba y el de entre renglones son los mismos que los de la lista
   de avisos —6 y 8— para que la fila de la izquierda y la de la derecha
   arranquen a la misma altura y sigan juntas renglón a renglón. Con 4 y 6, que
   era lo de antes, cada columna caía un par de píxeles distinta y se veía. */
.rejilla-recordatorios .franja-horas {
  display: grid;
  grid-template-columns: max-content max-content;
  align-items: center;
  gap: 8px 9px;
  margin-top: 6px;
}

/* Las palabras de la franja, centradas en su renglón: con el alto puesto se
   apoyarían arriba y quedarían más altas que el desplegable de al lado. */
.rejilla-recordatorios .franja-horas > span {
  display: flex;
  align-items: center;
}

/* La cabecera de un bloque de configuración: el título a la izquierda y el
   interruptor de la sección contra el borde derecho.

   Es `.confirmar-cabeza` + `.interruptores-titulo`, los mismos dos de la
   cabecera de un popup con interruptor (`confirmar()` de `comun.js`), sin nada
   nuevo: el interruptor va AFUERA del `h3` y no adentro. Adentro heredaba la
   versalita dorada del título y «Activo» salía en mayúsculas y espaciado, que
   no es como se ve un interruptor en ninguna otra parte del sistema.

   Lo único propio es el margen: el `h3` de un bloque lleva 14 abajo y acá lo
   pone la cabecera entera, para que el interruptor no quede más alto que el
   título al que acompaña. */
.bloque-cabeza { margin-bottom: 14px; }
.bloque-cabeza > h3 { margin-bottom: 0; }

/* Una franja de horas escrita como una frase: «empieza [10:00] y termina
   [18:00]». Los dos desplegables son parte del renglón, así que las palabras
   que los unen —«y termina», «ni después de»— quedan en el medio y no arriba
   como rótulos sueltos; el segundo solo se entiende leyendo el primero. */
.franja-horas {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 4px;
  color: var(--texto-tenue);
  font-size: 12.5px;
}

/* Un desplegable de hora mide lo que mide una hora. Sin esto se lleva el
   `width: 100%` de todos los campos y ocupa la tarjeta entera para mostrar
   cuatro dígitos y dos puntos.

   Nombrado desde el `.campo-modal` a propósito: `select.hora-corta` pesa lo
   mismo que la regla de `.campo-modal select` que le pone el ancho completo, y
   como ésa vive más abajo en el archivo, ganaba por orden. Con el contenedor
   adelante pesa más y no depende de dónde esté escrita. */
.campo-modal .franja-horas select.hora-corta,
.franja-horas select.hora-corta {
  width: auto;
  min-width: 92px;
  margin: 0;
  color: var(--texto);
}

/* Los numeros ocupan su columna entera y se leen por la derecha.

   Al ancho de tres digitos quedaban cuatro cajitas chicas con huecos de aire
   entre ellas y la fila perdia la grilla. Ocupando la columna, las cuatro
   miden igual y los bordes se alinean con la fila de abajo.

   Alineados a la derecha porque son cantidades: asi las unidades quedan una
   debajo de la otra y «8» y «12» se comparan de un vistazo, que es como se
   leen los numeros en toda la casa. */
.campo-corto input { width: 100%; text-align: right; }

/* Con el total al lado, el campo se lleva el lugar que sobra y el «/ 20» queda
   pegado al final de la columna. */
.campo-con-total input { flex: 1; min-width: 0; }

/* Lo que se entrega hoy, separado de lo que queda.
   Es la causa; los campos de abajo son la consecuencia, y la linea lo dice. */
.caja-entrega {
  padding-bottom: 14px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--borde);
}

/* El aviso ocupa el resto del renglon: cuando hay un solo maxilar sobra lugar
   al lado, y ahi es donde se lo espera. */
/* Un campo que arranca renglon: sirve para que un par que se lee junto —tipo y
   configuracion de elasticos— no quede partido entre dos filas. */
.rejilla .campo.empieza-fila { grid-column: 1; }

/* Una pildora suelta en un formulario tiene que respetar el renglon.

   `.interruptor` nace con `margin: 0` porque casi siempre vive adentro de algo
   que ya lo separa —una fila de tabla, un pie—. Puesta sola como campo del
   formulario quedaba pegada al campo de abajo. Se le dan los mismos 4/18 que
   trae cualquier control de un campo, para que el renglon mida igual que los
   demas. */
.campo > .interruptor { margin: 4px 0 18px; }

/* «2 / 20»: el numero y de cuantos, en la misma linea.

   El total va afuera del campo y no adentro porque adentro obligaria a que el
   valor guardado sea «2/20», que no es un numero. */
/* El renglon lo mide la caja, no el campo de adentro.

   La rejilla no tiene separacion vertical —`gap: 0 22px`—: los 18px de aire
   entre renglones los pone el margen de abajo de cada control. Al envolver el
   campo en esta caja, ese margen quedaba adentro y el renglon siguiente se
   pegaba al de arriba. Se le pasan los 4/18 a la caja, que es la que ahora
   hace de control. */
.campo-con-total { display: flex; align-items: center; gap: 7px; margin: 4px 0 18px; }
.campo-con-total input { margin: 0; }
.de-cuantos { color: var(--texto-tenue); font-size: 12.5px; white-space: nowrap; }

/* El aviso de la entrega vive adentro de la caja y ocupa el renglon entero,
   debajo de los campos y arriba de la linea que cierra la seccion.

   En rojo y no en el color del texto: dice que se entregaron mas alineadores de
   los que el caso tiene. Eso no es una aclaracion, es un error, y en el gris de
   siempre pasaba por comentario al pie. Se le saca la caja del `.error` —fondo,
   borde y padding— porque adentro de un formulario un recuadro rojo pesa como
   si todo el formulario estuviera mal; el color solo alcanza. */
/* «desde el 01/09/2026» debajo del dato.

   Chico y apagado: es la letra chica del dato, no el dato. Va en su propio
   renglon —no al lado— porque el valor puede ser largo («usa clase II corta
   solo de noche») y al lado lo empujaria fuera de la columna. */
.desde-cuando {
  display: block;
  margin-top: 2px;
  color: var(--texto-tenue);
  font-size: 11px;
}

.aviso-entrega {
  grid-column: 1 / -1;
  margin: -10px 0 2px;
  font-size: 12px;
}

.aviso-entrega .error {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: var(--anulado);
}

.lista-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2px 20px;
}


.plan-paciente {
  color: var(--dorado);
  text-decoration: none;
  font-size: 13.5px;
}

.plan-paciente:hover { color: var(--dorado); }

.presupuesto {
  background: var(--negro);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 18px;
  margin: 20px 0;
}

.presupuesto > small {
  display: block;
  color: var(--texto-tenue);
  font-size: 11px;
  text-align: center;
}

.presupuesto > strong {
  display: block;
  text-align: center;
  font-size: 24px;
  font-weight: 500;
  color: var(--dorado);
  margin: 4px 0 16px;
}

.presupuesto dl, .plan-meta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px 12px;
  margin: 0;
  font-size: 12.5px;
}

.presupuesto dt, .plan-meta dt { color: var(--texto-tenue); }
.presupuesto dd, .plan-meta dd { margin: 0; text-align: right; }
.presupuesto .debe { color: var(--ausente); }
.presupuesto .al-dia { color: var(--atendido); }

.plan-meta { margin-top: 22px; text-align: left; }
.plan-meta dd { text-align: right; }

.otros-planes { margin-top: 26px; }

.otros-planes > small {
  display: block;
  color: var(--texto-tenue);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 8px;
}

.otros-planes a {
  display: block;
  padding: 9px 11px;
  margin-bottom: 6px;
  background: var(--negro);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  color: var(--texto);
  text-decoration: none;
  font-size: 12.5px;
}

.otros-planes a:hover { border-color: var(--dorado); }
.otros-planes a small { display: block; color: var(--texto-tenue); font-size: 11px; }

/* ------------------------------------------------------- centro */

/* Sin aire abajo: el marco termina donde termina la ultima prestacion.

   Tenia 60px de padding inferior. Ese hueco es invisible de este lado —el fondo
   de esta columna es el de la pagina— pero la columna de al lado es BLANCA y se
   estira hasta la misma altura, asi que esos 60px se veian como una tira blanca
   colgando debajo de la ultima tarjeta.

   El aire del final de la pagina lo pone `.contenido` con su padding, que es de
   donde sale en todas las demas pantallas. */
.plan-centro { background: var(--negro); padding: 22px 24px 0; }

.plan-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.plan-cabecera h2 { margin: 0; font-size: 17px; font-weight: 500; }
.plan-acciones { display: flex; gap: 8px; flex-wrap: wrap; }

/* El botón secundario. Mismo `999px` que `.boton`: los dos son píldora y a
   cualquier alto se ven de la misma familia. */
.chip {
  background: var(--carbon);
  border: 1px solid var(--borde);
  border-radius: 999px;
  color: var(--texto);
  padding: 7px 15px;
  cursor: pointer;
  font-size: 12.5px;
  /* Hay chips que son `<a>` —«Editar» y «Horario» de sucursales, «Horarios» de
     profesionales— y el navegador les subraya el texto. Un botón no lleva
     subrayado: lo que decide cómo se ve es la forma, no la etiqueta HTML. */
  text-decoration: none;
  /* Y como `<a>` y `<button>` se alinean distinto, se los empareja acá: si no,
     dos chips uno al lado del otro quedan a distinta altura. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.chip:hover { border-color: var(--dorado); color: var(--dorado); }
.chip.dorado { background: var(--dorado); border-color: var(--dorado); color: var(--negro); font-weight: 500; }
.chip.dorado:hover { opacity: 0.88; color: var(--negro); }

/* Los botones del pie de un popup: la misma forma los dos, uno lleno y el
   otro con borde. Antes uno era píldora y el otro rectángulo, y se veía como
   si fueran cosas distintas. */
.chip.accion { padding: 10px 22px; font-size: 13px; font-weight: 500; }

/* Lo que no se deshace se ve en rojo, pero sin gritar: al lado de las otras
   opciones, un botón lleno de rojo se lleva toda la atención. */
.chip.anular { color: var(--anulado); border-color: var(--anulado); }

.chip.anular:hover,
.chip.anular.dorado {
  background: var(--anulado);
  border-color: var(--anulado);
  color: #fff;
}

.chip.peligro {
  background: var(--anulado);
  border-color: var(--anulado);
  color: #fff;
  font-weight: 500;
}

.chip.peligro:hover { opacity: 0.88; color: #fff; }

/* La acción destructiva de un diálogo va al pie del formulario y separada por
   una línea: es lo último que se lee y no se puede parecer a «Guardar», que
   está justo abajo. */
.pie-peligro {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--borde);
}

.tarjeta-panel {
  background: var(--carbon);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 20px 22px;
  margin-bottom: 18px;
}

/* Los campos del seguimiento, en columnas del ancho de su contenido.

   Era `1fr` con un minimo de 230, o sea que cuatro columnas se repartian el
   ancho entero: con dos campos cargados quedaban dos cajas enormes con un
   numero de dos digitos adentro y media pantalla en blanco al lado.

   `auto` y `justify-content: start` hacen que cada columna mida lo que mide su
   rotulo, y que las que hay se apilen contra la izquierda: «Alineadores
   superiores (total)» termina donde empieza «Alineadores inferiores (total)».
   A medida que la evolucion completa los otros campos, se van sumando al
   renglon y despues bajan solos. */
.rejilla-orto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, auto));
  justify-content: start;
  gap: 14px 28px;
}

/* El valor que se edita con un clic: se comporta como el precio de una
   prestacion, y por eso se ve igual —el lapiz al lado, apagado hasta que uno
   se acerca—. */
.valor-editable {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  border-bottom: 1px dashed transparent;
}

.valor-editable svg { width: 13px; height: 13px; color: var(--texto-tenue); opacity: 0; }
.valor-editable:hover { border-bottom-color: var(--dorado); }
.valor-editable:hover svg, .valor-editable:focus svg { opacity: 1; }
.valor-editable:focus { outline: none; border-bottom-color: var(--dorado); }

.valor-en-lugar { width: 5.5em; margin: 0; padding: 3px 7px; }

/* Un campo que sale de una cuenta: se ve que esta ahi pero que no se escribe.

   Apagado y sin cursor de texto. Sin esto parecia un campo comun y la primera
   reaccion era tipear encima, que es justo lo que no tiene que pasar: el numero
   sale de lo que se entrego, y desalinearlo deja la proxima cuenta partiendo de
   algo que no se corresponde con nada. */
input[data-evo][readonly] {
  background: var(--superficie2);
  color: var(--texto-tenue);
  cursor: default;
}

/* El lapiz que lo destraba, pegado al rotulo y en chico: es una excepcion, no
   la manera normal de cargar el dato. */
.campo label .destrabar { padding: 0 0 0 4px; vertical-align: -2px; }
.campo label .destrabar svg { width: 12px; height: 12px; }
.destrabar.destrabado { color: var(--dorado); }

.segmento small {
  display: block;
  color: var(--texto-tenue);
  font-size: 11px;
  margin-bottom: 4px;
}

.segmento span { font-size: 13.5px; }

.segmento input {
  width: 100%;
  margin: 0;
  padding: 8px 11px;
  font-size: 13px;
}

.pie-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--borde);
}

.pie-panel small { color: var(--texto-tenue); }

/* La respuesta de «Guardar seguimiento», con aire.

   `.aviso` trae margen abajo y ninguno arriba —esta pensado para encabezar un
   formulario— y aca aparece DESPUES del boton, asi que quedaba pegado a el,
   como si fuera parte del boton y no su respuesta. Se lo da vuelta: aire
   arriba, y abajo lo que ya pone el panel. */
[data-aviso-etapa]:not(:empty) { margin-top: 16px; }
[data-aviso-etapa] .aviso,
[data-aviso-etapa] .error { margin-bottom: 0; }

.ultima-evolucion {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--borde);
}

.ultima-evolucion > small { color: var(--dorado); font-size: 11.5px; }

/* ------------------------------------------------- prestaciones */

.nueva-prestacion {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 13px 16px;
  margin-bottom: 20px;
}

.nueva-prestacion summary { cursor: pointer; color: var(--dorado); }
.nueva-prestacion[open] summary { margin-bottom: 16px; }

.tabla-prestaciones td { vertical-align: top; }
.tabla-prestaciones small { color: var(--texto-tenue); font-size: 11px; }
.tabla .der { text-align: right; }
.tabla-prestaciones tr.pendiente td { opacity: 0.78; }

.tilde {
  background: none;
  border: none;
  color: var(--atendido);
  font-size: 16px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.tabla-prestaciones tr.pendiente .tilde { color: var(--texto-tenue); }
button.tilde:hover { color: var(--dorado); }

/* `vertical-align: middle` y no el `baseline` que trae por defecto un
   `inline-block`: con baseline el punto se apoya en la linea del texto, o sea
   unos pixeles MAS ABAJO del medio de la fila, y quedaba desalineado con el
   tilde de la primera columna —que ya venia en `middle`— y con los montos. */
.punto-pago {
  display: inline-block;
  vertical-align: middle;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.pago-si { background: var(--atendido); }
.pago-no { background: var(--ausente); }
.de-este-plan td { background: var(--dorado-suave); }

/* ------------------------------------------------------- cajón */

.cajon {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 50;
  display: flex;
  justify-content: flex-end;
}

.cajon-caja {
  width: min(680px, 100%);
  height: 100%;
  overflow-y: auto;
  background: var(--carbon);
  border-left: 1px solid var(--borde);
  padding: 24px 26px 60px;
}

.cajon-cerrar { float: right; }
.cajon h2 { margin: 0 0 20px; font-size: 18px; font-weight: 500; }

a.plan { display: block; text-decoration: none; color: inherit; transition: border-color 0.12s; }
a.plan:hover { border-color: var(--dorado); }

/* ------------------------------------------------- ajustes por tema */

/* En claro las superficies necesitan una sombra suave: sin el contraste
   del fondo negro, los bordes solos no separan lo suficiente. */
[data-tema="claro"] .tarjeta,
[data-tema="claro"] .tarjeta-panel,
[data-tema="claro"] .plan,
[data-tema="claro"] .presupuesto,
[data-tema="claro"] .ingreso-caja,
[data-tema="claro"] .resultados,
[data-tema="claro"] .hito-caja {
  box-shadow: var(--sombra);
}

[data-tema="claro"] .turno { background: var(--turno); box-shadow: var(--sombra); }
[data-tema="claro"] .turno:hover { background: var(--turno-alto); }
[data-tema="claro"] .vista.activa,
[data-tema="claro"] .chip.dorado,
[data-tema="claro"] .boton { background: var(--dorado-fuerte); color: #16161a; }
/* En la grilla del día y de la semana el casillero libre va opaco —la línea
   de fondo no tiene que cruzarlo—; en la semana vieja de tarjetas seguía
   apoyado. Ahora es el mismo color en los dos lados. */
[data-tema="claro"] .hueco { background: var(--hueco-fondo); }

/* El interruptor de tema */
.tema {
  background: none;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  color: var(--texto-tenue);
  cursor: pointer;
  padding: 7px 11px;
  font-size: 14px;
  line-height: 1;
}

.tema:hover { border-color: var(--dorado); color: var(--dorado); }

/* El logo mientras arranca el sistema: grande, pero sin pasarse del ancho
   de la pantalla en un celular. */
/*
 * Y el logo del arranque va arriba de las otras capas.
 *
 * Asi el ingreso se acomoda ABAJO del logo —se mide, se centra, carga su marca,
 * cambia de tipografia si tiene que cambiar— y el logo se corre recien cuando
 * esa caja dejo de moverse. Lo primero que se ve del ingreso es el ingreso
 * terminado.
 */
#arrancando { z-index: 61; }

/* Lo mismo para el logo del arranque: reserva su lugar y no empuja nada. */
.marca-carga img {
  width: min(400px, 70vw);
  aspect-ratio: 1063 / 470;
  opacity: 0.5;
  animation: latir 1.4s ease-in-out infinite;
}

@keyframes latir {
  0%, 100% { opacity: 0.28; }
  50%      { opacity: 0.62; }
}

/* ------------------------------------------- cabecera fija de la ficha */

.ficha-fija {
  position: sticky;
  top: 58px;
  z-index: 15;
  background: var(--fondo);
  border-bottom: 1px solid var(--borde);
}

.avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--dorado-suave);
  border: 1px solid var(--dorado-fuerte);
  color: var(--dorado);
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 500;
  flex-shrink: 0;
}

.ficha-identidad { display: flex; gap: 12px; align-items: center; }

.ficha-id {
  color: var(--texto-tenue);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ficha-cabeza { padding: 12px 28px 10px; border-bottom: none; }
.ficha-cabeza h1 { font-size: 19px; }

.volver-planes { color: var(--dorado); }

.plan-chip {
  align-self: center;
  padding: 5px 13px;
  border-radius: 20px;
  background: var(--dorado-fuerte);
  color: #16161a;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
}

/* ----------------------------------------------- etapas colapsables */

.etapa {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  margin-bottom: 14px;
  overflow: hidden;
}

.etapa summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 13px 18px;
  cursor: pointer;
  list-style: none;
}

.etapa summary::-webkit-details-marker { display: none; }

.etapa summary::after {
  color: var(--texto-tenue);
  margin-left: 6px;
  transition: transform 0.15s;
}

.etapa[open] summary::after { transform: rotate(0deg); }
.etapa summary:hover { background: var(--dorado-suave); }
.etapa-nombre { font-weight: 500; }
.etapa-datos { color: var(--texto-tenue); font-size: 12px; margin-left: auto; }
.etapa .tabla { border-top: 1px solid var(--borde); }
.etapa .tabla th:first-child, .etapa .tabla td:first-child { padding-left: 18px; }

.otros-planes button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 11px;
  margin-bottom: 6px;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  color: var(--texto);
  cursor: pointer;
  font-size: 12.5px;
}

.otros-planes button:hover { border-color: var(--dorado); }
.otros-planes button small { display: block; color: var(--texto-tenue); font-size: 11px; }

button.plan { text-align: left; font: inherit; cursor: pointer; width: 100%; }

.formulario-evolucion { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--borde); }

/* La rejilla del plan dentro de la ficha no necesita altura completa */
.contenido .plan-marco { min-height: auto; border-radius: var(--radio); overflow: hidden; }
.contenido .plan-lateral { min-height: auto; }

/* ---------------------------------------------- titulo editable del plan */

.titulo-editable {
  width: 100%;
  margin: 4px 0 6px;
  padding: 6px 10px;
  font-size: 20px;
  font-weight: 500;
  font-family: inherit;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radio);
  color: var(--texto);
}

.titulo-editable:hover { border-color: var(--borde); }
.titulo-editable:focus { border-color: var(--dorado); background: var(--fondo); outline: none; }

/* ----------------------------------------------------- boton flotante */

.fab {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 60;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--dorado-fuerte);
  background: var(--dorado-fuerte);
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  display: grid;
  place-items: center;
}

.fab:hover { transform: scale(1.06); }

.fab-numero {
  position: absolute;
  top: -5px;
  right: -5px;
  background: var(--fondo);
  color: var(--dorado);
  border: 1px solid var(--dorado);
  border-radius: 20px;
  min-width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 0 5px;
}

/* ------------------------------------------------- popup de evoluciones */

.popup-evoluciones {
  position: fixed;
  right: 26px;
  bottom: 96px;
  z-index: 59;
  width: min(560px, calc(100vw - 52px));
  max-height: min(72vh, 760px);
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.popup-cabeza {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--borde);
}

.popup-cabeza strong { font-weight: 500; margin-right: auto; }

.popup-cuerpo { overflow-y: auto; padding: 0 18px 22px; }

/* Agrupadas por fecha: la fecha una sola vez por dia. */
.dia-evoluciones { margin-bottom: 8px; }

.dia-fecha {
  position: sticky;
  top: 0;
  /* Se estira hasta los bordes del popup: si no, el texto que pasa por
     atras se ve en el hueco del padding. */
  margin: 0 -18px;
  padding: 10px 18px 6px;
  background: var(--superficie);
  color: var(--dorado);
  font-size: 12px;
  font-weight: 500;
  border-bottom: 1px solid var(--borde);
  z-index: 2;
}

.item-evolucion {
  padding: 12px 0 12px 12px;
  border-left: 2px solid var(--borde);
  margin: 10px 0 10px 4px;
}

.item-evolucion:hover { border-left-color: var(--dorado); }

/* La firma: al final, alineada a la izquierda con el texto, y en UN renglon.

   `nowrap` es el punto de la regla. Un nombre como «Dra. Maria Azul Vergara»
   partido en dos deja de leerse como un nombre y ensucia el final de cada
   evolucion. Aca abajo tiene el ancho completo, asi que no partirlo no lo
   empuja fuera de la caja.

   A la izquierda y no contra el borde derecho: arranca en la misma linea que
   la etiqueta y el texto de arriba, asi la evolucion entera se lee bajando por
   un solo margen en vez de saltar de un lado al otro. */
.firma-evolucion {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  margin-top: 8px;
  color: var(--texto-tenue);
  font-size: 12px;
  white-space: nowrap;
}

.lapiz {
  background: none;
  border: none;
  color: var(--texto-tenue);
  cursor: pointer;
  font-size: 13px;
  padding: 0 4px;
}

.lapiz:hover { color: var(--dorado); }

/* El dibujo adentro del lapiz, con tamaño.

   `.lapiz` nacio para el caracter «✎», y para un caracter alcanza con el
   `font-size`. Cuando se le empezo a poner el SVG de la casa, ese SVG no tenia
   quien le dijera cuanto medir: se aplastaba a 8 pixeles de ancho por 20 de
   alto y quedaba una rayita vertical que no se leia como un lapiz ni se veia
   como algo apretable. Le pasaba al de editar una evolucion y al de cargar la
   cantidad de alineadores.

   15px es la misma medida que usan los botones de accion del sistema.

   `.borrar` va en la misma regla: es el mismo boton chico con otro hover —el
   rojo en vez del dorado— y nacio igual, para el caracter «✕». El dia que se
   le pone el SVG de la papelera le pasa exactamente lo mismo. */
.lapiz svg,
.borrar svg { width: 15px; height: 15px; vertical-align: -3px; }

.marca-edicion { display: block; color: var(--texto-tenue); font-size: 11px; margin-top: 6px; font-style: italic; }

.versiones { margin-top: 6px; }
.versiones summary { color: var(--texto-tenue); font-size: 11.5px; cursor: pointer; }
.versiones summary:hover { color: var(--dorado); }

.version {
  margin: 8px 0 8px 10px;
  padding: 8px 12px;
  border-left: 2px dashed var(--borde);
  opacity: 0.75;
}

.version small { display: block; color: var(--texto-tenue); font-size: 11px; margin-bottom: 4px; }

.editor-evolucion { margin-top: 10px; }
.editor-evolucion input, .editor-evolucion textarea { margin-bottom: 10px; }

/* --------------------------------------------------------- borrar */

.borrar {
  background: none;
  border: none;
  color: var(--texto-tenue);
  cursor: pointer;
  font-size: 13px;
  padding: 2px 6px;
}

.borrar:hover { color: var(--anulado); }

.etapa summary .lapiz { margin-right: auto; }

/* ------------------------------------------------------- titulo del plan */

.titulo-fila { display: flex; align-items: center; gap: 6px; }
.titulo-fila h1 { margin: 4px 0 6px; font-size: 21px; font-weight: 500; }
#titulo-editor input { margin: 4px 0 6px; font-size: 18px; }

/* ------------------------------------------------------------- cobros */

.tabla-cobro input[type="number"] {
  width: 120px;
  margin: 0;
  padding: 6px 9px;
  text-align: right;
}

.tabla-cobro input[type="checkbox"] { accent-color: var(--dorado-fuerte); cursor: pointer; }
.tabla tr.anulada td { opacity: 0.45; text-decoration: line-through; }
.etiqueta.anulado { background: rgba(140, 74, 74, 0.16); color: #c98b8b; }

.resumen-cobro {
  max-width: 560px;
  margin: 20px 0 6px auto;
  padding: 16px 18px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

.resumen-cobro > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 7px 0;
  font-size: 13px;
}

.resumen-cobro .libre { border-top: 1px solid var(--borde); padding-top: 12px; }
/* El campo del monto, y SOLO el campo del monto.

   Decia `.libre input` a secas, y adentro de `.libre` hay dos: el monto y el
   interruptor de prenderlo. El interruptor es un `input[type=checkbox]`, asi
   que se comia los 150px de ancho —y el `text-align: right`— y quedaba una
   pildora larguisima ocupando media caja. Las dos reglas tienen la misma
   especificidad, asi que ganaba esta por venir despues en el archivo. */
.resumen-cobro .libre input[type="number"] {
  width: 150px;
  margin: 0;
  padding: 7px 10px;
  text-align: right;
}

.resumen-cobro .total {
  border-top: 1px solid var(--borde);
  margin-top: 6px;
  padding-top: 12px;
  font-size: 15px;
}

.resumen-cobro .total strong { color: var(--dorado); font-size: 19px; }
.resumen-cobro .nota { display: block; margin-top: 8px; }

.medio {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 16px;
  margin-bottom: 10px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

.medio .campo { margin: 0; min-width: 190px; }
.medio .campo input, .medio .campo select { margin: 0; }
.medio .quitar-medio { margin-bottom: 10px; }

#aviso-cierre.ok  { color: var(--atendido); }
#aviso-cierre.mal { color: var(--ausente); }

/* --------------------------------------------- botonera de prestaciones */

.botonera-prestaciones {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.menu-acciones { position: relative; }

/*
 * Los menúes cuelgan del `body` y se ubican con coordenadas de la página, así
 * que su z-index compite con el de los modales, no con el de su campo.
 *
 * Estaba en 30 contra 70 del modal y 90 del que va encima: un desplegable
 * adentro de un cartel se abría DETRÁS del cartel. Parecía que se cerraba solo
 * y el clic terminaba en el fondo, que cerraba el cartel entero.
 *
 * Cualquier flotante nuevo va acá arriba: 200 el menú, 210 el globo de ayuda,
 * que tiene que poder explicar una opción del menú.
 */
.menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 200;
  min-width: 260px;
  background: var(--superficie2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--texto);
  padding: 11px 15px;
  cursor: pointer;
  font-size: 13px;
}

.menu button:hover { background: var(--dorado-suave); color: var(--dorado); }

/* Lo que está a la vista pero no se puede hacer: se ve apagado y no responde
   al mouse. Esconderlo sería peor: se busca la opción y no aparece. */
.menu button:disabled { opacity: 0.45; cursor: default; }
.menu button:disabled:hover { background: none; color: var(--texto); }

/* ------------------------------------------------------------- piezas */

.celda-piezas { white-space: normal; min-width: 130px; }

/* El número de la pieza va con el color de texto normal y el borde dorado:
   con dorado sobre dorado suave apenas se leía, y encima la fila pendiente
   va atenuada. */
.pieza-chip {
  display: inline-block;
  background: var(--dorado-suave);
  border: 1px solid var(--dorado-fuerte);
  color: var(--texto);
  border-radius: 5px;
  padding: 1px 7px;
  margin: 0 4px 3px 0;
  font-size: 11.5px;
  font-weight: 600;
}

.pieza-chip small {
  color: var(--dorado);
  opacity: 1;
  margin-left: 4px;
  font-size: 10px;
  font-weight: 600;
}
.sin-piezas { color: var(--texto-tenue); }

.diente-boton {
  background: none;
  border: 1px dashed var(--borde);
  border-radius: 5px;
  cursor: pointer;
  padding: 1px 6px;
  font-size: 13px;
  line-height: 1.4;
}

.diente-boton:hover { border-color: var(--dorado); }

.monto-inline {
  width: 110px;
  margin: 0;
  padding: 5px 8px;
  text-align: right;
  font-size: 12.5px;
}

.pago-parcial { background: var(--confirmado); }

/* --------------------------------------------------- modal de piezas */

.modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(0, 0, 0, 0.72);
  display: grid;
  place-items: center;
  padding: 24px;
}

.modal-caja {
  width: min(880px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 14px;
  overflow: hidden;
}

.modal-cabeza, .modal-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 20px;
}

.modal-cabeza { border-bottom: 1px solid var(--borde); }
.modal-pie { border-top: 1px solid var(--borde); }
.modal-pie small { color: var(--texto-tenue); }
.modal-cuerpo { overflow-y: auto; padding: 18px 20px; }
.modal-cuerpo h3 { margin: 20px 0 10px; }
.modal-cuerpo h3:first-of-type { margin-top: 6px; }

.arcadas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 26px;
  max-width: 720px;
}

.cuadrante small {
  display: block;
  color: var(--texto-tenue);
  font-size: 11px;
  margin-bottom: 5px;
}

.dientes { display: flex; gap: 4px; flex-wrap: wrap; }

.diente {
  width: 38px;
  height: 34px;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 6px;
  color: var(--texto);
  cursor: pointer;
  font-size: 12px;
}

.diente:hover { border-color: var(--dorado); }

.diente.elegido {
  background: var(--dorado-fuerte);
  border-color: var(--dorado-fuerte);
  color: #16161a;
  font-weight: 600;
}

.temporales { margin-top: 16px; }
.temporales summary { cursor: pointer; color: var(--texto-tenue); font-size: 12.5px; }
.temporales[open] summary { margin-bottom: 12px; }
.modal-cuerpo input[type="checkbox"] { accent-color: var(--dorado-fuerte); cursor: pointer; }

/* ------------------------------------------------ secciones editables */

.etapa summary {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 4px 0;
}

.etapa-nombre.editable {
  outline: none;
  border-bottom: 1px solid transparent;
  padding: 2px 4px;
  min-width: 140px;
  cursor: text;
  border-radius: 4px;
}

.etapa-nombre.editable:hover { border-bottom-color: var(--borde); }

.etapa-nombre.editable:focus {
  border-bottom-color: var(--dorado);
  background: var(--fondo);
}

/* Cuando el nombre está vacío se muestra el texto guía. */
.etapa-nombre.editable:empty::before {
  content: attr(data-vacio);
  color: var(--texto-tenue);
  font-style: italic;
}

.etapa-datos { margin-left: auto; color: var(--texto-tenue); font-size: 12px; }

.menu-seccion { position: relative; }

.puntos {
  background: none;
  border: none;
  color: var(--texto-tenue);
  cursor: pointer;
  font-size: 17px;
  padding: 0 6px;
  line-height: 1;
}

.puntos:hover { color: var(--dorado); }
.menu-seccion .menu {
  position: fixed;
  top: auto;
  left: auto;
  right: auto;
  min-width: 300px;
}

.menu-seccion .menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 11px 15px;
}

/* El buscador de adentro de un menú: apenas un renglón, sin el aire de un
   campo de formulario. El aire lo pone la caja que lo envuelve, para que la
   cruz quede centrada contra el campo y no contra el campo más su margen. */
input.buscar-en-menu {
  width: 100%;
  margin: 0;
  padding: 5px 8px;
  font-size: 12.5px;
}

.menu-motivo-fijo .campo-con-equis { margin: 4px 0 6px; }

/* El menú se abre adentro de la pantalla del plan, y ahí los `small` son
   rótulos en mayúsculas («PROFESIONAL», «ABONADO»). El de una opción del
   menú no es un rótulo sino una frase, y en mayúsculas se leía a los gritos:
   acá se corta esa herencia para que quede igual en todos los menúes. */
.menu button small {
  display: block;
  color: var(--texto-tenue);
  font-size: 11px;
  margin-top: 2px;
  text-transform: none;
  letter-spacing: normal;
}

.seccion-vacia {
  padding: 18px 14px;
  color: var(--texto-tenue);
  font-size: 12.5px;
  font-style: italic;
}

/* --------------------------------------------------- catálogo en popup */

.modal-caja.catalogo { width: min(720px, 100%); height: min(80vh, 780px); }
.modal-caja.angosta { width: min(520px, 100%); }

/* Para lo que se lee en filas —el historial de un turno— y no entra cómodo en
   la angosta: tres columnas con fechas largas necesitan aire. */
.modal-caja.ancha { width: min(760px, 100%); }

/* El detalle de lo que un profesional no cobró: siete columnas, tres de ellas
   con importes. En 760 px la tabla no entraba y aparecía un scroll horizontal
   adentro del cartel, que es lo peor de los dos mundos: no se ve todo y hay que
   arrastrar para leer un renglón. */
#modal-mostrar .modal-caja.sin-cobrar { width: min(1120px, 96vw); }

/* Fecha, paciente e importes en una línea: son cortos y partidos hacían un
   renglón de cuatro líneas de alto por una prestación. El ancho que sobra se lo
   lleva la prestación, que es la única que de verdad es larga. */
.tabla-sin-cobrar td:first-child,
.tabla-sin-cobrar td:nth-child(2),
.tabla-sin-cobrar td.der { white-space: nowrap; }

/* --------------------------------------------- las listas de precios */

/* El nombre del arancel y sus marcas, en un renglón.

   Las marcas —predeterminado, base, dado de baja— son adjetivos del nombre, no
   datos aparte: van al lado y no debajo. `.pieza-chip` trae un margen inferior
   pensado para cuando se apilan de a muchas; acá no se apilan, así que se lo
   saca para que el renglón quede centrado. */
.arancel-nombre {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.arancel-nombre .pieza-chip { margin: 0; }

/* Los números ocupan lo que miden y el nombre se queda con el resto: son tres
   columnas de dos o tres cifras, y repartir el ancho en partes iguales le comía
   al nombre justo el espacio que necesita. */
.tabla-aranceles th.der, .tabla-aranceles td.der { width: 1%; white-space: nowrap; }

.cat-buscador { padding: 12px 20px; border-bottom: 1px solid var(--borde); }
.cat-buscador input { margin: 0; }
.cat-lista { padding: 0; }

.fila-catalogo {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--borde);
  color: var(--texto);
  padding: 13px 20px;
  cursor: pointer;
  font-size: 13.5px;
}

.fila-catalogo:hover {
  background-image: linear-gradient(var(--dorado-suave), var(--dorado-suave));
}

.fila-catalogo.elegida {
  background: var(--dorado-suave);
  box-shadow: inset 3px 0 0 var(--dorado-fuerte);
}

.fila-catalogo > span:first-child { flex: 1; }
.fila-catalogo .cat-de { display: block; color: var(--texto-tenue); font-size: 11px; }
.fila-catalogo .cat-precio { color: var(--dorado); white-space: nowrap; }
.flecha-cat { color: var(--texto-tenue); font-size: 17px; }

.volver-cat {
  background: none;
  border: none;
  color: var(--texto-tenue);
  font-size: 21px;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}

.volver-cat:hover { color: var(--dorado); }
.cat-pie { align-items: center; }
.cat-elegida strong { display: block; font-weight: 500; font-size: 13.5px; }
.cat-elegida small { color: var(--texto-tenue); font-size: 11.5px; }

.cat-derecha {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.cat-derecha select { width: auto; margin: 0; padding: 8px 34px 8px 11px; font-size: 12.5px; }
.cat-total { color: var(--dorado); font-size: 17px; font-weight: 500; }
#cat-aviso:not(:empty) { padding: 0 20px 14px; }

/* ------------------------------------------- simulación en el menú */


/* ------------------------------------ anchos de la tabla de prestaciones */

/* El nombre se lleva el espacio; los montos son cortos y no necesitan tanto. */
.tabla-prestaciones { table-layout: fixed; width: 100%; }

.tabla-prestaciones .col-elegir { width: 34px; }
.tabla-prestaciones .col-estado { width: 44px; text-align: center; }
.tabla-prestaciones .col-nombre { width: auto; }
.tabla-prestaciones .col-piezas { width: 150px; }
.tabla-prestaciones .col-fecha  { width: 92px; }
.tabla-prestaciones .col-prof   { width: 130px; }
.tabla-prestaciones .col-dscto  { width: 78px; }
.tabla-prestaciones .col-precio { width: 112px; }
.tabla-prestaciones .col-total  { width: 112px; }
.tabla-prestaciones .col-pago   { width: 54px; text-align: center; }
.tabla-prestaciones .col-borrar { width: 40px; }

.tabla-prestaciones .col-nombre,
.tabla-prestaciones .col-prof { word-break: break-word; }

/* Íconos de realizado y de pago, más grandes y legibles. */
.tilde {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--pendiente);
  background: none;
  color: var(--pendiente);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.tabla-prestaciones tr.hecha .tilde {
  border-color: var(--atendido);
  color: var(--atendido);
}

button.tilde:hover { border-color: var(--dorado); color: var(--dorado); }

.punto-pago {
  display: inline-block;
  vertical-align: middle;
  width: 15px;
  height: 15px;
  border-radius: 50%;
}

/* Montos: texto que se vuelve editable al hacer clic. */
.monto-editable {
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 2px 3px;
  border-radius: 4px;
  white-space: nowrap;
}

.monto-editable:hover {
  border-bottom-color: var(--dorado);
  color: var(--dorado);
}

.lapiz-mini {
  opacity: 0;
  margin-left: 4px;
  font-size: 11px;
}

.monto-editable:hover .lapiz-mini { opacity: 0.8; }

/* ----------------------------------------------- diálogos del sistema */

.confirmar-titulo {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 500;
  color: var(--texto);
  text-transform: none;
  letter-spacing: 0;
}

/* El título de un diálogo y, contra el borde derecho, el interruptor que prende
   o apaga lo que se está editando.

   Es UN LUGAR FIJO en todo el sistema: «En uso», «Encendido», «Activo» no son
   un campo más del formulario —mandan sobre todos los demás—, y perdidos en el
   medio, entre los campos que describen la cosa, había que buscarlos para saber
   si eso estaba andando. Arriba a la derecha se ve al abrir, sin leer nada. */
.confirmar-cabeza {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

/* `stretch`: los dos renglones miden lo que mide el más largo, así las perillas
   quedan una arriba de la otra y no escalonadas según el largo del rótulo. */
.interruptores-titulo {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-top: 1px;
}

/* El rótulo a la izquierda y la perilla contra el borde derecho, con el aire
   sobrante en el medio: los textos terminan pegados a su perilla. */
.interruptor-titulo {
  justify-content: flex-end;
  color: var(--texto);
  white-space: nowrap;
}

.confirmar-texto { font-size: 13.5px; line-height: 1.6; }
.confirmar-texto p { margin: 0 0 10px; }
.confirmar-texto p:last-child { margin-bottom: 0; }

.boton.peligro { background: var(--anulado); color: #fff; }
.boton.peligro:hover { opacity: 0.9; }

.campo-numero {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 16px;
}

.campo-numero input {
  margin: 0;
  width: 150px;
  text-align: right;
  font-size: 16px;
}

.campo-numero span { color: var(--texto-tenue); font-size: 15px; }

.tipo-dscto {
  display: flex;
  gap: 18px;
  margin-top: 16px;
}

.tipo-dscto label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  cursor: pointer;
  font-size: 13px;
  color: var(--texto);
  text-transform: none;
  letter-spacing: 0;
}

.tipo-dscto input { accent-color: var(--dorado-fuerte); cursor: pointer; }

/* En una ventana angosta el lateral fijo de 320px no deja lugar al plan:
   ahí se apilan en vez de quedar aplastados. */
@media (max-width: 900px) {
  .plan-marco { grid-template-columns: 1fr; }
  .plan-lateral { min-height: 0; }
}

/* ------------------------------------------- ajustes de la tabla (v2) */

/* Selección y estado: justo lo que ocupa el control. Lo que se ahorra
   se lo lleva el nombre de la prestación, que es lo que hay que leer. */
.tabla-prestaciones .col-elegir { width: 30px; padding-left: 8px; padding-right: 0; }
.tabla-prestaciones .col-estado { width: 36px; padding-left: 4px; padding-right: 4px; }
.tabla-prestaciones .col-nombre { width: auto; }
.tabla-prestaciones .col-piezas { width: 132px; }
.tabla-prestaciones .col-fecha  { width: 88px; }
.tabla-prestaciones .col-prof   { width: 120px; }
.tabla-prestaciones .col-precio { width: 108px; }
.tabla-prestaciones .col-dscto  { width: 96px; }
.tabla-prestaciones .col-total  { width: 108px; }
.tabla-prestaciones .col-pago   { width: 46px; text-align: center; padding-left: 0; padding-right: 0; }
.tabla-prestaciones .col-borrar { width: 34px; padding-left: 0; }

.tabla-prestaciones th:first-child,
.tabla-prestaciones td:first-child { padding-left: 8px; }

/* El nombre entra en una línea siempre que se pueda. */
.tabla-prestaciones .col-nombre {
  word-break: normal;
  overflow-wrap: anywhere;
}

/* Impaga: rojo de verdad, no naranja. */
:root, [data-tema="oscuro"] { --impago: #e03131; }
[data-tema="claro"]        { --impago: #d12b2b; }

.pago-no { background: var(--impago); }

/* ---------------------------------------------- edición en el lugar */

.monto-editable {
  display: inline-block;
  border-bottom: 1px dashed transparent;
  padding: 1px 3px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}

.monto-editable:hover,
.monto-editable:focus {
  border-bottom-color: var(--dorado);
  color: var(--dorado);
  outline: none;
}

.col-precio, .col-dscto { position: relative; }

.monto-en-lugar {
  width: 100%;
  margin: 0;
  padding: 4px 7px;
  text-align: right;
  font-size: 13px;
  border-color: var(--dorado);
}

/* Globito de ayuda debajo del campo, como el de Dentalink. */
.globo-ayuda {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  /* Por encima de los popups: adentro de uno, el globo quedaba detrás y no se
     leía justo donde más falta hace, que es explicando un botón chiquito. */
  z-index: 130;
  width: 250px;
  background: var(--superficie2);
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--texto-tenue);
  text-align: left;
  white-space: normal;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

.globo-ayuda::before {
  content: '';
  position: absolute;
  top: -5px;
  right: 24px;
  width: 8px;
  height: 8px;
  background: var(--superficie2);
  border-left: 1px solid var(--borde);
  border-top: 1px solid var(--borde);
  transform: rotate(45deg);
}

.globo-ayuda strong { color: var(--texto); }
.guardando { color: var(--texto-tenue); font-size: 12px; font-style: italic; }

/* Un modal que se abre sobre otro tiene que quedar adelante. */
.modal-encima { z-index: 90; }

/* ------------------------------------------- anchos de prestaciones (v3) */

/* Se vuelve a `auto`: con `fixed` los anchos fijos sumaban más que el ancho
   disponible y al nombre de la prestación le quedaban unos pocos píxeles.
   Ahora las columnas de datos piden lo mínimo y el nombre se queda con
   todo el resto. */
.tabla-prestaciones { table-layout: auto; width: 100%; }

.tabla-prestaciones th,
.tabla-prestaciones td { padding: 10px 8px; }

/* Selección y estado: solo lo que ocupa el control, sin aire alrededor. */
.tabla-prestaciones .col-elegir,
.tabla-prestaciones th:first-child {
  width: 1%;
  padding: 10px 2px 10px 10px;
}

.tabla-prestaciones .col-estado,
.tabla-prestaciones thead th:nth-child(2) {
  width: 1%;
  padding: 10px 6px 10px 2px;
  text-align: center;
}

.tabla-prestaciones .col-elegir input { display: block; margin: 0 auto; }

/* El nombre se lleva todo el espacio libre. */
.tabla-prestaciones .col-nombre,
.tabla-prestaciones thead th:nth-child(3) {
  width: auto;
  min-width: 220px;
  word-break: normal;
  overflow-wrap: break-word;
}

/* El resto pide lo justo y no se parte en dos líneas. */
.tabla-prestaciones .col-piezas { width: 1%; white-space: nowrap; }
.tabla-prestaciones .col-fecha,
.tabla-prestaciones .col-precio,
.tabla-prestaciones .col-dscto,
.tabla-prestaciones .col-total  { width: 1%; white-space: nowrap; }
.tabla-prestaciones .col-prof   { width: 1%; white-space: nowrap; max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.tabla-prestaciones .col-pago   { width: 1%; padding: 10px 6px; text-align: center; }
.tabla-prestaciones .col-borrar { width: 1%; padding: 10px 8px 10px 2px; }

.tabla-prestaciones thead th { white-space: nowrap; }

/* El globo de ayuda cuelga del campo, no del final de la fila: para eso el
   input y el globo van dentro de un contenedor posicionado. */
.celda-editando { position: relative; display: block; }
.col-precio, .col-dscto { position: static; }

.celda-editando .globo-ayuda {
  top: calc(100% + 7px);
  right: 0;
}

/* --------------------------------------- más aire para el nombre (v4) */

/* El panel lateral cede 40px y las celdas apretan el padding: todo eso
   se lo lleva el nombre de la prestación, que es lo que hay que leer. */
.plan-marco { grid-template-columns: 280px minmax(0, 1fr); }
.plan-lateral { padding: 22px 18px 40px; }

.tabla-prestaciones th,
.tabla-prestaciones td { padding: 10px 6px; }

.tabla-prestaciones .col-nombre,
.tabla-prestaciones thead th:nth-child(3) { min-width: 300px; }

.tabla-prestaciones .col-nombre { line-height: 1.35; }
.tabla-prestaciones .col-nombre small { font-size: 10.5px; }

/* El profesional se muestra corto; el nombre completo va en el tooltip. */
.tabla-prestaciones .col-prof { max-width: 92px; font-size: 12px; }
.tabla-prestaciones .col-pago { padding: 10px 4px; }
.tabla-prestaciones .col-fecha { font-size: 12px; }

/* Los importes, algo más compactos. */
.tabla-prestaciones .col-precio,
.tabla-prestaciones .col-dscto,
.tabla-prestaciones .col-total { font-size: 12.5px; }

/* ------------------------------------------ prestaciones: fila (v5) */

/* Todo centrado verticalmente: antes cada celda se alineaba arriba y con
   nombres de dos líneas quedaba todo desparejo. */
.tabla-prestaciones td { vertical-align: middle; }
.tabla-prestaciones th { vertical-align: bottom; }

/* El nombre es un botón: abre el detalle de la prestación. */
.nombre-prestacion {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  padding: 0;
  cursor: pointer;
  line-height: 1.35;
}

.nombre-prestacion:hover { color: var(--dorado); }

.nombre-prestacion small {
  display: block;
  color: var(--texto-tenue);
  font-size: 10.5px;
  margin-top: 1px;
}

.abrir-detalle {
  background: none;
  border: none;
  color: var(--texto-tenue);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 4px 6px;
}

.abrir-detalle:hover { color: var(--dorado); }
.tabla-prestaciones .col-abrir { width: 1%; padding: 10px 8px 10px 2px; text-align: center; }
.tabla-prestaciones tr.abierta > td { background: var(--dorado-suave); }

/* --------------------------------------------- detalle desplegable */

.fila-detalle > td { padding: 0 !important; background: var(--superficie2); }

.detalle-prestacion {
  display: flex;

  /* Centrado, no arriba: el tachito queda a la altura media de la prestacion
     que va a borrar, en vez de pegado al techo del bloque mientras el detalle
     baja tres renglones. Lo que manda el alto es la grilla de datos, que es lo
     alto; el tachito se acomoda contra ella. */
  align-items: center;

  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;

  /* 14 a la derecha y no 20: es el aire que le queda al punto de color de la
     columna PAGO —46px de columna con un punto de 15 en el medio— asi que el
     tachito termina en la misma linea vertical que el punto de arriba, y las
     dos columnas de accion se leen como una. */
  padding: 16px 14px 18px 52px;

  border-left: 3px solid var(--dorado);
}

/* Dos columnas, o tres cuando la prestación va al laboratorio. Se acomoda
   solo: fijar tres dejaba una columna vacía en todas las demás. */
.detalle-datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 26px;
  flex: 1;
}

.detalle-bloque small {
  display: block;
  color: var(--texto-tenue);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 4px;
}

.detalle-bloque strong { display: block; font-weight: 500; font-size: 14px; }

.detalle-bloque span {
  display: block;
  color: var(--texto-tenue);
  font-size: 12px;
  margin-top: 2px;
}

.detalle-bloque .pendiente-texto { color: var(--texto-tenue); font-weight: 400; }

.borrar-detalle {
  background: none;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  color: var(--texto-tenue);
  cursor: pointer;
  padding: 8px 14px;
  font-size: 12.5px;
  white-space: nowrap;
}

.borrar-detalle:hover { border-color: var(--anulado); color: var(--anulado); }

/* El tachito que lleva sólo el dibujo, sin texto, es un botón de acción como
   el lápiz y la ruedita: mismo círculo, mismo tamaño.

   `.borrar-detalle` nació para un botón con palabra adentro —«Eliminar»— y de
   ahí sale su forma de pastilla. Cuando después se usó para el tachito solo,
   arrastró esa forma: en Prestaciones quedaban tres círculos y un
   rectángulo en la misma fila, haciendo la misma clase de cosa.

   Se elige por `:has()` en vez de una clase nueva: lo que decide la forma es si
   adentro hay un dibujo o una palabra, y eso ya está dicho en el marcado. */
.borrar-detalle:has(> svg):not(:has(> *:not(svg))) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  vertical-align: middle;
}

/* ------------------------------------------------ modo selección */

.aviso-seleccion {
  color: var(--texto-tenue);
  font-size: 12.5px;
  margin-left: 4px;
}

.tabla-prestaciones .col-elegir input {
  display: block;
  margin: 0 auto;
  accent-color: var(--dorado-fuerte);
  cursor: pointer;
}

/* ------------------------------------------ prestaciones: fila (v6) */

/* Toda la fila abre el detalle, salvo los controles. */
.tabla-prestaciones tbody tr[data-fila] { cursor: pointer; }
/* El hover sale del bloque de `.tabla`: la fila abierta ya tiene su dorado y
   el de encima se le suma, que es lo que se quiere. */

/* El nombre ya no es un botón. */
.tabla-prestaciones .col-nombre { line-height: 1.35; }

.tabla-prestaciones .col-nombre small {
  display: block;
  color: var(--texto-tenue);
  font-size: 10.5px;
  margin-top: 1px;
}

/* Tilde: solo el aro. Sin realizar queda vacío, realizado muestra el ✓. */
.tilde {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--pendiente);
  background: none;
  color: var(--pendiente);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.12s, background 0.12s;
}

.tabla-prestaciones tr.hecha .tilde {
  border-color: var(--atendido);
  color: var(--atendido);
}

button.tilde:hover {
  border-color: var(--dorado);
  color: var(--dorado);
  background: var(--dorado-suave);
}

/* El tilde que no es botón no se toca: una prestación liquidada, o una
   administrativa, que no la marca nadie a mano. La manito invitaba a un clic
   que no hacía nada. */
.tilde:not(button) { cursor: default; }

/* En una administrativa el círculo no dice si alguien la hizo —no la hace
   nadie—: dice cómo viene el cobro, con los mismos tres colores del puntito de
   la columna de al lado. A medias no es ni rojo ni verde.

   Los tres, y no sólo el amarillo: la plantilla arma la clase con
   `tilde-${estadoPago}` y estadoPago tiene tres valores, así que sin las otras
   dos el sin-pagar y el pagado caían en el gris de siempre y el semáforo
   contaba la historia a medias. */
.tilde.tilde-pago-no {
  border-color: var(--impago);
  color: var(--impago);
}

.tilde.tilde-pago-parcial {
  border-color: var(--confirmado);
  color: var(--confirmado);
}

.tilde.tilde-pago-si {
  border-color: var(--atendido);
  color: var(--atendido);
}

/* ------------------------------------- campos de precio y descuento */

/* Mientras se edita, la celda se ensancha para que el importe entre entero. */
.tabla-prestaciones td.editando { min-width: 160px; }

.monto-en-lugar {
  width: 100%;
  min-width: 140px;
  margin: 0;
  padding: 6px 9px;
  text-align: right;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  border-color: var(--dorado);
}

/* Sin flechitas de incremento: es un campo de texto que solo toma números. */
.monto-en-lugar::-webkit-outer-spin-button,
.monto-en-lugar::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.monto-en-lugar[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* --------------------------------------- prestaciones: fila (v7) */

/* El detalle ocupa el ancho completo de la fila. */
.fila-detalle > td { padding: 0 !important; }
.detalle-prestacion { width: 100%; box-sizing: border-box; }

/* El tilde no se mueve al cambiar de estado: mismo tamaño y misma caja,
   cambia el color y aparece el ✓. */
.tabla-prestaciones .col-estado {
  text-align: center;
  vertical-align: middle;
}

.tilde {
  box-sizing: border-box;
  vertical-align: middle;
  flex: none;
}

/* Piezas alineadas con los importes. */
.tabla-prestaciones .col-piezas.der { text-align: right; }
.tabla-prestaciones .col-piezas .diente-boton { margin-left: 4px; }

/* ------------------------------- popup de evolucionar prestación */

.prestacion-a-realizar {
  background: var(--superficie2);
  border-left: 3px solid var(--dorado);
  border-radius: 0 var(--radio) var(--radio) 0;
  padding: 12px 16px;
  margin-bottom: 20px;
}

.prestacion-a-realizar small {
  display: block;
  color: var(--texto-tenue);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 3px;
}

.prestacion-a-realizar strong { font-weight: 500; font-size: 14.5px; }

.prestacion-a-realizar span {
  display: block;
  color: var(--texto-tenue);
  font-size: 12px;
  margin-top: 3px;
}

#modal-realizar .modal-caja { width: min(660px, 100%); }
#modal-realizar .modal-pie { align-items: center; }


/* ------------------------------------ mover prestaciones arrastrándolas */

.chip.mini { padding: 4px 11px; font-size: 11.5px; }

/* Un chip con un ícono adentro y no una palabra: en la ficha del usuario los
   dos de sumar y sacar sucursal son eso. El dibujo se achica al cuerpo del
   chip —de fábrica mide 17 y el texto de al lado 11,5— y toma su color, para
   que no se vea más pesado que un chip con letras. */
.chip svg { width: 13px; height: 13px; color: inherit; vertical-align: -2px; }
.etapa summary .chip.mini { margin-left: 4px; }

.tabla-prestaciones .col-mover { width: 26px; text-align: center; }

.agarre {
  display: inline-block;
  color: var(--texto-tenue);
  cursor: grab;
  font-size: 15px;
  line-height: 1;
  padding: 2px 0;
  opacity: 0.35;
  transition: opacity 0.12s;
}

.tabla-prestaciones tr:hover .agarre { opacity: 0.8; }
.agarre:hover { color: var(--dorado); opacity: 1; }
.agarre:active { cursor: grabbing; }

/* El lugar de donde salió la fila: un hueco liso, del alto que ocupaba.
   Sin el texto adentro —que a media transparencia se lee igual y confunde—:
   lo que hay que mirar es la tarjeta que sigue al mouse, no esto. */
.tabla-prestaciones tr.arrastrando td {
  background: var(--borde);
  border-color: transparent;
  color: transparent;
  box-shadow: inset 0 0 0 1px var(--borde);
}

/* Nada del contenido se ve: si el nombre se sigue leyendo a media
   transparencia, parece que la fila está en dos lugares a la vez. */
.tabla-prestaciones tr.arrastrando td > * { visibility: hidden; }

/* Mientras se arrastra, cada prestación se lee como un bloque suelto y no
   como un renglón de una lista: así se ve qué se está moviendo y adónde
   entra. El hueco es un bloque más, lleno de gris. */
body.hay-arrastre .tabla-prestaciones tr[data-fila] td {
  background: var(--superficie);
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
}

body.hay-arrastre .tabla-prestaciones tr[data-fila] td:first-child {
  border-left: 1px solid var(--borde);
  border-radius: 8px 0 0 8px;
}

body.hay-arrastre .tabla-prestaciones tr[data-fila] td:last-child {
  border-right: 1px solid var(--borde);
  border-radius: 0 8px 8px 0;
}

body.hay-arrastre .tabla-prestaciones tr.arrastrando td {
  background: var(--borde);
  border-color: var(--borde);
}

/* La fila que sigue al mouse mientras se arrastra.
   Es un elemento de verdad, no la imagen de arrastre del navegador: a esa
   Chrome le pone su propia transparencia y no hay CSS que la saque. */
.tarjeta-arrastre {
  position: fixed;
  z-index: 200;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32);
  overflow: hidden;
  pointer-events: none;
}

.tarjeta-arrastre table { margin: 0; table-layout: fixed; }
.tarjeta-arrastre td { background: var(--superficie); border: 0; }

/* A plena tinta: las prestaciones pendientes se dibujan apagadas en la tabla
   y el clon se llevaba ese estilo puesto, así que lo que uno mueve era
   justo lo que menos se leía. */
.tarjeta-arrastre tr,
.tarjeta-arrastre td,
.tarjeta-arrastre td > * { opacity: 1; }

/* Mientras se mueve una fila, el cursor lo dice en toda la página. */
body.hay-arrastre { cursor: grabbing; user-select: none; }

tbody.zona-activa { outline: 1px dashed var(--dorado); outline-offset: -1px; }

.fila-vacia td {
  padding: 14px;
  color: var(--texto-tenue);
  font-size: 12.5px;
  font-style: italic;
  text-align: center;
}

/* La franja para sacar una prestación de su sección solo se ve mientras se
   está arrastrando: el resto del tiempo no tiene nada que hacer ahí. */
.zona-fantasma { display: none; }
body.hay-arrastre .zona-fantasma { display: block; border-style: dashed; }

.evolucion-texto .sin-texto { color: var(--texto-tenue); font-size: 12.5px; }


/* --------------------------------------- nombre de la sección, editable */

/* Se edita con un clic encima del nombre, como los precios. El área
   clickeable termina donde termina el texto: el resto de la línea pliega y
   despliega la sección. */
.etapa-nombre.editable { min-width: 0; cursor: text; }
.etapa-nombre.editable.editando { background: var(--fondo); }

/* El título de una sección cerrada también recibe lo que se arrastra. */
summary.zona-activa {
  background: var(--dorado-suave);
  outline: 1px dashed var(--dorado);
  outline-offset: -2px;
}


/* El globo de ayuda no puede heredar la transparencia de una fila pendiente:
   se lee el texto de atrás. La celda en edición va opaca. */
.tabla-prestaciones tr.pendiente td.editando { opacity: 1; }

/* --------------------------------- tipos de tratamiento dentro del plan */

.tipos-tratamiento {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--borde);
  margin-bottom: 18px;
}

.tipo-tratamiento {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--texto-tenue);
  cursor: pointer;
  font-size: 13.5px;
  padding: 9px 14px;
  margin-bottom: -1px;
}

.tipo-tratamiento:hover { color: var(--texto); }

.tipo-tratamiento.activa {
  color: var(--dorado);
  border-bottom-color: var(--dorado);
}


/* ------------------------------------------- mover secciones enteras */

.lista-secciones { display: flow-root; }

.agarre-seccion { font-size: 14px; margin-right: 2px; }
.etapa summary:hover .agarre-seccion { opacity: 0.8; }

.etapa.arrastrando { opacity: 0.5; outline: 1px dashed var(--dorado); }

/* Las pestañas de tipo de tratamiento arrancan pegadas al borde de arriba,
   en la misma línea que el encabezado de la columna izquierda. */
.tipo-tratamiento { padding: 0 14px 13px; }


/* ------------------------ mismo aire entre el borde, el ⠿ y lo que sigue */

/* Una sola separación para todo el arranque de la fila: borde → agarre →
   tilde → nombre. Y el encabezado de la sección la respeta igual, con el
   nombre pegado al agarre. */
.tabla-prestaciones th.col-mover,
.tabla-prestaciones td.col-mover {
  width: 1%;
  padding: 10px 0 10px 14px;
  text-align: left;
}

.tabla-prestaciones th.col-estado,
.tabla-prestaciones td.col-estado {
  width: 1%;
  padding: 10px 0 10px 14px;
  text-align: left;
}

.tabla-prestaciones td.col-nombre,
.tabla-prestaciones thead th:nth-child(3) { padding-left: 14px; }

/* La primera celda de la tabla traía 18px de una regla vieja y más
   específica: por eso el ⠿ de la fila no coincidía con el de la sección. */
.etapa .tabla th:first-child,
.etapa .tabla td:first-child { padding-left: 14px; }

.etapa summary { padding: 13px 14px; gap: 0; }

.agarre-seccion {
  display: inline-block;
  margin: 0 14px 0 0;
  text-align: left;
}

/* Sin `gap` en el encabezado, lo de la derecha se separa a mano. */
.etapa summary .chip.mini { margin-left: 10px; }
.etapa summary .menu-seccion { margin-left: 6px; }
.etapa summary::after { margin-left: 10px; }

/* Las pestañas de tipo de tratamiento arrancan a la altura del borde de
   arriba de la columna izquierda, no del texto que hay dentro. */
.tipos-tratamiento { margin-top: -22px; }
.tipo-tratamiento { padding: 4px 14px 13px; }


/* ------------------------------------------- plan finalizado: solo lectura */

/* La franja que explica por qué no se puede tocar nada. Va fija abajo y no
   arriba de la pantalla: el plan es largo y un cartel en el encabezado
   desaparece al primer scroll, justo cuando la persona está entre las
   prestaciones, que es donde va a intentar tocar algo.

   Centrada y por encima de todo, pero con lugar para el botón flotante de
   evoluciones, que vive en la esquina derecha. */
.barra-finalizado {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 61;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: min(1000px, calc(100vw - 120px));
  padding: 12px 18px;
  border: 1px solid var(--anulado);
  border-radius: 999px;
  background: var(--anulado-tarjeta);
  color: var(--anulado);
  font-size: 13px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

/* En un solo renglón: partido en dos, el cartel se lee como un párrafo y no
   como un estado. Si la ventana no da para tanto, el @media de abajo lo deja
   volver a dos líneas. */
.barra-finalizado p { margin: 0; white-space: nowrap; }

/* En la plantilla, la línea de tiempo llega hasta el borde de abajo: cualquier
   relleno al pie son pixeles menos de foto.

   El de la ficha son setenta pixeles pensados para las pantallas que scrollean
   —que la ultima fila no quede pegada al borde—, y esta no scrollea: entra
   entera y termina justo donde termina la ventana. */
body.en-plantilla #contenido { padding-bottom: 0; }
body.en-plantilla #ficha { padding-bottom: 0; }
.barra-finalizado .marca-finalizado { font-size: 17px; line-height: 1; flex: none; }
.barra-finalizado .chip { color: var(--texto); flex: none; }

/* En pantallas angostas la franja ocupa el ancho y deja de ser una píldora:
   con el texto en dos renglones, los extremos redondeados se comen las
   esquinas. */
@media (max-width: 1080px) {
  .barra-finalizado p { white-space: normal; }
}

@media (max-width: 720px) {
  .barra-finalizado {
    left: 12px;
    right: 12px;
    transform: none;
    max-width: none;
    flex-wrap: wrap;
    border-radius: var(--radio);
  }
}


/* ------------------------------------ seguimiento: solapas por etapa */

/* Solapas de carpeta: la activa se funde con la tarjeta de abajo, las otras
   quedan un escalón atrás. El -1px es lo que tapa el borde de la tarjeta. */
.pestanas-etapa {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: -1px;
}

.pestana-etapa {
  background: var(--fondo);
  border: 1px solid var(--borde);
  /* La línea de arriba es lo que dibuja la solapa: sin ella las apagadas se
     pierden contra el fondo. */
  border-top: 3px solid var(--pendiente);
  border-radius: 9px 9px 0 0;
  color: var(--texto-tenue);
  cursor: pointer;
  font-size: 12.5px;
  padding: 5px 16px 7px;
}

.pestana-etapa:hover {
  color: var(--texto);
  border-color: var(--dorado);
  border-top-color: var(--dorado);
}

/* La elegida se funde con la tarjeta y lleva la línea dorada arriba, que es
   lo que canta a la distancia cuál está abierta. */
.pestana-etapa.activa {
  background: var(--carbon);
  border-top: 3px solid var(--dorado-fuerte);
  border-bottom-color: var(--carbon);
  color: var(--dorado);
  font-weight: 500;
  padding: 7px 18px 9px;
}

/* La elegida ya está resaltada: el hover no le cambia el borde. */
.pestana-etapa.activa:hover {
  color: var(--dorado);
  border-color: var(--borde);
  border-top-color: var(--dorado-fuerte);
  border-bottom-color: var(--carbon);
}

/* La tarjeta arranca cuadrada del lado de la primera solapa. */
.pestanas-etapa + .tarjeta-panel { border-top-left-radius: 0; }

/* El + para agregar una etapa, en la misma línea que las solapas. Va dorado
   y grande: es la única forma de sumar una etapa. */
.mas-etapa {
  background: var(--dorado);
  border: 1px solid var(--dorado);
  border-radius: 50%;
  color: var(--negro);
  cursor: pointer;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  width: 30px;
  height: 30px;
  padding: 0;
  align-self: center;
  margin: 0 0 0 6px;
  transition: background 0.15s, color 0.15s;
}

/* Al pasar por encima se vacía: queda el contorno punteado y el signo dorado. */
.mas-etapa:hover {
  background: none;
  border-style: dashed;
  color: var(--dorado);
}

.acciones-etapa { display: flex; align-items: center; gap: 8px; }


/* El botón de la simulación 3D va al lado de las solapas y es siempre el de
   la etapa abierta. Mismo aire que «Guardar seguimiento». */
.sim-etapa {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: center;
  margin: 0 6px;
}

/* Contorno dorado sobre el fondo, que es como mejor se lee. Al pasar por
   encima se da vuelta: dorado lleno. */
.boton.angosto.sim-3d {
  background: none;
  border: 1px solid var(--dorado);
  color: var(--dorado);
  font-weight: 500;
  padding: 6px 16px;
  font-size: 12.5px;
}

.boton.angosto.sim-3d:hover {
  background: var(--dorado);
  border-color: var(--dorado);
  color: var(--negro);
  opacity: 1;
}

/* Sin link cargado, el borde punteado avisa que todavía no hay nada. */
.boton.angosto.sim-3d.sin-link { border-style: dashed; }

.sim-etapa .lapiz { font-size: 12px; padding: 2px 4px; }


/* ------------------------------------------- opciones de un plan */

.tarjeta-plan { position: relative; }
.tarjeta-plan .plan { width: 100%; text-align: left; cursor: pointer; }

/* La ruedita va encima de la tarjeta, que entera es un botón, en la misma
   línea que el nombre del plan y el estado. */
.tarjeta-plan .menu-plan {
  position: absolute;
  top: 17px;
  right: 16px;
  z-index: 2;
}

/* Se ubica por JS en coordenadas de pantalla: adentro de la tarjeta o del
   panel del plan quedaba recortado. */
.menu-plan .menu {
  position: fixed;
  top: auto;
  left: auto;
  right: auto;
  min-width: 300px;
}

.menu-plan .menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 11px 15px;
}

/* Adentro del plan, al lado del número. */
.plan-titulo .titulo-fila:first-child {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}


/* La ruedita de opciones. Se la busca por donde vive y no por una clase
   `rueda`: esa es la del spinner de «trabajando» —un anillo de 13px que gira—
   y el botón se la comía entera, por eso se veía como un circulito. */
.menu-plan .puntos {
  display: inline-flex;
  align-items: center;
  padding: 0 2px;
  line-height: 0;
}

/* Del tamano que tenia antes de que la clase `rueda` se la comiera: la de la
   lista de planes va un punto mas grande, esta acompana al numero del plan. */
.menu-plan .icono-rueda { width: 18px; height: 18px; }

.icono-rueda { width: 18px; height: 18px; display: block; }

/* En la lista de planes va un poco más grande. */
.tarjeta-plan .icono-rueda { width: 21px; height: 21px; }

/* El estado va pegado al nombre del plan; el hueco de la derecha es para la
   ruedita, que está por encima de la tarjeta. */
.plan-cabeza { justify-content: flex-start; gap: 10px; }
.plan-cabeza .lugar-rueda { width: 24px; margin-left: auto; flex: none; }


/* ------------------------- descuento: en pesos o en porcentaje */

/* El campo y los dos botones, en una sola línea dentro de la celda. */
.celda-editando { display: flex; align-items: center; gap: 4px; }
.celda-editando .monto-en-lugar { min-width: 90px; }

.tipo-dto { display: inline-flex; flex: none; }

.tipo-dto button {
  background: var(--carbon);
  border: 1px solid var(--borde);
  color: var(--texto-tenue);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  padding: 7px 8px;
}

.tipo-dto button:first-child { border-radius: 6px 0 0 6px; }
.tipo-dto button:last-child { border-radius: 0 6px 6px 0; border-left: none; }
.tipo-dto button:hover { color: var(--dorado); border-color: var(--dorado); }

.tipo-dto button.activo {
  background: var(--dorado);
  border-color: var(--dorado);
  color: var(--negro);
}

/* Con los dos botones al lado, la celda necesita algo más de aire. */
.tabla-prestaciones td.editando { min-width: 200px; }


/* Los cuadrantes derechos van pegados al centro: las dos arcadas se
   encuentran en el eje, como se ve la boca de frente. */
.cuadrante:nth-child(odd) .dientes { justify-content: flex-end; }
.cuadrante:nth-child(odd) small { text-align: right; }


/* Lista de prestaciones en el popup de evolucionar varias. */
.lista-a-realizar {
  margin: 4px 0 0;
  padding-left: 18px;
  font-size: 13px;
  max-height: 140px;
  overflow-y: auto;
}

.lista-a-realizar li { margin-bottom: 2px; }
.lista-a-realizar span { color: var(--texto-tenue); font-size: 11.5px; }



/* ------------------------------------------------ calendario propio */

/* El desplegable del navegador no se puede pintar: se tapa y en su lugar
   se abre el nuestro. El iconito de la derecha lo dibujamos nosotros. */
input[type="date"]::-webkit-calendar-picker-indicator { display: none; }
input[type="date"]::-webkit-inner-spin-button { display: none; }

input[type="date"] {
  cursor: pointer;
  padding-right: 34px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='1.8' stroke-linecap='round'><rect x='3' y='5' width='18' height='16' rx='2'/><path d='M8 3v4M16 3v4M3 10h18'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 15px 15px;
}

.calendario {
  position: fixed;
  z-index: 120;
  width: 268px;
  padding: 12px;
  background: var(--superficie2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
  font-size: 13px;
  user-select: none;
}

.cal-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.cal-cabeza strong {
  font-weight: 500;
  text-transform: capitalize;
  font-size: 13.5px;
}

.cal-flecha {
  background: none;
  border: 1px solid var(--borde);
  border-radius: 7px;
  color: var(--texto-tenue);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 3px 9px;
}

.cal-flecha:hover { border-color: var(--dorado); color: var(--dorado); }

.cal-semana,
.cal-dias {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.cal-semana {
  margin-bottom: 4px;
  color: var(--texto-tenue);
  font-size: 10.5px;
  text-align: center;
}

.dia-cal {
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--texto);
  cursor: pointer;
  font-size: 12.5px;
  padding: 6px 0;
  font-variant-numeric: tabular-nums;
}

.dia-cal:hover { background: var(--dorado-suave); color: var(--dorado); }

/* Hoy va con el borde punteado, esté o no elegido; el elegido va lleno. */
.dia-cal.es-hoy {
  border-style: dashed;
  border-color: var(--dorado-fuerte);
  color: var(--dorado);
}

.dia-cal.es-hoy.elegido { color: var(--negro); }

.dia-cal.elegido {
  background: var(--dorado);
  border-color: var(--dorado);
  color: var(--negro);
  font-weight: 600;
}

/* Los dias del medio de un periodo. Las dos puntas van con `.elegido`, llenas;
   estos apenas tenidos, que es lo que deja ver de un vistazo donde empieza y
   donde termina sin contar los dias. */
.dia-cal.en-rango {
  background: var(--dorado-suave);
  border-radius: 0;
  color: var(--dorado);
}

/* Un dia posterior al tope no se puede elegir: apagado, y sin la mano. Dejarlo
   apretable y que no pase nada es peor que decir que no se puede. */
.dia-cal:disabled {
  opacity: .3;
  cursor: default;
}
.dia-cal:disabled:hover { background: none; color: var(--texto); }

/* ---- El calendario dentro de un dialogo (`pedirRango`) ----

   El de los campos de fecha es un desplegable: `position: fixed`, flotando y
   con sombra. Adentro del modal es contenido, asi que se le saca todo eso y
   pasa a ocupar el ancho que le den. */
.rango-cal {
  position: static;
  z-index: auto;
  width: auto;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

.rango-elegir { min-width: 280px; }

/* Lo elegido, escrito. El calendario muestra el periodo pintado; esto lo dice
   con palabras, que es lo que despeja la duda de si el ultimo dia entra. */
.rango-dice {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--borde);
  font-size: 12.5px;
  color: var(--texto-tenue);
}

.cal-pie {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--borde);
}

.cal-pie button {
  background: none;
  border: 1px solid var(--borde);
  border-radius: 20px;
  color: var(--texto-tenue);
  cursor: pointer;
  font-size: 11.5px;
  padding: 5px 14px;
}

.cal-pie button:hover { border-color: var(--dorado); color: var(--dorado); }


/* ------------------------------------------------- agendar un turno */

/* El casillero libre ahora es un botón: agenda ahí mismo. */
button.hueco {
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

#modal-turno .modal-caja { width: min(680px, 100%); }
#modal-turno .modal-pie { align-items: center; }
#modal-turno .rejilla { gap: 0 16px; }

/* Los resultados tapan lo que hay abajo en vez de empujarlo.
   En el flujo, abrir la lista corría medio formulario hacia abajo —el sillón,
   el motivo, la grilla de horarios— y al elegir un paciente todo volvía a
   subir: la pantalla saltaba dos veces por cada búsqueda. */
/* `align-self`: el campo se estiraba al alto de la fila —lo manda el campo
   de al lado, más alto— y los resultados, que cuelgan del 100%% del campo,
   quedaban despegados del buscador por esa diferencia. */
.campo-paciente { position: relative; align-self: start; }

/* Sin el margen de abajo: los resultados cuelgan del 100%% del campo, y ese
   margen los despegaba del borde del buscador. El lugar en la fila lo pone
   el campo de al lado, que sí lo tiene. */
.campo-paciente > .campo-con-equis { margin-bottom: 0; }

.resultados-turno {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 220px;
  overflow-y: auto;
  background: var(--superficie2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.resultados-turno:empty { display: none; }

/* Cada resultado es un <button>: sin esto se dibuja con el marco gris del
   navegador. Del borde solo queda la línea que separa una fila de la otra. */
.resultados-turno .resultado {
  width: 100%;
  background: none;
  font: inherit;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--borde);
  border-radius: 0;
}

.resultados-turno .resultado:last-child { border-bottom: none; }

/* El mismo alto que el buscador al que reemplaza: con el relleno de arriba y
   abajo sumado al botón de «Cambiar», la caja crecía once píxeles y la fila
   entera se corría al elegir un paciente. */
.paciente-elegido {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 45px;
  padding: 4px 5px 4px 13px;
  margin-bottom: 18px;
  border: 1px solid var(--dorado);
  border-radius: var(--radio);
  background: var(--dorado-suave);
}

/* Todo en un renglón. Lo único que cede es el nombre, y sólo cuando no hay
   más remedio: el documento y el turno que se está moviendo se leen enteros o
   no se leen. */
.paciente-elegido strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.paciente-elegido small {
  flex: none;
  white-space: nowrap;
  color: var(--texto-tenue);
}

.paciente-elegido .chip { margin-left: auto; flex: none; }


/* La aclaración de cuánto hueco hay, debajo de la duración. Va con nombre
   propio: antes compartía clase con la aclaración de un campo cualquiera y le
   pisaba el estilo en todo el sitio. */
.pista-hueco {
  display: block;
  margin: -12px 0 16px;
  color: var(--dorado);
  font-size: 11px;
}


/* Cuando lo elegido no entra en el hueco, la aclaración pasa a ser un aviso. */
.pista-hueco.no-entra { color: var(--ausente); }


/* ------------------------------------- grilla de horarios del alta */

.horarios {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 12px;
  margin-bottom: 18px;
  background: var(--fondo);
}

.horarios-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.horarios-cabeza strong { font-size: 13px; font-weight: 500; }
.horarios-cargando { padding: 24px; text-align: center; color: var(--texto-tenue); font-size: 12.5px; }

.horarios-dias {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.horarios-dia {
  background: var(--carbon);
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 10px;
}

.horarios-dia.es-hoy { border-color: var(--dorado); }

.horarios-fecha { margin-bottom: 8px; }
.horarios-fecha strong { display: block; font-size: 12.5px; font-weight: 500; }
.horarios-fecha small { color: var(--texto-tenue); font-size: 11px; }

/* Un bloque por profesional: si dos atienden el mismo día, van uno abajo
   del otro con su nombre arriba. */
.horarios-profesional { margin-top: 8px; }

.horarios-profesional small {
  display: block;
  color: var(--dorado);
  font-size: 11px;
  margin-bottom: 4px;
}

.horas { display: flex; flex-wrap: wrap; gap: 4px; }

.hora-libre {
  background: none;
  border: 1px solid var(--borde);
  border-radius: 6px;
  color: var(--texto);
  cursor: pointer;
  font-size: 11.5px;
  padding: 5px 8px;
  font-variant-numeric: tabular-nums;
}

.hora-libre:hover { border-color: var(--dorado); color: var(--dorado); }

.hora-libre.elegida {
  background: var(--dorado);
  border-color: var(--dorado);
  color: var(--negro);
  font-weight: 600;
}

.sin-horas {
  color: var(--texto-tenue);
  font-size: 11.5px;
  font-style: italic;
  padding: 6px 0;
}

.sin-horas.ancho { padding: 20px; text-align: center; }

.elegido-pie { font-size: 12.5px; color: var(--texto-tenue); }
.elegido-pie strong { color: var(--texto); font-weight: 500; }

#modal-turno .modal-caja { width: min(920px, 100%); }


/* Con el día y la hora ya elegidos el formulario es corto: no necesita el
   ancho de la grilla. */
#modal-turno .modal-caja.angosta-turno { width: min(680px, 100%); }


/* El rango de la semana es también el botón para cambiarla: el campo de
   fecha va encima, invisible, y abre el calendario del sistema. */
.semana-elegir {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--borde);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.semana-elegir:hover { border-color: var(--dorado); color: var(--dorado); }

.semana-elegir::before {
  content: '';
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='1.8' stroke-linecap='round'><rect x='3' y='5' width='18' height='16' rx='2'/><path d='M8 3v4M16 3v4M3 10h18'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}

.semana-elegir input[type="date"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
  background: none;
}


/* --------------------- cabecera del profesional pegada al bajar (día) */

/* Bajando por un día largo se pierde de vista de quién es la columna. La
   cabecera —el reloj y el nombre— se queda arriba, apoyada debajo de la
   barra del sistema, como ya hace la de la semana.

   Sin media query: la vista del día no arma scroll propio a ningún ancho,
   así que `sticky` siempre tiene contra qué pegarse. */
#agenda.tiempo .cabeza-horas,
#agenda.tiempo .cabeza-profesional {
  position: sticky;
  /* Un pelo por debajo de la barra: apoyada justo, el redondeo del alto
     dejaba una hendija por la que se veían pasar los turnos. */
  top: calc(var(--tope-dia, 58px) - 2px);
  z-index: 6;
}

/* El nombre del profesional como botón: con varios atendiendo ese día, se
   aprieta para cambiar de uno a otro. Parece texto hasta que se lo toca. */
.elegir-profesional {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

/* La fila del nombre, separada de la de abajo por una línea sutil: son dos
   cosas distintas —de quién es la agenda y cómo viene el día— y pegadas se
   leían como un párrafo. Con o sin desplegable mide lo mismo, así las
   columnas del día de al lado quedan a la misma altura. */


/* Con varios profesionales, toda la fila es el botón. */
#agenda.semana .elegir-profesional {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

/* La cuenta y la flecha van juntas contra el borde derecho: son las dos la
   misma señal —«acá hay más de uno, tocá»—, y separadas, con el número
   pegado al nombre, parecía parte del nombre. */
#agenda.semana .cuantos-profesionales { margin-left: auto; }

/* Cuántos atienden ese día, al lado del nombre: sin ese número la columna
   parece la de un profesional solo. */
.cuantos-profesionales {
  flex: none;
  padding: 1px 6px;
  border-radius: 9px;
  background: var(--dorado-suave);
  color: var(--dorado);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.5;
}

/* Y la flecha, la misma que traen todos los desplegables del sitio. */
.elegir-profesional::after {
  content: '';
  flex: none;
  width: 12px;
  height: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.6 1.8 6 6.2 10.4 1.8' fill='none' stroke='%236a6a72' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.elegir-profesional:hover { color: var(--dorado); }

.elegir-profesional:hover .cuantos-profesionales {
  background: var(--dorado);
  color: var(--negro);
}

/* El renglón de abajo: las horas libres a la izquierda y la jornada contra el
   borde derecho, alineada con la hora de la fila del día. */
.cabeza-profesional-pie {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.cabeza-profesional-pie .libre-total {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Los dos datos en un renglón: si no entran, se corta el de la izquierda. Que
   se vayan a dos renglones alarga esa columna y desalinea los turnos con los
   del día de al lado. */
.cabeza-profesional-pie > * { white-space: nowrap; }
.cabeza-profesional-pie > small { flex: none; }

/* En la semana la columna es angosta y los nombres largos se iban a un
   segundo renglón: esa columna quedaba más alta y sus turnos arrancaban más
   abajo que los del día de al lado. Se cortan con puntos suspensivos —el
   nombre entero queda en el globo— y así todas arrancan parejas. */
#agenda.semana .cabeza-profesional-linea > strong,
#agenda.semana .nombre-profesional {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.menu-turno [data-profesional-dia] { display: flex; justify-content: space-between; gap: 10px; }
.menu-turno [data-profesional-dia] small { color: var(--texto-tenue); }

/* ------------------------- cabecera del día pegada al bajar (semana) */

/* Al bajar por una semana cargada se pierde de vista qué columna es cada
   día. La cabecera se queda arriba, debajo de la barra del sistema.
 *
 * Solo con ancho suficiente: más angosto, el bloque se corre a lo ancho y
 * eso arma un área de scroll propia donde `sticky` no tiene contra qué
 * pegarse. */
@media (min-width: 1300px) {
  #agenda.semana { overflow-x: visible; }



  /* Y abajo de la fecha, de quién son esos turnos: en una columna larga se
     pierde de vista igual que el día. Se apoya justo debajo de la cabecera
     del día.
   *
   * A qué altura se apoya lo mide el propio sistema al dibujar: escrito a
   * mano quedó viejo apenas la cabecera del día cambió de alto, y entre las
   * dos se veía pasar la agenda de atrás. */
  /* «Sin huecos libres» va más apagado: es la ausencia de un dato, no un dato. */
.libre-total.sin-huecos { opacity: 0.6; }


}


/* ------------------- cabecera del día pegada al bajar (grilla del alta) */

/* Un solo scroll, el del popup. Para que no quede una franja por donde se
   vean pasar los horarios, arriba de la cabecera no hay relleno de nadie:
   ni del cuerpo del popup, ni de la caja de la grilla, ni de la columna.
   Cada uno lo pone abajo o adentro de la propia cabecera. */
#modal-turno .modal-cuerpo { padding-top: 0; }
#modal-turno .modal-cuerpo > *:first-child { margin-top: 18px; }

.horarios { padding-top: 0; }
.horarios-cabeza { padding-top: 12px; }
.horarios-dia { padding-top: 0; }

.horarios-fecha {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--carbon);
  padding: 10px 0 6px;
  margin-bottom: 2px;
}

/* Y el nombre del profesional queda pegado abajo de la fecha: sin eso, con
   la columna a medio bajar no se sabe de quién son esos horarios. Se apoya
   en el alto real de la cabecera, que lo mide el propio sistema al dibujar
   —escrito a mano el nombre terminaba cortado por la fecha—. */
.horarios-profesional small {
  position: sticky;
  top: var(--tope-fecha, 58px);
  z-index: 2;
  background: var(--carbon);
  padding: 4px 0 3px;
  margin-bottom: 0;
}


/* «No atiende» no es lo mismo que «sin lugar»: uno es que ese día no hay
   nadie, el otro que está lleno. Alcanza con el color del texto. */
.sin-horas.no-atiende { color: var(--anulado); }


/* El «+ Agendar cita» de la ficha: al lado de las tarjetas, del alto de un
   botón y no del de ellas. */
.ficha-resumen .agendar-paciente {
  align-self: center;
  width: auto;
  padding: 8px 16px;
  font-size: 12.5px;
  text-decoration: none;
  white-space: nowrap;
}


/* Los días de los meses de al lado: se ven, pero se nota que no son de este
   mes. Igual se pueden elegir. */
.dia-cal.otro-mes { color: var(--texto-tenue); opacity: 0.55; }
.dia-cal.otro-mes:hover { opacity: 1; }


/* El día que se eligió en el calendario de la semana: entre cinco columnas,
   la que se vino a buscar. */
.horarios-dia.marcado {
  border-color: var(--dorado);
  box-shadow: 0 0 0 1px var(--dorado);
}

.horarios-dia.marcado .horarios-fecha {
  /* El mismo tono que `--dorado-suave`, pero opaco: esa variable es un rgba
     con alfa, y como esta cabecera queda pegada arriba al bajar por la
     columna, por debajo se veían pasar los horarios. */
  background: color-mix(in srgb, #b6a360 14%, var(--carbon));
  margin: 0 -10px 2px;
  padding-left: 10px;
  padding-right: 10px;

  /* Y sus esquinas de arriba siguen a las de la tarjeta. Los márgenes
     negativos la estiran hasta el borde para que el fondo llegue de lado a
     lado; con las esquinas rectas, los dos vértices de arriba asomaban por
     fuera del borde redondeado y se veía un escaloncito. Siete y no ocho: el
     radio de adentro es el de la tarjeta menos el pixel del trazo. */
  border-radius: 7px 7px 0 0;
}

.horarios-dia.marcado .horarios-fecha strong { color: var(--dorado); }


/* «Cambiar fecha» en la lista de próximas citas. */
.col-mover-cita { width: 1%; white-space: nowrap; text-align: right; }
.turno-que-se-mueve { margin-left: auto; color: var(--texto-tenue); }


/* ------------------------------------------ mover turnos arrastrando */

.turno[draggable="true"] { cursor: grab; }
/* El lugar de donde salió el turno: dibujado como un casillero libre, que
   es en lo que se convierte si el movimiento se confirma. Con `outline` y no
   con `border` para no correr un pixel toda la columna. */
.turno.arrastrando {
  background: rgba(182, 163, 96, 0.04);
  border-left-color: transparent;
  outline: 1px dashed rgba(182, 163, 96, 0.45);
  outline-offset: -1px;
  box-shadow: none;
}

/* Nada del contenido se ve: si el nombre se sigue leyendo, parece que el
   turno está en dos lugares a la vez. */
.turno.arrastrando > * { visibility: hidden; }

.turno.arrastrando::after {
  content: 'libre';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dorado);
  font-size: 11.5px;
  opacity: 0.7;
}

/* El turno que sigue al mouse. Es un elemento de verdad y no la imagen de
   arrastre del navegador: a esa Chrome le pone su propia transparencia y no
   hay CSS que la saque, así que lo que uno mueve era lo que menos se leía. */
.tarjeta-turno {
  position: fixed;
  z-index: 200;
  border-radius: 6px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32);
  overflow: hidden;
  pointer-events: none;
}

.tarjeta-turno .turno { opacity: 1; transition: none; }
.tarjeta-turno .rueda-turno { display: none; }

/* Mientras se mueve un turno, el cursor lo dice en toda la página.

   Y el navegador deja de "anclar" el scroll: al acompañar el arrastre lo
   corregía por su cuenta, y las dos correcciones se peleaban. */
body.moviendo-turno { cursor: grabbing; user-select: none; }
body.moviendo-turno, body.moviendo-turno * { overflow-anchor: none; }

/* El turno y el casillero traen su propio cursor de enlace: mientras se
   arrastra manda el de la página. */
body.moviendo-turno .turno,
body.moviendo-turno .turno *,
body.moviendo-turno .hueco { cursor: grabbing; }

/* Mientras se arrastra, los casilleros donde entra el turno se marcan. */
body.moviendo-turno .hueco { border-style: solid; }

/* Y los que quedan cortos se apagan: se ve de una dónde se puede soltar sin
   tener que ir probando contra el cartel de prohibido del navegador. */
body.moviendo-turno .hueco.no-entra {
  opacity: 0.25;
  border-style: dashed;
}

.hueco {
  transition: background 0.12s, border-color 0.12s, opacity 0.12s;
}

.hueco.encima {
  background: var(--dorado-suave);
  border-color: var(--dorado);
  border-style: solid;
  box-shadow: inset 0 0 0 1px var(--dorado);
}


/* --------------------------------------------- opciones de cada turno */

/* La ruedita vive adentro del link del turno: aparece al pasar por encima
   para no ensuciar la agenda. */
.rueda-turno {
  position: absolute;
  top: 2px;
  right: 2px;
  display: inline-flex;
  /* El relleno es el área de clic: el engranaje es chico y el turno se
     arrastra, así que apuntarle costaba. */
  padding: 6px;
  border-radius: 5px;
  color: var(--texto-tenue);
  /* Adentro del turno el cursor es de arrastre; acá vuelve a ser flecha,
     que es lo que dice «esto se clickea». */
  cursor: default;
  opacity: 0;
  transition: opacity 0.12s;
}

.turno { position: relative; }
/* El globo del comentario, al lado de la ruedita. El que tiene algo escrito
   se ve siempre —para eso está—; el vacío recién al pasar por encima, para
   no llenar la agenda de globitos.

   Los dos comparten una caja del mismo tamaño y centran el dibujo adentro:
   pegados arriba, como estaban, los dibujos de distinto alto quedaban a
   distinta altura. */
.nota-turno,
.rueda-turno {
  width: 26px;
  height: 26px;
  padding: 0;
  align-items: center;
  justify-content: center;
}

/* El comentario va debajo de la ruedita, contra la derecha, a la altura del
   nombre del paciente. Al lado del engranaje los dos íconos se leían como un
   par de botones del mismo grupo, y son cosas distintas: uno abre el menú del
   turno y el otro es una nota que se escribe. */
.nota-turno {
  position: absolute;
  top: 30px;
  right: 2px;
  display: inline-flex;
  border-radius: 5px;
  color: var(--texto-tenue);
  cursor: default;
  opacity: 0;
  transition: opacity 0.12s;
}

/* Centrado a ojo y no por la caja: la burbuja tiene la cola abajo, así que
   su cuerpo —lo que uno mira— queda por encima del centro. Medido, las dos
   cajas coincidían al decimal y el globo igual se veía más arriba. */
.icono-nota {
  width: 16px;
  height: 16px;
  transform: translateY(1.5px);
}

/* El celular, al lado del número. No se selecciona: si entrara en la
   selección, al copiar se llevaría un espacio en blanco adelante.

   Y es transparente al mouse: apretar encima cuenta como apretar el renglón,
   así el cursor cae justo antes del + y arrastrando a la derecha se toma el
   número entero. Antes el clic se lo comía el ícono y no seleccionaba nada. */
.icono-celular {
  width: 12px;
  height: 12px;
  flex: none;
  opacity: 0.75;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

.nota-turno.con-nota { opacity: 0.75; color: var(--dorado); }
.turno:hover .nota-turno { opacity: 0.75; }
.nota-turno:hover { opacity: 1; color: var(--dorado); background: var(--dorado-suave); }

.tarjeta-turno .nota-turno { display: none; }

/* El cartel de ayuda, uno solo para todo el sistema. Sale al instante y con
   los colores de la casa: el globito del navegador tardaba casi un segundo,
   no se puede pintar y contra el borde derecho quedaba cortado. */
/* Arriba de todo: explica lo que hay debajo, incluso una opción de un menú
   abierto sobre un modal. */
.cartel-ayuda {
  position: fixed;
  z-index: 210;
  max-width: min(560px, calc(100vw - 24px));
  padding: 7px 10px;
  background: var(--superficie2);
  border: 1px solid var(--borde);
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
  color: var(--texto);
  font-size: 12px;
  line-height: 1.45;
  /* En un solo renglón: se lee de un vistazo, que es para lo que está. Uno
     larguísimo se corta con puntos suspensivos —el texto entero se ve al
     abrirlo— antes que armar un párrafo flotando sobre la agenda. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.cartel-ayuda.tenue { color: var(--texto-tenue); font-style: italic; }

.turno:hover .rueda-turno { opacity: 0.75; }
.rueda-turno:hover { opacity: 1; color: var(--dorado); background: var(--dorado-suave); }

.menu-turno {
  position: fixed;
  z-index: 80;
  min-width: 230px;
  padding: 6px;
  background: var(--superficie2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  font-size: 12.5px;
  /* Con varios planes cargados el menú se hace largo: antes de irse de la
     pantalla, scrollea. */
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  /* Y su scroll es suyo: al llegar al final, la rueda no sigue de largo
     moviendo la agenda de atrás. Afuera del menú, scrollea la página. */
  overscroll-behavior: contain;
}

/* La lista que se despliega desde un renglón del cartel: misma pinta, una
   capa más arriba, porque se abre encima y el cartel sigue abierto atrás. Va
   después para ganarle el z-index, que es lo único que la diferencia. */
.submenu-turno { z-index: 90; }

/* El cartel de la cita nace con su ancho puesto. Se pinta dos veces —una
   apenas se abre y otra cuando llegan los planes del paciente— y midiéndose
   por el contenido cambiaba de ancho entre las dos: se abría un poco más
   grande, con el «Buscando planes…», y se achicaba a la vista. */
.menu-turno:has(.cita-cabeza) { width: min(440px, calc(100vw - 16px)); }

.menu-turno-cabeza {
  padding: 6px 8px 8px;
  border-bottom: 1px solid var(--borde);
  margin-bottom: 4px;
}

.menu-turno-cabeza strong { display: block; font-weight: 500; }
.menu-turno-cabeza small { color: var(--texto-tenue); font-size: 11px; }

/* En el menú del motivo, el paciente y el título quedan quietos mientras la
   lista scrollea abajo. Los márgenes negativos comen el relleno del menú
   para que lo que sube no se asome por los costados del encabezado. */
.menu-motivo-fijo {
  position: sticky;
  top: -6px;
  z-index: 1;
  margin: -6px -6px 4px;
  padding: 6px 6px 0;
  background: var(--superficie2);
  border-bottom: 1px solid var(--borde);
}

.menu-motivo-fijo > small {
  display: block;
  padding: 4px 8px;
  color: var(--texto-tenue);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.menu-turno-grupo { padding: 4px 0; border-bottom: 1px solid var(--borde); }
.menu-turno-grupo:last-child { border-bottom: none; }

.menu-turno-grupo > small {
  display: block;
  padding: 4px 8px;
  color: var(--texto-tenue);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.menu-turno button {
  display: block;
  width: 100%;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--texto);
  cursor: pointer;
  font: inherit;
  padding: 7px 8px;
  text-align: left;
}

.menu-turno button:hover { background: var(--dorado-suave); color: var(--dorado); }

/* Eliminar no es una opción más de la lista: va en rojo y con la papelera
   del lado de afuera, para que no se elija de apurado. Vale para todos los
   menúes —el del turno, el del pago, el del plan, el de la sección— así
   borrar se reconoce igual en cualquiera. */
.menu-turno button.peligro,
.menu button.peligro { color: var(--anulado); }

/* Una opción que está pero hoy no se puede: se lee y no se aprieta. Sin esto
   se veía igual que una viva, y el dorado del hover prometía algo que al
   clic no pasaba. Queda en el menú, en vez de desaparecer, porque su ausencia
   no explica nada: que diga por qué es la mitad del asunto. */
.menu-turno button[disabled],
.menu button[disabled] { color: var(--texto-tenue); cursor: default; }

.menu-turno button[disabled]:hover,
.menu button[disabled]:hover { background: none; color: var(--texto-tenue); }

/* El del turno no lleva subtítulo: ahí el ícono se alinea en la misma
   línea. Los otros son bloque, con su explicación abajo, y el ícono va
   inline pegado al texto del título. */
.menu-turno button.peligro {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* La papelera va pegada al texto, no contra el borde: así se lee como una
   sola cosa y no como dos columnas. */
.icono-papelera {
  width: 16px;
  height: 16px;
  flex: none;
  vertical-align: -3px;
}

.menu-turno button.peligro:hover,
.menu button.peligro:hover { background: var(--anulado-suave); color: var(--anulado); }

/* La explicación de abajo se mantiene tenue: si también fuera roja, la
   opción gritaría más que lo que dice. */
.menu button.peligro small { color: var(--texto-tenue); }

/* El que ya está puesto se marca y no se ofrece como novedad. */
.menu-turno button.puesto { color: var(--dorado); font-weight: 600; }
.menu-turno button.puesto::after { content: ' ✓'; }

/* Mientras llega la lista: el menú ya está en pantalla, esto es lo único
   que falta. */
.menu-turno-espera {
  display: block;
  padding: 7px 8px;
  color: var(--texto-tenue);
  font-style: italic;
}

.menu-turno .duraciones { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 8px 4px; }

.menu-turno .duraciones button {
  width: auto;
  border: 1px solid var(--borde);
  padding: 5px 9px;
  text-align: center;
}



/* Agendar fuera del horario del profesional.
   Va al pie de cada columna de la grilla, incluso en los días en los que no
   atiende nadie: es la única forma de darle un turno a esa hora. */
.fuera-horario {
  background: none;
  border: 0;
  border-top: 1px dashed var(--borde);
  color: var(--dorado);
  cursor: pointer;
  display: block;
  font: inherit;
  font-size: 11px;
  margin-top: 8px;
  padding: 7px 0 2px;
  text-align: center;
  width: 100%;
}

.fuera-horario:hover {
  color: var(--dorado-fuerte);
  border-top-color: var(--dorado);
}

.fuera-form {
  border-top: 1px dashed var(--dorado);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
  padding-top: 8px;
}

.fuera-form select {
  font-size: 11.5px;
  padding: 5px 6px;
  width: 100%;
}

.fuera-form .chip { width: 100%; justify-content: center; }

.fuera-form .chip.elegida {
  background: var(--dorado);
  border-color: var(--dorado);
  color: var(--negro);
  font-weight: 600;
}

/* Y en la agenda, el turno que no está en Dentalink lleva su marquita. */
.marca-fuera {
  color: var(--dorado);
  font-size: 10px;
  margin-right: 2px;
}

/* Antes de guardar, que se vea qué implica: en Dentalink no va a estar. */
.fuera-aviso {
  color: var(--anulado);
  display: block;
  font-size: 11px;
}



/* Prestación liquidada al profesional: no se toca. El candado explica por qué
   no hay nada para clickear en esa fila. */
.candado {
  margin-left: 5px;
  font-size: 10px;
  opacity: 0.65;
  cursor: help;
}

/* Las acciones del detalle: «volver a pendiente» y «eliminar», una al lado
   de la otra y alineadas a la derecha. */
.detalle-acciones {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.nota-liquidada {
  margin: 0;
  max-width: 380px;
  color: var(--texto-tenue);
  font-size: 12px;
  line-height: 1.45;
}



/* La prestación que se vino a pagar desde el plan: se marca un momento para
   que se vea cuál es entre todas las que tienen saldo. */
.tabla-cobro tr.recien-marcada > td { background: var(--dorado-suave); }



/* Lo que el paciente pagó y todavía no se imputó a ninguna prestación.
   Va en el resumen del plan porque es plata que ya está y se puede aplicar
   ahí mismo, pero es del paciente: sirve para cualquiera de sus planes. */
.abonos-libres {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding: 9px 12px;
  border: 1px solid var(--atendido);
  border-radius: 8px;
  color: var(--atendido);
  font-size: 12.5px;
}

.abonos-libres strong { font-size: 14px; font-variant-numeric: tabular-nums; }



/* Campos dentro de un popup de confirmación: eliminar un pago pide motivo,
   registrar una devolución pide monto y motivo. */
.campo-modal {
  display: block;
  margin-top: 12px;
  color: var(--rotulo);
  font-size: 12.5px;
}

.campo-modal input,
.campo-modal select,
.campo-modal textarea { margin-top: 4px; width: 100%; }

/* La «i» al lado del rótulo de un campo: a la altura de la línea de texto y del
   tamaño del rótulo, no del de una sección. */
.campo-modal .info-seccion { vertical-align: middle; margin-left: 3px; }
.campo-modal .info-seccion svg { width: 17px; height: 17px; }

/* Un campo que es un tilde va en línea con su texto: `campo-modal` lo ponía
   en bloque y el tilde quedaba arriba, en su propio renglón. */
.campo-modal.interruptor { display: flex; align-items: center; }
/* Sin `width`: lo pone la regla de la píldora. Con `auto` y `appearance:
   none`, el interruptor quedaba en cero de ancho. */
.campo-modal.interruptor input { margin-top: 0; }

/* Dato que no tenemos, o que no aplica: se ve, pero no compite con el resto.

   El `display: block` no se le aplica a una celda: un `td` en bloque deja de
   ser celda, no se estira con la fila, y su borde de abajo dibuja un renglón
   gris suelto en el medio de la tabla. La clase va adentro de la celda, en un
   `span`; el `:not()` está para que la próxima vez que alguien se la ponga a
   la celda no se rompa nada. */
.tabla .sin-dato {
  color: var(--texto-tenue);
  font-size: 10.5px;
}

.tabla .sin-dato:not(td):not(th) { display: block; }

.titulo-con-accion {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.vacio-accion { margin-top: 14px; }



/* Recibir pago: las prestaciones van agrupadas por plan. Con dos planes
   abiertos, «Corona» a secas no dice de cuál es. */
.tabla-cobro .fila-plan td {
  background: var(--superficie2);
  border-top: 1px solid var(--borde);
  padding: 9px 12px;
  cursor: pointer;
  user-select: none;
}

/* El hover sale del bloque de `.tabla`. */

/* Un paciente con varias tareas sale una vez, con las suyas debajo.

   Se llama una vez y se le resuelven las tres: tres renglones con el mismo
   nombre eran tres llamados. Y en una lista larga, cerrar uno de tres parecía
   no haber hecho nada, porque el de al lado seguía diciendo lo mismo.

   El grupo es un `<tbody>`, igual que los planes de la tabla de cobro. Lo único
   que hace falta dibujar es la línea que separa un paciente del que sigue: las
   tareas de adentro no la llevan, que es lo que las hace leerse como una sola
   cosa. */
.tabla-crm .grupo-paciente + .grupo-paciente > tr:first-child > td {
  border-top: 1px solid var(--borde);
}

.tabla-crm .grupo-paciente tr > td { border-top: 0; }

/* La columna del paciente queda vacía en las tareas del grupo: es la sangría
   que dice «esto cuelga de arriba», y alinea lo que hay que hacer con el
   encabezado de su columna.

   El ancho lo fija el encabezado y no esa celda vacía: con `width` puesto ahí,
   la columna se encogía para TODA la tabla y los nombres de los pacientes con
   una sola tarea se partían en tres renglones. */
/* «Qué hay que hacer» es la columna que se lee, así que es la que se lleva el
   ancho. Sin decirlo, el navegador la dejaba más angosta que la fecha y el
   título se partía en tres renglones. */
/* El CRM ENTRA EN LA PANTALLA. Nunca scroll horizontal.

   Una lista de tareas se recorre de arriba abajo: si además hay que arrastrarla
   de lado para ver quién se ocupa, deja de ser una lista y pasa a ser un mapa.
   La excepción del sistema es la agenda, donde las columnas son profesionales y
   a veces no hay forma de que entren.

   `fixed` es lo que lo garantiza: sin él, el ancho lo decide el contenido más
   largo de cada columna y la tabla crece hasta donde haga falta. Con él, los
   anchos son estos y el contenido se acomoda adentro.

   Las seis suman 100 y ninguna queda librada al contenido. Dejando la de los
   botones en automático el navegador le daba 13 px —reparte lo que sobra según
   el ancho mínimo de lo que hay adentro, y unos iconos no piden nada— y los
   cuatro de una tarea abierta se apilaban de a dos. */
.tabla-crm { table-layout: fixed; width: 100%; }

.tabla-crm thead th:first-child  { width: 21%; }   /* el paciente */
.tabla-crm thead th:nth-child(2) { width: 25%; }   /* qué hay que hacer */
.tabla-crm thead th:nth-child(3) { width: 14%; }   /* de qué se trata */
.tabla-crm thead th:nth-child(4) { width: 14%; }   /* cuándo vencía */
.tabla-crm thead th:nth-child(5) { width: 13%; }   /* quién se ocupa */

/* Los botones, en pixeles y no en por ciento: son cuatro —WhatsApp, mail,
   lápiz y tilde— y miden lo que miden. En 11% la columna daba 126 y el
   contenido pide 140: cuatro de 26, tres separaciones de 4 y los 12 de relleno
   de cada lado. Los 14 que faltaban los tomaba el último botón, que terminaba
   montado sobre el borde de la tarjeta y cortado por la esquina redondeada.

   Un porcentaje no puede saber cuántos botones hay; los pixeles sí, y es lo
   que ya hace `.tabla-bloqueos`, que declara 56 para sus dos. */
.tabla-crm thead th:last-child   { width: 140px; }

.tabla-crm select.campo-fila { text-overflow: ellipsis; }

/* El «hace tres años» va DEBAJO de la fecha, no al lado.

   En la misma línea, y con el `nowrap` que traen todas las fechas del sistema,
   «23/08/2023 hace 3 años y 1 meses» pedía 270 px de columna para una fecha que
   ocupa 90. Eso solo empujaba la tabla fuera de la pantalla. */
.tabla-crm td.fecha { white-space: normal; }
.tabla-crm td.fecha small { display: block; }

/* El nombre y el «2 tareas» del grupo abierto, en la misma línea de base.
   Con el nombre en `inline-block` cada uno se apoyaba donde quería y el
   contador quedaba montado sobre el nombre. */
.cabeza-grupo {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.cabeza-grupo .link-paciente { display: inline; }

/* Un renglón por tarea, de dos líneas como mucho: el nombre arriba y la edad
   con el celular abajo.

   El nombre NO se parte. Es lo que se busca con la vista al recorrer la lista, y
   un «Sofia Melanie / Barrionuevo» cortado al medio obliga a leer dos veces cada
   renglón. Si no entra, se corta con puntos suspensivos: el nombre completo está
   en el globito y en la ficha, a un clic.

   Y las otras columnas tampoco se estiran a tres líneas: con 438 renglones, cada
   línea de más es una pantalla de más para llegar al final. */
.tabla-crm td { vertical-align: middle; }

.tabla-crm .link-paciente {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tabla-crm .fila-paciente .link-paciente { display: inline-block; max-width: 60%; }
/* El puntito del motivo, a la altura del primer renglón de su texto.

   Con `align-items: center` se iba al medio de un texto de dos líneas y quedaba
   apuntando al aire entre las dos; con `flex-start` a secas se apoyaba en el
   borde de arriba, más alto que las letras. El margen lo baja hasta el centro
   óptico de la primera línea, que es donde el ojo lo espera. */
.tabla-crm .motivo-y-color { align-items: flex-start; }
.tabla-crm .motivo-y-color .punto-color { margin-top: 4px; }

/* El galón que abre las tareas de un paciente.

   Va a la derecha del renglón, no pegado al nombre: a la izquierda competía con
   el nombre por ser lo primero que se lee, y el nombre siempre gana esa pelea.
   A la derecha queda en la columna de las acciones, que es donde uno busca algo
   para apretar. */
.abrir-grupo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: var(--texto-tenue);
  transition: transform 0.15s;
}

.abrir-grupo.abierta { transform: rotate(180deg); }

/* Un botón que abre un menú lleva su galón, separado del texto. Da igual si es
   un chip o uno de los botones de la fila de filtros: lo que decide es que
   abre algo, no de qué clase es el botón. */
.chip .icono-chevron,
.abrir-todas .icono-chevron { margin-left: 5px; vertical-align: -1px; }
.fila-abrible:hover .abrir-grupo { color: var(--dorado); }
.icono-chevron { width: 11px; height: 11px; }

/* El preview del grupo: una tarea por línea, dentro de la misma celda. Es lo que
   deja decidir si vale la pena llamar al paciente sin abrir nada. */
.tabla-crm .apiladas > span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tabla-crm .apiladas > span + span { margin-top: 4px; }
.tabla-crm .apiladas .motivo-y-color { display: flex; }
.tabla-crm .fila-tarea > td:first-child { padding: 0; }

/* «Quién se ocupa» se asigna desde el renglón, sin abrir nada.

   En reposo se lee como un dato —sin marco, del color del texto—; el marco
   aparece al pasar por arriba. Una tabla de 438 renglones con 438 desplegables
   dibujados se ve como un formulario gigante, no como una lista. */
.tabla-crm select.campo-fila {
  border-color: transparent;
  background-color: transparent;
  cursor: pointer;
}

.tabla-crm select.campo-fila:hover,
.tabla-crm select.campo-fila:focus { border-color: var(--borde); }

/* Sin dueño va tenue, como el resto de lo que falta en el sistema. */
.tabla-crm select.campo-fila.sin-dueno { color: var(--texto-tenue); }

/* Cuántas tiene, al lado del nombre. Es el dato que evita el malentendido de
   cerrar una y creer que no pasó nada. */
/* El aviso de la solapa «Tareas de gestión»: cuántas hay sin resolver.

   Ámbar es «mirá esto», rojo es «esto ya se pasó». La misma escala que la barra
   de antecedentes médicos, así que en la ficha de un paciente los dos avisos se
   leen igual. Sin número no serviría —«hay algo» obliga a entrar a ver cuánto— y
   sin color, en una fila de cinco solapas, no se ve. */
.aviso-tareas {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--dorado);
  color: var(--fondo);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.aviso-tareas.vencidas { background: var(--anulado); color: #fff; }

/* El paciente, siempre en columna: nombre, contacto, y cuántas tareas tiene.

   Antes cada línea se apilaba por su cuenta —el contacto como bloque, el
   contador con un margen a la izquierda— y el resultado era que el «2 tareas»
   quedaba corrido a la derecha y el espacio entre renglones cambiaba según
   cuántos hubiera. Una sola columna con un `gap` los alinea a todos contra el
   mismo borde y los separa siempre igual. */
.quien-crm {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

.quien-crm > * { margin: 0; }

.cuantas-tareas {
  color: var(--dorado);
  font-size: 11.5px;
}

/* Con el grupo abierto el contador va al lado del nombre, en la misma línea, y
   ahí sí necesita el margen que lo separa. */
.cabeza-grupo .cuantas-tareas { margin-left: 0; }

/* La casilla del plan no pliega: tiene su propio trabajo. */
.tabla-cobro .elegir-plan { cursor: pointer; }

/* La flecha gira al cerrar: la misma señal que usan las secciones del plan. */
.tabla-cobro .flecha-plan {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  margin-right: 8px;
  color: var(--texto-tenue);
  transition: transform 0.15s;
}

.tabla-cobro .grupo-plan.cerrado .flecha-plan { transform: rotate(-90deg); }
.tabla-cobro .grupo-plan.cerrado tr:not(.fila-plan) { display: none; }

.tabla-cobro .fila-plan strong { font-size: 12.5px; font-weight: 600; }

.tabla-cobro .fila-plan small {
  margin-left: 10px;
  color: var(--texto-tenue);
  font-size: 11.5px;
}

.tabla-cobro .grupo-plan:first-of-type .fila-plan td { border-top: 0; }


/* Saldo a favor: plata del paciente que ya entró y todavía no se aplicó. */
.tarjeta.a-favor strong { color: var(--atendido); }



/* El número de tratamiento lleva al plan, pero sin subrayado ni el violeta
   de los links visitados: adentro de una tabla eso ensucia. */
/* El nombre del plan, al lado del numero y no debajo.

   En una tabla, un `small.sin-dato` se pone en bloque —es el dato de apoyo que
   va debajo del principal— y aca el numero y el nombre son UNA sola cosa: «508
   Alineadores». Partidos en dos renglones estiraban cada fila al doble para
   decir lo mismo, en una tabla que ya tiene diez columnas.

   Las DOS clases —`.tabla.tabla-citas`— no son un descuido: la regla que lo
   pone en bloque es `.tabla .sin-dato:not(td):not(th)`, y cada `:not()` de tipo
   suma especificidad. Con una sola clase esta regla perdia y el nombre seguia
   cayendo abajo. */
.tabla.tabla-citas .nombre-plan { display: inline; margin-left: 5px; }

.enlace-plan { color: var(--dorado); text-decoration: none; }
.enlace-plan:hover { color: var(--dorado-fuerte); }


/* El detalle del pago: una línea por medio y por prestación. */
.lista-desglose { margin: 6px 0 14px; padding: 0; list-style: none; }

.lista-desglose li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  border-bottom: 1px solid var(--borde);
  font-size: 12.5px;
}

.lista-desglose li:last-child { border-bottom: 0; }
.lista-desglose small { display: block; color: var(--texto-tenue); font-size: 11px; }
.lista-desglose strong { font-variant-numeric: tabular-nums; white-space: nowrap; }

#modal-mostrar h4 {
  margin: 18px 0 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

/* ------------------------------------------- gastos anulados */

/* Van abajo de la tabla y plegados: se ven cuando se los busca, no todo el
   tiempo. Un gasto anulado no suma, pero tiene que poder encontrarse. */
.gastos-anulados {
  margin-top: 22px;
  border-top: 1px solid var(--borde);
  padding-top: 14px;
}

.gastos-anulados > summary {
  cursor: pointer;
  color: var(--texto-tenue);
  font-size: 12.5px;
  list-style: none;
}

.gastos-anulados > summary::-webkit-details-marker { display: none; }
.gastos-anulados > summary::before { content: '▸ '; }
.gastos-anulados[open] > summary::before { content: '▾ '; }
.gastos-anulados > summary:hover { color: var(--texto); }

/* Tachado y en gris: se lee que estuvo y ya no cuenta. */
.fila-anulada td { color: var(--texto-tenue); }

/* La ficha de un cobro desplegado: con qué se pagó, quién lo recibió y qué
   dejó escrito. Lleva su propio margen porque la fila del detalle anula el
   padding de la celda —lo hace para que la tabla anidada apoye contra los
   bordes— y sin esto el renglón arranca pegado al borde izquierdo. */
.ficha-cobro {
  padding: 10px 14px;
  color: var(--texto-tenue);
  font-size: 12.5px;
  line-height: 1.55;
}

/* Una devolución en la lista de cobros: plata que volvió al paciente.
   Apagada y con el monto en negativo, para que no se lea como un cobro más
   en una lista donde todo lo demás suma. */
.fila-devuelta td { color: var(--texto-tenue); }

/* Un precio que ya no se cobra va tachado.

   Por clase y no por posición: era `td:nth-child(4)`, y la cuarta celda dejó de
   ser el precio el día que la tabla pasó a tener columnas distintas según el
   rubro —sin Código ni Laboratorio— y la línea se fue a tachar los botones.
   La celda dice lo que es y el CSS le cree. */
.tabla-arancel .fila-anulada .col-precio { text-decoration: line-through; }

/* Y un movimiento anulado, por lo mismo: el numero sigue escrito porque paso,
   pero no suma. Sin el tachado la columna del libro no cerraba con el total de
   arriba —dos cobros de $1, uno anulado, neto $1— y se leia como un error de
   cuentas hasta notar que uno estaba en gris. */
.fila-anulada .col-monto { text-decoration: line-through; }

/* ------------------------------------ el campo que faltó completar */

/* Un aviso arriba dice que algo falta; el borde dice cuál. Con seis campos en
   dos columnas, encontrarlo a ojo es leerlos todos de nuevo. */
.campo-modal.falta > input,
.campo-modal.falta > select,
.campo-modal.falta > textarea,
.campo-modal.falta .campo-con-accion > input,
.campo-modal.falta .campo-con-accion > select {
  border-color: var(--anulado);
  background: var(--anulado-suave);
}

.falta-aviso {
  display: block;
  margin-top: 3px;
  color: var(--anulado);
  font-size: 11px;
}

/* --------------------------------------------- ver la contrasena */

/* Arranca tapada, como corresponde por si hay alguien mirando la pantalla, y
   el ojito la muestra mientras se escribe. Sin esto, poner una clave es
   escribirla a ciegas dos veces y descubrir al guardar que se colo un espacio. */
.campo-con-ojo {
  position: relative;
  display: block;
  /* El margen se lo lleva el envoltorio. Si se queda en el campo, la caja
     mide 18px de mas y el ojo —que se centra sobre la caja— cae sobre el
     aire de abajo en vez de sobre el campo. Mismo arreglo que la equis. */
  margin-bottom: 18px;
}

/* El campo le deja lugar al boton para que el texto no pase por debajo. */
.campo-con-ojo > input { width: 100%; padding-right: 40px; margin-bottom: 0; }

.ver-clave {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--texto-tenue);
  cursor: pointer;
}

.ver-clave:hover { background: var(--superficie2); color: var(--texto); }
.ver-clave svg { width: 17px; height: 17px; }


/* ---- Los textos editables del recordatorio ----
   La lista de variables va plegada: son nueve y se consultan una vez, cuando
   se escribe el mensaje. Desplegada de entrada le roba la pantalla al cuadro
   de texto, que es lo que se vino a hacer. */
.rec-variables {
  margin: 0 0 18px;
  padding: 10px 12px;
  background: var(--superficie2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  font-size: 12.5px;
}

.rec-variables > summary {
  cursor: pointer;
  color: var(--dorado);
  list-style: none;
}

.rec-variables > summary::-webkit-details-marker { display: none; }
.rec-variables > summary::before { content: '+ '; }
.rec-variables[open] > summary::before { content: '– '; }

.rec-variables ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 4px 16px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.rec-variables li { display: flex; gap: 8px; align-items: baseline; }
.rec-variables li code { flex: none; color: var(--dorado); }
.rec-variables li span { color: var(--texto-tenue); }
.rec-variables .nota { margin: 12px 0 0; }

/* El cuadro donde se escribe el mensaje. `resize: vertical` y no libre: a lo
   ancho ya ocupa la columna entera y estirarlo mas se sale de la tarjeta. */
#c-rec-mail-intro,
#c-rec-mail-pie,
#c-rec-wa-texto {
  width: 100%;
  resize: vertical;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.55;
}
/* ------------------------------------------------ cuentas de dinero */

.tarjetas-cuentas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.tarjeta-cuenta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

/* La que no está en uso se ve, pero apagada: lo que ya pasó por ella sigue
   estando y hay que poder encontrarla. */
.tarjeta-cuenta.apagada { opacity: 0.55; }

.cuenta-cabeza {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.cuenta-cabeza strong { display: block; font-weight: 500; }
.cuenta-cabeza small { display: block; color: var(--texto-tenue); font-size: 11.5px; }

.cuenta-saldo {
  font-size: 22px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.cuenta-saldo.en-rojo { color: var(--anulado); }
.cuenta-saldo.sin-plata { color: var(--texto-tenue); font-size: 14px; }

.cuenta-pie {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11.5px;
}

.cuenta-pie small { color: var(--texto-tenue); }
.cuenta-pie .etiqueta { align-self: flex-start; }

/* Un párrafo explicando la pantalla, debajo del contenido. */
.nota-suelta {
  max-width: 680px;
  margin-top: 18px;
  line-height: 1.55;
}

/* Un tilde con su explicación, adentro de un formulario en popup. */
.interruptor-modal {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  align-items: center;
  margin-top: 14px;
  cursor: pointer;
}

.interruptor-modal input { margin: 0; }
.interruptor-modal small {
  grid-column: 2;
  color: var(--texto-tenue);
  font-size: 11.5px;
  line-height: 1.45;
}

/* ------------------------------------------- el libro de movimientos */

.barra-libro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.barra-libro .campo-modal { margin: 0; }
.barra-libro input[type="month"] { min-width: 170px; }

.totales-libro {
  display: flex;
  gap: 26px;
}

.totales-libro span { display: flex; flex-direction: column; gap: 2px; }
.totales-libro small { color: var(--texto-tenue); font-size: 11px; }
.totales-libro strong {
  font-size: 17px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.en-verde { color: var(--atendido); }

/* Una transferencia no es ni ingreso ni gasto: la plata cambia de cuenta. En
   verde y rojo parecía que hubo las dos cosas por el mismo monto. */
.monto-neutro { color: var(--texto); }

/* Mes y año, uno al lado del otro. */
.periodo-libro { display: flex; gap: 10px; align-items: flex-end; }
.periodo-libro .campo-modal { margin: 0; }

/* ------------------------------------------------------ el arqueo */

/* Los números con los que el sistema llegó al esperado. Se muestran antes de
   pedir el contado: primero se entiende de dónde sale, después se cuenta. */
.cuentas-del-arqueo {
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cuentas-del-arqueo > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.cuentas-del-arqueo dt { color: var(--texto-tenue); font-size: 12.5px; }
.cuentas-del-arqueo dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}

.cuentas-del-arqueo .destacada {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--borde);
}

.cuentas-del-arqueo .destacada dt { color: var(--texto); font-weight: 500; }
.cuentas-del-arqueo .destacada dd { font-size: 17px; font-weight: 500; }

/* ------------------------------------------- prestaciones (arancel) */

/* Los filtros van arriba de la tabla y no en la barra: la barra ya tiene el
   buscador de pacientes, y dos buscadores pegados se confunden. */
.filtros-arancel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

/* `comun.js` le mete al buscador una cajita con la equis de limpiar, asi que
   el que estira es el envoltorio y no el campo. */
.filtros-arancel .campo-con-equis { flex: 1 1 260px; margin: 0; }
.filtros-arancel input[type="search"] { width: 100%; margin: 0; }
.filtros-arancel select { width: auto; min-width: 200px; margin: 0; }

/* La fecha se lleva el ancho entero si se la deja: los `input` del sistema
   vienen al 100 % para los formularios, y acá empujaba a los botones de al lado
   al renglon siguiente. Del ancho de una fecha alcanza. */
.filtros-arancel input[type="date"] { width: auto; margin: 0; }

/* Una casilla con su texto al lado, en una fila. Sin esto la casilla se va
   arriba y el texto abajo, porque el label es block. */
.marca-filtro,
.marca-modal {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--texto-tenue);
  cursor: pointer;
}

/* El tamaño, el margen y el color los pone la regla de la píldora, allá
   arriba. Acá había un `width: auto` que, con `appearance: none`, dejaba el
   interruptor en cero de ancho: invisible. Ganaba por venir después. */

.marca-modal { color: var(--texto); }

/* La aclaracion de un tilde va DEBAJO, no al lado.

   `.marca-modal` es un flex en una linea, asi que un `small` adentro se ponia
   de tercer item, apretando el rotulo. Con `flex-basis: 100%` se lleva el
   renglon entero, y la sangria lo alinea con el texto del tilde en vez de con
   la pildora. */
.marca-modal { flex-wrap: wrap; }



.marca-modal small {
  flex-basis: 100%;
  margin-left: 40px;
  color: var(--texto-tenue);
  font-size: 11.5px;
  line-height: 1.45;
}


/* Qué clase de cosa es. La clínica se ve; el resto queda apagado, que es
   justo lo que significa: no la hace nadie. */
.tipo-etiqueta {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid var(--dorado-fuerte);
  border-radius: 999px;
  background: var(--dorado-suave);
  font-size: 11px;
  white-space: nowrap;
}

.tipo-etiqueta.otra {
  border-color: var(--borde);
  background: none;
  color: var(--texto-tenue);
}

/* Lo que ya esta pagado se lee de un vistazo, sin leer la palabra: verde, y
   traslucido para que no compita con los numeros de la fila. */
.tipo-etiqueta.lista {
  border-color: color-mix(in srgb, var(--atendido) 55%, transparent);
  background: color-mix(in srgb, var(--atendido) 16%, transparent);
  color: var(--atendido);
}

/* --- las categorías, que se abren y se cierran --- */

.categoria { margin-bottom: 10px; }

.categoria-cabeza {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 6px;
  border-bottom: 1px solid var(--borde);
}

/* El encabezado entero es el botón de abrir: apuntarle a una flecha de diez
   píxeles para abrir una lista de cuarenta filas no tiene sentido. */
.categoria-abrir {
  display: flex;
  flex: 1;
  align-items: baseline;
  gap: 10px;
  padding: 8px 4px;
  border: none;
  background: none;
  color: var(--dorado);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.categoria-abrir:hover { color: var(--dorado-fuerte); }
.categoria-abrir small {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--texto-tenue);
}

/* Al costado cuando esta cerrada, abajo cuando esta abierta.
 *
 * Es UN solo dibujo —el galon de `ICONO_CHEVRON`, el mismo de todos los
 * desplegables— que gira. Antes eran dos triangulos de texto distintos, y al
 * ser letras y no dibujo se veian de otro grosor y otro tamano que las demas
 * flechas del sistema, ademas de saltar de golpe al abrir.
 *
 * El galon nace apuntando abajo, que es el estado ABIERTO; cerrada gira un
 * cuarto de vuelta y queda apuntando al costado. */
.categoria-flecha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  color: var(--texto-tenue);
  transition: transform 0.15s;
}

/* En Especialidades el encabezado es el `summary` de un `details` y no un
   `header` con un botón adentro: se le sacan la flechita nativa y el cursor de
   texto, y el pointer va acá porque ahí el renglón entero abre y cierra. */
summary.categoria-cabeza { cursor: pointer; list-style: none; }
summary.categoria-cabeza::-webkit-details-marker { display: none; }

/* En pantalla chica el nombre y sus tres botones no entran en un renglón: las
   acciones bajan y se alinean debajo del nombre, no contra el borde derecho.
   El sangrado las deja arrancar donde arranca el título, salteando la flecha. */
@media (max-width: 900px) {
  summary.categoria-cabeza { flex-wrap: wrap; }

  /* Y el título envuelve por dentro: si no, la etiqueta de «deshabilitada»
     empuja el renglón y se sale por el costado. */
  .especialidad .categoria-abrir { flex-wrap: wrap; }

  .especialidad-acciones {
    width: 100%;
    margin: 2px 0 6px;
    padding-left: 24px;
    flex-wrap: wrap;
  }

}

/* Y en el teléfono la tabla tiene que entrar en 375 píxeles: el aire de los
   costados se achica, las celdas ceden margen y los dos botones de la fila se
   apilan si no entran uno al lado del otro. Sin esto la tabla mide lo que mide
   su contenido y se sale por la derecha, que en un listado que se recorre de
   arriba abajo es lo peor que puede pasar.

   Va en 600 y no en 900 porque en una tablet entra todo de una: apilar los
   botones ahí sería alargar las filas por nada. */
@media (max-width: 600px) {
  .contenido.angosto { padding-inline: 12px; }

  .tabla-motivos th,
  .tabla-motivos td { padding-inline: 6px; }
  .tabla-motivos .col-acciones { white-space: normal; }

  /* El desplegable de «Asignar a...» mide el nombre más largo de la lista, y
     con esa columna de más la tabla de los motivos sueltos volvía a pasarse.
     Recortado sigue diciendo lo que hay que apretar, y lo elegido se lee en la
     lista del sistema, que se abre a pantalla completa. */
  .tabla-motivos select { max-width: 96px; }
}

.categoria:not(.abierta) .categoria-flecha { transform: rotate(-90deg); }
.categoria-abrir:hover .categoria-flecha { color: var(--dorado); }
.categoria-tipos { display: flex; gap: 6px; }

/* La tabla de una categoría abierta va de lado a lado, igual que su encabezado.

   `.tabla-admin` le pone un tope de 1150px, que es lo correcto para una lista
   suelta —un renglón de 1600px de ancho se lee mal— pero acá no: la tabla vive
   ADENTRO de la categoría, y una tabla más angosta que el encabezado que la
   contiene se lee como si le faltara algo. Que las dos empiecen y terminen en el
   mismo lugar es lo que las hace verse como una sola cosa.

   Antes tenía además `margin: 10px 0 20px`, y ese `0` de los costados le ganaba
   al `margin-inline: auto` de la regla base: quedaba angosta Y pegada a la
   izquierda. Ahora ocupa todo y el centrado no hace falta. */
/* La lista de categorías se lee como una tabla, así que se pinta como una.

   Eran veintiún renglones del mismo color separados por una línea, mientras
   cualquier otra lista del sistema alterna el fondo. Con veintiuno seguidos, el
   ojo pierde el renglón a mitad de camino entre el nombre de la izquierda y los
   botones de la derecha, que es justo lo que las franjas evitan.

   Sólo cuando está cerrada: abierta manda su tabla, y una franja detrás de una
   tabla con sus propias franjas es ruido. */
.categoria:not(.abierta):nth-of-type(even) .categoria-cabeza {
  background: var(--superficie2);
}

/* Y cerradas se tocan, como los renglones de una tabla.

   `.categoria` lleva 10px de margen abajo, que hacen falta cuando está ABIERTA
   —la tabla necesita aire— pero cerradas dejaban un corte del color de la página
   entre franja y franja: la franja parecía terminar antes de la línea divisoria.
   Lo que separa un renglón del siguiente es el borde de 1px del encabezado, que
   ya está. */
.categoria:not(.abierta) { margin-bottom: 0; }

.categoria .tabla-arancel,
.categoria .tabla-motivos {
  max-width: none;
  margin-block: 10px 20px;
}

/* Y el desplegable para asignarle una especialidad a un motivo suelto mide lo
   que mide el nombre más largo, no lo que sobre de la columna. */
.tabla-motivos select { width: auto; }

/* --- la fila que se está editando --- */

.tabla-arancel td { vertical-align: middle; }
.tabla-arancel .col-codigo { width: 90px; }

/* Un campo que se edita adentro del renglón, sin abrir nada.

   Pelea con la regla general de la casa, que le pone a todo input ancho completo
   y 18px de margen abajo. Estaba encerrado en `.tabla-arancel`, que era la única
   tabla que lo tenía; se le saca el scope porque lo usa también el CRM para
   asignar una tarea desde la lista, y es el mismo campo. */
input.campo-fila,
select.campo-fila {
  width: 100%;
  margin: 0;
  padding: 6px 9px;
  font-size: 12.5px;
}

select.campo-fila { padding-right: 26px; }
.tabla-arancel input.campo-monto { width: 110px; text-align: right; }
.tabla-arancel input.campo-codigo { width: 80px; }

.fila-editando { background: var(--dorado-suave) !important; }

/* Confirmar y cancelar la edición de un renglón: el mismo círculo que el lápiz
   y el tachito de la misma fila.

   Eran los caracteres ✓ y ✕ sin borde, así que en la fila que se está editando
   convivían dos dibujos sueltos con tres botones en círculo. Y un carácter se
   apoya en la línea de base mientras un SVG se centra en su caja: quedaban
   además a distinta altura. */
.aceptar-fila,
.cancelar-fila {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  vertical-align: middle;
}

.aceptar-fila { color: var(--atendido); }
.cancelar-fila { color: var(--texto-tenue); }

/* Los dos se encienden igual: borde y fondo de su color.

   El tilde tenía fondo y la cruz no, así que al pasar de uno al otro parecían
   dos clases de botón. Y el verde estaba escrito a mano —`rgba(74,140,90,.12)`—
   en vez de salir de la variable, así que en tema oscuro no acompañaba. Ahora
   los dos usan las suyas, que están definidas en los dos temas. */
.aceptar-fila:hover {
  color: var(--atendido);
  border-color: var(--atendido);
  background: var(--atendido-suave);
}

/* El signo de pesos que cobra: verde, y el mismo relleno al pasar el mouse que
   el tilde de aceptar. Es plata que entra, igual que un tilde es algo que se
   confirma; el rojo queda para lo que deshace. La letra va un punto mas grande
   porque un «$» solo se lee mas chico que un dibujo del mismo alto. */
.accion-plata {
  color: var(--atendido);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}

.accion-plata:hover {
  color: var(--atendido);
  border-color: var(--atendido);
  background: var(--atendido-suave);
}

.cancelar-fila:hover {
  color: var(--anulado);
  border-color: var(--anulado);
  background: var(--anulado-suave);
}

.aceptar-fila svg,
.cancelar-fila svg { width: 15px; height: 15px; }

.abrir-todas {
  /* En línea y centrado: era `block`, y un galón adentro de un bloque se apoya
     en la línea base del texto en vez de en su medio. */
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: none;
  color: var(--texto-tenue);
  font-size: 12.5px;
  cursor: pointer;
}

.abrir-todas:hover { border-color: var(--dorado); color: var(--texto); }

/* Una categoría deshabilitada se ve, apagada: lo que ya se cobró con sus
   prestaciones sigue estando y hay que poder encontrarla. */
.categoria.apagada .categoria-abrir strong,
.categoria.apagada .categoria-abrir small { color: var(--texto-tenue); }
.categoria.apagada .tabla-arancel,
.categoria.apagada .tabla-motivos { opacity: 0.6; }

/* --- la rueda: qué se le paga a cada profesional --- */

.reglas-profesionales {
  max-height: 44vh;
  overflow-y: auto;
  margin-top: 6px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

.regla-grupo + .regla-grupo { border-top: 1px solid var(--borde); }

.regla-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 12px;
}

.regla-fila[hidden],
.regla-grupo[hidden] { display: none; }

/* Una raya entre filas y el foco marcado.
   Son doscientas cincuenta filas de nombre largo y campo a la derecha: sin la
   raya la vista se pierde entre las dos puntas, y con el cursor dentro de un
   campo no habia forma de saber a que prestacion le estabas poniendo el monto. */
.regla-fila + .regla-fila { border-top: 1px solid var(--borde); }
.regla-fila:hover {
  background-image: linear-gradient(var(--dorado-suave), var(--dorado-suave));
}

.regla-fila:focus-within {
  background: var(--superficie2);
  box-shadow: inset 3px 0 0 var(--dorado);
}

.regla-titulo:hover { filter: brightness(1.06); }

/* El renglón de la especialidad: escribir acá lo pone en todos los suyos. */
.regla-titulo {
  background: var(--superficie2);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--dorado);
}

.reglas-profesionales input.regla-monto {
  width: 120px;
  margin: 0;
  padding: 6px 9px;
  font-size: 12.5px;
  text-align: right;
}

/* Cuánto insumo consume una prestación. Es la misma fila y va en el mismo
   lugar, así que lleva el mismo ancho; lo que cambia es que queda centrado,
   porque es una cantidad de un dígito o dos y no plata. Sin ancho propio se
   quedaba con el `width: 100%` de todos los campos y se llevaba media fila
   para mostrar un «0,5» en el medio de la nada. */
.regla-fila > input[type="number"] {
  width: 120px;
  margin: 0;
  padding: 6px 9px;
  font-size: 12.5px;
}

/* El archivo del CSV: el botón que trae el navegador no se puede estilar,
   pero al menos no arrastra el ancho completo ni los 18px de abajo. */
.campo-modal input[type="file"] {
  width: 100%;
  margin: 0;
  padding: 9px 11px;
  background: var(--negro);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  font-size: 12.5px;
  cursor: pointer;
}

.nota code {
  padding: 1px 5px;
  background: var(--superficie2);
  border-radius: 4px;
  font-size: 11.5px;
}

/* La casilla del laboratorio y su costo, en un renglón: apilados, la fila que
   se estaba editando crecía al doble de alto que las demás. */
.lab-en-linea {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  white-space: nowrap;
}

.lab-en-linea .marca-filtro { font-size: 11px; }
.lab-en-linea input.campo-monto { width: 90px; }

/* Volver a ofrecer algo que se dio de baja. */
.chip-habilitar { font-size: 11px; padding: 3px 10px; }

/* ------------------------------------------------------- laboratorios */

/* Los datos de contacto del proveedor, uno abajo del otro. */
.lab-datos {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12.5px;
  color: var(--texto-tenue);
}

/* La lista de precios va al fondo de la tarjeta, no atrás del último dato que
   tenga cargado el proveedor: así queda en la misma línea en todas las
   tarjetas de la fila y se la busca siempre en el mismo lugar. */
.lab-pie {
  display: flex;
  justify-content: center;
  margin-top: auto;
  padding-top: 4px;
}

.lab-pie .chip { width: 100%; text-align: center; }

/* Un enlace adentro de una tabla: se lee como texto hasta que se lo apunta.
   Subrayarlo siempre hacía que la columna pareciera un menú. */
.enlace-suave {
  color: var(--texto);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.enlace-suave:hover { color: var(--dorado); border-bottom-color: var(--dorado); }

.tabla-pedidos td { vertical-align: middle; }

/* El estado se cambia en la misma tabla: es lo que uno viene a hacer acá y
   abrir un cartel para mover un desplegable no tiene sentido. */
.tabla-pedidos select.estado-pedido {
  width: auto;
  min-width: 120px;
  margin: 0;
  padding: 5px 24px 5px 9px;
  font-size: 12.5px;
}

/* El botón de la plata: el signo pesos solo, del tamaño de los otros iconos
   de fila para que la columna no baile. */
.tabla-pedidos .editar-detalle { font-size: 15px; font-weight: 600; }

.campo-modal textarea {
  width: 100%;
  padding: 11px 13px;
  background: var(--negro);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  font: inherit;
  font-size: 13px;
  resize: vertical;
}

/* El botón del laboratorio adentro de la prestación: dice el estado, así que
   tiene que poder ser largo sin romper la fila. */
.chip-lab {
  margin-top: 4px;
  white-space: nowrap;
  font-size: 11.5px;
}

.tabla-prestaciones .chip-lab { margin: 0; }

/* Los intentos anteriores, cuando hubo que rehacer un trabajo. */
.lista-pedidos {
  margin: 4px 0 0;
  padding-left: 18px;
  font-size: 12.5px;
  color: var(--texto-tenue);
}

.lista-pedidos li { margin-bottom: 3px; }

/* El estado del laboratorio y su botón, en un renglón. */
.lab-linea {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lab-linea strong { display: inline; }

/* Chiquita, como la pastilla del plan en el pop-up de la agenda: es un
   acceso, no la acción principal de la fila. */
.pastilla-lab {
  padding: 2px 10px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: none;
  color: var(--texto-tenue);
  font-size: 11px;
  white-space: nowrap;
  cursor: pointer;
}

.pastilla-lab:hover {
  border-color: var(--dorado);
  background: var(--dorado-suave);
  color: var(--texto);
}

/* --- pagarle al laboratorio --- */

.pagar-lista {
  max-height: 34vh;
  overflow-y: auto;
  margin-bottom: 16px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

.pagar-fila {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  cursor: pointer;
}

.pagar-fila + .pagar-fila { border-top: 1px solid var(--borde); }
.pagar-fila:hover {
  background-image: linear-gradient(var(--dorado-suave), var(--dorado-suave));
}

.pagar-fila input[type="checkbox"] {
  width: auto;
  margin: 0;
  accent-color: var(--dorado-fuerte);
  cursor: pointer;
}

.pagar-fila > span { flex: 1; min-width: 0; }
.pagar-fila strong { display: block; font-weight: 500; font-size: 13px; }
.pagar-fila small { display: block; color: var(--texto-tenue); font-size: 11.5px; }
.pagar-fila em { font-style: normal; font-size: 13px; white-space: nowrap; }

/* -------------------------------------------------------------- CRM */

/*
 * El contexto del paciente, adentro del renglón desplegado.
 *
 * Son siete datos cortos: edad, teléfono, mail, última visita, cuántas veces
 * vino, si debe y si tiene turno. En cuadrícula entran en dos renglones y se
 * leen de un vistazo; en lista serían siete renglones de nada.
 */
.contexto-crm {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px 20px;
  margin: 0;
  padding: 14px 18px;
}

.contexto-crm dt {
  font-size: 11px;
  color: var(--texto-tenue);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.contexto-crm dd {
  margin: 1px 0 0;
  font-size: 13px;
  font-weight: 500;
}

/*
 * El enlace al dia de la agenda, adentro de la celda del CRM.
 *
 * Con la clase de los iconos de accion heredaba su ancho angosto y «ver el dia»
 * se partia en tres renglones, uno por palabra. Es texto, no un icono: va en
 * linea propia, sin cortarse, y apagado hasta que uno pasa por encima.
 */
.ir-al-dia {
  display: inline-block;
  margin-top: 2px;
  color: var(--texto-tenue);
  font-size: 11.5px;
  white-space: nowrap;
  text-decoration: none;
  border-bottom: 1px solid var(--borde);
}

.ir-al-dia:hover { color: var(--dorado); border-bottom-color: var(--dorado); }

/* --------------------------------------------------------- reportes */

/*
 * Las cifras de arriba del reporte.
 *
 * Cuadricula que se acomoda sola: en una pantalla ancha entran las siete en un
 * renglon y en una angosta se apilan de a dos, sin puntos de corte a mano.
 */
.cifras-reporte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.tarjeta-cifra {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

.tarjeta-cifra strong {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.15;
}

.tarjeta-cifra span { font-size: 12.5px; color: var(--texto-tenue); }
.tarjeta-cifra small { font-size: 11px; }

.tarjeta-panel h3 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
}

/* La variación contra el período anterior, en las tarjetas del panel. */
.tarjeta-cifra .delta-bien { color: var(--atendido); }
.tarjeta-cifra .delta-mal { color: var(--ausente); }

/* Los gráficos de reportes. El alto va acá y no en el canvas: Chart.js llena
   el contenedor, y sin un alto reservado el gráfico crece sin freno. */
.grafico-reporte {
  position: relative;
  height: 280px;
}

.grafico-reporte.alto { height: 340px; }

/* Dos gráficos a la par, que abajo se apilan solos. */
.graficos-pareja {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 0 18px;
  align-items: start;
}

/* Las flechas de la pestaña del Día, pegadas al calendario. */
.mover-dia { display: inline-flex; gap: 4px; }

/*
 * El encabezado de una tabla del reporte: el título a la izquierda, el total y
 * el buscador empujados a la derecha. En una pantalla angosta el buscador cae
 * abajo entero, que es mejor que un campo de cuatro caracteres.
 */
.titulo-tabla {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.titulo-tabla h3 { margin: 0; flex: 1 1 auto; }

.total-tabla {
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-tenue);
}

.buscar-tabla {
  flex: 0 1 200px;
  min-width: 120px;
  padding: 5px 9px;
  font-size: 12px;
  font-family: inherit;
  color: var(--texto);
  background: var(--superficie2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

/*
 * Las tablas anchas scrollean SOLAS y no empujan la página.
 *
 * La matriz de categorías son doce meses más los totales: sin esto, la página
 * entera se corre para los costados y la barra de arriba se va de la pantalla.
 */
.tabla-ancha { overflow-x: auto; }

/* Los encabezados que ordenan. La flecha aparece en el que manda. */
.tabla-ordenable th[data-col] {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.tabla-ordenable th[data-col]:hover { color: var(--dorado); }

.tabla-ordenable th.ordenando { color: var(--dorado); }
.tabla-ordenable th.ordenando[data-sentido="baja"]::after { content: ' ▾'; }
.tabla-ordenable th.ordenando[data-sentido="sube"]::after { content: ' ▴'; }

/*
 * La parte que le toca a cada renglón, dibujada detrás del porcentaje.
 *
 * La barra va de fondo y el número encima: son el mismo dato, y ponerlos en
 * dos columnas sería gastar ancho en decir dos veces lo mismo.
 */
.celda-parte {
  position: relative;
  min-width: 90px;
}

.celda-parte > span:last-child { position: relative; }

.barra-parte {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 60%;
  background: rgba(182, 163, 96, 0.3);
  border-radius: 3px;
  pointer-events: none;
}

/*
 * Las celdas de la matriz: el fondo acompaña al monto.
 *
 * `--calor` va de 0 a 1 y lo pone la pantalla en cada celda. El dorado de la
 * marca escrito a mano y no una variable del tema porque acá se necesita el
 * color con transparencia, y las variables vienen ya resueltas.
 */
.celda-mes {
  white-space: nowrap;
  background: rgba(182, 163, 96, calc(var(--calor, 0) * 0.55));
}

.celda-mes:not([data-v="0"]) { font-weight: 500; }
.celda-mes[data-v="0"] { color: var(--texto-tenue); }

/*
 * La matriz no entra en los 1150px que `.tabla-admin` se pone a si misma.
 *
 * Son doce meses mas tres columnas de totales: con el tope puesto, las celdas
 * se aplastan hasta que el importe se parte en dos renglones. Sin el tope, la
 * tabla crece lo que necesita y el que scrollea es `.tabla-ancha`, no la
 * pagina entera.
 */
.tabla-matriz {
  max-width: none;
  margin-inline: 0;
  font-size: 12px;
}

.tabla-matriz tfoot th {
  border-top: 1px solid var(--borde);
  padding-top: 12px;
  font-weight: 600;
  text-align: left;
}

.tabla-matriz tfoot th.der { text-align: right; }

/* La bolita del estado en la lista de turnos del día. */
.bolita-estado {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  vertical-align: middle;
}

/* Un pago anulado se ve, pero tachado: estuvo, y no entró. */
.renglon-anulado td { text-decoration: line-through; opacity: 0.55; }
.renglon-anulado td small { text-decoration: none; }

/* ------------------------------------ fotos, radiografias y documentos */

/*
 * La galeria de la ficha.
 *
 * Cuadricula que se acomoda sola: `auto-fill` con un minimo hace que entren
 * cuatro en una pantalla ancha y dos en una angosta, sin puntos de corte
 * escritos a mano.
 */
.galeria-archivos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.archivo {
  margin: 0;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
}

.archivo:hover { border-color: var(--dorado); }

.archivo > a {
  display: block;
  /* Cuadrado fijo: una panoramica es apaisada y una foto de sonrisa no, y sin
     esto la cuadricula queda con los renglones de alturas distintas. */
  aspect-ratio: 4 / 3;
  background: var(--negro);
}

.archivo img {
  width: 100%;
  height: 100%;
  /* `contain` y no `cover`: recortarle los bordes a una radiografia es
     esconder justo donde suele estar lo que se quiere ver. */
  object-fit: contain;
  display: block;
}

.archivo-sin-vista {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--texto-tenue);
}

.archivo-sin-vista svg { width: 42px; height: 42px; }

.archivo figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  font-size: 12.5px;
}

.archivo figcaption strong {
  flex: 1 1 100%;
  font-weight: 500;
  line-height: 1.3;
  /* Dos renglones y basta: un nombre de archivo de camara ocupa tres. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Las acciones, contra el borde derecho del recuadro. El `auto` va SÓLO en la
   primera: puesto en las dos, el sobrante se reparte entre ambas y el lápiz
   queda flotando en el medio, lejos del peso del archivo y lejos del borde. */
.archivo figcaption .editar-detalle:first-of-type { margin-left: auto; }

/* --------------------------------------------- los campos obligatorios */

/*
 * El asterisco rojo al lado del rótulo, no abajo ni al final.
 *
 * El rótulo de un `.campo-modal` es un nodo de texto suelto seguido del campo,
 * así que un `::after` normal cae DESPUÉS del campo, dos renglones abajo. Con
 * el label en flex, ese texto pasa a ser un elemento más de la fila y el
 * asterisco se le puede poner al lado; el campo se lleva `order: 2` y ancho
 * completo, así que baja solo al renglón siguiente.
 *
 * Va siempre, desde que el formulario se abre: enterarse de que algo era
 * obligatorio recién cuando falla es enterarse tarde.
 */
.campo-modal.obligatorio {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px;
}

.campo-modal.obligatorio::after {
  content: '*';
  order: 1;
  color: var(--anulado);
  font-weight: 600;
}

.campo-modal.obligatorio > input,
.campo-modal.obligatorio > select,
.campo-modal.obligatorio > textarea,
.campo-modal.obligatorio > .dato-fijo,
.campo-modal.obligatorio > .campo-con-ojo,
.campo-modal.obligatorio > .campo-con-unidad,
.campo-modal.obligatorio > .pista {
  order: 2;
  flex: 0 0 100%;
}

/* El mismo asterisco para los campos de rejilla.
 *
 * Ahi el rotulo SI es un elemento propio —un `<label>` de verdad, con el campo
 * al lado en vez de adentro—, asi que no hace falta el enredo del flex: el
 * `::after` cuelga del rotulo y ya cae donde tiene que caer.
 *
 * Son dos estructuras distintas para lo mismo, y esta regla existe para que la
 * marca se vea igual en las dos. Quien alguna vez las unifique borra esta. */
.campo.obligatorio > label::after {
  content: ' *';
  color: var(--anulado);
  font-weight: 600;
}

/* Y la ayuda, al final. Sin esto se lleva el `order: 0` que tiene todo lo que
   no lo declara, y aparece ANTES del campo, pegada al rótulo: se leía «Nombre
   Es como se la va a ver en la agenda *», con el asterisco al final de la
   explicación. Apareció al ponerle ayuda al primer campo obligatorio del
   sistema; hasta entonces ninguno la tenía y el hueco no se veía. */
.campo-modal.obligatorio > .ayuda-campo {
  order: 3;
  flex: 0 0 100%;
}

/* El lápiz de al lado de un dato: se edita ahí mismo, sin abrir nada. Chico y
   apagado hasta que uno pasa por encima: es una acción secundaria. */
.lapiz-chico {
  padding: 0 4px;
  border: none;
  background: none;
  color: var(--texto-tenue);
  font-size: 12px;
  line-height: 1;
  opacity: 0.45;
  cursor: pointer;
}

tr:hover .lapiz-chico { opacity: 1; }
.lapiz-chico:hover { color: var(--dorado); }

.nota-pedido {
  display: flex;
  align-items: center;
  gap: 2px;
}

.nota-pedido small { font-size: 11.5px; }

/*
 * El campo que reemplaza a un dato en la tabla.
 *
 * Va con el selector de elemento y no sólo con la clase: la regla general de
 * la casa es `input[type="number"]`, que le gana a una clase sola por
 * especificidad. Con la clase pelada el campo se quedaba con el padding
 * grande de los formularios y estiraba la fila entera.
 *
 * El alto se fija para que la fila no se mueva: al abrir y cerrar el editor,
 * la tabla tiene que quedarse quieta.
 */
input.campo-en-lugar {
  box-sizing: border-box;
  height: 26px;
  margin: 0;
  padding: 2px 7px;
  font-size: 13px;
  text-align: inherit;
}

/* En la columna del costo: más angosto que el monto con su lápiz, para que la
   columna no se ensanche al abrir el editor y las de al lado no se corran. */
.monto-lapiz input.campo-en-lugar { width: 86px; text-align: right; }

/* Y la celda se queda con su ancho aunque adentro haya un campo. */
.tabla-pedidos td:has(.monto-lapiz) { width: 1%; white-space: nowrap; }

/* En la nota, todo el ancho que le deje la celda. */
.nota-pedido input.campo-en-lugar { width: 100%; min-width: 0; }

.tabla-pedidos .pieza-chip { margin-top: 2px; }

/*
 * El costo con su lápiz, y el pesos con el tacho, en un renglón.
 *
 * El flex va en un envoltorio adentro de la celda y NO en el `td`: un `td` con
 * `display: flex` deja de ser una celda de tabla, y ahí se le desarma el alto
 * y el fondo —quedaban recuadros grises sueltos al pasar el mouse, y las
 * columnas de plata desalineadas de los botones—.
 */
.monto-lapiz {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.tabla-pedidos .col-acciones { white-space: nowrap; }

.tabla-pedidos .col-acciones .editar-detalle,
.tabla-pedidos .col-acciones .borrar-detalle {
  vertical-align: middle;
}

.tabla-pedidos .col-acciones .editar-detalle + .borrar-detalle { margin-left: 6px; }

/* Un dato que va abajo del otro y no pegado al lado. */
.segundo-renglon { display: block; }

/* Los dos con la misma caja: el pesos venía del círculo de 26px y el tacho
   del recuadro de 46x36, y juntos parecían de dos sistemas distintos. */
.tabla-pedidos .col-acciones .editar-detalle,
.tabla-pedidos .col-acciones .borrar-detalle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  font-size: 13px;
}

.tabla-pedidos .col-acciones .editar-detalle:hover {
  border-color: var(--dorado);
  color: var(--dorado);
}

.tabla-pedidos .col-acciones .borrar-detalle svg { width: 15px; height: 15px; }

/* Una tabla donde la fila no hace nada: lo único que se aprieta es el ícono de
   la punta. El resaltado al pasar por encima promete un clic que no existe. */
.tabla.tabla-quieta tbody tr:hover:not(.fila-detalle) > td { background-image: none; }

/* La rueda y los demás iconos de fila, centrados en su botón. El carácter de
   engranaje del teclado se veía como un asterisco raro: va el SVG de la casa. */
.editar-detalle .icono-rueda { width: 15px; height: 15px; margin: 0 auto; }
.editar-detalle { display: inline-flex; align-items: center; justify-content: center; }

/* Los tres iconos del encabezado de una categoría, del mismo tamaño y sin
   achicarse: la cabecera es flex y los apretaba a lo que midiera su dibujo. */
.categoria-cabeza .editar-detalle { flex: 0 0 26px; }

.editar-detalle .icono-lapiz,
.editar-detalle svg { width: 15px; height: 15px; }

/*
 * Adentro de un botón, el ícono es del color del botón.
 *
 * Algunos íconos traen el suyo puesto —`.icono-dato` se pinta de
 * `--texto-tenue`, que es lo correcto cuando va suelto al lado de un dato— y
 * ahí ese color le ganaba al del botón: al pasar por encima, el lápiz se
 * doraba y la cruz de al lado se quedaba gris, en la misma fila y en el mismo
 * botón. Lo mismo iba a pasar con el rojo del tachito.
 *
 * `inherit` devuelve la decisión al botón, que es quien sabe si está en
 * reposo, señalado o apagado.
 */
.editar-detalle svg,
.borrar-detalle svg,
.accion-categoria svg { color: inherit; }

/* La especialidad se abre y se cierra: con diez profesionales por grupo, la
   lista no entra en la pantalla y hay que poder plegar lo que no se está
   tocando. El renglón del título se queda siempre: ahí se le pone el valor a
   todo el grupo de una. */
.regla-grupo:not(.abierta) .regla-fila:not(.regla-titulo) { display: none; }

.regla-abrir {
  display: flex;
  flex: 1;
  align-items: baseline;
  gap: 8px;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.regla-abrir:hover { color: var(--dorado-fuerte); }
.regla-abrir small { font-weight: 400; letter-spacing: 0; text-transform: none; }
/* Igual que la de las categorias. Esta encima nunca giraba —quedaba apuntando
   abajo tambien cerrada—, asi que cerrar una especialidad no dejaba ninguna
   senal en pantalla de que seguia ahi. */
.regla-flecha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  color: var(--texto-tenue);
  transition: transform 0.15s;
}

.regla-grupo:not(.abierta) .regla-flecha { transform: rotate(-90deg); }
.regla-abrir:hover .regla-flecha { color: var(--dorado); }

/* La casilla de indefinido, debajo de su fecha y en chico: es una aclaracion
   del campo, no un campo aparte. */
.marca-fecha {
  margin-top: 5px;
  font-size: 11.5px;
}

.marca-fecha label { cursor: pointer; }
.campo-modal input:disabled { opacity: 0.45; cursor: not-allowed; }

/* Un campo con su unidad adentro: el % del porcentaje, pegado al número.
   El margen se lo lleva el envoltorio, igual que con el ojo de la contraseña:
   si se queda en el campo, la unidad se centra sobre el aire de abajo. */
.campo-con-unidad {
  position: relative;
  display: block;
  margin-bottom: 18px;
}

.campo-con-unidad > input {
  width: 100%;
  margin-bottom: 0;
  padding-right: 34px;
}

.campo-con-unidad .unidad {
  position: absolute;
  top: 50%;
  right: 13px;
  transform: translateY(-50%);
  color: var(--texto-tenue);
  font-size: 13px;
  pointer-events: none;
}

/* Cuando la unidad decide si esa fila se paga en pesos o en porcentaje, es un
   boton y no un cartel: se toca el $ y pasa a %. Sin fondo ni borde, para que
   siga leyendose como parte del campo hasta que se le pasa el mouse. */
.campo-con-unidad button.unidad {
  pointer-events: auto;
  padding: 2px 4px;
  border: 0;
  border-radius: 4px;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  line-height: 1;
}

.campo-con-unidad button.unidad:hover {
  color: var(--dorado);
  background: var(--superficie);
}

.campo-con-unidad button.unidad[hidden] { display: none; }

/* Las flechitas del campo numérico se pisaban con la unidad. Para un
   porcentaje no hacen falta: se escribe, no se sube de a uno. */
.campo-con-unidad > input[type="number"] { -moz-appearance: textfield; }
.campo-con-unidad > input[type="number"]::-webkit-outer-spin-button,
.campo-con-unidad > input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* El tacho del encabezado de una categoria, del mismo tamano que el lapiz y la
   rueda: en la casa los iconos de fila miden todos igual. */
/* El de la categoría tenía `border: none` y quedaba flotando al lado de un
   lápiz que sí tiene su círculo. Ahora los dos se ven igual. */
.categoria-cabeza .borrar-detalle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
}

.categoria-cabeza .borrar-detalle .icono-papelera { width: 15px; height: 15px; }

/* El símbolo de un campo de la rueda. El peso va adelante y el porcentaje
   atrás, como se escriben en el resto del sistema. El hueco se abre sólo del
   lado que corresponde: si se dejara siempre, el número quedaría descentrado
   en los campos vacíos. */
.unidad-regla { display: inline-block; margin: 0; }
.unidad-regla > input { width: 120px; }

.unidad-regla .unidad {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--texto-tenue);
  font-size: 12.5px;
  pointer-events: none;
}

.unidad-regla.unidad-atras .unidad { right: 10px; left: auto; }
.unidad-regla.unidad-atras > input { padding-right: 26px; }

.unidad-regla.unidad-adelante .unidad { left: 10px; right: auto; }
.unidad-regla.unidad-adelante > input { padding-left: 22px; }

/* Los tres puntitos pasaron a ser la rueda, la misma de Prestaciones:
   un icono por accion y el mismo en todo el sistema. */
.puntos {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.puntos .icono-rueda { width: 16px; height: 16px; }

/* ------------------------------------------------- liquidaciones */

/* El turno atendido al que no le cargaron ninguna prestación: es lo que hay
   que reclamar antes de pagar, así que se ve de lejos. */
.fila-falta > td { background: var(--anulado-suave); }

.aviso-falta {
  margin-bottom: 20px;
  padding: 12px 16px;
  border: 1px solid var(--anulado);
  border-radius: var(--radio);
  background: var(--anulado-suave);
  font-size: 13px;
  line-height: 1.5;
}

h3.con-aire { margin-top: 28px; }

.tabla-admin tfoot td {
  border-top: 1px solid var(--borde);
  padding-top: 12px;
}

/* El turno que se abre para ver qué se hizo adentro. */
.abrir-turno {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 2px 6px;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.abrir-turno:hover { color: var(--dorado); }

.fila-detalle > td { padding-top: 0; }

/* Lo que se hizo en un turno, colgado de la fila del turno.
   Es una tabla y no una lista porque ahora lleva plata: los montos tienen que
   quedar alineados en columna para poder compararlos de un vistazo. */
.tabla-anidada {
  width: 100%;
  margin: 2px 0 8px;
  border-collapse: collapse;
  font-size: 12.5px;
}

.tabla-anidada th {
  padding: 2px 8px 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--texto3);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--borde);
}

.tabla-anidada td {
  padding: 6px 8px;
  vertical-align: middle;
  border-bottom: 1px solid var(--borde);
}

.tabla-anidada tr:last-child td { border-bottom: 0; }
.tabla-anidada strong { font-weight: 500; }
.tabla-anidada .sin-dato { font-size: 11.5px; }
.tabla-anidada .col-acciones { width: 1%; white-space: nowrap; }

/* Hasta cuándo llegó la importación: es un dato de contexto, no una alarma. */
.nota-importacion {
  margin-bottom: 16px;
  padding: 10px 14px;
  border-left: 3px solid var(--borde);
  background: var(--superficie2);
}

/* El turno que se fue —anulado o reprogramado—: se puede mostrar, pero no
   compite con los que sí hay que mirar. */
.fila-ida > td { opacity: 0.5; }

/* El que no vino: no es un olvido, es algo para decidir. Por eso no va en el
   rojo de «falta cargar». */
.a-revisar {
  padding: 2px 9px;
  border: 1px solid var(--dorado-fuerte);
  border-radius: 999px;
  background: var(--dorado-suave);
  font-size: 11px;
  white-space: nowrap;
}

.chip-explicar { font-size: 11px; padding: 3px 10px; }

/* La fila con prestaciones se abre entera. El nombre del paciente conserva su
   propio cursor: ahi el clic va a la ficha, no al despliegue. */
.fila-abrible { cursor: pointer; }
/* El hover sale del bloque de `.tabla`. */
.fila-abrible a { cursor: pointer; }

/* El pie de la agenda lleva tres renglones —lo del dia, lo de otros dias y el
   total— y una linea por renglon seria un rayado. La linea la lleva el primero,
   y el total la suya para cerrar la cuenta. */
.tabla-admin tfoot tr:not(:first-child) td {
  border-top: 0;
  padding-top: 4px;
}

.tabla-admin tfoot tr.fila-total td {
  border-top: 1px solid var(--borde);
  padding-top: 8px;
}

/* La tarjeta de una plantilla: es la misma que la de una cuenta, pero adentro
   lleva la tabla de montos y por eso no puede ser tan angosta. */
.tarjeta-plantilla {
  margin-bottom: 16px;
  padding-bottom: 4px;
}

.tarjeta-plantilla .tabla-anidada { margin: 10px 0 0; }
.tarjeta-plantilla .pie-formulario { margin-top: 4px; }

/* La tabla anidada tambien se usa fuera de una tabla, asi que se alinea sola
   en vez de heredar el `.tabla .der` de la de afuera. */
.tabla-anidada .der { text-align: right; }

/* A quienes se les aplica algo. Una lista de tildes larga necesita su propio
   alto: sin esto, aplicarle una plantilla a quince profesionales deja el
   boton de aceptar abajo de todo, fuera de la pantalla. */
.lista-para-tildar {
  max-height: 320px;
  overflow-y: auto;
  margin-top: 4px;
  padding: 4px 8px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: var(--superficie2);
}

.lista-para-tildar .campo-modal { margin: 0; }
.lista-para-tildar small { margin-left: 6px; }

/* El arancel entero adentro de la tarjeta de una plantilla.
   Sin scroll propio: la lista crece con lo que hay abierto y la pagina scrollea
   sola. Dos barras de scroll, una adentro de la otra, hacen que la rueda del
   mouse mueva cualquiera de las dos segun donde este el puntero. El alto de
   `.reglas-profesionales` es para el dialogo, que si tiene que entrar en una
   ventana. */
.montos-de-plantilla .reglas-profesionales {
  max-height: none;
  overflow: visible;
}

.montos-de-plantilla .titulo-con-accion { align-items: flex-end; }
.montos-de-plantilla .campo-modal.angosto { min-width: 180px; margin: 0; }
.montos-de-plantilla > .campo-modal { margin: 8px 0; }

/* Un renglon escondido por el buscador de la lista de tildar. Sin esto el
   `hidden` no gana contra el `display:flex` que trae `.campo-modal`. */
.lista-para-tildar [data-nombre][hidden] { display: none; }

/* El renglon del titulo se pliega tocandolo en cualquier parte, asi que se
   comporta como algo apretable en toda su superficie. El campo de la derecha
   queda afuera: ahi se escribe. */
.regla-titulo { cursor: pointer; }
.regla-titulo .campo-con-unidad { cursor: auto; }
.regla-titulo .regla-abrir { flex: 1; text-align: left; }

/* La lista de montos arranca cerrada: `hidden` tiene que ganarle al display
   que trae la caja. */
.montos-de-plantilla[hidden] { display: none; }

/* Adonde se fue el turno que cambio de fecha. Va marcado: es el dato por el
   que uno abre el cartel de un turno caido. */
.cita-movido {
  margin-left: 6px;
  color: var(--dorado);
  font-weight: 500;
}

/* El pie del cartel de un turno vivo: un solo boton, y va a la derecha. Los
   datos se leen de izquierda a derecha y la accion queda del otro lado, que es
   donde estan el aceptar y el guardar en todo el sistema. */
.cita-acciones-derecha { justify-content: flex-end; }

/* ------------------------------------------------- la barra de cada pantalla

   La barra de arriba es la misma en todo el sistema: la agenda, pacientes,
   gastos, liquidaciones. Cambian los botones y el contador; el alto, el aire y
   el tamaño de cada pieza no.

   Estaba escrito una vez para la agenda y otra —distinta— para el resto, y se
   notaba: la misma tarjeta de contador medía 40 pixeles en una pantalla y 52
   en la siguiente, y los botones 40 contra 43. Todo lo que fija tamaños vive
   acá y vale para las dos, con `encabezado` o sin ella.

   El alto de una pieza se declara y no se deja al `padding`: un botón con
   texto de dos renglones y otro de uno terminaban midiendo distinto. */
.controles {
  padding: 11px 20px;
  /* El alto está reservado desde el primer pintado. Varias pantallas arman la
     barra con JavaScript, así que al cambiar de sección se veía una barra
     chata que de golpe crecía al llenarse. Con el alto puesto, lo único que
     aparece es el contenido. */
  min-height: 64px;
  /* En un renglón siempre. Envolviendo, en gastos el botón de registrar caía
     abajo y la barra pasaba a medir el doble justo en la pantalla donde uno
     quiere ver la mayor cantidad de gastos posible. Lo que cede cuando no
     entra es el título, que es texto y no una acción. */
  flex-wrap: nowrap;
}

/* Los controles no se achican: un botón apretado deja de leerse. El que se
   achica es el título, que para eso tiene `min-width: 0`. */
.controles .boton,
.controles .campo-desplegable,
.controles .tarjeta,
.controles .aviso-reprogramar,
.controles .acciones-seccion,
.controles .menu-acciones,
.controles select { flex: none; }

/* El buscador es lo otro que puede ceder: en pacientes mide 460 pixeles y sin
   dejarlo achicar la barra se desbordaba a lo ancho en pantallas de 1280. */
.controles .filtro-agenda,
.controles .campo-con-equis { flex: 1 1 auto; min-width: 120px; }

/* En la agenda el buscador se abre y ocupa el hueco: ahí crecer es lo suyo. En
   las demás secciones no, porque estirándose empujaría los filtros contra el
   borde derecho y el ojo tendría que cruzar la barra entera para pasar del
   buscador al mes. Ancho de buscador, y el hueco lo sigue empujando el
   contador.

   Y cuando no entra todo, el que cede es el buscador —de ahí el 3 de encoger,
   que lo hace ceder antes que nadie— y no el título: un campo de 160 píxeles
   se sigue usando igual, y «Gastos» recortado a «Gast…» no dice qué pantalla
   es, que es justo para lo que está. */
.controles.encabezado .filtro-agenda { flex: 0 3 260px; }
.controles.encabezado .titulo-seccion { min-width: 62px; }
/* Adentro de la barra el texto va siempre a la izquierda. El centrado de
   `.filtro-agenda` era para cuando el buscador vivía solo en una barra propia
   abajo de la agenda: ahí centrado tenía sentido. Acá el campo cambiaba de
   alineación al escribir —centrado vacío, a la izquierda con texto— y ese salto
   se leía como si el campo se hubiera vuelto a seleccionar solo. */
.controles .filtro-agenda input[type="search"] {
  width: 100%;
  min-width: 0;
  text-align: left;
}

.controles .titulo-seccion { overflow: hidden; }
.controles .titulo-seccion strong,
.controles .titulo-seccion small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sin lugar, el subtítulo se va antes que nada: dice de qué se trata la
   pantalla, que es lo primero que uno deja de necesitar cuando ya está
   adentro. Queda el nombre de la sección, centrado en el renglón. */
@media (max-width: 1500px) {
  .controles .titulo-seccion small { display: none; }
  .controles .titulo-seccion { justify-content: center; }
}

.controles .boton,
.controles .campo-desplegable,
.controles .tarjeta,
.controles .aviso-reprogramar,
.controles input[type="search"],
.controles input[type="text"],
.controles select {
  height: 40px;
}

/* Con los 11 pixeles de arriba y abajo que traen los campos, adentro de 40 de
   alto quedan 16 para el texto, y a 13 de tipografía eso le corta la patita a
   la «g» de «Agosto». Se achica el aire vertical, no el campo. */
.controles input[type="search"],
.controles input[type="text"],
.controles select {
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Sin los márgenes que traen los campos de formulario: acá el aire lo pone el
   `gap` de la barra. Los 18 pixeles de abajo de un campo suelto le agregaban
   ese alto al renglón —y con el envoltorio de la cruz, que se los queda para
   poder centrarla, la barra de reprogramar terminaba midiendo 81 en vez de
   64—. Va antes de que `equiparBuscador` mida, así que copia cero. */
.controles input[type="search"],
.controles input[type="text"],
.controles .campo-con-equis { margin: 0; }

.controles .boton,
.controles .campo-desplegable,
.controles .tarjeta,
.controles .aviso-reprogramar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* El contador: dos renglones apretados adentro de los mismos 40 pixeles. Venía
   de `.tarjeta`, que está pensada para los paneles de resumen —con aire
   alrededor— y al lado de dos botones se leía como un bloque desparejo. */
.controles .contador .tarjeta {
  flex-direction: column;
  gap: 1px;
  padding: 0 16px;
}

.controles .contador .tarjeta strong,
.controles .contador .tarjeta small { line-height: 1.05; }

/* El subtítulo de la sección, en un renglón. En liquidaciones se partía en dos
   y la barra crecía a 81 pixeles mientras el resto del sistema estaba en 64.
   Si no entra a lo ancho, la barra envuelve entera como cualquier otra. */
.controles .titulo-seccion small { white-space: nowrap; }

/* `campo-en-linea` está declarado dos veces en este archivo, con dos ideas
   distintas: una apila el rótulo arriba del campo y la otra lo pone al lado. La
   segunda no reescribe `flex-direction`, así que gana la columna de la primera
   y en reprogramar el filtro medía 66 pixeles. Adentro de la barra manda el
   renglón, que es lo que hacen todas las demás pantallas. */
.controles .campo-en-linea {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  height: 40px;
}

/* ---------------------------------------------------------------------------
   La página del turno (turno.html)

   La única del sistema que ve alguien que no trabaja en la clínica: el paciente
   que abre el link de su recordatorio, casi siempre desde el teléfono.

   Se apoya en `.ingreso` y `.ingreso-caja`, que ya son la tarjeta centrada del
   sistema, y agrega solo lo que no existía: los renglones de rótulo y dato, y
   los dos botones lado a lado. Los botones son `.chip.accion`, los mismos del
   pie de cualquier popup, para no inventar un botón más.

   TODAS LLEVAN `mi-` ADELANTE, y no es un capricho. Empezaron llamándose
   `.turno-*` y dos de esos nombres ya eran de la agenda: `.turno-cuando` es la
   hora de cada turno y `.turno-pie` el pie de su tarjeta. Como estas reglas van
   al final del archivo, ganaban, y la hora de cada turno de la agenda salió en
   20 píxeles, negrita y dorada. Tercera vez que choca un nombre de clase acá
   —ya pasó con `.fila-sucursal` y con `SECCIONES`—: buscar antes de crear una,
   siempre.
   --------------------------------------------------------------------------- */

/* Un poco más ancha que el ingreso: acá adentro va una dirección entera, y a
   380 pixeles se partía en tres renglones. */
.mi-turno-caja { width: min(440px, 100%); }

.mi-turno-cargando { color: var(--texto-tenue); text-align: center; font-size: 14px; }

.mi-turno-hola { margin: 0 0 4px; font-size: 15px; }

/* El dato que el paciente vino a ver. Va solo y grande: si lee una sola línea
   de la pantalla, que sea esta. */
.mi-turno-cuando {
  margin: 0 0 20px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--dorado);
}

.mi-turno-datos {
  border-left: 3px solid var(--dorado);
  padding-left: 14px;
  margin-bottom: 26px;
}

.mi-turno-dato { display: flex; gap: 12px; padding: 3px 0; font-size: 14px; }
.mi-turno-dato span { color: var(--texto-tenue); min-width: 58px; }
.mi-turno-dato strong { font-weight: 500; }

.mi-turno-pregunta { margin: 0 0 12px; font-size: 15px; }

/* Los dos botones lado a lado, y en el teléfono uno arriba del otro: apretados
   contra el borde en una pantalla angosta, «No voy a poder» quedaba a un pixel
   de «Sí, confirmo». */
.mi-turno-botones { display: flex; flex-wrap: wrap; gap: 10px; }
.mi-turno-botones .chip.accion { flex: 1 1 150px; }

/* Cambiar una respuesta ya dada no es una acción principal: se ve como un
   link adentro de la frase, no como un tercer botón compitiendo con los dos
   de arriba. */
.mi-turno-cambiar {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--dorado);
  cursor: pointer;
}

.mi-turno-pie {
  margin: 22px 0 0;
  color: var(--texto-tenue);
  font-size: 12.5px;
  line-height: 1.5;
}

/* El interruptor de un bloque de configuración no es un filtro de una barra: es
   una decisión del bloque y se lee como tal.

   `>` y no un descendiente cualquiera: el margen de abajo es para el que va
   suelto en el bloque, y se estaba colando en los que viven adentro de otra
   cosa. En la fila del día de la semana, flex centra la caja CON su margen, así
   que la píldora quedaba ocho píxeles más arriba que el nombre del día. */
.bloque-config > .interruptor {
  margin: 0 0 16px;
  font-size: 13.5px;
  color: var(--texto);
}

/* A quiénes les tocaría el aviso ahora mismo. Va adentro del propio cartel que
   dice cuántos son, así que hereda su fondo: solo hace falta separarla y
   apretar los renglones. */
.recordatorio-lista {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--borde);
  max-height: 220px;
  overflow-y: auto;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--texto-tenue);
}

/* ---------------------------------------------------------------------------
   La ruedita de la barra y la pantalla de configuración

   La ruedita va a la izquierda del nombre, que es donde está en todos los
   programas que la gente ya usa, y lleva a `configuracion.html`. La pantalla es
   una lista de secciones al costado y el contenido al lado: son decisiones que
   se toman de a una, no una página larga para bajar hasta encontrar la que uno
   buscaba.
   --------------------------------------------------------------------------- */

.barra-ruedita {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--texto-tenue);
  flex: none;
  /* Es un `<button>` desde que abre un menú: sin esto trae el fondo, el borde
     y el relleno que el navegador le pone a cualquier botón. */
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.barra-ruedita svg { width: 19px; height: 19px; }
.barra-ruedita:hover { color: var(--dorado); background: var(--dorado-suave); }

/* Estando adentro, la ruedita queda marcada: es lo que dice de dónde salió
   esta pantalla, porque el menú de arriba ya no la nombra. */
.barra-ruedita.puesta { color: var(--dorado); background: var(--dorado-suave); }

/* La lista al costado y el contenido al lado. En una pantalla angosta se apilan
   —la lista arriba, corrida en horizontal— porque dos columnas de 200 pixeles
   no entran en un teléfono. */
.ajustes {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
  max-width: 1020px;
  margin: 0 auto;
}

.ajustes-menu {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 10px;
  position: sticky;
  top: 78px;
}

.ajustes-grupo {
  margin: 4px 10px 8px;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.ajustes-menu a {
  display: block;
  padding: 9px 11px;
  border-radius: 8px;
  color: var(--texto);
  text-decoration: none;
}

.ajustes-menu a strong { display: block; font-weight: 500; font-size: 13.5px; }

/* El subtítulo dice qué hay adentro sin tener que entrar. Es lo que evita el
   paseo por las tres secciones buscando dónde estaba una cosa. */
.ajustes-menu a small {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--texto-tenue);
}

.ajustes-menu a:hover { background: var(--superficie2); }

.ajustes-menu a.puesto { background: var(--dorado-suave); }
.ajustes-menu a.puesto strong { color: var(--dorado); }

@media (max-width: 860px) {
  .ajustes { grid-template-columns: 1fr; }
  .ajustes-menu { position: static; display: flex; gap: 6px; overflow-x: auto; }
  .ajustes-grupo { display: none; }
  .ajustes-menu a { white-space: nowrap; }
  .ajustes-menu a small { display: none; }
}

/* ------------------------------------------------------- el lateral del bot

   El asistente no usa solapas sino la lista al costado, como Configuración:
   son once destinos y en una fila de pestañas entran apretados y sin decir de
   qué es cada uno. Reusa `.ajustes` entero —el marco, los grupos, el renglón
   puesto en dorado, el apilado en pantalla angosta— y sólo declara lo que
   tiene que ser distinto. */
.ajustes.lateral-bot {
  /* Sin el tope de 1020: adentro van la lista de charlas Y la charla abierta,
     que a ese ancho no respiran. */
  max-width: none;

  /* Y el menú baja hasta el pie, en vez de cortarse donde termina el último
     renglón: cortado, la columna quedaba flotando sobre el fondo. */
  align-items: stretch;
}

/* El menú se queda quieto mientras corre el panel de la derecha.

   `align-self: start` es lo que lo saca del `stretch` de arriba: estirado al
   alto de la fila, `sticky` no tiene contra qué pegarse y el menú se iba con el
   scroll. El alto se recupera con `height`, así la columna sigue llegando al
   pie en vez de cortarse donde termina el último renglón.

   Y con su propio scroll, que es la otra mitad: fijo y sin scroll, en una
   pantalla baja los últimos destinos quedan tapados y no hay forma de llegar.
   Por eso además los submenús son de a uno (ver `desplegadas` en
   `asistente.js`): con dos abiertos, el menú no entra. */
/* El marco es el que ocupa la columna y el que se queda quieto. El menú corre
   por dentro; la flecha de plegar cuelga de acá, que es lo que la saca del
   contenedor con scroll —montada sobre la esquina, sus once píxeles de más le
   agregaban una barra horizontal al menú—.

   `align-self: start` es lo que lo saca del `stretch` de `.ajustes.lateral-bot`:
   estirado al alto de la fila, `sticky` no tiene contra qué pegarse y el menú
   se iba con el scroll. El alto se recupera con `height`, así la columna sigue
   llegando al pie en vez de cortarse donde termina el último renglón.

   El alto sale de `--alto-bot`, que es el mismo de la grilla de Ajustes y el
   del panel: los tres tienen que terminar donde termina la ventana. */
.lateral-bot .lateral-marco {
  position: sticky;
  top: 78px;
  align-self: start;
  height: var(--alto-bot);
}

.lateral-bot .ajustes-menu {
  height: 100%;

  /* **Al costado no se corre nunca**: el menú mide siempre lo mismo de ancho,
     y una barra horizontal ahí sólo puede ser algo que se salió de lugar. Para
     arriba y para abajo sí, que es lo que pasa cuando se despliega una rama en
     una pantalla baja — y por eso además las ramas son de a una (ver
     `desplegadas` en `asistente.js`). */
  overflow-x: hidden;
  overflow-y: auto;
}

/* La flecha que pliega, FLOTANDO sobre el borde derecho del menú y fuera del
   flujo: adentro se comía el primer renglón, y el menú arrancaba con una fila
   vacía en vez de con el primer destino. Se posiciona contra `.ajustes-menu`,
   que ya es `sticky` y alcanza de referencia.

   Va en el menú y no en la barra de arriba, y por eso plegar no lo esconde del
   todo: queda la franja con la flecha, que es lo que lo trae de vuelta. Un menú
   que desaparece entero deja sin manija para abrirlo. */
.lateral-plegar {
  position: absolute;
  /* En la esquina, montada sobre el ángulo del panel. Adentro y a la altura
     del primer renglón quedaba a un centímetro de la flechita de «Chats» y las
     dos se leían como un par. */
  top: -11px;
  right: -11px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: 50%;
  background: var(--superficie);
  color: var(--texto-tenue);
  cursor: pointer;
}
.lateral-plegar:hover { color: var(--dorado); border-color: var(--dorado); }

/* La misma flechita para todo lo que se despliega —el trazo es el que
   `estilo.css` le dibuja a los `select`, ver más arriba— y se gira según a
   dónde apunte, en vez de tener un dibujo por caso. Abajo es abierto. */
.chevron {
  width: 11px;
  height: 8px;
  flex: none;
  transition: transform 0.15s;
}

/* Plegar señala a la izquierda; ya plegada, a la derecha para traerla. */
.lateral-plegar .chevron { transform: rotate(90deg); }
.lateral-plegar.plegada .chevron { transform: rotate(-90deg); }

/* Y la de una rama: al costado cerrada, abajo abierta. */
.lateral-bot .ajustes-menu .abrir {
  display: flex;
  align-items: center;
}
.lateral-bot .ajustes-menu .abrir .chevron { transform: rotate(-90deg); }
.lateral-bot .ajustes-menu .abrir.abierta .chevron { transform: none; }

/* ---- Plegado: los íconos, sin los nombres ----

   Se sigue navegando y ocupa un cuarto del ancho. Antes se escondía el menú
   entero, cuando los renglones eran sólo texto y una columna de iniciales no
   se entendía; con el ícono adelante eso dejó de ser cierto. El nombre pasa al
   globito, que es lo único que queda para saber qué es cada uno. */
/* ---- Plegar y desplegar, con la barra deslizándose ----

   El ancho pasaba de 232 a 62 de un fotograma al otro y el panel de la derecha
   daba un salto. Deslizándose se entiende que es la MISMA barra que se corre y
   no dos pantallas distintas.

   **Acá el layout es FLEX y no grid, y es por la animación.** Lo natural sería
   animar `grid-template-columns` y dejar el grid como estaba, pero esa
   propiedad recién se anima en Chrome y Firefox nuevos, y en Safari no se anima
   nada: quedaría el salto de siempre para una parte de la gente. `flex-basis`
   se interpola en todos, y el panel de la derecha se acomoda solo.

   OJO SI ALGUIEN VA A MEDIR ESTO. Con la pestaña oculta —una previsualización,
   una pestaña de fondo— **las transiciones CSS no avanzan**, así que la
   propiedad se queda en el valor de arranque y parece que el plegado está roto.
   No lo está: sacando la transición se ve el cambio al instante. Pasó
   exactamente eso el 04/09/2026 y costó tres diagnósticos equivocados. */
.ajustes.lateral-bot {
  display: flex;
  gap: 26px;
}

.lateral-bot {
  /* Los dos anchos de la columna, escritos una sola vez: los usan el marco, el
     ancho fijo de los renglones mientras se mueve, y nadie más. */
  --lateral-ancho: 232px;
  --lateral-angosto: 62px;
}

.lateral-bot .lateral-marco {
  flex: 0 0 var(--lateral-ancho);

  /* 460 ms y no 240. Era la mitad de esto y se sentía un salto con relleno.

     Este borde que se mueve es TODA la animación: cerrando tapa los nombres,
     abriendo los destapa. Por eso la duración manda y por eso el texto no se
     funde: lo único que pasa es que el borde va y viene.

     La curva es pareja —arranca despacio, se apura en el medio, frena al
     final— y no una que se dispara al principio. Con una de salida rápida el
     texto se destapaba casi entero en el primer tercio y los otros dos no
     pasaba nada; así el destape avanza a ritmo constante, que es lo que se lee
     como suave. */
  transition: flex-basis .46s cubic-bezier(.65, 0, .35, 1);

  /* SIN ESTO EL CIERRE NO ARRANCA. Un elemento de un flex no se encoge por
     debajo de su contenido, y mientras la barra se cierra los renglones están
     anclados a 210 px —es lo que hace que el borde tape el texto en vez de
     reacomodarlo—. Con esos 210 adentro, la columna se quedaba clavada en 232
     y recién se cerraba de golpe cuando el contenido cambiaba: era justo el
     flash que se estaba tratando de sacar. El recorte lo hace el menú, que ya
     tiene `overflow-x: hidden`. */
  min-width: 0;
}

/* El ancho lo mueve `angosto`, NO `plegado`. Son dos clases porque cambian en
   momentos distintos: la columna arranca a moverse en el clic y el contenido
   recién a los 140 ms, con el menú apagado. Ver `cambiarPlegado()`. */
.lateral-bot.angosto .lateral-marco { flex-basis: var(--lateral-angosto); }

/* `min-width: 0` es lo que deja que el panel se achique: sin eso un flex item
   no baja de su contenido, y una tabla ancha adentro empujaría la barra. */
.lateral-bot .ajustes-cuerpo {
  flex: 1 1 auto;
  min-width: 0;
}

/* Mientras la columna se mueve, los renglones conservan el ancho que van a
   tener al final y se recortan contra el borde. Es para que el texto se
   acomode UNA sola vez: sin esto «Revisión de comprobantes» se parte en dos
   líneas con la columna a medio camino y salta a una sola al llegar, y el
   renglón cambia de alto a la vista.

   22 = el borde del menú (1 de cada lado) más su relleno (10 de cada lado).

   Sólo desplegado: plegado los íconos van centrados en la columna, y un ancho
   fijo los dejaría centrados en un renglón más ancho que ella. */
.lateral-bot.cambiando:not(.plegado) .ajustes-menu a {
  width: calc(var(--lateral-ancho) - 22px);
}

/* ---- La misma persiana, girada: las subsecciones de una rama ----

   La caja recorta y lo que se anima es su alto, así que los hijos se destapan
   de arriba abajo al abrir y se tapan de abajo arriba al cerrar. Quedan
   quietos en su lugar: no se funden ni se deslizan por su cuenta, igual que los
   nombres cuando se cierra la barra.

   Misma curva que la columna —es lo que las emparenta— y 280 ms en vez de 460,
   porque el recorrido es la quinta parte: dos o tres renglones contra 170 px.
   A la misma duración se vería arrastrado. Los tiempos los reparte
   `animarDesplegable()`.

   El alto lo pone el JS en píxeles, medido. Acá no puede ir: `auto` no se
   anima, y de eso se trata todo. */
.rama-hijos {
  overflow: hidden;
  transition: height .28s cubic-bezier(.65, 0, .35, 1);
}

/* Mientras la barra entera se pliega o se despliega, las subsecciones no tienen
   nada que animar por su cuenta: se van con la columna. Sin esto, cerrar la
   barra con una rama abierta dispara las dos persianas a la vez. */
.lateral-bot.cambiando .rama-hijos { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .rama-hijos { transition: none; }
}
/* ---------------------------------------------- plantilla fotográfica */

/* ---- Dónde vive cada cosa ----

   Los botones están en la BARRA DE SOLAPAS, arriba, y sólo mientras esta
   pantalla esté abierta. Estuvieron en una barra propia —sesenta píxeles de
   alto— y después en una columna al costado; las dos veces le sacaban lugar al
   bloque de fotos, que es lo único que se viene a mirar acá y lo único que
   crece con el espacio que sobra.

   Todo este bloque estuvo escrito DOS VECES en este archivo, en dos lugares
   distintos, y el de más abajo ganaba: un arreglo hecho en el de arriba no se
   veía. Quedó uno solo (05/09/2026). */
.plantilla-fotos { position: relative; margin-top: -14px; }

/* Los botones de la plantilla viven en la barra de solapas, no al costado de
   las fotos: ahí se llevaban ancho de lo único que importa en esa pantalla. */
.pf-botones { display: flex; flex-direction: row; gap: 6px; }

.pf-accion {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: 50%;
  background: var(--superficie);
  color: var(--texto-tenue);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.pf-accion svg { width: 17px; height: 17px; display: block; }

.pf-accion:hover { border-color: var(--dorado); color: var(--dorado-fuerte); }

.pf-accion.puesta { border-color: var(--dorado-fuerte); color: var(--dorado-fuerte); background: var(--dorado-suave); }

.pf-accion.peligro:hover { border-color: var(--anulado); color: var(--anulado); }

/* Cuántas fotos esperan afuera. Va encima del botón y no como rótulo al lado:
   es un número que cambia, no parte del nombre de la acción. */
.pf-globo {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--dorado-fuerte);
  color: #16161a;
  font-size: 10.5px;
  line-height: 16px;
  text-align: center;
}

/* SIN MARGEN AUTOMÁTICO. El centrado lo hace el `justify-content` del visor; con
   el margen, el bloque se iba al centro por su cuenta y empujaba las flechas
   contra los bordes de la pantalla, a cuarenta centímetros de las fotos.

   Va con el visor adelante y no en `.pf-grilla` a secas porque el margen lo pone
   `.tarjeta-panel`, que tiene la misma especificidad y está más abajo en este
   archivo: escrito corto, perdía. */
.pf-visor > .pf-grilla { margin: 0; }

/* Los dos medios tramos del hilo, a la altura del centro de la bolita para que
   la cruce por el medio y no le pase rozando por debajo.

   5.5 = (13 de bolita − 2 de hilo) / 2. Escrito así, la cuenta se ve: si mañana
   la bolita cambia de tamaño, se sabe qué corregir. */
.pf-punto::before,
.pf-punto::after {
  content: '';
  position: absolute;
  top: 5.5px;
  height: 2px;
  background: var(--borde);
}

.pf-punto::before { left: 0; right: 50%; }

.pf-punto::after { left: 50%; right: 0; }

/* Los extremos no pintan el tramo que da al vacío. */
.pf-punto:first-child::before,
.pf-punto:last-child::after { content: none; }

/* Lo recorrido, en dorado. La que se está mirando pinta sólo su mitad
   izquierda: ahí es donde termina el camino hecho. */
.pf-punto.hecha::before,
.pf-punto.hecha::after,
.pf-punto.activa::before { background: var(--dorado-fuerte); }

.pf-punto.hecha .pf-bolita { border-color: var(--dorado-fuerte); }

.pf-punto.activa small:first-of-type { color: var(--dorado-fuerte); font-weight: 600; }

/* ---- Lo que quedo de la cabecera de arriba ----

   El nombre y los botones se fueron a la barra de solapas, asi que de la
   cabecera solo se usa el envoltorio. Se deja porque la pantalla completa
   sigue armando su propia barra con estas piezas. */
.pf-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.pf-titulo { display: block; font-size: 17px; }

/* El nombre de la plantilla es también el botón para cambiarlo. Se ve como un
   título hasta que se lo apunta: ahí se subraya, que es lo que avisa que se
   puede tocar sin agregar un ícono más a una cabecera que ya tiene cinco. */
.pf-renombrar {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  color: var(--texto);
  cursor: pointer;
  text-align: left;
}

.pf-renombrar:hover { color: var(--dorado-fuerte); text-decoration: underline; }

.pf-acciones { display: flex; align-items: center; gap: 10px; }

/* ---- La plantilla entera de un vistazo ----

   **El alto manda, no el ancho** (pedido por Juan el 04/09/2026: «deberían poder
   verse todas las fotos en un solo pantallazo, sin tener que hacer scroll»).

   Antes las columnas se repartían el ancho disponible y el alto salía del
   `aspect-ratio`. En una pantalla ancha eso daba fotos de 470 px: preciosas de a
   una, pero tres filas medían mil pixeles y para ver la última —y la línea de
   tiempo, que va abajo— había que scrollear. Una plantilla fotográfica se mira
   COMPLETA: el valor está en comparar la cara con la mordida, y comparar dos
   cosas que no entran juntas en la pantalla no es comparar.

   Así que ahora la grilla toma el alto que queda de ventana, las tres filas se
   lo reparten en partes iguales y el ancho de cada foto lo decide su forma. Las
   filas se centran, que es lo que hace que una de tres no se vea desalineada
   contra una de cuatro.

   Este alto es sólo el valor de arranque, para el primer cuadro:
   `ajustarAltoDeLaPlantilla()` lo mide en serio apenas se dibuja y lo corrige.
   Los 420 son una estimación de todo lo que NO es la grilla —barra, cabecera
   del paciente, las dos hileras de pestañas, la cabeza de la plantilla y la
   línea de tiempo de abajo, que también tiene que entrar—. */
.pf-grilla {
  /* Sin relleno ni separaciones: las fotos se tocan y forman un solo bloque
     macizo, como la plantilla de Dentalink (pedido por Juan el 04/09/2026). El
     aire entre foto y foto partía el conjunto en diez cosas sueltas, y lo que
     se mira es el conjunto. */
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;

  /* El alto y el ancho los pone `ajustarAltoDeLaPlantilla()`, que los mide. Lo
     de acá es el valor de arranque para el primer cuadro. */
  height: clamp(280px, calc(100vh - 420px), 900px);
  margin: 0 auto;
}

/* ---- Los pesos que hacen que el bloque sea un rectángulo exacto ----

   No son números elegidos a ojo, salen de una cuenta. La fila del rostro tiene
   CUATRO celdas verticales (3:4) y las de la boca TRES apaisadas (4:3). Para
   que las tres filas midan lo mismo de ancho y no sobre aire a los costados:

       4 · (3/4) · altoRostro  =  3 · (4/3) · altoBoca
                  3 · altoRostro = 4 · altoBoca

   Con las dos filas de boca iguales y todo sumando el alto del bloque, sale
   4 : 3 : 3. Ahí las tres filas miden exactamente lo mismo y el conjunto queda
   con proporción 1,2 —por ejemplo 900 × 750—, sin un pixel de sobra.

   SI ALGÚN DÍA CAMBIA LA PLANTILLA hay que rehacer esta cuenta: otra cantidad
   de fotos por fila, u otra forma de celda, dan otros pesos y otra proporción
   (la de `PROPORCION_PLANTILLA`, en paciente.js). */
.pf-fila {
  flex: 3 1 0;
  min-height: 0;
  display: flex;
  gap: 0;
}

.pf-fila > * { flex: 1 1 0; }

.pf-hueco {
  margin: 0;
  position: relative;

  /* El alto lo pone la fila y el ancho sale de la forma. `0 1 auto` deja que se
     encojan si no entran a lo ancho —una pantalla angosta con la fila de cuatro—
     en vez de desbordar la tarjeta. */
  /* Cada celda llena su parte: el alto lo da la fila y el ancho la columna. Sin
     `aspect-ratio` a propósito —lo da la geometría de la grilla, ver los pesos
     de arriba— y sin borde ni esquinas redondeadas, que es lo que dejaba una
     rayita entre foto y foto. */
  height: 100%;
  min-width: 0;
  background: var(--superficie2);
  border: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* ---- La cara va en vertical ----

   Las cuatro del rostro —las dos frontales y los dos perfiles— son fotos de
   una persona parada, así que el hueco es un retrato y no un paisaje (pedido
   por Juan el 04/09/2026). Con el marco apaisado había que recortar la cabeza
   o el mentón para que entrara, que es justo lo que no se quiere ver en una
   foto de ortodoncia.

   Las de la boca se quedan apaisadas: una arcada es ancha y baja.

   Y esta fila se lleva vez y media el alto de las otras. Si las tres se
   repartieran parejo, un hueco vertical saldría mucho más angosto que uno
   apaisado del mismo alto y la fila de la cara se vería raquítica al lado de
   las de la boca. Con 1,5 los anchos quedan parecidos y la grilla se lee
   pareja. */
.pf-fila.pf-retrato { flex: 4 1 0; }

/* Un hueco vacío se distingue por el fondo, no por un borde punteado: con las
   fotos pegadas, un punteado alrededor de cada vacío ensuciaba el bloque. */
.pf-hueco:not(.con-foto) { background: var(--superficie2); }

.pf-hueco:hover { outline: 2px solid var(--dorado); outline-offset: -2px; }

.pf-hueco img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pf-mas { font-size: 26px; color: var(--texto-tenue); line-height: 1; }

/* El rótulo se lee sobre la foto, así que va con su propio fondo. */
.pf-hueco figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 4px 6px;
  font-size: 10.5px;
  color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.72));
  text-align: center;
}

.pf-hueco:not(.con-foto) figcaption {
  background: none;
  color: var(--texto-tenue);
}

/* ---- La línea de tiempo de las tomas ----

   Cada plantilla es un momento del tratamiento y el valor está en compararlos,
   así que se cambia de una a otra sin salir de la pantalla.

   Se le puso el aspecto de una línea de verdad —un hilo horizontal con las
   bolitas encima— y no una fila de botones sueltos (pedido por Juan el
   04/09/2026, mirando la de Dentalink). Es la misma información, pero un hilo
   que atraviesa las marcas dice «esto es un antes y un después» sin que nadie lo
   explique; botones separados dicen «elegí uno», que no es lo mismo.

   El hilo es un `::before` del contenedor y no un borde de cada botón: así
   sigue de punta a punta, incluso por debajo de los espacios. */
.pf-linea {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 6px;
  overflow-x: auto;

  /* Sin raya arriba y sin margen: la única línea horizontal de esta pantalla es
     el hilo que une las bolitas. Un borde más, del ancho de la pantalla, se leía
     como un separador de secciones y partía en dos algo que es una sola cosa
     (pedido por Juan el 05/09/2026).

     El ancho lo pone `ajustarAltoDeLaPlantilla()`, igual que al bloque de fotos:
     así la línea queda centrada CONTRA LAS FOTOS y no contra la pantalla. */
  padding: 16px 2px 0;
  margin: 0 auto;
  scrollbar-width: thin;
}

.pf-punto {
  position: relative;   /* para que la bolita quede encima del hilo */
  background: none;
  border: 0;
  border-radius: 8px;
  padding: 0 10px 6px;
  cursor: pointer;
  color: var(--texto-tenue);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  /* Se reparten el ancho del bloque de fotos en partes iguales (pedido por
     Juan el 05/09/2026): apretados en el centro, los nombres se tocaban y
     sobraba lugar a los costados. */
  min-width: 84px;
  flex: 1 1 0;
}

.pf-punto:hover { color: var(--texto); }

.pf-punto.activa { color: var(--texto); }

.pf-punto small { font-size: 11px;
  line-height: 1.3;
}

.pf-punto small:first-of-type { font-weight: 500; }

/* La bolita: hueca cuando es una toma más, llena cuando es la que se está
   mirando. Es la misma distinción que hace la línea de Dentalink, y se entiende
   sin leer una palabra. */
.pf-bolita {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--superficie);
  border: 2px solid var(--borde);
  margin-bottom: 6px;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  transition: transform .15s ease, border-color .15s ease;
}

.pf-punto:hover .pf-bolita { border-color: var(--dorado);
  transform: scale(1.18);
}

.pf-punto.activa .pf-bolita {
  background: var(--dorado-fuerte);
  border-color: var(--dorado-fuerte);
  box-shadow: 0 0 0 4px var(--dorado-suave);
}

/* ---- Las flechas para cambiar de toma ----

   Van pegadas al bloque de fotos, una de cada lado y centradas a lo alto, como
   en cualquier visor. Estuvieron un rato debajo de la línea de tiempo y ahí no
   se veían: en el pie de la pantalla, al lado de una línea con nombres y
   fechas, dos flechitas no se leen como «pasar a la otra toma».

   El visor es un flex de tres: flecha, bloque, flecha. Así quedan pegadas al
   bloque —que mide lo que mide, según la ventana— y no clavadas en los bordes
   de la pantalla, que con un monitor ancho las dejaría a medio metro de las
   fotos. */
.pf-visor {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.pf-flecha {
  flex: none;
  width: 38px;
  height: 38px;
  border: 1px solid var(--borde);
  border-radius: 50%;
  background: var(--superficie);
  color: var(--texto-tenue);
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, transform .15s ease;
}

.pf-flecha:hover:not(:disabled) {
  border-color: var(--dorado);
  color: var(--dorado-fuerte);
  transform: scale(1.08);
}

/* En la primera toma y en la última la flecha que no lleva a ningún lado se
   apaga pero NO se esconde: si desapareciera, el bloque se correría de lugar al
   llegar a una punta. */
.pf-flecha:disabled { opacity: 0.3; cursor: default; }

/* ---- Pantalla completa ----

   Las fotos grandes y nada más: sin ficha, sin barra, sin pestañas. El fondo va
   oscuro y no claro —como el visor de Dentalink— porque al lado de un fondo
   claro los tejidos se ven más apagados de lo que son, y el color acá es dato
   clínico. */
.pf-pleno {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #0d0d0f;
  color: #f2f2f4;
  display: flex;
  flex-direction: column;
}

.pf-pleno[hidden] { display: none; }

.pf-pleno-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 20px;
  flex: none;
}

.pf-pleno-barra strong { font-size: 17px; font-weight: 600; }

.pf-pleno-barra small { display: block; font-size: 12.5px; color: #a7a7ae; margin-top: 2px; }

.pf-pleno-mandos { display: flex; align-items: center; gap: 16px; }

.pf-pleno-grupos { display: flex; gap: 6px; }

.pf-pleno-grupos button,
.pf-pleno-pasos button {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid transparent;
  color: #e7e7ea;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
}

.pf-pleno-grupos button:hover,
.pf-pleno-pasos button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.16); }

.pf-pleno-grupos button.puesta {
  background: var(--dorado-fuerte);
  color: #16130e;
  font-weight: 600;
}

.pf-pleno-pasos { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #a7a7ae; }

.pf-pleno-pasos button { padding: 2px 12px; font-size: 17px; line-height: 1.2; }

.pf-pleno-pasos button:disabled { opacity: 0.3; cursor: default; }

.pf-pleno-cerrar {
  background: none;
  border: 0;
  color: #e7e7ea;
  font-size: 26px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
}

.pf-pleno-cerrar:hover { color: #fff; }

/* El bloque de fotos: mismas filas y mismas celdas que en la ficha, así que
   hereda todo de `.pf-fila`. El alto y el ancho los mide
   `ajustarLasFotosDelPleno()`. */
.pf-pleno-fotos {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 6px;
}

/* Acá el rótulo estorba: la foto se reconoce sola a este tamaño y el letrero le
   tapa la encía de abajo, que es justo donde se mira. Aparece al apuntarla. */
.pf-pleno-fotos figcaption { opacity: 0; transition: opacity .15s ease; }

.pf-pleno-fotos .pf-hueco:hover figcaption { opacity: 1; }

/* La miniatura de fondo, mientras baja la grande. Va estirada al mismo encuadre
   que la foto —`cover`, igual que la `<img>`— para que las dos coincidan y el
   cambio de una a otra sea sólo un cambio de nitidez, sin que nada se mueva. */
.pf-pleno-fotos .pf-hueco {
  background-color: #17171a;
  background-size: cover;
  background-position: center;
}

/* Y la grande aparece con un fundido cuando terminó de bajar, no mientras baja.
   Sin esto se la veía dibujarse de arriba hacia abajo por encima de la
   miniatura, que es peor que no mostrarla. */
.pf-pleno-fotos .pf-hueco img {
  opacity: 0;
  transition: opacity .2s ease;
}

.pf-pleno-fotos .pf-hueco img.lista { opacity: 1; }

.pf-pleno-fotos .pf-hueco:hover { outline: 0; }

.pf-pleno-fotos .pf-mas { color: #4a4a52; }

/* ---- El único corte que no se puede animar: el cambio de contenido ----

   Plegado y desplegado NO muestran los mismos renglones —plegado se esconden
   las subsecciones y quedan sólo las categorías—, así que en algún momento hay
   que reemplazarlos de golpe. Todo lo demás es el borde yendo y viniendo.

   Ese reemplazo se hace con el menú apagado, y el apagón va al extremo ANGOSTO
   de cada recorrido: al final cuando se cierra, al principio cuando se abre. Es
   el mismo punto visto para cada lado, y es donde no hay casi nada a la vista
   —una tira de íconos en una columna de 62 px—, así que el fundido pasa
   desapercibido. Los tiempos están en `cambiarPlegado()`.

   **El texto nunca se funde.** Si se fundiera volvería el flash de antes: las
   letras yéndose solas por un lado y la columna moviéndose por el otro, dos
   gestos donde tiene que haber uno. */
.lateral-bot.apagando .ajustes-menu {
  opacity: 0;
  transition: opacity .12s ease-out;
}

/* Lo que se está apagando NO se mueve. Abriendo, los íconos plegados están
   centrados en la columna, así que mientras ésta se ensancha se irían corriendo
   a la derecha justo cuando desaparecen, para volver a la izquierda un
   pestañeo después: un tirón por nada. Fijándoles el ancho angosto se apagan
   donde estaban.

   18 = el borde del menú (1 de cada lado) más su relleno plegado (8 de cada
   lado). Cerrando no hace falta: de eso se ocupa la regla de `cambiando`. */
.lateral-bot.apagando.plegado .ajustes-menu a {
  width: calc(var(--lateral-angosto) - 18px);
}

/* Y lo que se acaba de cambiar se enciende. Nada más que eso: los nombres no
   entran por su cuenta, aparecen porque el borde los va destapando. Hubo una
   versión con los nombres entrando escalonados de arriba abajo y se sacó —era
   linda sola, pero convertía la apertura en otra animación distinta del cierre,
   que es justo lo que no tenía que ser—. */
.lateral-bot.entrando .ajustes-menu {
  animation: lateral-enciende .16s ease-out both;
}

@keyframes lateral-enciende {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* A quien pidió menos movimiento, ninguno: la barra cambia de ancho y ya, sin
   apagarse y sin fundidos. */
@media (prefers-reduced-motion: reduce) {
  .lateral-bot .lateral-marco { transition: none; }
  .lateral-bot.apagando .ajustes-menu { opacity: 1; }
  .lateral-bot.entrando .ajustes-menu { animation: none; }
}

.lateral-bot.plegado .ajustes-menu { padding: 8px; }

.lateral-bot.plegado .ajustes-menu a,
.lateral-bot.plegado .ajustes-menu a.hijo {
  justify-content: center;
  gap: 0;
  /* Los cuatro lados en cero: la sangría del hijo es más específica que un
     `padding` corto y le ganaba, dejando esos íconos corridos a la derecha
     mientras el resto quedaba centrado.

     Y arriba y abajo los mismos 7 que desplegado, por lo mismo: plegado se
     muestran TODOS los destinos —las ramas se esconden y los hijos quedan
     sueltos—, así que son los mismos trece renglones. A 13 medían 51 px cada
     uno, 700 en total contra 566 de ventana; a 7 miden 39 y entran en 544. */
  padding: 7px 0;
}

.lateral-bot.plegado .ajustes-menu a strong,
.lateral-bot.plegado .ajustes-menu a .abrir { display: none; }

/* Cuántos esperan se vuelve un punto: el número no entra al lado del ícono,
   pero que haya gente esperando no se puede perder por plegar el menú. */
.lateral-bot.plegado .ajustes-menu .cuantos {
  top: 7px;
  right: 12px;
  transform: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  font-size: 0;
}

.lateral-bot.plegado .raya-bot { margin: 8px 4px; }

/* Las subsecciones de Chats y de Agentes. La sangría es lo único que las
   separa del padre: en gris o más chicas parecerían menos importantes, y
   «Recepción» es justo la que tiene gente esperando. */

/* Lo que va al final del renglón: la flechita del desplegable y cuántos
   esperan. Absolutos porque el link es `display: block` en `.ajustes-menu a`, y
   esa regla la comparte Configuración: no se toca desde acá. Centrados a mano
   y no con un `top` fijo, porque sin la leyenda de abajo el renglón cambió de
   alto y un número escrito quedaría corrido el día que vuelva a cambiar. */
.lateral-bot .ajustes-menu a { position: relative; }

.lateral-bot .ajustes-menu .abrir,
.lateral-bot .ajustes-menu .cuantos {
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11.5px;
  font-weight: 500;
}

.lateral-bot .ajustes-menu .abrir { color: var(--texto-tenue); font-size: 13px; }

/* Una rama con algo abierto adentro queda marcada aunque el puesto sea el
   hijo: sin esto, estando en «Recepción» nada dice que eso es un chat. */
.lateral-bot .ajustes-menu a.con-lo-puesto strong { color: var(--dorado); }

/* ---- La pantalla de charlas ocupa el alto de la ventana ----

   Sin esto, la lista y la conversación medían lo que midiera su contenido y
   abajo quedaba media pantalla vacía; y con una charla larga, el scroll era el
   de la página entera, así que se perdían de vista los filtros y la lista.
   Ahora scrollea cada columna por su cuenta.

   El `:has()` lo deja SÓLO en la sección de charlas: en El guion o en
   Conexiones el contenido tiene que poder crecer para abajo como siempre. */
.lateral-bot .ajustes-cuerpo:has(.ia-dos-columnas) {
  display: flex;
  flex-direction: column;

  /* ALTO FIJO, no `min-height`. Con mínimo, una charla larga hacía crecer la
     caja y el scroll volvía a ser el de la página entera —que es lo que se
     venía a arreglar—. Fijo, la sección mide siempre lo mismo y el scroll pasa
     a ser de la lista y de los mensajes, cada uno por su cuenta.

     El alto sale de `--alto-bot`, menos los 4 px que este panel lleva de más:
     tiene su propio borde arriba y abajo. */
  height: calc(var(--alto-bot) - 4px);
  min-height: 0;
  overflow: hidden;
}

.lateral-bot .ajustes-cuerpo:has(.ia-dos-columnas) .ia-dos-columnas {
  flex: 1;
  min-height: 0;
  align-items: stretch;
  overflow: hidden;
}

/* `min-height: 0` en las columnas: sin eso un hijo con scroll no achica su
   caja y el desborde se lo come la página, que es lo que veníamos a arreglar. */
.lateral-bot .ia-dos-columnas .ia-panel-lista { min-height: 0; }

.lateral-bot .ia-dos-columnas .ia-lista {
  max-height: none;
  min-height: 0;
  flex: 1;
  overflow-y: auto;
}

.lateral-bot .ia-dos-columnas .ia-charla {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.lateral-bot .ia-dos-columnas .ia-mensajes {
  max-height: none;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}


/* ---- El asistente usa la pantalla entera ----

   `.contenido` topea en 1500 para que un listado no se estire de lado a lado
   en un monitor ancho. Acá es al revés: son tres columnas y lo que sobra a la
   derecha es lugar para la conversación. */
main.contenido:has(.lateral-bot) { max-width: none; }

/* La columna de las charlas, en su propia caja —como la conversación— en vez
   de una lista suelta sobre el fondo. */
.ia-panel-lista {
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: 10px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 12px;
}

/* El buscador y el desplegable de filtros, arriba de la lista que filtran. */
/* En grid y no en flex: `1fr auto` le da al campo TODO lo que sobra y al botón
   su ancho, sin depender de que el `input` no traiga un ancho propio de otra
   regla. Con flex el campo se quedaba corto y el filtro flotaba en el medio. */
.ia-lista-cabeza {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

/* Al alto del botón de filtro, que mide 34. El campo traía los 11 de padding
   arriba y abajo de todos los campos del sistema —unos 40 en total— y al lado
   del botón se veía desparejo. Con la altura puesta, el padding vertical sobra:
   el navegador centra el texto solo. */
.ia-lista-cabeza input[type="search"] {
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 0 11px;
  margin: 0;
}

/* El filtro, pegado al borde derecho de la caja. */
.ia-lista-cabeza .lupa-agenda { justify-self: end; }

/* Qué es esta bandeja, en chico. Adentro de la columna y no arriba de todo:
   como renglón de ancho completo empujaba las tres columnas para abajo y las
   dejaba desparejas con el menú. */
.ia-porque {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--texto-tenue);
}

/* Adentro de la caja, las filas necesitan su propio tono: con el mismo de la
   caja quedaban planas y no se veía dónde empieza cada una. */
.ia-panel-lista .ia-fila { background: var(--superficie2); }


/* En pantalla angosta las columnas se apilan (ver `.ia-dos-columnas`), y ahí el
   alto fijo las dejaría a un tercio de ventana cada una. Vuelve a crecer con el
   contenido y a scrollear la página, que en un teléfono es lo natural. */
@media (max-width: 900px) {
  .lateral-bot .ajustes-cuerpo:has(.ia-dos-columnas) {
    height: auto;
    overflow: visible;
  }

  .lateral-bot .ia-dos-columnas .ia-lista { max-height: 60vh; }
  .lateral-bot .ia-dos-columnas .ia-mensajes { max-height: 60vh; }

  /* Apiladas ya no hay un alto que repartir, así que el guion vuelve a medir
     por sí mismo: con `flex` se quedaba en el mínimo. */
  .ia-taller .ia-guion { flex: none; min-height: 46vh; }
  .ia-taller .ia-charla { overflow-y: visible; }
}



/* ---- Las etiquetas del asistente ----

   Del mismo juego que las etiquetas de etapa de la lista —contorno y color, sin
   relleno—: son muchas por charla y rellenas de color se comen la fila. El color
   lo pone el JS con `style`, porque lo elige la clínica y no puede estar
   escrito acá. */
.ia-tag {
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.6;
  white-space: nowrap;
}

/* El campo de etiquetas de la ficha: lo puesto arriba, la grilla al desplegar.
   Un desplegable y no un modal, porque poner una etiqueta es un gesto de un
   segundo y una ventana encima corta la lectura de la charla. */
.ia-tags-campo { position: relative; }

.ia-tags-puestas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  background: var(--negro);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  cursor: pointer;
  font: inherit;
  color: var(--texto);
  text-align: left;
}

.ia-tags-puestas:hover { border-color: var(--dorado); }
.ia-tags-puestas > span { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.ia-tags-puestas .chevron { flex: none; color: var(--texto-tenue); }
.ia-tags-puestas.abierto .chevron { transform: rotate(180deg); }

/* Dos columnas, como el desplegable de tags de Prometheo: con una sola, diez
   etiquetas son una lista que hay que scrollear para ver la de abajo. */
.ia-tags-lista {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px 10px;
  margin-top: 6px;
  padding: 10px;
  background: var(--superficie2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  max-height: 40vh;
  overflow-y: auto;
}

.ia-tag-opcion {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  cursor: pointer;
}

.ia-tag-opcion input { margin: 0; flex: none; }
.ia-tag-opcion .ia-tag { overflow: hidden; text-overflow: ellipsis; }

/* ---- CRM → Leads ----

   El criterio ocupa la mitad de la tabla a propósito: es lo que hay que leer
   para saber si la etiqueta hace lo que uno cree. */
.col-criterio { width: 45%; }
.col-criterio small { font-size: 11.5px; line-height: 1.45; color: var(--texto-tenue); }

/* El nombre y el color, mitad y mitad, ocupando el ancho entero del modal.

   Grilla de dos columnas iguales y no flex: con flex cada uno medía lo que
   medía su contenido —ocho bolitas de color miden poco— y quedaba una franja
   muerta contra el borde derecho. Con `1fr 1fr` las dos columnas valen lo mismo
   y la fila llega hasta el final. */
.et-cabecera {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 16px;
}

.et-cabecera > .campo-modal { min-width: 0; }

/* Los ocho colores repartidos de borde a borde de su columna.

   `space-between` y no un `gap` fijo: con separación fija la fila medía lo que
   medían las ocho bolitas y dejaba el resto de la columna en blanco. Así la
   primera arranca pegada al borde izquierdo, la última termina en el derecho y
   el aire sobrante se reparte solo, sea cual sea el ancho del modal. */
.et-colores {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin-top: 9px;
}

.et-color {
  width: 26px;
  height: 26px;
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
}

/* En un teléfono no entran los dos: ahí sí se apilan. */
@media (max-width: 480px) {
  .et-cabecera { flex-wrap: wrap; gap: 4px; }
  .et-cabecera > .campo-modal:first-child { max-width: none; }
}

/* El criterio es el campo donde de verdad se escribe: una explicación de cuándo
   sí y cuándo no son varios párrafos, y en seis renglones se leía por una
   ventanita. */
.et-criterio { min-height: 220px; }

/* El renglón de las acciones, separado de lo de arriba. */
.et-pie { margin-top: 20px; }
.et-pie-botones { display: inline-flex; align-items: center; gap: 8px; }
.et-pie-botones .info-seccion svg { width: 18px; height: 18px; }

/* El elegido se marca con un anillo del color del texto y no con un tilde
   adentro: sobre un fondo oscuro el tilde no se ve, y sobre uno claro tampoco. */
.et-color.puesto { border-color: var(--texto); box-shadow: 0 0 0 2px var(--superficie) inset; }

/* ---- Inicio: cómo viene el asistente ----

   Los gráficos se dibujan a mano —SVG para las líneas, divs con porcentajes
   para las barras— y sin librería: traerse una biblioteca entera para dibujar
   rectángulos y una polilínea sería cargarla en las quince pantallas del
   sistema para usarla en una. Los porcentajes los calcula el JS, que es quien
   tiene los números; acá sólo se dibujan. */
.ia-filtros-inicio {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

/* El periodo elegido, como un chip al lado de los botones. Antes eran dos
   campos de fecha que quedaban ahi ocupando lugar aunque nadie los tocara. */
.ia-rango-libre {
  font-size: 12.5px;
  color: var(--dorado);
  border-color: var(--dorado);
}

.ia-con-prueba {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  font-size: 12.5px;
  color: var(--texto-tenue);
  cursor: pointer;
}

.ia-con-prueba input { margin: 0; }

/* Los números grandes de arriba. Cada uno es un botón: se aprieta para elegir
   qué indicador muestra. */
.ia-indicadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.ia-indicador {
  display: block;
  text-align: left;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 13px 15px;
  cursor: pointer;
  font: inherit;
  color: var(--texto);
}

.ia-indicador:hover { border-color: var(--dorado); }

/* El punto dice de qué color es su línea en el gráfico de abajo. Es lo que ata
   la tarjeta con la curva sin tener que repetir el nombre en una leyenda. */
.ia-punto {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: middle;
}

.ia-indicador small { color: var(--texto-tenue); font-size: 12px; }
.ia-indicador strong { display: block; margin-top: 6px; font-size: 27px; font-weight: 500; }

/* El gráfico de líneas lo dibuja Chart.js sobre este canvas. La caja necesita
   alto propio porque el gráfico va con `maintainAspectRatio: false`, que es lo
   que lo deja estirarse al ancho de la pantalla sin crecer para abajo. */
.ia-grafico {
  position: relative;
  height: 260px;
  margin-top: 14px;
}

.ia-resumen {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  align-items: start;
  margin-top: 16px;
}


/* ---- El embudo, con su forma ----

   Cuatro números arriba, la forma en el medio y un pie por paso. El dato que
   se vino a buscar es el «% pasó» de cada tramo: cuántas siguieron de un paso
   al siguiente. Cuántas quedan en un paso no dice nada por sí solo, porque
   puede venir con pocas desde antes. */
.ia-embudo-numeros {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  padding: 4px 0 16px;
}

.ia-embudo-numeros small {
  display: block;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.ia-embudo-numeros strong { font-size: 23px; font-weight: 500; }

/* El tramo donde más se cae, en ámbar y con el nombre de los dos pasos: es lo
   único de esta tarjeta sobre lo que se puede hacer algo. */
.ia-peor strong { color: var(--ausente); }
.ia-peor em {
  display: block;
  font-style: normal;
  font-size: 11.5px;
  color: var(--texto-tenue);
}

/* La forma. `preserveAspectRatio="none"` la estira al ancho que haya: los
   polígonos no tienen texto adentro, así que deformarlos no rompe nada. */
.ia-embudo-forma svg {
  display: block;
  width: 100%;
  height: 150px;
}

.ia-embudo-pasos {
  display: grid;
  gap: 0;
  margin-top: 2px;
}

/* Cada pie de paso, alineado con su tramo. La línea divisoria los separa como
   las guías blancas que cortan la forma de arriba. */
.ia-embudo-paso {
  padding: 10px 8px;
  border-left: 1px solid var(--borde);
  text-align: left;
  min-width: 0;
}

.ia-embudo-paso:first-child { border-left: 0; }

.ia-embudo-paso strong { display: block; font-size: 17px; font-weight: 500; }

.ia-embudo-paso small {
  display: block;
  font-size: 11.5px;
  color: var(--texto-tenue);
  margin-top: 1px;
  overflow-wrap: anywhere;
}

.ia-embudo-paso em {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: var(--texto-tenue);
  margin-top: 3px;
}

/* Cuántas pasaron del paso anterior. Va en el color del texto y no en gris:
   es el número que se lee, no una aclaración. */
.ia-embudo-paso span {
  display: block;
  font-size: 11.5px;
  margin-top: 2px;
}

.ia-embudo-paso.es-peor span { color: var(--ausente); font-weight: 500; }

@media (max-width: 900px) {
  /* En angosto, siete columnas de 40 píxeles no se leen: se apilan en dos
     filas de un ancho que sí entra. */
  .ia-embudo-pasos { grid-template-columns: repeat(2, 1fr) !important; }
  .ia-embudo-paso { border-left: 0; border-top: 1px solid var(--borde); }
  .ia-embudo-forma svg { height: 110px; }
}

/* El reparto por canal: un renglón por fila, con el nombre a la izquierda y
   cuántos a la derecha. */
.ia-embudo {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 12px;
}

.ia-paso {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.ia-paso-nombre { font-size: 12.5px; }

.ia-paso-barra {
  display: block;
  height: 10px;
  border-radius: 5px;
  background: var(--superficie2);
  overflow: hidden;
}

/* El color sale de `currentColor`, así el relleno reusa las mismas clases de
   etapa que las etiquetas de la lista de charlas —`.ia-etapa-gris`, `-ambar`,
   `-verde`—, que fijan el color del texto. Un juego de colores, no dos. */
.ia-paso-relleno {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: 5px;
  background: currentColor;
}

.ia-paso-n { font-weight: 500; font-size: 13px; white-space: nowrap; }
.ia-paso-n small { margin-left: 6px; color: var(--texto-tenue); font-weight: 400; }

/* ---- Lo que espera a una persona, en la barra de arriba ----

   Son las tarjetas de aviso de la agenda —«Reprogramar», «Citas online»— y no
   una versión propia: mismo alto, mismo rojo para lo que apura y mismo dorado
   para lo que hay que hacer sin apuro. Acá son botones porque no van a otra
   pantalla sino a otra sección de ésta. */
.alertas-bot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.alertas-bot .tarjeta {
  border: 1px solid var(--borde);
  cursor: pointer;
  font: inherit;
}

/* Vacío no ocupa nada: sin alertas, la barra queda como si no existiera. */
.alertas-bot:empty { display: none; }

/* ---- El «Buscando...» de una columna ----

   `.cargando` es del sistema y va `fixed` sobre toda la ventana: es el cartel
   de que está cargando LA PANTALLA. Adentro del asistente casi nunca es eso —lo
   que carga es una charla, o una lista— y centrado en la ventana quedaba
   corrido respecto de la sección que en realidad estaba esperando.

   Acá pasa a ser parte de su columna: ocupa el alto que le sobra y se centra
   ahí adentro. La clase global no se toca, que la usa medio sistema. */
.lateral-bot .cargando {
  position: static;
  z-index: auto;
  flex: 1;
  min-height: 0;
}

/* Lo mismo para el bloque de las plantillas: `.cargando` nace `fixed` y ocupa
   la pantalla entera, así que el circulito se centraba respecto de la VENTANA y
   quedaba flotando en cualquier lado de su tarjeta —arriba si la página estaba
   al principio, al medio si estaba scrolleada—. Estático se centra adentro de
   lo suyo, y el alto mínimo le da dónde hacerlo: sin él la caja mide cero
   mientras Meta contesta y la tarjeta se dobla sola. */
#rec-wa .cargando {
  position: static;
  z-index: auto;
}

/* El alto sólo para el que reemplaza el bloque entero. El «Guardando en
   Meta...» del pie es hijo del aviso y no de la tarjeta: con 160px de alto
   empujaría el botón media pantalla para abajo cada vez que se guarda. */
#rec-wa > .cargando { min-height: 160px; }

/* Las leyendas de este bloque van a todo el ancho. `.ayuda-campo` se corta en
   62 caracteres —una medida de lectura, buena abajo de un campo angosto— pero
   acá la sección ocupa la pantalla entera y el renglón cortado a la mitad deja
   un hueco raro a la derecha, como si faltara algo. */
#rec-wa .ayuda-campo, #rec-wa .nota { max-width: none; }

/* El aviso de después de guardar, despegado de los botones: salía pegado al
   borde de abajo y se leía como parte de la fila de botones. */
#aviso-rec-wa:not(:empty) { margin-top: 14px; }

/* El mail de ejemplo, adentro de su propio marco: trae sus estilos y sin el
   iframe se mezclarían con los de la pantalla, o sea que se vería distinto de
   como se ve en el correo — justo lo que uno viene a mirar. Fondo blanco
   siempre, porque un mail se lee en blanco aunque el sistema esté en oscuro. */
.rec-preview {
  width: 100%;
  height: 60vh;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: #fff;
}

/* ---- La ficha del lead, al costado de la conversación ----

   Se abre apretando el nombre, como en Prometheo. `.ia-dos-columnas` pasa a
   tener tres cuando está abierta —el nombre de la clase queda corto, pero
   renombrarla tocaría la sección entera para ganar nada—. */
.ia-dos-columnas.con-info {
  grid-template-columns: minmax(240px, 320px) 1fr minmax(260px, 330px);
}

.ia-info {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 12px 14px;
}

.ia-info-cabeza {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--borde);
  padding-bottom: 8px;
  margin-bottom: 4px;
}

.cerrar-info {
  border: 0;
  background: transparent;
  color: var(--texto-tenue);
  font-size: 19px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
}
.cerrar-info:hover { color: var(--texto); }

/* Cada dato con su rótulo arriba: en una columna angosta, rótulo y valor en la
   misma línea obligan a cortar el valor, que es lo que uno vino a leer. */
.ia-dato { padding: 7px 0; border-bottom: 1px solid var(--borde); }
.ia-dato span { display: block; font-size: 11.5px; color: var(--texto-tenue); }
.ia-dato strong { font-weight: 500; font-size: 13.5px; word-break: break-word; }

.ia-info h4 {
  margin: 15px 0 4px;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dorado);
}

.ia-info .boton { margin-top: 12px; text-align: center; }

/* Lo que todavía no existe se dice, no se deja en blanco. */
.ia-falta { margin-top: 14px; font-style: italic; }

/* El nombre y el renglón de abajo son un solo botón, y el área de clic es todo
   ese bloque: apuntarle a las letras del nombre era una puntería que nadie
   tiene por qué tener. Se ve como el título que ya era; sólo el fondo del hover
   delata que se puede apretar. */
.ia-quien {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 8px;
  background: transparent;
  /* El negativo de la izquierda alinea el texto con el resto de la cabecera:
     sin él, el bloque arrancaba corrido por su propio aire. */
  margin: -6px 0 0 -8px;
  padding: 6px 8px;
  font: inherit;
  color: var(--texto);
  text-align: left;
  cursor: pointer;
}

.ia-quien strong { display: block; font-weight: 600; }
.ia-quien small { display: block; color: var(--texto-tenue); font-size: 12px; margin-top: 2px; }

.ia-quien:hover { background: var(--superficie2); }
.ia-quien:hover strong { color: var(--dorado); }

@media (max-width: 1200px) {
  .ia-dos-columnas.con-info { grid-template-columns: minmax(240px, 320px) 1fr; }
  .ia-dos-columnas.con-info .ia-info { grid-column: 1 / -1; }
}


/* ---- El lateral con íconos ----

   Los rótulos de grupo se fueron: con el ícono adelante cada renglón se
   reconoce sin leerlo, y tres títulos en mayúsculas para once destinos eran
   más ruido que orden. Lo nuestro queda detrás de una raya. */
.lateral-bot .ajustes-menu a {
  display: flex;
  align-items: center;
  gap: 10px;

  /* Aire entre renglones, pero MEDIDO: el menú tiene que entrar entero.
     Eran 13 de padding y 10 de margen, de cuando la columna sobraba de alto
     porque se iba con el scroll de la página. Desde que quedó fija ya no
     sobra: con «Agentes» desplegado son trece renglones —el proveedor ve
     además Costos y Técnico— y a 57 px cada uno se pasaban de la ventana.

     Lo que manda el alto del renglon es el ICONO de 21 px, no el texto: por eso
     el numero no sale de la tipografia. Medido en el navegador, a 39 px los
     trece entran en 544 y en una pantalla de 740 hay 566. El padding de la
     derecha sigue dejando lugar para la flechita del desplegable y para
     cuantos esperan. */
  padding: 7px 30px 7px 12px;
  margin-bottom: 4px;
}

.icono-bot {
  width: 21px;
  height: 21px;
  flex: none;
  color: var(--texto-tenue);
}

.lateral-bot .ajustes-menu a:hover .icono-bot { color: var(--texto); }
.lateral-bot .ajustes-menu a.puesto .icono-bot,
.lateral-bot .ajustes-menu a.con-lo-puesto .icono-bot { color: var(--dorado); }

/* Un renglón de dos palabras largas —«Revisión de comprobantes»— se parte en
   dos líneas antes que salirse de la columna. */
.lateral-bot .ajustes-menu a strong { line-height: 1.3; }

.raya-bot {
  border: 0;
  border-top: 1px solid var(--borde);
  margin: 8px 6px;
}

/* La sangría de las subsecciones se mide desde el ícono del padre, para que
   los dos íconos no queden en la misma vertical y se lea de quién cuelgan. */
.lateral-bot .ajustes-menu a.hijo { padding-left: 24px; }

/* Un link adentro de una nota, que sin esto sale del color del texto y no se
   distingue de la frase que lo rodea. */
.link-suelto { color: var(--dorado); }

/* Una fila de algo dado de baja: sigue estando, pero no es lo que se está
   mirando. Se apaga, no se tacha: el nombre hay que poder leerlo.

   El tono va en el COLOR y no en `opacity`. Con opacidad se apagaba la fila
   entera —el botón de editar incluido, y no hay forma de devolvérsela desde
   adentro: la opacidad del padre arma un grupo—, así que una tabla donde todo
   está apagado, como la de seguimientos recién creados, parecía deshabilitada:
   nada para apretar. Ahora el texto se atenúa y lo que se toca conserva su
   color, que es la verdad: una fila apagada se edita igual que cualquier
   otra. */
.fila-apagada td { color: var(--texto-tenue); }

/* El avatar de quien está usando el sistema, adelante de su nombre en la barra.

   Es el mismo círculo con el que la agenda dice qué profesionales se están
   mirando (`.inicial-profesional`): una cara reconocible de un vistazo, sin
   leer. Un poco más grande, porque acá está solo y no pegado a otros. */
.barra-quien { display: flex; align-items: center; gap: 9px; }

.barra-avatar {
  width: 32px;
  height: 32px;
  font-size: 12px;
  border-color: var(--borde);
}

/* En la barra queda SÓLO el círculo con la inicial.

   El nombre y el rol seguían escritos al lado, y en la barra de arriba eso es
   el dato que menos falta hace: uno sabe con qué cuenta entró. Ocupaban lugar
   fijo en las veinte pantallas —y en las angostas, empujaban el menú— para
   decir algo que no cambia nunca.

   No se borran del HTML: siguen adentro, y el menú que se abre al tocar el
   círculo los muestra. Esconderlos con CSS y no sacarlos del marcado es lo que
   permite que el menú los siga leyendo, y que un lector de pantalla llegue a
   ellos por el `aria-label` del botón. */
.barra-quien strong,
.barra-quien span:not(.barra-avatar) { display: none; }

/* Sin nada al lado, el círculo no necesita el aire que dejaba para el texto. */
.barra-quien-menu { padding: 4px; margin-right: -4px; }

/* Las dos opciones de tema, con su muestra de color. Botones grandes y no un
   interruptor: «claro u oscuro» no es sí o no, son dos cosas con nombre, y con
   la muestra al lado se elige mirando en vez de leyendo. */
.opciones-tema { display: flex; flex-wrap: wrap; gap: 12px; }

.opcion-tema {
  flex: 1 1 200px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 2px 12px;
  align-items: center;
  padding: 14px 16px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  color: var(--texto);
  cursor: pointer;
  text-align: left;
}

.opcion-tema:hover { border-color: var(--dorado); }
.opcion-tema.puesta { border-color: var(--dorado); background: var(--dorado-suave); }
.opcion-tema.puesta strong { color: var(--dorado); }

.opcion-tema strong { grid-column: 2; font-weight: 500; font-size: 14px; }
.opcion-tema small { grid-column: 2; color: var(--texto-tenue); font-size: 11.5px; }

/* La muestra: el fondo y el dorado del tema, uno al lado del otro. Los colores
   van escritos y no en variables porque justamente muestran el OTRO tema. */
.opcion-tema-muestra {
  grid-row: 1 / 3;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--borde);
}

.opcion-tema-muestra.tema-oscuro { background: linear-gradient(135deg, #000 50%, #b6a360 50%); }
.opcion-tema-muestra.tema-claro { background: linear-gradient(135deg, #f6f6f7 50%, #b6a360 50%); }

/* El círculo con las iniciales al lado del nombre, en una lista de gente. Es
   el mismo de la agenda; acá va con el color del profesional, que es con el
   que se dibujan sus turnos. */
.quien-atiende { display: inline-flex; align-items: center; gap: 9px; }

/* El encabezado de un grupo adentro de una lista —los profesionales de cada
   sucursal—. Con una sola sucursal no aparece: no diría nada. */
.grupo-lista {
  margin: 22px 0 8px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.grupo-lista:first-child { margin-top: 0; }

/* Los botones del pie de un popup son un PAR: se ven del mismo tamaño, y lo que
   los distingue es el color y no la medida.

   Venían de dos familias —«Cancelar» suele ser `.chip` y «Guardar»
   `.boton.angosto`— con padding y cuerpo distintos, así que el principal salía
   más grande y el par se leía desparejo. Acá se los empareja: misma altura,
   mismo ancho mínimo, mismo cuerpo. El `width: auto` es para el `.boton`, que
   por defecto ocupa todo el ancho.

   Va sobre `.modal-pie`, así que alcanza a todos los popups del sitio de una
   vez y no hay que acordarse pantalla por pantalla. */
.modal-pie .chip,
.modal-pie .boton {
  width: auto;
  min-width: 118px;
  padding: 10px 24px;
  font-size: 13px;
}

/* El de borrar, a la izquierda del pie y sin relleno: se ve, pero no compite
   con Guardar. Rojo recién al apuntarlo, que es cuando importa avisar. */
.borrar-modal {
  border-color: transparent;
  background: none;
  color: var(--texto-tenue);
}

.borrar-modal:hover { border-color: var(--anulado); color: var(--anulado); }

/* ------------------------------------------------ antecedentes médicos */

/* La barra de avisos médicos, debajo de la identidad y encima de las solapas.

   Va ADENTRO de `.ficha-fija`, que es la parte de la ficha que se queda arriba
   al bajar: así la alergia a la penicilina sigue a la vista mientras se cobra,
   se agenda o se escribe una evolución. Un aviso que sólo se ve en su propia
   solapa es un aviso que nadie lee antes de sentar al paciente.

   El color es el del estado «ausente» —un ámbar, no el rojo de anulado—: esto
   es algo a tener en cuenta, no un error. El rojo del sitio ya quiere decir
   «esto salió mal» y usarlo acá le sacaría fuerza a los dos. */
.barra-alertas {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 4px;
  padding: 10px 14px;
  background: rgba(180, 83, 9, 0.12);
  border-left: 3px solid var(--ausente);
  border-radius: var(--radio);
  font-size: 13px;
  cursor: help;
}

.barra-alertas > svg {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  color: var(--ausente);
}

/* Una al lado de la otra mientras entren, y en varios renglones cuando no.
   Apiladas siempre, tres alertas empujaban las solapas media pantalla abajo. */
.barra-alertas-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  min-width: 0;
}

.alerta-medica { color: var(--texto); }
.alerta-medica strong { font-weight: 600; }

/* --- el cuestionario --- */

.antecedentes-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.antecedentes-grupo { margin-bottom: 18px; }

.antecedente {
  padding: 10px 0;
  border-bottom: 1px solid var(--borde);
}

.antecedente:last-child { border-bottom: none; }
.antecedente:last-child { padding-bottom: 0; }

/* La pregunta a la izquierda y las tres respuestas a la derecha, contra el
   borde: alineadas todas en la misma columna, el ojo baja por la lista y ve de
   un golpe qué falta contestar. Con las respuestas pegadas a cada pregunta —de
   largos distintos— quedaban en zigzag y había que leerlas una por una. */
.antecedente-renglon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.antecedente-texto {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-size: 13.5px;
}

/* El triangulito de las preguntas que son alerta: dice, antes de contestar, que
   un «sí» acá va a subir a la cabecera. */
.marca-alerta {
  display: inline-flex;
  flex: none;
  color: var(--ausente);
  cursor: help;
}

.marca-alerta svg { width: 14px; height: 14px; }

/* Las tres opciones no se estiran ni se achican: es la columna contra la que se
   alinea toda la lista. */
.antecedente .opciones-en-linea { flex: none; }

/* El detalle aparece debajo, ya con la respuesta puesta. No lleva los 18px de
   abajo de un campo suelto: está adentro de un renglón, no de un formulario. */
.antecedente-detalle {
  margin: 8px 0 0;
  padding: 8px 11px;
  font-size: 12.5px;
}

.antecedente-detalle[hidden] { display: none; }

.antecedente-firma {
  display: block;
  margin-top: 5px;
  font-size: 11px;
}

/* --- el historial --- */

.historial-antecedentes {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 55vh;
  overflow-y: auto;
}

.historial-fila {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--borde);
  font-size: 13px;
}

.historial-fila:last-child { border-bottom: none; padding-bottom: 0; }
.historial-fila strong { display: block; margin-bottom: 3px; font-weight: 500; }
.historial-fila em { color: var(--dorado); font-style: normal; font-weight: 600; }

/* En una pantalla angosta la pregunta y sus respuestas no entran en un renglón:
   las respuestas bajan y se alinean a la izquierda, debajo del texto. */
@media (max-width: 640px) {
  .antecedente-renglon {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
}

/* Un campo que existe SÓLO para el gestor de contraseñas del navegador.

   No se ve, no se tabula y no lo lee un lector de pantalla, pero ocupa lugar en
   el documento: los gestores saltean los que están en `display: none` o en
   `type="hidden"`, y ahí vuelven a agarrar el primer campo de texto que
   encuentren —que en este sistema es el buscador de pacientes de la barra—. */
.solo-para-el-navegador {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* ------------------------------------------------ documentos publicos */

/*
 * La politica de privacidad y las condiciones del servicio.
 *
 * Son las unicas pantallas del sistema que alguien lee de arriba abajo, y las
 * unicas que puede abrir una persona que no entro nunca. El resto del sistema
 * esta hecho para ojear —tablas, fichas, campos—; esto es un texto largo, y un
 * texto largo necesita otra cosa: renglon corto para no perder la linea al
 * volver, y aire entre parrafos.
 *
 * 70ch y no un ancho en pixeles: la medida de un renglon comodo se cuenta en
 * caracteres, no en pantalla. En un monitor grande queda una columna angosta al
 * medio, que es exactamente lo que hace falta.
 */
.documento {
  max-width: 70ch;
  margin: 0 auto;
  padding: 48px 22px 90px;
  font-size: 15px;
  line-height: 1.7;
}

.documento .marca-doc {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 20px;
  margin-bottom: 34px;
  border-bottom: 1px solid var(--borde);
}

.documento .marca-doc img { width: 58px; height: auto; aspect-ratio: 1063 / 470; }
.documento .marca-doc a { color: var(--texto-tenue); font-size: 13px; }

.documento h1 { font-size: 26px; line-height: 1.25; margin-bottom: 6px; }

/* Cuando se actualizo por ultima vez. Es lo primero que mira quien vuelve a
   leer un documento que ya conocia. */
.documento .fecha-doc {
  display: block;
  color: var(--texto-tenue);
  font-size: 13px;
  margin-bottom: 34px;
}

.documento h2 {
  font-size: 17px;
  margin: 40px 0 12px;
  padding-top: 14px;
  border-top: 1px solid var(--borde);
}

.documento h3 { font-size: 15px; margin: 26px 0 8px; color: var(--rotulo); }
.documento p, .documento ul, .documento ol { margin-bottom: 16px; }
.documento ul, .documento ol { padding-left: 22px; }
.documento li { margin-bottom: 7px; }
.documento a { color: var(--dorado); }

.documento table { width: 100%; border-collapse: collapse; margin-bottom: 18px; }
.documento th, .documento td {
  text-align: left;
  vertical-align: top;
  padding: 9px 12px 9px 0;
  border-bottom: 1px solid var(--borde);
}
.documento th { color: var(--rotulo); font-size: 13px; font-weight: 600; }
.documento td code { font-size: 12.5px; }

/* Lo que hay que completar antes de que esto sea un contrato. En rojo y no en
   gris: un hueco que se lee como parte del texto es un hueco que se publica. */
.documento .completar {
  color: var(--anulado);
  font-weight: 600;
}

/* El aviso de que todavia no lo miro un abogado. Va arriba de todo y con el
   borde dorado del sistema: se tiene que ver antes de leer una sola clausula. */
.documento .aviso-borrador {
  border-left: 3px solid var(--dorado);
  background: var(--dorado-suave);
  border-radius: 0 var(--radio) var(--radio) 0;
  padding: 14px 16px;
  margin-bottom: 34px;
  font-size: 13.5px;
}

.documento .pie-doc {
  margin-top: 50px;
  padding-top: 18px;
  border-top: 1px solid var(--borde);
  color: var(--texto-tenue);
  font-size: 13px;
}

@media (max-width: 600px) {
  .documento { padding: 30px 18px 70px; font-size: 14.5px; }
  .documento h1 { font-size: 22px; }
}

/* ---------------------------------------------------------------------------
   El sitio público de reservas (reservar.html).

   Se apoya en `.ingreso` y `.ingreso-caja`, que ya son la tarjeta centrada del
   sistema, y en las clases de `turno.html` para lo que es literalmente lo
   mismo: la pregunta de arriba, el pie tenue y el cartel de «cargando». Esas
   están arriba y ahora nombran a las dos páginas en la misma regla, que es lo
   que evita tener dos definiciones del mismo gris.

   Acá abajo va sólo lo que esta pantalla tiene y ninguna otra: los pasos, las
   tarjetas de motivo y la grilla de horarios.
   --------------------------------------------------------------------------- */

/* La caja es más ancha que la de «Tu turno»: ahí se leen tres renglones y acá
   hay que elegir entre veinte horarios. */
.reservar-caja { width: min(520px, 100%); }

/* La caja de los horarios, mientras se traen los de otra semana.

   Se apaga un poco y no se puede tocar, pero SIGUE AHÍ. Antes cambiar de semana
   —y también cambiar de día— vaciaba el panel entero para escribir «Buscando
   horarios...» y lo volvía a dibujar, así que el calendario desaparecía y
   reaparecía de un parpadeo. Lo de un día ya ni siquiera pide nada; lo de la
   semana pide, pero sin llevarse la pantalla puesta. */
.reservar-ocupado { opacity: 0.45; pointer-events: none; transition: opacity 0.1s; }

/* --- En una pantalla grande, todo más grande ------------------------------
 *
 * La página nació pensada para el teléfono, que es de donde entra casi todo el
 * mundo, y en un monitor quedaba una tarjeta chiquita en el medio de la nada
 * con letra de celular. Acá crece: la caja, los pasos, las tarjetas de motivo,
 * los días y los horarios.
 *
 * Va como `min-width` y no al revés a propósito: lo que se toca en el teléfono
 * —que es lo que hay que no romper— es lo de arriba, y esto no lo pisa. */
@media (min-width: 900px) {
  .reservar-caja { width: min(700px, 100%); padding: 38px 42px; }

  .reservar-caja .mi-turno-pregunta { font-size: 17px; margin-bottom: 16px; }

  .reservar-paso span { font-size: 12.5px; }
  .reservar-paso b { width: 30px; height: 30px; font-size: 14px; }

  .reservar-opcion { padding: 16px 18px; }
  .reservar-opcion strong { font-size: 15.5px; }
  .reservar-opcion span { font-size: 13px; }

  .reservar-semana span { font-size: 15px; }
  .reservar-flecha { width: 38px; height: 38px; }

  .reservar-tira { gap: 7px; }
  .reservar-dia-boton { padding: 12px 4px; }
  .reservar-dia-boton span { font-size: 12px; }
  .reservar-dia-boton b { font-size: 18px; }

  .reservar-horas { gap: 8px; }
  .reservar-hora { min-width: 76px; padding: 10px 16px; font-size: 14px; }

  /* Más alto en el monitor, que es donde sobra pantalla: con esto entran seis
     renglones de horarios y casi nunca hay que deslizar. */
  #reservar-horarios { height: 360px; }

  .reservar-quien { font-size: 13.5px; }
  .reservar-elegido strong { font-size: 15.5px; }
  .reservar-elegido span { font-size: 14px; }
}

/* Los cuatro pasos. No son botones: no se puede saltar al tercero sin haber
   pasado por el segundo, y un elemento que parece clickeable y no lo es
   frustra más de lo que orienta. */
.reservar-pasos {
  display: flex;
  gap: 4px;
  margin-bottom: 22px;
  font-size: 11px;
  color: var(--texto-tenue);
}

.reservar-paso {
  flex: 1;
  /* Sin esto no achica: un elemento flex no baja de su contenido salvo que se
     le diga, así que el rótulo largo se desbordaba por los dos costados y en el
     teléfono se leía «ué necesitá». */
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
  line-height: 1.2;
}

/* El rótulo. Recorta acá y no en el paso: en un contenedor flex el texto suelto
   es un elemento anónimo y `text-overflow` no lo alcanza —se desbordaba por los
   dos costados y se leía «ué necesitá»—. */
.reservar-paso span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reservar-paso b {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
}

.reservar-paso.ahora { color: var(--dorado); }
.reservar-paso.ahora b { border-color: var(--dorado); color: var(--dorado); }

.reservar-paso.hecho b {
  border-color: var(--dorado);
  background: var(--dorado-suave);
  color: var(--dorado);
}

/* Los motivos de consulta, uno debajo del otro. En columna y no en grilla
   porque los nombres son largos —«Prueba de Try-ins + Provisorio»— y en dos
   columnas quedaban partidos en tres renglones cada uno. */
.reservar-opciones {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.reservar-opcion {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 12px 14px;
  background: var(--carbon);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  color: var(--texto);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.reservar-opcion:hover { border-color: var(--dorado); }
.reservar-opcion strong { font-weight: 500; font-size: 14px; }
.reservar-opcion span { color: var(--texto-tenue); font-size: 12px; }

.reservar-opcion.puesta {
  border-color: var(--dorado);
  background: var(--dorado-suave);
}

/* La semana que se está mirando, con las flechas a los costados. */
.reservar-semana {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 13px;
}

.reservar-flecha {
  flex: none;
  width: 32px;
  height: 32px;
  background: var(--carbon);
  border: 1px solid var(--borde);
  border-radius: 999px;
  color: var(--texto);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.reservar-flecha:hover:not(:disabled) { border-color: var(--dorado); color: var(--dorado); }
.reservar-flecha:disabled { opacity: 0.35; cursor: default; }

/* La tira de los siete días de la semana.
   
   Se elige uno y abajo aparecen sus horarios. Antes se dibujaban todos los de
   la semana de una: cinco días con treinta horarios cada uno son ciento
   cincuenta píldoras, y eso no es una pantalla para elegir, es un muro. */
.reservar-tira {
  display: flex;
  gap: 5px;
  margin-bottom: 20px;
}

.reservar-dia-boton {
  flex: 1;
  /* Sin esto los siete no achican y la tira se sale de la caja en el teléfono. */
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 2px;
  background: var(--carbon);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  color: var(--texto);
  font: inherit;
  cursor: pointer;
}

.reservar-dia-boton span { font-size: 10.5px; color: var(--texto-tenue); }
.reservar-dia-boton b { font-size: 15px; font-weight: 500; }

.reservar-dia-boton:hover:not(:disabled) { border-color: var(--dorado); }

.reservar-dia-boton.puesto {
  border-color: var(--dorado);
  background: var(--dorado-suave);
}

.reservar-dia-boton.puesto span,
.reservar-dia-boton.puesto b { color: var(--dorado); }

/* Un día sin horarios se ve apagado y no se puede tocar. Se deja en la tira
   igual: sacarlo movería los otros de lugar cada vez que cambia la semana, y
   además saber que ese día no hay nada también es información. */
.reservar-dia-boton.vacio { opacity: 0.3; cursor: default; }

/* La caja de los horarios mide SIEMPRE lo mismo, tenga dos turnos o cuarenta.

   Antes crecía y se achicaba con lo que hubiera ese día: un lunes con dos
   profesionales y cuarenta horarios estiraba la tarjeta media pantalla, y el
   jueves siguiente con dos horarios la encogía de golpe. Cambiar de día movía
   todo lo de abajo —el botón de volver saltaba— y la página parecía otra.

   El alto está elegido para que el caso normal entre entero y no haya que
   deslizar; el día cargado desliza adentro de su caja, sin mover el resto. */
#reservar-horarios {
  height: 300px;
  overflow-y: auto;
  /* Aire a la derecha para que la barra de deslizar no se apoye sobre las
     píldoras, y a la izquierda para que el foco del teclado no quede cortado. */
  padding: 2px 4px;
  margin: 0 -4px;
}

.reservar-horarios-dia { margin-bottom: 18px; }

/* Cuando el paciente eligió «me da igual», hay que decirle con quién sería cada
   horario: en una clínica eso importa, y enterarse al llegar es peor que
   elegirlo antes. */
.reservar-quien {
  margin: 10px 0 6px;
  color: var(--texto-tenue);
  font-size: 12px;
}

.reservar-horas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Los horarios en píldora, como los `.chip` del sistema, pero de ancho fijo:
   con ancho variable «9:00» y «11:30» quedaban de distinto tamaño y la grilla
   se veía descalzada. */
.reservar-hora {
  min-width: 62px;
  padding: 7px 12px;
  background: var(--carbon);
  border: 1px solid var(--borde);
  border-radius: 999px;
  color: var(--texto);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.reservar-hora:hover { border-color: var(--dorado); color: var(--dorado); }

/* El resumen de lo elegido, arriba de los datos y al final. Mismo borde dorado
   a la izquierda que el resumen del turno en `turno.html`: es la misma idea
   —esto es lo tuyo— y tiene que verse igual. */
.reservar-elegido {
  border-left: 3px solid var(--dorado);
  padding-left: 14px;
  margin-bottom: 22px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.reservar-elegido strong { font-weight: 500; font-size: 14px; }
.reservar-elegido span { color: var(--texto-tenue); font-size: 13px; }

/* La aclaración de abajo del campo tiene que verse pegada AL CAMPO.

   El input trae 18px de margen inferior, así que la pista caía después de ese
   hueco y quedaba más cerca del campo siguiente que del que explica: la de
   «ahí te mandamos el código» se leía como si hablara del celular. Se sube
   sobre el margen del input y se pone el aire abajo, que es lo mismo que hace
   `.campo-modal input + .pista` adentro del sistema. */
.reservar-caja input + .pista {
  margin-top: -14px;
  margin-bottom: 18px;
}

/* En la página del turno: los dos botones chicos de «cambiar el horario» y
   «cancelar el turno» van juntos al pie, y el elegir-horario reusa la tira de
   días y las píldoras de hora del sitio de reservas, que es la misma cosa. */
.mi-turno-cambios { margin-top: 10px; }
.mi-turno-mover { text-align: left; }
.mi-turno-mover .reservar-hora { margin: 0; }

/* «Leí y acepto la política de privacidad». Es un tilde de verdad —se marca o
   no— y no una píldora, que en el sistema significa prendido o apagado. El
   texto va al lado, chico y en gris, con el link en dorado como cualquier otro
   link de la caja. */
.reservar-acepto {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 2px 0 20px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--texto-tenue);
  cursor: pointer;
}
.reservar-acepto input[type="checkbox"] { margin-top: 1px; }
.reservar-acepto a { color: var(--dorado); }

/* El código de seis dígitos: grande y espaciado, que es como se lee un número
   que se está copiando de otra pantalla. */
.reservar-codigo {
  text-align: center;
  font-size: 22px;
  letter-spacing: 6px;
}

/* Los «Volver» y «Cambiar…»: son `.chip`, el secundario de la casa, pero acá
   van solos en su renglón y centrados debajo del botón principal. */
.reservar-volver {
  display: block;
  margin: 12px auto 0;
}

/* La lista de motivos publicables en la configuración de la agenda online.
   Los interruptores en columna y con aire: son decisiones sueltas, no un
   formulario que se completa de arriba abajo. */
.online-motivos {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0 22px;
}

.online-motivos small { color: var(--texto-tenue); }

/* Los motivos del asistente, agrupados por especialidad (migración 454).

   La clínica tiene treinta y pico de motivos y el bot usa siete: en una lista
   alfabética hay que pasar por coronas e incrustaciones para llegar a
   «Limpieza», y ahí es donde alguien tilda el que no era. Agrupado, se busca
   donde uno piensa. */

.motivos-por-especialidad {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 4px 0 22px;
}

.grupo-motivos {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.grupo-motivos .titulo-grupo {
  margin: 0;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--borde);
  font-size: 12px;
  color: var(--texto-tenue);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.grupo-motivos small { color: var(--texto-tenue); }

/* ======================================================= el sitio de la clínica

   La página pública: portada, servicios, equipo y contacto. La ve un paciente
   desde el teléfono, una sola vez, así que es una columna que se lee de arriba
   abajo y se agranda en pantalla grande. Usa los mismos colores y la misma
   tipografía que el sistema: es la cara de la misma clínica. */

body.sitio { background: var(--fondo); }

.sitio-pagina {
  max-width: 1040px;
  margin: 0 auto;
  padding: 18px 20px 40px;
}

.sitio-cargando, .sitio-aviso {
  padding: 60px 0;
  text-align: center;
  color: var(--texto-tenue);
  font-size: 15px;
}

.sitio-cabecera {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 6px 0 18px;
}

.sitio-logo { height: 34px; width: auto; }

.sitio-cabecera nav {
  display: flex;
  gap: 18px;
  margin-left: auto;
  font-size: 13.5px;
}
.sitio-cabecera nav a { color: var(--texto-tenue); text-decoration: none; }
.sitio-cabecera nav a:hover { color: var(--dorado); }

/* El botón principal, el mismo `.boton` del sistema pero como enlace. */
.sitio-boton {
  display: inline-block;
  padding: 11px 24px;
  border-radius: 999px;
  background: var(--dorado);
  color: #16161a;
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}
.sitio-boton:hover { filter: brightness(1.08); }
.sitio-cabecera .sitio-boton { padding: 9px 18px; font-size: 13px; }

.sitio-portada {
  display: grid;
  gap: 26px;
  align-items: center;
  padding: 26px 0 40px;
}
.sitio-portada.con-foto { grid-template-columns: 1.1fr 1fr; }
.sitio-portada img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid var(--borde);
}
.sitio-portada h1 {
  margin: 0 0 12px;
  font-size: 34px;
  line-height: 1.15;
  font-weight: 500;
}
.sitio-portada p {
  margin: 0 0 22px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--texto-tenue);
  white-space: pre-line;
}

.sitio-seccion { padding: 26px 0; border-top: 1px solid var(--borde); }
.sitio-seccion h2 {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 500;
}

.sitio-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.sitio-tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.sitio-tarjeta img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sitio-tarjeta h3 { margin: 14px 16px 6px; font-size: 16px; font-weight: 500; }
.sitio-tarjeta p {
  margin: 0 16px 14px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--texto-tenue);
  white-space: pre-line;
}
.sitio-link {
  margin: auto 16px 14px;
  color: var(--dorado);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
}
.sitio-link:hover { text-decoration: underline; }

.sitio-personas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 22px;
}
.sitio-persona { text-align: center; }
.sitio-persona img, .sitio-sin-foto {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--borde);
  margin: 0 auto 12px;
  display: block;
}
.sitio-sin-foto {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--superficie2);
  color: var(--dorado);
  font-size: 30px;
  font-weight: 500;
}
.sitio-persona h3 { margin: 0; font-size: 15.5px; font-weight: 500; }
.sitio-persona small { display: block; color: var(--dorado); font-size: 12.5px; margin-top: 2px; }
.sitio-persona p {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--texto-tenue);
  white-space: pre-line;
}

.sitio-contacto p { margin: 0 0 6px; font-size: 14.5px; }
.sitio-contacto a { color: var(--texto); text-decoration: none; }
.sitio-contacto a:hover { color: var(--dorado); }
.sitio-redes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.sitio-chip {
  padding: 8px 16px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  font-size: 13px;
  text-decoration: none;
  color: var(--texto);
}
.sitio-chip:hover { border-color: var(--dorado); color: var(--dorado); }

.sitio-pie {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding-top: 26px;
  margin-top: 10px;
  border-top: 1px solid var(--borde);
  font-size: 12.5px;
  color: var(--texto-tenue);
}
.sitio-pie a { color: inherit; text-decoration: none; }
.sitio-pie a:hover { color: var(--dorado); }

@media (max-width: 700px) {
  .sitio-cabecera nav { display: none; }
  .sitio-portada.con-foto { grid-template-columns: 1fr; }
  .sitio-portada h1 { font-size: 27px; }
}

/* Configuración → Sitio de la clínica: la foto de portada y las miniaturas
   de las tablas de servicios y equipo. */
.foto-del-sitio {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 4px 0 6px;
}
.foto-del-sitio img {
  width: 160px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radio);
  border: 1px solid var(--borde);
}
.foto-vacia {
  width: 160px;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--borde);
  border-radius: var(--radio);
  color: var(--texto-tenue);
  font-size: 12px;
  text-align: center;
}
.tabla-sitio .col-foto { width: 56px; }
.foto-mini {
  display: flex;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--borde);
  background: var(--superficie2);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: var(--texto-tenue);
  font-size: 20px;
}
.foto-mini:hover { border-color: var(--dorado); color: var(--dorado); }
.foto-mini img { width: 100%; height: 100%; object-fit: cover; }
.tabla-sitio .sub { display: block; font-size: 11px; color: var(--texto-tenue); margin-top: 2px; }
.tabla-sitio .col-texto { max-width: 320px; font-size: 12.5px; color: var(--texto-tenue); }
.tabla-sitio tr.apagada td { opacity: 0.55; }
.tabla-sitio .etiqueta { margin-left: 6px; }

/* ------------------------------------------------------- odontograma */

/* La boca se dibuja clara en los dos temas: un odontograma en negativo no lo
   lee nadie, y los colores de los hallazgos están pensados sobre blanco. */
.odontograma { --diente-fondo: #1c1c1c; }
[data-tema="claro"] .odontograma { --diente-fondo: #fff; }

.odo-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.odo-cabeza > div:last-child { display: flex; align-items: center; gap: 10px; }

.odo-boca { padding: 18px 14px; overflow-x: auto; }

.odo-arcada {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 22px;
  min-width: 660px;
}

/* La línea media: es lo que hace que las dos mitades se lean como una boca y
   no como cuatro listas de dientes. */
.odo-eje {
  height: 1px;
  background: var(--borde);
  margin: 12px 0;
  min-width: 660px;
}

.odo-cuadrante { display: flex; gap: 3px; }
/* El cuadrante derecho del paciente va contra el eje, como en la boca. */
.odo-cuadrante:nth-child(odd) { justify-content: flex-end; }

.odo-pieza {
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border-radius: 6px;
}
.odo-pieza:hover { background: var(--dorado-suave); }
.odo-pieza small { color: var(--texto-tenue); font-size: 10.5px; }

.diente-dibujo { width: 34px; height: 34px; display: block; }
.diente-dibujo.ausente { opacity: 0.55; }

.odo-pieza-grande { display: flex; justify-content: center; margin-bottom: 6px; }
.odo-pieza-grande .diente-dibujo { width: 90px; height: 90px; }

.odo-referencias {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--texto-tenue);
}
.odo-referencias span { display: inline-flex; align-items: center; gap: 6px; }

.ref-caja {
  width: 12px;
  height: 12px;
  display: inline-block;
  border-radius: 2px;
  flex: none;
}
.ref-borde {
  width: 12px;
  height: 12px;
  display: inline-block;
  flex: none;
  background: none;
}
.ref-borde.lleno    { border: 2px solid #2563eb; }
.ref-borde.punteado { border: 2px dashed #c0392b; }

.odo-grupo { margin-bottom: 14px; }
.odo-grupo > small {
  display: block;
  color: var(--texto-tenue);
  font-size: 11px;
  margin-bottom: 6px;
}

.odo-hallazgo {
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
}
.odo-hallazgo.puesto { border-color: var(--dorado); background: var(--dorado-suave); }

.odo-hallazgo-cabeza {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.odo-hallazgo-detalle { margin-top: 8px; display: flex; gap: 10px; flex-wrap: wrap; }
.odo-hallazgo-detalle input[type="text"] { flex: 1; min-width: 180px; }

/* Las caras van con la inicial y el nombre entero en la ayuda: cinco botones
   con «Vestibular» escrito no entran en el ancho de una ventana. */
.odo-caras button { min-width: 30px; font-variant-numeric: tabular-nums; }

/* La prestación del plan que se está mirando, cuando la pieza tiene trabajos
   de varios: sin esto hay que leer la columna del plan fila por fila. */
.tabla tr.de-este-plan td { background: var(--dorado-suave); }

/* Las siluetas van afuera y los cuadraditos contra el centro: así las dos
   arcadas se leen como una boca. La de abajo se da vuelta para que la raíz
   apunte hacia afuera, igual que en la boca de verdad. */
.odo-siluetas.abajo .diente-silueta { transform: scaleY(-1); }
.odo-siluetas .odo-arcada { gap: 2px 22px; }

.odo-silueta-boton {
  background: none;
  border: none;
  padding: 1px;
  cursor: pointer;
  border-radius: 6px;
  display: flex;
}
.odo-silueta-boton:hover { background: var(--dorado-suave); }

.diente-silueta { width: 34px; height: 58px; display: block; }
.diente-silueta.ausente { opacity: 0.5; }

/* Sin margen entre la silueta y su cuadradito: son la misma pieza. */
.odo-siluetas.arriba { margin-bottom: 2px; }
.odo-siluetas.abajo  { margin-top: 2px; }

.modal-caja.angosta { max-width: 460px; }
.modal-caja.angosta .campo { margin-bottom: 16px; }
.modal-caja.angosta .campo label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rotulo);
  margin-bottom: 4px;
}
.dato-fuerte { margin: 0; font-size: 14.5px; color: var(--dorado); }

/* Mientras llega la boca de verdad. Apagada para que no se lea como una boca
   sana, pero con el lugar ya reservado: lo que está debajo no se mueve. */
.odontograma.cargando-boca .odo-boca { opacity: 0.45; }
.odontograma.cargando-boca .odo-pieza,
.odontograma.cargando-boca .odo-silueta-boton { cursor: default; }

/* ---- «Fotos y Rx», por sesión ----

   Las fotos entran en tanda: el escáner exporta el set entero de una sentada.
   Corridas en una sola galería son una pared de cien miniaturas donde no se
   distingue una visita de la siguiente; por día se lee como lo que es, la
   historia del tratamiento con una sección por sesión. */
.archivos-seccion {
  margin-bottom: 14px;
  padding: 0;
  overflow: hidden;
}

/* TODO el renglón abre y cierra, no sólo la flechita. Es lo que hace el resto
   del sistema y lo que uno intenta sin pensarlo; una flechita de veintiséis
   píxeles es un blanco al que hay que apuntarle. */
.archivos-cabeza {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
  transition: background .15s ease;
}

.archivos-cabeza:hover { background: var(--superficie2); }

/* Cerrada, la cabecera es toda la tarjeta: sin la raya de abajo, que separaría
   de nada. */
.archivos-seccion:not(.cerrada) .archivos-cabeza {
  border-bottom: 1px solid var(--borde);
}

.archivos-seccion .galeria-archivos { padding: 14px 16px 16px; }

@media (prefers-reduced-motion: reduce) {
  .archivos-cabeza { transition: none; }
}

/* La flechita que pliega la sesión. Apunta abajo cuando está abierta y a la
   derecha cuando no: el mismo gesto que cualquier desplegable, sin leer nada.

   Las sesiones arrancan TODAS abiertas —la galería es para mirar— así que esto
   sirve para sacar del medio las que ya no interesan, no para ir abriendo de a
   una hasta encontrar algo. */
/* La flechita ya no es el botón: es la señal de en qué estado está. Apunta
   abajo cuando la sesión está abierta y a la derecha cuando no. */
.archivos-plegar {
  flex: none;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--texto-tenue);
  transform: rotate(-90deg);
  transition: transform .18s ease;
}

.archivos-plegar.abierta { transform: none; }
.archivos-cabeza:hover .archivos-plegar { color: var(--dorado-fuerte); }

@media (prefers-reduced-motion: reduce) {
  .archivos-plegar { transition: none; }
}

/* El nombre es también el botón para cambiarlo, igual que en la plantilla: se
   ve como un título hasta que se lo apunta. */
.archivos-titulo {
  display: block;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--texto);
  text-align: left;
}
button.archivos-titulo { cursor: pointer; }
button.archivos-titulo:hover { color: var(--dorado-fuerte); text-decoration: underline; }

/* Las fotos que todavía no están en ninguna plantilla. */
.pf-armar { margin-top: 16px; }
.pf-dia { margin-top: 12px; }
.pf-dia-cabeza { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.pf-dia-cabeza small { margin-right: auto; }

.pf-tira { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 4px; }
.pf-tira img {
  width: 62px; height: 46px;
  object-fit: cover;
  border-radius: 5px;
  border: 1px solid var(--borde);
  flex: none;
}
.pf-mas-fotos {
  display: flex; align-items: center; padding: 0 8px;
  color: var(--texto-tenue); font-size: 12px; flex: none;
}

/* Elegir qué foto va en un hueco de la plantilla. */
.hu-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
.hu-foto {
  background: none;
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 2px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--texto);
}
.hu-foto:hover { border-color: var(--dorado); }
.hu-foto.elegida { border-color: var(--dorado-fuerte); background: var(--dorado-suave); }
.hu-foto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
.hu-foto small { font-size: 10.5px; text-align: center; }

/* ------------------------------------------------------------- El asistente

   La pantalla del bot: sus charlas, su guion y sus conexiones. Todo lo de acá
   lleva el prefijo `ia-`, que no lo usa ninguna otra pantalla.

   Dos columnas y no una lista con detalle abajo: leer una conversación es ir y
   volver entre lo que dijo el paciente y la charla anterior, y con el detalle
   abajo cada vuelta es un scroll de pantalla entera. En un teléfono se apilan,
   que es donde tener las dos al lado no entra. */

.ia-dos-columnas {
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap: 16px;
  align-items: start;
}

@media (max-width: 900px) {
  .ia-dos-columnas { grid-template-columns: 1fr; }
}

.ia-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.ia-filtros input[type="search"] { min-width: 220px; }

/* La lista de charlas. Cada fila es un botón: el área de clic es el renglón
   entero, no el nombre. */
.ia-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 68vh;
  overflow-y: auto;
}

.ia-fila {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  text-align: left;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-left: 3px solid transparent;
  border-radius: var(--radio);
  padding: 9px 11px;
  color: var(--texto);
  cursor: pointer;
  font: inherit;
}
.ia-fila:hover { background: var(--superficie2); }
.ia-fila.abierta { border-color: var(--dorado); background: var(--dorado-suave); }

/* El galón de la izquierda es lo único que hace saltar a la vista una charla
   con alguien esperando del otro lado. */
.ia-fila.esperando { border-left-color: var(--anulado); }

.ia-fila-arriba { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.ia-fila-arriba small { color: var(--texto-tenue); font-size: 11.5px; white-space: nowrap; }
.ia-fila-dijo {
  color: var(--texto-tenue);
  font-size: 12.5px;
  /* Un renglón y basta: el resto se lee abriendo la charla. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ia-fila-dijo em { color: var(--dorado); font-style: normal; }
.ia-fila-abajo { display: flex; flex-wrap: wrap; gap: 5px; }

.ia-canal, .ia-etapa, .ia-anuncio, .ia-espera {
  font-size: 10.5px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--borde);
  color: var(--texto-tenue);
}
.ia-canal-whatsapp { color: var(--atendido); border-color: var(--atendido); }
.ia-canal-prueba   { color: var(--texto-tenue); border-style: dashed; }
.ia-anuncio { color: var(--dorado); border-color: var(--dorado); }
.ia-espera  { color: var(--anulado); border-color: var(--anulado); }

/* La charla abierta */
.ia-charla {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 14px 16px;
}

.ia-cabeza {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--borde);
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.ia-cabeza small { display: block; color: var(--texto-tenue); font-size: 12px; margin-top: 2px; }
.ia-cabeza-botones { display: flex; gap: 6px; flex-wrap: wrap; }

.ia-mensajes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 52vh;
  overflow-y: auto;
  padding: 4px 2px;
}

.ia-burbuja {
  max-width: 78%;
  border-radius: 12px;
  padding: 8px 11px;
  border: 1px solid var(--borde);
  background: var(--superficie2);
}
/* El paciente a la izquierda y la clínica a la derecha, como en cualquier chat:
   quién habla se lee sin leer. */
.ia-de-paciente  { align-self: flex-start; border-bottom-left-radius: 3px; }
.ia-de-asistente { align-self: flex-end; border-bottom-right-radius: 3px;
                   background: var(--dorado-suave); border-color: var(--dorado); }
/* Lo que escribió una persona va del mismo lado que el asistente —del lado de
   la clínica— pero verde, para que no se confunda con lo automático. */
.ia-de-humano    { align-self: flex-end; border-bottom-right-radius: 3px;
                   background: var(--atendido-suave); border-color: var(--atendido); }

/* La imagen que mandó el paciente: el comprobante de la seña, casi siempre.
   Va arriba del texto y ocupa el ancho de la burbuja, como en WhatsApp.
   El tope de alto es para que un comprobante largo --que suelen ser altos y
   angostos-- no empuje el resto de la charla fuera de la pantalla; entero se
   mira haciéndole clic. */
.ia-foto { display: block; margin: -2px 0 6px; }
.ia-foto img {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  object-position: top;
  border-radius: 8px;
  border: 1px solid var(--borde);
}
.ia-foto:hover img { border-color: var(--dorado); }

/* La foto entera, adentro del modal. El alto se ata a la pantalla y no a un
   número fijo: un comprobante es alto y angosto, y con un máximo en píxeles
   quedaba cortado en un monitor chico y perdido en uno grande. */
.ia-foto-entera {
  display: block;
  max-width: 100%;
  max-height: 72vh;
  margin: 0 auto;
  border-radius: 8px;
}

/* Un mensaje que es sólo una foto no deja un renglón vacío debajo. */
.ia-dice:empty { display: none; }
.ia-dice { font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.ia-cuando { color: var(--texto-tenue); font-size: 10.5px; margin-top: 4px; }

/* Las llamadas a herramienta: plegadas y chicas. Son la mayoría de las filas y
   casi nunca se miran, pero el día que un lead se cae son lo único que contesta
   «por qué le dijo eso». */
.ia-herramienta {
  align-self: center;
  width: 100%;
  border: 1px dashed var(--borde);
  border-radius: 8px;
  padding: 4px 9px;
  font-size: 11.5px;
  color: var(--texto-tenue);
}
.ia-herramienta summary { cursor: pointer; }

/* La referencia de los datos de una plantilla, plegada bajo el mensaje. Los
   renglones sueltos y no una tabla: son siete pares «dato — qué es» y una
   tabla de dos columnas para eso es andamiaje de más. */
.datos-plantilla p { margin: 5px 0; line-height: 1.5; }
.datos-plantilla code {
  background: var(--superficie2);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--texto);
}
.datos-plantilla em { font-style: normal; color: var(--texto); }
.ia-herramienta pre {
  white-space: pre-wrap;
  word-break: break-all;
  margin: 6px 0 2px;
  font-size: 11px;
  color: var(--texto-tenue);
  max-height: 240px;
  overflow: auto;
}

/* El botón va al medio del campo, no pegado abajo. Alineado al pie quedaba
   colgando de la última línea de un textarea de dos o tres renglones, como si
   fuera de otra fila. */
.ia-escribir {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}
/* `min-width: 0` o el campo no baja de su ancho por defecto ni sube de él: un
   textarea trae ancho propio y en un flex ese ancho es su piso.

   Y `margin: 0`: todos los campos del sistema traen 18 px abajo —vienen de los
   formularios, donde uno va arriba del otro—. Adentro de esta fila ese margen
   entra en la cuenta del centrado, así que el campo se subía nueve píxeles y el
   botón quedaba abajo aunque los dos estén «centrados». */
.ia-escribir textarea, .ia-escribir input[type="text"] {
  flex: 1;
  min-width: 0;
  margin: 0;
  resize: vertical;
}

/* El campo se lleva el renglón y el botón mide lo que dice.

   `.boton` viene con `width: 100%` —nació en la pantalla de entrar, donde es el
   único y ocupa el formulario entero—, y adentro de este flex ese 100% es la
   medida que el botón pide para él solo: se llevaba la fila y al campo lo
   dejaba en dos centímetros, tan angosto que no se leía lo que uno acababa de
   escribir. Sólo donde hay un campo al lado: el renglón que es un botón y nada
   más —Guardar en Técnico— sigue ancho como estaba. */
.ia-escribir:has(textarea) .boton,
.ia-escribir:has(input) .boton { flex: none; width: auto; padding: 12px 26px; }

.ia-consumo { color: var(--texto-tenue); font-size: 11.5px; margin-top: 10px; }

/* El editor del guion: alto y monoespaciado. Es un texto que se lee por
   párrafos y se compara con lo que contestó el asistente. */
.ia-guion {
  width: 100%;
  min-height: 46vh;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.5;
  resize: vertical;
}

/* Las tarjetas de configuración y conexiones */
/* Lo que mide una columna del asistente: la ventana menos lo que hay arriba.

   `dvh` y no `vh` para que en un teléfono cuente la ventana DE VERDAD: `vh`
   mide como si la barra de direcciones estuviera escondida, así que la columna
   se iba abajo del pliegue. La línea con `vh` queda como respaldo para el
   navegador que no entienda `dvh`. */
:root {
  --alto-bot: calc(100vh - 108px);
  --alto-bot: calc(100dvh - 108px);
}

/* Con la barra del asistente a la vista —cuando tiene alertas o botones— todo
   arranca 65 px más abajo. La condición es la misma que decide si esa barra se
   dibuja, escrita desde el `body` para poder mirarla desde acá. */
body:has(#encabezado-asistente > :not(:empty)) {
  --alto-bot: calc(100vh - 173px);
  --alto-bot: calc(100dvh - 173px);
}

.ia-config {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
}

.ia-tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 14px 16px;
}

/* ------------------------------------------------- Ajustes: todo en una pantalla

   Tres columnas que terminan a la misma altura y **no hacen scrollear la
   página**: los interruptores, WhatsApp con «qué sabe hacer» apilados, y los
   motivos. Los motivos son treinta y pico, así que sin esto esa columna
   estiraba la página y las otras dos —que son cortas— quedaban colgando en el
   vacío con metros de blanco al costado.

   Lo que scrollea es cada tarjeta por dentro, no la ventana. */

.ia-config.ia-ajustes {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;

  /* Si la pantalla es muy baja se respeta el mínimo y ahí sí scrollea la
     página: tres columnas de 200 px de alto no se leen. */
  height: var(--alto-bot);
  min-height: 430px;
}

/* El alto lo pone `--alto-bot`, definida unas líneas más arriba: las tres
   columnas del asistente —el menú, el panel y esta grilla— tienen que terminar
   donde termina la ventana, y con el número escrito tres veces alcanzaba con
   tocar una pantalla para que las otras dos quedaran cortas. */

/* En pantalla angosta vuelven a apilarse y manda el alto del contenido: en un
   teléfono, tres columnas cortadas son peor que una página larga. */
@media (max-width: 900px) {
  .ia-config.ia-ajustes {
    grid-template-columns: 1fr;
    height: auto;
  }
  .ia-config.ia-ajustes > .ia-tarjeta,
  .ia-columna > .ia-tarjeta { overflow: visible; }
}

.ia-config.ia-ajustes > .ia-tarjeta {
  overflow-y: auto;
  min-height: 0;
}

/* La columna del medio: dos tarjetas apiladas que se reparten el alto. */
.ia-columna {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}

.ia-columna > .ia-tarjeta {
  overflow-y: auto;
  min-height: 0;
}

/* La de motivos: el encabezado queda quieto y sólo la lista corre. Sin esto
   hay que scrollear la tarjeta entera para ver el primer motivo. */
.ia-tarjeta-motivos {
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
}

.ia-tarjeta-motivos .motivos-por-especialidad {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin: 4px -4px 0 0;
  padding-right: 8px;
}
.ia-tarjeta.apagada { border-style: dashed; }
.ia-tarjeta h3 { margin: 0 0 8px; font-size: 14.5px; }
.ia-tarjeta p { font-size: 12.5px; line-height: 1.5; margin: 6px 0; }
.ia-tarjeta label { display: block; margin: 8px 0; font-size: 12.5px; color: var(--rotulo); }
.ia-tarjeta label input, .ia-tarjeta label select { width: 100%; margin-top: 3px; }
.ia-tarjeta label.interruptor { display: flex; align-items: center; gap: 8px; }
/* `:not` porque el `width: auto` genérico le pisaba los 32px a la píldora del
   interruptor: el checkbox quedaba con ancho cero y la perilla —que es un
   `::after` absoluto— flotaba encima del texto del rótulo. */
.ia-tarjeta label.interruptor input:not([type="checkbox"]) { width: auto; margin: 0; }

/* La solapa Conexiones: las tarjetas de la sección Cuentas, en su grilla de
   siempre, pero con el reparto adentro de un marketplace (la referencia que
   pasó Juan es el de Prometheo): el logo del prestador arriba y centrado en
   una franja propia, el nombre y el estado abajo a la izquierda, y el botón
   —Conectar o Administrar— al ancho entero, cerrando la tarjeta. Así el
   contenido llena la tarjeta en vez de arrinconarse a la izquierda. */
.tarjeta-conexion strong { display: block; font-weight: 500; }
.tarjeta-conexion small { display: block; margin-top: 3px; color: var(--texto-tenue); font-size: 11.5px; }
.tarjeta-conexion .boton { margin-top: auto; text-align: center; }

.conexion-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
  border-radius: var(--radio);
  background: var(--superficie2);
}

/* El logo del prestador es un SVG que vive en `web/` —el oficial, bajado una
   vez y servido por nosotros: nada se carga de un dominio ajeno—. Va suelto y
   no en una subcarpeta porque el instalador copia `web/` al público en plano
   (`scandir`, sin recursión): una subcarpeta llega al privado y nunca al
   sitio, y la imagen se ve rota. Pasó el 03/09/2026. */
.conexion-logo img { width: 64px; height: 64px; }

/* La que no tiene logo propio: la inicial en la misma franja, con el mismo
   tamaño que ocupa un logo. Es a propósito no bajar el logo de cada tercero:
   son marcas ajenas, cambian sin avisar y cada archivo nuevo es un archivo
   que hay que servir. La inicial alcanza para reconocer la tarjeta de un
   vistazo, que es todo lo que el logo estaba haciendo. */
.conexion-inicial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--dorado-suave);
  color: var(--dorado);
  font-size: 30px;
  font-weight: 500;
}

/* Administrar y la ruedita, en el pie de la tarjeta. `margin-top: auto` lo
   empuja abajo para que dos tarjetas de distinto alto tengan los botones a la
   misma altura. */
.conexion-botones {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-top: auto;
}

.conexion-botones .boton { flex: 1; margin-top: 0; }

.conexion-rueda {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 38px;
  padding: 0;
  background: var(--superficie2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  color: var(--texto-tenue);
  cursor: pointer;
}

.conexion-rueda:hover { border-color: var(--dorado); color: var(--dorado); }
.conexion-rueda .icono-bot { width: 17px; height: 17px; }

/* ---- La lista de dentistas del modal de Dentalink ---- */

.dl-sucursal {
  margin: 10px 0 16px;
  padding: 10px 12px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

.dl-sucursal-todos {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--borde);
  cursor: pointer;
}

.dl-sucursal-todos small { color: var(--texto-tenue); font-size: 11.5px; }

/* Dos columnas cuando entran: seis dentistas en fila única es media pantalla
   de scroll dentro de un modal que además tiene una tabla arriba. */
.dl-sucursal .dl-dentista {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 48%;
  min-width: 220px;
  margin-top: 8px;
  font-size: 12.5px;
  cursor: pointer;
}

.dl-dentista input { flex: none; margin: 0; }
.dl-dentista small { color: var(--texto-tenue); font-size: 11px; }
.ia-tarjeta code { font-size: 11.5px; color: var(--texto-tenue); }

.ia-luz::before {
  content: '●';
  margin-right: 6px;
}
.ia-luz.bien::before { color: var(--atendido); }
.ia-luz.mal::before  { color: var(--anulado); }

.ia-numeros { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0 16px; }
.ia-titulo { margin: 22px 0 4px; font-size: 14.5px; }

/* La barra del embudo. Va en su propia celda para que el ancho de la tabla no
   dependa de cuánta gente llegó hasta ahí. */
.ia-barra-celda { width: 30%; }
.ia-barra {
  display: block;
  height: 10px;
  min-width: 2px;
  border-radius: 999px;
  background: var(--dorado);
}

/* ------------------------------------------------- encuadrar una foto */

/* El marco tiene la proporción del hueco de la plantilla: lo que se ve mientras
   se encuadra es exactamente lo que va a quedar. */
.en-marco {
  /*
   * Ancho PROPIO, en `vw`, y no `width: 100%`.
   *
   * `.modal-caja` mide `min(880px, 100%)` dentro de un grid que se dimensiona
   * por su contenido. Los otros modales funcionan porque adentro tienen texto y
   * tablas, que traen ancho propio; acá adentro sólo hay un marco con
   * `aspect-ratio`, que no aporta ninguno. Con `width: 100%` los dos se quedan
   * esperando al otro y la caja entera colapsaba a **2 píxeles**: el modal se
   * abría y no se veía nada.
   *
   * El `vw` no depende del padre, así que corta el círculo.
   */
  /* Las dos medidas las escribe `dibujarEncuadre()` en pixeles, con la forma
     del hueco al que va la foto: encuadrar tiene que mostrar exactamente lo que
     va a quedar en la miniatura, y los huecos de la plantilla no son todos
     iguales ni ninguno es 4:3. Lo de aca es el arranque, por si el hueco no se
     pudo medir. */
  width: min(520px, 70vw);
  margin: 0 auto;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 10px;
  background: #000;
  cursor: grab;
  touch-action: none;   /* el arrastre lo maneja el editor, no el navegador */
  user-select: none;

  /* La foto se centra con flex y NO con `left:50%` + `translate(-50%,-50%)`.
     Ese truco no sirve acá: el -50% se calcula sobre el tamaño SIN escalar del
     elemento, así que con una foto de 1153 px de ancho la corría 576 px y la
     sacaba del marco. Con flex, el centro es el centro y el `transform` sólo
     escala, gira y mueve. */
  display: flex;
  align-items: center;
  justify-content: center;
}
.en-marco:active { cursor: grabbing; }

.en-marco img {
  flex: none;          /* que no la encoja el flex: acá manda el zoom */
  max-width: none;     /* pisa el `max-width:100%` general */
  transform-origin: center;
  will-change: transform;
}

.en-controles {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.en-controles .opciones-en-linea button { min-width: 42px; font-size: 16px; }

.en-zoom { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 180px; }
.en-zoom span { font-size: 12px; color: var(--texto-tenue); white-space: nowrap; }
.en-zoom input[type="range"] { flex: 1; accent-color: var(--dorado-fuerte); }

/* Los grados del enderezado, al lado de su barra. Ancho fijo y tabulares: sin
   eso la barra se corre sola al pasar de «+9°» a «+10°». */
.en-zoom output {
  font-size: 12px;
  color: var(--texto-tenue);
  min-width: 44px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* El pie de este modal reparte a los costados: deshacer lejos de guardar. */
#modal-encuadre .modal-pie { justify-content: space-between; }

/* ------------------------------------------------------------ recetas */

.rec-arriba { justify-content: flex-end; margin-bottom: 14px; }

.receta { margin-bottom: 14px; }
.receta.anulada { opacity: 0.7; }
.receta.anulada .receta-items { text-decoration: line-through; }

.receta-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.receta-cabeza strong { display: block; }
.receta-acciones { display: flex; align-items: center; gap: 8px; }

.receta-items { list-style: none; margin: 0; padding: 0; }
.receta-items li {
  padding: 8px 0;
  border-top: 1px solid var(--borde);
}
.receta-cantidad { float: right; color: var(--texto-tenue); font-size: 12px; }

/* El renglón de un medicamento mientras se escribe la receta. */
.rx-item {
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.rx-item-cabeza { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.rx-item-cabeza small { margin-right: auto; }

/* Un campo que ocupa lo que sobra: «cómo tomarlo» al lado de «cantidad». */
.campo-ancho { grid-column: span 2; }

/* Un botón que se lee como un enlace, para una acción de escape dentro de un
   texto: «o escribí uno a mano». */
.como-enlace {
  background: none;
  border: none;
  padding: 0;
  color: var(--dorado);
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
}

/* --- El asistente: lo que agrega la vista partida en cliente y proveedor ---

   La pantalla pasó a ser dos: la clínica atiende su bot y nosotros miramos lo
   que cuesta. Lo que sigue es lo que esa división trajo. */

/* Las solapas nuestras se marcan con un punto: en la pantalla del proveedor
   conviven con las del cliente, y hay que saber de un vistazo cuál es cuál
   antes de mostrarle la pantalla a alguien. */
.pestana.de-proveedor::before {
  content: '•';
  margin-right: 5px;
  color: var(--dorado);
}

/* La perilla «Asistente» de cada charla, copiada de Prometheo: una sola cosa
   que dice el estado y hace el cambio. Encendida contesta el bot. */
.ia-perilla {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--texto-tenue);
  user-select: none;
}
.ia-perilla input { position: absolute; opacity: 0; pointer-events: none; }

.ia-perilla-luz {
  width: 38px;
  height: 21px;
  border-radius: 999px;
  background: var(--superficie2);
  border: 1px solid var(--borde);
  position: relative;
  transition: background .15s, border-color .15s;
}
.ia-perilla-luz::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--texto-tenue);
  transition: transform .15s, background .15s;
}
.ia-perilla input:checked + .ia-perilla-luz {
  background: var(--dorado-suave);
  border-color: var(--dorado);
}
.ia-perilla input:checked + .ia-perilla-luz::after {
  transform: translateX(17px);
  background: var(--dorado);
}
.ia-perilla input:focus-visible + .ia-perilla-luz { outline: 2px solid var(--dorado); }

/* Los colores de las etiquetas de paso. Es la idea de Prometheo: el embudo se
   lee de un vistazo en la lista sin abrir nada. Gris lo que todavía no avanzó,
   ámbar lo que está en el medio, verde lo que llegó a la seña o al cierre. */
.ia-etapa-gris  { color: var(--texto-tenue); border-color: var(--borde); }
.ia-etapa-ambar { color: var(--ausente); border-color: var(--ausente); }
.ia-etapa-verde { color: var(--atendido); border-color: var(--atendido); }

.ia-canales { display: inline-flex; gap: 6px; flex-wrap: wrap; }

/* El renglón de arriba de una sección: la «i» de qué es esto y, pegados a ella,
   los botones de la pantalla, todo contra el borde derecho.

   Es lo que reemplaza a tener la explicación en un párrafo y los botones en la
   barra de arriba: dos franjas de alto para un ícono y dos botones. En una, y
   la barra queda vacía y se va sola. El ícono va con los botones y no en la
   otra punta del renglón: solo contra el borde izquierdo quedaba a un palmo de
   distancia de todo, como si explicara la tabla y no la pantalla. */
.fila-seccion {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin: 0 0 12px;
}

.fila-seccion-botones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* El buscador y los filtros del tablero de leads, en el mismo renglón: se
   quedan con lo que sobra a la izquierda y empujan la «i» y el botón contra el
   borde derecho.

   Los campos van con `margin: 0` porque los del sistema traen 18 px abajo —son
   de los formularios, donde uno va arriba del otro— y acá desalinean el
   renglón. */
.lead-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-right: auto;
}

.lead-filtros select, .lead-filtros input { margin: 0; width: auto; }
.lead-buscar { min-width: 260px; }

/* El menú para elegir qué columnas mirar. Cuelga del botón y no del `body`
   —como el menú de acciones— porque no tiene que seguir a nada que scrollee: la
   fila de filtros está quieta arriba de la pantalla. */
.filtro-tags { position: relative; }

.menu-tags {
  position: absolute;
  z-index: 60;
  top: calc(100% + 6px);
  left: 0;
  min-width: 240px;
  max-height: 320px;
  overflow-y: auto;
  padding: 8px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}

.menu-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
}

.menu-tag:hover { background: var(--superficie2); }
.menu-tag input { margin: 0; flex: none; }
.menu-tag span:last-of-type { flex: 1; min-width: 0; }
.menu-tag small { color: var(--texto-tenue); font-variant-numeric: tabular-nums; }

.menu-tags .chip { width: 100%; margin-top: 6px; }

/* Los pasos del guion, arriba del taller */
.ia-pasos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
}

/* Un paso apagado sigue en la fila, atrás de los que se usan y sin llamar la
   atención: está para poder volver a encenderlo, no para mirarlo. En punteado
   porque el color solo no alcanza —en el tema claro, un gris apagado y un gris
   de texto se parecen demasiado— y el borde discontinuo se lee de una. */
.ia-pasos .chip.apagado {
  border-style: dashed;
  color: var(--texto-tenue);
  opacity: 0.75;
}
.ia-pasos .chip.apagado:hover { opacity: 1; }

/* El de agregar cierra la fila. Se distingue por el borde y no por el relleno:
   lleno competiría con el paso que se está editando, que es lo único que tiene
   que resaltar acá. */
.ia-pasos .chip.sumar { border-style: dashed; color: var(--texto-tenue); }
.ia-pasos .chip.sumar:hover { border-color: var(--dorado); color: var(--dorado); }

/* El ícono que explica la pantalla, en la misma fila que los pasos. Relleno y
   más grande que el de los permisos: allá está al lado de un casillero y es uno
   de noventa, acá es el único de la fila y tiene que encontrarse solo. */
.info-taller { margin-right: 4px; }
.info-taller svg { display: block; width: 21px; height: 21px; }

/* El taller: el guion a la izquierda y la prueba a la derecha, mitad y mitad.
   Las charlas usan una columna angosta para la lista; acá las dos columnas
   valen lo mismo, porque se mira una y se escribe en la otra todo el tiempo. */
.ia-taller { grid-template-columns: 1fr 1fr; }

/* «Versiones» se queda quieto arriba a la derecha y lo que se acomoda es el
   texto. Envolviendo —que es lo que hace la cabecera en el resto del sistema—
   el botón saltaba a la línea de abajo en los pasos cuya explicación es larga y
   volvía arriba en los cortos: cambiar de paso lo movía de lugar, y es el mismo
   botón haciendo lo mismo. */
/* El título tiene un ancho mínimo y los botones bajan si no entran.

   Estaba en `nowrap` con el título en `flex: 1; min-width: 0`, y con un botón
   —«Versiones»— andaba: lo que se acomodaba era el texto. Con los de armar el
   embudo son cinco, y el título se comprimía hasta una columna de una letra por
   renglón. Ahora el nombre del paso no baja de 180px y, cuando los botones no
   entran, se van al renglón de abajo, que es lo que hace el resto del sistema. */
.ia-taller .ia-cabeza > div:first-child { flex: 1 1 180px; min-width: 0; }
.ia-taller .ia-cabeza-botones { flex: 0 1 auto; justify-content: flex-end; }

/* La ruedita del paso: todo lo que se le puede hacer, adentro. Era una fila de
   seis botones que ocupaba más que el paso que estaba editando. */
.ia-menu-paso { flex: none; }

/* El flujo, en su propia fila y leyéndose como un camino.

   Los pasos del embudo estaban en la misma hilera que «Cómo habla» y la
   respuesta al recordatorio, que NO son pasos —no marcan a nadie ni salen en
   los números—, así que parecían el primero y el último de la conversación. El
   rótulo, la numeración y el chevron entre uno y otro dicen qué es esto sin
   tener que explicarlo. */
.ia-flujo { margin-top: -4px; }

.ia-grupo { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.ia-grupo-rotulo {
  color: var(--texto-tenue);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 2px;
}
/* La aclaración del rótulo, en minúscula y sin el espaciado: es una frase, no
   un título. Va abajo para que el rótulo no se estire y empuje los pasos. */
.ia-grupo-rotulo small {
  display: block;
  text-transform: none;
  letter-spacing: 0;
  font-size: 11px;
  opacity: 0.8;
}

/* El número del paso: la posición en el flujo, no un dato guardado.

   Sale de un contador de CSS y no del HTML, y eso es lo que hace que la fila se
   pueda acomodar mientras se arrastra: al mover el nodo, los números se
   recalculan solos. Escritos en el HTML habría que renumerar los ocho a mano en
   cada movimiento —y hasta que el servidor contestara se vería el 5 delante del
   2—. */
.ia-flujo { counter-reset: paso; }
.ia-flujo .chip.del-flujo { counter-increment: paso; }
.ia-nro::before { content: counter(paso); }

.ia-nro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--dorado-suave);
  color: var(--dorado);
  font-size: 10.5px;
  font-weight: 600;
}

/* La flecha entre paso y paso, por lo mismo: es un `::before` del que sigue y
   no un elemento en el medio. Moviendo nodos, dos elementos sueltos terminaban
   dos juntos o ninguno. */
.ia-flujo .chip.del-flujo + .chip.del-flujo { margin-left: 15px; }
.ia-flujo .chip.del-flujo + .chip.del-flujo::before {
  content: '›';
  position: absolute;
  left: -13px;
  top: 50%;
  transform: translateY(-52%);
  color: var(--texto-tenue);
  opacity: 0.55;
  font-size: 16px;
  line-height: 1;
}

/* Arrastrar para ordenar. El que se lleva queda atenuado y con el borde
   punteado: es el hueco donde va a caer, y como la fila se acomoda sola
   mientras se arrastra, ése es el único aviso que hace falta. */
.chip.del-flujo { position: relative; cursor: grab; }
.chip.del-flujo:active { cursor: grabbing; }
.chip.llevando {
  opacity: 0.45;
  border-style: dashed;
  border-color: var(--dorado);
}

/* El paso que se está editando, marcado. Antes `.puesto` no hacía nada en un
   chip —sólo existe para los menús— y no había forma de saber cuál de los diez
   se estaba mirando. */
.ia-pasos .chip.puesto {
  border-color: var(--dorado);
  color: var(--dorado);
  font-weight: 500;
}

/* El guion se estira con lo que sobra en vez de medir 46vh pase lo que pase.

   Esta sección hereda el alto fijo de la pantalla de charlas —la caja mide la
   ventana y no scrollea—, así que un textarea de medida fija empujaba el
   renglón de guardar abajo del borde: el botón estaba ahí, sin forma de
   llegarle. Con `flex` el texto cede el alto que haga falta y lo de abajo se ve
   siempre. Y si aun así no entra —una ventana muy baja—, la columna scrollea:
   quedarse sin lugar no puede ser quedarse sin el botón. */
.ia-taller .ia-charla { overflow-y: auto; }
.ia-taller .ia-guion { flex: 1; min-height: 140px; }
.ia-taller .ia-escribir { flex: none; }

/* El medidor del plan */
.ia-uso { max-width: 720px; }

.ia-medidor { margin: 14px 0 18px; }
.ia-medidor p { font-size: 13px; margin: 8px 0 0; }

.ia-medidor-barra {
  height: 14px;
  border-radius: 999px;
  background: var(--superficie2);
  border: 1px solid var(--borde);
  overflow: hidden;
}
.ia-medidor-barra span {
  display: block;
  height: 100%;
  background: var(--dorado);
  transition: width .2s;
}
/* Pasado el plan, el color cambia solo: es lo que dispara la pregunta «¿por qué
   me van a cobrar de más?» antes de que llegue la factura. */
.ia-medidor-barra span.pasado { background: var(--anulado); }

.ia-factura { max-width: 460px; }
.ia-factura td:last-child { text-align: right; white-space: nowrap; }
.ia-total td { border-top: 2px solid var(--borde); }

.ia-sabe { margin: 6px 0 0; padding-left: 18px; }
.ia-sabe li { font-size: 12.5px; line-height: 1.7; }

/* Las señas que el asistente dio por buenas y falta revisar.
 *
 * Dos columnas: a la izquierda lo que el asistente entendió, a la derecha la
 * foto del comprobante. Van al lado y no una arriba de la otra porque el
 * trabajo es COMPARAR las dos: leer arriba y bajar a mirar la imagen convierte
 * una revisión de tres segundos en un ida y vuelta. */

.ia-sena {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 16px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 14px 16px;
  margin-bottom: 12px;
}

@media (max-width: 860px) {
  .ia-sena { grid-template-columns: 1fr; }
}

.ia-sena .ia-cabeza { border: 0; padding: 0; margin-bottom: 8px; }

/* El monto, grande: es el primer dato que se compara contra la foto. */
.ia-monto { font-size: 18px; color: var(--dorado); white-space: nowrap; }

.ia-sena-foto img {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--borde);
  background: var(--superficie2);
  /* Un comprobante es alto y angosto; que no se estire ni tape la pantalla. */
  max-height: 340px;
  object-fit: contain;
  cursor: zoom-in;
}
.ia-sena-foto .vacio { padding: 20px; font-size: 12px; }


/* ---- El tablero de leads (CRM → Leads) ----

   Columnas al costado con scroll horizontal, y no una grilla que las apile:
   las etiquetas las crea la clínica, así que pueden ser cinco o quince, y una
   grilla con quince columnas las deja del ancho de una palabra. Cada columna
   scrollea por su cuenta para que la más larga no estire la pantalla. */
.lead-tablero {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 10px;
}

.lead-columna {
  /* Ni crece ni se achica: una columna angosta corta los nombres y una ancha
     hace que entren tres en la pantalla. 262 es lo que mide una tarjeta con el
     nombre y la hora en el mismo renglón. */
  flex: 0 0 262px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 10px;
}

/* La columna que va a recibir la tarjeta. El dorado suave es el mismo de todo
   el sitio: el hover de las tablas, el del menú y éste son uno solo. */
.lead-columna.recibiendo {
  border-color: var(--dorado);
  background: var(--dorado-suave);
}

.lead-columna-cabeza {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 2px 8px;
  border-bottom: 1px solid var(--borde);
}

.lead-columna-cabeza strong {
  font-size: 12.5px;
  /* El nombre de la etiqueta lo escribe la clínica: si no entra, se corta acá
     y no empuja al número. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* El color de la etiqueta, del tamaño de un punto. Relleno y chico: en la
   cabeza de la columna el contorno de `.ia-tag` se pierde. */
.lead-punto {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--tinta);
}

.lead-cuantas {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--texto-tenue);
}

/* Que esa columna la mueve el asistente solo. Dos letras: al lado de un nombre
   largo, «El asistente» no entra. */
.lead-auto {
  flex: none;
  padding: 0 5px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--texto-tenue);
}

.lead-pila {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Cada columna con su scroll. El alto sale de lo que queda abajo de la barra
     y del renglón de filtros; con `100vh` pelado la última tarjeta queda
     debajo del borde de la ventana. */
  max-height: calc(100vh - 330px);
  overflow-y: auto;
}

.lead-vacia {
  margin: 0;
  padding: 10px 2px;
  font-size: 11.5px;
  color: var(--texto-tenue);
}

/* Es un `button`, como las filas de la lista de charlas: así se llega con el
   tabulador y se abre con Enter sin escribirle el teclado a mano. Van los
   mismos cuatro arreglos que `.ia-fila` —ancho, alineación, tipografía y
   color—, que es lo que un botón no hereda. */
.lead-tarjeta {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  text-align: left;
  font: inherit;
  color: var(--texto);
  background: var(--superficie2);
  border: 1px solid var(--borde);
  /* El galón de la izquierda queda reservado para «espera respuesta», el mismo
     significado que tiene en la lista de charlas. El color de la etiqueta ya
     está arriba, en la cabeza de la columna: repetirlo en cada tarjeta de la
     columna no agrega nada y le saca el lugar al galón. */
  border-left: 3px solid transparent;
  border-radius: 8px;
  padding: 8px 10px;
  cursor: grab;
}

.lead-tarjeta:hover { background: var(--superficie); border-color: var(--dorado); }

/* Mientras se la lleva. Se deja ver dónde estaba —no se esconde— para que el
   hueco no se cierre de golpe y la lista salte. */
.lead-tarjeta.llevando { opacity: 0.4; cursor: grabbing; }

/* La que espera respuesta, con el mismo galón que en la lista de charlas: es lo
   único del tablero que pide algo ahora. */
.lead-tarjeta.esperando { border-left-color: var(--anulado); }

.lead-tarjeta.cerrada { opacity: 0.65; }

.lead-arriba {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.lead-arriba strong {
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-arriba small { flex: none; font-size: 10.5px; color: var(--texto-tenue); }

/* Lo último que se dijo, en dos renglones. Es lo que hace que la tarjeta se
   entienda sin abrirla; en uno solo se corta justo donde empieza el sentido. */
.lead-dijo {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--texto-tenue);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lead-dijo em { color: var(--rotulo); font-style: normal; }

.lead-abajo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

/* La columna que se agrega. Es un botón con la forma de una columna vacía:
   dibujado como un botón suelto al final quedaba flotando sin decir que lo que
   crea es una columna más. */
.lead-nueva {
  align-items: center;
  justify-content: center;
  min-height: 90px;
  border-style: dashed;
  color: var(--texto-tenue);
  font-size: 12.5px;
  cursor: pointer;
}

.lead-nueva:hover { border-color: var(--dorado); color: var(--dorado); }

/* El renglón de arriba: la explicación toma el ancho que sobra y el interruptor
   se va contra la derecha, como en Inicio. */
.lead-porque { flex: 1; min-width: 260px; max-width: 620px; }

/* En un teléfono no hay arrastre ni lugar para tres columnas: se apilan y cada
   una crece con lo suyo. El cambio de etiqueta se hace adentro de la charla. */
@media (max-width: 900px) {
  .lead-tablero { flex-direction: column; overflow-x: visible; }
  .lead-columna { flex: none; width: 100%; }
  .lead-pila { max-height: none; }
  .lead-tarjeta { cursor: pointer; }
}


/* ---- Las acciones de una etiqueta ----

   Tres campos en un renglón: cuándo, qué, y con qué. En grilla y no en flex
   porque los tres tienen que quedar alineados de un renglón al otro —si no, con
   un correo largo arriba y un motivo corto abajo, las cruces bailan. */
/* Cuándo, qué, y con qué. Los dos primeros tienen que poder LEERSE enteros
   —«Avisar por correo» entraba como «Avisar por corre»—, y el que cede es el
   del valor: un correo o un motivo se siguen leyendo recortados, y además se
   ven enteros al pararse encima. */
.et-accion {
  display: grid;
  grid-template-columns: minmax(0, 130px) minmax(0, 210px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

/* Adentro del diálogo los campos vienen con el margen de abajo de todos los
   campos del sistema, y acá van en renglón: el aire lo pone la grilla. */
.et-accion select,
.et-accion input { margin: 0; min-width: 0; }

/* La acción que no lleva campo —prender o apagar el asistente— termina la
   frase con texto en vez de dejar un hueco. */
.et-sin-campo { color: var(--texto-tenue); font-size: 12.5px; }

/* Un boton que se ve como los campos de al lado: adentro tiene el rotulo y el
   chevron, y abre el menu del sistema en vez del desplegable del navegador. */
.et-que {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
  padding: 11px 13px;
  background: var(--negro);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  color: var(--texto);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.et-que:hover { border-color: var(--dorado); }
.et-que span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.et-que .icono-chevron { flex: none; width: 12px; }

.et-quitar {
  border: 0;
  background: none;
  color: var(--texto-tenue);
  font-size: 15px;
  line-height: 1;
  padding: 4px 6px;
  cursor: pointer;
}

.et-quitar:hover { color: var(--anulado); }

/* Lo que hace la etiqueta, abajo de su nombre en la lista. En renglón propio:
   al lado del nombre, con dos acciones, la columna se estiraba y le comía el
   lugar al criterio, que es lo que hay que leer. */
.et-hace {
  display: block;
  margin-top: 4px;
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--texto-tenue);
}

/* ---- Los seguimientos (CRM → Seguimientos) ----

   Los campos que van en renglón —un número y su unidad, dos horas, «insiste N
   veces y cada vez espera M»— dentro de un diálogo donde todo lo demás va
   apilado. En flex y no en grid: son de anchos distintos y lo que importa es
   que queden pegados y en la misma línea, no alineados entre sí. */
/* UN SOLO AIRE ENTRE TODO LO QUE HAY EN UN FORMULARIO DE MODAL.

   Cada pieza traia el suyo —los campos 18 px abajo, las secciones 20 arriba, el
   `.campo-modal` 12 mas— y sumados daban saltos distintos segun que hubiera
   arriba y abajo: mucho aire entre un campo y un recuadro, poco entre dos
   recuadros seguidos. Se los apaga a todos y el unico que separa es el `gap`
   del contenedor, que es igual entre cualesquiera dos vecinos. */
.formulario-modal { display: flex; flex-direction: column; gap: 16px; }

.formulario-modal > * { margin-top: 0; margin-bottom: 0; }

.formulario-modal input,
.formulario-modal select,
.formulario-modal textarea { margin-bottom: 0; }

.formulario-modal .campo-modal { margin-top: 0; }

/* Un `textarea` es inline: adentro de su caja arrastra el descendente de la
   linea y deja unos pixeles muertos abajo que rompen el ritmo. En bloque, no. */
.formulario-modal textarea,
.formulario-modal input,
.formulario-modal select { display: block; }

/* Salvo los que van en fila, que son items de un flex o de una grilla. */
.formulario-modal .sg-espera > *,
.formulario-modal .sg-dias > *,
.formulario-modal .et-accion > * { display: revert; }

/* Una parte del formulario que se prende y se apaga: el horario permitido, la
   insistencia. Apagada no vale «vacía» —el barrido igual necesita un valor—,
   sino «sin límite»: todo el día, o una sola vez. Encerrarla en su recuadro
   deja claro hasta dónde llega lo que apaga el interruptor. */
.sg-seccion {
  padding: 14px 16px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie2);
}

/* El nombre de la sección a la izquierda y su interruptor contra el borde
   derecho, en el mismo renglón: el interruptor manda sobre todo lo que está
   abajo, así que va arriba de todo y no adentro, mezclado con los campos. */
.sg-seccion-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sg-seccion-cabeza strong { font-size: 13px; font-weight: 600; }

.sg-seccion-cuerpo { margin-top: 8px; }
.sg-seccion-cuerpo > .campo-modal:first-child { margin-top: 10px; }

/* Dos campos cortos en el mismo renglón, que se apilan cuando no entran. */
.sg-dos {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.sg-dos > .campo-modal { flex: 1 1 260px; min-width: 0; }

/* Cuándo sale cada mensaje, con los números puestos arriba. */
.sg-plan { margin-top: 14px; }

.sg-plan-lista {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sg-plan-lista li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
}

.sg-plan-lista small { margin-left: auto; color: var(--texto-tenue); font-size: 12px; }

.sg-plan-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--dorado-suave);
  color: var(--dorado-fuerte);
  font-size: 11px;
  font-weight: 600;
}

.sg-espera {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.sg-espera input,
.sg-espera select { margin: 0; width: auto; min-width: 80px; }
.sg-espera input[type="number"] { width: 78px; }

/* Las palabras sueltas entre campos («a», «veces más»): son parte de la frase,
   no rótulos, así que van en el tono del texto tenue y sin peso. */
.sg-a { font-size: 12.5px; color: var(--texto-tenue); }

/* Los siete días, como píldoras que se prenden y se apagan.

   Eran siete casillas con su nombre al lado: en un renglón, el tilde de un día
   quedaba pegado al nombre del anterior y había que leer con cuidado cuál
   estaba marcado. La píldora se lee de un vistazo —prendida es dorada, apagada
   es gris— y el blanco para apretar es el día entero y no un cuadradito de doce
   píxeles. */
.sg-dias {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.sg-dia {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  padding: 7px 12px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--superficie2);
  color: var(--texto-tenue);
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

/* El casillero sigue estando —el teclado y los lectores de pantalla lo
   necesitan—, pero no se dibuja: el interruptor es la píldora entera. */
.sg-dia input { position: absolute; width: 0; height: 0; margin: 0; opacity: 0; }

.sg-dia:hover { border-color: var(--dorado); color: var(--texto); }

.sg-dia:has(input:checked) {
  background: var(--dorado);
  border-color: var(--dorado);
  color: var(--negro);
  font-weight: 600;
}

.sg-dia:has(input:focus-visible) { outline: 2px solid var(--dorado); outline-offset: 2px; }

/* Lo que los seguimientos escribieron, para leerlo antes de encenderlos. Cada
   uno en su tarjeta y no en una tabla: lo que hay que leer es el mensaje
   entero, y en una celda de tabla el texto largo rompe el ancho de todo. */
.seg-escritos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.seg-escrito {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 12px 14px;
}

.seg-escrito-arriba {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.seg-escrito-arriba small { font-size: 11px; color: var(--texto-tenue); }
.seg-escrito-arriba small.en-verde { color: var(--atendido); }

/* El mensaje, con los saltos de línea que escribió el asistente: es como lo va
   a leer el paciente en el teléfono. */
.seg-texto {
  margin: 0 0 6px;
  font-size: 12.5px;
  line-height: 1.5;
  white-space: pre-wrap;
}

/* Un título en el medio de la pantalla, entre dos secciones. */
.titulo-suelto { margin: 26px 0 4px; font-size: 14px; }

/* ------------------------------------------------------------- ver como
   El «ver como» del superadministrador (migración 486): la franja que
   recuerda el disfraz y la lista para elegirlo. En dorado a propósito:
   mirando la agenda de otro es fácil olvidarse de que uno no es uno. */

.aviso-ver-como {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 8px 18px;
  background: var(--dorado-suave);
  border-bottom: 1px solid var(--dorado);
  font-size: 14px;
}

.lista-ver-como {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: min(420px, 55vh);
  overflow: auto;
  margin-top: 16px;
}

.opcion-ver-como {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  background: none;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  color: var(--texto);
  text-align: left;
  cursor: pointer;
}

.opcion-ver-como:hover {
  border-color: var(--dorado);
  background: var(--dorado-suave);
}

.opcion-ver-como-quien {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.opcion-ver-como-quien small { color: var(--texto-tenue); }

/* ---------------------------------------------------------- agenda en lista
   La otra manera de dibujar la agenda: cada día con sus turnos uno abajo del
   otro, como tarjetas. La grilla de horarios es del calendario; acá el turno
   se lee entero —hora, paciente, motivo, estado— sin globos ni carriles. */

#agenda.lista {
  max-width: 860px;
  margin: 0 auto;
  padding: 4px 18px 40px;
}

.lista-dia { margin-top: 16px; }
.lista-dia.oculto { display: none; }

/* El título queda pegado arriba mientras se scrollea por su día: siempre se
   sabe de qué día es lo que se está mirando, y el día siguiente lo empuja al
   llegar —eso lo hace `sticky` solo, porque cada título vive en su sección—.
   Es una tarjeta como las de los turnos, para que se lea como el encabezado
   del día y no como un texto suelto, y con fondo pleno las tarjetas pasan por
   atrás sin leerse a través. Y es un botón: pliega y despliega el día. */
.lista-dia-titulo {
  position: sticky;
  /* Debajo de la barra, que también es pegajosa y mide 58px: con `top: 0`
     el título se metía atrás de ella y no se veía. */
  top: 58px;
  z-index: 3;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 8px;
  padding: 11px 14px;
  background: var(--carbon);
  border-radius: var(--radio);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

[data-tema="claro"] .lista-dia-titulo {
  background: var(--turno);
  box-shadow: var(--sombra);
}

/* La flecha del pliegue: LA MISMA de todos los desplegables del sitio. Mira
   para abajo con el día abierto y para el costado con el día plegado. */
.lista-plegar {
  display: inline-block;
  width: 12px;
  height: 8px;
  margin-left: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.6 1.8 6 6.2 10.4 1.8' fill='none' stroke='%238a8a8a' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 12px 8px;
  transition: transform 0.15s;
}

[data-tema="claro"] .lista-plegar { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.6 1.8 6 6.2 10.4 1.8' fill='none' stroke='%236a6a72' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

.lista-dia.plegada .lista-plegar { transform: rotate(-90deg); }
.lista-dia.plegada .turno-lista { display: none; }

.lista-dia-titulo small { color: var(--texto-tenue); font-weight: 400; }
.lista-dia-titulo .dia-numero { font-size: 19px; }
.lista-dia.es-hoy .lista-dia-titulo { color: var(--dorado-fuerte); }

/* La tarjeta hereda de `.turno` el fondo, la franja del motivo y el hover;
   acá sólo se acomoda en cuatro columnas: cuándo, quién, el plan con su
   comentario —en el espacio libre del medio, para que la tarjeta nunca pase
   de dos renglones— y cómo. */
.turno-lista {
  display: grid;
  grid-template-columns: 118px minmax(200px, 1fr) 1fr auto;
  gap: 4px 16px;
  align-items: center;
  padding: 10px 14px;
}

.turno-lista + .turno-lista { margin-top: 8px; }

.lista-cuando {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lista-cuando small { color: var(--texto-tenue); }

.lista-que {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.lista-paciente { font-weight: 500; }
.lista-motivo { color: var(--texto-tenue); }

/* El plan al que pertenece el turno, sólo para leerlo: en dorado apagado
   para distinguirlo del motivo, que también va en gris. Cambiarle el plan
   sigue siendo cosa del cartel. */
.lista-plan { color: var(--dorado); }

/* La columna del medio: el plan arriba y el comentario abajo, cada uno en un
   renglón que se corta con puntos suspensivos para no estirar la tarjeta. */
.lista-extra {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.lista-extra small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lista-nota {
  color: var(--texto-tenue);
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lista-como {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  text-align: right;
}

.lista-como small { color: var(--texto-tenue); }

.lista-estado {
  font-size: 12px;
  color: var(--texto-tenue);
}

/* Cuando el chip cambia el estado —quien maneja la agenda—, que se note. */
.lista-estado[data-cambiar-estado] { cursor: pointer; }
.lista-estado[data-cambiar-estado]:hover { text-decoration: underline; }

.lista-estado.pintado {
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 500;
}

/* En angosto, el plan, el comentario, el estado y el celular bajan abajo
   del paciente: las cuatro columnas no entran. */
@media (max-width: 640px) {
  .turno-lista { grid-template-columns: 96px 1fr; }
  .lista-extra { grid-column: 1 / -1; }
  .lista-como { grid-column: 1 / -1; flex-direction: row; align-items: center; }
}

/* El botón de la vista de la agenda se despliega, y lo dice con LA MISMA
   flecha que todos los desplegables del sitio —la de los `select` y la del
   filtro de profesionales—: mismo dibujo, mismo tamaño, mismos colores. */
#ir-hoy {
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 12px 8px;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.6 1.8 6 6.2 10.4 1.8' fill='none' stroke='%238a8a8a' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

[data-tema="claro"] #ir-hoy { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.6 1.8 6 6.2 10.4 1.8' fill='none' stroke='%236a6a72' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* La opción del menú que ya está puesta, en dorado como los botones. */
.menu a.puesto { color: var(--dorado); font-weight: 600; }

/* ------------------------------------------------------ íconos de los menús
   Todos los desplegables —Administración, la cuenta, la ruedita, la
   sucursal— llevan un ícono a la izquierda de cada opción: se encuentra la
   opción sin leerlas todas. Trazo fino sobre el color del texto apagado. */

.menu a.con-icono {
  display: flex;
  align-items: center;
  gap: 11px;
}

.icono-menu {
  flex: none;
  display: inline-flex;
}

.icono-menu svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--texto-tenue);
}

.menu a.con-icono:hover .icono-menu svg,
.menu a.con-icono.puesto .icono-menu svg { color: inherit; }

/* --------------------------------------------------------- sucursal actual
   El nombre del local sobre el que se está trabajando, al final de la barra
   de secciones. Para quien administra locales es también la puerta a la
   pantalla de Sucursales; para el resto, un cartel. */

.barra-sucursal {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  max-width: 190px;
  padding: 7px 12px;
  background: none;
  border: none;
  border-radius: 999px;
  color: var(--texto-tenue);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.barra-sucursal svg {
  width: 15px;
  height: 15px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.barra-sucursal span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.barra-sucursal:hover:not(:disabled) { color: var(--dorado); background: var(--dorado-suave); }
.barra-sucursal:disabled { cursor: default; }

/* La etiqueta dorada: el estado de cita propio, frente al del sistema. */
.etiqueta.dorado { background: var(--dorado-suave); color: var(--dorado); }

/* Una solapa que navega (a otra pantalla de la misma sección) se ve igual
   que las demás: sin subrayado y con el color de solapa, no el de enlace. */
a.pestana { text-decoration: none; display: inline-block; }

/* La rayita entre «adónde ir» y las vistas de esta pantalla. */
.pestanas-separador {
  width: 1px;
  align-self: stretch;
  margin: 6px 6px 5px;
  background: var(--borde);
}