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

.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); }
/* La cabeza y el pie se quedan a la vista; lo que corre es el cuerpo. Si
   corriera la ventana entera, los botones se perderían abajo. */
.dialogo { max-height: calc(100dvh - 2rem); }
.dialogo > form { display: flex; flex-direction: column; max-height: inherit; }
.dialogo-cuerpo { min-height: 0; overflow-y: auto; }

.dialogo-cabeza {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 1.25rem;
}
.dialogo-cabeza h2 { margin: 0; }
.dialogo-cabeza h2:focus { outline: none; }
.acciones-de-la-cabeza { display: flex; flex: none; align-items: center; gap: 0.25rem; }

.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; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem;
  padding: 1.25rem;
}

/* Lo que un diálogo muestra de algo, en pares de dato y valor: la etiqueta
   a la izquierda, en gris. */
.datos-del-detalle { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1.25rem; margin: 0; }
.datos-del-detalle > div { display: contents; }
.datos-del-detalle dt { color: var(--gris); }
.datos-del-detalle dd { margin: 0; }
.descripcion-completa { white-space: pre-line; overflow-wrap: anywhere; }
.explica { color: var(--gris); }

/* --- 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: sin barra y sin esquina para estirarlo a mano.
   Donde el navegador no sabe hacerlo, lo hace js/texto-que-crece.js. */
textarea {
  field-sizing: content; min-block-size: calc(2lh + 2 * var(--campo-y) + 2px); resize: none;
  /* Varios renglones se leen mejor con más aire; lo que se agrega al renglón
     se quita del relleno, para que en un renglón mida lo mismo que un campo. */
  line-height: 1.45; padding-block: calc(var(--campo-y) - 0.125em);
}
/* Lo que casi siempre cabe en un renglón, pero puede ser largo: se ve como un
   campo de texto y crece si hace falta. */
.texto-de-un-renglon { min-block-size: calc(1lh + 2 * var(--campo-y) + 2px); }

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

/* --- Bloque de edición ----------------------------------------------------
   Una tarjeta con su título, su explicación y lo que se edita adentro. */

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

/* En un teléfono las opciones no caben en un renglón: se acomodan en
   cuadrícula y ocupan todo el ancho, en vez de cortarse en la orilla. */
@media (max-width: 40rem) {
  .selector-de-opciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .selector-de-opciones label { padding: 7px var(--campo-x); text-align: center; }
  .selector-de-opciones label:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* --- 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, .selector-de-fecha { anchor-scope: --panel-desplegable; }
.lista-desplegable, .filtro-de-columna, .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; }

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

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

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

/* Una cantidad se alinea a la derecha, para comparar unidades con unidades. */
.columna-de-cifra { text-align: right; }

/* Una fila de grupo parte la lista (por rol, por tipo) y no es un renglón de datos. */
.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); }

/* 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í. */

