/* Piezas reutilizables. Miden y se separan con los tokens de base.css: un
   componente nuevo no elige tamaños propios. */

/* --- Texto de pantalla ----------------------------------------------------- */

.subtitulo { color: var(--gris); margin: 0 0 1.5rem; }

.nota { color: var(--gris); margin: 0 0 1rem; }
.tarjeta .nota:last-child { margin-bottom: 0; }

/* Encabezado de una pantalla: el título, la línea de datos y las acciones.
   Arranca a la misma altura que el nombre en la ficha del residente. */
.encabezado-pantalla {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: 1rem;
  margin: calc(1.5rem - var(--contenido-y)) 0 1.5rem;
}
.encabezado-pantalla h1 { margin: 0 0 0.5rem; }
.encabezado-texto { min-width: 0; }
.encabezado-derecha { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.encabezado-derecha .aviso-pantalla { margin-bottom: 0; }
/* La tira comparte renglón con el título. El contenedor tiene que crecer: si no,
   se queda del ancho de una tarjeta y las apila en columna. Ahí caben más
   apretadas y con la cifra un escalón abajo de la que lleva la One Page. */
.encabezado-pantalla:has(.tira-indicadores) { align-items: stretch; }
/* Con base propia, la tira baja a su renglón cuando el título y ella ya no caben
   juntos, en vez de apretarse hasta ser ilegible. La base es lo que miden cinco
   tarjetas al mínimo: si no cabe eso, bajar entera sale mejor que quedarse
   arriba en dos columnas y tres renglones. */
/* Sin min-width en cero se queda del ancho de las cinco: el tope de la tira
   le da un máximo definido, y con él la rejilla calcula su ancho mínimo como
   si cupieran todas, así que en un teléfono se sale de la pantalla. */
.encabezado-derecha:has(.tira-indicadores) {
  flex: 1 1 40rem; min-width: 0; align-items: stretch;
  justify-content: flex-end;
}
.encabezado-derecha .tira-indicadores {
  flex: 1; min-width: 0;
  /* El tope va al ancho de la tira, no al de la pista: «auto-fit» cuenta las
     columnas con el máximo de la pista, así que topándola en 9rem solo entran
     cuatro y la quinta se va sola al renglón de abajo. Con la pista libre
     entran las cinco y se reparten lo que haya; el tope de la tira las deja del
     mismo ancho de siempre cuando sobra espacio, que es lo que evita que una
     cifra de dos dígitos quede perdida en medio de la tarjeta. */
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  max-width: calc(5 * 9rem + 4 * 0.75rem);
}

.datos-encabezado {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
  margin: 0;
  color: var(--gris);
}
.datos-encabezado .separador { color: var(--linea); }

/* La tarjeta se despega del fondo con su línea, como el marco de las listas:
   sin sombra, para que todo contenedor en la página se vea igual. */
.tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--linea); border-radius: var(--radio-tarjeta);
  padding: 1.5rem;
}

/* --- Botones --------------------------------------------------------------- */
.formulario-boton { margin: 0; }

.boton, .boton-secundario, .boton-borde {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: var(--campo-y) var(--campo-x);
  border-radius: var(--radio-control);
  font: inherit; font-weight: 500; line-height: var(--interlinea-control);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transicion), border-color var(--transicion), color var(--transicion);
}
/* Varios botones son enlaces: sin esto les llega el subrayado de a:hover. */
.boton:hover, .boton-secundario:hover, .boton-borde:hover { text-decoration: none; }
.boton svg, .boton-secundario svg, .boton-borde svg { width: var(--icono); height: var(--icono); flex: none; }

/* Un botón apagado se ve apagado: si nada cambia al pasar el puntero, tampoco
   cambia el color ni el cursor. */
.boton:disabled, .boton-secundario:disabled, .boton-borde:disabled { opacity: .5; cursor: default; }
.boton:disabled:hover { background: var(--acento); border-color: var(--acento); }
.boton-secundario:disabled:hover { background: #fff; }
.boton-borde:disabled:hover { background: var(--tarjeta); }

.boton {
  border: 1px solid var(--acento);
  background: var(--acento);
  color: #fff;
}
.boton:hover { background: var(--acento-fuerte); border-color: var(--acento-fuerte); }

.boton-secundario {
  border: 1px solid var(--linea);
  background: #fff;
  color: var(--tinta);
}
.boton-secundario:hover { background: var(--fondo); }

/* Acción secundaria que convive con una principal, como «Quitar filtros». */
.boton-borde {
  border: 1px solid var(--acento);
  background: var(--tarjeta);
  color: var(--acento);
}
.boton-borde:hover { background: var(--acento-tenue); }

.boton-chico { padding: 5.25px 8.75px; font-size: var(--texto-menor); }

/* Solo el ícono, con su nombre en aria-label: cuadrado, del alto de un botón. */
.boton-de-icono { padding: var(--campo-y); }
.boton-de-icono:disabled { color: var(--gris-claro); cursor: default; background: var(--tarjeta); }

/* --- Ventana de captura ----------------------------------------------------
   Es un <dialog>: el navegador pone el fondo, atrapa el foco y cierra con
   Escape. Sin líneas divisorias: separa el aire. */
.dialogo {
  width: min(32rem, calc(100vw - 2rem));
  padding: 0;
  border: 1px solid var(--linea);
  border-radius: var(--radio-tarjeta);
  background: var(--tarjeta);
  color: var(--tinta);
  box-shadow: var(--sombra-ventana);
}
.dialogo::backdrop { background: rgb(2 24 56 / 0.45); }

.dialogo-cabeza {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 1.25rem;
}
.dialogo-cabeza h2 { margin: 0; }

.cerrar-dialogo {
  flex: none;
  width: 2rem; height: 2rem;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--gris);
  font-size: var(--texto-titulo); line-height: 1;
  cursor: pointer;
  transition: background var(--transicion);
}
.cerrar-dialogo:hover { background: var(--fondo); }

