/* ═══════════════════════════════════════════════════════
   TAREAS.CSS — Sección Tareas
   Reusa tal cual (sin redefinir) las clases ya existentes de otras
   secciones: .ev-sticky-header, .ev-header-row, .ev-header-icon-btn,
   .ev-filtro-badge, .ev-fab-menu, .ev-fab-btn, .ev-card (y variantes),
   .ev-estado-pill (y variantes), .ev-lista-vacia, .ev-hoy-separador (los
   separadores de sección de la pantalla fusionada, ver "Cambios
   recientes"), .ev-nav-mes-label, .ev-nav-mes-chevron (selector de salto
   rápido del header, mismo componente que el selector de mes del panel de
   Eventos), .ev-ant-cal- (y variantes), .ev-cal- (y variantes),
   .app-nav-search, .ev-marcar-lista, .ev-roster-fila, .ev-roster-nombre,
   .ev-roster-vacio (css/eventos.css), .fi-circle, .fi-pill (y variantes),
   .fi-footer (y variantes), .fi-body, .fi-desc (css/reservas.css), .aj-pill,
   .aj-pills-row (css/perfil.css), .qty-stepper, .qty-btn, .qty-value,
   .admin-dash-banner (y variantes, css/admin.css), .salud-paso, .salud-prog
   (css/perfil.css), .avatar-pill (css/global.css), .btn, .btn-outline,
   .btn-text-simple, .badge (css/ui.css).
   Este archivo cubre únicamente lo que ninguna sección tenía todavía: la
   fila de avatares superpuestos con conteo de cupos, el layout de ícono+
   texto de los botones de acción de una card, la nota de estado bloqueado
   (límite de tareas activas alcanzado), la fila de menú de los 2
   desplegables del header (`.tar-menu-row`, ver "Cambios recientes") y el
   cursor de la fila clickeable del picker de personas del wizard.
   Bug real corregido acá de paso (ver MANIFEST.md "Cambios recientes"):
   este mismo comentario, en su redacción anterior, escribía varias
   referencias con comodín pegadas a la barra separadora siguiente (ej.
   un nombre de clase terminado en asterisco, tipo ".ev-card", seguido sin
   espacio de la barra que separaba el próximo nombre de la lista) -- esa
   secuencia de 2 caracteres (asterisco + barra, sin espacio) es EXACTAMENTE
   el cierre de un comentario CSS, sin importar la intención de quien lo
   escribió; el navegador interpretaba el comentario como cerrado ahí
   mismo, seguía "parseando" el resto del comentario como CSS real
   (selectores/texto basura), y la primera regla real después de ese
   basural (la de `.tp-opt` de más abajo) quedaba descartada entera junto
   con ese basural -- confirmado reproduciendo el parseo real del archivo
   (no solo leyendo el texto: `sheet.cssRules` la omitía por completo pese
   a que el archivo servido contenía el texto correcto). Nunca terminar una
   línea o palabra de comentario con asterisco justo antes de una barra.
   ═══════════════════════════════════════════════════════ */

/* ── Header: selector de salto rápido (reemplaza el pill-toggle
   "Disponibles/Mis tareas", ver MANIFEST.md "Cambios recientes" -- fusión
   de Tareas en una sola pantalla con scroll). `#tar-secciones-toggle-btn`
   reusa LITERAL `.ev-nav-mes-label`/`.ev-nav-mes-chevron` (css/eventos.css,
   el selector "‹ Mes Año ›" del panel de mes de Eventos) -- mismo rol
   exacto (label + chevron a la izquierda del header, togglea un panel
   inline debajo), sin ninguna clase propia acá. Cuando el contenido de las
   3 secciones combinadas entra en pantalla sin scroll real
   (`_tarActualizarSelectorHeader()`, js/tareas.js), el chevron se oculta
   (`display:none` inline por JS) y el botón queda inerte -- el label pasa
   a "Tareas" estático, sin necesitar ninguna clase CSS nueva para ese
   estado (menos interactividad, no un look distinto). */
