/* Selección, Fase 1: desglose del puntaje, tablero de seis columnas, preguntas, pesos, textos por canal, volante y ficha. Las reglas de la marca no cambian (ver DESIGN.md). */

/* =============================== Desglose del puntaje (compartido con la ficha) =============================== */
.desglose { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.desglose-fila { display: grid; gap: 0.35rem; }
.desglose-cabeza { display: grid; grid-template-columns: minmax(7rem, 1.3fr) minmax(4rem, 2fr) minmax(3.2rem, auto) minmax(4.5rem, auto); align-items: center; gap: 0.6rem; }
.desglose-fila > .pequeno { margin: 0; }
.desglose-barra { display: block; height: 0.5rem; border-radius: 99px; background: color-mix(in srgb, var(--tx) 12%, transparent); overflow: hidden; }
.desglose-barra > span { display: block; height: 100%; border-radius: 99px; background: var(--tx); }
.desglose-fila[data-estado="sin_datos"] .desglose-barra > span { width: 0 !important; }
.desglose-valor { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
/* En un espacio angosto (la burbuja de una tarjeta, una celda de la revisión rápida) cada pilar ocupa dos líneas: nombre y valor, y debajo su barra y su peso */
.vac-pop .desglose-fila, .vac-revision .desglose-fila { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n v" "b p"; row-gap: 0.25rem; }
.vac-pop .desglose-nombre, .vac-revision .desglose-nombre { grid-area: n; font-weight: 600; }
.vac-pop .desglose-valor, .vac-revision .desglose-valor { grid-area: v; }
.vac-pop .desglose-barra, .vac-revision .desglose-barra { grid-area: b; }
.vac-pop .desglose-peso, .vac-revision .desglose-peso { grid-area: p; text-align: right; }

/* Hoy: «+1 vacante más · Ver todas» debajo de las dos vacantes que caben en el recuadro */
.resumen-mas { margin: 0.35rem 0 0; font-size: var(--paso--1); }


/* =============================== La pantalla de la vacante: pestañas y cuerpo =============================== */
.vac-contenido { display: flex; flex-direction: column; gap: var(--gap-seccion, 2.25rem); min-width: 0; }
.vac-panel { display: flex; flex-direction: column; gap: var(--gap-seccion, 2.25rem); min-width: 0; }
.vac-aviso-zona:empty { display: none; }
.vac-segmentos .segmento > span { display: inline-flex; align-items: center; gap: 0.35rem; }
.vac-sucio { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; flex: none; }
/* Las cuatro pestañas siguen en una sola fila también en pantalla angosta: cada una mide lo que pide su texto (y el texto se achica un poco en 320 px) */
@media (max-width: 520px) {
  .vac-segmentos { display: flex; max-width: 100%; }
  .vac-segmentos .segmento { flex: 1 1 auto; padding-inline: 0.2rem; min-width: 0; }
}
@media (max-width: 359px) { .vac-segmentos .segmento { font-size: 0.72rem; letter-spacing: -0.01em; } }
/* En esta pantalla la miga de pan ocupa una sola línea (el nombre del cargo se acorta con «…»): el contenido queda a la vista en pantallas bajas */
.vista:has(.vac-panel) .migas { flex-wrap: nowrap; min-width: 0; }
.vista:has(.vac-panel) .migas > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vac-cambios { border-width: 2px; }
.vac-cambios .hoja-titulo h2 { font-size: var(--paso-2); }

/* =============================== Candidatos: carga de currículos =============================== */
.vac-carga .hoja-titulo h2 { font-size: var(--paso-2); }
.vac-soltar { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--e3) var(--e4); padding: var(--e3) var(--e4); }
.vac-soltar-texto { flex: 1 1 18rem; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
#vac-cola-zona:empty, #vac-rechazados-zona:empty { display: none; }
.vac-cola { display: flex; flex-direction: column; gap: var(--e3); padding: var(--e4); border: 1px solid var(--ln); border-radius: 1rem; background: var(--r1); }
.vac-cola-cabeza { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); flex-wrap: wrap; }
.vac-cola-barra { height: 4px; border-radius: 99px; background: color-mix(in srgb, var(--tx) 12%, transparent); overflow: hidden; }
.vac-cola-barra > span { display: block; height: 100%; border-radius: 99px; background: var(--tx); transition: width 0.3s var(--salida); }
.vac-cola-vivo { max-height: 15rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: auto; }
.vac-cola-lista > li { padding-block: var(--e2); }
.vac-arch-nombre { overflow-wrap: anywhere; }
.vac-cola-resumen { font-size: var(--paso-0); }
.vac-leyendo { width: 0.8em; height: 0.8em; flex: none; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: gira 0.8s linear infinite; }
.vac-rechazados > summary { color: var(--tx-2); }
.vac-rechazados[open] > summary { color: var(--tx); }

/* =============================== Candidatos: barra de herramientas y tablero =============================== */
.vac-barra { display: flex; align-items: center; justify-content: space-between; gap: var(--e3) var(--e4); flex-wrap: wrap; }
.vac-herramientas { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; min-width: 0; }
.vac-ayuda { max-width: 70ch; }
.vac-cuerpo { display: flex; flex-direction: column; gap: var(--e5); min-width: 0; }
/* El resumen de columnas solo hace falta cuando el tablero no cabe entero a lo ancho */
.vac-resumen-cols { display: none; flex-wrap: wrap; gap: var(--e2); margin-bottom: calc(var(--e5) * -0.5); }
.vac-ir-col { cursor: pointer; background: transparent; color: var(--tx); font-family: inherit; gap: 0.5rem; }
.vac-ir-col:hover { border-color: var(--tx); background: var(--r3); }
.vac-ir-col strong { font-weight: 800; }
@container principal (max-width: 1000px) { .vac-resumen-cols { display: flex; } }
.vac-ir-col[aria-pressed="true"] { border-color: var(--tx); font-weight: 800; }
@media (max-width: 899px), (pointer: coarse) { .vac-ir-col { min-height: 2.75rem; } }

/* Seis columnas: caben todas cuando hay sitio; si no, el tablero se desplaza por dentro (la página nunca) */
.columnas.vac-tablero { --col-min: 10.5rem; display: grid; grid-template-columns: repeat(var(--cols, 6), minmax(var(--col-min), 1fr)); gap: var(--e2); align-items: stretch; overflow-x: auto; overflow-y: hidden; padding: 2px; margin: -2px; scroll-snap-type: x proximity; }
@container principal (max-width: 1000px) { .columnas.vac-tablero { --col-min: 13.5rem; } }
@container principal (max-width: 600px) { .columnas.vac-tablero { --col-min: min(17rem, 78cqw); } }
.vac-col { flex: none; min-width: 0; padding: var(--e2); gap: var(--e2); min-height: 8rem; max-height: max(22rem, calc(100dvh - 8rem)); scroll-snap-align: start; transition: border-color 0.2s, background-color 0.2s; }
.vac-col[data-soltar] { border: 1px dashed var(--tx); background: var(--r3); }
/* El nombre de la columna nunca se parte en medio de una palabra («Seleccionad / o»): si no cabe con su conteo y su casilla, estos pasan a la línea de abajo */
.vac-col .columna-titulo { align-items: flex-start; flex-wrap: nowrap; padding: var(--e1) var(--e1) 0; }   /* el contador queda en la primera línea aunque el nombre de la etapa ocupe dos */   /* el contador no baja de línea */
.vac-col .columna-titulo > span:first-child { flex: 1 1 auto; min-width: 0; overflow-wrap: normal; word-break: normal; }
.vac-col-marca { margin-left: auto; display: inline-grid; place-items: center; cursor: pointer; flex: none; }
.vac-col-vacia { padding: var(--e2) var(--e1); margin: 0; }
/* El relleno de 6 px (compensado con margen negativo) deja sitio al anillo de foco de las tarjetas, que si no lo recortaría la propia lista */
.vac-col-lista { list-style: none; margin: -6px; padding: 6px; display: flex; flex-direction: column; gap: var(--e2); min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: auto; }
/* En pantalla angosta se ve UNA columna a la vez (la que se elige arriba): la página se desplaza hacia abajo, nunca hacia los lados */
@container principal (max-width: 600px) {
  .columnas.vac-tablero { display: block; overflow: visible; margin: 0; padding: 0; scroll-snap-type: none; }
  .vac-tablero .vac-col:not([data-activa]) { display: none; }
  .vac-tablero .vac-col { max-height: none; }
  .vac-tablero .vac-col-lista { max-height: none; overflow: visible; margin: 0; padding: 0; }
  .vac-ir-col[aria-pressed="true"] { background: var(--tx); color: var(--fondo); border-color: var(--tx); }
}

/* La tarjeta: una sola caja (borde, fondo y movimiento viven en el contenedor; el enlace va dentro, sin marco) */
.vac-item { position: relative; display: flex; flex-direction: column; background: var(--fondo); border: 1px solid var(--bd); border-radius: 1rem; transition: border-color 0.2s, background-color 0.2s, translate 0.2s var(--salida); }
.vac-item:hover { border-color: var(--tx); translate: 0 -2px; }
.vac-item > .papelito { border: 0; background: transparent; border-radius: 1rem 1rem 0 0; padding: 0.6rem 0.7rem 0.4rem; gap: var(--e1); min-width: 0; }
.vac-item > .papelito:hover { translate: 0 0; border-color: transparent; }
.vac-item > .papelito[data-arrastrando] { opacity: 0.6; }
.vac-item .papelito-cabeza { min-width: 0; }
.vac-item .papelito-cabeza strong { min-width: 0; overflow-wrap: anywhere; padding-right: 0.25rem; font-size: 0.875rem; }
.vac-item .circulo-mano { width: 2.4rem; height: 1.9rem; font-size: 0.9rem; }
.vac-item .papelito .chip { white-space: normal; align-self: flex-start; font-size: 0.72rem; padding: 0.05rem 0.5rem 0.05rem 0.45rem; gap: 0.3rem; line-height: 1.45; }
.vac-item .papelito .chip .icono { width: 0.95em; height: 0.95em; }
.vac-etapa { font-size: var(--paso--1); font-weight: 600; color: var(--tx-2); }
.vac-avisos { display: flex; flex-wrap: wrap; gap: var(--e1); }
/* Elegida: fondo suave y una barra fina a la izquierda. No se atenúa nada de lo demás. */
.vac-item[data-elegida] { background: var(--r2); border-color: var(--tx); }
.vac-item[data-elegida]::before { content: ""; position: absolute; left: -1px; top: 0.75rem; bottom: 0.75rem; width: 3px; border-radius: 0 3px 3px 0; background: var(--tx); }
/* El puntaje se pulsa: un botón transparente sobre el círculo (nunca dentro del enlace) */
.vac-puntaje { position: absolute; top: 0.6rem; right: 0.7rem; width: 2.4rem; height: 1.9rem; padding: 0; border: 0; border-radius: 99px; background: transparent; cursor: pointer; transition: background-color 0.15s; }
.vac-puntaje:hover { background: color-mix(in srgb, var(--tx) 9%, transparent); }
.vac-puntaje[aria-expanded="true"] { background: color-mix(in srgb, var(--tx) 14%, transparent); }
.vac-item-pie { display: flex; align-items: center; gap: var(--e2); padding: 0 0.45rem 0.5rem 0.35rem; min-width: 0; }
.vac-item-pie .chip { min-width: 0; max-width: 100%; }
.vac-elegir { display: inline-grid; place-items: center; cursor: pointer; flex: none; }
.vac-elegir input[type="checkbox"], .vac-col-marca input[type="checkbox"], .vac-canales input[type="checkbox"] { --obj: 1.75rem; appearance: none; -webkit-appearance: none; position: relative; width: var(--obj); min-width: var(--obj); height: var(--obj); min-height: var(--obj); margin: 0; padding: 0; border: 0; border-radius: 0.5rem; background: transparent; cursor: pointer; }
.vac-elegir input[type="checkbox"]::before, .vac-col-marca input[type="checkbox"]::before, .vac-canales input[type="checkbox"]::before { content: ""; position: absolute; left: 50%; top: 50%; width: 1.25rem; height: 1.25rem; translate: -50% -50%; border: 1.5px solid var(--bd); border-radius: 0.35rem; background: var(--sup); transition: background-color 0.15s, border-color 0.15s; }
.vac-elegir input[type="checkbox"]:hover::before, .vac-col-marca input[type="checkbox"]:hover::before, .vac-canales input[type="checkbox"]:hover::before { border-color: var(--tx); }
.vac-elegir input[type="checkbox"]:checked::before, .vac-col-marca input[type="checkbox"]:checked::before, .vac-canales input[type="checkbox"]:checked::before { background: var(--tx); border-color: var(--tx); }
.vac-elegir input[type="checkbox"]:checked::after, .vac-col-marca input[type="checkbox"]:checked::after, .vac-canales input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0.32rem; height: 0.62rem; border: solid var(--fondo); border-width: 0 2px 2px 0; translate: -50% -64%; rotate: 45deg; }
.vac-mover { flex: 1 1 auto; min-width: 0; justify-content: space-between; white-space: nowrap; padding: 0.25rem 0.55rem 0.25rem 0.8rem; gap: 0.25rem; }
.vac-mover .icono { width: 1em; height: 1em; }
@media (max-width: 899px), (pointer: coarse) {
  .vac-elegir input[type="checkbox"], .vac-col-marca input[type="checkbox"], .vac-canales input[type="checkbox"] { --obj: 2.75rem; }
  .vac-puntaje { width: 2.75rem; min-width: 2.75rem; height: 2.75rem; min-height: 2.75rem; top: 0.25rem; right: calc(0.7rem - 0.2rem); }
  .vac-item-pie { padding-left: 0.1rem; }
}

/* El desglose del puntaje: flota sobre el tablero, no mueve nada de lo que hay debajo */
.vac-pop { position: fixed; z-index: 45; display: flex; flex-direction: column; gap: var(--e2); max-width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); overflow-y: auto; padding: var(--e3) var(--e4); background: var(--fondo); color: var(--tx); border: 1px solid var(--tx); border-radius: 1rem; animation: aparecer 0.12s ease-out both; }
.vac-pop[hidden] { display: none; }
.vac-pop-titulo { display: flex; justify-content: space-between; gap: var(--e3); align-items: baseline; margin: 0; }
.vac-pop-titulo span { font-weight: 800; font-variant-numeric: tabular-nums; }

