: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;
    min-height:100vh;
    overflow-x:hidden;
    background:var(--qe-bg);
}

.AppShell{
    min-height:100vh;
    display:flex;
}

/* ============================================================
   SIDEBAR BUSINESS
============================================================ */
.AppSidebar{
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    width:280px;
    height:100dvh;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    color:#fff;
    background:
        radial-gradient(circle at 15% 8%,rgba(47,111,237,.12),transparent 24%),
        linear-gradient(180deg,#091a41 0%,#0b2352 58%,#0b1f49 100%);
    border-right:1px solid rgba(255,255,255,.055);
    box-shadow:18px 0 45px rgba(13,31,72,.08);
    z-index:1030;
}

/* CABECERA */
.SidebarBrand{
    flex:0 0 96px;
    min-height:96px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:18px 18px 17px 20px;
    border-bottom:1px solid rgba(255,255,255,.07);
}

.SidebarBrandLink{
    min-width:0;
    flex:1 1 auto;
    display:flex;
    align-items:center;
    gap:13px;
    color:#fff;
}

.SidebarBrandLink:hover{
    color:#fff;
}

.SidebarBrandLink img{
    width:46px;
    height:46px;
    flex:0 0 46px;
    display:block;
    object-fit:cover;
    border-radius:15px;
    background:#0f2b67;
    box-shadow:0 8px 22px rgba(0,0,0,.18);
}

.SidebarBrandLink div{
    min-width:0;
}

.SidebarBrandLink strong{
    display:block;
    margin:0;
    font-size:18px;
    line-height:1.05;
    font-weight:850;
    letter-spacing:-.02em;
    color:#2f7df5;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.SidebarBrandLink small{
    display:block;
    margin-top:6px;
    font-size:11px;
    line-height:1;
    font-weight:500;
    letter-spacing:.05em;
    color:#10a4e6;
}

.SidebarCloseButton{
    width:36px;
    height:36px;
    flex:0 0 36px;
    display:none;
    place-items:center;
    padding:0;
    border:0;
    border-radius:11px;
    background:rgba(255,255,255,.07);
    color:#fff;
    font-size:18px;
    transition:.18s ease;
}

.SidebarCloseButton:hover{
    background:rgba(255,255,255,.13);
}

/* TARJETA DE EMPRESA */
.SidebarContext{
    flex:0 0 auto;
    min-width:0;
    margin:16px 16px 8px;
    padding:14px 14px;
    display:flex;
    align-items:center;
    gap:12px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    background:rgba(255,255,255,.045);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}

.SidebarContextIcon{
    width:40px;
    height:40px;
    flex:0 0 40px;
    display:grid;
    place-items:center;
    border-radius:13px;
    background:rgba(246,184,15,.14);
    color:#f6c443;
    font-size:17px;
}

.SidebarContext > div{
    min-width:0;
    flex:1 1 auto;
}

.SidebarContext small{
    display:block;
    margin:0 0 4px;
    font-size:8px;
    line-height:1;
    font-weight:850;
    letter-spacing:.13em;
    color:rgba(255,255,255,.42);
}

.SidebarContext strong{
    display:block;
    min-width:0;
    font-size:12px;
    line-height:1.25;
    font-weight:800;
    color:#fff;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* MENU - SOLO ESTA PARTE HACE SCROLL */
.SidebarNav{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    padding:5px 12px 18px;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:rgba(255,255,255,.30) transparent;
}

.SidebarNav::-webkit-scrollbar{
    width:6px;
}

.SidebarNav::-webkit-scrollbar-track{
    background:transparent;
}

.SidebarNav::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.24);
    border-radius:999px;
}

.SidebarNav::-webkit-scrollbar-thumb:hover{
    background:rgba(255,255,255,.38);
}

.SidebarSectionTitle{
    display:block;
    padding:18px 12px 8px;
    font-size:9px;
    line-height:1;
    font-weight:850;
    letter-spacing:.14em;
    color:rgba(255,255,255,.32);
}

.SidebarLink{
    position:relative;
    min-height:48px;
    margin:3px 0;
    padding:0 14px;
    display:flex;
    align-items:center;
    gap:13px;
    border-radius:13px;
    color:rgba(255,255,255,.68);
    font-size:13px;
    font-weight:700;
    transition:
        background .18s ease,
        color .18s ease,
        transform .18s ease;
}

