/* ═══════════════════════════════════════════════════════════════════════════
   payment-confirm.css
   ───────────────────────────────────────────────────────────────────────────
   Estilos del apartado. Estaban DENTRO de payment-confirm.js, inyectados
   en un <style> desde JavaScript, y se movieron acá sin cambiar una línea.

   ⚠ El <link> va ÚLTIMO en el <head> de index.html, y no es un detalle: el
   <style> inyectado se agregaba en tiempo de ejecución, o sea después de todos
   los <link>. Moverlo antes cambiaría qué regla gana en los empates de
   especificidad, y eso no se ve en ningún error — se ve en la pantalla, torcida.

   ⚠ No se reformateó ni se reordenó nada a propósito. El objetivo del movimiento
   es que la pantalla NO se mueva; cualquier mejora de estilo va en un paso
   aparte, con su propia comparación.
   ═══════════════════════════════════════════════════════════════════════════ */
.pc-container { padding: 24px 28px; font-family: var(--font); color: var(--text); width: 100%; box-sizing: border-box; }
.pc-header { margin-bottom: 18px; }
.pc-header h1 { font-size: 22px; font-weight: 700; margin: 0 0 6px; letter-spacing: -0.3px; }
.pc-header p  { font-size: 13px; color: var(--text-3); margin: 0; line-height: 1.5; }

.pc-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.pc-kpi { background: var(--navy-2); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.pc-kpi-label { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .6px; font-weight: 700; margin-bottom: 6px; }
.pc-kpi-val { font-size: 24px; font-weight: 700; font-family: var(--mono); }
.pc-kpi-sub { font-size: 11px; color: var(--text-3); margin-top: 2px; }

.pc-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.pc-filtros { display: flex; gap: 6px; flex-wrap: wrap; }
.pc-fbtn { padding: 5px 13px; border-radius: 16px; font-size: 11px; font-weight: 500; cursor: pointer;
  border: 1px solid var(--border-2); background: transparent; color: var(--text-2); font-family: var(--font); transition: all .15s; }
.pc-fbtn.on { border-color: var(--blue-light); background: var(--blue-glow); color: var(--blue-light-txt, var(--blue-light)); font-weight: 600; }
.pc-otabs { display: flex; gap: 4px; margin: 0 0 14px; border-bottom: 1px solid var(--border-2); }
.pc-otab { padding: 9px 18px; font-size: 13px; font-weight: 500; cursor: pointer; border: none;
  background: transparent; color: var(--text-2); font-family: var(--font); border-bottom: 2px solid transparent;
  margin-bottom: -1px; transition: all .15s; display: inline-flex; align-items: center; gap: 7px; }
.pc-otab:hover { color: var(--text); }
.pc-otab.on { color: var(--blue-light-txt, var(--blue-light)); border-bottom-color: var(--blue-light); font-weight: 600; }
.pc-otab-cnt { font-size: 11px; padding: 1px 7px; border-radius: 10px; background: var(--navy-3); color: var(--text-3); }
.pc-otab.on .pc-otab-cnt { background: var(--blue-glow); color: var(--blue-light-txt, var(--blue-light)); }

/* ── Modal de confirmación ── */
.pc-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.pc-modal { background: var(--navy-2,#111a27); border: 1px solid var(--border-2); border-radius: 14px;
  width: 100%; max-width: 460px; box-shadow: 0 20px 60px rgba(0,0,0,.5); overflow: hidden;
  animation: pcModalIn .18s ease; }
@keyframes pcModalIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.pc-modal-head { display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid var(--border-2); }
.pc-modal-title { font-size: 15px; font-weight: 700; color: var(--text); }
.pc-modal-x { background: none; border: none; color: var(--text-3); font-size: 16px; cursor: pointer; padding: 2px 6px; }
.pc-modal-x:hover { color: var(--text); }
.pc-modal-content { padding: 18px 22px; }
.pc-modal-warn { margin-top: 12px; padding: 9px 12px; border-radius: 8px; font-size: 12px;
  background: rgba(245,158,11,.14); border: 1px solid var(--amber); color: var(--amber); }
.pc-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px;
  border-top: 1px solid var(--border-2); }
.pc-step { display: flex; align-items: center; gap: 11px; padding: 11px 0; font-size: 13px; color: var(--text-3); }
.pc-step.active { color: var(--text); }
.pc-step.done { color: var(--green); }
.pc-step.err { color: var(--red-txt, var(--red)); }
.pc-step-ic { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 12px; flex-shrink: 0; }
.pc-step.done .pc-step-ic { background: color-mix(in srgb, var(--green) 70%, black); color: #fff; }
.pc-step.active .pc-step-ic { color: var(--blue-light-txt, var(--blue-light)); }
.pc-spin { width: 14px; height: 14px; border: 2px solid var(--border-2); border-top-color: var(--blue-light);
  border-radius: 50%; display: inline-block; animation: pcSpin .7s linear infinite; }
@keyframes pcSpin { to { transform: rotate(360deg); } }
.pc-result-ic { width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; font-size: 28px; font-weight: 700; }
.pc-result-ic.ok { background: rgba(34,197,94,.15); color: var(--green); }
.pc-result-ic.err { background: rgba(239,68,68,.15); color: var(--red-txt, var(--red)); }
/* El envío a SAP no obtuvo respuesta: no es un error, es una duda. Se distingue del
   círculo rojo a propósito — el rojo dice "no pasó" y acá el estado es DESCONOCIDO.
   `--amber` lo redefine `tema-claro.css` a un tono oscuro, así que sirve en los dos. */
.pc-result-ic.warn { background: var(--amber-bg, rgba(245,158,11,.15)); color: var(--amber); }
/* Tarjetas de métricas del modal */
.pc-mcards { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin: 0 0 12px; }
.pc-mcard { background: var(--navy-3); border: 1px solid var(--border-2); border-radius: 10px;
  padding: 12px 8px; text-align: center; }
.pc-mcard-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-3); margin-bottom: 5px; }
.pc-mcard-val { font-size: 22px; font-weight: 700; color: var(--text); }
.pc-mcard.si   { background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.35); }
.pc-mcard.si .pc-mcard-lbl   { color: var(--green); }
.pc-mcard.si .pc-mcard-val   { color: var(--green); }
.pc-mcard.no   { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.35); }
.pc-mcard.no .pc-mcard-lbl   { color: var(--red-txt, var(--red)); }
.pc-mcard.no .pc-mcard-val   { color: var(--red-txt, var(--red)); }
.pc-mcard.adic { background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.35); }
.pc-mcard.adic .pc-mcard-lbl { color: var(--blue-light-txt, var(--blue-light)); }
.pc-mcard.adic .pc-mcard-val { color: var(--blue-light-txt, var(--blue-light)); }
.pc-mmonto { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--navy,#0a1019); border-radius: 10px; padding: 16px 18px; }
.pc-mmonto-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-3); margin-bottom: 4px; }
.pc-mmonto-val { font-size: 22px; font-weight: 700; color: var(--text); }
.pc-mmonto-sap { text-align: right; }
.pc-mmonto-sapval { font-size: 20px; font-weight: 700; color: var(--blue-light-txt, var(--blue-light)); }
.pc-select { padding: 5px 10px; border-radius: 16px; font-size: 11px; cursor: pointer; font-family: var(--font);
  border: 1px solid var(--border-2); background: var(--navy-4); color: var(--text-2); outline: none; }