/* Selección múltiple: la barra queda fija abajo mientras haya alguien elegido */
.vac-barra-sel { position: sticky; bottom: var(--e4); z-index: 30; align-self: flex-start; display: flex; align-items: center; gap: var(--e3) var(--e5); flex-wrap: wrap; max-width: 100%; padding: var(--e3) var(--e4); background: var(--fondo); border: 1.5px solid var(--tx); border-radius: 1.25rem; animation: entrar 0.25s var(--salida) both; }
.vac-sel-cuenta { font-weight: 600; }
.vac-sel-cuenta strong { font-weight: 800; font-size: var(--paso-1); }
.vac-quitar::before { display: none; }
.vac-quitar:not(.chico) { padding-right: 1.1rem; }
@media (max-width: 600px) {
  .vac-barra-sel { align-self: stretch; gap: var(--e2); }
  .vac-barra-sel .fila-flex { flex-wrap: nowrap; flex: 1 1 100%; }
  .vac-barra-sel .fila-flex .boton:first-child { flex: 1 1 auto; }
  /* En pantalla angosta «Quitar la selección» queda como una X (conserva su nombre para los lectores de pantalla) */
  .vac-quitar { flex: none; padding: 0; width: 2.75rem; min-width: 2.75rem; }
  .vac-quitar span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Descartados: siempre debajo del tablero; aquí también se puede soltar una tarjeta */
.vac-descartados { transition: border-color 0.2s, background-color 0.2s; }
.vac-descartados[data-soltar] { border: 1px dashed var(--tx); background: var(--r3); }
.vac-descartados .lista > li { align-items: center; }

/* Revisión rápida: cada celda trae su desglose y sus avisos */
.vac-revision.celdas { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.vac-revision .celda { min-width: 0; }
.vac-desglose-celda { padding-block: var(--e1); }

/* «Mover a» y «Primer contacto» (emergentes) */
.vac-destinos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.vac-destino { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--e3); width: 100%; min-height: 3rem; padding: 0.55rem 1rem; text-align: left; border: 1px solid var(--bd); border-radius: 1rem; background: transparent; color: var(--tx); cursor: pointer; transition: border-color 0.15s, background-color 0.15s; }
.vac-destino > .icono { grid-column: 2; grid-row: 1 / span 2; width: 1.1rem; height: 1.1rem; color: var(--tx-2); transition: translate 0.2s var(--salida); }
.vac-destino:hover { border-color: var(--tx); background: var(--r3); }
.vac-destino:hover > .icono, .vac-destino:focus-visible > .icono { translate: 3px 0; color: var(--tx); }
.vac-destino[data-peligro] { border-style: dashed; }
.vac-destino[aria-pressed="true"] { border-color: var(--tx); background: var(--r2); }
.vac-pc-personas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e1) var(--e2); max-height: 6.5rem; overflow-y: auto; }
.vac-pc-personas li { border: 1px solid var(--ln); border-radius: 99px; padding: 0.1rem 0.75rem; font-size: var(--paso--1); font-weight: 600; }
.vac-pc-resultados { max-height: 16rem; overflow-y: auto; }
.emergente .explica strong { font-weight: 700; }

