/* ============================================================
   portal-inputs-v6.css — biblioteca de campos "Compacta 3" (tarjeta con
   acento tematizado + label a la izquierda). Todo va namespaced
   bajo .piv6 para no chocar con Bootstrap ni con el resto del portal.
   El acento se tiñe con la variable global del tenant --tema-color.
   Fragmentos que lo consumen: /comun/portal-inputs-v6.html
   Comportamiento del multiselect: /js/portal-inputs-v6.js
   ============================================================ */

.piv6{
  /* Derivados del color del tenant (color-mix con soporte en navegadores actuales). */
  --piv6-tema: var(--tema-color, #0d6efd);
  --piv6-soft: color-mix(in srgb, var(--piv6-tema) 12%, #fff);
  --piv6-ring: color-mix(in srgb, var(--piv6-tema) 24%, transparent);
  --piv6-ink:  color-mix(in srgb, var(--piv6-tema) 72%, #12131a);

  --piv6-surface:#ffffff;
  --piv6-text:#1b2432;
  --piv6-muted:#6a7383;
  --piv6-faint:#9aa2b1;
  --piv6-line:#dde2ea;
  --piv6-line-strong:#c7cede;
  --piv6-danger:#d64550;
  --piv6-danger-soft:#fdecee;

  --piv6-r-chico:8px;
  --piv6-r-mini:6px;

  --piv6-shadow-sm:0 1px 2px rgba(20,30,50,.06);
  --piv6-shadow-md:0 8px 26px -12px rgba(20,30,50,.28), 0 2px 6px rgba(20,30,50,.05);

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

/* Apilado vertical de campos (equivale al card-body grid del preview). */
.piv6-stack{ display:grid; gap:.5rem; }

/* Rejilla responsive de campos: 2 columnas; .piv6-col-full ocupa la fila completa.
   Colapsa a 1 columna en móvil. Cada celda es un <div> que hospeda un .piv6-crd. */
.piv6-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.55rem .75rem; align-items:start; }
.piv6-grid > .piv6-col-full{ grid-column:1 / -1; }
@media (max-width:575.98px){ .piv6-grid{ grid-template-columns:1fr; } }

/* Fila compacta (flex): agrupa campos cortos en una sola línea, p.ej. el bloque de
   identidad RFC + No. Proveedor + Razón Social en proveedor.html ("en una sola línea, son
   los que se modifican por flujo"). .piv6-col-mini = ancho fijo angosto (RFC/No.Proveedor:
   12-13 caracteres no necesitan media rejilla); .piv6-col-flex crece para llenar el resto
   de la línea (p.ej. Razón Social). */
.piv6-row-compacta{ display:flex; flex-wrap:wrap; gap:.55rem .75rem; align-items:flex-start; }
.piv6-row-compacta > .piv6-col-mini{ flex:0 0 22rem; }
.piv6-row-compacta > .piv6-col-flex{ flex:1 1 18rem; min-width:0; }
@media (max-width:575.98px){ .piv6-row-compacta > .piv6-col-mini{ flex-basis:100%; } }

/* .piv6-col-mini también se puede usar SUELTO dentro de .piv6-grid (fuera de la fila
   compacta), para un campo corto que no debe estirarse a media rejilla (1fr). */
.piv6-grid > .piv6-col-mini{ max-width:22rem; }

/* Campos NUMÉRICOS (input type=number, p.ej. "día del mes..."): la etiqueta larga necesita más
   ancho y el picker de números va angosto (no ocupa toda la línea). */
.piv6-rowin:has(input[type="number"]){ grid-template-columns:minmax(10.5rem, 13rem) 1fr; }
.piv6-rowin:has(input[type="number"]) .piv6-ctrl[type="number"]{ max-width:6.5rem; }

/* ---------- Tarjeta con barra de acento ---------- */
.piv6-crd{
  position:relative; border:1px solid var(--piv6-line);
  border-radius:var(--piv6-r-chico); background:var(--piv6-surface);
  padding:.4rem .7rem .42rem .9rem; overflow:visible;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.piv6-crd::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--piv6-tema); border-radius:var(--piv6-r-chico) 0 0 var(--piv6-r-chico);
  transition:background-color .25s ease, width .15s ease;
}
.piv6-crd:focus-within{ border-color:var(--piv6-tema); box-shadow:0 0 0 3px var(--piv6-ring); }
.piv6-crd:focus-within::before{ width:4px; }
.piv6-crd.is-error{ border-color:var(--piv6-danger); }
.piv6-crd.is-error::before{ background:var(--piv6-danger); }

/* Fila: label a la izquierda + campo. */
.piv6-rowin{ display:grid; grid-template-columns:8.5rem 1fr; align-items:center; gap:.6rem; }
.piv6-rowin.top{ align-items:start; }
/* Switches: la etiqueta ocupa el ancho disponible y el switch se pega a la DERECHA (antes el
   switch quedaba junto a la etiqueta con mucho hueco vacío a la derecha). */
.piv6-rowin:has(.piv6-switch){ grid-template-columns:1fr auto; }
.piv6-rowin:has(.piv6-switch) .piv6-field{ justify-self:end; }
.piv6-rowin.top .piv6-lbl{ margin-top:.25rem; }

.piv6-lbl{
  font-size:.74rem; font-weight:700; color:var(--piv6-muted);
  display:inline-flex; align-items:center; gap:.35rem; line-height:1.2; min-width:0;
}
.piv6-lbl .bi{ color:var(--piv6-tema); font-size:.85rem; flex:none; transition:color .25s ease; }
.piv6-lbl .piv6-req{ color:var(--piv6-danger); font-weight:800; margin-left:.15rem; }
.piv6-crd.is-error .piv6-lbl{ color:var(--piv6-danger); }
.piv6-crd.is-error .piv6-lbl .bi{ color:var(--piv6-danger); }

.piv6-field{ min-width:0; }

/* Control borderless dentro de la tarjeta (el foco lo marca la tarjeta). */
.piv6-ctrl{
  width:100%; font:inherit; color:var(--piv6-text);
  border:0; background:transparent; padding:.18rem 0; font-size:.9rem;
  line-height:1.35;
}
.piv6-ctrl::placeholder{ color:var(--piv6-faint); }
.piv6-ctrl:focus{ outline:none; }
.piv6 textarea.piv6-ctrl{ resize:vertical; min-height:2.6rem; }
.piv6 input[type="date"].piv6-ctrl{ accent-color:var(--piv6-tema); color-scheme:light; }
.piv6 select.piv6-ctrl{ cursor:pointer; }
.piv6 select.piv6-ctrl:disabled{ cursor:default; opacity:.75; }

/* Variante RICH-TEXT (full-width, label arriba): hospeda el editor TinyMCE a lo ancho,
   debajo del label (no la rejilla label-izquierda). */
.piv6-rich .piv6-rich-in{ display:flex; flex-direction:column; gap:.45rem; }
.piv6-rich .piv6-lbl{ margin:0; }
.piv6-rich .piv6-field{ width:100%; min-width:0; }
.piv6-rich .piv6-richarea{ min-height:6rem; } /* placeholder antes de que TinyMCE monte el editor */

/* Ayuda y error por campo. */
.piv6-hint{ display:flex; align-items:flex-start; gap:.35rem; font-size:.72rem; color:var(--piv6-muted); margin-top:.2rem; }
.piv6-hint .bi{ flex:none; color:var(--piv6-faint); font-size:.8rem; margin-top:.02rem; }
.piv6-err{ display:flex; align-items:center; gap:.35rem; font-size:.72rem; color:var(--piv6-danger); font-weight:600; margin-top:.25rem; }
.piv6-err .bi{ flex:none; font-size:.85rem; }
.piv6-err.alert{ background:transparent; border:0; padding:0; margin:.25rem 0 0; }

/* Rango de fechas: una sola línea [inicial] -> [final]. */
.piv6-daterange{ display:flex; flex-wrap:nowrap; align-items:center; gap:.4rem; min-width:0; width:100%; }
.piv6-daterange .piv6-ctrl{ flex:1 1 0; min-width:0; width:auto; }
.piv6-daterange .piv6-arrow{ flex:0 0 auto; display:inline-flex; align-items:center; color:var(--piv6-muted); }
.piv6-daterange .piv6-arrow .bi{ font-size:1em; }

@media (max-width:520px){
  .piv6-rowin{ grid-template-columns:1fr; gap:.15rem; }
  .piv6-daterange{ flex-wrap:wrap; }
  .piv6-daterange .piv6-ctrl{ flex:1 1 100%; }
  .piv6-daterange .piv6-arrow{ transform:rotate(90deg); }
}

/* ============================================================
   INPUT DE ARCHIVO (upload) tematizado
   ============================================================ */
.piv6-file-wrap{ display:flex; }
.piv6-file{
  display:flex; align-items:center; gap:.6rem; width:100%; min-width:0; margin:0;
  border:1px dashed var(--piv6-line-strong); border-radius:var(--piv6-r-mini);
  background:#fbfcfe; padding:.4rem .55rem; cursor:pointer;
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.piv6-file:hover{ border-color:var(--piv6-tema); background:var(--piv6-soft); }
.piv6-file.has-file{ border-style:solid; border-color:var(--piv6-tema); }
.piv6-file-btn{
  display:inline-flex; align-items:center; gap:.35rem; flex:none;
  font-size:.82rem; font-weight:600; color:#fff; background:var(--piv6-tema);
  border-radius:var(--piv6-r-mini); padding:.28rem .6rem;
}
.piv6-file-btn .bi{ font-size:.9rem; }
.piv6-file-name{ font-size:.85rem; color:var(--piv6-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.piv6-file.has-file .piv6-file-name{ color:var(--piv6-text); font-weight:600; }
.piv6-file-input:focus-visible + *,
.piv6-file-input:focus-visible ~ .piv6-file{ box-shadow:0 0 0 3px var(--piv6-ring); }

/* ============================================================
   SWITCH (compacto, tematizado)
   ============================================================ */
.piv6-switch{ display:inline-flex; align-items:center; gap:.55rem; cursor:pointer; font-size:.85rem; color:var(--piv6-text); user-select:none; margin:0; }
.piv6-switch input{ position:absolute; opacity:0; width:0; height:0; }
.piv6-switch .piv6-track{
  position:relative; flex:none; width:38px; height:22px;
  background:var(--piv6-line-strong); border-radius:999px;
  transition:background-color .2s ease; box-shadow:inset 0 1px 2px rgba(0,0,0,.12);
}
.piv6-switch .piv6-thumb{
  position:absolute; top:3px; left:3px; width:16px; height:16px;
  background:#fff; border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.28);
  transition:transform .2s cubic-bezier(.4,1.3,.6,1);
}
.piv6-switch input:checked ~ .piv6-track{ background:var(--piv6-tema); }
.piv6-switch input:checked ~ .piv6-track .piv6-thumb{ transform:translateX(16px); }
.piv6-switch input:focus-visible ~ .piv6-track{ box-shadow:0 0 0 4px var(--piv6-ring); }
.piv6-switch input:disabled ~ .piv6-track{ opacity:.55; }
.piv6-switch .piv6-switch-txt{ font-weight:600; }

/* ============================================================
   MULTISELECT (réplica del filtro Proveedor: búsqueda + TODOS +
   checkboxes + switch "Excepto", con chips en el toggle)
   ============================================================ */
.piv6-ms-wrap{ display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; }
.piv6-ms-wrap > .piv6-ms{ flex:1 1 180px; min-width:0; }

.piv6-ms{ position:relative; }
.piv6-ms-toggle{
  display:flex; align-items:center; gap:.5rem; width:100%; text-align:left;
  font:inherit; color:var(--piv6-text); cursor:pointer; background:#fff;
  border:1px solid var(--piv6-line-strong); border-radius:var(--piv6-r-mini);
  padding:.32rem .55rem; min-height:2.1rem;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.piv6-ms-toggle:focus-visible{ outline:none; border-color:var(--piv6-tema); box-shadow:0 0 0 3px var(--piv6-ring); }
.piv6-ms.open > .piv6-ms-toggle{ border-color:var(--piv6-tema); box-shadow:0 0 0 2px var(--piv6-ring); }
.piv6-ms-chips{ display:flex; flex-wrap:wrap; gap:.25rem; flex:1 1 auto; min-width:0; align-items:center; }
.piv6-ms-ph{ color:var(--piv6-faint); font-size:.86rem; }
.piv6-ms-chip{
  display:inline-flex; align-items:center; gap:.2rem;
  background:var(--piv6-soft); color:var(--piv6-ink);
  border:1px solid color-mix(in srgb, var(--piv6-tema) 25%, transparent);
  border-radius:999px; padding:.06rem .22rem .06rem .5rem;
  font-size:.72rem; font-weight:600; max-width:100%;
}
.piv6-ms-chip .piv6-ms-chip-lbl{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:13ch; }
.piv6-ms-x{ display:inline-flex; align-items:center; justify-content:center; border:0; background:transparent; cursor:pointer; color:inherit; padding:1px; border-radius:50%; line-height:1; }
.piv6-ms-x .bi{ font-size:.7rem; }
.piv6-ms-x:hover{ background:color-mix(in srgb, var(--piv6-tema) 22%, #fff); }
.piv6-ms-chip.piv6-ms-count{ background:var(--piv6-tema); color:#fff; border-color:transparent; padding:.06rem .5rem; }
.piv6-ms-caret{ margin-left:auto; color:var(--piv6-muted); display:flex; flex:none; transition:transform .18s ease; }
.piv6-ms.open > .piv6-ms-toggle .piv6-ms-caret{ transform:rotate(180deg); }

.piv6-ms-inverted-tag{
  display:inline-flex; align-items:center; font-size:.62rem; font-weight:800;
  letter-spacing:.05em; text-transform:uppercase; color:#fff; background:var(--piv6-tema);
  border-radius:999px; padding:.06rem .42rem;
}

.piv6-ms-panel{
  position:absolute; z-index:1060; top:calc(100% + 5px); left:0; right:0;
  background:#fff; border:1px solid var(--piv6-line); border-radius:var(--piv6-r-chico);
  box-shadow:var(--piv6-shadow-md); padding:.45rem;
}
.piv6-ms-panel[hidden]{ display:none; }
.piv6-ms-search{
  display:flex; align-items:center; gap:.4rem; padding:.35rem .5rem;
  border:1px solid var(--piv6-line); border-radius:var(--piv6-r-mini); margin-bottom:.35rem;
}
.piv6-ms-search:focus-within{ border-color:var(--piv6-tema); box-shadow:0 0 0 3px var(--piv6-ring); }
.piv6-ms-search .bi{ color:var(--piv6-faint); flex:none; }
.piv6-ms-search input{ border:0; outline:none; font:inherit; font-size:.85rem; width:100%; background:transparent; color:var(--piv6-text); }
.piv6-ms-list{ max-height:200px; overflow-y:auto; overflow-x:hidden; display:flex; flex-direction:column; }
.piv6-ms-opt{ position:relative; display:flex; align-items:center; gap:.5rem; padding:.32rem .45rem; border-radius:var(--piv6-r-mini); cursor:pointer; font-size:.85rem; margin:0; }
.piv6-ms-opt:hover{ background:var(--piv6-soft); }
.piv6-ms-opt.piv6-hide{ display:none; }
.piv6-ms-opt input{ position:absolute; opacity:0; width:0; height:0; }
.piv6-ms-box{ position:relative; flex:none; width:17px; height:17px; border-radius:5px; border:1.5px solid var(--piv6-line-strong); background:#fff; display:flex; align-items:center; justify-content:center; transition:all .12s ease; }
.piv6-ms-box .bi{ font-size:.72rem; color:#fff; opacity:0; line-height:1; }
.piv6-ms-opt input:checked ~ .piv6-ms-box{ background:var(--piv6-tema); border-color:var(--piv6-tema); }
.piv6-ms-opt input:checked ~ .piv6-ms-box .bi{ opacity:1; }
.piv6-ms-opt input:indeterminate ~ .piv6-ms-box{ background:var(--piv6-tema); border-color:var(--piv6-tema); }
.piv6-ms-opt input:indeterminate ~ .piv6-ms-box::after{ content:""; width:9px; height:2px; background:#fff; border-radius:2px; position:absolute; }
.piv6-ms-opt input:focus-visible ~ .piv6-ms-box{ box-shadow:0 0 0 3px var(--piv6-ring); }
.piv6-ms-optlabel{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1 1 auto; min-width:0; display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.piv6-ms-optlabel .piv6-ms-optname{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.piv6-ms-optlabel .piv6-ms-optbadge{ flex:none; font-size:.68rem; font-weight:700; color:#fff; background:var(--piv6-tema); border-radius:999px; padding:.02rem .4rem; }
.piv6-ms-optlabel .piv6-ms-optbadge.piv6-cero{ background:var(--piv6-line-strong); color:#5b6472; }
.piv6-ms-all{ font-weight:700; }
.piv6-ms-vacio{ font-size:.8rem; color:var(--piv6-muted); text-align:center; padding:.6rem; }
.piv6-ms-divider{ height:1px; background:var(--piv6-line); margin:.3rem .2rem; }

.piv6-ms-excepto{ flex:none; display:flex; align-items:center; gap:.4rem; font-size:.74rem; color:var(--piv6-muted); cursor:pointer; user-select:none; white-space:nowrap; }

/* ============================================================
   BOTONES — mismo lenguaje, tematizados
   ============================================================ */
.piv6-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  font:inherit; font-weight:600; font-size:.9rem; line-height:1;
  padding:.55rem 1rem; border-radius:var(--piv6-r-chico);
  border:1.5px solid transparent; cursor:pointer; white-space:nowrap; text-decoration:none;
  transition:background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease, color .15s ease;
}
.piv6-btn:active{ transform:translateY(1px); }
.piv6-btn:focus-visible{ outline:none; box-shadow:0 0 0 4px var(--piv6-ring); }
.piv6-btn .bi{ font-size:1rem; }
.piv6-btn-sm{ font-size:.8rem; padding:.4rem .7rem; border-radius:var(--piv6-r-mini); }
.piv6-btn-primary{ background:var(--piv6-tema); color:#fff; }
.piv6-btn-primary:hover{ background:color-mix(in srgb, var(--piv6-tema) 88%, #000); color:#fff; }
.piv6-btn-secondary{ background:#fff; color:var(--piv6-ink); border-color:var(--piv6-line-strong); }
.piv6-btn-secondary:hover{ background:var(--piv6-soft); border-color:color-mix(in srgb, var(--piv6-tema) 40%, transparent); color:var(--piv6-ink); }
.piv6-btn-danger{ background:var(--piv6-danger); color:#fff; }
.piv6-btn-danger:hover{ background:color-mix(in srgb, var(--piv6-danger) 88%, #000); color:#fff; }

/* ============================================================
   CHIPS DE DESTINATARIOS (preview "Nombre <correo>")
   ============================================================ */
.piv6-badge{ background-color: var(--piv6-tema, var(--tema-color, #667085)) !important; color:#fff; }
/* Rejilla de 2 columnas consistente; cada chip llena su celda y trunca. En angosto, 1 columna. */
.piv6-dest-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.3rem .5rem; }
@media (max-width:575.98px){ .piv6-dest-grid{ grid-template-columns:1fr; } }
.piv6-dest-chip{
  display:flex; align-items:center; gap:.3rem; width:100%; min-width:0; max-width:100%;
  background:#eef1f6; color:#344054; border:1px solid #e2e6ee;
  border-radius:999px; font-size:.72rem; padding:.14rem .6rem; line-height:1.4;
}
.piv6-dest-chip .bi{ color:var(--piv6-tema, var(--tema-color, #667085)); font-size:.75rem; flex:none; }
.piv6-dest-chip .piv6-dest-txt{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; flex:1 1 auto; }
.piv6-dest-chip .piv6-dest-mail{ color:#6a7383; }
.piv6-dest-more{ grid-column:1 / -1; font-size:.72rem; color:#6a7383; font-weight:600; padding:.1rem .15rem 0; }
.piv6-dest-vacio{ grid-column:1 / -1; font-size:.72rem; color:var(--piv6-faint, #9aa2b1); font-style:italic; }

/* ============================================================
   PANEL DE AYUDA "info" TEMATIZADO POR SECCIÓN (recepcionescomun::panel con
   temaseccion=true). Sustituye el celeste fijo de Bootstrap por el color de
   SECCIÓN (--piv6-card-head, = el del header del card-pagina), con fallback a
   --tema-color: fondo ACLARADO + texto/icono OSCUROS (contraste) + borde sutil.
   Solo aplica donde se pide (clase .rc-panel-seccion); no toca otros panel-info.
   ============================================================ */
.rc-panel-seccion{
  --rc-sec: var(--piv6-card-head, var(--tema-color, #0d6efd));
  --rc-sec-bg:     color-mix(in srgb, var(--rc-sec) 15%, #fff);
  --rc-sec-bg-body:color-mix(in srgb, var(--rc-sec) 7%,  #fff);
  --rc-sec-ink:    color-mix(in srgb, var(--rc-sec) 72%, #12131a);
  --rc-sec-border: color-mix(in srgb, var(--rc-sec) 30%, #fff);
  /* chevron neutro (evita el azul del active-icon de BS sobre el fondo claro) */
  --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon);
}
.rc-panel-seccion .accordion-item{ border-color:var(--rc-sec-border); background-color:transparent; }
.rc-panel-seccion .accordion-button,
.rc-panel-seccion .accordion-button:not(.collapsed){
  background-color:var(--rc-sec-bg) !important;
  color:var(--rc-sec-ink) !important;     /* gana al .text-primary que agrega el fragmento */
  box-shadow:none;
}
.rc-panel-seccion .accordion-button .bi,
.rc-panel-seccion .accordion-button i{ color:var(--rc-sec-ink) !important; }
.rc-panel-seccion .accordion-button:focus{
  border-color:var(--rc-sec-border);
  box-shadow:0 0 0 .25rem color-mix(in srgb, var(--rc-sec) 22%, transparent);
}
.rc-panel-seccion .accordion-body{ background-color:var(--rc-sec-bg-body); color:#344054; }

/* ============================================================
   CARD CONTENEDOR DE PÁGINA (reemplazo del panel viejo de BS)
   Header tematizado via .card-header-tema (bg = --tema-color). Aquí solo
   añadimos el radio/sombra de la card y el layout del encabezado.
   ============================================================ */
.piv6-card-pagina{
  border:1px solid var(--piv6-line, #dde2ea);
  border-radius:12px;
  box-shadow:0 8px 26px -12px rgba(20,30,50,.28), 0 2px 6px rgba(20,30,50,.05);
  overflow:hidden;
}
.piv6-card-pagina > .piv6-card-pagina-head{
  /* Color de SECCIÓN (--piv6-card-head = C_Soluciones.bsBg del módulo de la página, el mismo del
     grupo activo del sidebar3), con fallback a --tema-color. Texto/iconos en blanco.
     REVERTIR a --tema-color: quita 'var(--piv6-card-head, ' y su ')' de la línea del background. */
  background-color: var(--piv6-card-head, var(--tema-color, var(--bs-primary, #0d6efd)));
  color:#fff;
  border-bottom:0;
  /* padding-left holgado: el rail del sidebar (esquina redondeada) se encima al inicio
     del header; así el icono siempre libra el borde. */
  padding:.85rem 1.1rem .85rem 2.2rem;
  font-size:1.05rem;
}
.piv6-card-pagina > .piv6-card-pagina-head .bi,
.piv6-card-pagina > .piv6-card-pagina-head b,
.piv6-card-pagina > .piv6-card-pagina-head a{ color:#fff; }
/* Icono decorado en círculo/badge semitransparente (estilo /proveedores/consulta). */
.piv6-card-pagina-badge{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:46px; height:46px; border-radius:14px;
  background:rgba(255,255,255,.22); box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.piv6-card-pagina-badge .bi{ font-size:1.4rem; line-height:1; }
/* Título más grande. */
.piv6-card-pagina-titulo{ font-size:1.5rem; font-weight:700; letter-spacing:-.01em; min-width:0; margin:0; }
.piv6-card-pagina > .card-body{ padding:1rem 1.1rem 1.15rem; }

/* Botón de acciones legible sobre el fondo de sección (contorno claro tipo outline-light). */
.piv6-btn-head{
  display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap; text-decoration:none;
  font-weight:600; font-size:.88rem; line-height:1; padding:.45rem .85rem;
  border-radius:var(--piv6-r-chico, 8px); border:1.5px solid rgba(255,255,255,.75);
  color:#fff; background:rgba(255,255,255,.12);
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
/* Hover: NO fondo blanco (dejaba texto blanco sobre blanco = invisible). Mantiene el texto
   blanco y solo intensifica el fondo translúcido, legible sobre el color de sección. */
.piv6-btn-head:hover{ background:rgba(255,255,255,.24); color:#fff; border-color:#fff; }
.piv6-btn-head:focus-visible{ outline:none; box-shadow:0 0 0 4px rgba(255,255,255,.35); }
.piv6-btn-head .bi{ font-size:1rem; }

/* Panel de "control de cambios" (auditoriacomun) PEGADO al título del card y tematizado por
   SECCIÓN, con el mismo tratamiento suave que el header de Filtros (fondo 15% + ink 72%). */
.piv6-card-pagina > .card-body > .piv6-cc-glued{ margin:0 -1.1rem 1rem; }
.piv6-card-pagina > .card-body > .piv6-cc-glued > .card{ border:0; border-radius:0 0 12px 12px; margin:0; box-shadow:none; overflow:hidden; }
.piv6-card-pagina > .card-body > .piv6-cc-glued > .card > .card-header{
  background: color-mix(in srgb, var(--piv6-card-head, var(--tema-color, #0d6efd)) 15%, #fff);
  color: color-mix(in srgb, var(--piv6-card-head, var(--tema-color, #0d6efd)) 72%, #12131a);
  border:0; border-radius:0; padding-left:2.2rem;
}
.piv6-card-pagina > .card-body > .piv6-cc-glued > .card > .card-header a,
.piv6-card-pagina > .card-body > .piv6-cc-glued > .card > .card-header i{ color:inherit !important; }
/* Chevron: rota según el estado real del colapso (aria-expanded del trigger). El glyph server
   viene bi-chevron-up; colapsado lo apuntamos hacia abajo, expandido hacia arriba. */
.piv6-cc-glued .card-header a .bi-chevron-up,
.piv6-cc-glued .card-header a .bi-chevron-down{ transition:transform .2s ease; margin-left:auto; }
.piv6-cc-glued .card-header a[aria-expanded="false"] .bi-chevron-up,
.piv6-cc-glued .card-header a[aria-expanded="false"] .bi-chevron-down{ transform:rotate(180deg); }

@media (max-width:575.98px){
  .piv6-card-pagina > .piv6-card-pagina-head{ padding:.7rem .85rem .7rem 1.3rem; }
  .piv6-card-pagina-badge{ width:38px; height:38px; }
  .piv6-card-pagina-badge .bi{ font-size:1.15rem; }
  .piv6-card-pagina-titulo{ font-size:1.2rem; }
  .piv6-card-pagina > .card-body{ padding:.85rem; }
}

/* ============================================================
   FORMA con FOOTER STICKY (botonera pegada al fondo de la ventana)
   Patrón reutilizable de v6:
     <form class="piv6 piv6-form-page" ...>
       <div class="piv6-form-main"> ...card-pagina / campos... </div>
       <div class="piv6-form-footer">
         <div class="piv6-form-footer-in"> Regresar  Guardar </div>
       </div>
     </form>
   - Forma CORTA: el footer se ve al fondo de la ventana (min-height ~100vh en el form +
     .piv6-form-main con flex:1 que empuja el footer con margin-top:auto).
   - Forma LARGA: el footer queda pegado abajo mientras se hace scroll (position:sticky;bottom:0).
   - El footer es HERMANO del card (no va dentro de .piv6-card-pagina, que tiene overflow:hidden y
     rompería el sticky). .piv6-form-main reserva padding-bottom para que el footer no tape el
     último campo. --piv6-form-offset ≈ altura del navbar (ajustable).
   ============================================================ */
/* --piv6-themefoot-h = alto del footer FIJO del tema (comun/head::footerdesktop, .footer.fixed-bottom,
   ~15px, z-index 1030). La botonera sticky se apoya JUSTO ENCIMA de él (bottom = ese alto) con
   z-index mayor y fondo opaco, para que los botones no queden tapados/cortados por ese footer. */
.piv6-form-page{ display:flex; flex-direction:column; min-height:calc(100vh - var(--piv6-form-offset, 4.5rem)); --piv6-themefoot-h:15px; }
.piv6-form-main{ flex:1 1 auto; padding-bottom:calc(4.75rem + var(--piv6-themefoot-h)); }
.piv6-form-footer{
  position:sticky; bottom:var(--piv6-themefoot-h, 15px); z-index:1031; margin-top:auto;
  background:color-mix(in srgb, var(--piv6-tema, #0d6efd) 5%, #fff);
  border-top:1px solid var(--piv6-line, #dde2ea);
  box-shadow:0 -6px 18px -10px rgba(20,30,50,.3);
  padding:.7rem clamp(.6rem, 2vw, 1.1rem);
}
.piv6-form-footer-in{ display:flex; align-items:center; justify-content:flex-end; gap:.6rem; flex-wrap:wrap; }
@media (max-width:575.98px){
  .piv6-form-main{ padding-bottom:calc(5.25rem + var(--piv6-themefoot-h)); }
  .piv6-form-footer-in > *{ flex:1 1 auto; }
  .piv6-form-footer-in .piv6-btn{ width:100%; justify-content:center; }
}

/* ============================================================
   TABS de formulario (nav-tabs BS5 nativos), tematizados con --piv6-tema.
   Para forms largos y complejos (p.ej. /proveedores/proveedor) organizados en
   secciones navegables SIN salir de un único <form> (los tab-panes ocultos
   siguen posteando sus campos: BS5 solo les pone display:none, eso no saca
   inputs del form ni afecta hidden fields). El tab ACTIVO al cargar lo decide
   el propio template server-side (#fields.hasErrors por sección), no JS, para
   que un campo inválido en un tab oculto nunca quede invisible al usuario;
   piv6-tab-error solo pinta el testigo visual en el tab que no está activo.
   ============================================================ */
.piv6-tabs{ display:flex; flex-wrap:wrap; gap:.15rem; border-bottom:2px solid var(--piv6-line, #dde2ea); margin-bottom:1rem; }
.piv6-tabs .nav-link{
  border:0; border-bottom:3px solid transparent; border-radius:0;
  color:var(--piv6-muted, #6a7383); font:inherit; font-weight:600; font-size:.86rem;
  padding:.55rem .9rem; display:inline-flex; align-items:center; gap:.4rem;
  background:transparent; cursor:pointer; transition:color .15s ease, border-color .15s ease;
}
.piv6-tabs .nav-link:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--piv6-ring, rgba(13,110,253,.24)); border-radius:var(--piv6-r-mini, 6px); }
.piv6-tabs .nav-link .bi{ font-size:.95rem; }
.piv6-tabs .nav-link:hover{ color:var(--piv6-tema, #0d6efd); }
.piv6-tabs .nav-link.active{ color:var(--piv6-tema, #0d6efd); border-bottom-color:var(--piv6-tema, #0d6efd); background:transparent; }
.piv6-tabs .nav-link .piv6-tab-err{ color:var(--piv6-danger, #d64550); font-size:.8rem; }
@media (max-width:575.98px){
  .piv6-tabs{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .piv6-tabs .nav-link{ white-space:nowrap; }
}

@media (prefers-reduced-motion:reduce){ .piv6 *{ transition:none !important; } }