/* Selección, Fase 1: la ficha de la persona (desglose, respuestas, evaluaciones, mensajes y otras vacantes), Ajustes de selección y Reportes.
   Todo usa los tokens de la marca (ver DESIGN.md): negro y blanco a fondo, borde fino, píldoras, sin sombras; el color solo con significado
   (ámbar = pronto, rojo = vencido) y las tres rayas como marca de estado. Todo respeta temas y «reducir movimiento». */

/* =========================================================================================================================
   1. Armazón de la ficha: resumen arriba, y debajo el contenido a la izquierda y las acciones a la derecha
   ========================================================================================================================= */
.u { display: contents; }   /* una «unidad» de pantalla (se vuelve a pintar sola) no añade caja */

.ficha-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-seccion, 2.25rem) var(--gap, 1.25rem); align-items: start; }
.ficha-principal, .ficha-rail { display: flex; flex-direction: column; gap: var(--gap, 1.25rem); min-width: 0; }
.ficha-principal > *, .ficha-rail > * { min-width: 0; }
.ficha-par { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: var(--gap, 1.25rem); align-items: start; }
.ficha-cuerpo section[id], .ficha-cuerpo details[id], #resumen-ficha { scroll-margin-top: calc(var(--ficha-indice-alto, 4rem) + 0.75rem); }