#tar-sticky-header .ev-header-row { gap: 6px; }
/* `.ev-nav-mes-label span:first-child` trae `text-transform:capitalize`
   (css/eventos.css, pensada para "agosto 2026" -> "Agosto 2026", un solo
   nombre propio) -- acá el label son frases de varias palabras ("El Baúl
   de tareas"), capitalizar cada palabra dejaría "El Baúl De Tareas"
   (la conjunción "de" en mayúscula lee mal en español). Override puntual:
   el texto se muestra tal cual lo arma `_tarActualizarLayoutTablero()`
   (js/tareas.js), ya con la casing correcta. */
#tar-secciones-label { text-transform: none; }

/* Filas del menú desplegable del selector de salto rápido
   (`#tar-secciones-panel`) -- lista las secciones del tablero fusionado
   con contenido, incluidas las 2 admin-only al final (ver MANIFEST.md
   "Cambios recientes" -- "Tareas por validar"/"Gestión de tareas activas"
   ya NO viven agrupadas bajo un ícono "Administrar" propio, son 2
   secciones más). "Tareas por validar" suma su conteo directo al texto del
   label ("Tareas por validar (N)", `_tarActualizarLayoutTablero()`,
   js/tareas.js) -- mismo criterio que "El Baúl de tareas (N)", sin usar
   `.tar-menu-row-badge` (badge aparte, sin consumidor real). Vive dentro de
   `.ev-header-burbuja-panel` (mismo mecanismo de burbuja inline que el
   panel de búsqueda+filtros, css/eventos.css) -- esta clase es lo único que
   no tenía: una fila de menú simple (ícono+texto), mismo criterio visual/
   tamaño de target táctil que `.ev-roster-fila` (css/eventos.css) pero como
   `<button>` real en vez de una fila de datos. */
.tar-menu-row {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 4px;
  border: none; border-bottom: 1px solid var(--border-light); background: transparent;
  font-family: inherit; font-size: 0.85rem; font-weight: 700; color: var(--text);
  text-align: left; cursor: pointer;
}
.tar-menu-row:last-child { border-bottom: none; }
.tar-menu-row .material-symbols-outlined { font-size: 1.15rem; color: var(--brand); flex-shrink: 0; }
.tar-menu-row-badge { margin-left: auto; }

/* Fila clickeable del picker de "Asignar a personas" del wizard (paso
   nuevo) -- `.ev-roster-fila` (css/eventos.css) reusada tal cual, esta
   clase solo agrega el cursor: a diferencia de "Marcar asistencia" (donde
   solo el toggle interno es clickeable), acá toda la fila dispara la
   selección para un target táctil más grande. */
.tar-persona-fila { cursor: pointer; }

/* Fila deshabilitada del picker de personas al llegar al "Máximo de
   personas" del paso de cupos (bug real corregido, ver MANIFEST.md
   "Cambios recientes" -- antes no había ningún tope) -- atenuada, sin
   cursor de click (el `onclick` en sí ya se saca en el HTML generado por
   `_tarCrearRenderPersonas()`, js/tareas.js, esto es solo la señal visual). */
.tar-persona-fila-disabled { opacity: 0.4; cursor: default; }

/* Checkmark de selección del picker de personas -- bug real encontrado en
   la propia verificación con Playwright (no al aplicar el fix a ciegas):
   `.fi-circle` (css/reservas.css) por sí sola es solo el círculo vacío; su
   estado "marcado" está definido como `.fecha-item.sel .fi-circle` (la
   clase `.sel` vive en un ANCESTRO tipo `.fecha-item`, no en el propio
   círculo) -- acá `.sel` se togglea directo sobre el `.fi-circle`
   (`_tarCrearTogglePersona()`, js/tareas.js), una estructura distinta que
   ese selector nunca matchea, así que tocar una fila no pintaba nada pese
   a que la clase sí se aplicaba (confirmado con `querySelectorAll` antes de
   mirar la pantalla). Mismo patrón que ya usa `#s4-cupon-wrapper .fi-circle.sel-cupon`
   (css/reservas.css) para el mismo caso -- el propio `.fi-circle` lleva el
   modificador, scoped al contenedor de este picker. */