/* El cuerpo manda el espaciado: cada bloque se separa igual y las zonas
   vacías no dejan hueco mientras nadie ha buscado nada. */
.dialogo-cuerpo {
  display: flex; flex-direction: column; gap: 1rem;
  padding: 0 1.25rem;
}
.dialogo-cuerpo > :empty { display: none; }

.dialogo-pie {
  display: flex; justify-content: flex-end; gap: 0.5rem;
  padding: 1.25rem;
}

/* --- Campos ----------------------------------------------------------------
   Cómo se ve un campo se decide UNA vez, aquí, y la lista de abajo dice qué
   cuenta como campo. Algunos son botones que abren un panel en vez de recibir
   texto, pero para quien mira son lo mismo y tienen que medir lo mismo. */
input[type="text"],
input[type="search"],
input[type="email"],
textarea,
input[type="number"],
input[type="time"],
.lista-desplegable,
.campo-de-fecha {
  padding: var(--campo-y) var(--campo-x);
  border: 1px solid var(--linea);
  border-radius: var(--radio-control);
  background: var(--tarjeta);
  color: var(--tinta);
  font: inherit; line-height: var(--interlinea-control);
  box-shadow: var(--sombra-campo);
  transition: border-color var(--transicion);
}

/* El texto abierto crece con lo que se escribe, desde dos renglones, y nunca
   esconde parte de lo escrito. Donde el navegador no sabe hacerlo, se queda en
   las filas que pide el campo y se estira a mano. */
textarea { field-sizing: content; min-block-size: calc(2lh + 2 * var(--campo-y) + 2px); resize: vertical; }

input[type="text"]:hover,
input[type="search"]:hover,
input[type="email"]:hover,
textarea:hover,
input[type="number"]:hover,
input[type="time"]:hover,
.lista-desplegable:hover,
.campo-de-fecha:hover { border-color: var(--gris-claro); }
/* Un campo no lleva anillo: al recibir el foco se pone azul el borde que ya
   tiene. El anillo es para los botones. */
input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
textarea:focus,
input[type="number"]:focus,
input[type="time"]:focus,
.lista-desplegable:focus-visible,
.campo-de-fecha:focus-visible { border-color: var(--acento); outline: none; }

.campo { display: flex; flex-direction: column; gap: 0.5rem; }
.etiqueta { color: var(--tinta); }
.campo input,
.campo textarea,
.campo > .lista-con-panel > .lista-desplegable,
.campo > .selector-de-fecha > .campo-de-fecha { width: 100%; }

.campo-con-casilla { display: flex; align-items: center; gap: 7px; }

.campo-con-boton { display: flex; gap: 0.5rem; }
.campo-con-boton input { flex: 1; min-width: 0; }
.campo-con-boton .boton-secundario { flex: none; }

/* Inicio y fin de un periodo, lado a lado; en el teléfono, uno bajo otro. */
.par-de-fechas { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 40rem) {
  .par-de-fechas { grid-template-columns: 1fr; }
}

/* --- Tarjeta de Configuración ---------------------------------------------
   Aquí y no junto a la pantalla: la dibujan también las pestañas que son
   componentes propios, y la hoja de la pantalla no las alcanza. */

.bloque-de-configuracion { margin-top: 1rem; }

/* El título y su explicación a la izquierda; lo que se hace con el bloque, a la derecha. */
.cabeza-del-bloque { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.5rem 1rem; }
.acciones-del-bloque { display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* Al pie de lo que se edita: agregar a la izquierda; cancelar y guardar, a la derecha. */
.acciones-del-formulario { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 1rem; }

/* Todos los renglones miden lo mismo, encabezado incluido: el de las columnas
   no trae campo y si no se le fija el alto queda más bajo que los demás. */
.bloque-de-configuracion .tabla-con-cuadricula th,
.bloque-de-configuracion .tabla-con-cuadricula td { height: 3.5rem; }

/* La tarjeta cabe en la pantalla y lo que se desplaza es la rejilla, para que
   el botón de guardar no se vaya. Se acota la tarjeta y no la tabla: así cada
   pestaña descuenta sola lo que trae debajo, sin que la hoja tenga que saber
   cuánto mide. */
.bloque-de-configuracion:has(.marco-de-tabla) {
  display: flex; flex-direction: column;
  max-height: max(20rem, calc(100vh - 18rem));
}
.bloque-de-configuracion > * { flex: none; }
.bloque-de-configuracion > .marco-de-tabla { flex: 0 1 auto; min-height: 12rem; }
/* En columna, un hijo se estira a lo ancho de la tarjeta; el botón mide lo que
   dice. */
.bloque-de-configuracion > .boton { align-self: flex-start; }

/* --- Buscador con ícono -------------------------------------------------- */
.buscador { position: relative; display: flex; align-items: center; width: 16rem; max-width: 100%; }
.buscador svg {
  position: absolute; left: var(--campo-x);
  width: var(--icono); height: var(--icono);
  color: var(--gris-claro); pointer-events: none;
}
/* Lo único suyo es el hueco para el ícono. */
.buscador input {
  width: 100%;
  padding-left: calc(var(--campo-x) * 2 + var(--icono));
}

/* --- Selector de opciones --------------------------------------------------
   Radios dentro de etiquetas: el navegador lleva la elección y el teclado;
   la hoja solo pinta la opción marcada. Siempre hay una elegida. */
.selector-de-opciones {
  display: inline-flex; gap: 3.5px;
  padding: 3.5px;
  border-radius: var(--radio-control);
  background: var(--fondo);
}
.selector-de-opciones label {
  position: relative;
  padding: 3.5px var(--campo-x);
  border-radius: var(--radio-control);
  color: var(--gris); font-weight: 500; white-space: nowrap;
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion);
}
.selector-de-opciones label:hover { color: var(--tinta); }
.selector-de-opciones label:has(:checked) {
  background: var(--tarjeta); color: var(--tinta);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / .02), 0 1px 2px 0 rgb(0 0 0 / .04);
}
.selector-de-opciones label:has(:focus-visible) { outline: 1px solid var(--acento); outline-offset: 2px; }
.selector-de-opciones input { position: absolute; opacity: 0; pointer-events: none; }

