/* ============================================================
   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); }
.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) ---------- */
.pfv6-body{
  padding:1rem 1.1rem;
  display:grid; gap:.85rem;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
}

.pfv6-campo{ display:flex; flex-direction:column; gap:.35rem; min-width:0; }
/* 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; }
.pfv6-campo .piv6-ms-list{ max-height:300px; }
.pfv6-lbl{
  font-size:.74rem; font-weight:700; color:var(--pfv6-muted);
  display:inline-flex; align-items:center; gap:.35rem;
}
.pfv6-lbl .bi{ color:var(--pfv6-tema); font-size:.85rem; }

/* ---------- Control segmentado Sí / No / Todos ---------- */
.pfv6-seg{ display:flex; width:100%; border:1px solid var(--pfv6-line-strong); border-radius:var(--pfv6-r-chico); overflow:hidden; background:#f8f9fb; }
.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:.4rem .5rem; font-size:.82rem; 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 (texto / select / rango) ---------- */
.pfv6-inp{
  width:100%; font:inherit; font-size:.88rem; line-height:1.3;
  padding:.45rem .6rem; border:1px solid var(--pfv6-line-strong);
  border-radius:var(--pfv6-r-chico); background:#fff; color:var(--pfv6-text);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.pfv6-inp::placeholder{ color:var(--pfv6-faint); }
.pfv6-inp:focus,.pfv6-inp:focus-visible{ outline:none; border-color:var(--pfv6-tema); box-shadow:0 0 0 3px var(--pfv6-ring); }
.pfv6-selectctrl{ appearance:none; padding-right:1.8rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%236a7383' d='M4.5 6l3.5 3.5L11.5 6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .55rem center; background-size:14px; }

/* Rango de fechas: dos inputs con una flecha entre ellos. */
.pfv6-daterange{ display:flex; align-items:center; gap:.4rem; }
.pfv6-daterange .pfv6-inp{ flex:1 1 0; min-width:0; }
.pfv6-daterange .pfv6-arrow{ color:var(--pfv6-tema); flex:none; display:inline-flex; }

/* El multiselect piv6 va envuelto en un .piv6 dentro del .pfv6-campo: que ocupe el ancho. */
.pfv6-campo > .piv6{ min-width:0; }
.pfv6-campo > .piv6 .piv6-ms-wrap{ margin:0; }

/* ---------- 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;
}
.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). */
.piv6-card-pagina > .card-body{ 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; }

@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; } }