.SidebarLink i{
    width:21px;
    flex:0 0 21px;
    display:grid;
    place-items:center;
    font-size:18px;
    color:rgba(255,255,255,.67);
}

.SidebarLink span{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.SidebarLink:hover{
    color:#fff;
    background:rgba(255,255,255,.065);
}

.SidebarLink:hover i{
    color:#fff;
}

.SidebarLink.active{
    color:#fff;
    background:linear-gradient(135deg,#3168d8,#2854b4);
    box-shadow:0 12px 24px rgba(0,0,0,.16);
}

.SidebarLink.active i{
    color:#fff;
}

.SidebarLink em{
    margin-left:auto;
    flex:0 0 auto;
    padding:3px 6px;
    border-radius:99px;
    background:rgba(246,184,15,.13);
    color:#f6c443;
    font-size:8px;
    font-style:normal;
    text-transform:uppercase;
    letter-spacing:.04em;
}

/* USUARIO FIJO AL PIE */
.SidebarUserCard{
    flex:0 0 auto;
    min-width:0;
    display:flex;
    align-items:center;
    gap:10px;
    padding:14px 14px calc(14px + env(safe-area-inset-bottom));
    border-top:1px solid rgba(255,255,255,.075);
    background:rgba(5,18,47,.62);
    backdrop-filter:blur(10px);
}

.SidebarUserAvatar{
    width:40px;
    height:40px;
    flex:0 0 40px;
    display:grid;
    place-items:center;
    border-radius:13px;
    background:linear-gradient(135deg,#3867c6,#1d438e);
    color:#fff;
    font-size:14px;
    font-weight:850;
    box-shadow:0 7px 18px rgba(0,0,0,.16);
}

.SidebarUserCard > div{
    min-width:0;
    flex:1 1 auto;
}

.SidebarUserCard strong,
.SidebarUserCard small{
    display:block;
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.SidebarUserCard strong{
    font-size:11px;
    line-height:1.25;
    font-weight:800;
    color:#fff;
}

.SidebarUserCard small{
    margin-top:3px;
    font-size:9px;
    line-height:1.2;
    color:rgba(255,255,255,.42);
}

.SidebarUserCard form{
    flex:0 0 auto;
    margin:0;
}

.SidebarLogoutButton{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    padding:0;
    border:1px solid rgba(255,255,255,.055);
    border-radius:12px;
    background:rgba(255,255,255,.06);
    color:rgba(255,255,255,.68);
    font-size:17px;
    transition:.18s ease;
}

.SidebarLogoutButton:hover{
    color:#ff9aa8;
    background:rgba(227,75,95,.16);
    border-color:rgba(227,75,95,.18);
}

/* CONTENIDO GENERAL */
.AppMain{
    margin-left:280px;
    min-width:0;
    width:calc(100% - 280px);
    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{
    max-width:150px;
    font-size:11px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.HeaderUser small{
    margin-top:2px;
    font-size:9px;
    color:#8b96a9;
}

.HeaderAvatar{
    width:38px;
    height:38px;
    border-radius:12px;
    background:linear-gradient(135deg,#345fb7,#1b408d);
    display:grid;
    place-items:center;
    color:#fff;
    font-weight:850;
    flex:0 0 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;
}

@media(max-width:991.98px){
    .SidebarCloseButton{
        display:grid;
    }

    .AppSidebar{
        width:min(88vw,300px);
    }
}

/* 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:transform .22s ease;
    }

    .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{
        margin-top:1px;
        font-size:9px;
        color:rgba(255,255,255,.48);
    }

    .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;
    }

}


/* ============================================================
   QUICKEXPRESS PERU - LOGO OFICIAL EN LOGIN
   Agregar al FINAL de public/assets/css/app.css
============================================================ */

.LoginBrandIcon{
    width:46px;
    height:46px;
    border-radius:15px;
    display:grid;
    place-items:center;
    background:transparent;
    box-shadow:none;
    overflow:hidden;
    padding:0;
}

.LoginBrandImage{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:15px;
}

.LoginMobileBrandIcon{
    width:38px;
    height:38px;
    border-radius:12px;
    display:grid;
    place-items:center;
    background:transparent;
    overflow:hidden;
    flex:0 0 38px;
}

.LoginMobileBrandImage{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:12px;
}