/* --- Lista desplegable con casillas ----------------------------------------
   El panel es un popover: el navegador lo cierra al hacer clic fuera o con
   Escape. Se ancla bajo su botón; el nombre del ancla no sale de su
   contenedor, así cada filtro de la pantalla encuentra el suyo. */
.lista-con-panel, .encabezado-con-filtro, .con-ayuda, .selector-de-fecha { anchor-scope: --panel-desplegable; }
.lista-desplegable, .filtro-de-columna, .que-es, .campo-de-fecha { anchor-name: --panel-desplegable; }

.lista-con-panel { display: inline-flex; }
.lista-desplegable {
  display: flex; align-items: center; justify-content: space-between; gap: var(--campo-x);
  min-width: 10.5rem;
  text-align: left;
  cursor: pointer;
}
.lista-desplegable svg { flex: none; width: var(--icono); height: var(--icono); color: var(--gris-claro); }
.sin-eleccion { color: var(--gris-claro); }

.panel-desplegable {
  position: absolute; inset: auto;
  position-anchor: --panel-desplegable;
  top: anchor(bottom); left: anchor(left);
  min-width: anchor-size(width);
  margin: 3px 0 0;
  padding: 3.5px;
  border: 1px solid var(--linea); border-radius: var(--radio-control);
  background: var(--tarjeta); color: var(--tinta);
  box-shadow: var(--sombra-panel);
  /* Una lista larga no se sale de la ventana: se desplaza dentro de su panel,
     y si abajo no cabe, abre hacia arriba. */
  max-height: 18rem; overflow-y: auto;
  position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
}
.panel-desplegable.alineado-a-la-derecha { left: auto; right: anchor(right); }
/* Con botones al pie, lo que corre son las opciones: Limpiar y Aplicar siempre
   a la vista, por larga que sea la lista. */