/* =============================== Perfil: pesos, descriptivo y formularios =============================== */
.vac-pesos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--e4); align-items: stretch; }
.vac-peso { gap: 0.35rem; }
.vac-peso-entrada { display: flex; align-items: center; gap: var(--e2); font-weight: 700; margin-top: auto; padding-top: var(--e2); }
.vac-ficha .etiqueta { display: block; margin-bottom: 0.15rem; }
.vac-ficha .rejilla-campos p { margin: 0; }
.vac-rechazados > summary, #bloque-solicitud details.mini > summary { gap: var(--e2); cursor: pointer; }
.vac-rechazados > summary::after, #bloque-solicitud details.mini > summary::after { content: ""; width: 0.55rem; height: 0.55rem; margin-left: 0.15rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: 45deg; translate: 0 -2px; flex: none; transition: rotate 0.25s var(--salida); }
.vac-rechazados[open] > summary::after, #bloque-solicitud details.mini[open] > summary::after { rotate: 225deg; translate: 0 2px; }
.vac-peso-entrada input { width: 6rem; }
.vac-suma { font-weight: 700; display: flex; align-items: center; gap: var(--e2); }
.vac-suma[data-ok="false"]::before { content: "!"; flex: none; display: inline-grid; place-items: center; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--tx); color: var(--fondo); font-size: 0.75rem; font-weight: 800; }
.vac-suma[data-ok="true"]::before { content: ""; margin-left: 3px; flex: none; width: 3px; height: 0.95em; background: var(--celeste); transform: skewX(-22deg); border-radius: 1px; }
.vac-propuesta { border: 1px dashed var(--bd); border-radius: 1rem; padding: var(--e4); }
.vac-sin-clasificar { white-space: pre-wrap; margin-top: var(--e2); }
#descriptivo-texto { min-height: 9rem; }
.vac-campos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e3); }
.vac-campo { display: grid; grid-template-columns: minmax(10rem, 2fr) minmax(9rem, 1fr) auto; gap: var(--e3); align-items: end; padding-bottom: var(--e3); border-bottom: 1px solid var(--ln); }
.vac-campo:last-child { border-bottom: 0; padding-bottom: 0; }
.vac-campo-opciones { grid-column: 1 / -1; }
@media (max-width: 640px) { .vac-campo { grid-template-columns: minmax(0, 1fr); } .vac-campo > .boton { justify-self: start; } }

