/* +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;
}

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;
}

/* 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,
.fila-motivo 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;
}

/* 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; }

/* 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; }

/* 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 del listado de precios, 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,
.especialidad-titulo::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 permiso que todavía no controla nada. Se puede marcar igual —así queda
   listo para cuando esa parte exista— pero no se promete lo que no hace. */
.etiqueta-pendiente {
  padding: 2px 8px;
  border: 1px dashed var(--borde);
  border-radius: 20px;
  color: var(--texto-tenue);
  cursor: help;
  font-size: 10.5px;
}

/* Lo que se cambió a mano: se ve que no viene del rol. */
.fila-permiso.a-mano .interruptor > span::after {
  content: ' · a mano';
  color: var(--dorado);
  font-size: 11px;
}

/* 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; }

.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: el listado de precios 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; }

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

/* Cada especialidad con sus motivos de atención. */
/* Cada especialidad se abre y se cierra. Son quince y algunas tienen trece
   motivos: abiertas todas de entrada no hay pantalla que alcance. */
.especialidad { margin-bottom: 10px; padding: 0; overflow: hidden; }
.especialidad.apagada { opacity: 0.55; }

.especialidad-titulo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  cursor: pointer;
  list-style: none;
}

.especialidad-titulo::-webkit-details-marker { display: none; }
.especialidad-titulo:hover { background: var(--dorado-suave); }

.especialidad-titulo::after {
  order: 9;
  color: var(--texto-tenue);
  transition: transform 0.15s;
}

.especialidad[open] > .especialidad-titulo::after { transform: rotate(0deg); }
.especialidad[open] > .especialidad-titulo { border-bottom: 1px solid var(--borde); }

.especialidad-titulo small { color: var(--texto-tenue); font-size: 11.5px; }
.especialidad-acciones { margin-left: auto; display: flex; gap: 6px; }

/* Los motivos, uno abajo del otro: así se comparan los colores de un vistazo,
   que es para lo que están. */
.motivos-lista { padding: 6px 16px 12px; }

.fila-motivo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--borde);
  font-size: 13px;
}

.fila-motivo:last-child { border-bottom: 0; }

/* 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;
}

.fila-motivo select { width: auto; margin: 0; padding: 4px 24px 4px 8px; font-size: 11.5px; }

/* 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;
}

.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 {
  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; }

/* 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); }

/* 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 { 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; }

.bloque-config h3 { margin: 0 0 4px; }
.bloque-config .nota-suelta { margin: 0 0 18px; }
.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;
  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;
}

/* 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. */
.titulo-seccion strong { font-size: 15px; font-weight: 600; }
.titulo-seccion small { font-size: 11px; color: var(--texto-tenue); }

/* 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: 7px;
  color: var(--texto-tenue);
  font-size: 13px;
}

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

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

.tarjeta strong { display: block; font-size: 19px; color: var(--dorado); font-weight: 500; }
.tarjeta small { color: var(--texto-tenue); font-size: 11px; }
.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: 10px 16px 12px;
  cursor: pointer;
  white-space: nowrap;
  font-size: 13.5px;
}

/* 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: 12px 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: 6px 14px;
  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; }

.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. */
.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);
}

.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)); }

/* 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;
}

/* 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); }
.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: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--dorado-suave);
  border: 1px solid var(--dorado-fuerte);
  color: var(--dorado);
  display: grid;
  place-items: center;
  font-size: 19px;
  font-weight: 500;
  flex-shrink: 0;
}

.ficha-identidad { display: flex; gap: 16px; align-items: center; }

.ficha-id {
  color: var(--texto-tenue);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ficha-cabeza { padding: 18px 28px 14px; border-bottom: none; }
.ficha-cabeza h1 { font-size: 22px; }

.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%); }

/* --------------------------------------------- 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);
}

.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;
}

.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 el listado de precios 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);
}

/* ------------------------------------- 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; }
.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; }


/* ------------------------------------ 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. */
.puntos.rueda {
  display: inline-flex;
  align-items: center;
  padding: 0 2px;
  line-height: 0;
}

.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;
}

.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: 10px 18px;
  font-size: 13px;
  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;
}

.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); }

/* 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%; }

/* 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. */
.tabla-crm thead th:first-child { width: 20%; }
.tabla-crm thead th:nth-child(2) { width: 30%; }