.panel-de-filtro:popover-open { display: flex; flex-direction: column; overflow: hidden; }
.opciones-del-panel { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.panel-de-filtro .pie-del-panel { flex: none; }

/* Elegir el ciclo académico: lo usan las pantallas que miden contra sus metas. */
.elegir-ciclo { display: flex; align-items: center; gap: 0.5rem; margin: 0; }

/* --- Selector de fecha ------------------------------------------------------
   El botón se ve como cualquier campo; el mes vive en un panel anclado. */
.selector-de-fecha { display: inline-flex; }
.campo-de-fecha { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.campo-de-fecha svg { flex: none; width: var(--icono); height: var(--icono); color: var(--gris-claro); }

/* El mes entero se ve sin desplazar: cabe su renglón más largo de semanas. */
.panel-de-mes { min-width: 20rem; max-height: none; overflow: visible; padding: 7px; }
/* Un solo botón: va a la derecha, no repartido como cuando son dos. */
.panel-de-mes .pie-del-panel { justify-content: flex-end; }

/* Los dos desplegables del mes se reparten lo que dejan las flechas; el ancho
   mínimo que traen de serie no cabe aquí. */
.cabeza-del-mes { display: flex; align-items: center; gap: 3.5px; padding: 3.5px; }
.cabeza-del-mes .lista-con-panel { flex: 1; min-width: 0; }
.cabeza-del-mes .lista-desplegable { width: 100%; min-width: 0; gap: 3.5px; padding-inline: 7px; }
.cabeza-del-mes .lista-desplegable span { overflow: hidden; text-overflow: ellipsis; }
.paso-de-mes {
  display: inline-grid; place-items: center; flex: none;
  width: var(--circulo-en-celda); height: var(--circulo-en-celda);
  border: 0; border-radius: 50%;
  background: transparent; color: var(--gris);
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion);
}
.paso-de-mes:hover:not(:disabled) { background: var(--fondo); color: var(--tinta); }
.paso-de-mes:disabled { color: var(--linea); cursor: default; }
.paso-de-mes svg { width: var(--icono); height: var(--icono); }

/* Siete columnas iguales: los nombres de los días y los días caen en la misma. */
.cuadricula-del-mes { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dia-de-la-semana {
  display: grid; place-items: center;
  height: var(--circulo-en-celda);
  color: var(--gris-claro); font-size: var(--texto-menor); font-weight: 600;
}
.dia-del-mes {
  height: var(--circulo-en-celda);
  border: 0; border-radius: var(--radio-casilla);
  background: transparent; color: var(--tinta);
  font: inherit; line-height: 1;
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion);
}
.dia-del-mes:hover:not(:disabled) { background: var(--fondo); }
.dia-del-mes:disabled { color: var(--linea); cursor: default; }
/* Hoy se marca con el borde; el día elegido, con el relleno. */
.dia-del-mes.es-hoy { box-shadow: inset 0 0 0 1px var(--acento-borde); }
.dia-del-mes.elegido { background: var(--acento); color: #fff; font-weight: 600; }
.dia-del-mes.elegido:hover { background: var(--acento-fuerte); }

/* Una opción del panel cuando se elige una sola: sin casilla, porque el panel se
   cierra al elegir y lo marcado se ve en el botón. */
.opcion-de-lista {
  display: block; width: 100%;
  padding: var(--campo-y) var(--campo-x);
  border: 0; border-radius: var(--radio-casilla);
  background: transparent; color: var(--tinta);
  font: inherit; text-align: left; white-space: nowrap;
  cursor: pointer;
}
.opcion-de-lista:hover { background: var(--fondo); }
.opcion-de-lista.elegida { background: var(--acento-tinte); color: var(--acento-fuerte); font-weight: 600; }

.opcion-con-casilla {
  display: flex; align-items: center; gap: 7px;
  padding: var(--campo-y) var(--campo-x);
  border-radius: var(--radio-casilla);
  white-space: nowrap; cursor: pointer;
}
.opcion-con-casilla:hover { background: var(--fondo); }
.opcion-con-casilla:has(:checked) { background: var(--acento-tinte); color: var(--acento-fuerte); }

.casilla {
  appearance: none; flex: none;
  width: 17.5px; height: 17.5px; margin: 0;
  border: 1px solid var(--linea); border-radius: var(--radio-casilla);
  background: var(--tarjeta) center / 12px no-repeat;
  cursor: pointer;
  transition: background-color var(--transicion), border-color var(--transicion);
}
.casilla:hover { border-color: var(--gris-claro); }
.casilla:checked {
  border-color: var(--acento);
  background-color: var(--acento);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

.pie-del-panel { display: flex; justify-content: space-between; gap: 7px; padding: 7px 7px 3.5px; }

/* --- Tabla con cuadrícula --------------------------------------------------
   La barra de arriba lleva quitar filtros y buscar; cada columna filtrable,
   su embudo, que se rellena mientras filtra. */
.barra-de-tabla {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px;
  border: 1px solid var(--linea); border-bottom: 0;
  border-radius: var(--radio-tarjeta) var(--radio-tarjeta) 0 0;
}
.grupo-de-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10.5px; }

.marco-de-tabla { overflow: auto; scrollbar-width: thin; scrollbar-color: var(--linea) transparent; }
.marco-de-tabla::-webkit-scrollbar { width: 8px; height: 8px; }
.marco-de-tabla::-webkit-scrollbar-track { background: transparent; }
.marco-de-tabla::-webkit-scrollbar-thumb { background: var(--linea); border-radius: 4px; }
.marco-de-tabla::-webkit-scrollbar-thumb:hover { background: var(--gris-claro); }
/* Cada celda pinta sus propias líneas en vez de dejárselas a la tabla: con la
   cuadrícula junta, un encabezado fijo pierde las suyas al correr el contenido. */
.tabla-con-cuadricula { width: 100%; border-collapse: separate; border-spacing: 0; }
.tabla-con-cuadricula th,
.tabla-con-cuadricula td {
  padding: 10.5px 14px;
  border: 0;
  border-right: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  text-align: left; vertical-align: middle;
}
.tabla-con-cuadricula th:first-child,
.tabla-con-cuadricula td:first-child { border-left: 1px solid var(--linea); }
/* Cuando el marco acota el alto, los nombres de columna se quedan arriba. */
.tabla-con-cuadricula thead th {
  position: sticky; top: 0;
  background: var(--tarjeta);
  border-top: 1px solid var(--linea);
}
/* El encabezado pesa lo mismo que la celda; lo que lo separa es su línea. */
.tabla-con-cuadricula th { font-weight: 400; color: var(--tinta); }
/* Un rubro con su desglose debajo: el rubro pesa como encabezado y sus
   partes se meten. Lo leen la tarjeta de objetivos y su pestaña. */
.renglon-de-rubro > :first-child { font-weight: 600; }
.renglon-de-desglose > :first-child { text-indent: 1rem; }
/* Una cifra con su rótulo. Se repiten en la One Page y en la lista, así que
   viven aquí. El color del número dice de qué semáforo habla; sin color es un
   dato que no se juzga, como cuántos son. */
.tira-indicadores { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.75rem; }
.indicador {
  display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
  padding: 1.25rem 1.5rem;
  background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta);
  text-align: center;
}
.indicador-nombre { color: var(--gris); }
.indicador-valor { font-size: var(--texto-pantalla); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--acento); }
.indicador-valor.en-meta { color: var(--correcto); }
.indicador-valor.cumple { color: var(--atencion); }
.indicador-valor.en-riesgo { color: var(--peligro); }
.indicador-comparado { font-size: var(--texto-menor); color: var(--gris); }
/* El nombre de cada eje en un diagrama: el texto menor, en unidades del dibujo.
   El número que lo sustituye en un teléfono, un poco más grande: el lienzo
   cuadrado se agranda menos. */
.rotulo-del-eje { font-size: var(--texto-menor); }
.numero-del-eje { font-size: var(--texto-base); font-weight: 600; }
/* La tira que acompaña a otro contenido cede el protagonismo: la cifra baja un
   escalón y la tarjeta se ciñe a ella. */
.tira-compacta .indicador { gap: 0.125rem; padding: 0.75rem 1rem; justify-content: center; }
.tira-compacta .indicador-valor { font-size: var(--texto-dato); }

