/**
 * miniSYS-HGP — Botón de passkey (login, perfil, PIN/ops, carnet, GAUD).
 *
 * 58.30 — El CSS global de botones (max-content, padding 5px) aplastaba
 * este control. Aquí se redibuja a ancho completo, 56px de alto, marca
 * navy y texto que envuelve. Safari: 100vh no aplica; color sólido
 * antes de color-mix; overlay no usa inset. Inputs no van aquí.
 * Se recarga al pie del layout, después de minisys-btn-square.css.
 *
 * 58.78 — button[class*="passkey"]:not([class*="-del"]) NO incluye los de borrar
 * (.pf-passkey-del, .gaud-passkey-del): esos iban a 100% / 56px
 * y tapaban la lista de llaves. Los CTA (.ms-passkey-btn y portal)
 * siguen con este dibujo.
 */
.ms-passkey-btn,
.lg-passkey-btn,
.ops-auth-passkey,
.cp-auth-passkey,
.pf-btn-passkey,
.gaud-gate-passkey-btn,
.gaud-pk-btn,
.func-auth-passkey,
button[class*="passkey"]:not([class*="-del"]) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 56px !important;
    padding: 8px 12px 8px 8px !important;
    margin: 0 0 10px !important;
    box-sizing: border-box;
    border-radius: 16px !important;
    border: 1.5px solid #c5d7e8 !important;
    background: #ffffff !important;
    color: #0f172a !important;
    box-shadow: 0 10px 28px rgba(0, 61, 102, 0.12) !important;
    font-family: inherit !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    white-space: normal !important;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.ms-passkey-btn:hover:not(:disabled),
.lg-passkey-btn:hover:not(:disabled),
.ops-auth-passkey:hover:not(:disabled),
.cp-auth-passkey:hover:not(:disabled),
.pf-btn-passkey:hover:not(:disabled),
.gaud-gate-passkey-btn:hover:not(:disabled),
.gaud-pk-btn:hover:not(:disabled),
.func-auth-passkey:hover:not(:disabled),
button[class*="passkey"]:not([class*="-del"]):hover:not(:disabled) {
    border-color: #00609c !important;
    box-shadow: 0 14px 32px rgba(0, 61, 102, 0.18) !important;
    transform: translateY(-1px);
    filter: none !important;
    background: #f4f9fd !important;
}

.ms-passkey-btn:focus-visible,
.lg-passkey-btn:focus-visible,
.ops-auth-passkey:focus-visible,
.cp-auth-passkey:focus-visible,
.pf-btn-passkey:focus-visible,
.gaud-gate-passkey-btn:focus-visible,
button[class*="passkey"]:not([class*="-del"]):focus-visible {
    outline: 2px solid #00609c;
    outline-offset: 3px;
}

.ms-passkey-btn:disabled,
.lg-passkey-btn:disabled,
.ops-auth-passkey:disabled,
.pf-btn-passkey:disabled,
.gaud-gate-passkey-btn:disabled,
button[class*="passkey"]:not([class*="-del"]):disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none !important;
}

.lg-passkey-icon,
.ops-auth-passkey-icon,
.cp-auth-passkey-icon,
.pf-btn-passkey-icon,
.gaud-gate-passkey-icon,
.ms-passkey-icon,
button[class*="passkey"]:not([class*="-del"]) [class*="passkey-icon"] {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 12px !important;
    background: #005a9e !important;
    background: linear-gradient(145deg, #0072b8 0%, #003d66 100%) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.15rem !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    box-shadow: 0 6px 14px rgba(0, 61, 102, 0.32) !important;
}

.lg-passkey-icon i,
.ops-auth-passkey-icon i,
.cp-auth-passkey-icon i,
.pf-btn-passkey-icon i,
.gaud-gate-passkey-icon i,
.ms-passkey-icon i,
.ms-passkey-btn > i.fa-fingerprint {
    width: auto !important;
    font-size: 1.15rem !important;
    color: #fff !important;
    line-height: 1 !important;
}

.lg-passkey-text,
.ops-auth-passkey-copy,
.cp-auth-passkey-copy,
.pf-btn-passkey-copy,
.gaud-gate-passkey-text,
.ms-passkey-copy,
button[class*="passkey"]:not([class*="-del"]) [class*="passkey-copy"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 2px;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    color: inherit !important;
}

.lg-passkey-text strong,
.ops-auth-passkey-copy strong,
.cp-auth-passkey-copy strong,
.pf-btn-passkey-copy strong,
.gaud-gate-passkey-text strong,
.ms-passkey-copy strong,
button[class*="passkey"]:not([class*="-del"]) [class*="passkey-copy"] strong {
    display: block;
    font-size: 0.95rem !important;
    font-weight: 650 !important;
    letter-spacing: -0.01em;
    color: #0f172a !important;
    white-space: normal !important;
}

.lg-passkey-text small,
.ops-auth-passkey-copy small,
.cp-auth-passkey-copy small,
.pf-btn-passkey-copy small,
.gaud-gate-passkey-text small,
.ms-passkey-copy small,
button[class*="passkey"]:not([class*="-del"]) [class*="passkey-copy"] small {
    display: block;
    font-size: 0.72rem !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    color: #64748b !important;
    opacity: 1 !important;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.lg-passkey-arrow,
.gaud-gate-passkey-arrow,
.ms-passkey-chevron {
    margin-left: auto;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 999px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #e8f1f8;
    color: #00609c !important;
    font-size: 0.72rem !important;
    flex-shrink: 0 !important;
}

.lg-passkey-first {
    margin-bottom: 6px;
}

.lg-passkey-hint,
.gaud-gate-hint {
    margin: 8px 2px 0;
    font-size: 0.78rem;
    color: #64748b;
    line-height: 1.45;
}

@media (max-width: 480px) {
    .ms-passkey-btn,
    .lg-passkey-btn,
    .ops-auth-passkey,
    .cp-auth-passkey,
    .pf-btn-passkey,
    .gaud-gate-passkey-btn,
    button[class*="passkey"]:not([class*="-del"]) {
        min-height: 52px !important;
        padding: 8px 10px 8px 8px !important;
        gap: 10px !important;
    }
    .lg-passkey-icon,
    .ops-auth-passkey-icon,
    .cp-auth-passkey-icon,
    .pf-btn-passkey-icon,
    .gaud-gate-passkey-icon,
    .ms-passkey-icon {
        width: 44px !important;
        height: 44px !important;
    }
}