/* «A quién escribirle»: el selector de destinatarios (buscar, elegir varias personas, revisar canal y texto, y ver el resultado persona por persona).
   Vive dentro del emergente de siempre (se cierra con la X o con Esc). La lista tiene su propio desplazamiento: el cuadro no crece sin fin. */

.emergente.dest-emergente { width: min(46rem, calc(100vw - 2rem)); }
/* El contenedor del selector no crea una caja propia: así el pie fijo (sticky) se pega al borde del panel con scroll y no al final de la lista */
.dest { display: contents; }
.dest-emergente .emergente-cuerpo { gap: var(--e3); }
.dest[aria-busy="true"] { opacity: 0.7; }
.dest-paso { display: flex; flex-direction: column; gap: var(--e3); min-width: 0; }
.dest-paso[hidden] { display: none; }

/* Buscar y filtrar */
.dest-buscar input { width: 100%; min-height: 2.75rem; }
.dest-filtros { display: flex; flex-wrap: wrap; gap: var(--e2); }
.dest-filtros:empty { display: none; }
.dest-filtro {
  min-height: 2.25rem; padding: 0.25rem 0.9rem; border: 1px solid var(--bd); border-radius: 999px; background: transparent; color: var(--tx-2);
  font: inherit; font-size: var(--paso--1); font-weight: 700; cursor: pointer; transition: background-color 0.16s, color 0.16s, border-color 0.16s;
}
.dest-filtro:hover { color: var(--tx); border-color: var(--tx); }
.dest-filtro[aria-pressed="true"] { background: var(--tx); color: var(--fondo); border-color: var(--tx); }
.dest-vacante { max-width: 24rem; }
.dest-vacante[hidden] { display: none; }
.dest-conteo-fila { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); flex-wrap: wrap; }
.dest-conteo-fila p { margin: 0; color: var(--tx-2); font-size: var(--paso--1); }
.dest-conteo-fila [hidden] { display: none; }