.pc-section { background: var(--navy-2); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 16px; }
.pc-tblwrap { max-height: 560px; overflow-y: auto; }
.pc-table { width: 100%; border-collapse: collapse; font-family: var(--font); }
.pc-table thead th { position: sticky; top: 0; background: var(--navy-3); z-index: 2;
  font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .5px; font-weight: 700;
  padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); }
.pc-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); color: var(--text); }
.pc-table tbody tr:hover:not(.pc-grp) { background: var(--navy-3); }

.pc-grp { cursor: pointer; background: var(--navy-3); }
.pc-grp:hover { filter: brightness(1.08); }
.pc-lock { margin-left: 8px; font-size: 10px; color: var(--green); font-weight: 600; }

/* Pop-up "globo de cómic" para las NC ligadas (ícono 💵) — mismo diseño que Pago de Facturas
 *
 * ⚠ El fondo iba HARDCODEADO en verde oscuro mientras el texto usa var(--text)/var(--green),
 * que sí se invierten. Mismo defecto que .solpop-bubble (ver 08431e6) y su gemelo en
 * pago-facturas.css. Arreglo: superficie con los tokens que sí se invierten
 * (--navy-3/--navy-2) más un tinte de --green por color-mix — conserva el matiz verde
 * y se invierte junto con el tema. */