/* Índice de la ficha: fijo arriba mientras se baja, con la parte actual marcada, y «Arriba» siempre a mano. Sin él, 8.000 px son un solo recorrido. */
.ficha-indice { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: var(--e2); padding: 0.45rem 0; margin: calc(-1 * var(--e2)) 0 var(--e2); background: var(--fondo); border-bottom: 1px solid var(--ln); }
.ficha-indice[hidden] { display: none; }
/* El destino de un clic o de una restauración queda justo debajo del índice fijo (su altura la publica candidato.js) */
.ficha-principal [id] { scroll-margin-top: calc(var(--ficha-indice-alto, 56px) + 12px); }
.ficha-indice-arriba { flex: none; min-height: 2.75rem; }
.ficha-indice-arriba svg { transform: rotate(-90deg); }
.ficha-indice-lista { display: flex; gap: 0.4rem; min-width: 0; flex: 1 1 auto; overflow-x: auto; scrollbar-width: none; padding: 0.15rem 0.1rem; }
/* El desvanecido solo aparece del lado donde todavía hay partes por ver (lo marca la pantalla): así una parte a medias no parece un corte */
.ficha-indice-lista[data-mas-der] { mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent); }
.ficha-indice-lista[data-mas-izq] { mask-image: linear-gradient(to left, #000 calc(100% - 1.5rem), transparent); }
.ficha-indice-lista[data-mas-izq][data-mas-der] { mask-image: linear-gradient(to right, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent); }
.ficha-indice-lista::-webkit-scrollbar { display: none; }
.ficha-indice-parte { flex: none; min-height: 2.75rem; padding: 0 0.95rem; border: 1px solid var(--bd); border-radius: 999px; background: transparent; color: var(--tx-2); font: inherit; font-size: var(--paso--1); font-weight: 700; white-space: nowrap; cursor: pointer; transition: background-color 0.16s, color 0.16s, border-color 0.16s; }
.ficha-indice-parte:hover { color: var(--tx); border-color: var(--tx); }
.ficha-indice-parte[aria-current="true"] { background: var(--tx); color: var(--fondo); border-color: var(--tx); }
.ficha-indice-parte:focus-visible, .ficha-indice-arriba:focus-visible { outline: 2px solid var(--foco, var(--tx)); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .ficha-indice-parte { transition: none; } }
@container principal (min-width: 900px) {
  .ficha-indice-parte[data-destino="mover-etapa"], .ficha-indice-parte[data-destino="mensajes"] { display: none; }
  .ficha-indice-parte { padding: 0 0.5rem; min-height: 2.5rem; }
  .ficha-indice-lista { gap: 0.3rem; }
  .ficha-indice-arriba { min-height: 2.5rem; }
}

/* En pantallas anchas las acciones (mover de etapa y mensajes) quedan a la vista al desplazarse, con su propio desplazamiento si no caben */
@container principal (min-width: 900px) {
  .ficha-cuerpo[data-rail="si"] { grid-template-columns: minmax(0, 1fr) minmax(19rem, 24rem); }
  .ficha-cuerpo[data-rail="si"] > .ficha-principal { grid-column: 1; grid-row: 1; }
  /* El panel derecho ocupa la altura de la pantalla y no se desplaza entero: «Mover de etapa» conserva su altura y «Mensajes» llena el resto.
     Su única zona con desplazamiento es el propio panel de Mensajes (nada anidado dentro de él). */
  .ficha-cuerpo[data-rail="si"] > .ficha-rail {
    grid-column: 2; grid-row: 1; position: sticky; top: 4.75rem; height: calc(100dvh - 5.5rem); max-height: calc(100dvh - 5.5rem);
    overflow: hidden; overscroll-behavior: contain; padding: 4px; margin: -4px;
  }
  .ficha-cuerpo[data-rail="si"] > .ficha-rail > .u > #mover-etapa { flex: none; }
  .ficha-cuerpo[data-rail="si"] > .ficha-rail > .u > #mensajes { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-gutter: stable; }
}

/* =========================================================================================================================
   2. El resumen
   ========================================================================================================================= */
.ficha-resumen-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e4) var(--e6); align-items: start; }
@container principal (min-width: 680px) { .ficha-resumen-cuerpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } }
.ficha-quien { display: flex; flex-direction: column; gap: var(--e4); min-width: 0; }
.ficha-puntaje { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e3) var(--e4); }
.ficha-circulo { display: inline-flex; padding: 0.3rem 0.4rem; }
.ficha-circulo .circulo-mano { width: 3.6rem; height: 2.8rem; font-size: 1.45rem; }
.ficha-datos { display: grid; gap: 0.45rem; margin: 0; }
.ficha-datos > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--e3); align-items: baseline; }
.ficha-datos dt { color: var(--tx-2); font-size: var(--paso--1); font-weight: 700; }
.ficha-datos dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.ficha-contacto { display: flex; flex-wrap: wrap; gap: 0.1rem var(--e4); font-weight: 400; color: var(--tx-2); }
.ficha-desglose { display: flex; flex-direction: column; gap: var(--e2); min-width: 0; }
.ficha-desglose .subtitulo { margin: 0; }
/* El desglose de la ficha: cada pilar tiene su nombre y su resultado en la primera línea, la barra debajo y el peso al final.
   Así nada se sale de la tarjeta (ni a 768 ni a 375 px) y «Criterio por confirmar» no se parte en tres líneas */