/* La lista: cada persona es una fila con su casilla (toda la fila es el objetivo) */
.dest-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border: 1px solid var(--ln); border-radius: 1rem; overflow: hidden; }
.dest-fila { position: relative; display: flex; align-items: flex-start; gap: var(--e3); padding: var(--e3) var(--e4); border-bottom: 1px solid var(--ln); min-height: 2.75rem; }
.dest-fila:last-child { border-bottom: 0; }
.dest-fila:hover { background: var(--r2); }
.dest-fila:has(.dest-marca:checked) { background: color-mix(in srgb, var(--tx) 7%, transparent); box-shadow: inset 3px 0 0 var(--tx); }
.dest-fila[data-bloqueada="true"] { opacity: 0.72; }
.dest-fila:has(.dest-marca:focus-visible) { outline: 2px solid var(--foco, var(--tx)); outline-offset: -2px; }
.dest-marca { flex: none; width: 1.4rem; height: 1.4rem; margin-top: 0.15rem; accent-color: var(--tx); cursor: pointer; }
.dest-datos { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; cursor: pointer; }
.dest-fila[data-bloqueada="true"] .dest-datos { cursor: default; }
.dest-nombre { display: flex; align-items: center; flex-wrap: wrap; gap: 0.2rem 0.6rem; font-weight: 700; overflow-wrap: anywhere; }
.dest-relacion { font-size: 0.72rem; padding: 0.1rem 0.55rem; font-weight: 700; }
.dest-detalle { color: var(--tx-2); font-size: var(--paso--1); overflow-wrap: anywhere; }
.dest-medios { display: flex; flex-wrap: wrap; gap: 0.15rem 1rem; font-size: var(--paso--1); }
.dest-medio { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--tx); overflow-wrap: anywhere; }
.dest-medio .icono { width: 0.95rem; height: 0.95rem; flex: none; }
.dest-medio[data-ok="false"] { color: var(--tx-2); text-decoration: line-through; text-decoration-thickness: 1px; }
.dest-medio[data-ok="false"] b { text-decoration: none; }
.dest-aviso {
  display: flex; align-items: flex-start; gap: 0.4rem; font-size: var(--paso--1); line-height: 1.4; color: var(--tx);
  padding: 0.25rem 0.6rem; border-radius: 0.6rem; background: color-mix(in srgb, var(--amarillo, #F6C61E) 22%, transparent);
}
.dest-aviso .icono { width: 0.95rem; height: 0.95rem; flex: none; margin-top: 0.15rem; }
.dest-aviso[data-nivel="bloqueo"] { background: color-mix(in srgb, var(--rojo, #c0392b) 16%, transparent); }
.dest-vacio { padding: var(--e5) var(--e4); color: var(--tx-2); text-align: center; }

/* Revisar */
.dest-subtitulo { margin: var(--e2) 0 0; font-size: var(--paso-0, 1rem); font-weight: 800; }
.dest-mensaje-fijo { margin: 0; }
.dest-campo select, .dest-campo input, .dest-campo textarea { width: 100%; }
.dest-masivo { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e2); }
.dest-revision { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e2); }
.dest-rev { display: flex; flex-direction: column; gap: 0.3rem; padding: var(--e3) var(--e4); border: 1px solid var(--ln); border-radius: 1rem; }
.dest-rev[data-bloqueada="true"] { opacity: 0.85; }
.dest-rev-cabeza { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); }
.dest-canales { border: 0; margin: 0.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); }
.dest-canal { display: inline-flex; align-items: flex-start; gap: 0.5rem; min-height: 2.5rem; padding: 0.35rem 0.8rem; border: 1px solid var(--bd); border-radius: 0.9rem; cursor: pointer; font-size: var(--paso--1); overflow-wrap: anywhere; }
.dest-canal:has(input:checked) { border-color: var(--tx); background: color-mix(in srgb, var(--tx) 8%, transparent); }
.dest-canal:has(input:focus-visible) { outline: 2px solid var(--foco, var(--tx)); outline-offset: 2px; }
.dest-canal input { margin-top: 0.2rem; accent-color: var(--tx); flex: none; }
.dest-canal i { color: var(--tx-2); font-style: normal; }
.dest-variables { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e2); margin: 0; }
.dest-previa { padding: var(--e3) var(--e4); border: 1px dashed var(--bd); border-radius: 1rem; }
.dest-previa p { margin: 0.25rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.dest-plantilla { margin: 0; }
.dest-opciones { margin-top: var(--e2); }

/* Pie fijo: cuántas están elegidas y la acción principal */
/* El pie se queda abajo mientras se desplaza la lista. Va DENTRO del ancho del contenido (sin márgenes negativos): así no tapa la barra de desplazamiento en pantallas angostas */
.dest-pie {
  position: sticky; bottom: 0; z-index: 2; display: flex; flex-direction: column; gap: var(--e2);
  margin: var(--e2) 0 0; padding: var(--e3) 0 var(--e4); background: var(--fondo); border-top: 1px solid var(--ln);
}
.dest-bandeja { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); flex-wrap: wrap; }
.dest-conteo-elegidas { margin: 0; }
.dest-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e2); max-height: 5.2rem; overflow-y: auto; }
.dest-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.2rem 0.15rem 0.7rem; border: 1px solid var(--bd); border-radius: 999px; font-size: var(--paso--1); max-width: 100%; }
.dest-chip span { overflow-wrap: anywhere; }
.dest-chip button { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 0; border-radius: 50%; background: transparent; color: var(--tx-2); cursor: pointer; }
.dest-chip button:hover { color: var(--tx); background: var(--r2); }
.dest-chip .icono { width: 0.8rem; height: 0.8rem; }
.dest-pie-fila { display: flex; align-items: center; justify-content: flex-end; gap: var(--e3); flex-wrap: wrap; }
.dest-nota { margin: 0; font-size: var(--paso--1); color: var(--tx-2); line-height: 1.4; }
.dest-falta { margin: 0; font-size: var(--paso--1); color: var(--tx-2); }
.dest-falta:empty { display: none; }
.dest-resultados .chip { flex: none; }