.tar-persona-fila .fi-circle.sel { background: var(--brand); border-color: var(--brand); }
.tar-persona-fila .fi-circle.sel .material-symbols-outlined { color: var(--white); }

/* Pila de avatares superpuestos, esquina superior derecha del header de la
   card (ver MANIFEST.md "Cambios recientes" -- rediseño de card, mockup de
   lista: se mudó de una fila propia debajo de las pills a acá, reemplazando
   a la pill de área que vivía en esta esquina). `.avatar-pill--xs` (26px,
   css/global.css). */
.tar-avatar-stack { display: flex; flex-shrink: 0; }
.tar-avatar-stack .avatar-pill { border: 2px solid var(--surface-2); margin-left: -8px; }
.tar-avatar-stack .avatar-pill:first-child { margin-left: 0; }

/* ── Header de card -- ícono de área fusionado con el título (mismo
   componente `.ev-card-titulo-row`/`.ev-card-icono-inline` de las cards de
   Eventos, css/eventos.css, ver MANIFEST.md "Cambios recientes" -- rediseño
   de card, mockup de lista: reemplaza el recuadro/pill de área que vivía
   suelto en la esquina, el área ya solo se comunica vía el ícono) +
   avatares/ícono de archivar en la esquina opuesta (`_tarCardHeaderHtml()`,
   js/tareas.js). Vive DENTRO de `.ev-card-body`, el resto del contenido
   (pills, descripción, botones) queda a ancho completo debajo, sin ninguna
   columna lateral. */
.tar-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.tar-card-header-left { flex: 1; min-width: 0; }
.tar-card-header-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
/* Estado archivada+aprobada/vencida (ver MANIFEST.md "Cambios recientes" --
   pedido explícito): el ÍCONO de área (el mismo, fusionado con el título)
   se tiñe de color -- NO un ícono de check distinto, solo tinte + un texto
   chico debajo del título (`.tar-aprobada-txt`/`.tar-vencida-txt`). Mismos
   tokens que las pills de fecha equivalentes (`.tar-fecha-verde`/
   `.tar-fecha-rojo`, más abajo) para que el color cuente la misma historia
   en todo el card. */
.tar-titulo-aprobada .ev-card-icono-inline { color: var(--success); }
.tar-titulo-vencida .ev-card-icono-inline { color: var(--danger); }
.tar-aprobada-txt { font-size: 0.72rem; font-weight: 700; color: var(--success); margin-top: 2px; }
.tar-aprobada-txt.tar-vencida-txt { color: var(--danger); }
/* Ícono de "Archivar tarea" en Disponibles (admin) -- ver MANIFEST.md
   "Cambios recientes": antes vivía como botón de texto debajo de "Tomar
   tarea" (Baúl lo sigue teniendo así, sin cambios); en Disponibles pasa a
   vivir en la esquina superior derecha, junto a los avatares. Neutro (no
   verde/rojo, no es un estado de la tarea) -- mismo criterio de color
   apagado que ya usaba el botón de texto que reemplaza (`.btn-text-simple`,
   `var(--muted)`). */
.tar-card-archivar-btn {
  flex-shrink: 0; width: 38px; height: 38px; min-width: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: var(--surface-2); color: var(--muted); cursor: pointer; font-family: inherit;
}
.tar-card-archivar-btn:disabled { opacity: 0.5; cursor: default; }
.tar-card-archivar-btn .material-symbols-outlined { font-size: 1.05rem; }