.ficha-desglose .desglose { gap: 0.9rem; }
.ficha-desglose .desglose-fila { display: grid; gap: 0.35rem; min-width: 0; }
.ficha-desglose .desglose-cabeza { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nombre valor" "barra barra" "peso peso"; align-items: center; column-gap: 0.75rem; row-gap: 0.3rem; min-width: 0; }
.ficha-desglose .desglose-nombre { grid-area: nombre; min-width: 0; overflow-wrap: anywhere; }
.ficha-desglose .desglose-valor { grid-area: valor; white-space: nowrap; }
.ficha-desglose .desglose-barra { grid-area: barra; min-width: 0; }
.ficha-desglose .desglose-peso { grid-area: peso; min-width: 0; overflow-wrap: anywhere; }
/* Solo el pilar de requisitos: su porcentaje es la «Coincidencia documental» (el rótulo va debajo del nombre, así el número no se estrecha) y las preguntas por validar */
.ficha-desglose .desglose-rotulo { display: block; font-size: var(--paso--1); font-weight: 600; color: var(--tx-2); }
.ficha-desglose .desglose-pendientes { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

.ficha-chips { display: flex; flex-wrap: wrap; gap: var(--e2); margin: 0; padding: 0; list-style: none; }
.ficha-chip { cursor: pointer; background: transparent; color: var(--tx); font: inherit; font-size: var(--paso--1); font-weight: 700; text-align: left; white-space: normal; max-width: 100%; transition: border-color 0.15s, background-color 0.15s; }
.ficha-chip:hover { border-color: var(--tx); background: var(--r2); }
.ficha-chip > span { min-width: 0; overflow-wrap: anywhere; }
.ficha-chip .icono { width: 1rem; height: 1rem; }
.ficha-chip .icono:last-child { margin-left: 0.15rem; opacity: 0.7; transition: translate 0.2s var(--salida); }
.ficha-chip:hover .icono:last-child { translate: 2px 0; }
.ficha-chip[data-nivel="proximo"] { color: var(--ambar); }
.ficha-chip[data-nivel="vencido"] { color: var(--rojo); }

/* Un aviso con ícono, título corto y una línea (perfil sin aprobar, sin respuesta, resultado de un mensaje) */
.ficha-aviso { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.7rem 0.85rem; border: 1px solid var(--ln); border-radius: 0.9rem; background: color-mix(in srgb, var(--amarillo) 11%, transparent); }
.ficha-aviso > .icono { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; color: var(--ambar); }
.ficha-aviso > div { display: grid; gap: 0.3rem; min-width: 0; justify-items: start; }
.ficha-aviso strong { font-size: 0.875rem; font-weight: 800; line-height: 1.35; }
.ficha-aviso span { color: var(--tx-2); font-size: 0.85rem; line-height: 1.45; overflow-wrap: anywhere; }
.ficha-aviso[data-tipo="ok"] { background: var(--r1); }
.ficha-aviso[data-tipo="ok"] > .icono { color: var(--tx); }
.ficha-aviso[data-tipo="error"] { background: transparent; border-style: dashed; border-color: var(--tx); }
.ficha-aviso[data-tipo="error"] > .icono { color: var(--tx); }
.ficha-aviso[data-nivel="vencido"] > .icono, .ficha-aviso[data-nivel="vencido"] strong { color: var(--rojo); }
.ficha-aviso[data-nivel="proximo"] > .icono, .ficha-aviso[data-nivel="proximo"] strong { color: var(--ambar); }
.ficha-aviso[hidden] { display: none; }
.ficha-aviso .accion, .ficha-aviso .boton { margin-top: 0.1rem; }
.ficha-aviso:not([hidden]) { animation: ficha-entra 0.28s var(--salida) both; }
@keyframes ficha-entra { from { opacity: 0; transform: translateY(-4px); } }

/* Salir con algo sin guardar, y lo que se recuperó al volver: franjas dentro de la página, nunca una ventana que tape todo */
.ficha-salida {
  --fondo: var(--ya-fondo); --sup: var(--ya-sup); --tx: var(--ya-tx); --tx-2: var(--ya-tx-2); --tx-3: var(--ya-tx-3); --ln: var(--ya-ln); --bd: var(--ya-bd); --foco: var(--ya-foco);
  position: sticky; top: var(--e2); z-index: 30; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e3) var(--e4);
  padding: 0.8rem 1rem; border-radius: 1rem; background: var(--fondo); color: var(--tx); animation: ficha-entra 0.25s var(--salida) both;
}
.ficha-salida[hidden], .ficha-recuperado[hidden] { display: none; }
.ficha-salida-texto { display: flex; align-items: flex-start; gap: var(--e2); min-width: 0; flex: 1 1 18rem; }
.ficha-salida-texto > div { display: grid; gap: 0.15rem; min-width: 0; }
.ficha-salida-texto .icono { flex: none; margin-top: 0.15rem; }
.ficha-salida-texto span { color: var(--tx-2); font-size: var(--paso--1); overflow-wrap: anywhere; }
.ficha-recuperado { display: flex; align-items: flex-start; gap: var(--e2); padding: 0.7rem 0.9rem; border: 1px dashed var(--bd); border-radius: 0.9rem; font-size: var(--paso--1); color: var(--tx-2); }
.ficha-recuperado .icono { flex: none; margin-top: 0.1rem; }

/* «Guardado ✓» y «Sin guardar» junto al botón de cada formulario */
.guardado { font-size: var(--paso--1); font-weight: 700; color: var(--tx-2); min-height: 1.2em; }
.guardado[data-estado="guardado"] { color: var(--tx); animation: ficha-entra 0.25s var(--salida) both; }
.guardado[data-estado="sucio"] { color: var(--ambar); }
form[data-sucio] { }

/* =========================================================================================================================
   3. Lo que Sofía vio: los cuatro pilares, cada uno desplegable con sus puntos y la línea del currículo que lo respalda
   ========================================================================================================================= */
.pilares { display: flex; flex-direction: column; gap: var(--e2); }
.pilar { border: 1px solid var(--bd); border-radius: 1rem; background: var(--fondo); transition: border-color 0.2s; }
.pilar[open] { border-color: var(--tx-2); }
.pilar > summary, .eval > summary {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem var(--e3); min-height: 2.9rem;
  padding: 0.6rem 2.6rem 0.6rem 1rem; cursor: pointer; list-style: none; border-radius: 1rem;
}
.pilar > summary::-webkit-details-marker, .eval > summary::-webkit-details-marker { display: none; }
.pilar > summary::after, .eval > summary::after {
  content: ""; position: absolute; right: 1.05rem; top: 50%; width: 0.6rem; height: 0.6rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  rotate: 45deg; translate: 0 -70%; transition: rotate 0.25s var(--salida), translate 0.25s var(--salida);
}
.pilar[open] > summary::after, .eval[open] > summary::after { rotate: 225deg; translate: 0 -30%; }
.pilar > summary:hover, .eval > summary:hover { background: var(--r2); }
.pilar-nombre { flex: 1 1 11rem; min-width: 0; font-weight: 800; }
.pilar-resultado { flex: none; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pilar-resultado[data-estado="sin_datos"], .pilar-resultado[data-estado="sin_peso"] { font-weight: 600; color: var(--tx-2); }
.pilar-meta { flex: 0 1 auto; }
.pilar-rotulo { display: block; font-size: var(--paso--1); font-weight: 600; color: var(--tx-2); }
.pilar-pendientes { flex: 1 0 100%; font-weight: 600; color: var(--tx); }
.pilar-puntos { list-style: none; margin: 0; padding: 0.2rem 1rem 0.95rem; display: flex; flex-direction: column; gap: 0.65rem; }
.punto-pilar { display: flex; align-items: flex-start; gap: 0.6rem; line-height: 1.45; }
.punto-pilar > .icono { flex: none; width: 1.05rem; height: 1.05rem; margin-top: 0.2rem; }
.punto-pilar[data-estado="cumple"] > .icono { color: var(--tx); }
.punto-pilar > span { min-width: 0; overflow-wrap: anywhere; }
.dato-punto { font-weight: 600; }
.pilar-vacio { padding: 0.1rem 1rem 0.9rem; margin: 0; }
.ficha-verificar .lista > li { align-items: flex-start; }
.ficha-faltantes { display: flex; flex-wrap: wrap; gap: var(--e2); margin: 0; padding: 0; list-style: none; }
.ficha-faltantes .chip { white-space: normal; }

/* =========================================================================================================================
   4. Preguntas y respuestas
   ========================================================================================================================= */
.preg-cuenta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.5rem; margin: 0; font-size: var(--paso-0); }
.preg-cuenta strong { font-weight: 800; font-variant-numeric: tabular-nums; }
.preg-cuenta-dato[data-n="0"] { color: var(--tx-3); }
/* El punto medio va pegado al final de cada dato (nunca abre una línea) y cada dato se queda entero */
.preg-cuenta > [aria-hidden="true"] { display: none; }
.preg-cuenta-dato { white-space: nowrap; }
.preg-cuenta-dato:not(:last-child)::after { content: "·"; margin-left: 0.5rem; color: var(--tx-3); font-weight: 400; }
.preg-grupo { display: flex; flex-direction: column; gap: var(--e2); }
.preg-grupo > .subtitulo { margin: 0; }
.preg-rejilla { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); align-items: start; }
.pregunta {
  display: flex; flex-direction: column; gap: 0.55rem; min-width: 0; padding: 0.9rem 1rem 1rem;
  border: 1px solid var(--bd); border-radius: 1rem; background: var(--fondo); transition: border-color 0.2s;
}
.pregunta[data-evaluacion="no_cumple"] { border-color: var(--tx); border-width: 1.5px; }
.pregunta-cabeza { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.35rem var(--e2); }
.pregunta-etiqueta { margin: 0; flex: 1 1 8rem; min-width: 0; font-size: var(--paso-0); font-weight: 800; letter-spacing: 0; line-height: 1.3; }
.pregunta-texto { margin: 0; color: var(--tx-2); font-size: var(--paso--1); line-height: 1.5; overflow-wrap: anywhere; }
.pregunta-respuesta { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.preg-confirmar { align-self: flex-start; }
.preg-sin-regla, .preg-quien { margin: 0; }
.preg-form { gap: 0.65rem; padding-top: 0.2rem; }
.preg-form textarea { min-height: 4.2rem; }
.preg-opciones legend { padding: 0; margin-bottom: 0.4rem; }
.preg-letra {
  display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; margin-right: 0.4rem; padding: 0 0.2rem;
  border: 1px solid currentColor; border-radius: 99px; font-size: 0.72rem; font-weight: 800; line-height: 1;
}
.preg-acciones { gap: 0.5rem; }
.preg-nota { margin: 0; }

/* =========================================================================================================================
   5. Entrevistas y pruebas: un bloque desplegable por paso
   ========================================================================================================================= */
.eval-lista, .eval-grupo { display: flex; flex-direction: column; gap: var(--e2); min-width: 0; }
.eval { border: 1px solid var(--bd); border-radius: 1rem; background: var(--fondo); transition: border-color 0.2s; }
.eval[open] { border-color: var(--tx-2); }
.eval-nombre { flex: 1 1 12rem; min-width: 0; font-weight: 800; }
.eval-meta { flex: 0 1 auto; }
.eval-cuerpo { display: flex; flex-direction: column; gap: var(--e4); padding: 0.4rem 1rem 1.1rem; min-width: 0; }
.eval-cuerpo > p { margin: 0; }
.eval-guion-caja { border: 1px dashed var(--bd); border-radius: 0.9rem; padding: 0 var(--e4); }
.eval-guion-caja[open] { padding-bottom: var(--e3); }
.eval-guion-caja > summary { padding-block: 0.2rem; }
.eval-guion-caja p { margin: 0 0 var(--e2); }
.eval-guion { margin: 0; padding-left: 1.2rem; gap: var(--e2); font-size: var(--paso--1); line-height: 1.5; }
.eval-guion li::marker { font-weight: 700; color: var(--tx-2); }
.eval-antes { display: flex; flex-direction: column; gap: var(--e1); border-left: 3px solid var(--ln); padding-left: var(--e3); }
.eval-antes .lista > li { padding-block: 0.15rem; border: 0; }
.eval-form { gap: var(--e4); }
.eval-opciones { margin: 0; padding: 0; border: 0; min-width: 0; }
.eval-opciones legend { padding: 0; margin-bottom: 0.4rem; }
.eval-registro { margin: 0; }
.eval-lectura { display: grid; gap: 0.5rem; margin: 0; }
.eval-lectura > div { display: grid; grid-template-columns: minmax(7rem, 10rem) minmax(0, 1fr); gap: var(--e3); align-items: baseline; }
.eval-lectura dt { color: var(--tx-2); font-size: var(--paso--1); font-weight: 700; }
.eval-lectura dd { margin: 0; overflow-wrap: anywhere; }
.campo-ancho { grid-column: 1 / -1; }
.eval .rejilla-campos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); }
.eval-elegidos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: var(--e4) var(--e5); align-items: start; }
/* Las opciones de escala y de elegir (1 a 5, Rojo/Verde…) son radios de verdad vestidos de píldoras, con la misma forma que en el formulario de fechas */
.eval-opciones .ff-pildora span, .preg-opciones .ff-pildora span { min-height: 2.4rem; }
/* «Sin dato» es la ausencia de respuesta: no se pinta como una elección (ni lleva las rayas) cuando es lo que está marcado */
.ff-pildora.sin-dato input:checked + span { background: transparent; color: var(--tx-2); border-style: dashed; border-color: var(--bd); font-weight: 600; }
.ff-pildora.sin-dato input:checked + span::after { display: none; }
.ficha-cv-texto { max-height: 26rem; overflow: auto; white-space: pre-wrap; font-size: var(--paso--1); line-height: 1.6; border: 1px solid var(--ln); border-radius: 1rem; padding: var(--e4); }
.ficha-json { margin: 0; white-space: pre-wrap; font-size: var(--paso--1); border: 1px solid var(--bd); border-radius: 1rem; padding: var(--e3); overflow-wrap: anywhere; }