/* =============================== Preguntas =============================== */
.vac-nota { display: flex; align-items: flex-start; gap: var(--e2); padding: var(--e3) var(--e4); border: 1px dashed var(--bd); border-radius: 1rem; color: var(--tx); font-weight: 600; }
.vac-nota .icono { margin-top: 0.2em; }
.vac-preguntas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e4); }
.vac-preg { display: flex; flex-direction: column; gap: var(--e3); padding: var(--e4); border: 1px solid var(--ln); border-radius: 1rem; background: var(--r1); min-width: 0; }
.vac-preg-cabeza { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.vac-preg-num { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border: 1.5px solid var(--tx); border-radius: 50%; font-weight: 800; flex: none; }
.vac-preg-acciones { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--e2); }
.vac-sube { rotate: -90deg; }
.vac-baja { rotate: 90deg; }
.vac-preg-fila { display: grid; grid-template-columns: minmax(9rem, 1fr) minmax(10rem, 1.5fr) auto; gap: var(--e3) var(--e4); align-items: end; }
.vac-opciones, .vac-numero { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--e2); }
.vac-opciones > legend, .vac-numero > legend { padding: 0; margin-bottom: var(--e2); font-size: var(--paso--1); font-weight: 700; color: var(--tx-2); letter-spacing: 0.02em; }
.vac-opcion { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(8.5rem, 11rem) auto; gap: var(--e2); align-items: center; }
.vac-letra { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--bd); border-radius: 50%; font-weight: 800; flex: none; }
.vac-numero { flex-direction: row; flex-wrap: wrap; gap: var(--e3) var(--e4); align-items: flex-end; }
.vac-numero > legend { flex: 0 0 100%; }
.vac-numero .campo { flex: 1 1 9rem; }
.vac-por-confirmar { display: flex; align-items: center; gap: var(--e2) var(--e3); flex-wrap: wrap; }
.vac-barra-guardar { position: sticky; bottom: var(--e3); z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: var(--e3) var(--e4); flex-wrap: wrap; padding: var(--e3) var(--e4); background: var(--fondo); border: 1px solid var(--bd); border-radius: 1.25rem; }
.vac-estado-guardado { font-weight: 600; color: var(--tx-2); display: inline-flex; align-items: center; gap: var(--e2); }
.vac-estado-guardado[data-sucio="true"] { color: var(--tx); font-weight: 800; }
.vac-estado-guardado[data-sucio="true"]::before { content: ""; width: 3px; height: 0.95em; background: var(--amarillo); transform: skewX(-22deg); border-radius: 1px; }
@media (max-width: 760px) {
  .vac-preg-fila { grid-template-columns: minmax(0, 1fr); }
  .vac-opcion { grid-template-columns: auto minmax(0, 1fr) auto; }
  .vac-opcion > select, .vac-opcion > .sel { grid-column: 2 / span 2; grid-row: 2; }
  .vac-preg-acciones { margin-left: 0; width: 100%; }
}