/* ── Pills de card (Puntos/Vencimiento -- ver MANIFEST.md "Cambios
   recientes": Área salió de acá, es el ícono fusionado con el título de
   arriba; Cupos ya no se muestra en ningún lado, el conteo real vive en el
   título "A CARGO (N)" del detalle) -- mismo componente pill sutil ya usado
   en el resto de la app (`.fi-pill`, css/reservas.css) dentro de
   `.fi-pills` (fila con wrap), ver `_tarPillsRowHtml()`/js/tareas.js.
   Puntos reusa `.fi-pill-dur` (verde) TAL CUAL -- ya existía con ese color
   para otro rol (Reservas) y calza exacto con lo pedido, sin necesitar
   variante nueva. */
/* Fecha de vencimiento -- color+ícono dinámico según cercanía
   (`_tarFechaInfo()`, js/tareas.js): rojo si vence hoy o ya venció, naranja
   si vence dentro de los próximos 3 días, verde si falta bastante (antes
   amarillo, ver MANIFEST.md "Cambios recientes" -- pedido explícito) --
   mismos tokens de estado que ya usa el resto de la app (`--danger`/
   `--warning`/`--success`/`--amber`, css/colors.css), sin inventar ningún
   color nuevo. */
.tar-fecha-rojo { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-bdr); }
.tar-fecha-naranja { background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-bdr); }
/* Color neutro -- SOLO el caso "sin fecha límite"/fecha sin parsear
   (`_tarFechaInfo()`), un estado distinto a "falta bastante" (no hay
   plazo que mostrar en absoluto, no es que sobre tiempo). */
.tar-fecha-amarillo { background: var(--amber-light); color: var(--amber-darker); border: 1px solid var(--amber-border); }
/* Verde -- "falta bastante para vencer" (la mayoría de las vistas) Y
   "Finalizada el DD/MM/AAAA" (Archivadas, cuando la tarea SÍ tiene alguna
   asignación aprobada, `_tarCardArchivadaHtml()`) -- mismos tokens de
   éxito que `.tar-titulo-aprobada` de arriba. */
.tar-fecha-verde { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-bdr); }

/* ── Card clickeable entera (Disponibles/Baúl/Mis tareas/Gestionar/
   Archivadas, ver MANIFEST.md "Cambios recientes") -- abre el detalle de la
   tarea (`_tarAbrirDetalle()`, js/tareas.js). Sin regla propia acá (`.ev-card`
   ya no tiene `cursor:default` que pisar) -- solo el cursor, para que se
   sienta clickeable como el resto de las cards tocables de la app (ej.
   `.ev-card` de Eventos, que ya es clickeable de fábrica). */
#tar-lista-disponibles .ev-card, #tar-lista-baul .ev-card, #tar-lista-mis .ev-card,
#tar-lista-gestionar .ev-card, #tar-archivadas-lista .ev-card { cursor: pointer; }

/* Descripción de la tarea -- SIEMPRE visible como texto plano debajo del
   título (ver MANIFEST.md "Cambios recientes" -- rediseño de card:
   reemplaza el acordeón "Descripción de la tarea ⌄" que tenía antes,
   confirmado con Playwright que no quedó ningún rastro de ese mecanismo,
   `.fi-footer`/`.fi-body`/`.open` -- `.fi-desc` sola alcanza para la
   tipografía). Solo el espaciado es propio acá. */
.tar-desc { margin-top: 8px; }

/* Botón de acción de card con ícono al principio -- mismo criterio que
   `.btn-wp-grupo` (css/global.css): un modificador MÍNIMO que solo agrega
   el layout flex ícono+texto encima de `.btn`/`.btn-outline`/
   `.btn-text-simple` ya existentes, sin duplicar su chrome (fondo/borde/
   tipografía). */
