/* Mobile UX base for ALVIS loan system. Additive and scoped to mobile-first fixes. */
:root {
    --ux-mobile-gap: 0.75rem;
    --ux-mobile-tap: 46px;
    --ux-mobile-radius: 16px;
    --ux-mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

img,
video,
canvas,
iframe {
    max-width: 100%;
}

.ux-mobile-only {
    display: none !important;
}

.ux-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ux-table-scroll-ready {
    position: relative;
}

.ux-table-scroll-ready.ux-has-horizontal-scroll::after {
    content: '';
    position: sticky;
    right: 0;
    display: block;
    float: right;
    width: 34px;
    height: 100%;
    min-height: 42px;
    margin-left: -34px;
    pointer-events: none;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.92));
}

@media (pointer: coarse) {
    a,
    button,
    .btn,
    [role="button"],
    .dropdown-item,
    .nav-link {
        touch-action: manipulation;
    }
}

@media (max-width: 767.98px) {
    .ux-desktop-only {
        display: none !important;
    }

    .ux-mobile-only {
        display: initial !important;
    }

    .ux-mobile-stack {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--ux-mobile-gap) !important;
        align-items: stretch !important;
    }

    .ux-mobile-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.55rem !important;
    }

    .ux-mobile-actions .btn,
    .ux-mobile-actions button,
    .ux-mobile-actions a.btn {
        width: 100% !important;
        justify-content: center !important;
    }

    .main-container,
    .container-main,
    .admin-container,
    .dashboard-container,
    .prestamo-container,
    .page-container {
        max-width: 100% !important;
        padding-left: clamp(0.75rem, 3vw, 1rem) !important;
        padding-right: clamp(0.75rem, 3vw, 1rem) !important;
    }

    .card-custom,
    .form-section,
    .view-section,
    .table-card,
    .clients-card,
    .sidebar-widget {
        border-radius: var(--ux-mobile-radius) !important;
    }

    .table-responsive,
    .table-card {
        -webkit-overflow-scrolling: touch;
    }

    .table-header,
    .page-header-content,
    .header-top,
    .header-actions,
    .filters-row,
    .controls-search-row,
    .controls-actions {
        min-width: 0;
    }

    .table-header {
        align-items: stretch !important;
        gap: 0.75rem !important;
    }

    .search-box,
    .control-search,
    .controls-search-row .input-wrap {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .filter-info {
        width: 100%;
        justify-content: space-between;
        border-radius: 12px !important;
    }

    .scroll-hint.ux-card-table-hidden-hint {
        display: none !important;
    }

    .btn-header,
    .header-actions .btn,
    .controls-actions .btn {
        min-height: var(--ux-mobile-tap);
    }

    .upload-area,
    .upload-area-modern,
    .planilla-upload-area,
    .pw-upload-area,
    .doc-card,
    .client-doc-card {
        min-height: 120px;
        -webkit-tap-highlight-color: rgba(30, 64, 175, 0.12);
        touch-action: manipulation;
    }

    .upload-area,
    .upload-area-modern,
    .planilla-upload-area,
    .pw-upload-area {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 1.25rem !important;
        text-align: center;
    }

    .upload-area:active,
    .upload-area-modern:active,
    .planilla-upload-area:active,
    .pw-upload-area:active {
        transform: scale(0.99);
    }

    .steps-progress,
    .progress-steps,
    .pw-step-progress {
        overflow-x: auto;
        justify-content: flex-start !important;
        padding: 0.25rem 0.25rem 0.75rem !important;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .steps-progress > *,
    .progress-steps > *,
    .pw-step-progress > * {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .navigation-buttons,
    .action-buttons-container,
    .correction-actions,
    .pw-actions,
    .loan-actions,
    .document-actions,
    .client-doc-actions,
    .guarantor-upload-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.65rem !important;
    }

    .navigation-buttons .btn,
    .action-buttons-container .btn,
    .correction-actions .btn,
    .pw-actions .btn,
    .loan-actions .btn,
    .document-actions .btn,
    .client-doc-actions .btn,
    .guarantor-upload-actions .btn,
    .btn-ver-detalle {
        width: 100% !important;
        min-height: var(--ux-mobile-tap);
        justify-content: center !important;
    }

    .toast-notification {
        left: 0.75rem !important;
        right: 0.75rem !important;
        width: auto !important;
        max-width: none !important;
    }

    .table-responsive[tabindex="0"]:focus-visible {
        outline: 2px solid var(--primary-color, #1e40af);
        outline-offset: 2px;
    }

    table[data-mobile-cards],
    table.ux-mobile-card-table {
        min-width: 0 !important;
        width: 100% !important;
        border-collapse: separate !important;
        border-spacing: 0 0.75rem !important;
    }

    table[data-mobile-cards] thead,
    table.ux-mobile-card-table thead {
        display: none !important;
    }

    table[data-mobile-cards] tbody,
    table[data-mobile-cards] tr,
    table[data-mobile-cards] td,
    table.ux-mobile-card-table tbody,
    table.ux-mobile-card-table tr,
    table.ux-mobile-card-table td {
        display: block !important;
        width: 100% !important;
    }

    table[data-mobile-cards] tbody tr,
    table.ux-mobile-card-table tbody tr {
        margin: 0 0 0.75rem !important;
        padding: 0.85rem !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: var(--ux-mobile-radius) !important;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.07) !important;
    }

    table[data-mobile-cards] tbody tr.no-results-row,
    table.ux-mobile-card-table tbody tr.no-results-row {
        padding: 0 !important;
        box-shadow: none !important;
        border: 0 !important;
    }

    table[data-mobile-cards] tbody td,
    table.ux-mobile-card-table tbody td {
        border: 0 !important;
        padding: 0.45rem 0 !important;
        display: grid !important;
        grid-template-columns: minmax(96px, 38%) minmax(0, 1fr) !important;
        gap: 0.7rem !important;
        align-items: start !important;
    }

    table[data-mobile-cards] tbody td::before,
    table.ux-mobile-card-table tbody td::before {
        content: attr(data-label);
        color: #64748b;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        line-height: 1.35;
        text-transform: uppercase;
    }

    table[data-mobile-cards] tbody td[data-label=""],
    table.ux-mobile-card-table tbody td[data-label=""] {
        grid-template-columns: 1fr !important;
    }

    table[data-mobile-cards] tbody td[data-label=""]::before,
    table.ux-mobile-card-table tbody td[data-label=""]::before {
        content: none !important;
    }

    table[data-mobile-cards] tbody td[data-mobile-primary],
    table.ux-mobile-card-table tbody td[data-mobile-primary] {
        grid-template-columns: 1fr !important;
        padding-bottom: 0.65rem !important;
        border-bottom: 1px solid #e2e8f0 !important;
        margin-bottom: 0.35rem !important;
    }

    table[data-mobile-cards] tbody td[data-mobile-primary]::before,
    table.ux-mobile-card-table tbody td[data-mobile-primary]::before {
        content: none !important;
    }

    table[data-mobile-cards] tbody td[data-mobile-actions],
    table.ux-mobile-card-table tbody td[data-mobile-actions] {
        grid-template-columns: 1fr !important;
        padding-top: 0.7rem !important;
        margin-top: 0.35rem !important;
        border-top: 1px solid #e2e8f0 !important;
    }

    table[data-mobile-cards] tbody td[data-mobile-actions]::before,
    table.ux-mobile-card-table tbody td[data-mobile-actions]::before {
        content: none !important;
    }

    table[data-mobile-cards] .action-buttons,
    table.ux-mobile-card-table .action-buttons {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.45rem !important;
    }

    table[data-mobile-cards] .action-buttons .btn,
    table.ux-mobile-card-table .action-buttons .btn {
        width: 100% !important;
        justify-content: center !important;
    }
}

@media (max-width: 575.98px) {
    body {
        overflow-x: hidden;
    }

    .navbar-custom {
        padding: 0.55rem 0.75rem !important;
    }

    .navbar-custom .container-fluid {
        gap: 0.5rem;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .navbar-custom .navbar-brand {
        min-width: 0;
        max-width: calc(100% - 54px);
    }

    .navbar-custom .navbar-brand span {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.92rem;
    }

    .navbar-custom .navbar-toggler {
        width: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
    }

    .navbar-custom .navbar-collapse {
        max-height: calc(100dvh - 68px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-top: 0.65rem;
    }

    .navbar-custom .navbar-nav {
        align-items: stretch !important;
        gap: 0.35rem;
    }

    .navbar-custom .nav-link {
        min-height: var(--ux-mobile-tap);
        display: flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0.68rem 0.85rem !important;
        border-radius: 12px !important;
    }

    .navbar-custom .btn.btn-logout,
    .navbar-custom .btn.btn-password {
        width: 100%;
        min-height: var(--ux-mobile-tap);
        justify-content: center;
        margin-top: 0.25rem;
    }

    #notifDropdownMenu,
    .online-clients-menu {
        position: fixed !important;
        left: 0.75rem !important;
        right: 0.75rem !important;
        top: 68px !important;
        width: auto !important;
        max-width: none !important;
        max-height: calc(100dvh - 88px);
        transform: none !important;
    }

    #notifList,
    .online-clients-list {
        max-height: calc(100dvh - 160px) !important;
    }

    .btn,
    button.btn,
    a.btn,
    .form-control,
    .form-select,
    .input-group-text,
    .dropdown-item {
        min-height: var(--ux-mobile-tap);
    }

    .form-control,
    .form-select {
        font-size: 16px !important;
    }

    textarea.form-control {
        min-height: 108px;
    }

    .form-check-input {
        width: 1.25rem;
        height: 1.25rem;
    }

    .modal {
        --bs-modal-margin: 0;
    }

    .modal .modal-dialog {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 100dvh;
        margin: 0 !important;
        display: flex;
        align-items: flex-end;
    }

    .modal .modal-dialog.modal-dialog-centered {
        min-height: 100dvh;
    }

    .modal .modal-content {
        width: 100%;
        max-height: 100dvh;
        border: 0;
        border-radius: 18px 18px 0 0 !important;
        overflow: hidden;
    }

    .modal .modal-dialog-scrollable .modal-content {
        max-height: 100dvh;
    }

    .modal .modal-header {
        flex-shrink: 0;
        padding: 0.95rem 1rem;
    }

    .modal .modal-title {
        font-size: 1rem;
        line-height: 1.25;
    }

    .modal .modal-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 1rem;
    }

    .modal .modal-footer {
        position: sticky;
        bottom: 0;
        z-index: 3;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.55rem !important;
        padding: 0.85rem 1rem calc(0.85rem + var(--ux-mobile-safe-bottom)) !important;
        background: #ffffff;
        border-top: 1px solid #e2e8f0;
    }

    .modal .modal-footer > * {
        margin: 0 !important;
    }

    .modal .modal-footer .btn {
        width: 100%;
        justify-content: center;
    }

    .modal .btn-close {
        min-width: 44px;
        min-height: 44px;
        margin: -0.5rem -0.55rem -0.5rem auto;
    }

    #kycModal .modal-dialog,
    .modal-fullscreen-sm-down {
        align-items: stretch;
    }

    #kycModal .modal-content,
    .modal-fullscreen-sm-down .modal-content {
        min-height: 100dvh;
        border-radius: 0 !important;
    }

    .toast-container.position-fixed {
        left: 0.75rem !important;
        right: 0.75rem !important;
        width: auto !important;
        max-width: none !important;
        padding: 0 !important;
    }

    .toast-container.top-0 {
        top: 0.75rem !important;
    }

    .toast-container.bottom-0 {
        bottom: calc(0.75rem + var(--ux-mobile-safe-bottom)) !important;
    }

    .toast,
    .exception-toast-item {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .alert.position-fixed {
        left: 0.75rem !important;
        right: 0.75rem !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
    }

    .google-required-overlay,
    .custom-modal-overlay,
    .modal-mensaje,
    .loading {
        padding: 0.75rem !important;
    }

    .google-required-modal,
    .custom-modal-box,
    .modal-mensaje-dialog {
        width: 100% !important;
        max-width: none !important;
        max-height: calc(100dvh - 1.5rem);
        overflow-y: auto;
        border-radius: 18px !important;
    }

    .google-required-modal {
        padding: 1.25rem !important;
    }

    .modal-mensaje-footer {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.55rem !important;
    }

    .modal-mensaje-footer .btn {
        width: 100%;
        justify-content: center;
    }

    .client-file-modal__header {
        gap: 0.75rem !important;
    }

    .client-file-modal__header > .d-flex:last-child {
        width: 100%;
        justify-content: stretch;
        margin-left: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr auto;
        gap: 0.5rem !important;
    }

    .client-file-modal__header .btn-file-action {
        min-height: 42px;
        justify-content: center;
    }

    .client-file-viewer {
        height: calc(100dvh - 160px) !important;
        min-height: 320px !important;
    }

    .history-modal {
        max-height: 100dvh;
        display: flex;
        flex-direction: column;
    }

    .history-modal-header,
    .history-modal-footer {
        flex-shrink: 0;
    }

    .history-modal-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .history-modal-footer {
        position: sticky;
        bottom: 0;
        z-index: 3;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.6rem !important;
        padding-bottom: calc(1rem + var(--ux-mobile-safe-bottom)) !important;
        background: #ffffff;
        border-top: 1px solid #e2e8f0;
    }

    .history-modal-footer .footer-info {
        justify-content: center;
        text-align: center;
    }

    .btn-close-history,
    .history-close-btn {
        min-height: 44px;
        min-width: 44px;
    }

    .btn-close-history {
        width: 100%;
        justify-content: center;
    }

    .status-modal .modal-footer,
    .approved-modal-footer {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.55rem !important;
    }

    .status-modal .modal-footer .btn,
    .approved-modal-footer .btn,
    .approved-card-actions .btn {
        width: 100% !important;
        justify-content: center !important;
    }

    .disburse-modal .disburse-header,
    .disburse-modal .client-line {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    .disburse-modal .status-chip,
    .disburse-modal .code-badge,
    .disburse-modal .dni {
        white-space: normal !important;
        max-width: 100%;
    }

    .disburse-modal .amount-card {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .disburse-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.55rem !important;
    }

    .disburse-actions .btn {
        width: 100% !important;
        justify-content: center !important;
    }
}

@media (max-width: 430px) {
    table[data-mobile-cards] tbody td,
    table.ux-mobile-card-table tbody td {
        grid-template-columns: 1fr !important;
        gap: 0.22rem !important;
    }
}

@media (orientation: landscape) and (max-height: 520px) {
    .modal .modal-dialog {
        align-items: stretch;
    }

    .modal .modal-content {
        border-radius: 0 !important;
        max-height: 100dvh;
    }

    .navbar-custom .navbar-collapse {
        max-height: calc(100dvh - 58px);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}