/* La tabla sin cuadrícula: un renglón se separa del siguiente con una línea y
   nada más. Sin líneas verticales, lo único que ordena la lectura hacia abajo
   son los nombres de columna, y por eso van en negrita; el marco que la
   contiene pone el contorno. */
.tabla-con-renglones {
  width: 100%; border-collapse: separate; border-spacing: 0;
  /* La celda ciñe su renglón con la interlínea de los controles: así el cuerpo
     del texto es el de siempre sin que la fila crezca. */
  --relleno-de-celda: 14px;
  --interlinea-de-celda: var(--interlinea-control);
  /* Lo que mide una celda del encabezado: los dos rellenos, lo más alto que
     lleva dentro y su línea. Lo más alto no es el texto sino el botón del
     embudo, y de este número cuelga lo que se pegue justo debajo. */
  --alto-del-encabezado: calc(var(--relleno-de-celda) * 2 + var(--circulo-en-celda) + 1px);
}
.tabla-con-renglones th,
.tabla-con-renglones td {
  padding: var(--relleno-de-celda) 17.5px;
  line-height: var(--interlinea-de-celda);
  border: 0; border-bottom: 1px solid var(--linea);
  text-align: left; vertical-align: middle;
}
.tabla-con-renglones thead th {
  position: sticky; top: 0; z-index: 2;
  /* Alto fijo, y el mismo para todas: una celda pegada deja de estirarse al alto
     de su fila, así que las que no llevan embudo se quedarían cortas y por esa
     franja se vería correr el contenido. */
  height: var(--alto-del-encabezado);
  background: var(--tarjeta);
  font-weight: 700; color: var(--tinta);
}
.tabla-con-renglones tbody tr:last-child > * { border-bottom: 0; }
/* Un nombre de columna partido en dos renglones deja su flecha a media altura y
   parece de otro tamaño que las demás. */
.tabla-con-renglones thead th { white-space: nowrap; }
/* Los íconos del encabezado miden lo que su texto. Fijos en 14 px se ven encima
   del rótulo al que pertenecen cuando la tabla usa el cuerpo menor. */
.tabla-con-renglones thead svg { width: 1em; height: 1em; }

/* El contorno de una tabla sin cuadrícula, como el de las listas. */
.marco-con-contorno {
  padding: 0 1rem;
  border: 1px solid var(--linea); border-radius: var(--radio-tarjeta);
  background: var(--tarjeta);
}
/* La malla de rotaciones sigue a su barra, como una lista: juntas son una
   tarjeta, y el paginador va adentro. */
.tabla-a-la-altura {
  padding: 0 1rem;
  border: 1px solid var(--linea); border-top: 0;
  border-radius: 0 0 var(--radio-tarjeta) var(--radio-tarjeta);
  background: var(--tarjeta);
}
.tabla-a-la-altura .paginador { border: 0; border-top: 1px solid var(--linea); }

/* --- Tabla en la que solo corre el cuerpo ----------------------------------
   El marco pone el contorno; el encabezado y el pie no se desplazan. Las tres
   partes reservan el mismo canal para la barra, así las columnas se alinean
   aunque solo la de en medio la muestre. */
