/* ============================================================
   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);
  /* Color de SECCIÓN (header del card = C_Soluciones.bsBg), con fallback a tema.
     El label piv6 y la barra de acento se tiñen con éste (opción B, #40). */
  --rc-sec: var(--piv6-card-head, var(--tema-color, #0d6efd));
  /* Slate FIJO (independiente del tema) para el label de campos DESHABILITADOS. */
  --piv6-disabled-lbl:#adb5bd;

  --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: 12 columnas (como el col=N de Bootstrap / de la versión
   vieja del form). Cada celda es un <div> que hospeda un .piv6-crd. **REUTILIZABLE**: por
   defecto cada campo ocupa MEDIA fila (span 6 = col-6, comportamiento previo); para hacerlo
   proporcional al contenido, ponle al <div> del campo una clase `piv6-cN` (N=1..12), usando
   el MISMO `col=N` que tenía la versión anterior (issue #41). Ej.: teléfono/CP/RFC → `piv6-c3`
   (¼), correo/razón social → default (½), calle/direcciones → `piv6-c12` (fila completa).
   Los campos cortos NO se estiran: el resto de la fila queda en blanco. */
.piv6-grid{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:.55rem .75rem; align-items:start; }
.piv6-grid > *{ grid-column: span 6; }                 /* default = ½ (col-6), como antes */
.piv6-grid > .piv6-c1{ grid-column: span 1; }
.piv6-grid > .piv6-c2{ grid-column: span 2; }
.piv6-grid > .piv6-c3{ grid-column: span 3; }          /* ¼ */
.piv6-grid > .piv6-c4{ grid-column: span 4; }          /* ⅓ */
.piv6-grid > .piv6-c5{ grid-column: span 5; }
.piv6-grid > .piv6-c6{ grid-column: span 6; }          /* ½ */
.piv6-grid > .piv6-c7{ grid-column: span 7; }
.piv6-grid > .piv6-c8{ grid-column: span 8; }          /* ⅔ */
.piv6-grid > .piv6-c9{ grid-column: span 9; }          /* ¾ */
.piv6-grid > .piv6-c10{ grid-column: span 10; }
.piv6-grid > .piv6-c11{ grid-column: span 11; }
.piv6-grid > .piv6-c12,
.piv6-grid > .piv6-col-full{ grid-column: 1 / -1; }    /* fila completa */
/* Tablet: no bajar de ½ fila (los ¼/⅓ se leen mal en angosto). */
@media (max-width:991.98px){
  .piv6-grid > *{ grid-column: span 6; }
  .piv6-grid > .piv6-c12, .piv6-grid > .piv6-col-full{ grid-column: 1 / -1; }
}
/* Móvil: una columna. */
@media (max-width:575.98px){ .piv6-grid > *{ grid-column: 1 / -1; } }

/* 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(--rc-sec); 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); }
/* El accent (barra izquierda) va SOLO en campos requeridos (y en error). Los OPCIONALES sin
   accent — así la barra refuerza el indicador de "obligatorio". */
.piv6-crd:not(:has(.piv6-req)):not(:has(.piv6-switch)):not(.is-error):not(:has(.piv6-ctrl:disabled)):not(:has(.piv6-ctrl[readonly]))::before{ display:none; }

/* Fila: label a la izquierda + campo. */
.piv6-rowin{ display:grid; grid-template-columns:8.5rem 1fr; align-items:center; gap:.6rem; min-height:2.3rem; }
.piv6-rowin.top{ align-items:start; }
/* Switches: la etiqueta ocupa el ancho disponible y el switch se pega a la DERECHA de su celda.
   Para acercarlo al label NO se cambia esta alineación — se hace más ANGOSTO el container del
   campo (clase piv6-c3 = ¼) en el form; así el switch a la derecha queda cerca de la etiqueta. */
.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; }

/* ---------- Label (opción B, #40) ----------
   El label lleva la IDENTIDAD de sección (--rc-sec). Jerarquía por estado:
     OPCIONAL     = tinte de sección aclarado + peso 500 (tenue).
     REQUERIDO    = tinte de sección oscuro + peso 800 (:has(.piv6-req)); sin "*".
     DESHABILITADO= slate FIJO neutro (no depende del tema), gana visualmente.
   El asterisco .piv6-req queda OCULTO: es solo el marcador para :has(). */
.piv6-lbl{
  /* Base = OPCIONAL: más claro/tenue + peso menor. */
  font-size:.74rem; font-weight:500;
  color:color-mix(in srgb, var(--rc-sec) 48%, #7b8493);
  display:inline-flex; align-items:center; gap:.35rem; line-height:1.2; min-width:0;
  letter-spacing:.005em;
}
.piv6-lbl .bi{ color:var(--rc-sec); font-size:.85rem; flex:none; opacity:.65; transition:color .25s ease, opacity .15s ease; }

/* REQUERIDO: label OSCURO + NEGRITA fuerte, icono a color pleno. Salta a la vista. */
.piv6-lbl:has(.piv6-req){
  color:color-mix(in srgb, var(--rc-sec) 58%, #0b0c10);
  font-weight:800; cursor:help;
}
.piv6-lbl:has(.piv6-req) .bi{ color:color-mix(in srgb, var(--rc-sec) 58%, #0b0c10); opacity:1; }
/* El "*" ya no se pinta: el requerido se comunica por el peso/tono del label. */
.piv6-lbl .piv6-req{ display:none; }

/* DESHABILITADO (input readonly / select|switch disabled): label en slate FIJO,
   neutro (no tema), claramente "apagado". Gana a opcional y a requerido. */
.piv6-crd:has(.piv6-ctrl:disabled) .piv6-lbl,
.piv6-crd:has(.piv6-ctrl[readonly]) .piv6-lbl,
.piv6-crd:has(.piv6-switch input:disabled) .piv6-lbl{
  color:var(--piv6-disabled-lbl) !important; font-weight:600; cursor:default;
}
.piv6-crd:has(.piv6-ctrl:disabled) .piv6-lbl .bi,
.piv6-crd:has(.piv6-ctrl[readonly]) .piv6-lbl .bi,
.piv6-crd:has(.piv6-switch input:disabled) .piv6-lbl .bi{
  color:var(--piv6-disabled-lbl) !important; opacity:.9;
}
/* El accent (barra izquierda) de un campo obligatorio DESHABILITADO también va en slate,
   igual que su texto — así no queda una barra a color de tema sobre un campo apagado.
   (No aplica en error: ahí la barra es danger.) */
.piv6-crd:not(.is-error):has(.piv6-ctrl:disabled)::before,
.piv6-crd:not(.is-error):has(.piv6-ctrl[readonly])::before,
.piv6-crd:not(.is-error):has(.piv6-switch input:disabled)::before{
  background:var(--piv6-disabled-lbl);
}

/* SWITCH = valor SIEMPRE definido (on/off): no hay "opcional/null" posible, así que se trata
   como REQUERIDO — label oscuro + negrita + accent visible — aunque el fragmento no lleve
   .piv6-req. El deshabilitado (regla de arriba, con !important) sigue ganando. */
.piv6-crd:has(.piv6-switch) .piv6-lbl{
  color:color-mix(in srgb, var(--rc-sec) 58%, #0b0c10);
  font-weight:800;
}
.piv6-crd:has(.piv6-switch) .piv6-lbl .bi{
  color:color-mix(in srgb, var(--rc-sec) 58%, #0b0c10); opacity:1;
}

/* ERROR (danger) gana sobre todo lo anterior. */
.piv6-crd.is-error .piv6-lbl{ color:var(--piv6-danger) !important; }
.piv6-crd.is-error .piv6-lbl .bi{ color:var(--piv6-danger) !important; opacity:1; }

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

/* ===== Checklist de Documentación PDF (columna 25% de autorizaproveedor) =====
   Una card COMPACTA por documento, apiladas (una por línea). title=descripción del
   documento; body=nombre de archivo + vigencia + preview/descarga. Estatus por borde
   izquierdo: pendiente=ámbar, aprobado=verde. No confundir con las clases .piv6-doc* del
   widget de documentos del proveedor. */
.piv6-dcard-list{ display:flex; flex-direction:column; gap:.5rem; }
.piv6-dcard{
  border:1px solid var(--piv6-line,#dde2ea); border-left:3px solid #94a3b8;
  border-radius:var(--piv6-r-chico,8px); background:#fff; padding:.5rem .6rem;
}
/* 3 estados: SIN TOCAR (no descargado)=slate neutro; DESCARGADO sin aprobar=ámbar (acción
   pendiente); APROBADO=verde. */
.piv6-dcard.is-untouched{ border-left-color:#94a3b8; background:color-mix(in srgb,#94a3b8 5%,#fff); }
.piv6-dcard.is-pending{ border-left-color:#f0a020; background:color-mix(in srgb,#f0a020 5%,#fff); }
.piv6-dcard.is-ok{ border-left-color:#2fb344; background:color-mix(in srgb,#2fb344 4%,#fff); }
/* Verde EN VIVO cuando el documento queda aprobado (checkbox marcado), sin esperar recarga. */
.piv6-dcard:has(.piv6-dcard-check input[type=checkbox]:checked){ border-left-color:#2fb344 !important; background:color-mix(in srgb,#2fb344 5%,#fff) !important; }
.piv6-dcard-head{ display:flex; align-items:center; gap:.45rem; }
.piv6-dcard-check{ flex:none; }
.piv6-dcard-titulo{ font-weight:700; font-size:.82rem; color:var(--piv6-ink,#1a1f2b); line-height:1.2; min-width:0; }
.piv6-dcard-body{ margin-top:.35rem; padding-left:.1rem; }
.piv6-dcard-file{ display:flex; align-items:center; gap:.3rem; font-size:.74rem; color:var(--piv6-muted,#6a7383); min-width:0; }
.piv6-dcard-file .text-truncate{ min-width:0; }
.piv6-dcard-file .bi{ color:#c0392b; flex:none; }
.piv6-dcard-foot{ display:flex; align-items:center; gap:.4rem; margin-top:.3rem; }
.piv6-dcard-vig{ font-size:.72rem; display:inline-flex; align-items:center; gap:.25rem; }
/* KPI de documentos (por descargar / descargados / por autorizar). */
.piv6-kpi{ display:flex; gap:.4rem; margin-top:.6rem; }
.piv6-kpi-item{
  flex:1 1 0; min-width:0; text-align:center;
  border:1px solid var(--piv6-line,#dde2ea); border-radius:var(--piv6-r-chico,8px);
  background:#fff; padding:.35rem .2rem;
}
.piv6-kpi-num{ display:block; font-weight:800; font-size:1.1rem; line-height:1.1; }
.piv6-kpi-lbl{ display:block; font-size:.62rem; color:var(--piv6-muted,#6a7383); text-transform:uppercase; letter-spacing:.02em; margin-top:.1rem; }
/* "Por autorizar" GRANDE en fila propia: número prominente + estado. Verde cuando ya no falta. */
.piv6-kpi-big{ display:flex; align-items:center; justify-content:center; gap:.4rem; margin-top:.45rem; padding:.5rem .7rem; border-radius:var(--piv6-r-chico,8px); border:1px solid #f0a020; background:color-mix(in srgb,#f0a020 8%,#fff); font-size:.82rem; font-weight:700; color:#8a5a00; }
.piv6-kpi-big.is-ok{ border-color:#2fb344; background:color-mix(in srgb,#2fb344 8%,#fff); color:#1a7a2e; }
.piv6-kpi-big .bi{ font-size:1rem; flex:none; }
.piv6-kpi-big-num{ font-size:1.4rem; font-weight:800; line-height:1; }
@media (prefers-color-scheme: dark){ .piv6-kpi-item{ background:#1c2130; border-color:#33405a; } }

.piv6-dcard-acciones{ display:flex; flex-direction:column; gap:.4rem; margin-top:.6rem; }
.piv6-dcard-acciones .piv6-btn{ justify-content:center; }
/* El toggle de aprobar (checkboxpicker) compacto y v6 dentro de la card. */
.piv6-dcard-check .btn-group{ box-shadow:none; }
.piv6-dcard-check .btn{ padding:.15rem .4rem; font-size:.8rem; line-height:1; }
/* Hint "descárgalo para aprobar" SOLO en cards sin tocar (no descargado). */
/* Hint dentro del btn-group, ANTES de descargar, con flecha -> al botón de descarga. Solo sin tocar. */
.piv6-dcard-hint{ display:none; }
/* Caja CUADRADA (estilo btn-group), fondo del tema + texto/icono blanco. La caja NO se anima:
   se anima solo el CONTENIDO interno (texto+flecha) con un bob vertical (abajo->arriba). */
@keyframes piv6-hint-pulse{ 0%{ transform:translateY(1.5px); } 50%{ transform:translateY(-1.5px); } 100%{ transform:translateY(1.5px); } }
.piv6-dcard.is-untouched .piv6-dcard-hint{
  display:inline-flex; align-items:center; font-size:.66rem; font-weight:700; white-space:nowrap; overflow:hidden;
  background:var(--piv6-tema,#6c5ce7); color:#fff; border-radius:0; padding:0 .5rem;
}
.piv6-dcard.is-untouched .piv6-dcard-hint-in{
  display:inline-flex; align-items:center; gap:.2rem;
  animation:piv6-hint-pulse 1.2s ease-in-out infinite; will-change:transform;
}
.piv6-dcard-hint-arrow{ font-size:1.05rem; line-height:1; color:#fff; }
@media (prefers-reduced-motion: reduce){ .piv6-dcard.is-untouched .piv6-dcard-hint-in{ animation:none; } }
/* Con el hint presente, la fila de acciones puede envolver en la columna angosta. */
.piv6-dcard-foot{ flex-wrap:wrap; }
/* Botón de descarga ENFATIZADO cuando el doc está sin tocar (invita a descargarlo). */
.piv6-dcard.is-untouched .piv6-dcard-dl{ background:var(--piv6-tema,#6c5ce7); color:#fff; border-color:var(--piv6-tema,#6c5ce7); }
.piv6-dcard.is-untouched .piv6-dcard-dl .bi{ font-size:1.05rem; }
@media (prefers-color-scheme: dark){
  .piv6-dcard{ background:#1c2130; border-color:#33405a; }
  .piv6-dcard.is-ok{ background:color-mix(in srgb,#2fb344 12%,#1c2130); }
  .piv6-dcard.is-pending{ background:color-mix(in srgb,#f0a020 12%,#1c2130); }
  .piv6-dcard-titulo{ color:#e7ecf5; }
}

/* Bloque de AYUDA/instrucciones modernizado (reemplazo del viejo inputsv2::instrucciones BS3:
   panel colapsable azul + alert + slideDown). Caja suave con accent de tenant, encabezado con
   icono y cuerpo (soporta <ul>/<li> del message key). Reutilizable con class="piv6-ayuda". */
.piv6-ayuda{
  border:1px solid var(--piv6-line,#dde2ea);
  border-left:3px solid var(--tema-color,#6c5ce7);
  background:color-mix(in srgb, var(--tema-color,#6c5ce7) 5%, #fff);
  border-radius:var(--piv6-r-chico,8px);
  padding:.65rem .85rem; margin:.6rem 0 .3rem;
}
.piv6-ayuda-head{
  font-weight:700; color:var(--tema-color,#6c5ce7);
  display:flex; align-items:center; gap:.45rem; margin-bottom:.3rem; font-size:.92rem;
}
.piv6-ayuda-head .bi{ font-size:1rem; }
.piv6-ayuda-body{ font-size:.85rem; color:#3a4150; }
.piv6-ayuda-body ul{ margin:0; padding-left:1.15rem; }
.piv6-ayuda-body li{ margin:.12rem 0; }
.piv6-ayuda-body p:last-child{ margin-bottom:0; }
@media (prefers-color-scheme: dark){
  .piv6-ayuda{ background:color-mix(in srgb, var(--tema-color,#6c5ce7) 14%, #1c2130); border-color:#33405a; }
  .piv6-ayuda-body{ color:#c7cfdd; }
}
.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:3.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); }
/* DESHABILITADO: aplica tanto al <button disabled> (:disabled) como al <a class="disabled">
   (los enlaces ignoran el atributo disabled). Se ve apagado y NO es clickeable. */
.piv6-btn:disabled, .piv6-btn.disabled{
  opacity:.5 !important; cursor:not-allowed; pointer-events:none; box-shadow:none; transform:none;
  filter:grayscale(.35);
}
.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); }
/* Verde para botones de AUTORIZACIÓN / confirmar positivo (autorizar, aprobar). Mantiene el
   tamaño piv6-btn, solo cambia el color (convención: los de autorización van en verde). */
.piv6-btn-success{ background:#16a34a; color:#fff; }
.piv6-btn-success:hover{ background:#15803d; color:#fff; }
.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:1.5rem 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-offset ≈ chrome superior. En el layout de SIDEBAR LATERAL (rail/expandido) NO hay
   navbar superior (el menú es lateral), así que el offset solo debe cubrir el footer fijo del tema
   (~15px) + un pequeño margen; de lo contrario la botonera sticky queda separada del footer de
   versión cuando la forma es corta. Los layouts con topbar pueden subir --piv6-form-offset. */
.piv6-form-page{ display:flex; flex-direction:column; min-height:calc(100dvh - var(--piv6-form-offset, 1.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; }
/* CONVENCIÓN de footer v6: "Regresar" (boton-enlace → .piv6-btn-back) a la IZQUIERDA y los
   botones de acción a la DERECHA. El footer-in es justify-content:flex-end, así que el back-button
   se empuja solo con margin-right:auto. Aplica a TODA forma v6 que use el fragmento boton-enlace. */
.piv6-form-footer-in > .piv6-btn-back{ margin-right:auto; }
@media (max-width:575.98px){ .piv6-form-footer-in > .piv6-btn-back{ margin-right:0; } }
/* El info de "faltantes" va DENTRO del grupo de acciones (después de "Solicitar Corrección"),
   así que Regresar conserva su margin-right:auto. Se ESTIRA al alto de los botones para verse parejo. */
.piv6-footer-faltan{ display:flex; align-items:stretch; align-self:stretch; }
.piv6-faltan-chip{
  display:inline-flex; align-items:center; gap:.35rem; font-size:.78rem; font-weight:600;
  padding:0 .8rem; border-radius:999px; cursor:help;
  background:color-mix(in srgb,#f0a020 10%,#fff); color:#8a5a00; border:1.5px solid #f0a020;
}
.piv6-faltan-chip.is-ok{ background:color-mix(in srgb,#2fb344 10%,#fff); color:#1a7a2e; border-color:#2fb344; cursor:default; }
@media (max-width:575.98px){ .piv6-footer-faltan{ order:99; width:100%; } .piv6-form-footer-in > .piv6-footer-faltan{ margin-right:0; } }
@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.
   Look: "folder tabs" de FuncionalMarket (ver comentario de reglas abajo).
   ============================================================ */
/* Estilo "folder tabs" (pestañas tipo carpeta) inspirado en el menutoolbar de
   FuncionalMarket: base .fm-tabs/.fm-tab (citas.css) + overrides del toolbar
   (login.css:702-720). Cada pestaña es un bloque con esquinas SUPERIORES
   redondeadas, fondo de tinte claro, icono + texto teñidos del color de la
   sección/tenant, un acento inferior siempre visible, y la pestaña ACTIVA con
   tinte más sólido + acento inferior a todo color, fundida con el panel de abajo
   (su borde inferior monta sobre la línea base del contenedor, sin línea que la
   corte). El portal solo tiene UN color por pantalla (--piv6-tema, color del
   tenant), así que todas las pestañas comparten tono y solo la activa se realza;
   para colorear por pestaña bastaría fijar --piv6-tab-c inline como hace FM. */
.piv6-tabs{
  --piv6-tab-c: var(--piv6-tema, #0d6efd);
  display:flex; flex-wrap:wrap; gap:.15rem; padding:0;
  border-bottom:2px solid color-mix(in srgb, var(--piv6-tab-c) 22%, var(--piv6-line, #dde2ea));
  margin-bottom:1rem;
}
.piv6-tabs .nav-item{ margin-bottom:-2px; } /* la pestaña activa monta sobre la línea base */
.piv6-tabs .nav-link{
  position:relative; border:0;
  border-radius:.5rem .5rem 0 0; /* esquinas superiores redondeadas = carpeta */
  color:color-mix(in srgb, var(--piv6-tab-c) 66%, var(--piv6-ink, #12131a));
  font:inherit; font-weight:600; font-size:.86rem; line-height:1.15; letter-spacing:.01em;
  padding:.5rem .95rem; display:inline-flex; align-items:center; gap:.45rem;
  background:color-mix(in srgb, var(--piv6-tab-c) 8%, transparent); /* tinte claro del folder */
  cursor:pointer;
  transition:color .15s ease, background-color .15s ease;
}
/* Acento inferior tenue del color de la sección, SIEMPRE visible (no solo hover) */
.piv6-tabs .nav-link::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:color-mix(in srgb, var(--piv6-tab-c) 32%, transparent);
  transition:background-color .15s ease; pointer-events:none;
}
.piv6-tabs .nav-link .bi{ font-size:.95rem; color:var(--piv6-tab-c); transition:transform .15s ease; }
.piv6-tabs .nav-link:hover{
  color:color-mix(in srgb, var(--piv6-tab-c) 82%, var(--piv6-ink, #12131a));
  background:color-mix(in srgb, var(--piv6-tab-c) 12%, transparent);
}
.piv6-tabs .nav-link:hover::after{ background:color-mix(in srgb, var(--piv6-tab-c) 50%, transparent); }
.piv6-tabs .nav-link:focus-visible{
  outline:none; box-shadow:inset 0 0 0 2px var(--piv6-ring, rgba(13,110,253,.24));
  border-radius:.5rem .5rem 0 0;
}
/* Pestaña ACTIVA: tinte más sólido, texto/peso realzados y acento a todo color
   que se funde con el panel de abajo. */
.piv6-tabs .nav-link.active{
  color:var(--piv6-tab-c); font-weight:700;
  background:color-mix(in srgb, var(--piv6-tab-c) 15%, var(--piv6-surface, #fff));
}
.piv6-tabs .nav-link.active::after{ background:var(--piv6-tab-c); height:3px; }
.piv6-tabs .nav-link.active .bi{ transform:scale(1.06); }
/* Testigo de error de validación por sección: siempre visible y en rojo (danger),
   tanto en la pestaña activa como en las inactivas. */
.piv6-tabs .nav-link .piv6-tab-err{ color:var(--piv6-danger, #d64550); font-size:.8rem; }
@media (max-width:768px){
  .piv6-tabs{
    flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    scrollbar-width:thin; scrollbar-color:var(--piv6-line-strong, #c7cede) transparent;
    -webkit-overflow-scrolling:touch;
  }
  .piv6-tabs .nav-link{ white-space:nowrap; padding:.5rem .7rem; }
  .piv6-tabs::-webkit-scrollbar{ height:6px; }
  .piv6-tabs::-webkit-scrollbar-thumb{ background:var(--piv6-line-strong, #c7cede); border-radius:3px; }
  .piv6-tabs::-webkit-scrollbar-track{ background:transparent; }
}

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

/* Tabs pfv6: altura mínima uniforme del contenido para que el card NO cambie de tamaño al
   alternar de pestaña (se ve del mismo alto sin importar la pestaña). Reutilizable: pon la
   clase `piv6-tab-content` en el <div class="tab-content"> de cualquier form con tabs. */
/* El tab-content SE ESTIRA a ocupar el viewport disponible (que el card llegue hasta el footer
   sticky, sin hueco entre el contenido y la botonera). Cadena flex: form-main → card → card-body
   → tab-content, todos crecen. El min-height es piso para viewports cortos. */
.piv6-tab-content{ min-height: 24rem; }
.piv6-form-main{ display:flex; flex-direction:column; }
.piv6-form-main > .piv6-card-pagina{ flex:1 1 auto; }
.piv6-card-pagina > .card-body:has(> .piv6-tab-content){ display:flex; flex-direction:column; }
.piv6-card-pagina > .card-body > .piv6-cc-glued{ flex:0 0 auto; }
.piv6-card-pagina > .card-body > .piv6-tabs{ flex:0 0 auto; }
.piv6-tab-content{ flex:1 1 auto; }
/* En forms con tabs: el padding-bottom que reserva el .piv6-form-main dejaba un HUECO entre el
   card y el footer (el footer es hermano, no encima). Se quita ese padding y se mueve DENTRO del
   tab-content, así el card llega pegado al footer y el contenido igual respira sobre la botonera. */
.piv6-form-main:has(.piv6-tab-content){ padding-bottom: 0; }
.piv6-tab-content{ padding-bottom: calc(4.75rem + var(--piv6-themefoot-h, 15px)); }

/* MISMO problema en forms SIN tabs (card-pagina simple, p.ej. proveedorescc/cambio): el card se
   estira (flex:1) pero el padding-bottom del form-main quedaba como HUECO entre el card y el footer
   sticky. Se quita ese padding y la reserva anti-footer se pasa al card-body, así el card llega
   pegado al footer y el último campo respira sobre la botonera al hacer scroll. */
.piv6-form-main:not(:has(.piv6-tab-content)):has(> .piv6-card-pagina){ padding-bottom: 0; }
.piv6-form-main:not(:has(.piv6-tab-content)) > .piv6-card-pagina{ display:flex; flex-direction:column; }
.piv6-form-main:not(:has(.piv6-tab-content)) > .piv6-card-pagina > .card-body{ flex:1 1 auto; padding-bottom: calc(3.5rem + var(--piv6-themefoot-h, 15px)); }

/* Glue del panel "Control de Cambios" al header del card: MISMA excepción que usa el panel de
   filtros (padding-top:0 del card-body cuando su primer hijo es el panel), para que el
   .piv6-cc-glued quede pegado al header morado y no cuelgue con un hueco arriba. */
.piv6-card-pagina > .card-body:has(> .piv6-cc-glued:first-child){ padding-top:0; }

/* ============================================================
   CONTENIDO del panel "Control de Cambios" (auditoriacomun :: historia).
   Timeline de revisiones legible y tematizado por SECCIÓN/tenant, compartido por
   proveedor / rol / contacto / usuario. Tokens con FALLBACK propio: el fragmento
   también se usa en pantallas sin ancestro .piv6, así que .cc-hist redefine sus
   variables desde --tema-color y degrada sin color-mix si no hay soporte.
   Cada revisión = tarjeta con acento por tipo (Alta=verde, Eliminación=rojo,
   Modificación=color de sección) + rejilla de campos "antes → después".
   Sin animaciones costosas (puede haber muchas revisiones listadas).
   ============================================================ */
.cc-hist{
  --cc-c: var(--piv6-card-head, var(--tema-color, #0d6efd));
  --cc-line: var(--piv6-line, #dde2ea);
  --cc-muted: var(--piv6-muted, #6a7383);
  --cc-faint: var(--piv6-faint, #9aa2b1);
  --cc-surface: var(--piv6-surface, #fff);
  --cc-text: var(--piv6-text, #1b2432);
  --cc-r: var(--piv6-r-chico, 8px);
  --cc-r-mini: var(--piv6-r-mini, 6px);
  /* acento por defecto (Modificación) = color de sección; success/danger lo pisan abajo */
  --cc-accent: var(--cc-c);
  --cc-accent-soft: color-mix(in srgb, var(--cc-c) 10%, var(--cc-surface));
  padding: .8rem .9rem 1rem;
  font-size: .86rem;
  line-height: 1.35;
  color: var(--cc-text);
}
.cc-hist *, .cc-hist *::before, .cc-hist *::after{ box-sizing:border-box; }

/* Acentos semánticos por tipo de revisión (Revision.getClase()). */
.cc-rev.cc-success{ --cc-accent:#1f9d57; --cc-accent-soft:#eaf7ef; }
.cc-rev.cc-danger { --cc-accent:var(--piv6-danger, #d64550); --cc-accent-soft:var(--piv6-danger-soft, #fdecee); }
.cc-rev.cc-info   { --cc-accent:var(--cc-c); --cc-accent-soft:color-mix(in srgb, var(--cc-c) 10%, var(--cc-surface)); }

/* Estado vacío */
.cc-hist-empty{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  padding:1.6rem 1rem; color:var(--cc-muted);
}
.cc-hist-empty .bi{ font-size:1.15rem; opacity:.7; }

/* Lista / timeline (una tarjeta por revisión) */
.cc-hist-list{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.cc-rev{
  border:1px solid var(--cc-line);
  border-left:3px solid var(--cc-accent);
  border-radius:var(--cc-r);
  background:var(--cc-surface);
  box-shadow:var(--piv6-shadow-sm, 0 1px 2px rgba(20,30,50,.06));
  overflow:hidden;
}

/* Cabecera de la revisión: etiqueta de tipo + usuario/correo + fecha (a la derecha) */
.cc-rev-head{
  display:flex; align-items:center; flex-wrap:wrap; gap:.4rem .7rem;
  padding:.45rem .65rem;
  background:color-mix(in srgb, var(--cc-accent) 6%, var(--cc-surface));
  border-bottom:1px solid var(--cc-line);
}
.cc-tag{
  display:inline-flex; align-items:center; gap:.3rem;
  font-size:.68rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  color:var(--cc-accent); background:var(--cc-accent-soft);
  border:1px solid color-mix(in srgb, var(--cc-accent) 30%, transparent);
  padding:.14rem .5rem; border-radius:999px; white-space:nowrap;
}
.cc-tag .bi{ font-size:.85rem; }
.cc-user{ display:inline-flex; align-items:center; gap:.35rem; min-width:0; }
.cc-user .bi{ color:var(--cc-accent); font-size:1.05rem; flex:0 0 auto; }
.cc-user b{ font-weight:600; color:var(--cc-text); }
.cc-mail{
  color:var(--cc-muted); font-size:.78rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:16rem;
}
.cc-date{
  margin-left:auto; display:inline-flex; align-items:center; gap:.3rem;
  color:var(--cc-muted); font-size:.78rem; white-space:nowrap;
}
.cc-date .bi{ font-size:.85rem; }

/* Cuerpo: rejilla responsive de campos modificados */
.cc-rev-body{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(15rem, 1fr));
  gap:.4rem .55rem; padding:.55rem .65rem;
}
.cc-field{
  display:grid; gap:.2rem;
  padding:.35rem .5rem; border-radius:var(--cc-r-mini);
  background:color-mix(in srgb, var(--cc-line) 20%, transparent);
  min-width:0;
}
.cc-field-label{
  font-size:.68rem; font-weight:700; letter-spacing:.02em; text-transform:uppercase;
  color:var(--cc-muted);
}
.cc-vals{ display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; min-width:0; }
.cc-val{
  display:inline-flex; align-items:center; min-height:1.4rem;
  padding:.06rem .45rem; border-radius:var(--cc-r-mini);
  font-size:.82rem; line-height:1.25; max-width:100%; overflow-wrap:anywhere;
}
.cc-val-old{ color:var(--cc-muted); background:color-mix(in srgb, var(--cc-line) 42%, transparent); }
.cc-val-new{ color:var(--cc-accent); background:var(--cc-accent-soft); font-weight:600; }
/* Un lado sin valor (alta o baja) → guion discreto en vez de hueco vacío */
.cc-val:empty::before{ content:'—'; color:var(--cc-faint); font-weight:400; }
.cc-arrow{ color:var(--cc-faint); font-size:.8rem; flex:0 0 auto; }

@media (max-width:575.98px){
  .cc-hist{ padding:.6rem .55rem .75rem; }
  .cc-date{ margin-left:0; }
  .cc-rev-body{ grid-template-columns:1fr; }
}

/* ============================================================
   TIPOS DE DOCUMENTO / EVIDENCIAS  (proveedor #tab-documentos)
   Checklist de tipos de documento del proveedor en REJILLA de TARJETAS
   compactas (hasta 4 por fila). Cada tarjeta es seleccionable (switch).
   Tematizada con --piv6-tema; el icono se tiñe por tipo de archivo.
   Markup en comun/inputs.html :: input-evidencia.
   ============================================================ */

/* Caja de ayuda: deja claro que sin selección el proveedor ve TODOS */
.piv6-doc-nota{
  display:flex; align-items:flex-start; gap:.5rem;
  background:var(--piv6-soft); color:var(--piv6-ink);
  border:1px solid var(--piv6-ring); border-radius:var(--piv6-r-chico);
  padding:.6rem .8rem; margin-bottom:.6rem;
  font-size:.84rem; line-height:1.4;
}
.piv6-doc-nota > .bi{ color:var(--piv6-tema); margin-top:.1rem; flex:none; font-size:1rem; }
.piv6-doc-nota strong{ color:var(--piv6-ink); }
.piv6-doc-nota-sub{ display:block; margin-top:.25rem; color:var(--piv6-muted); font-size:.78rem; }

/* Preview: qué verá el proveedor según la selección (sincronizado por JS mínimo) */
.piv6-doc-preview{
  display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .6rem;
  background:var(--piv6-surface);
  border:1px solid var(--piv6-line-strong); border-radius:var(--piv6-r-chico);
  padding:.55rem .75rem; margin-bottom:.7rem;
}
.piv6-doc-preview.has-sel{ border-color:var(--piv6-tema); background:color-mix(in srgb, var(--piv6-tema) 4%, #fff); }
.piv6-doc-preview-hd{
  display:inline-flex; align-items:center; gap:.35rem; flex:none;
  font-weight:700; font-size:.74rem; text-transform:uppercase; letter-spacing:.03em;
  color:var(--piv6-tema);
}
.piv6-doc-preview-msg{ font-size:.82rem; color:var(--piv6-text); flex:none; }
.piv6-doc-preview.has-sel .piv6-doc-preview-msg{ font-weight:600; }
.piv6-doc-preview-chips{ display:flex; flex-wrap:wrap; gap:.3rem; min-width:0; }
.piv6-doc-preview-chip{
  display:inline-flex; align-items:center;
  background:var(--piv6-soft); color:var(--piv6-ink);
  border:1px solid color-mix(in srgb, var(--piv6-tema) 25%, transparent);
  border-radius:999px; padding:.08rem .55rem;
  font-size:.74rem; font-weight:600; max-width:16rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* REJILLA de tarjetas: hasta 4 por fila (breakpoints → 3 / 2 / 1) */
.piv6-doc-list{
  display:grid; gap:.6rem;
  grid-template-columns:repeat(4, minmax(0, 1fr));
}
@media (max-width:1199.98px){ .piv6-doc-list{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (max-width:767.98px){ .piv6-doc-list{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:479.98px){ .piv6-doc-list{ grid-template-columns:1fr; } }
/* Los <div> intermedios (th:each + th:insert) desaparecen para que la tarjeta
   sea el ítem directo del grid y todas queden a igual alto */
.piv6-doc-list > div:not(.piv6-doc-empty){ display:contents; }
.piv6-doc-list > div:not(.piv6-doc-empty) > div{ display:contents; }

/* Tarjeta = <label> compacta y vertical (toda la tarjeta alterna la selección) */
.piv6-doc{
  display:flex; flex-direction:column; gap:.35rem;
  margin:0; padding:.6rem .7rem; cursor:pointer; height:100%; min-width:0;
  background:var(--piv6-surface);
  border:1px solid var(--piv6-line); border-radius:var(--piv6-r-chico);
  box-shadow:var(--piv6-shadow-sm);
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.piv6-doc:hover{ border-color:var(--piv6-line-strong); }
/* Estado seleccionado en vivo (sin JS) vía :has() sobre el checkbox real */
.piv6-doc:has(input[type=checkbox]:checked){
  border-color:var(--piv6-tema);
  background:color-mix(in srgb, var(--piv6-tema) 5%, #fff);
  box-shadow:0 0 0 1px var(--piv6-ring), var(--piv6-shadow-sm);
}
.piv6-doc:has(input[type=checkbox]:focus-visible){ box-shadow:0 0 0 3px var(--piv6-ring); }

/* Cabecera de la tarjeta: icono de tipo + etiqueta de tipo + switch a la derecha */
.piv6-doc-head{ display:flex; align-items:center; gap:.4rem; }
.piv6-doc-head .piv6-doc-sw{ margin-left:auto; }

/* Icono de tipo de archivo (por defecto tematizado; se colorea por tipo) */
.piv6-doc-ico{
  flex:none; width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--piv6-r-mini); font-size:1.05rem;
  background:var(--piv6-soft); color:var(--piv6-tema);
}
.piv6-doc-ico.is-pdf{ background:#fdecec; color:#d64550; }
.piv6-doc-ico.is-excel{ background:#e7f5ec; color:#1e8e56; }
.piv6-doc-ico.is-xml{ background:#eaf1fd; color:#2b6cd6; }
.piv6-doc-ico.is-zip{ background:#fff3e0; color:#c47d18; }

.piv6-doc-body{ min-width:0; display:flex; flex-direction:column; gap:.15rem; }
.piv6-doc-titulo{
  display:flex; align-items:flex-start; gap:.3rem;
  font-weight:600; font-size:.86rem; color:var(--piv6-text); line-height:1.25;
}
.piv6-doc-titulo > span:first-child{
  min-width:0; overflow:hidden; text-overflow:ellipsis;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
/* Icono de ayuda por línea (tooltip nativo vía title): explica qué es el tipo
   de documento y qué significa la referencia de RFC. cursor:help para señalarlo */
.piv6-doc-info{ color:var(--piv6-faint); font-size:.78rem; cursor:help; flex:none; margin-top:.1rem; transition:color .15s ease; }
.piv6-doc-info:hover{ color:var(--piv6-tema); }

.piv6-doc-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:0 .4rem;
  font-size:.74rem; color:var(--piv6-muted); min-width:0;
}
/* «Aplica a:» = a qué emisor (RFC) corresponde este requisito */
.piv6-doc-aplica-lbl{ font-weight:600; color:var(--piv6-faint); text-transform:uppercase; letter-spacing:.03em; font-size:.64rem; flex:none; width:100%; }
.piv6-doc-rfc{ display:inline-flex; align-items:center; gap:.25rem; font-weight:600; letter-spacing:.02em; flex:none; cursor:help; }
.piv6-doc-rfc .bi{ opacity:.7; }
.piv6-doc-rs{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }

/* Nota por documento (comentariosProveedor de V_Evidencias), si existe */
.piv6-doc-coment{
  font-size:.73rem; color:var(--piv6-faint); line-height:1.3; margin-top:.05rem;
  overflow:hidden; text-overflow:ellipsis;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}

.piv6-doc-tags{ display:flex; flex-wrap:wrap; gap:.25rem; margin-top:auto; padding-top:.25rem; }
.piv6-doc-tag{
  display:inline-flex; align-items:center; gap:.25rem;
  font-size:.64rem; font-weight:700; letter-spacing:.02em; text-transform:uppercase;
  border-radius:999px; padding:.08rem .45rem; line-height:1.4;
}
.piv6-doc-tag .bi{ font-size:.7rem; }
.piv6-doc-tag.is-req{ background:var(--piv6-danger-soft); color:var(--piv6-danger); }
/* Vigencia: con vigencia = ámbar (acción/renovar) · sin vigencia = gris neutro.
   Iconos distintos (bi-calendar-check vs bi-infinity) para distinguir de un vistazo */
.piv6-doc-tag.is-vig{ background:#fff3e0; color:#b8730f; }
.piv6-doc-tag.is-novig{ background:#eef1f6; color:var(--piv6-muted); }
/* Etiqueta de tipo de archivo en la cabecera (junto al icono) */
.piv6-doc-head .piv6-doc-tag.is-tipo{ background:var(--piv6-soft); color:var(--piv6-ink); }

.piv6-doc-sw{ flex:none; }

/* Estado vacío (empresa sin tipos de documento definidos) */
.piv6-doc-empty{
  grid-column:1 / -1;
  text-align:center; padding:2rem 1rem; color:var(--piv6-faint);
  border:1px dashed var(--piv6-line-strong); border-radius:var(--piv6-r-chico);
  font-size:.86rem;
}
.piv6-doc-empty .bi{ font-size:1.6rem; display:block; margin-bottom:.4rem; opacity:.6; }

/* Hint (info) MOVIDO FUERA del .piv6-crd (issue: el hint dentro engordaba el card y desalineaba
   la fila). Ahora cuelga debajo del card, sin el borde del card, empujando su propio alto sin
   afectar la altura del campo vecino de la misma fila (align-items:start). */
.piv6-hint-out{ margin:.15rem 0 .1rem .3rem; }
/* Utilidad: forzar que un campo ½ ARRANQUE una nueva fila del grid (para agrupar campos
   relacionados juntos, p.ej. Cta SAP + Descripción Cta SAP en la misma línea). */
.piv6-grid > .piv6-nl{ grid-column: 1 / span 6; }

/* Switches junto al RFC (Expide CFDI / Requiere OC / Habilitado) en la fila compacta de identidad:
   comparten el espacio restante después del RFC (col-mini). El placeholder vacío ocupa su lugar
   cuando el tenant no usa Órdenes de Compra (Requiere OC no aplica → ¼ en blanco). */
.piv6-row-compacta > .piv6-col-sw{ flex:1 1 12rem; min-width:11rem; max-width:22rem; }
.piv6-row-compacta > .piv6-col-sw-empty{ min-width:11rem; }