/* Comprobante (9/10/2026, planes/comprobante-2026-10-09, fase 2). Al tocarlo, el botón muestra una ruedita
   y una línea abajo que avanza con el trabajo real; al terminar se pinta con un tilde y abre el visor tipo
   foto de WhatsApp Web (10/10/2026: Feli cambió la barra llena y el «plop» por esto; muestrario en
   planes/comprobante-2026-10-09/animaciones/). Patrones de catálogo: botón con progreso
   (@coss/p-button-40) y vista previa de imagen en modal (21st «Image Preview»). */
.comp-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:30px;padding:5px 12px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--navy-deep);
  font:inherit;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;
  transition:background .15s ease,border-color .15s ease,transform .15s ease}
.comp-btn:hover{background:var(--line2);border-color:var(--accent)}
.comp-btn:active{transform:scale(.97)}
.comp-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.comp-btn.comp-chico{min-height:26px;padding:3px 9px;font-size:11.5px}
.comp-btn-t{display:inline-block;transition:opacity .16s cubic-bezier(.22,1,.36,1),transform .16s cubic-bezier(.22,1,.36,1),filter .16s cubic-bezier(.22,1,.36,1)}
/* Sin cursor de «cargando»: lo que trabaja es el botón, no la página (Feli, 10/10/2026). */
.comp-btn[disabled]{cursor:default}
.comp-ic{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:scale(.9);pointer-events:none;
  transition:opacity .16s cubic-bezier(.22,1,.36,1),transform .2s cubic-bezier(.22,1,.36,1)}
.comp-rueda,.comp-tilde{grid-area:1/1;width:16px;height:16px}
.comp-rueda{animation:comp-gira .7s linear infinite;transition:opacity .1s}
.comp-rueda circle{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:28 60}
.comp-tilde path{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20;stroke-dashoffset:20;
  transition:stroke-dashoffset .24s cubic-bezier(.22,1,.36,1) .04s}
@keyframes comp-gira{to{transform:rotate(360deg)}}
.comp-bar{position:absolute;left:0;right:0;bottom:0;height:2px;opacity:0;transition:opacity .2s;pointer-events:none}
.comp-bar i{position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left center;
  transition:transform .35s cubic-bezier(.22,1,.36,1)}
.comp-btn.comp-espera .comp-bar i{transition:transform 1.6s cubic-bezier(.1,.7,.3,1)}
.comp-btn.comp-cargando{border-color:var(--accent)}
.comp-btn.comp-cargando .comp-btn-t{opacity:0;transform:translateY(-4px);filter:blur(2px)}
.comp-btn.comp-cargando .comp-ic,.comp-btn.comp-cargando .comp-bar{opacity:1;transform:none}
.comp-btn.comp-listo{background:var(--accent);border-color:var(--accent)}
.comp-btn.comp-listo .comp-rueda{opacity:0}
.comp-btn.comp-listo .comp-tilde path{stroke-dashoffset:0}
.comp-btn.comp-listo .comp-bar{opacity:0;transition:opacity .2s .1s}

/* En «Lo que pasó» va en su propia columna, a la derecha del monto (Feli, 10/10/2026): abajo de la
   etiqueta de estado quedaba amontonado. La columna existe aunque la fila no tenga comprobante, para
   que los montos de todas las filas queden alineados. */
.fi-dia .fd-mv{grid-template-columns:62px 1fr 128px 112px 118px 128px}
.fi-dia .fd-comp{display:flex;justify-content:flex-end}
@media(max-width:640px){
  .fi-dia .fd-mv{grid-template-columns:1fr auto}
  .fi-dia .fd-comp{grid-column:1/-1}
  .fi-dia .fd-comp:empty{display:none}
}


.comp-visor{position:fixed;inset:0;z-index:1250;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  padding:24px 16px;background:rgba(19,36,59,.88);animation:comp-fondo .2s ease-out}
.comp-hoja{max-height:calc(100vh - 120px);overflow:auto;border-radius:20px;box-shadow:0 24px 70px rgba(0,0,0,.35);
  animation:comp-sale .34s cubic-bezier(.2,.9,.25,1.2)}
.comp-img{display:block;width:380px;max-width:calc(100vw - 32px);height:auto;border-radius:20px}
.comp-acc{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.comp-a{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:9px 16px;border-radius:11px;border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.1);color:#fff;font:inherit;font-size:13px;font-weight:700;cursor:pointer;
  transition:background .15s ease,border-color .15s ease,transform .15s ease}
.comp-a:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.5)}
.comp-a:active{transform:scale(.97)}
.comp-a:focus-visible{outline:2px solid #fff;outline-offset:2px}
.comp-a-pdf{background:var(--accent);border-color:var(--accent)}
.comp-a-pdf:hover{background:var(--navy-deep);border-color:var(--navy-deep)}
.comp-envio{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 12px;max-width:380px;
  color:rgba(255,255,255,.82);font-size:12.5px;font-weight:600;line-height:1.45;text-align:center}
.comp-envio-ok::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
.comp-envio-b{min-height:32px;padding:6px 12px;border-radius:9px;border:1px solid rgba(255,255,255,.5);background:transparent;color:#fff;
  font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.comp-envio-b:hover{background:rgba(255,255,255,.1)}
.comp-envio-b:disabled{opacity:.6;cursor:default}
.comp-envio-b:focus-visible{outline:2px solid #fff;outline-offset:2px}
@keyframes comp-fondo{from{opacity:0}to{opacity:1}}
@keyframes comp-sale{0%{transform:scale(.86);opacity:0}100%{transform:scale(1);opacity:1}}
@media (max-width:480px){.comp-a{flex:1 1 auto;justify-content:center}.comp-hoja{max-height:calc(100vh - 170px)}}
@media (prefers-reduced-motion:reduce){.comp-visor,.comp-hoja,.comp-rueda{animation:none}.comp-bar i,.comp-btn,.comp-a,.comp-btn-t,.comp-ic,.comp-tilde path{transition:none}}