/* «Quién se ocupa» tiene que entrar entero. Sin ancho propio, el desplegable
   quedaba en «sin asi...» con puntos suspensivos, que es exactamente el dato que
   la columna viene a dar. */
.tabla-crm thead th:nth-child(5) { width: 150px; }
.tabla-crm select.campo-fila { text-overflow: ellipsis; }

/* 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; }

/* La ruedita de una sección: un botón de la barra de acciones que en vez de
   texto lleva el engranaje. Alto y forma los pone `.boton.angosto`; acá sólo se
   ajusta el ancho, que sin texto se iba a cero. */
.ruedita-seccion {
  width: 38px;
  padding-left: 0;
  padding-right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ruedita-seccion svg { width: 16px; height: 16px; }

/* 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); }
.fila-anulada td:nth-child(4) { 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; }

/* ------------------------------------------------ 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; }

/* ------------------------------------------- listado de precios (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; }

/* 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);
}

/* --- 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;
}

.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 {
  max-width: none;
  margin-block: 10px 20px;
}

/* --- 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 { 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;
}

/* 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);
}

/* 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;
}

/* ------------------------------------ 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; }

/* 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 del listado de precios:
   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;
}

/* 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. */
.ajustes.lateral-bot.plegado { grid-template-columns: 62px minmax(0, 1fr); }

.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. */
  padding: 13px 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.

     176 = las dos barras de 64 + los 24 de aire de `.contenido` arriba y abajo. */
  height: calc(100vh - 176px);
  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; }
}



/* ---- 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); }

.et-colores { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

.et-color {
  width: 26px;
  height: 26px;
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
}

/* 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;
}

.ia-rango-libre {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--texto-tenue);
}

/* Los campos de fecha traen los márgenes de formulario, que acá abrirían un
   hueco abajo de la fila. */
.ia-rango-libre input[type="date"] {
  width: auto;
  margin: 0;
  padding: 7px 10px;
}

.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;
}

/* ---- 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: la columna sobra de alto, y apretados se leían como
     un bloque en vez de como una lista. El de la derecha deja lugar para la
     flechita del desplegable y para cuántos esperan. */
  padding: 13px 30px 13px 12px;
  margin-bottom: 10px;
}

.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. */
.fila-apagada td { opacity: 0.55; }

/* 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;
}

/* ------------------------------------------------ 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%); }

/* 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; }

.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); }

/* ======================================================= 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; }

/* ---------------------------------------------- plantilla fotográfica */

.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; }
.pf-acciones { display: flex; align-items: center; gap: 10px; }

.pf-grilla { padding: 14px; }
.pf-fila {
  display: grid;
  /* Auto-fit y no un número fijo de columnas: la fila del rostro tiene cuatro
     huecos y la de las oclusales dos, y las dos tienen que llenar el ancho. */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}
.pf-fila:last-child { margin-bottom: 0; }

.pf-hueco {
  margin: 0;
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--superficie2);
  border: 1px dashed var(--borde);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.pf-hueco.con-foto { border-style: solid; }
.pf-hueco:hover { border-color: var(--dorado); }
.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. */
.pf-linea {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 14px 2px 4px;
  margin-top: 4px;
  border-top: 1px solid var(--borde);
}
.pf-punto {
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  color: var(--texto);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 96px;
  flex: none;
}
.pf-punto:hover { background: var(--dorado-suave); }
.pf-punto.activa { border-color: var(--dorado); background: var(--dorado-suave); }
.pf-punto small { font-size: 11px; }
.pf-bolita {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--borde);
  margin-bottom: 2px;
}
.pf-punto.activa .pf-bolita { background: var(--dorado-fuerte); }

/* 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); }

.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; }
.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;
}

.ia-escribir {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  margin-top: 12px;
}
.ia-escribir textarea, .ia-escribir input[type="text"] { flex: 1; resize: vertical; }

.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 */
.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;
}
.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; }
.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; 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.
   */
  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); }

/* 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; }

/* Los pasos del guion, arriba del taller */
.ia-pasos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
}

/* 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; }

/* 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. */
.et-accion {
  display: grid;
  grid-template-columns: minmax(0, 100px) minmax(0, 150px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  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; }

.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í. */
.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 casillas en renglón. */
.sg-dias {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.sg-dia {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--texto-tenue);
  cursor: pointer;
}

.sg-dia input { margin: 0; }

/* 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; }