.tar-card-btn { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; }
.tar-card-btn .material-symbols-outlined { font-size: 18px; }
/* Fila de 2 acciones lado a lado -- "Enviar a revisión"/"Soltar tarea" (ver
   MANIFEST.md "Cambios recientes" -- pedido explícito: mismo layout en la
   card de "Mis tareas" Y en el detalle, `.tar-acciones-row`, reemplaza a
   `.tar-acciones-col`, apilada, eliminada por quedar sin consumidor).
   `flex:1` en cada `.btn` -- mismo criterio que la fila Cancelar/Guardar
   del formulario "Editar tarea" (index.html, `#tar-detalle-editar`).
   `.btn-text-simple` trae su propio padding asimétrico (pensado para vivir
   solo, al pie de una card) -- normalizado acá al mismo padding de
   `.btn-outline` para que las 2 mitades de la fila se vean parejas. */
.tar-acciones-row { display: flex; gap: 10px; margin-top: 14px; }
.tar-acciones-row .tar-card-btn { flex: 1; margin-top: 0; }
.tar-acciones-row .btn-text-simple { width: auto; padding: 16px; }

/* Actualización optimista de tomar/soltar/enviar a revisión (ver
   MANIFEST.md "Cambios recientes") -- transición propia por acción, no
   genérica: "tomar" sale con un lift + resplandor verde (semántica de
   logro/éxito), "soltar" sale con un drop sutil hacia abajo (semántica de
   soltar/entregar), la entrada de revert es la misma para las 2 (la tarea
   "vuelve" a su lugar). `forwards` en las de salida -- la card debe quedar
   invisible/colapsada hasta que `_tarAnimarSalida()` (js/tareas.js) la saca
   del array y repinta la lista sin ella, no volver a su estado original a
   mitad de la animación. */