/* Interruptor: una casilla que se ve como interruptor (sigue siendo una casilla para el teclado y los lectores de pantalla). La casilla mide 44 px de alto; el interruptor se dibuja dentro. */
.interruptor { display: inline-flex; align-items: center; gap: var(--e2); min-height: 2.75rem; font-weight: 700; cursor: pointer; }
.interruptor > input[type="checkbox"] { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 2.75rem; min-width: 2.75rem; height: 2.75rem; min-height: 2.75rem; margin: 0; padding: 0; border: 0; border-radius: 0.6rem; background: transparent; cursor: pointer; }
.interruptor > input[type="checkbox"]::before { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1.55rem; margin-top: -0.775rem; border: 1.5px solid var(--bd); border-radius: 99px; background: transparent; transition: background-color 0.2s, border-color 0.2s; }
.interruptor > input[type="checkbox"]::after { content: ""; position: absolute; left: 5px; top: 50%; width: 1.05rem; height: 1.05rem; margin-top: -0.525rem; border-radius: 50%; background: var(--tx-2); transition: translate 0.2s var(--salida), background-color 0.2s; }
.interruptor > input[type="checkbox"]:hover::before { border-color: var(--tx); }
.interruptor > input[type="checkbox"]:checked::before { background: var(--tx); border-color: var(--tx); }
.interruptor > input[type="checkbox"]:checked::after { translate: 1.1rem 0; background: var(--fondo); }
.interruptor > input[type="checkbox"]:disabled { cursor: not-allowed; opacity: 0.55; }