/* Lo que se abre se ve abrible: los plegables pequeños de la ficha llevan su flecha */
.ficha-cuerpo details.mini > summary, .ficha-cuerpo details.eval-guion-caja > summary, .ficha-cuerpo #borrar-datos > summary { position: relative; list-style: none; padding-right: 2rem; min-height: 2.75rem; display: flex; align-items: center; }
.ficha-cuerpo details.mini > summary::-webkit-details-marker, .ficha-cuerpo #borrar-datos > summary::-webkit-details-marker { display: none; }
.ficha-cuerpo details.mini > summary::after, .ficha-cuerpo #borrar-datos > summary::after {
  content: ""; position: absolute; right: 0.35rem; top: 50%; width: 0.55rem; height: 0.55rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  rotate: 45deg; translate: 0 -70%; transition: rotate 0.25s var(--salida), translate 0.25s var(--salida);
}
.ficha-cuerpo details.mini[open] > summary::after, .ficha-cuerpo #borrar-datos[open] > summary::after { rotate: 225deg; translate: 0 -30%; }
@media (prefers-reduced-motion: reduce) { .ficha-cuerpo details.mini > summary::after, .ficha-cuerpo #borrar-datos > summary::after { transition: none; } }

/* =========================================================================================================================
   6. Mover de etapa
   ========================================================================================================================= */
#mover-etapa .fila-flex { gap: var(--e2); }
.etapa-motivo { animation: ficha-entra 0.28s var(--salida) both; }
.etapa-motivo[hidden] { display: none; }
.etapa-motivo textarea { min-height: 5rem; }

/* =========================================================================================================================
   7. Mensajes para esta persona y otras vacantes
   ========================================================================================================================= */
.msj-botones { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e2); }
.msj-botones .boton { width: 100%; justify-content: flex-start; padding-right: 1rem; text-align: left; }
.msj-botones .boton .icono { width: 1.05rem; height: 1.05rem; }
/* Lo que todavía no se puede hacer no se apaga: sigue a la vista, con borde discontinuo, y al pulsarlo dice por qué */
.msj-botones .boton[aria-disabled="true"] { opacity: 1; cursor: pointer; border-style: dashed; }
.msj-conversacion { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
.msj-advertencias { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.3rem; }
.msj-advertencias li { display: flex; align-items: flex-start; gap: 0.5rem; }
.msj-advertencias .icono { flex: none; width: 1rem; height: 1rem; margin-top: 0.15rem; color: var(--ambar); }
.msj-resultado { scroll-margin-top: var(--e4); }
.ficha-otras > li { padding-block: 0; border: 0; }
.ficha-otras .fila-enlace { margin: 0 calc(var(--e2) * -1); padding-block: 0.5rem; }

/* =========================================================================================================================
   8. Historial
   ========================================================================================================================= */
.ficha-historial-caja { max-height: 26rem; overflow-y: auto; padding: 0 0.25rem 0 0; scrollbar-width: thin; border-radius: 0.5rem; }
.ficha-historial > li { align-items: flex-start; }
.hist-fecha { flex: none; white-space: nowrap; text-align: right; }
.hist-motivo { overflow-wrap: anywhere; }

/* =========================================================================================================================
   9. Ajustes → Selección
   ========================================================================================================================= */
.ajsel-plantilla { display: flex; flex-direction: column; gap: var(--e3); padding-bottom: var(--e4); border-bottom: 1px solid var(--ln); }
.ajsel-plantilla:last-of-type { border-bottom: 0; }
.ajsel-plantilla textarea { min-height: 11rem; line-height: 1.6; }
/* Con sitio, el texto y su vista previa quedan lado a lado: se ve el efecto de cada cambio sin desplazarse */
@container principal (min-width: 960px) {
  .ajsel-plantilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "campo vista" "vars vista" "aviso vista"; gap: var(--e3) var(--e5); align-items: start; }
  .ajsel-plantilla > .campo { grid-area: campo; }
  .ajsel-plantilla > .ajsel-variables { grid-area: vars; }
  .ajsel-plantilla > .ajsel-desconocida { grid-area: aviso; }
  .ajsel-plantilla > .ajsel-vista { grid-area: vista; }
  .ajsel-burbuja { max-width: none; }
}
.ajsel-variables { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
.ajsel-variables .boton { font-family: var(--fuente); }
.ajsel-contador { margin-left: auto; font-variant-numeric: tabular-nums; }
.ajsel-vista { display: flex; flex-direction: column; gap: var(--e2); }
.ajsel-burbuja { border: 1px solid var(--bd); border-radius: 0.3rem 1.1rem 1.1rem 1.1rem; padding: var(--e3) var(--e4); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; background: var(--r1); max-width: 34rem; }
.ajsel-desconocida { color: var(--ambar); font-weight: 700; }
#form-seleccion .opcion { align-items: flex-start; }
#form-seleccion .opcion input { margin-top: 0.1rem; }
.ajsel-guardar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); }