.tabla-que-corre {
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  padding: 0 1rem;
  border: 1px solid var(--linea); border-radius: var(--radio-tarjeta);
  background: var(--tarjeta);
}
.tabla-que-corre table { table-layout: fixed; }
.tabla-que-corre .parte-fija { flex: none; overflow: hidden; }
.tabla-que-corre .cuerpo-que-corre { flex: 0 1 auto; min-height: 0; overflow: auto; }
.tabla-que-corre .parte-fija,
.tabla-que-corre .cuerpo-que-corre { scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: var(--linea) transparent; }
.tabla-que-corre thead th { position: static; }
.tabla-que-corre tbody th { font-weight: 400; }
.tabla-que-corre tfoot tr:first-child > * { border-top: 1px solid var(--linea); }
.tabla-que-corre tfoot tr:last-child > * { border-bottom: 0; }
.tabla-que-corre tfoot th { font-weight: 600; text-align: right; }
.tabla-que-corre .no-aplica { color: var(--gris-claro); }
.encabezado-para-lectores {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* El historial de la One Page: consultas, cirugías y tratamientos del periodo. */
.nota-del-historial { flex: none; margin: 0 0 1rem; color: var(--gris); }
.sin-historial { margin: 0; color: var(--gris); }
.tabla-que-corre col.columna-fecha { width: 14%; }
.celda-de-fecha { white-space: nowrap; }

/* --- Lista que corre dentro de la ventana ---------------------------------
   La sección toma el alto que deja el encabezado de la pantalla, que va dentro
   de .cabe-en-la-ventana. */
.seccion-de-la-lista { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* El marco y lo que corre son dos cosas distintas a propósito. El marco pone el
   contorno y guarda el aire; adentro corre la lista. Si el mismo elemento
   hiciera las dos, el último renglón visible quedaría pegado al borde a media
   corrida, y ningún relleno lo evita: el relleno de un contenedor con scroll
   solo se ve al final del recorrido. */
.marco-de-la-lista {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  padding: 0 1rem 1rem;
  border: 1px solid var(--linea); border-top: 0;
  border-radius: 0 0 var(--radio-tarjeta) var(--radio-tarjeta);
  background: var(--tarjeta);
}
.lista-que-corre {
  flex: 1; min-height: 0;
  overflow: auto;
  scrollbar-width: thin; scrollbar-color: var(--linea) transparent;
}
.lista-que-corre::-webkit-scrollbar { width: 8px; height: 8px; }
.lista-que-corre::-webkit-scrollbar-track { background: transparent; }
.lista-que-corre::-webkit-scrollbar-thumb { background: var(--linea); border-radius: 4px; }
.lista-que-corre::-webkit-scrollbar-thumb:hover { background: var(--gris-claro); }

/* Una fila de grupo parte la lista (por grado, por rol) y no es una persona. */
.fila-de-grupo:hover { background: none; }

/* El grupo se queda a la vista mientras corren sus renglones, pegado bajo los
   nombres de columna; los renglones le pasan por debajo. */
.fila-de-grupo th {
  position: sticky; top: var(--alto-del-encabezado); z-index: 1;
  /* Alto fijo: una celda pegada deja de estirarse con su renglón y encogería al
     despegarse el resto de la fila. */
  height: var(--alto-del-encabezado);
  background: var(--fondo); font-weight: 700; color: var(--tinta);
}
/* El nombre del grupo a la izquierda y sus cuentas hasta la derecha, para
   leerlas antes de entrar a las filas. */
.banda-del-grupo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.nombre-del-grupo { font-weight: 700; }
.cuentas-del-grupo { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.cuenta-del-grupo { color: var(--gris); font-weight: 400; }

/* El encabezado va en negrita y el panel del filtro vive dentro de él. */
.tabla-con-renglones thead .panel-de-filtro { font-weight: 400; }
.cuerpo-del-filtro { padding: 7px 7px 0; }
.cuerpo-del-filtro input { width: 100%; }

/* El punto que separa dos datos de un mismo renglón. */
.separador-de-datos { color: var(--gris-claro); }

/* Una celda que lleva su número y una barra con la misma proporción. La barra
   es un <progress>: el navegador la dibuja con su propio valor, así que no hace
   falta calcularle un ancho desde la pantalla. */
.celda-con-barra { display: flex; align-items: center; gap: 0.75rem; }
.valor-de-la-barra { flex: none; min-width: 3rem; text-align: right; }
.barra-de-avance {
  flex: 1; min-width: 4rem; height: 7px;
  appearance: none; border: 0; border-radius: 3.5px;
  background: var(--linea);
}
.barra-de-avance::-webkit-progress-bar { border-radius: 3.5px; background: var(--linea); }
.barra-de-avance::-webkit-progress-value { border-radius: 3.5px; background: var(--acento); }
.barra-de-avance::-moz-progress-bar { border-radius: 3.5px; background: var(--acento); }
.barra-de-avance.en-meta::-webkit-progress-value { background: var(--correcto); }
.barra-de-avance.en-meta::-moz-progress-bar { background: var(--correcto); }
.barra-de-avance.cumple::-webkit-progress-value { background: var(--atencion); }
.barra-de-avance.cumple::-moz-progress-bar { background: var(--atencion); }
.barra-de-avance.en-riesgo::-webkit-progress-value { background: var(--peligro); }
.barra-de-avance.en-riesgo::-moz-progress-bar { background: var(--peligro); }

/* La cuenta y su proporción se reparten el renglón de arriba; la barra va debajo
   a todo lo ancho, para que las de una columna se comparen entre sí. */
.avance-al-corte { display: block; }
.cifras-del-avance {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem;
  margin-bottom: 0.375rem;
}
.avance-al-corte .barra-de-avance { display: block; width: 100%; }
.cuenta-con-meta { white-space: nowrap; }
.meta-al-corte { color: var(--gris); }

/* Una celda que dice por qué no hay número, en vez de un hueco o un cero. */
.tabla-con-cuadricula .no-aplica { color: var(--gris-claro); }
/* El resaltado ayuda a seguir la fila hasta sus acciones; la fila en sí no se elige. */
.tabla-con-fila-resaltada tbody tr { transition: background var(--transicion); }
/* La fila entera abre el detalle; el primer dato es un botón para llegar con el teclado. */
.filas-que-abren tbody tr { cursor: pointer; }
.abrir-fila {
  padding: 0; border: 0; background: none;
  color: inherit; font: inherit; text-align: left;
  cursor: pointer;
}
.abrir-fila:focus-visible { outline: 1px solid var(--acento); outline-offset: 2px; }
.celda-de-fechas { white-space: nowrap; }
.tabla-con-fila-resaltada tbody tr:hover { background: var(--fondo); }
/* Sin renglones, el aviso va dentro de la tabla, bajo sus columnas, y no abre nada. */
.tabla-con-renglones .fila-sin-resultados td { color: var(--gris); }
.tabla-con-fila-resaltada tbody .fila-sin-resultados { cursor: default; }
.tabla-con-fila-resaltada tbody .fila-sin-resultados:hover { background: none; }

/* Acciones de cada fila al final: botones redondos con contorno claro y un icono de trazo fino.
   Miden lo que el círculo de las iniciales, para que la fila no crezca por tenerlos. */
.boton-de-fila {
  display: inline-grid; place-items: center;
  width: var(--circulo-en-celda); height: var(--circulo-en-celda);
  padding: 0;
  border: 1px solid var(--acento-borde); border-radius: 50%;
  background: transparent; color: var(--acento);
  cursor: pointer;
  transition: background var(--transicion), border-color var(--transicion);
}
.boton-de-fila:hover { background: var(--acento-tenue); border-color: var(--acento); }
.boton-de-fila:focus-visible { outline: 1px solid var(--acento); outline-offset: 2px; }
.boton-de-fila svg { width: var(--icono); height: var(--icono); }

.sin-filas { margin: 0; padding: 10.5px 14px; border: 1px solid var(--linea); border-top: 0; color: var(--gris); }

/* El embudo va junto al nombre de la columna, no en la orilla de la celda:
   pegado a lo que ordena se lee como el segundo control de la misma cosa. */
.encabezado-con-filtro { display: inline-flex; align-items: center; gap: 7px; }

.ordenar-por {
  display: inline-flex; align-items: center; gap: 5.25px;
  padding: 0; border: 0; background: transparent;
  color: inherit; font: inherit;
  cursor: pointer;
}
.ordenar-por svg { width: var(--icono); height: var(--icono); }
/* La columna que ordena se distingue como en el resto de la aplicación: tinte del acento. */
.ordenar-por.ordenando { color: var(--acento); }
.tabla-con-cuadricula th:has(.ordenar-por.ordenando) { background: var(--acento-tenue); }

.filtro-de-columna {
  display: inline-grid; place-items: center; flex: none;
  width: var(--circulo-en-celda); height: var(--circulo-en-celda);
  border: 0; border-radius: 50%;
  background: transparent; color: var(--gris);
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion);
}
.filtro-de-columna:hover { background: var(--fondo); }
.filtro-de-columna svg { width: var(--icono); height: var(--icono); }
.filtro-de-columna.filtrando { background: var(--acento-tinte); color: var(--acento); }
.filtro-de-columna.filtrando svg { fill: currentColor; }

/* Paginador bajo la tabla: flechas a los extremos y hasta cinco números. */
.paginador {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 3.5px;
  padding: 7px 14px;
  border: 1px solid var(--linea); border-top: 0;
}
.paginador button {
  display: inline-grid; place-items: center;
  min-width: 35px; height: 35px;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--gris); font: inherit;
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion);
}
.paginador svg { width: var(--icono); height: var(--icono); }
.paginador button:hover { background: var(--fondo); color: var(--tinta); }
.paginador button:disabled { color: var(--gris-claro); opacity: .6; cursor: default; background: transparent; }
.paginador button[aria-current="page"] { background: var(--acento-tinte); color: var(--acento-fuerte); }

