/* ============================================================
   DANGOFE OS · LA ENTREGA DEL EFECTIVO CON FIRMA (prefijo pen-) · v1.0.0 · 2026-10-23 · chat de Diseño
   Va con portal-entrega.js. Tres lugares: la tarjeta «Tienes RD$ … por entregar» del portal del técnico, la hoja donde quien recibe FIRMA con el dedo,
   la pantalla que tapa el portal cuando hay una deuda, y la lista «Entregas firmadas» de la oficina (Seguimiento de cobro).
   Cristal líquido (blanco de día, «Noche azul» por [data-theme='dark']), SIN sombras (el foco es un aro plano), Plus Jakarta Sans, teléfono primero.
   Tres formas por data-v: A · Pasos, B · Una hoja, C · Recibo. Nada se anima sin parar; con «reducir movimiento» no se anima nada.
   ============================================================ */
.pen-nodo, .pen-velo, .pen-bloq, .pen-of, .pen-of-velo {
  --pen-az: 3, 38, 155; --pen-cel: 53, 146, 207; --pen-ok: 29, 154, 91; --pen-amb: 194, 117, 0; --pen-mal: 192, 57, 43;
  --pen-tinta: #0a1633; --pen-tenue: #5b6880; --pen-suave: #93a0b8; --pen-azul-txt: #03269b; --pen-amb-txt: #9a5b00; --pen-ok-txt: #15724a; --pen-mal-txt: #a82f23;
  --pen-vidrio: rgba(255, 255, 255, .76); --pen-vidrio2: rgba(255, 255, 255, .9); --pen-borde: rgba(255, 255, 255, .9);
  --pen-linea: rgba(10, 22, 51, .09); --pen-campo: rgba(10, 22, 51, .05); --pen-pri: #03269b; --pen-pri-txt: #fff; --pen-papel: #ffffff;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: var(--pen-tinta);
}
[data-theme='dark'] .pen-nodo, [data-theme='dark'] .pen-velo, [data-theme='dark'] .pen-bloq, [data-theme='dark'] .pen-of, [data-theme='dark'] .pen-of-velo,
.pen-velo.is-noche, .pen-bloq.is-noche, .pen-of-velo.is-noche {
  --pen-tinta: #f2f5fb; --pen-tenue: #a9b4c9; --pen-suave: #6f7a93; --pen-azul-txt: #8fb4ff; --pen-amb-txt: #fcd34d; --pen-ok-txt: #6ee7b7; --pen-mal-txt: #fca5a5;
  --pen-vidrio: rgba(12, 22, 60, .8); --pen-vidrio2: rgba(20, 34, 84, .9); --pen-borde: rgba(140, 170, 255, .28);
  --pen-linea: rgba(255, 255, 255, .11); --pen-campo: rgba(255, 255, 255, .06); --pen-pri: #2e5bd9;
}
/* la oficina usa los colores del propio sistema (texto, líneas y acento) y deja solo los botones en azul */
.pen-of {
  --pen-tinta: var(--text-primary, #0a1633); --pen-tenue: var(--text-muted, #5b6880); --pen-suave: var(--text-muted, #93a0b8); --pen-linea: var(--border-soft, rgba(10, 22, 51, .12));
  --pen-campo: rgba(var(--accent-rgb, 10, 22, 51), .07); --pen-pri: #2e5bd9; --pen-azul-txt: var(--text-primary, #03269b);
}
.pen-nodo *, .pen-velo *, .pen-bloq *, .pen-of *, .pen-of-velo * { box-sizing: border-box; }
.pen-nodo b, .pen-velo b, .pen-bloq b, .pen-of b, .pen-of-velo b { font-weight: 800; }
.pen-m { font-variant-numeric: tabular-nums; font-weight: 800; white-space: nowrap; }
.pen-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html.pen-abierto, html.pen-bloqueo { overflow: hidden; }

/* ---------- botones ---------- */
.pen-bt {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-size: 15px; font-weight: 800; line-height: 1.1; text-decoration: none; cursor: pointer; text-align: center; max-width: 100%;
  background: var(--pen-campo); color: var(--pen-tinta); -webkit-tap-highlight-color: transparent; transition: transform .18s, background .25s, border-color .25s, opacity .25s;
}
.pen-bt svg { flex: none; }
.pen-bt span { min-width: 0; overflow-wrap: anywhere; }
.pen-bt:active:not(:disabled) { transform: scale(.975); transition-duration: .08s; }
.pen-bt:disabled { opacity: .45; cursor: default; }
.pen-bt--pri { background: var(--pen-pri); color: var(--pen-pri-txt); }
.pen-bt--suave { background: rgba(var(--pen-az), .09); color: var(--pen-azul-txt); border-color: rgba(var(--pen-az), .14); }
[data-theme='dark'] .pen-bt--suave, .is-noche .pen-bt--suave { background: rgba(143, 180, 255, .12); border-color: rgba(143, 180, 255, .22); }
.pen-bt--txt { background: transparent; color: var(--pen-tenue); padding: 0 12px; }
.pen-bt--mal { background: rgb(var(--pen-mal)); color: #fff; }
.pen-bt--chico { min-height: 40px; padding: 0 14px; font-size: 13.5px; gap: 6px; }
.pen-bt--grande { min-height: 54px; font-size: 16px; }
.pen-nodo button:focus-visible, .pen-velo button:focus-visible, .pen-velo input:focus-visible, .pen-bloq button:focus-visible, .pen-bloq a:focus-visible, .pen-of button:focus-visible, .pen-of-velo button:focus-visible,
.pen-velo [tabindex]:focus-visible, .pen-of-velo [tabindex]:focus-visible { outline: 2.5px solid rgba(var(--pen-cel), .95); outline-offset: 2px; }
.pen-velo [tabindex='-1']:focus, .pen-of-velo [tabindex='-1']:focus, .pen-bloq [tabindex='-1']:focus, .pen-hoja:focus, .pen-of-modal:focus { outline: 0; }

/* ---------- avisos y etiquetas ---------- */
.pen-aviso { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 16px; font-size: 13.5px; line-height: 1.4; background: var(--pen-campo); color: var(--pen-tenue); }
.pen-aviso svg { flex: none; margin-top: 1px; }
.pen-aviso > span { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.pen-aviso b { color: var(--pen-tinta); }
.pen-aviso--mal { background: rgba(var(--pen-mal), .1); color: var(--pen-mal-txt); border: 1px solid rgba(var(--pen-mal), .22); }
.pen-aviso--mal b { color: var(--pen-mal-txt); }
.pen-aviso--amb { background: rgba(var(--pen-amb), .12); color: var(--pen-amb-txt); border: 1px solid rgba(var(--pen-amb), .24); }
.pen-aviso--ok { background: rgba(var(--pen-ok), .11); color: var(--pen-ok-txt); border: 1px solid rgba(var(--pen-ok), .24); align-items: center; }
.pen-aviso__x { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 0; background: transparent; color: inherit; display: grid; place-items: center; cursor: pointer; padding: 0; }
.pen-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; line-height: 1.2; white-space: nowrap; background: var(--pen-campo); color: var(--pen-tenue); }
.pen-tag--mal { background: rgba(var(--pen-mal), .12); color: var(--pen-mal-txt); }
.pen-tag--sin { font-weight: 700; }
.pen-nota { margin: 8px 0 0; font-size: 13px; color: var(--pen-tenue); }

/* ---------- la tarjeta del portal: «Tienes RD$ … por entregar» ---------- */
.pen {
  display: flex; flex-direction: column; gap: 12px; margin: 0 0 12px; padding: 14px; border-radius: 26px; border: 1px solid var(--pen-borde); background: var(--pen-vidrio);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
}
.pen--deuda { border-color: rgba(var(--pen-mal), .5); }
.pen-cab { display: flex; gap: 12px; align-items: flex-start; }
.pen-ic { flex: none; width: 44px; height: 44px; border-radius: 15px; display: grid; place-items: center; background: rgba(var(--pen-az), .08); color: var(--pen-azul-txt); }
[data-theme='dark'] .pen-ic { background: rgba(143, 180, 255, .12); }
.pen--deuda .pen-ic { background: rgba(var(--pen-mal), .12); color: var(--pen-mal-txt); }
.pen-t { min-width: 0; padding-top: 1px; }
.pen-t b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; overflow-wrap: anywhere; }
.pen-t small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--pen-tenue); line-height: 1.4; }
.pen-acc { display: flex; flex-wrap: wrap; gap: 8px; }
.pen-acc .pen-bt--pri { flex: 1 1 180px; }
.pen-acc .pen-bt--suave { flex: 1 1 150px; }
.pen-filas, .pen-rec__ls { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pen-fila {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 't d' 't b'; gap: 6px 12px; align-items: start; padding: 11px 12px; border-radius: 18px;
  background: var(--pen-vidrio2); border: 1px solid var(--pen-linea);
}
.pen-fila.is-vencida { border-color: rgba(var(--pen-mal), .35); }
.pen-fila__t { grid-area: t; min-width: 0; }
.pen-fila__t b, .pen-ck__t b, .pen-rec__n b { display: block; font-size: 14.5px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.pen-fila__t small, .pen-ck__t small, .pen-rec__n small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--pen-tenue); line-height: 1.35; overflow-wrap: anywhere; }
.pen-fila__d { grid-area: d; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 15px; }
.pen-fila > .pen-bt { grid-area: b; justify-self: end; }
@media (min-width: 440px) {
  .pen-fila { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: 't d b'; align-items: center; }
}
/* B · una lista siempre abierta: el botón grande va al final y ocupa todo el ancho */
.pen--B .pen-acc .pen-bt--pri { flex: 1 1 100%; }
/* C · el recibo: papel, renglones con puntos y el total */
.pen--C { gap: 10px; background: var(--pen-papel); border-style: dashed; border-width: 1.5px; border-color: var(--pen-linea); border-radius: 22px; -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-theme='dark'] .pen--C { background: rgba(14, 26, 70, .88); }
.pen--C.pen--deuda { border-color: rgba(var(--pen-mal), .55); }
.pen-rec__etq { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--pen-azul-txt); }
.pen-rec__li { display: grid; grid-template-columns: minmax(0, auto) minmax(8px, 1fr) auto; grid-template-areas: 'n p m' 'n p b'; gap: 4px 8px; align-items: end; padding: 4px 0 8px; border-bottom: 1px dashed var(--pen-linea); }
.pen-rec__n { grid-area: n; min-width: 0; max-width: 100%; }
.pen-rec__li > i { grid-area: p; align-self: end; height: 1px; margin-bottom: 7px; border-bottom: 2px dotted var(--pen-suave); opacity: .7; min-width: 8px; }
.pen-rec__li > .pen-m { grid-area: m; text-align: right; font-size: 15px; }
.pen-rec__li > .pen-bt { grid-area: b; justify-self: end; }
.pen-rec__li.is-vencida .pen-rec__n small { color: var(--pen-mal-txt); font-weight: 700; }
.pen-rec__tot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 0 2px; font-size: 14px; color: var(--pen-tenue); font-weight: 700; }
.pen-rec__tot b { font-size: 24px; letter-spacing: -.015em; color: var(--pen-tinta); font-variant-numeric: tabular-nums; }