/* =============================== Publicación =============================== */
.vac-publicacion { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-seccion, 2.25rem); align-items: start; }
@container principal (min-width: 860px) { .vac-publicacion { grid-template-columns: minmax(0, 1.7fr) minmax(15rem, 1fr); } }
.vac-textos, .vac-lateral { min-width: 0; }
.vac-canal-acciones { align-items: center; }
.vac-versiones { margin-left: auto; min-width: 0; max-width: 100%; }
@media (min-width: 900px) and (pointer: fine) { .vac-versiones select { min-height: 2.1rem; padding-block: 0.2rem; font-size: var(--paso--1); } }
.vac-canal textarea { min-height: 9rem; }
.vac-canal textarea[readonly] { background: var(--r1); }
.vac-canales { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: var(--e1) var(--e4); }
.vac-canales .opcion { align-items: center; gap: var(--e1); }
.vac-volante { margin: 0; }
.vac-volante img { display: block; width: 100%; max-width: 22rem; height: auto; border: 1px solid var(--bd); border-radius: 0.75rem; background: #fff; }
.vac-volante-impresion { display: none; }
/* Pieza gráfica compuesta con Sofía: elección de formato, lista de piezas con su vista previa (la imagen conserva su proporción) */
.vac-pieza-formatos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: var(--e1) var(--e3); margin-bottom: var(--e2); }
.vac-pieza-formatos .opcion { align-items: center; gap: var(--e1); }
.vac-pieza-formatos small { display: block; font-size: var(--paso--2); }
.vac-piezas li { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e2); align-items: start; }
@container principal (min-width: 1100px) { .vac-piezas li { grid-template-columns: 9rem minmax(0, 1fr); } }
.vac-pieza { margin: 0; }
.vac-pieza img { display: block; width: 100%; max-width: 22rem; height: auto; border: 1px solid var(--bd); border-radius: 0.75rem; background: #000; }
.vac-piezas .fila-flex { gap: var(--e1) var(--e2); }
.vac-piezas .boton[aria-disabled="true"], #bloque-piezas .boton[aria-disabled="true"] { opacity: 0.6; }
.vac-plazo { display: flex; align-items: center; gap: var(--e2); font-weight: 700; margin: 0; }
.vac-plazo[data-nivel="proximo"] { color: var(--ambar); }
.vac-plazo[data-nivel="vencido"] { color: var(--rojo); }
.vac-conservados { display: flex; flex-direction: column; gap: var(--e2); align-items: flex-start; }
@media print {
  /* Imprimir el volante: el de texto (como siempre) o, si Sofía todavía no redactó, la imagen de la vista previa */
  body[data-imprimir="volante"] .vac-volante-impresion { display: flex; }
  body[data-imprimir="volante-imagen"] * { visibility: hidden; }
  body[data-imprimir="volante-imagen"] .vac-volante, body[data-imprimir="volante-imagen"] .vac-volante * { visibility: visible; }
  body[data-imprimir="volante-imagen"] .vac-volante { position: absolute; left: 0; top: 0; width: 100%; }
  body[data-imprimir="volante-imagen"] .vac-volante img { max-width: 100%; border: 0; }
  .vac-pop, .vac-barra-sel { display: none !important; }
}

/* El conteo de cada columna del tablero queda a la derecha aunque el nombre ocupe toda la línea */
.vac-col .columna-titulo > span:nth-child(2) { margin-left: auto; }

/* ---------- Material para enviar (pestaña Publicación de la vacante) ----------
   Cinco piezas en tarjetas de la misma altura: miniatura o icono a la izquierda y lo de siempre a la derecha (una columna en celular). Cada acción es un botón
   de la misma altura que el resto de Sofía; en celular, 44 px. Colores solo de tokens; el color solo dice algo (vigente = tinta, en revisión = ámbar). */
.mat-seccion { gap: var(--e4); }
.mat-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e4); min-width: 0; }
@container principal (min-width: 46rem) { .mat-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mat-pieza { display: grid; grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); gap: var(--e4); align-items: start; min-width: 0; padding: var(--e4); border: 1px solid var(--bd); border-radius: var(--radio); background: var(--fondo); animation: mat-entra 0.22s var(--salida) both; }
@media (max-width: 26rem) { .mat-pieza { grid-template-columns: minmax(0, 1fr); } .mat-medio { width: 100%; max-width: 12rem; } }
@keyframes mat-entra { from { opacity: 0; translate: 0 4px; } }
@media (prefers-reduced-motion: reduce) { .mat-pieza { animation: none; } .mat-dec-op { transition: none; } }
.mat-medio { width: 7.5rem; aspect-ratio: 4 / 5; border: 1px solid var(--ln); border-radius: 0.75rem; overflow: hidden; background: var(--sup); display: grid; place-items: center; min-width: 0; }
.mat-medio img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mat-medio-doc, .mat-medio-vacio { display: grid; justify-items: center; align-content: center; gap: var(--e1); color: var(--tx-2); font-size: var(--paso--1); padding: var(--e2); text-align: center; }
.mat-medio-doc svg, .mat-medio-vacio svg { width: 1.6rem; height: 1.6rem; }
.mat-medio-vacio { color: var(--tx-3); border: 1px dashed var(--bd); border-radius: 0.75rem; width: 100%; height: 100%; }
.mat-cuerpo { display: flex; flex-direction: column; gap: var(--e2); min-width: 0; }
.mat-cabeza { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.mat-cabeza h3 { margin: 0; font-size: var(--paso-1); line-height: 1.25; overflow-wrap: anywhere; }
.mat-cuerpo p { margin: 0; }
.mat-url { overflow-wrap: anywhere; word-break: break-word; }
.mat-acciones { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.mat-acciones > * { flex: none; }
.mat-aviso { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); border: 1px dashed var(--bd); border-radius: 0.9rem; padding: var(--e2) var(--e3); font-size: var(--paso--1); line-height: 1.45; color: var(--tx); }
.mat-aviso > svg { flex: none; }
.mat-aviso > span { flex: 1 1 14rem; min-width: 0; }
.mat-decision { display: flex; flex-direction: column; gap: var(--e3); border: 1px solid var(--tx); border-radius: 0.9rem; padding: var(--e3) var(--e4); background: var(--sup); animation: mat-entra 0.22s var(--salida) both; }
.mat-dec-titulo { font-size: var(--paso--1); line-height: 1.5; }
.mat-dec-titulo:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; border-radius: 0.3rem; }
.mat-dec-opciones { display: flex; flex-direction: column; gap: var(--e2); }
.mat-dec-op { display: grid; gap: 0.15rem; width: 100%; min-height: 2.75rem; text-align: left; padding: var(--e2) var(--e3); border: 1px solid var(--bd); border-radius: 0.8rem; background: var(--fondo); color: var(--tx); font: inherit; cursor: pointer; transition: border-color 0.15s; }
.mat-dec-op:hover, .mat-dec-op:focus-visible { border-color: var(--tx); outline: 2px solid var(--foco); outline-offset: 2px; }
.mat-dec-op strong { font-size: var(--paso--1); font-weight: 700; }
.mat-dec-op span { color: var(--tx-2); font-size: var(--paso--1); line-height: 1.45; font-weight: 400; }
.mat-dec-no { align-self: flex-start; }
.mat-vista-grande { margin: 0; text-align: center; }
.mat-vista-grande img { max-width: 100%; max-height: 70vh; height: auto; border: 1px solid var(--bd); border-radius: 0.75rem; background: var(--sup); }
.mat-versiones { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mat-versiones > li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--e2) var(--e3); padding: var(--e3) 0; border-bottom: 1px solid var(--ln); min-width: 0; }
.mat-versiones > li:last-child { border-bottom: 0; }
.mat-version-datos { display: grid; gap: 0.15rem; min-width: 0; flex: 1 1 14rem; }
.mat-version-datos p { margin: 0; overflow-wrap: anywhere; }
.mat-version-acciones { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.mat-archivo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 899px), (pointer: coarse) {
  .mat-acciones .boton, .mat-version-acciones .boton, .mat-version-acciones a.boton, .mat-dec-no { min-height: 2.75rem; }
}
/* Un error del formulario de enlace: texto y un «!» (sin depender del color). Se usa esta clase y no .error-campo, que el validador general quita al enviar. */
.mat-error { display: flex; align-items: flex-start; gap: var(--e2); color: var(--tx); font-weight: 700; font-size: var(--paso--1); line-height: 1.4; }
.mat-error::before { content: "!"; flex: none; display: inline-grid; place-items: center; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--tx); color: var(--fondo); font-size: 0.8rem; }
.mat-error[hidden] { display: none; }