/* Pantallas angostas: el cuadro ocupa casi todo, la lista no se parte y los objetivos miden 44 px */
@media (max-width: 640px) {
  .emergente.dest-emergente { width: calc(100vw - 1rem); }
  .dest-fila { padding: var(--e3); }
  .dest-marca { width: 1.6rem; height: 1.6rem; }
  .dest-filtro, .dest-canal { min-height: 2.75rem; }
  .dest-chip button { width: 2.75rem; height: 2.75rem; margin: -0.5rem 0; }
  .dest-pie-fila { justify-content: stretch; }
  .dest-pie-fila .boton { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .dest-filtro { transition: none; } }

/* Detalle del mensaje (trazabilidad) en el panel de Mensajes */
.insp-traza > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--e2); }
.insp-traza > summary::-webkit-details-marker { display: none; }
.insp-traza > summary h4 { margin: 0; }
.insp-traza > summary::after { content: ''; width: 0.5rem; height: 0.5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-left: auto; transition: transform 0.2s; }
.insp-traza[open] > summary::after { transform: rotate(-135deg); }
/* En celular el área de pulsar es de 44 px de alto (la política de Sofía); el texto y su tamaño no cambian */
@media (max-width: 640px) { .insp-traza > summary { min-height: 2.75rem; } }
.insp-pasos { list-style: none; margin: var(--e2) 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.2rem; font-size: var(--paso--1); }
.dest-pendientes { margin: 0.25rem 0 0; padding-left: 1.1rem; }

/* El pie fijo no tapa la fila que se acaba de elegir: al centrarla, queda por encima del pie */
.dest-emergente .emergente-cuerpo { scroll-padding-bottom: 7rem; }

/* Tableta y teléfono con el dedo: los controles pequeños (las «x» de las personas elegidas, filtros, canales y botones chicos del cuadro) miden 44 px */
@media (max-width: 900px) {
  .dest-chip button { width: 2.75rem; height: 2.75rem; margin: -0.5rem 0; }
  .dest-filtro, .dest-canal { min-height: 2.75rem; }
  .dest-rev-cabeza .boton, .dest-conteo-fila .boton, .dest-bandeja .boton, .dest-masivo .boton, .dest-pie-fila .boton { min-height: 2.75rem; }
}
/* Sin el padding inferior del panel, el pie queda pegado al borde mismo (el sticky respeta el padding: a 24 px del borde, la lista asomaba debajo) */
.dest-emergente .emergente-cuerpo { padding-bottom: 0; }

/* El título del selector no se parte dentro de una palabra («Mensaj / e nuevo» a 320 px): se rompe solo entre palabras.
   En pantallas muy angostas la pista «Esc» se oculta para que el título tenga espacio (la tecla sigue cerrando). */
.dest-emergente .emergente-cabeza .inspector-titulo h2 { overflow-wrap: normal; word-break: normal; }
@media (max-width: 400px) { .dest-emergente .emergente-cierre .atajo { display: none; } }

/* «Nuevo mensaje» en el encabezado de Mensajes: con texto cuando hay sitio; solo el ícono (con su nombre para lectores) en pantallas angostas, para no empujar la lista hacia abajo */
@media (max-width: 1099px) { .msj-nuevo-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }

/* En pantallas angostas el botón «Nuevo mensaje» no baja a una fila propia (eso empujaba la lista 56 px hacia abajo):
   queda anclado arriba a la derecha y el título deja ese hueco. Así la cabecera de Mensajes mide lo mismo que antes. */
@media (max-width: 1099px) {
  .encabezado:has(.msj-nuevo) { position: relative; }
  .encabezado:has(.msj-nuevo) .encabezado-acciones { position: absolute; top: 0; right: 0; }
  .encabezado:has(.msj-nuevo) h1 { padding-right: 3.5rem; }
}