/* ---------- la hoja de entrega ---------- */
.pen-velo, .pen-of-velo {
  position: fixed; inset: 0; z-index: 9700; display: flex; align-items: flex-end; justify-content: center; background: rgba(10, 22, 51, .34);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: pen-aparece .3s ease both;
}
.pen-of-velo { z-index: 100000; align-items: center; padding: 16px; }
[data-theme='dark'] .pen-velo, [data-theme='dark'] .pen-of-velo, .pen-velo.is-noche, .pen-of-velo.is-noche { background: rgba(2, 6, 24, .62); }
.pen-velo.is-fuera, .pen-of-velo.is-fuera { animation: pen-aparece .24s ease reverse both; pointer-events: none; }
.pen-hoja, .pen-of-modal {
  position: relative; width: 100%; max-width: 560px; max-height: 92vh; max-height: 92dvh; display: flex; flex-direction: column; border: 1px solid var(--pen-borde); background: var(--pen-vidrio);
  -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); outline: 0;
}
.pen-hoja { padding: 10px 18px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius: 30px 30px 0 0; border-bottom: 0; animation: pen-sube .55s cubic-bezier(.2, .9, .25, 1) both; }
.pen-velo.is-fuera .pen-hoja { animation: pen-baja .26s ease both; }
.pen-of-modal { max-width: 520px; padding: 20px 20px 18px; border-radius: 28px; gap: 6px; overflow-y: auto; animation: pen-sube-poco .4s cubic-bezier(.2, .9, .25, 1) both; }
.pen-of-velo.is-fuera .pen-of-modal { animation: none; }
.pen-asa { flex: none; width: 42px; height: 5px; margin: 0 auto 12px; border-radius: 999px; background: var(--pen-linea); }
.pen-x {
  position: absolute; top: 14px; right: 14px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--pen-linea); background: var(--pen-campo); color: var(--pen-tenue);
  display: grid; place-items: center; cursor: pointer; padding: 0; font: inherit;
}
.pen-cuerpo { min-height: 0; overflow-y: auto; scrollbar-width: none; padding: 0 2px; display: flex; flex-direction: column; gap: 14px; overscroll-behavior: contain; }
.pen-cuerpo::-webkit-scrollbar { display: none; }
.pen-hcab { padding-right: 46px; }
.pen-ojal { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--pen-azul-txt); }
.pen-ojal i { width: 18px; height: 1px; background: currentColor; opacity: .6; }
.pen-htit { margin: 4px 0 0; font-size: 21px; font-weight: 800; letter-spacing: -.015em; line-height: 1.15; }
.pen-htit--monto { margin-top: 2px; font-size: 38px; letter-spacing: -.02em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.pen-hsub { margin: 4px 0 0; font-size: 14px; color: var(--pen-tenue); line-height: 1.4; overflow-wrap: anywhere; }
.pen-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pen-pasos li { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 7px 9px; border-radius: 999px; background: var(--pen-campo); color: var(--pen-suave); font-size: 12px; font-weight: 700; }
.pen-pasos li i { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 800; background: var(--pen-linea); color: var(--pen-tenue); }
.pen-pasos li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pen-pasos li.is-on { background: rgba(var(--pen-az), .1); color: var(--pen-azul-txt); }
.pen-pasos li.is-on i { background: var(--pen-pri); color: #fff; }
.pen-pasos li.is-hecho { color: var(--pen-ok-txt); }
.pen-pasos li.is-hecho i { background: rgba(var(--pen-ok), .2); color: var(--pen-ok-txt); }
.pen-pasos .pen-l-sm { display: none; }
@media (max-width: 460px) { .pen-pasos .pen-l-lg { display: none; } .pen-pasos .pen-l-sm { display: inline; } }
@media (max-width: 380px) { .pen-pasos li { padding: 6px; gap: 5px; font-size: 11px; } .pen-pasos li i { width: 18px; height: 18px; } }
.pen-sec { display: flex; flex-direction: column; gap: 10px; }
.pen-sec[hidden] { display: none; }
.pen-sec__t { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 800; color: var(--pen-tinta); }
.pen-sec__t i { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11.5px; background: var(--pen-pri); color: #fff; }
.pen-hoja[data-v='A'] .pen-sec__t i { display: none; }
.pen-hoja[data-v='C'] .pen-sec__t { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--pen-azul-txt); }
.pen-hoja[data-v='C'] .pen-sec__t i { background: transparent; color: var(--pen-azul-txt); border: 1.5px solid currentColor; }
/* qué entregas */
.pen-ck-ls { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pen-ck { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 58px; padding: 10px 12px; border-radius: 18px; border: 1.5px solid var(--pen-linea); background: var(--pen-vidrio2); cursor: pointer; transition: border-color .2s, background .2s; }
.pen-ck input { position: absolute; opacity: 0; width: 100%; height: 100%; inset: 0; margin: 0; cursor: pointer; }
.pen-ck__caja { width: 26px; height: 26px; border-radius: 9px; border: 2px solid var(--pen-suave); display: grid; place-items: center; color: transparent; transition: background .2s, border-color .2s, color .2s; }
.pen-ck input:checked ~ .pen-ck__caja { background: var(--pen-pri); border-color: var(--pen-pri); color: #fff; }
.pen-ck:has(input:checked) { border-color: rgba(var(--pen-az), .5); background: rgba(var(--pen-az), .06); }
[data-theme='dark'] .pen-ck:has(input:checked) { border-color: rgba(143, 180, 255, .55); background: rgba(143, 180, 255, .1); }
.pen-ck input:focus-visible ~ .pen-ck__caja { outline: 2.5px solid rgba(var(--pen-cel), .95); outline-offset: 2px; }
.pen-ck.is-vencida { border-color: rgba(var(--pen-mal), .32); }
.pen-ck__t { min-width: 0; }
.pen-ck__d { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 14.5px; }
.pen-ck input:disabled ~ * { opacity: .6; }
/* quién de la oficina lo recibe */
.pen-qs { display: flex; flex-direction: column; gap: 8px; }
.pen-hoja[data-v='C'] .pen-qs { gap: 0; border: 1.5px solid var(--pen-linea); border-radius: 18px; overflow: hidden; background: var(--pen-vidrio2); }
.pen-q { display: grid; grid-template-columns: 44px minmax(0, 1fr) 24px; gap: 12px; align-items: center; width: 100%; min-height: 62px; padding: 9px 14px 9px 10px; border-radius: 20px; border: 1.5px solid var(--pen-linea); background: var(--pen-vidrio2); color: var(--pen-tinta); text-align: left; font: inherit; cursor: pointer; transition: border-color .2s, background .2s; }
.pen-hoja[data-v='C'] .pen-q { border: 0; border-radius: 0; border-bottom: 1px solid var(--pen-linea); background: transparent; }
.pen-hoja[data-v='C'] .pen-q:last-child { border-bottom: 0; }
.pen-q:disabled { opacity: .6; cursor: default; }
.pen-q.is-on { border-color: rgba(var(--pen-az), .55); background: rgba(var(--pen-az), .07); }
[data-theme='dark'] .pen-q.is-on { border-color: rgba(143, 180, 255, .55); background: rgba(143, 180, 255, .1); }
.pen-hoja[data-v='C'] .pen-q.is-on { border-color: transparent; }
.pen-av { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: rgba(var(--pen-az), .1); color: var(--pen-azul-txt); }
.pen-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pen-av i { font-style: normal; font-size: 15px; font-weight: 800; }
.pen-q__t { min-width: 0; }
.pen-q__t b { display: block; font-size: 15.5px; line-height: 1.25; overflow-wrap: anywhere; }
.pen-q__r { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--pen-pri); color: #fff; opacity: 0; transform: scale(.6); transition: opacity .2s, transform .25s; }
.pen-q.is-on .pen-q__r { opacity: 1; transform: none; }
/* la firma */
.pen-firma { position: relative; height: 200px; border-radius: 22px; border: 2px dashed var(--pen-suave); background: var(--pen-papel); overflow: hidden; transition: border-color .25s; }
.pen-firma.has-trazo { border-style: solid; border-color: rgba(var(--pen-az), .5); }
.pen-firma__lienzo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; -webkit-user-select: none; user-select: none; }
.pen-firma__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; pointer-events: none; font-size: 15px; font-weight: 700; color: #93a0b8; transition: opacity .2s; }
.pen-firma.has-trazo .pen-firma__ph { opacity: 0; }
.pen-firma__linea { position: absolute; left: 22px; right: 22px; bottom: 46px; height: 0; border-bottom: 1.5px solid #cdd5e4; pointer-events: none; }
.pen-firma__b { position: absolute; top: 8px; right: 8px; z-index: 2; background: rgba(10, 22, 51, .06); color: #5b6880; }
.pen-firma__b:disabled { opacity: 0; pointer-events: none; }
.pen-firma__nota { margin: -4px 0 0; font-size: 12.5px; color: var(--pen-tenue); line-height: 1.4; }
.pen-nota-c { display: flex; align-items: center; gap: 10px; padding: 0 14px; min-height: 50px; border-radius: 16px; border: 1.5px solid var(--pen-linea); background: var(--pen-vidrio2); color: var(--pen-tenue); }
.pen-in { flex: 1; min-width: 0; height: 48px; border: 0; outline: 0; background: transparent; color: var(--pen-tinta); font: inherit; font-size: 16px; }
.pen-in::placeholder { color: var(--pen-suave); }
.pen-nota-c:focus-within { border-color: rgba(var(--pen-cel), .9); }
.pen-cuerpo [data-penz='msg'].is-reserva { min-height: 56px; }
.pen-resumen { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 11px 13px; border-radius: 16px; background: rgba(var(--pen-ok), .1); color: var(--pen-ok-txt); font-size: 13.5px; line-height: 1.4; }
.pen-resumen svg { flex: none; margin-top: 1px; }
.pen-resumen span { min-width: 0; overflow-wrap: anywhere; }
.pen-resumen b { color: var(--pen-tinta); }
.pen-pie { flex: none; display: flex; flex-direction: column; gap: 8px; padding-top: 12px; }
.pen-pie__falta { margin: 0; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--pen-tenue); line-height: 1.35; }
.pen-pie .pen-bt--pri { width: 100%; min-height: 54px; font-size: 16px; }
.pen-pie .pen-bt--suave, .pen-pie .pen-bt--txt { width: 100%; }
/* ya entregado */
.pen-listo { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px 4px; text-align: center; }
.pen-listo__ic { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--pen-ok), .14); color: var(--pen-ok-txt); animation: pen-pop .55s cubic-bezier(.2, 1.3, .3, 1) both; }
.pen-listo b { font-size: 34px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: 4px; }
.pen-listo p { margin: 0; font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.pen-listo small { max-width: 34ch; font-size: 12.5px; color: var(--pen-tenue); line-height: 1.45; }
/* ---------- la pantalla que tapa el portal cuando hay deuda ---------- */
.pen-bloq {
  position: fixed; inset: 0; z-index: 9600; display: flex; align-items: center; justify-content: center; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: rgba(10, 22, 51, .58); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); overflow-y: auto; outline: 0; animation: pen-aparece .3s ease both;
}
[data-theme='dark'] .pen-bloq, .pen-bloq.is-noche { background: rgba(2, 6, 24, .78); }
.pen-bloq__c {
  width: 100%; max-width: 440px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); margin: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 20px 20px; border-radius: 30px;
  border: 1px solid var(--pen-borde); background: var(--pen-vidrio); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); text-align: center; animation: pen-sube-poco .5s cubic-bezier(.2, .9, .25, 1) both;
}
.pen-bloq__ic { width: 64px; height: 64px; border-radius: 22px; display: grid; place-items: center; background: rgba(var(--pen-mal), .13); color: var(--pen-mal-txt); }
.pen-bloq__eb { font-size: 11.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--pen-mal-txt); }
.pen-bloq__t { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.015em; line-height: 1.2; outline: 0; }
.pen-bloq__p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--pen-tenue); overflow-wrap: anywhere; }
.pen-bloq__p b { color: var(--pen-tinta); }
.pen-bloq__ls { list-style: none; margin: 4px 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 6px; text-align: left; flex: 0 1 auto; min-height: 64px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.pen-bloq__c > * { flex-shrink: 0; } .pen-bloq__c > .pen-bloq__ls { flex-shrink: 1; }
.pen-bloq__ls li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 14px; background: var(--pen-campo); }
.pen-bloq__ls li span { min-width: 0; }
.pen-bloq__ls li b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 14px; overflow-wrap: anywhere; }
.pen-bloq__ls li small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 1px; font-size: 12px; color: var(--pen-tenue); overflow-wrap: anywhere; }
.pen-bloq__ls li em { flex: none; font-style: normal; font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pen-bloq__ls li.pen-bloq__mas { justify-content: center; color: var(--pen-tenue); font-size: 13px; font-weight: 700; background: transparent; }
.pen-bloq__acc { width: 100%; display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.pen-bloq__acc .pen-bt { width: 100%; }
@keyframes pen-aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes pen-sube { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pen-baja { to { transform: translateY(60px); opacity: 0; } }
@keyframes pen-sube-poco { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pen-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .pen-velo, .pen-hoja, .pen-bloq, .pen-bloq__c, .pen-listo__ic, .pen-of-velo, .pen-of-modal { animation: none !important; }
  .pen-bt, .pen-ck, .pen-q, .pen-q__r, .pen-ck__caja { transition: none !important; }
}

/* ---------- la oficina: «Entregas firmadas» (Seguimiento de cobro) ---------- */
.pen-of { display: flex; flex-direction: column; gap: 12px; container-type: inline-size; font-size: var(--fs-sm, 13px); }
.pen-of__cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; }
.pen-of__tit { display: flex; gap: 12px; align-items: center; min-width: 0; }
.pen-of__tit .pen-ic { width: 40px; height: 40px; border-radius: 14px; }
.pen-of__tit b { display: block; font-size: var(--fs-md, 15px); font-weight: 800; overflow-wrap: anywhere; }
.pen-of__tit small, .pen-of__res { display: block; margin: 2px 0 0; font-size: var(--fs-xs, 12px); color: var(--pen-tenue); line-height: 1.35; }
.pen-of__fl { display: flex; flex-wrap: wrap; gap: 6px; }
.pen-chip { min-height: 34px; max-width: 100%; padding: 0 14px; border-radius: 999px; border: 1px solid var(--pen-linea); background: transparent; color: var(--pen-tenue); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; overflow-wrap: anywhere; transition: background .2s, color .2s, border-color .2s; }
.pen-chip.is-on { background: var(--pen-pri); border-color: var(--pen-pri); color: #fff; }
.pen-of__d { display: flex; flex-direction: column; gap: 8px; }
.pen-of__dh { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 6px 0 0; font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--pen-tenue); }
.pen-of__dh small { font-size: 12.5px; letter-spacing: 0; text-transform: none; font-weight: 800; color: var(--pen-tinta); font-variant-numeric: tabular-nums; }
.pen-of__ls { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pen-of__g { min-width: 0; border-radius: 18px; border: 1px solid var(--pen-linea); background: var(--pen-campo); overflow: hidden; }
.pen-of__g.is-conf { border-color: rgba(var(--pen-mal), .4); }
.pen-of__fila { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'th q' 'ac ac'; gap: 10px 12px; align-items: center; padding: 12px; }
.pen-of__fila > :first-child:not(.pen-of__q) { grid-area: th; }
.pen-of[data-v='C'] .pen-of__fila { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'q' 'ac'; }
.pen-of__ic { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; background: rgba(var(--pen-az), .1); color: var(--pen-azul-txt); }
[data-theme='dark'] .pen-of__ic { background: rgba(143, 180, 255, .13); }
.pen-of__q { grid-area: q; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pen-of__m { font-size: 17px; letter-spacing: -.01em; }
.pen-of__de { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 13.5px; line-height: 1.3; }
.pen-of__de b { font-weight: 700; overflow-wrap: anywhere; }
.pen-of__de i { display: inline-flex; color: var(--pen-suave); }
.pen-of__q small { font-size: 12.5px; color: var(--pen-tenue); line-height: 1.4; overflow-wrap: anywhere; }
.pen-of__s::before { content: ' · '; }
.pen-of__h:empty + .pen-of__s::before { content: none; }
.pen-of__ac { grid-area: ac; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pen-of__fi { grid-area: th; width: 92px; height: 54px; border-radius: 12px; border: 1px solid var(--pen-linea); background: var(--pen-papel); display: grid; place-items: center; overflow: hidden; font-size: 11px; font-weight: 700; color: #93a0b8; text-align: center; }
.pen-of__fi img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pen-of__svs { list-style: none; margin: 0; padding: 0 12px 8px; border-top: 1px dashed var(--pen-linea); }
.pen-of__sv { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 7px 0; border-bottom: 1px solid var(--pen-linea); }
.pen-of__sv:last-child { border-bottom: 0; }
.pen-of__svt { flex: 1 1 140px; min-width: 0; overflow-wrap: anywhere; color: var(--pen-tenue); }
.pen-of__nota { display: flex; gap: 6px; align-items: flex-start; margin: 0; padding: 0 12px 10px; font-size: 12.5px; color: var(--pen-tenue); line-height: 1.4; }
.pen-of__nota svg { flex: none; margin-top: 2px; }
.pen-of__nota span { min-width: 0; overflow-wrap: anywhere; }
.pen-of__conf { padding: 12px; border-top: 1px solid rgba(var(--pen-mal), .28); background: rgba(var(--pen-mal), .08); display: flex; flex-direction: column; gap: 8px; }
.pen-of__conf p { margin: 0; font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
.pen-of__conf-ac { display: flex; flex-wrap: wrap; gap: 8px; }
.pen-of__vacio { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 16px; border-radius: 18px; border: 1.5px dashed var(--pen-linea); text-align: center; color: var(--pen-tenue); }
.pen-of__vacio b { color: var(--pen-tinta); font-size: var(--fs-md, 15px); }
.pen-of__vacio small { max-width: 44ch; font-size: var(--fs-xs, 12px); line-height: 1.45; }
.pen-of__pie { margin: 0; font-size: var(--fs-xs, 12px); color: var(--pen-tenue); }
.pen-of__th { display: none; }
@container (min-width: 520px) {
  .pen-of__fila { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'th q ac'; }
  .pen-of[data-v='C'] .pen-of__fila { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'q ac'; }
  .pen-of__ac { justify-content: flex-end; }
}
/* C · una tabla: una sola caja con renglones y columnas (hora · quién entrega y recibe · servicio · monto · acciones) */
.pen-of[data-v='C'] .pen-of__ls { gap: 0; border: 1px solid var(--pen-linea); border-radius: 18px; overflow: hidden; }
.pen-of[data-v='C'] .pen-of__g { border: 0; border-bottom: 1px solid var(--pen-linea); border-radius: 0; background: transparent; }
.pen-of[data-v='C'] .pen-of__g:last-child { border-bottom: 0; }
.pen-of[data-v='C'] .pen-of__g.is-conf { background: rgba(var(--pen-mal), .05); }
@container (min-width: 700px) {
  .pen-of[data-v='C'] .pen-of__th, .pen-of[data-v='C'] .pen-of__fila { display: grid; grid-template-columns: 82px minmax(0, 1.25fr) minmax(0, 1.5fr) 118px auto; grid-template-areas: none; column-gap: 12px; align-items: center; }
  .pen-of[data-v='C'] .pen-of__fila { padding: 12px 14px; }
  .pen-of[data-v='C'] .pen-of__th { padding: 8px 15px; margin-top: -2px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--pen-tenue); }
  .pen-of[data-v='C'] .pen-of__th span:nth-child(4) { text-align: right; }
  .pen-of[data-v='C'] .pen-of__q, .pen-of[data-v='C'] .pen-of__q small { display: contents; }
  .pen-of[data-v='C'] .pen-of__h { grid-column: 1; grid-row: 1; font-size: 12.5px; color: var(--pen-tenue); }
  .pen-of[data-v='C'] .pen-of__de { grid-column: 2; grid-row: 1; }
  .pen-of[data-v='C'] .pen-of__s { grid-column: 3; grid-row: 1; font-size: 12.5px; color: var(--pen-tenue); min-width: 0; overflow-wrap: anywhere; }
  .pen-of[data-v='C'] .pen-of__s::before { content: none; }
  .pen-of[data-v='C'] .pen-of__m { grid-column: 4; grid-row: 1; text-align: right; font-size: 15px; }
  .pen-of[data-v='C'] .pen-of__ac { grid-column: 5; grid-row: 1; grid-area: auto; }
  .pen-of[data-v='C'] .pen-of__d + .pen-of__d > .pen-of__th { display: none; }
}
@container (max-width: 699px) { .pen-of[data-v='C'] .pen-of__th { display: none; } }
@container (max-width: 360px) {
  .pen-of__m { font-size: 16px; }
  .pen-of__fi { width: 76px; height: 48px; }
  .pen-chip { padding: 0 11px; }
}
/* «Ver firma»: el recibo con la firma sobre papel */
.pen-of-modal .pen-ojal { margin-top: 2px; }
.pen-of-modal .pen-hsub { margin: 2px 0 8px; padding-right: 46px; }
.pen-of__papel { min-height: 150px; padding: 10px; border-radius: 18px; border: 1px solid var(--pen-linea); background: var(--pen-papel); display: grid; place-items: center; color: #5b6880; }
.pen-of__fimg { display: block; width: 100%; max-width: 100%; height: auto; max-height: 280px; object-fit: contain; }
.pen-of__mc { display: flex; gap: 8px; align-items: center; margin: 0; padding: 12px; font-size: 13.5px; font-weight: 700; text-align: center; line-height: 1.4; }
.pen-of__mls { list-style: none; margin: 8px 0 0; padding: 0; }
.pen-of__mls li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--pen-linea); font-size: 13.5px; }
.pen-of__mls li span { min-width: 0; overflow-wrap: anywhere; color: var(--pen-tenue); }
.pen-of-modal .pen-of__nota { padding: 8px 0 0; }
.pen-of__mpie { margin-top: 12px; display: flex; }
.pen-of__mpie .pen-bt { width: 100%; }
@media (prefers-reduced-motion: reduce) { .pen-chip { transition: none !important; } }