/* =========================================================================================================================
   10. Reportes: personas por columna y de la solicitud a la oferta
   ========================================================================================================================= */
#rep-sel-columnas .medidor-fino, #rep-sel-oferta .medidor-fino { max-width: 22rem; }
.rep-nota { margin: 0; }

/* =========================================================================================================================
   11. Pantallas angostas y táctiles, y movimiento reducido
   ========================================================================================================================= */
@media (max-width: 899px), (pointer: coarse) {
  .ficha-chip, .pilar > summary, .eval > summary { min-height: 2.75rem; }
  .ff-pildora span, .eval-opciones .ff-pildora span, .preg-opciones .ff-pildora span { min-height: 2.75rem; }
  .msj-botones .boton { min-height: 2.75rem; }
  .ficha-historial-caja { max-height: 22rem; }
}
@container principal (max-width: 679px) {
  .ficha-datos > div { grid-template-columns: 4.6rem minmax(0, 1fr); }
  .eval-lectura > div { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
  .eval-cuerpo, .pilar-puntos { padding-inline: 0.85rem; }
  .pilar-vacio { padding-inline: 0.85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ficha-aviso:not([hidden]), .etapa-motivo, .ficha-salida, .guardado[data-estado="guardado"] { animation: none; }
  .pilar > summary::after, .eval > summary::after, .ficha-chip, .ficha-chip .icono { transition: none; }
}