/* En un teléfono cada grupo de la barra toma el renglón completo y el
   buscador se estira: nada queda a medio ancho. */
@media (max-width: 40rem) {
  .barra-de-tabla { padding: 10.5px; gap: 10.5px; }
  .grupo-de-barra { width: 100%; }
  .barra-de-tabla .buscador { flex: 1 1 12rem; width: auto; }
  .grupo-de-barra .lista-con-panel { flex: 1; }
  .lista-con-panel .lista-desplegable { width: 100%; }
  .tabla-con-cuadricula th,
  .tabla-con-cuadricula td { padding: 7px 10.5px; }
}

/* --- Insignia: un dato corto dentro de una tabla -------------------------- */
/* La insignia y el estado son la misma pieza con distinto tinte: una nombra un
   dato corto, el otro dice cómo va alguien contra su meta. */
.insignia, .estado {
  display: inline-flex; align-items: center; gap: 3.5px;
  padding: 3.5px 7px;
  border: 0; border-radius: var(--radio-control);
  font: inherit; font-size: var(--texto-menor); font-weight: 700;
  line-height: var(--interlinea-control); white-space: nowrap;
}
.insignia { background: var(--acento-tinte); color: var(--acento-fuerte); }
.insignia-apagada { background: var(--fondo); color: var(--gris); }
.insignia-de-baja { background: #FBEAE9; color: var(--peligro); }
button.insignia { cursor: pointer; }
button.insignia:hover { box-shadow: inset 0 0 0 1px var(--acento); }

/* --- Cargando --------------------------------------------------------------
   Una rueda con su texto, al centro de lo que falta. Entra con retraso: una
   carga de un instante no alcanza a mostrarla. */
.cargando {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 0.75rem;
  min-height: 12rem;
  color: var(--gris);
  opacity: 0; animation: aparecer var(--transicion) ease-out 0.3s forwards;
}
.rueda-de-carga {
  width: 1.25rem; height: 1.25rem;
  border: 2px solid var(--linea); border-top-color: var(--acento); border-radius: 50%;
  animation: girar 0.8s linear infinite;
}
@keyframes aparecer { to { opacity: 1; } }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .rueda-de-carga { animation-duration: 2.4s; }
}