/* ======================= «Preparar envío» (Candidatos de una vacante) y sus filtros. Prefijo env-. ======================= */
/* El cuadro es el emergente de siempre, un poco más ancho. Dentro, el cuerpo es lo único que se desplaza: el pie va debajo, en su propio alto (no se pega encima). */
.emergente.env-emergente { width: min(52rem, calc(100vw - 2rem)); }
.env { display: contents; }
.env[aria-busy="true"] { opacity: 0.7; }
.env-emergente .emergente-cuerpo { gap: var(--e3); padding-bottom: var(--e3); scroll-padding-bottom: var(--e2); }
/* Una sola barra de desplazamiento: la lista de personas no tiene su propia altura máxima, así la última persona se ve al llegar al final del cuadro */
.env-emergente .env-lista { max-height: none; }
/* El título no se parte dentro de una palabra («escribirl / e» a 320 px): se rompe solo entre palabras; en pantallas muy angostas la pista «Esc» se oculta */
.env-emergente .emergente-cabeza .inspector-titulo h2 { overflow-wrap: normal; word-break: normal; }
@media (max-width: 400px) { .env-emergente .emergente-cierre .atajo { display: none; } }
/* [hidden] siempre gana: estos bloques tienen display propio y no deben aparecer cuando el paso no es el suyo */
.env [hidden], .env-emergente [hidden] { display: none !important; }
.env-paso { display: flex; flex-direction: column; gap: var(--e3); min-width: 0; }
.env-paso:not([hidden]) { animation: env-entra 0.2s ease-out; }
@keyframes env-entra { from { opacity: 0; transform: translateY(0.35rem); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .env-paso:not([hidden]) { animation: none; } .env-filtros-pie .boton { transition: none; } }

.env-intro { margin: 0; color: var(--tx-2); font-size: var(--paso--1); line-height: 1.45; }
.env-subtitulo { margin: var(--e2) 0 0; font-size: var(--paso-0, 1rem); font-weight: 800; outline: none; }
.env-bloque { display: flex; flex-direction: column; gap: var(--e2); min-width: 0; margin: 0; padding: 0; border: 0; }
.env-leyenda { font-weight: 800; padding: 0; margin: 0 0 var(--e2); }
.env-campo { min-width: 0; }
.env-campo select, .env-campo input, .env-campo textarea, .env-filtros-campos select, .env-filtros-campos input { width: 100%; }
.env-campo textarea { resize: vertical; min-height: 7rem; }
.env-variables { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e2); margin: 0; }
.env-avisos { display: flex; flex-direction: column; gap: var(--e2); }
.env-aviso {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.4rem; margin: 0; padding: 0.25rem 0.6rem; border-radius: 0.6rem;
  font-size: var(--paso--1); line-height: 1.4; color: var(--tx); background: color-mix(in srgb, var(--ambar) 16%, transparent);
}
.env-aviso .icono { width: 0.95rem; height: 0.95rem; flex: none; margin-top: 0.15rem; }
.env-aviso[data-nivel="error"] { background: color-mix(in srgb, var(--rojo) 14%, transparent); }
.env-aviso-suave { background: transparent; border: 1px dashed var(--bd); }
/* El código del motivo va en su propia línea, bajo el texto (no se parte a mitad) */
.env-codigo { flex-basis: 100%; font-size: 0.72rem; color: var(--tx-2); font-family: ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }
.env-url { overflow-wrap: anywhere; }
.env-texto-aviso { color: var(--tx-2); }
.env-etiqueta { font-size: var(--paso--1); color: var(--tx-2); font-weight: 700; }
.env-previa { padding: var(--e3) var(--e4); border: 1px dashed var(--bd); border-radius: 1rem; display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.env-previa-texto { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.env-partida { display: flex; flex-direction: column; gap: var(--e2); }
.env-partida:empty { display: none; }

/* Elegir: opciones de a quién (una a la vez, con su número) */
.env-radios { display: flex; flex-direction: column; gap: var(--e2); border: 0; margin: 0; padding: 0; min-width: 0; }
.env-radio {
  display: flex; align-items: flex-start; gap: 0.6rem; min-height: 2.75rem; padding: var(--e2) var(--e3);
  border: 1px solid var(--ln); border-radius: 1rem; cursor: pointer; min-width: 0;
  transition: background-color 0.16s, border-color 0.16s;
}
.env-radio:hover { background: var(--r2); }
.env-radio:has(input:checked) { background: color-mix(in srgb, var(--tx) 7%, transparent); box-shadow: inset 3px 0 0 var(--tx); border-color: var(--tx); }
.env-radio:has(input:focus-visible) { outline: 2px solid var(--foco, var(--tx)); outline-offset: 2px; }
.env-radio:has(input:disabled) { cursor: default; border-style: dashed; }
.env-radio:has(input:disabled):hover { background: transparent; }
.env-radio input { flex: none; width: 1.2rem; height: 1.2rem; margin-top: 0.2rem; accent-color: var(--tx); cursor: inherit; }
.env-radio-texto { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; overflow-wrap: anywhere; }
.env-radio-texto > strong { font-weight: 700; }
.env-conteo-fila { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); flex-wrap: wrap; }
.env-conteo-fila p { margin: 0; }

/* Listas de personas, grupos, resultados y canales: cada fila es un objetivo de 44 px de alto */
.env-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border: 1px solid var(--ln); border-radius: 1rem; max-height: 18rem; overflow-y: auto; min-width: 0; }
.env-fila { position: relative; border-bottom: 1px solid var(--ln); min-width: 0; }
.env-fila:last-child { border-bottom: 0; }
.env-fila:hover { background: var(--r2); }
.env-fila:has(input:checked) { background: color-mix(in srgb, var(--tx) 7%, transparent); box-shadow: inset 3px 0 0 var(--tx); }
.env-fila:has(input:focus-visible) { outline: 2px solid var(--foco, var(--tx)); outline-offset: -2px; }
.env-fila-marca { display: flex; align-items: flex-start; gap: var(--e3); min-height: 2.75rem; padding: var(--e3) var(--e4); cursor: pointer; }
.env-fila-marca > input { flex: none; width: 1.4rem; height: 1.4rem; margin-top: 0.1rem; accent-color: var(--tx); cursor: pointer; }
.env-texto-fila { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; flex: 1 1 auto; }
.env-nombre { font-weight: 700; overflow-wrap: anywhere; }
.env-meta { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.env-vacio { padding: var(--e4); color: var(--tx-2); text-align: center; }
.env-detalle { padding: 0 var(--e4) var(--e3); }
.env-detalle summary { cursor: pointer; color: var(--tx-2); min-height: 2.25rem; display: flex; align-items: center; }
.env-pendientes { margin: 0; padding-left: 1.1rem; font-size: var(--paso--1); }
.env-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e2); max-height: 5.5rem; overflow-y: auto; }
.env-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.2rem 0.15rem 0.7rem; border: 1px solid var(--bd); border-radius: 999px; font-size: var(--paso--1); max-width: 100%; }
.env-chip span { overflow-wrap: anywhere; }
.env-chip button { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 0; border-radius: 50%; background: transparent; color: var(--tx-2); cursor: pointer; }
.env-chip button:hover { color: var(--tx); background: var(--r2); }
.env-chip .icono { width: 0.8rem; height: 0.8rem; }
.env-canales { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e2) var(--e3); min-width: 0; }
.env-canal {
  display: inline-flex; align-items: flex-start; gap: 0.5rem; min-height: 2.75rem; padding: 0.4rem 0.8rem; border: 1px solid var(--bd);
  border-radius: 0.9rem; cursor: pointer; font-size: var(--paso--1); overflow-wrap: anywhere; max-width: 100%;
}
.env-canal:has(input:checked) { border-color: var(--tx); background: color-mix(in srgb, var(--tx) 8%, transparent); box-shadow: inset 3px 0 0 var(--tx); }
.env-canal:has(input:focus-visible) { outline: 2px solid var(--foco, var(--tx)); outline-offset: 2px; }
.env-canal input { flex: none; width: 1.2rem; height: 1.2rem; margin-top: 0.25rem; accent-color: var(--tx); }
.env-canal i { color: var(--tx-2); font-style: normal; }
.env-masivo { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e2); }
.env-canal-fila > .env-fila-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; padding: var(--e3) var(--e4) 0; }
.env-canal-fila > :not(.env-fila-cabeza) { margin-left: var(--e4); margin-right: var(--e4); }
.env-canal-fila > .env-canales { padding: 0 0 var(--e3); }
.env-canal-fila > .env-aviso { margin-bottom: var(--e3); }
.env-resultado { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); padding: var(--e3) var(--e4); }
.env-resultado .chip { flex: none; }
.env-titular { margin: 0; font-size: var(--paso-0, 1rem); font-weight: 800; }