@keyframes tarSalidaTomada {
  0% { transform: scale(1) translateY(0); opacity: 1; box-shadow: 0 0 0 0 var(--success-bg); }
  35% { transform: scale(1.02) translateY(-3px); opacity: 1; box-shadow: 0 0 0 7px var(--success-bg); }
  100% { transform: scale(0.92) translateY(-20px); opacity: 0; box-shadow: 0 0 0 0 transparent; }
}
@keyframes tarSalidaSoltada {
  0% { transform: scale(1) translateY(0); opacity: 1; }
  100% { transform: scale(0.94) translateY(16px); opacity: 0; }
}
@keyframes tarEntrada {
  0% { transform: scale(0.95) translateY(-12px); opacity: 0; }
  60% { transform: scale(1.01) translateY(0); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes tarPulseExito {
  0% { box-shadow: 0 0 0 0 var(--success-bg); }
  40% { box-shadow: 0 0 0 8px var(--success-bg); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.tar-card-saliendo-tomada { animation: tarSalidaTomada 0.38s var(--ease-sheet) forwards; pointer-events: none; border-radius: 14px; }
.tar-card-saliendo-soltada { animation: tarSalidaSoltada 0.34s var(--ease-sheet) forwards; pointer-events: none; }
.tar-card-entrando { animation: tarEntrada 0.4s var(--ease-sheet); }
.tar-card-confirmando { animation: tarPulseExito 0.6s ease-out; border-radius: 14px; }
.tar-accion-wrap { display: block; }

/* Actualización optimista de tomar/soltar/enviar a revisión (ver
   MANIFEST.md "Cambios recientes") -- transición propia por acción, no
   genérica: "tomar" sale con un lift + resplandor verde (semántica de
   logro/éxito), "soltar" sale con un drop sutil hacia abajo (semántica de
   soltar/entregar), la entrada de revert es la misma para las 2 (la tarea
   "vuelve" a su lugar). `forwards` en las de salida -- la card debe quedar
   invisible/colapsada hasta que `_tarAnimarSalida()` (js/tareas.js) la saca
   del array y repinta la lista sin ella, no volver a su estado original a
   mitad de la animación. */
@keyframes tarSalidaTomada {
  0% { transform: scale(1) translateY(0); opacity: 1; box-shadow: 0 0 0 0 var(--success-bg); }
  35% { transform: scale(1.02) translateY(-3px); opacity: 1; box-shadow: 0 0 0 7px var(--success-bg); }
  100% { transform: scale(0.92) translateY(-20px); opacity: 0; box-shadow: 0 0 0 0 transparent; }
}
@keyframes tarSalidaSoltada {
  0% { transform: scale(1) translateY(0); opacity: 1; }
  100% { transform: scale(0.94) translateY(16px); opacity: 0; }
}
@keyframes tarEntrada {
  0% { transform: scale(0.95) translateY(-12px); opacity: 0; }
  60% { transform: scale(1.01) translateY(0); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes tarPulseExito {
  0% { box-shadow: 0 0 0 0 var(--success-bg); }
  40% { box-shadow: 0 0 0 8px var(--success-bg); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.tar-card-saliendo-tomada { animation: tarSalidaTomada 0.38s var(--ease-sheet) forwards; pointer-events: none; border-radius: 14px; }
.tar-card-saliendo-soltada { animation: tarSalidaSoltada 0.34s var(--ease-sheet) forwards; pointer-events: none; }
.tar-card-entrando { animation: tarEntrada 0.4s var(--ease-sheet); }
.tar-card-confirmando { animation: tarPulseExito 0.6s ease-out; border-radius: 14px; }
.tar-accion-wrap { display: block; }

/* Nota de estado bloqueado (límite de tareas activas alcanzado) -- mismo
   estilo ya usado por `.ev-lugar-mapa-nota`/`.ev-ant-indefinido-nota`
   (css/eventos.css) para texto secundario centrado bajo un control. */
.tar-limite-nota { font-size: 0.78rem; color: var(--muted); text-align: center; margin-top: 8px; line-height: 1.4; }

/* Lista de personas de una tarjeta de "Tareas archivadas" -- a diferencia
   de `.tar-avatar-stack` (avatares superpuestos, anónimos, en la esquina
   del header), acá cada fila necesita ser identificable por nombre CON su
   estado final (aprobada/rechazada, `_tarArchivadaEstadoBadge()`,
   js/tareas.js) -- no alcanza con una pila superpuesta. */
.tar-archivada-personas { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.tar-archivada-persona-fila { display: flex; align-items: center; gap: 10px; }
.tar-archivada-persona-nombre { flex: 1; min-width: 0; font-size: 0.82rem; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Buscador + filtros compartidos (Disponibles/Mis tareas/Baúl/Archivadas)
   -- reusa tal cual `.ev-header-burbuja`/`.ev-header-burbuja-panel`/
   `.ev-filtro-trigger`/`.ev-filtro-burbuja`/`.ev-filtros-row`/
   `.ev-filtros-label` (css/eventos.css, mismo mecanismo de burbuja de
   Eventos) y `.meses-grid-pills`/`.mes-item` (css/reservas.css, selector de
   mes de "reagendar mensual"). Este bloque cubre solo lo que ninguna de las
   2 tenía todavía: 4/5 triggers en vez de 2 (necesitan envolver en la fila,
   `.ev-filtros-row` de Eventos nunca lo necesitó con solo Lugar/Tipo) y el
   filtro de rango de puntos (sin precedente en el resto de la app). */
/* `#tarch-busqueda-panel` (Archivadas) es el único `.ev-header-burbuja` de
   toda la app que vive FUERA de un `.ev-sticky-header`/`#tar-sticky-header`
   -- el resto (mes/búsqueda de Eventos, secciones/administrar/búsqueda de
   Tareas) hereda gratis el `padding-bottom:14px` de ese wrapper como aire
   fijo hacia el contenido de abajo, cerrada o abierta. Bug real corregido
   (ver MANIFEST.md "Cambios recientes"): sin ese wrapper acá, la burbuja
   quedaba pegada (0px) contra `.card` con el panel cerrado -- mismo 14px
   fijo agregado a mano para igualar el espaciado real de `#s-tareas`
   (14px cerrada, 14+18=32px abierta, sumado al `margin-bottom:18px` de
   `.ev-header-burbuja.abierta`, css/eventos.css). El ancho salió de un bug
   aparte en el mismo elemento -- un `margin:0 16px` inline en index.html
   lo angostaba 32px contra `.card` (que solo hereda el padding de
   `.contenedor`), eliminado sin reemplazo. Regla `.abierta` propia (no solo
   sumar 14px sueltos): un selector por ID pesa más que `.ev-header-burbuja.abierta`
   (2 clases), así que sin este segundo selector el `margin-bottom:14px` de
   abajo pisaría los 18px de esa regla en vez de sumarse -- acá se fija el
   total ya sumado (14+18=32px) para que gane por especificidad real. */
#tarch-busqueda-panel { margin-bottom: 14px; }
#tarch-busqueda-panel.abierta { margin-bottom: 32px; }
#tar-filtros-row, #tarch-filtros-row { flex-wrap: wrap; }
#tar-filtros-row .ev-filtro-trigger, #tarch-filtros-row .ev-filtro-trigger { flex: 1 1 45%; }
/* Bug real corregido (ver MANIFEST.md "Cambios recientes" -- panel de
   filtro pegado al pill tocado): cada `.ev-filtro-burbuja` pasó a vivir
   DENTRO de `.ev-filtros-row` (antes hermana, después de cerrar la fila),
   intercalada en el HTML justo después de su trigger (ver index.html). Acá
   solo se agrega el `flex-basis` que la hace ocupar toda la fila SIGUIENTE
   -- eso fuerza el salto de línea justo donde ya envolvía el trigger que la
   abre, así la burbuja abierta cae pegada debajo de ESA fila en particular,
   no debajo de todas. Con la burbuja cerrada (`max-height:0`) el salto de
   línea ya ocurría ahí de forma natural por el ancho de los botones -- sin
   cambio visual con todo cerrado. */
.ev-filtro-burbuja-inline { flex: 1 1 100%; width: 100%; }
.tar-filtro-puntos-row { display: flex; align-items: flex-end; gap: 10px; padding: 10px 2px 4px; }
.tar-filtro-puntos-campo { flex: 1; min-width: 0; }
.tar-filtro-puntos-campo label { display: block; font-size: 0.72rem; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.tar-filtro-puntos-sep { padding-bottom: 14px; color: var(--muted); font-weight: 700; }

/* Botón "Reintentar" del estado de error de Archivadas -- mismo criterio
   visual que `_inscReintentarTallas()` (inscripcion.js): ícono refresh +
   texto, centrado, dentro del propio bloque `.ev-lista-vacia`. */
.tar-reintentar-btn { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 10px auto 0; }
.tar-reintentar-btn .material-symbols-outlined { font-size: 1rem; margin: 0; }

/* Filtro de Mes -- margen superior propio entre el trigger y la grilla de
   pills (pedido explícito: quedaba más pegado que el filtro de Área, pese
   a compartir el mismo `padding-top` de `.ev-filtro-burbuja-pills`,
   css/eventos.css -- las pills de mes, `.mes-item`, css/reservas.css, son
   visualmente más altas/pesadas que `.aj-pill`, lo que hacía sentir menos
   aire arriba con el mismo valor numérico). Scoped a los 2 ids reales (no a
   `.meses-grid-pills` en general) para no tocar la instancia de "reagendar
   mensual" en Reservas, que no vive dentro de una burbuja de filtro y ya
   se ve bien como está. */
#tar-filtro-mes-grid, #tarch-filtro-mes-grid { margin-top: 8px; }

/* ── "Gestionar tareas activas" (admin, ver MANIFEST.md "Cambios
   recientes") -- lista de asignaciones (`.admin-banner-res-row`,
   css/admin.css, mismo componente que "Tareas por validar") anidada DENTRO
   de cada card de tarea, ver `_tarGestionarCardHtml()`/js/tareas.js. Sin
   `border-top` en la primera fila (a diferencia del uso original de esa
   clase dentro de un acordeón, acá la primera fila ya tiene separación
   propia contra las pills de arriba vía este `margin-top`). */
.tar-gestionar-personas { margin-top: 12px; }
.tar-gestionar-personas .admin-banner-res-row:first-child { border-top: none; padding-top: 0; }

/* Toggle "Completada"/"No completada" por persona (ver MANIFEST.md
   "Cambios recientes" -- reemplaza los 2 botones sueltos check/X) -- reusa
   LITERAL `.ev-rsvp-seg`/`.ev-rsvp-opt`/`.ev-rsvp-slider`/`.ev-rsvp-seg-roster`
   (css/eventos.css, mismo componente que "A horario"/"Tarde" del roster
   admin de Marcar asistencia). `.ev-rsvp-seg-roster` por sí sola mide 148px
   -- pensada para las 2 palabras cortas de Eventos ("A horario"/"Tarde");
   acá "Completada"/"No completada" son más largas, así que este modificador
   ensancha el control y ajusta tipografía/ícono para que las 2 etiquetas
   entren en una sola línea sin recortarse. Colores de estado activo por
   `data-estado` (mismo criterio que las reglas equivalentes de Eventos,
   scoped acá para no tocar ese archivo -- ver `_TAR_GEST_BG`/js/tareas.js
   para el color del propio indicador deslizante). */
.tar-gest-toggle.ev-rsvp-seg-roster { width: 196px; }
.tar-gest-toggle .ev-rsvp-opt { padding: 7px 3px; font-size: 0.62rem; gap: 3px; }
.tar-gest-toggle .ev-rsvp-opt .material-symbols-outlined { font-size: 14px; }
.tar-gest-toggle .ev-rsvp-opt.activa[data-estado="aprobada"], .tar-gest-toggle .ev-rsvp-opt.activa[data-estado="aprobada"] .material-symbols-outlined { color: var(--success); }
.tar-gest-toggle .ev-rsvp-opt.activa[data-estado="rechazada"], .tar-gest-toggle .ev-rsvp-opt.activa[data-estado="rechazada"] .material-symbols-outlined { color: var(--danger); }

/* Texto rojo "X días para realizar la tarea" del paso "Fecha límite" del
   wizard (ver MANIFEST.md "Cambios recientes") -- fade in/out al cambiar
   la fecha en el calendario manejado por JS (`_evFadeSwap()`,
   js/eventos.js, sobre `#tar-crear-dias-wrap` completo o solo
   `#tar-crear-dias-num` según corresponda, ver
   `_tarActualizarDiasParaCompletar()`/js/tareas.js) -- acá solo el look
   estático. */
#tar-crear-dias-wrap { color: var(--danger); font-size: 0.76rem; font-weight: 700; white-space: nowrap; }

/* Contador de caracteres restantes -- título/descripción del wizard "Nueva
   tarea" (ver MANIFEST.md "Cambios recientes" -- pedido explícito, límites
   70/400). Mismo criterio visual que `.ev-lugar-mapa-nota`/`.tar-limite-nota`
   (texto chico secundario bajo un control), alineado a la derecha para
   quedar pegado al borde del campo que describe. */
.tar-char-contador { font-size: 0.72rem; color: var(--muted); text-align: right; margin-top: 4px; }

/* Archivadas -- más aire entre cards (pedido explícito: se veían más
   compactadas que el resto de las cards de la app). `.ev-card` ya trae
   `margin-bottom:10px` de fábrica (css/eventos.css) -- acá se suma un
   margen propio, scoped a esta lista, sin tocar ninguna otra card de
   Eventos/Tareas que hoy ya se ve bien con el valor base. */
#tar-archivadas-lista .ev-card { margin-bottom: 14px; padding: 16px; }