/* --- Avisos ---------------------------------------------------------------- */
.aviso-correcto, .aviso-error, .aviso-atencion {
  margin: 0;
  padding: var(--campo-y) var(--campo-x);
  border-radius: var(--radio-control);
}
.aviso-pantalla { margin-bottom: 1.5rem; }
.aviso-correcto { background: #E8F3EC; border: 1px solid #B7D9C3; color: var(--correcto); }
.aviso-error { background: #FBEAE9; border: 1px solid #E7BDB9; color: var(--peligro); }
.aviso-atencion { background: #FCF1E8; border: 1px solid #EDCBB0; color: var(--atencion); }

/* Pestañas de una pantalla. Las apagadas se ven, para que se note a dónde va.
   La elegida monta su línea sobre la de la barra, por eso el margen negativo. */
/* La línea de la barra va como sombra y no como borde: así la pestaña elegida
   pinta la suya encima sin sacar el contenido de su caja, que era lo que
   sacaba una barra de desplazamiento vertical. */
/* El aire entre pestañas es relleno de cada una, no separación de la barra: así
   la línea de la elegida abarca su relleno y la primera empieza a ras del
   título, aunque su texto quede metido. */
/* Si no caben, un solo renglón que se desliza de lado, como en cualquier
   aplicación: en dos renglones la elegida queda lejos de su contenido. Una
   flecha en la orilla avisa que hay más de ese lado. */
.pestanas-deslizables {
  display: flex;
  margin-top: 1rem;
  box-shadow: inset 0 -1px 0 var(--linea);
}
.barra-pestanas {
  position: relative;
  flex: 1; min-width: 0;
  display: flex;
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* La pestaña que queda a medias en una orilla no se ve cortada: se esconde.
     Cuánto esconder lo mide el módulo de Pestanas. */
  clip-path: inset(0 var(--recorte-derecho, 0px) 0 var(--recorte-izquierdo, 0px));
}
.barra-pestanas::-webkit-scrollbar { display: none; }
/* Cuando siguen al encabezado, el aire de los dos se sumaba. */
.encabezado-pantalla + .pestanas-deslizables { margin-top: 0; }
/* Si no caben, las dos flechas apartan su lugar para que la barra no cambie
   de ancho al recorrerla; solo se ve la del lado donde quedan pestañas. */
.flecha-de-pestanas {
  display: none; flex: none; align-items: center; justify-content: center;
  width: 2rem; padding: 0;
  border: 0; background: transparent; color: var(--gris);
  cursor: pointer;
}
.flecha-de-pestanas:hover { color: var(--tinta); }
.flecha-de-pestanas svg { width: var(--icono); height: var(--icono); }
.pestanas-deslizables[data-desborda] .flecha-de-pestanas { display: flex; }
.pestanas-deslizables:not([data-hay-antes]) .hacia-atras,
.pestanas-deslizables:not([data-hay-despues]) .hacia-adelante { visibility: hidden; }
.pestana {
  flex: none;
  padding: 14px 15.75px;
  font-size: var(--texto-base); color: var(--gris); text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.pestana:hover { color: var(--tinta); text-decoration: none; }
.pestana.elegida { font-weight: 600; color: var(--acento); border-bottom-color: var(--acento); }
.pestana.elegida:hover { color: var(--acento); }
.cuenta-de-pestana {
  display: inline-grid; place-items: center;
  min-width: 1.5rem; margin-left: 7px; padding: 0 7px;
  border-radius: 999px;
  background: var(--fondo); color: var(--gris);
  font-size: var(--texto-menor); font-weight: 600;
}
.pestana.elegida .cuenta-de-pestana { background: var(--acento-tinte); color: var(--acento-fuerte); }

/* Lo que va bajo las pestañas no se pega a ellas, como las tarjetas de Configuración. */
.pestanas-deslizables + .seccion-de-la-lista, .pestanas-deslizables + .pestana-vacia { margin-top: 1rem; }
/* Una pestaña vacía se dice con una tarjeta, no con una tabla sin renglones, y
   mide lo mismo que la lista llena: ocupa el alto que deja la ventana. */
.pestana-vacia {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 4rem 1rem;
  text-align: center;
}
.pestana-vacia svg { width: 40px; height: 40px; color: var(--gris-claro); }
.pestana-vacia h2 { margin: 0.5rem 0 0; }
.pestana-vacia p { margin: 0 0 0.75rem; color: var(--gris); }

/* En una tabla, la etiqueta no empuja el alto de la fila: con ella o sin ella
   los renglones miden lo mismo, y dos pestañas de la misma lista no brincan. */
.tabla-con-renglones td .estado { margin-block: -3.5px; }
.estado.en-meta { color: var(--correcto); background: rgb(46 125 70 / 0.12); }
.estado.cumple { color: var(--atencion); background: rgb(181 84 27 / 0.12); }
.estado.en-riesgo { color: var(--peligro); background: rgb(179 38 30 / 0.12); }
.estado.en-proceso { color: var(--acento); background: var(--acento-tinte); }

/* --- Qué es esto ------------------------------------------------------------
   Un signo de interrogación junto a lo que necesita una aclaración. El globo es
   un popover: el navegador lo cierra al hacer clic fuera y con Escape. */
.con-ayuda { display: inline-flex; align-items: center; gap: 0.375rem; }

.que-es {
  display: inline-grid; place-items: center; flex: none;
  width: 1.25rem; height: 1.25rem;
  padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--gris-claro);
  cursor: pointer;
  transition: color var(--transicion), background var(--transicion);
}
.que-es svg { width: var(--icono); height: var(--icono); }
.que-es:hover { color: var(--acento); background: var(--acento-tenue); }

.panel-de-ayuda { max-width: 20rem; padding: 0.75rem 0.875rem; color: var(--gris); }

/* Con la página corriendo, un encabezado pegado se iría bajo la barra superior y
   robaría el alto que en un teléfono es lo que escasea. */
@media (max-width: 900px), (max-height: 800px) {
  .tabla-con-renglones thead th { position: static; }
  /* Corre la página; de lado corre la tabla entera, con sus tres partes juntas
     para que las columnas no se desalineen. Abajo de ese ancho las columnas
     se enciman. */
  .tabla-que-corre { overflow-x: auto; }
  .tabla-que-corre .parte-fija, .tabla-que-corre .cuerpo-que-corre { overflow: visible; scrollbar-gutter: auto; }
  .tabla-que-corre table { min-width: 48rem; }
  /* Sin el ancho de un escritorio, un nombre de columna largo parte renglón
     antes que encimarse con el de al lado. */
  .tabla-que-corre thead th { white-space: normal; }
  /* Sin marco que acote el alto, la lista crece a lo que mida y corre la página;
     de lado sigue corriendo ella. */
  .seccion-de-la-lista { display: block; }
  .marco-de-la-lista { display: block; padding-bottom: 0; }
  .fila-de-grupo th { position: static; height: auto; }
}