/* Imagen y catálogo: lo que se puede usar se ve; lo que no, con su estado (no se atenúa: lleva borde punteado y dice por qué) */
.env-vista { width: 100%; max-width: 16rem; max-height: 12rem; object-fit: contain; border-radius: 0.6rem; border: 1px solid var(--ln); background: var(--r1); }
.env-subir { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--e2); }
.env-subir > .campo { flex: 1 1 12rem; min-width: 0; }
.env-subir input[type="file"] { width: 100%; }
.env-acciones { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.env-decision { display: flex; flex-direction: column; gap: var(--e2); padding: var(--e3) var(--e4); border: 1px solid var(--ambar); border-radius: 1rem; }
.env-decision p { margin: 0; }

/* Confirmar y resultado */
.env-resumen { margin: 0; display: flex; flex-direction: column; min-width: 0; }
.env-resumen > div { display: grid; grid-template-columns: minmax(6.5rem, 9rem) minmax(0, 1fr); gap: var(--e3); padding: var(--e2) 0; border-bottom: 1px solid var(--ln); }
.env-resumen dt { color: var(--tx-2); font-size: var(--paso--1); font-weight: 700; }
.env-resumen dd { margin: 0; overflow-wrap: anywhere; min-width: 0; }
.env-texto-previo { margin: var(--e2) 0 0; padding: var(--e2) var(--e3); border-left: 3px solid var(--tx); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 12rem; overflow-y: auto; font: inherit; color: var(--tx); }
.env-nota { margin: 0; font-size: var(--paso--1); color: var(--tx-2); line-height: 1.45; }
@media (max-width: 520px) { .env-resumen > div { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; } }

/* Pie: el motivo (o el resumen) y la acción principal. Va fuera del cuerpo que se desplaza (emergente.js, opción pie): ocupa su alto y nunca tapa una opción */
.env-pie {
  flex: none; display: flex; flex-direction: column; gap: var(--e2);
  margin: 0; padding: var(--e3) var(--e5) var(--e4); background: var(--fondo); border-top: 1px solid var(--ln);
}
@media (max-width: 599px) { .env-pie { padding-inline: var(--e4); } }
.env-falta { margin: 0; font-size: var(--paso--1); color: var(--tx-2); line-height: 1.4; }
.env-falta:empty { display: none; }
.env-pie-fila { display: flex; align-items: center; justify-content: flex-end; gap: var(--e2) var(--e3); flex-wrap: wrap; }
.env-pie-fila .boton { min-height: 2.5rem; }

/* Filtros de la lista de candidatos (pestaña Candidatos) */
.env-filtros { display: flex; flex-direction: column; gap: var(--e2); padding: var(--e3) var(--e4); border: 1px solid var(--ln); border-radius: 1rem; min-width: 0; }
.env-filtros-campos { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e3); }
.env-filtros-campos > .campo { flex: 1 1 10rem; min-width: 0; margin: 0; }
.env-filtros-campos > .env-filtro-nombre { flex: 2 1 14rem; }
.env-filtro-casilla { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; cursor: pointer; font-size: var(--paso--1); font-weight: 700; }
.env-filtro-casilla input { width: 1.25rem; height: 1.25rem; accent-color: var(--tx); cursor: pointer; }
.env-filtros-pie { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); flex-wrap: wrap; }
.env-filtros-pie p { margin: 0; }