.ncpop-wrap{position:relative;display:inline-block;margin-left:6px;margin-top:-5px;margin-bottom:-5px;vertical-align:middle}
.ncpop-ico{cursor:help;outline:none;font-size:15px;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;vertical-align:middle;color:var(--green,#10b981);background:color-mix(in srgb, var(--green,#10b981) 12%, var(--navy-3,#1a2540));border:1px solid color-mix(in srgb, var(--green,#10b981) 40%, transparent);transition:background .12s,border-color .12s}
.ncpop-wrap:hover .ncpop-ico{background:color-mix(in srgb, var(--green,#10b981) 18%, var(--navy-3,#1a2540));border-color:color-mix(in srgb, var(--green,#10b981) 65%, transparent)}
.ncpop-bubble{
  position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%) scale(.96);
  transform-origin:bottom center;min-width:230px;max-width:300px;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--green,#22c55e) 8%, var(--navy-3,#1a2540)),
    color-mix(in srgb, var(--green,#22c55e) 8%, var(--navy-2,#111827)));
  border:1px solid rgba(34,197,94,.45);border-radius:12px;
  padding:10px 12px;z-index:60;
  box-shadow:0 10px 30px var(--sombra,rgba(0,0,0,.5)), 0 0 0 1px rgba(34,197,94,.08);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .14s ease, transform .14s ease;
  text-align:left;white-space:normal;
}
/* Ya NO se revela acá con :hover/:focus — position:absolute dentro de
   .pc-tblwrap (overflow-y:auto) se recorta contra el borde del contenedor
   cuando la fila está cerca del encabezado. Ahora es plantilla de contenido,
   siempre oculta; la capa fija #pcPopTip (más abajo) es la que se muestra,
   posicionada por _pcPopMostrar() en payment-confirm.js. */
.ncpop-bubble::after{
  content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:7px solid transparent;
  border-top-color:color-mix(in srgb, var(--green,#22c55e) 8%, var(--navy-2,#111827));
  filter:drop-shadow(0 1px 0 rgba(34,197,94,.35));
}
.ncpop-title{display:block;font-size:12px;font-weight:700;color:var(--green,#22c55e)}
.ncpop-sub{display:block;font-size:10px;color:var(--text-3);margin-bottom:7px}
.ncpop-row{
  display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:center;
  background:rgba(34,197,94,.10);border:1px solid rgba(34,197,94,.18);
  border-radius:7px;padding:6px 8px;margin-bottom:5px;
}
.ncpop-doc{font-size:11px;color:var(--text);font-family:var(--mono)}
.ncpop-monto{font-size:12px;font-weight:700;color:var(--green,#22c55e);font-family:var(--mono);text-align:right}
.ncpop-fecha{grid-column:1 / -1;font-size:10px;color:var(--text-3)}
.ncpop-texto{grid-column:1 / -1;font-size:10px;color:var(--text-2);opacity:.85;margin-top:2px}
.ncpop-total{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--text-2);border-top:1px dashed rgba(34,197,94,.25);padding-top:6px;margin-top:2px}
.ncpop-total b{color:var(--green,#22c55e);font-family:var(--mono)}
/* Pop-up para Notas de Débito (KS) — ÁMBAR: suman al monto en vez de descontarlo
 *
 * ⚠ Mismo defecto que .ncpop-bubble / .solpop-bubble: fondo hardcodeado que no se
 * invertía en tema claro. Mismo arreglo: --navy-3/--navy-2 más un tinte de --amber
 * por color-mix. */
.ndpop-wrap{position:relative;display:inline-block;margin-left:6px;margin-top:-5px;margin-bottom:-5px;vertical-align:middle}
.ndpop-ico{cursor:help;outline:none;font-size:15px;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;vertical-align:middle;color:var(--amber,#f59e0b);background:color-mix(in srgb, var(--amber,#f59e0b) 12%, var(--navy-3,#1a2540));border:1px solid color-mix(in srgb, var(--amber,#f59e0b) 40%, transparent);transition:background .12s,border-color .12s}
.ndpop-wrap:hover .ndpop-ico{background:color-mix(in srgb, var(--amber,#f59e0b) 18%, var(--navy-3,#1a2540));border-color:color-mix(in srgb, var(--amber,#f59e0b) 65%, transparent)}
.ndpop-bubble{
  position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%) scale(.96);
  transform-origin:bottom center;min-width:230px;max-width:300px;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--amber,#f59e0b) 8%, var(--navy-3,#1a2540)),
    color-mix(in srgb, var(--amber,#f59e0b) 8%, var(--navy-2,#111827)));
  border:1px solid rgba(245,158,11,.45);border-radius:12px;
  padding:10px 12px;z-index:60;
  box-shadow:0 10px 30px var(--sombra,rgba(0,0,0,.5)), 0 0 0 1px rgba(245,158,11,.08);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .14s ease, transform .14s ease;
  text-align:left;white-space:normal;
}
/* Ídem .ncpop-bubble más arriba: ya no se revela acá, queda como plantilla
   y la muestra la capa fija #pcPopTip. */
.ndpop-bubble::after{
  content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:7px solid transparent;
  border-top-color:color-mix(in srgb, var(--amber,#f59e0b) 8%, var(--navy-2,#111827));
  filter:drop-shadow(0 1px 0 rgba(245,158,11,.35));
}
.ndpop-title{display:block;font-size:12px;font-weight:700;color:var(--amber,#f59e0b)}
.ndpop-sub{display:block;font-size:10px;color:var(--text-3);margin-bottom:7px}
.ndpop-row{
  display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:center;
  background:rgba(245,158,11,.10);border:1px solid rgba(245,158,11,.18);
  border-radius:7px;padding:6px 8px;margin-bottom:5px;
}
.ndpop-doc{font-size:11px;color:var(--text);font-family:var(--mono)}
.ndpop-monto{font-size:12px;font-weight:700;color:var(--amber,#f59e0b);font-family:var(--mono);text-align:right}
.ndpop-fecha{grid-column:1 / -1;font-size:10px;color:var(--text-3)}
.ndpop-texto{grid-column:1 / -1;font-size:10px;color:var(--text-2);opacity:.85;margin-top:2px}
.ndpop-total{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--text-2);border-top:1px dashed rgba(245,158,11,.25);padding-top:6px;margin-top:2px}
.ndpop-total b{color:var(--amber,#f59e0b);font-family:var(--mono)}
/* Pop-up para los ANTICIPOS (KZ) ligados — mismo layout que el de NC pero en AZUL.
 *
 * Tres colores para tres cosas, que es de lo que se trata: verde descuenta por una
 * nota de crédito, ámbar suma por una nota de débito, azul descuenta por un pago ya
 * entregado al proveedor. Un KZ comparte el rol 'NC' en el DATO —es lo que mira toda
 * la aritmética— pero no es una nota de crédito, y el globo no puede decir que lo es.
 *
 * ⚠ El acento va en la LETRA, en la LÍNEA y en un tinte MÍNIMO de la superficie; el
 *   fondo de cada renglón es --navy-3 neutro. Es el patrón con el que se arreglaron
 *   .ncpop-row y .fc-org: texto de un acento sobre un tinte del MISMO acento no gana
 *   contraste nunca, porque los dos se mueven juntos al invertir el tema.
 * ⚠ El texto usa --blue-light-txt (el tono 400, 5,04:1) y NUNCA como `background`.
 *   El fallback no es adorno: un `color` inválido se DESCARTA y el texto heredaría el
 *   del padre, que en una celda puede ser el mismo color que el fondo. */
.kzpop-wrap{position:relative;display:inline-block;margin-left:6px;margin-top:-5px;margin-bottom:-5px;vertical-align:middle}
.kzpop-ico{cursor:help;outline:none;font-size:15px;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;vertical-align:middle;color:var(--blue-light,#3b82f6);background:color-mix(in srgb, var(--blue-light,#3b82f6) 12%, var(--navy-3,#1a2540));border:1px solid color-mix(in srgb, var(--blue-light,#3b82f6) 40%, transparent);transition:background .12s,border-color .12s}
.kzpop-wrap:hover .kzpop-ico{background:color-mix(in srgb, var(--blue-light,#3b82f6) 18%, var(--navy-3,#1a2540));border-color:color-mix(in srgb, var(--blue-light,#3b82f6) 65%, transparent)}
.kzpop-bubble{
  position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%) scale(.96);
  transform-origin:bottom center;min-width:230px;max-width:300px;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--blue-light,#3b82f6) 8%, var(--navy-3,#1a2540)),
    color-mix(in srgb, var(--blue-light,#3b82f6) 8%, var(--navy-2,#111827)));
  border:1px solid color-mix(in srgb, var(--blue-light,#3b82f6) 45%, transparent);
  border-radius:12px;padding:10px 12px;z-index:60;
  box-shadow:0 10px 30px var(--sombra,rgba(0,0,0,.5)),
             0 0 0 1px color-mix(in srgb, var(--blue-light,#3b82f6) 8%, transparent);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .14s ease, transform .14s ease;
  text-align:left;white-space:normal;
}
/* Ídem .ncpop-bubble: ya NO se revela acá. Es la plantilla de contenido que la capa
   fija copia — position:absolute se recortaba contra el borde del contenedor. */
.kzpop-bubble::after{
  content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:7px solid transparent;
  border-top-color:color-mix(in srgb, var(--blue-light,#3b82f6) 8%, var(--navy-2,#111827));
  filter:drop-shadow(0 1px 0 color-mix(in srgb, var(--blue-light,#3b82f6) 35%, transparent));
}
.kzpop-title{display:block;font-size:12px;font-weight:700;color:var(--blue-light-txt, var(--blue-light,#3b82f6))}
.kzpop-sub{display:block;font-size:10px;color:var(--text-3);margin-bottom:7px}
.kzpop-row{
  display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:center;
  background:var(--navy-3,#1a2540);
  border:1px solid color-mix(in srgb, var(--blue-light,#3b82f6) 26%, transparent);
  border-radius:7px;padding:6px 8px;margin-bottom:5px;
}
.kzpop-doc{font-size:11px;color:var(--text);font-family:var(--mono)}
.kzpop-monto{font-size:12px;font-weight:700;color:var(--blue-light-txt, var(--blue-light,#3b82f6));font-family:var(--mono);text-align:right}
.kzpop-fecha{grid-column:1 / -1;font-size:10px;color:var(--text-3)}
.kzpop-texto{grid-column:1 / -1;font-size:10px;color:var(--text-2);opacity:.85;margin-top:2px}
.kzpop-total{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--text-2);border-top:1px dashed color-mix(in srgb, var(--blue-light,#3b82f6) 25%, transparent);padding-top:6px;margin-top:2px}
.kzpop-total b{color:var(--blue-light-txt, var(--blue-light,#3b82f6));font-family:var(--mono)}
/* Pop-up "globo de cómic" para el comentario de una Solicitud (ícono 💬)
 *
 * ⚠ El fondo iba HARDCODEADO en navy oscuro mientras el texto usaba `var(--text)`,
 * que sí se invierte. Resultado en tema claro: letras casi negras sobre navy
 * oscuro, con un contraste de 1,03:1 — prácticamente invisible (el mínimo es 4,5).
 * En oscuro daba 16,53:1, así que el defecto vivía solo en un tema.
 *
 * ⚠ Y no lo detectó la auditoría de contraste de las 13 vistas, por DOS razones que
 * conviene tener juntas: `backgroundColor` reporta `rgba(0,0,0,0)` sobre un
 * `linear-gradient` —el color vive en `backgroundImage`—, y además este globo solo
 * existe mientras el puntero está sobre el ícono, así que no estaba en pantalla
 * cuando se midió. La auditoría concluyó "cero textos sobre gradiente" y este era
 * uno: un caso omitido no es un caso que pasa.
 *
 * La regla: el fondo se declara con los MISMOS tokens que el texto, así los dos se
 * invierten juntos y no puede volver a divergir. Copia de esta hoja del mismo
 * defecto ya arreglado en pago-facturas.css (commit 08431e6). */
.solpop-wrap{position:relative;display:inline-block;margin-left:6px}
.solpop-ico{cursor:help;font-size:12px;outline:none}
.solpop-bubble{
  position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%) scale(.96);
  transform-origin:bottom center;min-width:200px;max-width:300px;
  background:linear-gradient(180deg,var(--navy-3,#1a2540),var(--navy-2,#111827));
  border:1px solid rgba(37,99,235,.45);border-radius:12px;
  padding:10px 12px;z-index:60;
  /* La sombra usa el token de sombra del tema: negro al 50% sobre papel blanco se
     ve como una mancha, y es lo que pasaba al invertir solo el texto. */
  box-shadow:0 10px 30px var(--sombra,rgba(0,0,0,.5)), 0 0 0 1px rgba(37,99,235,.08);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .14s ease, transform .14s ease;
  text-align:left;white-space:normal;
}
/* Ídem .ncpop-bubble más arriba: ya no se revela acá, queda como plantilla
   y la muestra la capa fija #pcPopTip. */
.solpop-bubble::after{
  content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  /* La punta toma el MISMO token que el extremo inferior del gradiente. Con el hex
     a mano, en tema claro quedaba un triángulo navy colgando de un globo blanco. */
  border:7px solid transparent;border-top-color:var(--navy-2,#111827);
  filter:drop-shadow(0 1px 0 rgba(37,99,235,.35));
}
.solpop-title{display:block;font-size:11px;font-weight:700;color:var(--blue-light-txt, var(--blue-light,#60a5fa));margin-bottom:6px}
.solpop-text{
  display:block;font-size:12px;color:var(--text,#f1f5f9);line-height:1.5;
  background:rgba(37,99,235,.10);border:1px solid rgba(37,99,235,.18);
  border-radius:7px;padding:7px 9px;font-style:italic;
}

/* ── Capa fija compartida por los pop-ups de NC / ND / Solicitud ──────────
 * Mismo defecto y mismo arreglo que su gemelo en pago-facturas.css:
 * ".ncpop-bubble"/".ndpop-bubble"/".solpop-bubble" son position:absolute
 * DENTRO de ".pc-tblwrap" (overflow-y:auto para el scroll de la tabla) — con
 * una fila cerca del encabezado el globo se recorta contra el borde superior
 * del contenedor. Ninguna combinación de overflow-x/overflow-y lo resuelve
 * sin romper el scroll.
 *
 * Las tres burbujas de arriba dejan de mostrarse en su lugar (por eso ya no
 * llevan la regla de :hover/:focus) y quedan como PLANTILLA de contenido,
 * siempre oculta. _pcPopMostrar() (payment-confirm.js) copia su innerHTML a
 * esta única capa fija, que toma el color de cada tipo reutilizando la
 * MISMA clase — así el fondo/borde/paleta no se duplican. Con
 * position:fixed a nivel de body, ningún overflow la recorta. Una sola
 * función posiciona los tres. */
#pcPopTip{
  position:fixed;left:0;top:0;right:auto;bottom:auto;z-index:99999;
  transform:none;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .14s ease;
}
#pcPopTip.on{ opacity:1;visibility:visible; }

/* Globo ACOTADO: el contenido no cabe entero ni arriba ni abajo del ícono, así que
   el JS lo limita al espacio disponible y le da scroll propio. Sin esto el navegador
   lo cortaba por el borde inferior y escondía la mitad del detalle sin avisar.
   ⚠ `pointer-events:auto` es obligatorio: el globo normal los tiene desactivados
   para no interferir con la tabla de abajo, pero uno que se lee desplazándolo
   necesita recibir la rueda del mouse. */
/* La barra de scroll del globo: fina y con el acento de cada tipo. Las de 11px de
   styles.css son un cuarto del ancho de un globo — ver el comentario largo en
   estilos/pago-facturas.css. */
#pcPopTip.py-pop-acotado{ scrollbar-width:thin; scrollbar-color:var(--pop-acento, var(--text-3)) transparent; padding-right:6px; }
#pcPopTip.py-pop-acotado::-webkit-scrollbar{ width:7px; }
#pcPopTip.py-pop-acotado::-webkit-scrollbar-track{ background:transparent; }
#pcPopTip.py-pop-acotado::-webkit-scrollbar-thumb{
  background-color:var(--pop-acento, var(--text-3)); border-radius:7px;
  border:2px solid transparent; background-clip:padding-box;
}
#pcPopTip.py-pop-acotado::-webkit-scrollbar-thumb:hover{ background-color:var(--pop-acento, var(--text-2)); border-width:1px; }
#pcPopTip.ncpop-bubble  { --pop-acento: var(--green); }
#pcPopTip.ndpop-bubble  { --pop-acento: var(--amber); }
#pcPopTip.kzpop-bubble  { --pop-acento: var(--blue-light); }
#pcPopTip.solpop-bubble { --pop-acento: var(--blue-light); }

#pcPopTip.py-pop-acotado{
  overflow-y:auto; overscroll-behavior:contain; pointer-events:auto;
}
#pcPopTip.py-pop-acotado::after{ display:none; }
/* La flecha sigue al ícono aunque el globo se haya corrido por el clamp
   contra el borde de la pantalla. */
#pcPopTip::after{ left:var(--pop-arrow-left, 50%); }
/* Modo "arriba": sin espacio arriba del ícono, el globo se dibuja DEBAJO y
   la flecha se voltea al borde superior; el color de la punta cambia por
   tipo, así que va uno por cada uno. */
#pcPopTip.arriba.ncpop-bubble::after{
  top:auto;bottom:100%;border-top-color:transparent;
  border-bottom-color:color-mix(in srgb, var(--green,#22c55e) 8%, var(--navy-3,#1a2540));
}
#pcPopTip.arriba.ndpop-bubble::after{
  top:auto;bottom:100%;border-top-color:transparent;
  border-bottom-color:color-mix(in srgb, var(--amber,#f59e0b) 8%, var(--navy-3,#1a2540));
}
#pcPopTip.arriba.kzpop-bubble::after{
  top:auto;bottom:100%;border-top-color:transparent;
  border-bottom-color:color-mix(in srgb, var(--blue-light,#3b82f6) 8%, var(--navy-3,#1a2540));
}
#pcPopTip.arriba.solpop-bubble::after{
  top:auto;bottom:100%;border-top-color:transparent;
  border-bottom-color:var(--navy-3,#1a2540);
}

/* ── Mejoras UX: búsqueda, avance, semáforo, detalle SAP, barra de caja ── */
.pc-search { width:250px; background:var(--navy-4); border:1px solid var(--border-2); border-radius:16px;
             padding:6px 14px; color:var(--text); font-size:12px; outline:none; font-family:inherit; transition:border-color .15s; }
.pc-search:focus { border-color:var(--blue); }
.pc-avance { background:var(--navy-2); border:1px solid var(--border); border-radius:14px; padding:14px 18px; margin-bottom:14px; }
.pc-avance-top { display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap;
                 font-size:12px; color:var(--text-3); }
.pc-avance-top strong { font-size:13px; color:var(--text); }
.pc-avance-bar { height:8px; background:var(--navy); border-radius:4px; margin-top:9px; overflow:hidden; display:flex; }
.pc-avance-bar div { height:100%; }
.pc-avance-btns { display:flex; gap:8px; margin-top:11px; flex-wrap:wrap; }
.pc-venc { font-size:10px; font-weight:600; }
.pc-venc-r { color:var(--red-txt, var(--red)); } .pc-venc-a { color:var(--amber); } .pc-venc-g { color:var(--text-3); font-weight:400; }
.pc-prov { cursor:pointer; }
.pc-prov:hover { color:var(--blue-light-txt, var(--blue-light)); }
/* Filas donde Tesorería ya coincide con el CFO: se atenúan (el ojo va a lo pendiente y a lo que difiere). */
.pc-table tbody tr.pc-match td { opacity:.6; transition:opacity .15s; }
.pc-table tbody tr.pc-match:hover td { opacity:1; }
/* Vencida al día de pago: fila en rojo tenue (mismo tono que Pago de Facturas). */
.pc-table tbody tr.pc-vencida:not(.pc-dif) { background: rgba(239,68,68,0.04); }
.pc-det-arrow { cursor:pointer; color:var(--text-3); font-size:11px; user-select:none; }
.pc-det-arrow.on, .pc-det-arrow:hover { color:var(--blue-light-txt, var(--blue-light)); }
tr.pc-flash td { animation:pcFlash 1.5s ease; }
@keyframes pcFlash { 0% { background:rgba(37,99,235,.28); } 100% { background:transparent; } }
/* Barra fija al pie: resumen de caja + acción principal */
.pc-sticky { position:sticky; bottom:12px; z-index:40; margin-top:16px; background:var(--navy-2);
             border:1px solid var(--border-2); border-radius:14px; padding:12px 18px;
             display:flex; gap:26px; align-items:center; flex-wrap:wrap; box-shadow:0 -10px 30px rgba(0,0,0,.45); }
.pc-sk { display:flex; flex-direction:column; gap:2px; }
.pc-sk span { font-size:9.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--text-3); white-space:nowrap; }
.pc-sk strong { font-family:var(--mono); font-size:13px; color:var(--text); white-space:nowrap; }
.pc-sk em { font-style:normal; font-size:11px; }
.pc-alerta { margin-top:8px; background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.3);
             border-radius:10px; padding:9px 14px; font-size:12px; color:var(--red-txt, var(--red)); }
.pc-grpbtn { margin-left: 6px; padding: 2px 8px; border-radius: 6px; font-size: 10px; cursor: pointer;
  border: 1px solid var(--border-2); background: transparent; color: var(--text-2); font-family: var(--font); }
.pc-grpbtn:hover { color: var(--text); background: var(--navy-2); }

/* Fila donde Tesorería difiere del CFO */
.pc-dif { background: color-mix(in srgb, var(--amber) 9%, transparent); }
.pc-dif:hover { background: color-mix(in srgb, var(--amber) 14%, transparent) !important; }
.pc-difdot { color: var(--amber); font-size: 10px; margin-left: 3px; }

.pc-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 6px; }
.pc-chip-si   { color: var(--green); background: rgba(34,197,94,.12); border: 1px solid var(--green); }
.pc-chip-no   { color: var(--red-txt, var(--red)); background: rgba(239,68,68,.12); border: 1px solid var(--red); }
.pc-chip-none { color: var(--text-3); background: var(--navy-3); border: 1px solid var(--border-2); }

.pc-tgroup { display: inline-flex; border-radius: 8px; overflow: hidden; border: 1px solid var(--border-2);
  background: var(--navy); padding: 2px; gap: 2px; transition: box-shadow .15s; }
.pc-tgroup.no-sel { box-shadow: 0 0 0 1px color-mix(in srgb, var(--amber) 30%, transparent); }
.pc-tbtn { padding: 5px 14px; font-size: 11px; font-weight: 700; cursor: pointer; border: none; border-radius: 6px;
  background: transparent; color: var(--text-3); font-family: var(--font); transition: all .15s; letter-spacing: .3px; }
.pc-tbtn.si.on { background: color-mix(in srgb, var(--green) 70%, black); color: #fff; box-shadow: 0 1px 4px color-mix(in srgb, var(--green) 45%, transparent); }
.pc-tbtn.no.on { background: color-mix(in srgb, var(--red) 70%, black); color: #fff; box-shadow: 0 1px 4px color-mix(in srgb, var(--red) 45%, transparent); }
.pc-tbtn.si:not(.on):hover { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
.pc-tbtn.no:not(.on):hover { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red-txt, var(--red)); }

.pc-empty { text-align: center; padding: 36px 24px; color: var(--text-3); }
.pc-empty-icon { font-size: 38px; margin-bottom: 10px; opacity: 0.6; }
.pc-empty-title { font-size: 14px; font-weight: 600; color: var(--text-2); margin-bottom: 4px; }
.pc-empty-text { font-size: 12px; line-height: 1.5; max-width: 420px; margin: 0 auto; }

.pc-btn { padding: 8px 16px; border-radius: 6px; font-size: 12.5px; font-weight: 600; font-family: var(--font);
  cursor: pointer; transition: all .15s; border: 1px solid transparent; }
.pc-btn-primary { background: color-mix(in srgb, var(--green) 70%, black); color: #fff; }
.pc-btn-primary:hover:not(:disabled):not(.pc-btn-disabled) { filter: brightness(1.1); }
.pc-btn-ghost { background: transparent; color: var(--text-2); border-color: var(--border-2); }
.pc-btn-ghost:hover { color: var(--text); background: var(--navy-3); }
.pc-btn-disabled, .pc-btn:disabled { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.4); }

.pc-toast { position: fixed; bottom: 24px; right: 24px; z-index: 9999; padding: 10px 18px; border-radius: 6px;
  font-size: 12.5px; font-weight: 500; font-family: var(--font); box-shadow: 0 6px 20px rgba(0,0,0,0.4); animation: pcToastIn .25s ease-out; }
.pc-toast-info { background: var(--navy-3); color: var(--text); border: 1px solid var(--border-2); }
.pc-toast-out { animation: pcToastOut .35s ease-in forwards; }
@keyframes pcToastIn  { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes pcToastOut { to   { transform: translateY(20px); opacity: 0; } }

@media (max-width: 860px) { .pc-kpis { grid-template-columns: repeat(2, 1fr); } }

/* El sello de que la prenómina de la semana ya se aplicó en SAP, en el lugar del botón.
   ⚠ Verde y no rojo: no es un error, es "esto ya está hecho".
   ⚠ Acento en la letra y en la línea, fondo en la superficie neutra. Un tinte del propio
   verde debajo de su verde mueve los dos colores juntos, así que el contraste entre ellos
   no crece por más que se baje el tinte — el patrón que quedó corto en cuatro lugares el
   18-08-2026. */
.pc-bloqueo-sap {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  color: var(--green); border: 1px solid var(--green); background: var(--navy-3);
  border-radius: 8px; padding: 8px 12px;
}
/* El aviso del sondeo: "el CFO reemplazó la propuesta", "le habilitaron un reenvío",
   "ya se envió a SAP".

   ⚠ Acento en la LETRA y en la LÍNEA, fondo en la superficie neutra (`--navy-3`). Un
   tinte del propio rojo debajo de su rojo mueve los dos colores juntos, así que el
   contraste entre ellos no crece por más que se baje el tinte — el patrón que quedó corto
   en cuatro lugares el 18-08-2026. `.pc-alerta`, dos secciones más arriba, todavía usa el
   tinte: no se toca acá para no mezclar dos cambios, y queda anotado.

   ⚠ El texto ENVUELVE (`white-space` no se toca y el contenedor no es una tabla): son tres
   frases largas y el aviso ocupa el ancho de la vista. */
.pc-aviso-cambio {
  display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 11px 14px; border-radius: 10px;
  font-size: 12.5px; line-height: 1.5;
  background: var(--navy-3); border: 1px solid var(--border-2); color: var(--text-2);
  animation: pcToastIn .25s ease-out;
}
/* Dos avisos seguidos no se pegan, y el último no duplica el margen del bloque. */
.pc-aviso-cambio + .pc-aviso-cambio { margin-top: -4px; }

/* ⚠ Los nombres de tono no son subcadena de `pc-aviso-cambio`, a propósito: el primero
   fue `aviso`, y toda lectura del atributo `class` por subcadena lo encontraba en las
   TRES tarjetas. Ver la nota en `payment-confirm.js`, junto al catálogo de avisos. */
.pc-aviso-cambio.grave { color: var(--red-txt, var(--red)); border-color: var(--red); }
.pc-aviso-cambio.ambar { color: var(--amber);               border-color: var(--amber); }
.pc-aviso-cambio.suave { color: var(--text-2);              border-color: var(--border-2); }

/* ⚠ El glifo es TEXTO (⚠ / ℹ), no un `<svg>`: hereda `currentColor`, así que cambia de
   color con el tono del aviso sin una regla por tono, y lo dibuja la fuente del texto y no
   la de emoji — que es distinta en Windows, en macOS y en Miami. */
.pc-aviso-glifo { flex: 0 0 auto; font-size: 14px; line-height: 1.35; }
/* El texto se queda con el espacio sobrante; el botón nunca se estruja. */
.pc-aviso-txt   { flex: 1 1 260px; min-width: 0; }
.pc-aviso-txt strong { color: var(--text); font-weight: 700; }
.pc-aviso-btn   { flex: 0 0 auto; padding: 5px 12px; font-size: 11.5px; align-self: center; }