/* =============================== Piloto Aromacom: coincidencia preliminar, evidencias, ponderación confirmada y perfil pendiente =============================== */
/* El aviso de resultado provisional: texto con una barra, sin color de descarte ni de ganador */
.aviso-provisional { margin: 0; padding: 0.4rem 0.6rem; border-left: 3px solid var(--tx); font-size: var(--paso--1); line-height: 1.4; color: var(--tx-2); }
/* Cada evidencia: criterio + nivel, el fragmento exacto del currículo, dónde está (sección y página) y el motivo */
.evidencias { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.evidencia { display: grid; gap: 0.25rem; padding: 0.55rem 0.7rem; border: 1px solid var(--ln); border-radius: 0.5rem; }
.evidencia p { margin: 0; }
.evidencia-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.evidencia-fragmento { margin: 0; padding-left: 0.6rem; border-left: 2px solid var(--ln); color: var(--tx); font-style: italic; line-height: 1.45; overflow-wrap: anywhere; }
/* El orden de la lista (por defecto, el número de candidato) y el aviso que va encima */
.vac-orden { display: grid; gap: 0.5rem; margin-bottom: 0.75rem; }
.vac-orden-campo { max-width: 22rem; }
.papelito-numero { display: block; }
/* Perfil preparado por Hapwork: pendiente de aprobación de Aromacom (nunca se ve como aprobado) */
.perfil-pendiente { margin: 0.5rem 0 0.75rem; padding: 0.6rem 0.8rem; border-left: 3px solid var(--tx); background: var(--sup); }
/* Confirmar la ponderación (solo RR. HH.) */
.pesos-confirmar { display: grid; gap: 0.5rem; margin-top: 0.75rem; justify-items: start; }
@media (max-width: 640px) {
  .vac-orden .sel-boton, .pesos-confirmar > .boton { min-height: 2.75rem; }
}
/* Equivalencias de la vacante: un término, sus sinónimos y quitarlo (en celular, una columna y 44 px de alto) */
.equiv-editor { display: grid; gap: 0.6rem; }
.equiv-fila { display: grid; gap: 0.5rem; grid-template-columns: minmax(10rem, 1fr) minmax(12rem, 2fr) auto; align-items: end; padding: 0.5rem 0; border-bottom: 1px solid var(--ln); }
.umbrales-lista { margin-top: 0.25rem; }
@media (max-width: 640px) {
  .equiv-fila { grid-template-columns: 1fr; }
  .equiv-fila .boton, .equiv-fila input { min-height: 2.75rem; }
}

/* La franja de avisos del entorno de piloto (SOFIA_AVISOS_PILOTO=1): una línea de texto al principio del contenido, en el flujo normal de la página.
   No flota ni tapa nada: los botones, las pestañas y la nota de la barra lateral quedan siempre a la vista, en claro y en oscuro */
.avisos-piloto { position: relative; z-index: 1; display: block; box-sizing: border-box; margin: 0 0 var(--e3); padding: 0.4rem 0.9rem; border: 1px solid var(--ln); border-radius: 0.9rem; background: var(--sup); color: var(--tx-2); font-size: 0.75rem; font-weight: 600; line-height: 1.4; text-align: left; overflow-wrap: anywhere; }
/* Revisión visual de capturas: el contador de la columna no baja de línea; los botones de grupo pueden partir su texto */
.vac-col .columna-titulo > span:nth-child(2) { flex: none; white-space: nowrap; }
.grupo-botones { flex-wrap: wrap; max-width: 100%; }
.grupo-botones > .boton { white-space: normal; max-width: 100%; text-align: center; }

/* Fila de acciones del descriptivo (Perfil): tres botones de igual ancho; a menos de 480 px se apilan a todo el ancho */
.descriptivo-acciones { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e2); }
@media (min-width: 480px) { .descriptivo-acciones { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.descriptivo-acciones > .boton { width: 100%; min-width: 0; }

/* ---------- Corte 2 del recorrido: crear desde un documento, comparar versiones, vista previa por canal, evidencia en el historial ---------- */
.vac-desde-doc { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3) var(--e4); padding: var(--e4); border: 1px dashed var(--bd); border-radius: 1rem; margin-bottom: var(--e4); }
.vac-desde-doc p { margin: 0; }
.vac-desde-doc .dato-fuerte { margin-bottom: 0.2rem; }
#vac-propuesta-nueva:not(:empty) { margin-bottom: var(--e4); }
.vac-evidencia-doc li { align-items: flex-start; }
.comparacion-perfil > li { padding-block: var(--e3); }
.hist-evidencia { color: var(--tx-2); }
.ficha-brechas { display: grid; gap: var(--e2); }
.ficha-brechas .subtitulo { margin: 0; }
/* La vista previa por canal: una maqueta, no una publicación */
.vp { border: 1px solid var(--bd); border-radius: 1rem; overflow: hidden; background: var(--sup); max-width: 34rem; }
.vp p { margin: 0; line-height: 1.5; white-space: pre-wrap; }
.vp p + p { margin-top: 0.6rem; }
.vp-texto { padding: var(--e3) var(--e4); }
.vp-imagen { display: block; width: 100%; height: auto; border: 0; background: #fff; }
.vp-chat-cabeza { display: flex; align-items: center; gap: var(--e3); padding: var(--e3) var(--e4); border-bottom: 1px solid var(--ln); }
.vp-chat-cabeza div { display: grid; line-height: 1.3; }
.vp-avatar { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--tx); color: var(--fondo); font-weight: 800; flex: none; }
.vp-avatar-cuadrado { border-radius: 0.5rem; }
.vp-chat { background: color-mix(in srgb, var(--celeste) 12%, var(--sup)); }
.vp-burbuja { position: relative; margin: var(--e4); margin-left: var(--e4); max-width: 88%; border-radius: 1rem 1rem 1rem 0.25rem; background: var(--fondo); border: 1px solid var(--ln); overflow: hidden; }
.vp-burbuja .vp-imagen { border-bottom: 1px solid var(--ln); }
.vp-hora { display: block; text-align: right; padding: 0 var(--e3) var(--e2); font-size: 0.72rem; color: var(--tx-3); }
.vp-correo-cabeza { display: grid; gap: var(--e2); padding: var(--e3) var(--e4); border-bottom: 1px solid var(--ln); }
.vp-correo-cabeza p { margin: 0.1rem 0 0; }
.vp-correo-cuerpo { padding: var(--e4); display: grid; gap: var(--e3); }
.vp-correo-cuerpo .vp-imagen { max-width: 18rem; border: 1px solid var(--ln); border-radius: 0.5rem; }
.vp-linkedin .vp-texto, .vp-portal .vp-texto { padding-bottom: var(--e3); }
.vp-pie { padding: var(--e3) var(--e4); border-top: 1px solid var(--ln); }
.vp-portal-cabeza { padding: var(--e4); border-bottom: 1px solid var(--ln); }
.vp-portal-cabeza h3 { margin: 0 0 0.2rem; }
.vp-portal-cabeza p { margin: 0; }
#aviso-perfil-candidatos a { font-weight: 800; margin-left: 0.25rem; }

/* ---------- Corte 3: importar una lista (vista previa) y el enlace de postulación ---------- */
.imp-tabla td, .imp-tabla th { vertical-align: top; }
.imp-tabla tr[data-estado="omitir"] td { color: var(--tx-3); }
.imp-tabla input[type="checkbox"] { width: 1.15rem; height: 1.15rem; }
#url-postulacion { font-family: ui-monospace, Consolas, monospace; font-size: var(--paso--1); }

/* ---------- Agenda de entrevistas y pruebas (corte 7) ---------- */
.agenda { display: flex; flex-direction: column; gap: var(--e3); margin-bottom: var(--e4); padding-bottom: var(--e4); border-bottom: 1px dashed var(--bd); }
.agenda-lista { display: flex; flex-direction: column; gap: var(--e3); }
.agenda-item { display: flex; flex-direction: column; gap: var(--e2); padding: var(--e3); border: 1px solid var(--bd); border-radius: 0.9rem; }
.agenda-item[data-estado="cancelada"] { opacity: 0.75; }
.agenda-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
.agenda-detalle, .agenda-instrucciones { margin: 0; overflow-wrap: anywhere; }
.agenda-acciones, .agenda-mensajes { gap: var(--e2); }
.agenda-subir { cursor: pointer; }
.agenda-calendario { display: flex; align-items: flex-start; gap: var(--e1); margin: 0; }
.agenda-calendario > .icono { flex: none; margin-top: 0.15rem; }
.agenda-form { padding: var(--e3); border: 1.5px solid var(--tx); border-radius: 0.9rem; }
.agenda-archivos li { align-items: center; gap: var(--e1); }

/* La oferta de trabajo (corte 8): condiciones con versión, aprobación, documento, envío y respuesta */
.oferta-item { display: flex; flex-direction: column; gap: var(--e2); padding: var(--e3); border: 1px solid var(--bd); border-radius: 0.9rem; }
.oferta-item[data-estado="superada"], .oferta-item[data-estado="rechazada"] { opacity: 0.8; }
.oferta-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
.oferta-terminos { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--e2) var(--e3); margin: 0; }
.oferta-terminos > div { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.oferta-terminos dt { font-size: 0.8rem; color: var(--tx-2); }
.oferta-terminos dd { margin: 0; overflow-wrap: anywhere; }
.oferta-terminos .oferta-condiciones { grid-column: 1 / -1; white-space: pre-wrap; }
.oferta-linea { display: flex; align-items: flex-start; gap: var(--e1); margin: 0; overflow-wrap: anywhere; }
.oferta-linea > .icono { flex: none; margin-top: 0.15rem; }
.oferta-plantilla { display: flex; align-items: flex-start; gap: var(--e1); margin: 0; padding: var(--e2) var(--e3); border: 1px dashed var(--bd); border-radius: 0.7rem; }
.oferta-plantilla > .icono { flex: none; margin-top: 0.15rem; }
.oferta-acciones { gap: var(--e2); }
.oferta-form { padding: var(--e3); border: 1.5px solid var(--tx); border-radius: 0.9rem; }
.contratar-oferta { display: flex; flex-direction: column; gap: var(--e2); padding: var(--e3); border: 1px solid var(--bd); border-radius: 0.9rem; }
@media (max-width: 480px) { .oferta-terminos { grid-template-columns: 1fr 1fr; } }

/* Publicar desde Sofía (corte 10): la vista previa del texto antes de confirmar */
.publicar-texto { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 40vh; overflow: auto; margin: 0; padding: var(--e3); border: 1px solid var(--bd); border-radius: 0.7rem; font: inherit; }