/* Teléfono y tableta: los objetivos miden 44 px y el cuadro ocupa casi todo el ancho */
@media (max-width: 900px) {
  .env-filtros-pie .boton, .env-conteo-fila .boton, .env-masivo .boton, .env-acciones .boton, .env-pie-fila .boton, .env-subir .boton { min-height: 2.75rem; }
  /* Los menús desplegables de Sofía (en pantallas con puntero fino) miden lo mismo que los campos de texto: 44 px */
  .env-filtros .sel-boton, .env-campo .sel-boton, .env-subir .sel-boton { min-height: 2.75rem; }
  .env-chip button { width: 2.75rem; height: 2.75rem; margin: -0.5rem 0; }
}
@media (max-width: 640px) {
  .emergente.env-emergente { width: calc(100vw - 1rem); }
  .env-radio, .env-canal, .env-filtro-casilla { min-height: 2.75rem; }
  .env-fila-marca > input { width: 1.6rem; height: 1.6rem; }
  .env-filtros-campos > .campo, .env-filtros-campos > .env-filtro-nombre { flex-basis: 100%; }
  .env-pie-fila { justify-content: stretch; }
  .env-pie-fila .boton { flex: 1 1 auto; justify-content: center; }
  .env-filtros { padding: var(--e3); }
}
/* Zoom 200 % en teléfono (188 px CSS: un teléfono de 375 px con el texto al 200 %) y pantallas igual de angostas: el cuadro ocupa toda la pantalla y todo va en una columna.
   El título va en su propia línea y la X junto a «Mensajes»; los botones del pie se apilan a todo el ancho; solo el cuerpo se desplaza. Así ninguna acción queda fuera de la pantalla
   y el cuerpo conserva alto para las personas (a 406 px de alto, entre 133 y 162 px según el paso). Por encima de 359 px el cuadro sigue siendo el de arriba. */
