:root{
    --qe-navy:#0b1f4d;
    --qe-navy-2:#132f70;
    --qe-yellow:#f6b80f;
    --qe-blue:#2f6fed;
    --qe-cyan:#16a3d8;
    --qe-green:#20a464;
    --qe-red:#e34b5f;
    --qe-amber:#e99a20;
    --qe-purple:#7759d8;
    --qe-bg:#f5f7fb;
    --qe-card:#ffffff;
    --qe-text:#172033;
    --qe-muted:#7a8599;
    --qe-border:#e7ebf2;
    --qe-shadow:0 18px 50px rgba(20,38,74,.08);
}

*{box-sizing:border-box}
html,body{min-height:100%}
body{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--qe-text);background:var(--qe-bg)}
a{text-decoration:none}
button,input,select,textarea{font:inherit}

/* LOGIN */
.LoginBody{margin:0;background:#071734;overflow-x:hidden}
.LoginGlow{position:fixed;border-radius:999px;filter:blur(1px);pointer-events:none;opacity:.65}
.LoginGlowOne{width:520px;height:520px;left:-180px;top:-160px;background:radial-gradient(circle,rgba(47,111,237,.35),transparent 68%)}
.LoginGlowTwo{width:520px;height:520px;right:-160px;bottom:-180px;background:radial-gradient(circle,rgba(246,184,15,.23),transparent 68%)}
.LoginShell{position:relative;z-index:1;min-height:100vh;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(440px,.85fr)}
.LoginVisual{padding:48px 64px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;background:
    linear-gradient(135deg,rgba(11,31,77,.98),rgba(14,42,99,.94)),
    radial-gradient(circle at 80% 20%,rgba(246,184,15,.22),transparent 32%)}
.LoginVisual:after{content:"";position:absolute;width:520px;height:520px;border:1px solid rgba(255,255,255,.08);border-radius:50%;right:-190px;top:110px;box-shadow:0 0 0 70px rgba(255,255,255,.025),0 0 0 140px rgba(255,255,255,.018)}
.LoginBrandBadge{display:flex;align-items:center;gap:14px;position:relative;z-index:1}
.LoginBrandIcon{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:var(--qe-yellow);color:var(--qe-navy);font-size:22px;box-shadow:0 12px 30px rgba(246,184,15,.22)}
.LoginBrandBadge strong{display:block;font-size:20px;line-height:1.1}.LoginBrandBadge small{display:block;color:rgba(255,255,255,.6);margin-top:3px}
.LoginHeroCopy{max-width:690px;position:relative;z-index:1}.Eyebrow,.DashboardHeroEyebrow,.PanelEyebrow,.HeaderEyebrow{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.Eyebrow{display:inline-flex;color:#f8ca48;margin-bottom:20px}.EyebrowDark{color:var(--qe-blue);margin-bottom:9px}
.LoginHeroCopy h1{font-size:clamp(42px,5vw,72px);line-height:1.02;letter-spacing:-.045em;font-weight:850;max-width:760px;margin:0 0 24px}
.LoginHeroCopy>p{font-size:18px;line-height:1.65;color:rgba(255,255,255,.68);max-width:620px;margin-bottom:34px}
.LoginFeatureGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:620px}.LoginFeatureGrid div{display:flex;align-items:center;gap:11px;padding:14px 15px;border:1px solid rgba(255,255,255,.10);border-radius:16px;background:rgba(255,255,255,.055);backdrop-filter:blur(8px);font-size:14px;color:rgba(255,255,255,.82)}.LoginFeatureGrid i{color:#f6c443;font-size:18px}
.LoginVisualFooter{position:relative;z-index:1;color:rgba(255,255,255,.42);font-size:12px}
.LoginPanel{background:#f7f9fd;display:flex;align-items:center;justify-content:center;padding:54px}
.LoginCard{width:min(100%,480px);background:#fff;border:1px solid rgba(218,225,237,.85);border-radius:28px;padding:44px;box-shadow:0 30px 80px rgba(23,32,51,.11)}
.LoginCard h2{font-size:34px;letter-spacing:-.03em;font-weight:820;margin:0 0 7px}.LoginMobileBrand{align-items:center;gap:10px;margin-bottom:30px}.LoginMobileBrand span{width:38px;height:38px;border-radius:12px;background:var(--qe-yellow);display:grid;place-items:center;color:var(--qe-navy)}
.FormFieldModern label{display:block;font-size:12px;font-weight:800;margin-bottom:8px;color:#39445a}.InputIconWrap{height:54px;display:flex;align-items:center;gap:11px;border:1px solid #dfe5ef;border-radius:15px;padding:0 14px;background:#fbfcfe;transition:.2s}.InputIconWrap:focus-within{border-color:#7ea2f3;box-shadow:0 0 0 4px rgba(47,111,237,.09);background:#fff}.InputIconWrap>i{color:#8d99ae;font-size:18px}.InputIconWrap input{border:0;outline:0;background:transparent;flex:1;min-width:0;color:var(--qe-text)}.InputIconWrap input::placeholder{color:#aab2c1}.BtnPasswordToggle{border:0;background:transparent;color:#8793a8;padding:4px}
.LoginRemember{color:#657087;display:flex;align-items:center;gap:7px;cursor:pointer}.LoginRemember input{accent-color:var(--qe-blue)}
.BtnPrimaryModern{border:0;border-radius:14px;background:linear-gradient(135deg,var(--qe-blue),#2458c9);color:#fff;min-height:50px;padding:0 19px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 14px 28px rgba(47,111,237,.22);transition:.2s}.BtnPrimaryModern:hover{transform:translateY(-1px);box-shadow:0 18px 34px rgba(47,111,237,.27)}.BtnPrimaryModern:disabled{opacity:.65;transform:none}
.LoginSecurityNote{display:flex;gap:10px;align-items:flex-start;border-top:1px solid #eef1f6;margin-top:28px;padding-top:22px;color:#8b95a7;font-size:12px;line-height:1.5}.LoginSecurityNote i{font-size:16px;color:#6b7890;margin-top:1px}

/* APP SHELL */
.AppBody{margin:0;background:var(--qe-bg)}.AppShell{min-height:100vh;display:flex}.AppSidebar{position:fixed;left:0;top:0;bottom:0;width:270px;background:linear-gradient(180deg,#091a41,#0c2559);color:#fff;display:flex;flex-direction:column;z-index:1030;box-shadow:18px 0 45px rgba(13,31,72,.08)}
.SidebarBrand{height:88px;display:flex;align-items:center;gap:12px;padding:0 24px;border-bottom:1px solid rgba(255,255,255,.07)}.SidebarLogo{width:42px;height:42px;border-radius:14px;background:var(--qe-yellow);color:var(--qe-navy);display:grid;place-items:center;font-size:20px}.SidebarBrand strong{display:block;font-size:17px}.SidebarBrand span{display:block;font-size:10px;color:rgba(255,255,255,.47);letter-spacing:.06em;margin-top:2px}.SidebarClose{margin-left:auto;border:0;background:transparent;color:#fff;font-size:20px}
.SidebarContext{margin:18px 16px 10px;padding:13px;border:1px solid rgba(255,255,255,.08);border-radius:15px;background:rgba(255,255,255,.045);display:flex;gap:11px;align-items:center}.SidebarContextIcon{width:34px;height:34px;border-radius:11px;background:rgba(246,184,15,.13);color:#f6c443;display:grid;place-items:center}.SidebarContext small{display:block;font-size:8px;letter-spacing:.12em;color:rgba(255,255,255,.38);font-weight:800}.SidebarContext strong{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:165px;margin-top:3px}
.SidebarNav{padding:6px 12px 20px;overflow-y:auto;flex:1}.SidebarSectionTitle{display:block;font-size:9px;font-weight:800;letter-spacing:.13em;color:rgba(255,255,255,.33);padding:17px 12px 8px}.SidebarLink{min-height:44px;border-radius:12px;color:rgba(255,255,255,.67);display:flex;align-items:center;gap:12px;padding:0 13px;margin:2px 0;transition:.18s;font-size:13px;font-weight:650}.SidebarLink i{width:21px;font-size:17px}.SidebarLink:hover{background:rgba(255,255,255,.06);color:#fff}.SidebarLink.active{background:linear-gradient(135deg,rgba(47,111,237,.80),rgba(47,111,237,.48));color:#fff;box-shadow:0 10px 24px rgba(0,0,0,.13)}.SidebarLink em{margin-left:auto;font-style:normal;font-size:8px;padding:3px 6px;border-radius:99px;background:rgba(246,184,15,.13);color:#f6c443;text-transform:uppercase;letter-spacing:.04em}
.SidebarBottom{border-top:1px solid rgba(255,255,255,.07);padding:14px 16px;display:flex;align-items:center;gap:8px}.SidebarUserMini{display:flex;align-items:center;gap:10px;min-width:0;flex:1}.SidebarAvatar,.HeaderAvatar{width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,#345fb7,#1b408d);display:grid;place-items:center;color:#fff;font-weight:850;flex:0 0 auto}.SidebarUserMini div{min-width:0}.SidebarUserMini strong,.SidebarUserMini small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.SidebarUserMini strong{font-size:11px}.SidebarUserMini small{font-size:9px;color:rgba(255,255,255,.4);margin-top:2px}.SidebarLogout{width:36px;height:36px;border:0;border-radius:11px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.65)}.SidebarLogout:hover{background:rgba(227,75,95,.18);color:#ff94a2}
.AppMain{margin-left:270px;min-width:0;width:calc(100% - 270px);min-height:100vh;display:flex;flex-direction:column}.AppHeader{height:88px;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--qe-border);display:flex;align-items:center;justify-content:space-between;padding:0 30px;position:sticky;top:0;z-index:1010}.HeaderEyebrow{color:#8b96a9;display:block;margin-bottom:2px}.AppHeader h1{font-size:22px;font-weight:820;letter-spacing:-.02em;margin:0}.HeaderActions{display:flex;align-items:center;gap:10px}.HeaderDate{height:38px;align-items:center;gap:8px;padding:0 12px;border-radius:11px;background:#f6f8fc;color:#6f7a8d;font-size:12px}.HeaderIconButton{width:39px;height:39px;border:1px solid var(--qe-border);border-radius:12px;background:#fff;color:#657087;position:relative}.NotificationDot{width:7px;height:7px;border-radius:50%;position:absolute;right:8px;top:7px;background:var(--qe-red);box-shadow:0 0 0 2px #fff}.HeaderUser{align-items:center;gap:9px;padding-left:5px}.HeaderUser strong,.HeaderUser small{display:block}.HeaderUser strong{font-size:11px;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.HeaderUser small{font-size:9px;color:#8b96a9;margin-top:2px}.HeaderAvatar{width:38px;height:38px}
.AppContent{padding:26px 30px 38px;flex:1}.AppFooter{min-height:52px;border-top:1px solid var(--qe-border);background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 30px;color:#9aa4b5;font-size:10px}.MobileTopbar{display:none}.SidebarOverlay{display:none}

/* DASHBOARD */
.DashboardHero{border-radius:24px;min-height:174px;padding:30px 34px;display:flex;align-items:center;justify-content:space-between;gap:25px;color:#fff;background:linear-gradient(110deg,#102a64 0%,#173f89 66%,#224d99 100%);position:relative;overflow:hidden;box-shadow:0 20px 50px rgba(19,47,112,.14)}.DashboardHero:before{content:"";position:absolute;width:260px;height:260px;border:42px solid rgba(255,255,255,.035);border-radius:50%;right:8%;top:-125px}.DashboardHero:after{content:"";position:absolute;width:140px;height:140px;border:1px solid rgba(255,255,255,.07);border-radius:50%;right:22%;bottom:-90px}.DashboardHero>div,.DashboardHero>button{position:relative;z-index:1}.DashboardHeroEyebrow{display:inline-flex;gap:6px;align-items:center;color:#f5cc56;margin-bottom:9px}.DashboardHero h2{font-size:34px;font-weight:850;letter-spacing:-.035em;margin:0 0 7px}.DashboardHero p{margin:0;color:rgba(255,255,255,.64);font-size:14px}.DashboardNewShipment{background:var(--qe-yellow);color:var(--qe-navy);box-shadow:0 14px 28px rgba(246,184,15,.19);white-space:nowrap}.DashboardNewShipment:hover{box-shadow:0 16px 32px rgba(246,184,15,.24)}
.DashboardKpiGrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-top:18px}.KpiCard{background:#fff;border:1px solid var(--qe-border);border-radius:18px;padding:18px;display:flex;align-items:flex-start;gap:13px;min-width:0;box-shadow:0 8px 24px rgba(29,45,76,.035)}.KpiCard.KpiPrimary{border-color:#d7e2ff;background:linear-gradient(180deg,#fff,#f9fbff)}.KpiIcon{width:39px;height:39px;border-radius:12px;display:grid;place-items:center;background:#eaf0ff;color:var(--qe-blue);font-size:18px;flex:0 0 auto}.KpiAmber{background:#fff3dc;color:var(--qe-amber)}.KpiBlue{background:#e5f4fb;color:var(--qe-cyan)}.KpiGreen{background:#e6f7ef;color:var(--qe-green)}.KpiRed{background:#feecef;color:var(--qe-red)}.KpiMoney{background:#f1eefe;color:var(--qe-purple)}.KpiCard>div:last-child{min-width:0}.KpiCard span{display:block;font-size:10px;color:#8d97aa;font-weight:750}.KpiCard strong{display:block;font-size:23px;letter-spacing:-.03em;margin:2px 0 1px;white-space:nowrap}.KpiCard small{display:block;font-size:9px;color:#a8b0bf;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.DashboardChartsGrid{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(300px,.75fr);gap:18px;margin-top:18px}.PanelCard{background:#fff;border:1px solid var(--qe-border);border-radius:20px;padding:20px 22px;box-shadow:0 9px 28px rgba(22,38,70,.035)}.PanelHeader{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:17px}.PanelEyebrow{color:#9ba5b6;display:block;margin-bottom:3px;font-size:9px}.PanelHeader h3{font-size:15px;font-weight:820;margin:0;letter-spacing:-.01em}.PanelBadge{font-size:9px;font-weight:750;color:#5675ad;background:#f0f4fb;border-radius:99px;padding:6px 9px;display:inline-flex;gap:5px;align-items:center}.ChartBox{height:285px;position:relative}.ChartBoxDoughnut{height:285px}.BtnSoft{height:34px;border:1px solid var(--qe-border);border-radius:10px;background:#fff;color:#667187;font-size:10px;font-weight:750;padding:0 11px;display:inline-flex;align-items:center;gap:6px}.BtnSoft:hover{background:#f7f9fc}
.DashboardTable{font-size:11px}.DashboardTable thead th{border-top:0;border-bottom:1px solid var(--qe-border);color:#9aa4b5;font-size:9px;text-transform:uppercase;letter-spacing:.055em;font-weight:800;padding:10px 12px}.DashboardTable tbody td{border-color:#f0f2f6;padding:12px;color:#586377}.TrackingCode{font-weight:850;color:#294f99;font-size:10px}.CellMain{display:block;color:#263146;font-weight:750}.CellSub{display:block;color:#a0a9b8;font-size:9px;margin-top:2px;max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.StatusBadge{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:99px;font-weight:800;font-size:8px;background:#eef2f8;color:#667187}.StatusBadge:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}.StatusDelivered{background:#e8f7ef;color:#24965f}.StatusIncident{background:#feebee;color:#d94d5d}.StatusTransit{background:#eaf1ff;color:#376ed7}.StatusPending{background:#fff4df;color:#d68d20}.StatusCancelled{background:#edf0f4;color:#7f8998}

@media(max-width:1250px){.DashboardKpiGrid{grid-template-columns:repeat(3,minmax(0,1fr))}.DashboardChartsGrid{grid-template-columns:1fr}.ChartBoxDoughnut{height:300px}}
@media(max-width:991.98px){.LoginShell{display:block}.LoginPanel{min-height:100vh;padding:26px}.LoginMobileBrand{display:flex!important}.AppSidebar{transform:translateX(-105%);transition:.22s}.AppSidebar.open{transform:translateX(0)}.AppMain{margin-left:0;width:100%;padding-top:62px}.AppHeader{height:74px;padding:0 18px}.MobileTopbar{display:flex;height:62px;position:fixed;top:0;left:0;right:0;z-index:1020;background:#0b1f4d;color:#fff;align-items:center;padding:0 14px;gap:10px}.MobileMenuButton{width:40px;height:40px;border:0;border-radius:11px;background:rgba(255,255,255,.08);color:#fff;font-size:20px}.MobileTopbarBrand strong,.MobileTopbarBrand span{display:block}.MobileTopbarBrand strong{font-size:12px}.MobileTopbarBrand span{font-size:9px;color:rgba(255,255,255,.48);margin-top:1px}.SidebarOverlay{position:fixed;inset:0;background:rgba(4,12,28,.54);z-index:1025}.SidebarOverlay.show{display:block}.AppContent{padding:20px}.AppFooter{padding:0 20px}}
@media(max-width:767.98px){.LoginCard{padding:28px;border-radius:22px}.DashboardHero{align-items:flex-start;flex-direction:column;padding:25px}.DashboardHero h2{font-size:28px}.DashboardNewShipment{width:100%}.DashboardKpiGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.PanelCard{padding:17px}.ChartBox{height:255px}.AppHeader h1{font-size:18px}.AppContent{padding:16px}.HeaderActions{gap:5px}}
@media(max-width:479px){.LoginPanel{padding:14px}.LoginCard{padding:23px}.DashboardKpiGrid{grid-template-columns:1fr}.KpiCard{align-items:center}.DashboardHero{border-radius:19px}.PanelHeader{align-items:flex-start}.PanelBadge{display:none}}


/* ============================================================
   QUICK EXPRESS
   SISTEMA GLOBAL DE MODALES RESPONSIVE
   DESKTOP + TABLET + CELULAR
============================================================ */

/*
|--------------------------------------------------------------------------
| CONTENEDOR PRINCIPAL DEL MODAL
|--------------------------------------------------------------------------
*/

.modal {
    position: fixed !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 100dvh !important;

    overflow: hidden !important;

    padding: 0 !important;
}


/*
|--------------------------------------------------------------------------
| DIÁLOGO
|--------------------------------------------------------------------------
|
| IMPORTANTE:
| No permitimos que Bootstrap centre verticalmente un modal muy alto.
|--------------------------------------------------------------------------
*/

.modal .modal-dialog {

    width: auto;

    height: calc(100dvh - 32px) !important;

    max-height: calc(100dvh - 32px) !important;

    margin-top: 16px !important;
    margin-bottom: 16px !important;

    display: flex !important;

    align-items: stretch !important;
}


/*
|--------------------------------------------------------------------------
| ANULAR modal-dialog-centered
|--------------------------------------------------------------------------
*/

.modal .modal-dialog-centered {

    min-height: 0 !important;

    align-items: stretch !important;
}


/*
|--------------------------------------------------------------------------
| CONTENIDO
|--------------------------------------------------------------------------
*/

.modal .modal-content {

    width: 100% !important;

    height: 100% !important;

    max-height: 100% !important;

    min-height: 0 !important;

    display: flex !important;

    flex-direction: column !important;

    overflow: hidden !important;
}


/*
|--------------------------------------------------------------------------
| HEADER
|--------------------------------------------------------------------------
*/

.modal .modal-header {

    flex: 0 0 auto !important;

    position: relative;

    z-index: 30;

    background: #ffffff;
}


/*
|--------------------------------------------------------------------------
| FORMULARIOS DENTRO DEL MODAL
|--------------------------------------------------------------------------
|
| Esto es MUY importante.
| Algunos modales tienen:
|
| modal-content
|   form
|       modal-body
|       modal-footer
|
| El form también tiene que convertirse en flex.
|--------------------------------------------------------------------------
*/

.modal .modal-content > form {

    flex: 1 1 auto !important;

    min-height: 0 !important;

    height: 100%;

    display: flex !important;

    flex-direction: column !important;

    overflow: hidden !important;
}


/*
|--------------------------------------------------------------------------
| BODY - ESTA ES LA PARTE QUE HACE SCROLL
|--------------------------------------------------------------------------
*/

.modal .modal-body {

    flex: 1 1 auto !important;

    min-height: 0 !important;

    height: auto !important;

    max-height: none !important;

    overflow-y: auto !important;

    overflow-x: hidden !important;

    position: relative;

    -webkit-overflow-scrolling: touch !important;

    overscroll-behavior-y: contain;

    scrollbar-gutter: stable;
}


/*
|--------------------------------------------------------------------------
| FOOTER
|--------------------------------------------------------------------------
*/

.modal .modal-footer {

    flex: 0 0 auto !important;

    position: relative !important;

    bottom: auto !important;

    z-index: 30;

    background: #ffffff;

    border-top: 1px solid #e8edf5;
}


/*
|--------------------------------------------------------------------------
| BOOTSTRAP modal-dialog-scrollable
|--------------------------------------------------------------------------
*/

.modal .modal-dialog-scrollable {

    height: calc(100dvh - 32px) !important;

    max-height: calc(100dvh - 32px) !important;
}


.modal .modal-dialog-scrollable .modal-content {

    height: 100% !important;

    max-height: 100% !important;
}


.modal .modal-dialog-scrollable .modal-body {

    overflow-y: auto !important;

    max-height: none !important;
}


/*
|--------------------------------------------------------------------------
| SCROLLBAR
|--------------------------------------------------------------------------
*/

.modal .modal-body::-webkit-scrollbar {

    width: 8px;
}


.modal .modal-body::-webkit-scrollbar-track {

    background: #f1f5f9;
}


.modal .modal-body::-webkit-scrollbar-thumb {

    background: #b8c2cf;

    border-radius: 20px;
}


.modal .modal-body::-webkit-scrollbar-thumb:hover {

    background: #8d9aaa;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991.98px) {

    .modal .modal-dialog {

        width: calc(100% - 24px) !important;

        max-width: calc(100% - 24px) !important;

        height: calc(100dvh - 24px) !important;

        max-height: calc(100dvh - 24px) !important;

        margin: 12px auto !important;
    }


    .modal .modal-content {

        border-radius: 18px !important;
    }

}


/* ============================================================
   CELULARES
============================================================ */

@media (max-width: 767.98px) {

    html,
    body {

        overscroll-behavior: none;
    }


    .modal {

        width: 100vw !important;

        height: 100dvh !important;

        overflow: hidden !important;

        padding: 0 !important;
    }


    /*
    |--------------------------------------------------------------------------
    | MODAL OCUPA TODA LA PANTALLA
    |--------------------------------------------------------------------------
    */

    .modal .modal-dialog,
    .modal .modal-dialog-centered,
    .modal .modal-dialog-scrollable,
    .modal .modal-fullscreen-sm-down {

        width: 100% !important;

        max-width: 100% !important;

        height: 100dvh !important;

        max-height: 100dvh !important;

        min-height: 100dvh !important;

        margin: 0 !important;

        padding: 0 !important;

        transform: none !important;

        align-items: stretch !important;
    }


    /*
    |--------------------------------------------------------------------------
    | CONTENIDO FULLSCREEN
    |--------------------------------------------------------------------------
    */

    .modal .modal-content {

        width: 100% !important;

        height: 100dvh !important;

        max-height: 100dvh !important;

        min-height: 100dvh !important;

        border: 0 !important;

        border-radius: 0 !important;

        overflow: hidden !important;
    }


    /*
    |--------------------------------------------------------------------------
    | HEADER SIEMPRE ARRIBA
    |--------------------------------------------------------------------------
    */

    .modal .modal-header {

        flex: 0 0 auto !important;

        padding:
            16px 17px !important;

        background: #ffffff;

        box-shadow:
            0 1px 0
            rgba(15, 23, 42, .07);
    }


    /*
    |--------------------------------------------------------------------------
    | FORM TOMA TODA LA ALTURA DISPONIBLE
    |--------------------------------------------------------------------------
    */

    .modal .modal-content > form {

        flex: 1 1 auto !important;

        min-height: 0 !important;

        height: 0 !important;

        display: flex !important;

        flex-direction: column !important;

        overflow: hidden !important;
    }


    /*
    |--------------------------------------------------------------------------
    | BODY SCROLL TÁCTIL
    |--------------------------------------------------------------------------
    */

    .modal .modal-body {

        flex: 1 1 auto !important;

        min-height: 0 !important;

        height: 0 !important;

        max-height: none !important;

        overflow-y: scroll !important;

        overflow-x: hidden !important;

        padding:
            16px 14px 35px !important;

        touch-action: pan-y !important;

        -webkit-overflow-scrolling: touch !important;

        overscroll-behavior-y: contain !important;
    }


    /*
    |--------------------------------------------------------------------------
    | FOOTER SIEMPRE ABAJO
    |--------------------------------------------------------------------------
    */

    .modal .modal-footer {

        flex: 0 0 auto !important;

        position: relative !important;

        bottom: auto !important;

        width: 100%;

        padding:
            12px 14px
            calc(12px + env(safe-area-inset-bottom))
            !important;

        background: #ffffff;

        box-shadow:
            0 -7px 20px
            rgba(15, 23, 42, .08);
    }


    /*
    |--------------------------------------------------------------------------
    | BOTONES GRANDES EN CELULAR
    |--------------------------------------------------------------------------
    */

    .modal .modal-footer button {

        min-height: 46px;
    }

}


/* ============================================================
   CELULARES MUY PEQUEÑOS
============================================================ */

@media (max-width: 480px) {

    .modal .modal-header {

        padding:
            14px !important;
    }


    .modal .modal-body {

        padding:
            13px 12px 30px !important;
    }


    .modal .modal-footer {

        display: grid !important;

        grid-template-columns:
            1fr 1fr !important;

        gap: 8px !important;
    }


    .modal .modal-footer button {

        width: 100% !important;

        margin: 0 !important;

        justify-content: center;
    }

}


/* ============================================================
   PANTALLAS CON POCA ALTURA
   LAPTOPS / NAVEGADORES CON BARRAS GRANDES
============================================================ */

@media
(max-height: 750px)
and
(min-width: 768px) {

    .modal .modal-dialog,
    .modal .modal-dialog-scrollable {

        height: calc(100dvh - 16px) !important;

        max-height: calc(100dvh - 16px) !important;

        margin-top: 8px !important;

        margin-bottom: 8px !important;
    }

}