/* 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 {
  text-decoration: none;
  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); }
.boton-de-fila:disabled { opacity: 0.35; cursor: default; background: transparent; border-color: var(--linea); 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; }

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

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

/* --- Insignia: un dato corto dentro de una tabla -------------------------- */
.insignia {
  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-de-baja { background: var(--peligro-tinte); 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; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  min-height: 12rem;
  color: var(--gris);
  opacity: 0; animation: aparecer var(--transicion) ease-out 0.3s forwards;
}
/* Una cartilla de Snellen que se lee: cada letra se enfoca tras la anterior,
   en orden de lectura. Es dibujo, no texto: sus tamaños son los de una
   cartilla y no salen de la escala tipográfica. */
.cartilla-de-carga {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 10rem; box-sizing: border-box; padding: 24px 0 20px;
  background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-panel);
  color: var(--tinta); font-weight: 700; line-height: 1.15;
}
.renglon-de-cartilla { display: flex; gap: 0.45em; }
.renglon-de-cartilla:nth-child(1) { font-size: 56px; }
.renglon-de-cartilla:nth-child(2) { font-size: 34px; }
.renglon-de-cartilla:nth-child(3) { font-size: 21px; }
.renglon-de-cartilla > span { animation: leer 2.8s ease-in-out infinite; }
.renglon-de-cartilla:nth-child(2) > span:nth-child(1) { animation-delay: .15s; }
.renglon-de-cartilla:nth-child(2) > span:nth-child(2) { animation-delay: .3s; }
.renglon-de-cartilla:nth-child(3) > span:nth-child(1) { animation-delay: .45s; }
.renglon-de-cartilla:nth-child(3) > span:nth-child(2) { animation-delay: .6s; }
.renglon-de-cartilla:nth-child(3) > span:nth-child(3) { animation-delay: .75s; }
@keyframes aparecer { to { opacity: 1; } }
@keyframes leer {
  0%, 100% { filter: blur(3px); opacity: .35; }
  30%, 65% { filter: blur(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .renglon-de-cartilla > span { animation: none; }
}

/* --- Avisos ---------------------------------------------------------------- */
.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-error { background: var(--peligro-tinte); border: 1px solid var(--peligro-borde); color: var(--peligro); }
.aviso-atencion { background: var(--atencion-tinte); border: 1px solid var(--atencion-borde); color: var(--atencion); }

/* Lo que salió bien: flota abajo a la derecha y se desvanece solo. */
.aviso-flotante {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 80;
  display: flex; align-items: center; gap: 0.625rem;
  max-width: min(28rem, calc(100vw - 2rem)); margin: 0;
  padding: 0.75rem 1rem; border-radius: var(--radio-tarjeta);
  background: var(--azul-apec); color: #fff;
  box-shadow: var(--sombra-ventana);
  pointer-events: none;
  animation: entrar-el-aviso 0.2s ease-out, salir-el-aviso 0.3s ease-in 4s forwards;
}
.aviso-flotante svg { flex: none; width: 1rem; height: 1rem; color: #7BD69F; }
@keyframes entrar-el-aviso { from { opacity: 0; transform: translateY(0.5rem); } }
@keyframes salir-el-aviso { to { opacity: 0; transform: translateY(0.5rem); visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .aviso-flotante { animation: salir-el-aviso 0s 4s forwards; }
}
@media (max-width: 40rem) {
  .aviso-flotante { right: 1rem; left: 1rem; bottom: 1rem; max-width: none; }
}


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

/* --- Tipo de evento -------------------------------------------------------
   Cada tipo trae su color y su tinte; las piezas que lo muestran los leen de
   aquí. El centinela usa el rojo de peligro a propósito. */
.tipo-cuasifalla { --color-del-tipo: var(--tipo-cuasifalla); --tinte-del-tipo: var(--tipo-cuasifalla-tinte); }
.tipo-adverso { --color-del-tipo: var(--tipo-adverso); --tinte-del-tipo: var(--tipo-adverso-tinte); }
.tipo-centinela { --color-del-tipo: var(--tipo-centinela); --tinte-del-tipo: var(--tipo-centinela-tinte); }
.tipo-ece { --color-del-tipo: var(--tipo-ece); --tinte-del-tipo: var(--tipo-ece-tinte); }
.tipo-infraestructura { --color-del-tipo: var(--tipo-infraestructura); --tinte-del-tipo: var(--tipo-infraestructura-tinte); }

.insignia-de-tipo { background: var(--tinte-del-tipo); color: var(--color-del-tipo); }
.texto-del-tipo { color: var(--color-del-tipo); }

/* El estado de un caso: de nuevo a cerrado, cada uno con su tinte. */
.estado-nuevo { background: var(--acento-tinte); color: var(--acento-fuerte); }
.estado-en_revision { background: var(--atencion-tinte); color: var(--atencion); }
.estado-en_analisis { background: var(--tipo-ece-tinte); color: var(--tipo-ece); }
.estado-cerrado { background: var(--correcto-tinte); color: var(--correcto); }

/* Un renglón de centinela se distingue en cualquier lista con su orilla roja. */
.renglon-centinela > :first-child { box-shadow: inset 3px 0 0 var(--tipo-centinela); }

/* --- Piezas de captura ------------------------------------------------------ */
.obligatorio { color: var(--peligro); }
.opcional { color: var(--gris); font-weight: 400; }
.error-del-campo { color: var(--peligro); font-size: var(--texto-menor); }

/* Dos campos lado a lado; en el teléfono, uno bajo otro. */
.dos-columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
/* Con un número impar de campos, el primero ocupa la fila entera: así nunca
   queda media fila vacía cuando un campo depende de lo que ya se eligió. */
.dos-columnas > :first-child:nth-last-child(odd) { grid-column: 1 / -1; }
@media (max-width: 40rem) {
  /* Sin el mínimo en cero, un campo ancho empuja la columna fuera de la pantalla. */
  .dos-columnas { grid-template-columns: minmax(0, 1fr); }
}

/* Opciones largas, una por renglón: la elegida se pinta con el tinte del acento. */
.opciones-en-lista { display: flex; flex-direction: column; gap: 0.5rem; }
.opcion-en-lista {
  --color-de-la-opcion: var(--acento);
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--linea); border-radius: var(--radio-tarjeta);
  background: var(--tarjeta);
  cursor: pointer;
  transition: background var(--transicion), border-color var(--transicion), box-shadow var(--transicion);
}
.opcion-en-lista:hover { border-color: var(--color-de-la-opcion); }
.opcion-en-lista:has(:checked) {
  border-color: var(--color-de-la-opcion); background: var(--acento-tenue);
  box-shadow: inset 0 0 0 1px var(--color-de-la-opcion);
}
.opcion-en-lista:has(:focus-visible) { outline: 2px solid var(--acento); outline-offset: 2px; }
/* El círculo nativo cambia de tamaño y de alineación según el navegador. */
.opcion-en-lista input[type="radio"] {
  appearance: none; flex: none; display: grid; place-items: center;
  width: 18px; height: 18px; margin: 1px 0 0; padding: 0;
  border: 2px solid var(--gris-claro); border-radius: 50%;
  background: var(--tarjeta);
  transition: border-color var(--transicion);
}
.opcion-en-lista input[type="radio"]::after {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-de-la-opcion); transform: scale(0);
  transition: transform var(--transicion);
}
.opcion-en-lista:hover input[type="radio"],
.opcion-en-lista input[type="radio"]:checked { border-color: var(--color-de-la-opcion); }
.opcion-en-lista input[type="radio"]:checked::after { transform: scale(1); }
.opcion-en-lista input[type="radio"]:focus-visible { outline: none; }

/* --- Búsqueda en el CRM: los resultados se eligen con un clic --- */
.resultados-de-busqueda { display: flex; flex-direction: column; gap: 0.5rem; }
.aviso-busqueda { margin: 0; color: var(--gris); }

/* Cada resultado se puede elegir, así que es un botón y se ve como tal. */
.resultado-elegible {
  display: flex; flex-direction: column; gap: 0.125rem;
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--linea); border-radius: var(--radio-tarjeta);
  background: var(--tarjeta);
  font: inherit; text-align: left; color: var(--tinta);
  cursor: pointer;
  transition: background var(--transicion), border-color var(--transicion);
}
.resultado-elegible:hover { border-color: var(--acento); background: var(--acento-tenue); }
.nombre-del-resultado { font-weight: 600; }
.dato-del-resultado { font-size: var(--texto-menor); color: var(--gris); }

/* Un aviso que necesita su ícono para leerse de un vistazo. */
.aviso-con-icono { display: flex; align-items: flex-start; gap: 7px; }
.aviso-con-icono svg { flex: none; width: var(--icono); height: var(--icono); margin-top: 0.2em; }

/* En un teléfono una ventana flotante desperdicia los márgenes y obliga a
   correr dos veces: ocupa la pantalla, con el pie fijo abajo. */
@media (max-width: 40rem) {
  .dialogo {
    width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
    margin: 0; border: 0; border-radius: 0;
  }
  .dialogo > form { height: 100%; }
  .dialogo-cuerpo { flex: 1; }
  .dialogo-pie { border-top: 1px solid var(--linea); padding: 0.75rem 1.25rem; }
  .dialogo-pie > * { flex: 1; }
}

/* --- Reporte y caso: piezas que comparten la bandeja, la causa-raíz y la impresión --- */
/* La persona elegida del CRM no es un campo para editar: es el dato que se usa. */
.persona-elegida {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--acento); border-radius: var(--radio-tarjeta);
  background: var(--acento-tenue);
}
.datos-del-elegido { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.nombre-del-elegido { font-weight: 600; overflow-wrap: anywhere; }
.dato-del-elegido { color: var(--gris); font-size: var(--texto-menor); }
.accion-de-texto {
  align-self: flex-start; flex: none;
  padding: 0; border: 0; background: none;
  color: var(--acento); font: inherit;
  text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer;
}
.accion-de-texto:hover { color: var(--acento-fuerte); }

.insignias-del-reporte { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.acciones-en-renglon { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.texto-del-reporte h3 { margin: 0 0 0.25rem; font-size: var(--texto-base); color: var(--gris); font-weight: 600; }
.texto-del-reporte p { margin: 0; padding: var(--campo-y) var(--campo-x); border: 1px solid var(--linea); border-radius: var(--radio-control); background: var(--fondo); }
.rango-de-fechas { display: inline-flex; gap: 0.5rem; }