@media (max-width: 359px) {
  .emergente.env-emergente { inset: 0; margin: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; }
  .env-emergente .emergente-cabeza { flex-wrap: wrap; align-items: center; gap: var(--e1) var(--e2); padding: var(--e2) var(--e3); }
  .env-emergente .inspector-titulo { display: contents; }
  /* «Mensajes» y «Cerrar» caben en una sola fila; el título va debajo, en una o dos líneas */
  .env-emergente .inspector-kicker { order: 1; margin: 0; font-size: 0.7rem; letter-spacing: 0.06em; }
  .env-emergente .emergente-cierre { order: 1; margin-left: auto; }
  .env-emergente .emergente-cierre .inspector-cerrar { min-height: 2.1rem; gap: 0.3rem; padding: 0.25rem 0.7rem 0.25rem 0.6rem; font-size: 0.75rem; }
  .env-emergente .emergente-cabeza h2 { order: 2; flex: 1 0 100%; margin: 0; font-size: 1.05rem; }
  .env-emergente .emergente-cuerpo { padding: var(--e3); }
  .env-emergente .env-pie { gap: var(--e1); padding: var(--e2) var(--e3) var(--e3); }
  .env-emergente .env-pie-fila { flex-direction: column; align-items: stretch; gap: var(--e1); }
  .env-emergente .env-pie-fila .boton { flex: none; width: 100%; min-height: 2.5rem; }
}