/* ════════════════════════════════════════════════
   modal-qr-firma-puente.css — modal "Firma desde tu móvil"
   ────────────────────────────────────────────────
   QR-pairing PC↔móvil estilo WhatsApp Web. Aprobado por owner
   05-jun-2026 a partir del mockup _mockups/qr-firma-puente/01-modal-qr-pc.html.

   El partial vive en _partials/modal-qr-firma-puente.php. Se incluye
   una sola vez por página (P10 reclamar.php / firmar.php) — el
   controlador firma-puente-pc.js lo abre y lo cierra.

   Variables: hereda del form.css (--blue, --gray-*, --green*, --r-*).
==================================================== */

.qr-firma-bg {
    position: fixed;
    inset: 0;
    background: rgba(13, 13, 13, .55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500;
}

.qr-firma-modal {
    background: var(--white);
    border-radius: 24px;
    padding: 28px;
    max-width: 380px;
    width: calc(100% - 40px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
    text-align: center;
    animation: .2s cubic-bezier(.34, 1.56, .64, 1) both qrFirmaIn;
}

@keyframes qrFirmaIn {
    from { opacity: 0; transform: scale(.94); }
    to   { opacity: 1; transform: none; }
}

.qr-firma-h {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -.01em;
    margin: 0 0 6px;
    color: var(--dark);
}

.qr-firma-p {
    font-size: 13.5px;
    color: var(--gray-500);
    line-height: 1.5;
    margin: 0 0 20px;
}

.qr-firma-box {
    background: #fff;
    border: 1px solid var(--gray-100);
    border-radius: var(--r-lg);
    padding: 16px;
    display: inline-block;
    margin-bottom: 14px;
    position: relative;
}

.qr-firma-box--blur { filter: blur(2px); opacity: .6; transition: all var(--t); }

/* Contenedor del QR generado por qrcode.js (canvas o table) */
.qr-firma-img {
    width: 200px;
    height: 200px;
    display: block;
    background: #fff;
}
.qr-firma-img canvas,
.qr-firma-img img,
.qr-firma-img svg {
    display: block;
    width: 200px !important;
    height: 200px !important;
}

/* Check verde sobre QR blureado en estado "recibida" */
.qr-firma-check-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.qr-firma-check {
    background: var(--green-bg);
    color: var(--green-icon);
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(52, 168, 83, .25);
}

/* Estado debajo del QR */
.qr-firma-state-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
}
.qr-firma-state {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
}
.qr-firma-state--esperando {
    background: var(--blue-light);
    color: var(--blue);
}
.qr-firma-state--esperando .qr-firma-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--blue);
    animation: qrFirmaPulse 1.4s ease infinite;
}
@keyframes qrFirmaPulse {
    0%, 100% { transform: scale(1);   opacity: 1;  }
    50%      { transform: scale(.4);  opacity: .4; }
}
.qr-firma-state--recibida {
    background: var(--green-bg);
    color: var(--green);
}

/* ════════════════════════════════════════════════════════════════════
   Estado loading — visible hasta que el QR está renderizado.
   El modal abre con .qr-firma-modal--loading; el JS quita esta clase
   tras pintar el QR. Mientras tanto, .qr-firma-content queda oculto.
==================================================================== */
.qr-firma-loading-block {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    min-height: 280px;
}
.qr-firma-modal--loading .qr-firma-loading-block { display: flex; }
.qr-firma-modal--loading .qr-firma-content      { display: none; }

.qr-firma-spinner svg { animation: qrFirmaSpin 1s linear infinite; }
@keyframes qrFirmaSpin { to { transform: rotate(360deg); } }
.qr-firma-loading-txt {
    margin-top: 16px;
    font-size: 13.5px;
    color: var(--gray-500);
    font-weight: 500;
}

/* Botones */
.qr-firma-btns {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.qr-firma-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 13px 22px;
    border-radius: var(--r-md);
    font-size: 14.5px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: all var(--t);
}
.qr-firma-btn--s {
    background: var(--white);
    color: var(--dark);
    border: 1.5px solid var(--gray-200);
}
.qr-firma-btn--s:hover {
    border-color: var(--gray-300);
    background: var(--gray-50);
}

/* Mostrar solo un estado a la vez */
.qr-firma-state-block { display: none; }
.qr-firma-state-block--show { display: block; }

/* ════════════════════════════════════════════════════════════════════
   Banner "Firma desde tu móvil" — SOLO ESCRITORIO
   ────────────────────────────────────────────────────────────────────
   Owner 5-jun-2026: maqueta IDÉNTICA al .doc-preview de arriba
   ("Documento de autorización") — mismo fondo gris claro, mismo borde
   gris sutil, mismo icono cuadrado azul claro a la izquierda, y CTA
   tipo .btn-pdf a la derecha con icono A LA IZQUIERDA del texto.
   Diferencia con .doc-preview: este componente es clickeable (es un
   <button>) y solo aparece en PC con mouse.
==================================================================== */
.qr-firma-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: var(--r-lg, 16px);
    background: var(--gray-50, #F8F8FA);
    border: 1px solid var(--gray-100, #F2F2F7);
    margin-bottom: 14px;
    cursor: pointer;
    transition: border-color var(--t, .18s ease), background var(--t, .18s ease);
    font-family: inherit;
    text-align: left;
    width: 100%;
    color: inherit;
}
.qr-firma-banner:hover {
    background: #fff;
    border-color: var(--gray-200, #D1D1D6);
}

/* Icono cuadrado azul claro a la izquierda — idéntico al .doc-icon. */
.qr-firma-banner__ico {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--blue-light, #E8F0FE);
    color: var(--blue, #1A73E8);
    display: flex;
    align-items: center;
    justify-content: center;
}

.qr-firma-banner__txt {
    flex: 1;
    min-width: 0;
}
/* Título arriba bold + descripción gris debajo (apilados). */
.qr-firma-banner__title {
    display: block;
    font-weight: 600;
    font-size: 15px;
    color: var(--dark, #0D0D0D);
    line-height: 1.3;
    margin-bottom: 3px;
}
.qr-firma-banner__desc {
    display: block;
    font-size: 13px;
    color: var(--gray-500, #636366);
    line-height: 1.4;
}

/* CTA a la derecha — estilo .btn-pdf: fondo azul claro, icono a la
   IZQUIERDA del texto, padding pill, border 1.5px del mismo color de fondo. */
.qr-firma-banner__cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--blue, #1A73E8);
    background: #EEF4FE;
    border: 1.5px solid #EEF4FE;
    padding: 5px 10px;
    border-radius: 8px;
    white-space: nowrap;
    transition: all .15s;
    margin-left: auto;
}
.qr-firma-banner:hover .qr-firma-banner__cta {
    background: var(--blue, #1A73E8);
    color: #fff;
    border-color: var(--blue, #1A73E8);
}

/* SOLO ESCRITORIO. En móvil/tablet/dispositivos táctiles: nunca. */
@media (max-width: 1023px),
       (hover: none),
       (pointer: coarse) {
    .qr-firma-banner { display: none !important; }
}