/* ============================================================
   portal-filtros-v6.css — biblioteca de FILTROS moderna y tematizada,
   análoga a portal-inputs-v6 (.piv6). Namespaced bajo .pfv6. Reemplaza
   incrementalmente al viejo comun/filtros5 (que queda intacto).
   Header tematizado con --tema-color (NO el celeste hardcodeado de filtros5).
   Comportamiento en /js/portal-filtros-v6.js.
   ============================================================ */

.pfv6{
  /* El acento del panel (header, botones, segmentado) toma el COLOR DE SECCIÓN
     (--piv6-card-head, el mismo que pinta el header del card-pagina y el panel de
     ayuda de avisos), con fallback al --tema-color del tenant si el panel se usa
     fuera de un card-pagina. */
  --pfv6-tema: var(--piv6-card-head, var(--tema-color, #0d6efd));
  --pfv6-soft: color-mix(in srgb, var(--pfv6-tema) 12%, #fff);
  --pfv6-ring: color-mix(in srgb, var(--pfv6-tema) 24%, transparent);
  --pfv6-ink:  color-mix(in srgb, var(--pfv6-tema) 72%, #12131a);

  --pfv6-surface:#ffffff;
  --pfv6-text:#1b2432;
  --pfv6-muted:#6a7383;
  --pfv6-faint:#9aa2b1;
  --pfv6-line:#dde2ea;
  --pfv6-line-strong:#c7cede;

  --pfv6-r-chico:8px;
  --pfv6-r-mini:6px;
  --pfv6-shadow-sm:0 1px 2px rgba(20,30,50,.06);

  color:var(--pfv6-text);
}
.pfv6 *,.pfv6 *::before,.pfv6 *::after{ box-sizing:border-box; }

/* ---------- Panel ---------- */
.pfv6-panel{
  border:1px solid var(--pfv6-line);
  border-radius:12px;
  /* SIN overflow:hidden: recortaba el dropdown del multiselect (position:absolute)
     al pie del panel. Las esquinas se redondean en el propio header/pie (abajo). */
  box-shadow:var(--pfv6-shadow-sm);
  background:var(--pfv6-surface);
  margin-bottom:1rem;
}

/* Header tematizado por COLOR DE SECCIÓN (--pfv6-tema = --piv6-card-head), actúa como
   toggle del colapso. Redondeo propio ya que el panel no recorta (colapsado = todas las
   esquinas; expandido = solo arriba, el pie redondea abajo). */
.pfv6-head{
  display:flex; align-items:center; gap:.6rem; width:100%;
  border:0; text-align:left; cursor:pointer;
  /* MISMO tratamiento que el panel de ayuda de avisos (rc-panel-seccion): fondo ACLARADO
     con el color de sección (15% sobre blanco) + ink OSCURO (72%), NO un fill sólido. */
  background: color-mix(in srgb, var(--pfv6-tema) 15%, #fff);
  /* padding-left = el del header del título (2.2rem) para que el icono/texto de Filtros alinee. */
  color: var(--pfv6-ink); padding:.7rem 1.1rem .7rem 2.2rem; font-size:1.02rem; font-weight:600;
  border-radius:11px;
}
.pfv6-head[aria-expanded="true"]{ border-radius:11px 11px 0 0; border-bottom:1px solid color-mix(in srgb, var(--pfv6-tema) 22%, #fff); }
/* Cabecera FIJA (fragmento ::bloque): panel sin colapso, siempre abierto. No es un toggle, así que
   ni cursor de click ni caret; el redondeo es solo arriba porque el cuerpo va pegado debajo. */
.pfv6-head-fijo{ cursor:default; border-radius:11px 11px 0 0; border-bottom:1px solid color-mix(in srgb, var(--pfv6-tema) 22%, #fff); }
.pfv6-head:focus-visible{ outline:none; box-shadow:inset 0 0 0 3px var(--pfv6-ring); }
.pfv6-head .bi{ color: var(--pfv6-ink); }
.pfv6-head-titulo{ display:inline-flex; align-items:center; gap:.5rem; }
.pfv6-contador{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:1.5rem; height:1.5rem; padding:0 .45rem; border-radius:999px;
  font-size:.85rem; font-weight:700; line-height:1;
  background:color-mix(in srgb, var(--pfv6-tema) 22%, #fff); color:var(--pfv6-ink);
}
.pfv6-contador.pfv6-activo{ background:var(--pfv6-tema); color:#fff; }
.pfv6-caret{ margin-left:auto; display:inline-flex; transition:transform .2s ease; }
.pfv6-head[aria-expanded="true"] .pfv6-caret{ transform:rotate(180deg); }

/* ---------- Cuerpo (rejilla de controles) ---------- */
/* COLUMNAS DE 300px (antes 220): desde que cada filtro es una tarjeta piv6 con la etiqueta a la
   IZQUIERDA -la misma de las formas de captura- la celda tiene que hospedar etiqueta + control.
   Con 220px la etiqueta se comía el campo. El alto no sufre: la tarjeta compacta mide ~3.1rem
   contra los ~4.3rem del campo etiqueta-arriba que había antes, así que un renglón menos de
   columnas se compensa con renglones más bajos. */
.pfv6-body{
  padding:1rem 1.1rem;
  display:grid; gap:.85rem;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

/* .pfv6-campo es SÓLO el envoltorio de rejilla (y el gancho que recorre portal-filtros-v6.js
   para contar filtros puestos). El aspecto del campo vive dentro, en la tarjeta
   .piv6-crd.piv6-crd-cmp de portal-inputs-v6. */
.pfv6-campo{ min-width:0; }
/* Rejilla SUELTA (sin .pfv6-panel): la usan las pantallas que ya viven dentro de un card-pagina y
   no quieren una segunda cabecera "Filtros" —el reporteador, donde el card ya rotula el reporte y
   el cuerpo entero SON los filtros—. El padding lo pone el .card-body, así que aquí sobra: sin
   esto los campos quedaban 1.1rem más adentro que el resto del contenido del card. Solo aplica al
   cuerpo que cuelga DIRECTO del .pfv6 (el de ::panel y ::bloque va dentro de .pfv6-panel). */
.pfv6-suelto > .pfv6-body{
  padding:0;
  /* COLUMNAS MÁS ANCHAS Y MENOS: 320px en vez de 220px. En el panel de una consulta los filtros
     comparten la pantalla con la tabla y conviene que ocupen poco alto; aquí los filtros SON la
     página -no hay nada debajo- y con 5 columnas los 13 campos se resolvían en 3 renglones,
     dejando dos tercios de la pantalla en blanco. Con ~3 columnas el bloque respira, los campos
     son más cómodos de capturar y el cuerpo del card se ve ocupado. */
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 400px), 1fr));
}
/* Y con columnas de 320px+ el multiselect ya no necesita dos tracks: sin esto se comía dos de las
   tres columnas y volvía a aplanar la rejilla. Los anchos EXPLÍCITOS (pfv6-ancho/ancho3) sí se
   respetan: los pide el contenido, no la rejilla. */
.pfv6-suelto > .pfv6-body .pfv6-campo:has(.piv6-ms){ grid-column:span 1; }
/* Rango de fechas y segmentado: en pistas de 400px caben en UNA, al revés que en el panel. El
   :not() deja pasar el ancho EXPLÍCITO del caller (pfv6-ancho/ancho3), que si no perdería por
   especificidad contra este selector aunque vaya después en la hoja. */
.pfv6-suelto > .pfv6-body .pfv6-campo:has(.piv6-daterange):not(.pfv6-ancho):not(.pfv6-ancho3),
.pfv6-suelto > .pfv6-body .pfv6-campo:has(.pfv6-seg):not(.pfv6-ancho):not(.pfv6-ancho3){ grid-column:span 1; }
/* …salvo el segmentado de MUCHAS opciones (5+, p.ej. la calificación de evaluaciones:
   Excelente/Bueno/Regular/Malo/Muy Malo/Todos), que en una sola pista deja ~40px por opción.
   El conteo se hace en CSS con :nth-of-type sobre los <label> del segmentado — mismo criterio
   content-aware que el ancho de los campos: lo que manda es el contenido, no la celda.
   Un ancho EXPLÍCITO del caller (pfv6-ancho/ancho3) sigue ganando: va después en la hoja. */
.pfv6-suelto > .pfv6-body .pfv6-campo:has(.pfv6-seg .pfv6-seg-btn:nth-of-type(5)):not(.pfv6-ancho3){ grid-column:span 2; }

/* PIE DE LOS FILTROS de la rejilla suelta. El panel de una consulta ya trae uno (.pfv6-foot con
   Aplicar/Limpiar y el contador); aquí no lo hay porque no hay panel, y hacían falta las dos
   cosas: el LIMPIAR a la mano de los campos -no al fondo de la página, junto al botón que dispara
   el reporte- y el CONTADOR, que en una pantalla de puros filtros es la única forma de saber de un
   vistazo cuántos están puestos sin recorrerlos todos. Se separa del cuerpo con una línea y va
   pegado a la izquierda: no es la acción principal de la pantalla (ésa vive en la botonera). */
.pfv6-pie{
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  margin-top:1rem; padding-top:.85rem; border-top:1px solid var(--pfv6-line);
}
.pfv6-pie .pfv6-pie-txt{ font-size:.85rem; color:var(--pfv6-muted); }

/* ============================================================
   RESUMEN DE LA SELECCIÓN (pantalla de filtros del reporteador).
   La CAJA la pone .piv6-espera-filtros, compartida con la pantalla de espera; aquí sólo vive lo
   propio de esta pantalla: el contador dentro de la cabecera y el mensaje de "sin filtros". */
.pfv6-resumen{ margin-top:1.1rem; }
/* Separador entre los campos y el resumen: a rayas y a todo lo ancho del contenido, para que se lea
   como "hasta aquí capturas, de aquí para abajo es lo que llevas" sin meter otro borde sólido. */
.pfv6-resumen-sep{
  margin-top:1.6rem;
  border-top:2px dashed color-mix(in srgb, var(--rc-sec, var(--pfv6-tema)) 30%, transparent);
}
/* Cabecera de ESTA pantalla: el rótulo va en el color de sección a plena intensidad -el mismo del
   encabezado de la página- y el contador conserva el cuerpo grande que tenía como KPI. La fila
   crece de alto a propósito: aquí la cabecera ES el titular del bloque. */
.pfv6-resumen > .piv6-espera-filtros-head{
  align-items:center; padding:.7rem 1rem;
  color:var(--pe-sec, var(--rc-sec));
}
/* Separación entre la cabecera y los filtros: punteada, para que divida sin pesar como un borde
   sólido más dentro de una caja que ya tiene el suyo. */
.pfv6-resumen > .piv6-espera-filtros-head{
  border-bottom:2px dotted color-mix(in srgb, var(--pe-sec, var(--rc-sec)) 35%, transparent);
}
.pfv6-resumen-num{
  margin-left:auto; font-size:2.9rem; font-weight:800; line-height:1; letter-spacing:-.02em;
}
.pfv6-resumen-etq{ font-size:.82rem; font-weight:600; text-transform:none; letter-spacing:0; opacity:.85; align-self:flex-end; padding-bottom:.25rem; }
.pfv6-resumen-lista:empty{ display:none; }
.pfv6-resumen-vacio{ margin:0; padding:.9rem .75rem; font-size:.9rem; color:var(--pfv6-muted); text-align:center; }
.pfv6-resumen-vacio[hidden]{ display:none; }
/* Los multiselect traen combos con nombres largos: el campo abarca ~col-4 (2 tracks de la
   rejilla) para que el select sea más ancho, y su dropdown es un poco más alto. */
.pfv6-body .pfv6-campo:has(.piv6-ms){ grid-column:span 2; }
/* El SEGMENTADO también pide dos pistas: con la etiqueta a la izquierda, un Sí/No/Todos en una
   sola pista queda con ~150px para tres botones y el texto se trunca. Es el mismo criterio del
   multiselect, y los que ya traían `pfv6-ancho` no cambian (span 2 igual). */
.pfv6-body .pfv6-campo:has(.pfv6-seg){ grid-column:span 2; }
/* Y el RANGO DE FECHAS, por la misma razón: son DOS controles con su flecha en medio. Cada fecha
   mide lo que mide un dd/mm/aaaa (ancho content-aware, ver portal-inputs-v6.css) y la suma no cabe
   en una pista de 300px junto a la etiqueta; con dos pistas caben holgadas y el sobrante queda en
   blanco a la derecha, que es lo que se pidió. En la rejilla SUELTA del reporteador (pistas de
   400px) no hace falta: ahí caben en una. */
.pfv6-body .pfv6-campo:has(.piv6-daterange){ grid-column:span 2; }
.pfv6-campo .piv6-ms-list{ max-height:300px; }
/* Ancho explícito por campo (parámetro `clase` de los filtro-*): los segmentados de 3-4 opciones y
   los combos de etiqueta larga necesitan más de un track para no truncar el texto. */
.pfv6-body .pfv6-campo.pfv6-ancho{ grid-column:span 2; }
.pfv6-body .pfv6-campo.pfv6-ancho3{ grid-column:span 3; }
@media (max-width:767.98px){
  .pfv6-body .pfv6-campo.pfv6-ancho,
  .pfv6-body .pfv6-campo.pfv6-ancho3{ grid-column:span 1; }
}
/* ---------- Control segmentado Sí / No / Todos ----------
   ÚNICO control de la biblioteca de filtros sin gemelo en portal-inputs-v6 (las formas de captura
   no usan segmentados), así que su estilo se queda aquí. Vive DENTRO de la tarjeta piv6, en la
   celda del control, y por eso va sin borde propio: el borde y el anillo de foco los pone la
   tarjeta, igual que a un <input>. Conserva un contorno TENUE (var(--pfv6-line), no el
   --pfv6-line-strong de antes) porque sin ninguno las 3-4 opciones no se leen como un grupo, y se
   apretó el padding para que la tarjeta no crezca de alto. */
.pfv6-seg{ display:flex; width:100%; border:1px solid var(--pfv6-line); border-radius:var(--pfv6-r-mini); overflow:hidden; background:color-mix(in srgb, var(--pfv6-tema) 5%, #fff); }
.pfv6-seg-input{ position:absolute; opacity:0; width:0; height:0; }
.pfv6-seg-btn{
  flex:1 1 0; min-width:0; margin:0;
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  padding:.28rem .45rem; font-size:.8rem; font-weight:600; color:#495057;
  cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:background-color .15s ease, color .15s ease;
}
.pfv6-seg-btn .bi{ font-size:.9rem; }
.pfv6-seg-btn + .pfv6-seg-btn{ border-left:1px solid var(--pfv6-line); }
.pfv6-seg-btn:hover{ background:var(--pfv6-soft); }
.pfv6-seg-input:checked + .pfv6-seg-btn{ background:var(--pfv6-tema); color:#fff; }
.pfv6-seg-input:focus-visible + .pfv6-seg-btn{ box-shadow:inset 0 0 0 3px var(--pfv6-ring); }

/* ---------- Controles de campo ----------
   YA NO VIVEN AQUÍ. Texto, select, rango de fechas y switch usan el control de la biblioteca de
   captura (.piv6-ctrl / .piv6-daterange / .piv6-switch de portal-inputs-v6), que es la FUENTE DE
   VERDAD del portal: un solo alto, un solo radio, un solo anillo de foco y un solo tratamiento de
   etiqueta en formas y en filtros (Enrique, 2026-08-19: "deja como fuente de verdad las clases de
   las formas de captura y actualiza las de las páginas de consulta").
   Se borraron por duplicadas: .pfv6-inp, .pfv6-selectctrl, .pfv6-daterange, .pfv6-arrow,
   .pfv6-switch, .pfv6-lbl, la variable --pfv6-alto-ctrl y los parches .pfv6-campo > .piv6.
   El alto homogéneo lo da ahora la propia tarjeta (.piv6-rowin, min-height), no cada control. */

/* ---------- Pie (Aplicar / Limpiar / registros) ---------- */
.pfv6-foot{
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  padding:.85rem 1.1rem; border-top:1px solid var(--pfv6-line);
  background:color-mix(in srgb, var(--pfv6-tema) 4%, #fff);
  border-radius:0 0 11px 11px;
}
/* La acción principal del pie se despega a la derecha. Va por clase y no por :last-child para que
   siga funcionando si mañana se agrega algo después. */
.pfv6-foot > .pfv6-btn-fin{ margin-left:auto; }
@media (max-width:575.98px){ .pfv6-foot > .pfv6-btn-fin{ margin-left:0; } }
.pfv6-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  font:inherit; font-weight:600; font-size:.88rem; line-height:1;
  padding:.5rem .95rem; border-radius:var(--pfv6-r-chico);
  border:1.5px solid transparent; cursor:pointer; white-space:nowrap;
  transition:background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.pfv6-btn:focus-visible{ outline:none; box-shadow:0 0 0 4px var(--pfv6-ring); }
.pfv6-btn-primary{ background:var(--pfv6-tema); color:#fff; }
.pfv6-btn-primary:hover{ background:color-mix(in srgb, var(--pfv6-tema) 88%, #000); color:#fff; }
.pfv6-btn-secondary{ background:#fff; color:var(--pfv6-ink); border-color:var(--pfv6-line-strong); }
.pfv6-btn-secondary:hover{ background:var(--pfv6-soft); border-color:color-mix(in srgb, var(--pfv6-tema) 40%, transparent); }

/* Switch "Ver como tarjetas" (preferencia de UI), tematizado. */
.pfv6-tarjetas{ font-size:.8rem; color:var(--pfv6-muted); }
.pfv6-tarjetas .form-check-label{ cursor:pointer; margin:0; }
.pfv6-tarjetas .form-check-label .bi{ color:var(--pfv6-tema); }
.pfv6 .form-check-input:checked{ background-color:var(--pfv6-tema); border-color:var(--pfv6-tema); }
.pfv6 .form-check-input:focus{ border-color:var(--pfv6-tema); box-shadow:0 0 0 .2rem var(--pfv6-ring); }

.pfv6-registros{ margin-left:auto; display:inline-flex; align-items:center; gap:.45rem; font-size:.8rem; color:var(--pfv6-muted); }
.pfv6-registros .bi{ color:var(--pfv6-tema); }
.pfv6-select{
  font:inherit; font-size:.85rem; padding:.35rem 1.8rem .35rem .6rem;
  border:1px solid var(--pfv6-line-strong); border-radius:var(--pfv6-r-mini); background:#fff; color:var(--pfv6-text);
}
.pfv6-select:focus-visible{ outline:none; border-color:var(--pfv6-tema); box-shadow:0 0 0 3px var(--pfv6-ring); }

/* ---------- Panel de filtros PEGADO al header del título (convención aprobada) ----------
   Cuando el panel pfv6 vive dentro de un card-pagina: sin hueco arriba, a lo ancho del
   card (full-bleed), esquinas SOLO abajo (el header de Filtros pega bajo el título).
   Aplica solo dentro de .piv6-card-pagina (los paneles pfv6 standalone quedan flotantes). */
/* Solo si el card-body ARRANCA con el panel de Filtros (para pegarlo bajo el título). En páginas
   sin filtros (formas/detalle) se conserva el padding-top del card-body (espacio bajo el header). */
.piv6-card-pagina > .card-body:has(> form.pfv6){ padding-top:0; }
.piv6-card-pagina .card-body > form.pfv6{ margin:0 -1.1rem; }
.piv6-card-pagina .card-body > form.pfv6 .pfv6-panel{
  border-top:0; border-left:0; border-right:0;
  border-radius:0 0 12px 12px;
}
.piv6-card-pagina .card-body > form.pfv6 .pfv6-head,
.piv6-card-pagina .card-body > form.pfv6 .pfv6-head[aria-expanded="true"]{ border-radius:0; }
.piv6-card-pagina .card-body > form.pfv6 .pfv6-foot{ border-radius:0 0 12px 12px; }

/* ---------- Aviso de "Consultando…": ya NO vive aquí ----------
   Estaba en este archivo como overlay propio (.pfv6-cargando: position:fixed, z-index 2000, scrim
   y caja blanca con un spinner-border gris). Desde la consolidación de 2026-08-20 el aviso de las
   consultas es el MODAL DE ESPERA ÚNICO del portal: #esperamodal, en static/css/modal-espera.css.
   Con eso toma el color de la sección y se lee igual que el resto de las esperas (login, timbrado,
   navegación del menú), que era justo lo que no pasaba. El markup #pfv6Cargando sigue existiendo
   en comun/portal-filtros-v6.html, pero sólo como interruptor y portador de los textos i18n: no
   pinta nada y no necesita CSS. */

@media (max-width:575.98px){
  .pfv6-body{ grid-template-columns:1fr; }
  .pfv6-registros{ margin-left:0; }
}
@media (prefers-reduced-motion:reduce){ .pfv6 *{ transition:none !important; } }

/* Filtro FIJO por la pantalla (estatus en Revisión, Por Autorizar, Tesorería...): se ve, se lee y
   dice su valor, pero no se puede cambiar. Se marca con candado en la etiqueta en vez de
   esconderlo: ocultarlo dejaría al usuario preguntándose por qué esa consulta no tiene estatus.
   El "apagado" del campo ya lo pinta la tarjeta piv6 (etiqueta en slate y select con opacidad
   cuando hay un control :disabled dentro), así que aquí sólo queda el candado. */
.pfv6-lbl-candado{ font-size: .78em; opacity: .55; margin-left: .25rem; }