:root{
    --qe-primary:#0C1E59;
    --qe-yellow:#FCB317;
    --qe-blue:#0EA5E9;
    --qe-green:#16A34A;
    --qe-red:#EF4444;
    --qe-bg:#F4F7FB;
    --qe-text:#0F172A;
    --qe-muted:#64748B;
}

*{
    box-sizing:border-box;
}

body{
    margin:0;
    background:var(--qe-bg);
    color:var(--qe-text);
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

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

.Sidebar{
    width:270px;
    background:linear-gradient(180deg,#0C1E59,#102A63);
    color:#fff;
    padding:22px 16px;
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    z-index:20;
}

.SidebarLogo{
    display:flex;
    align-items:center;
    gap:12px;
    padding:8px 8px 22px 8px;
    border-bottom:1px solid rgba(255,255,255,.12);
    margin-bottom:20px;
}

.SidebarLogo img{
    width:58px;
    height:58px;
    object-fit:contain;
    background:#fff;
    border-radius:18px;
    padding:6px;
}

.SidebarLogo strong{
    display:block;
    font-size:18px;
    font-weight:900;
}

.SidebarLogo span{
    display:block;
    opacity:.78;
    font-size:12px;
    font-weight:700;
}

.SidebarNav{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.SidebarLink{
    min-height:46px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 14px;
    color:rgba(255,255,255,.82);
    text-decoration:none;
    border-radius:15px;
    font-weight:800;
    transition:.18s ease;
}

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

.SidebarLink i{
    font-size:18px;
}

.AppMain{
    margin-left:270px;
    width:calc(100% - 270px);
    min-height:100vh;
}

.Topbar{
    height:78px;
    background:#fff;
    border-bottom:1px solid #E5EAF3;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 28px;
    position:sticky;
    top:0;
    z-index:10;
}

.Topbar h1{
    margin:0;
    font-size:22px;
    font-weight:900;
    color:var(--qe-primary);
}

.Topbar p{
    margin:4px 0 0 0;
    font-size:12px;
    color:var(--qe-muted);
    font-weight:700;
}

.TopbarUser{
    display:flex;
    align-items:center;
    gap:12px;
}

.UserAvatar{
    width:44px;
    height:44px;
    border-radius:16px;
    background:rgba(12,30,89,.08);
    color:var(--qe-primary);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
}

.TopbarUser strong{
    display:block;
    font-size:13px;
    font-weight:900;
}

.TopbarUser span{
    display:block;
    font-size:11px;
    color:var(--qe-muted);
    font-weight:700;
}

.BtnLogout{
    width:40px;
    height:40px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#F8FAFC;
    color:var(--qe-red);
    text-decoration:none;
}

.AppContent{
    padding:28px;
}

.DashboardGrid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.CardMetric{
    background:#fff;
    border:1px solid #E5EAF3;
    border-radius:22px;
    padding:20px;
    display:flex;
    align-items:center;
    gap:15px;
    box-shadow:0 16px 38px rgba(15,23,42,.07);
}

.MetricIcon{
    width:54px;
    height:54px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
}

.MetricIcon.Pending{
    background:rgba(252,179,23,.18);
    color:#B77900;
}

.MetricIcon.Received{
    background:rgba(14,165,233,.16);
    color:#0284C7;
}

.MetricIcon.Delivered{
    background:rgba(22,163,74,.15);
    color:#15803D;
}

.MetricIcon.Alert{
    background:rgba(239,68,68,.14);
    color:#DC2626;
}

.CardMetric span{
    display:block;
    color:var(--qe-muted);
    font-size:12px;
    font-weight:800;
}

.CardMetric strong{
    display:block;
    color:var(--qe-primary);
    font-size:28px;
    font-weight:900;
    line-height:1;
    margin-top:5px;
}

.CardSoft{
    background:#fff;
    border:1px solid #E5EAF3;
    border-radius:24px;
    box-shadow:0 16px 38px rgba(15,23,42,.07);
    padding:24px;
}

.CardSoftHeader h4{
    color:var(--qe-primary);
    font-weight:900;
    margin:0 0 5px 0;
}

.CardSoftHeader p{
    color:var(--qe-muted);
    font-weight:600;
    margin:0;
}

.ProcessSteps{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
    margin-top:22px;
}

.StepBox{
    border:1px solid #E5EAF3;
    border-radius:20px;
    padding:18px;
    background:#F8FAFC;
}

.StepBox i{
    width:44px;
    height:44px;
    border-radius:15px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--qe-primary);
    color:#fff;
    font-size:21px;
    margin-bottom:12px;
}

.StepBox strong{
    display:block;
    color:var(--qe-primary);
    font-weight:900;
    margin-bottom:5px;
}

.StepBox span{
    color:var(--qe-muted);
    font-size:12px;
    font-weight:700;
}

@media(max-width:1100px){
    .DashboardGrid,
    .ProcessSteps{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:768px){
    .Sidebar{
        position:relative;
        width:100%;
        height:auto;
    }

    .AppShell{
        flex-direction:column;
    }

    .AppMain{
        margin-left:0;
        width:100%;
    }

    .Topbar{
        height:auto;
        padding:18px;
        flex-direction:column;
        align-items:flex-start;
        gap:16px;
    }

    .DashboardGrid,
    .ProcessSteps{
        grid-template-columns:1fr;
    }

    .AppContent{
        padding:18px;
    }
}


/* =========================================================
   RECEPCIÓN
========================================================= */

.ModuleHeader{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
}

.ModuleBadge{
    display:inline-flex;
    align-items:center;
    background:rgba(252,179,23,.18);
    color:#9A6400;
    border-radius:999px;
    padding:7px 12px;
    font-size:12px;
    font-weight:900;
    margin-bottom:10px;
}

.ModuleHeader h4{
    color:var(--qe-primary);
    font-size:24px;
    font-weight:900;
    margin:0 0 5px 0;
}

.ModuleHeader p{
    color:var(--qe-muted);
    font-weight:600;
    margin:0;
}

.SearchPanel{
    background:#F8FAFC;
    border:1px solid #E5EAF3;
    border-radius:20px;
    padding:20px;
}

.BtnQuickPrimary{
    min-height:50px;
    border:0;
    border-radius:16px;
    background:var(--qe-primary);
    color:#fff;
    font-weight:900;
    box-shadow:0 14px 28px rgba(12,30,89,.20);
}

.BtnQuickPrimary:hover{
    background:#081746;
}

.BtnQuickSuccess{
    min-height:46px;
    border:0;
    border-radius:15px;
    background:var(--qe-green);
    color:#fff;
    font-weight:900;
    box-shadow:0 14px 28px rgba(22,163,74,.18);
}

.RecepcionResultCard{
    background:#fff;
    border:1px solid #E5EAF3;
    border-radius:24px;
    box-shadow:0 16px 38px rgba(15,23,42,.07);
    overflow:hidden;
}

.RecepcionResultHeader{
    background:linear-gradient(135deg,#0C1E59,#132B66);
    color:#fff;
    padding:20px 22px;
    display:flex;
    justify-content:space-between;
    gap:16px;
    align-items:center;
}

.RecepcionResultHeader h5{
    margin:0;
    font-weight:900;
}

.RecepcionResultHeader span{
    opacity:.85;
    font-size:12px;
    font-weight:700;
}

.StatusPill{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:8px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:900;
}

.StatusPending{
    background:rgba(252,179,23,.18);
    color:#9A6400;
}

.StatusReceived{
    background:rgba(22,163,74,.14);
    color:#15803D;
}

.StatusDelivered{
    background:rgba(14,165,233,.14);
    color:#0369A1;
}

.DetailGrid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    padding:22px;
}

.DetailItem{
    background:#F8FAFC;
    border:1px solid #E5EAF3;
    border-radius:18px;
    padding:15px;
}

.DetailItem span{
    display:block;
    color:var(--qe-muted);
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.04em;
    margin-bottom:5px;
}

.DetailItem strong{
    display:block;
    color:var(--qe-text);
    font-size:14px;
    font-weight:900;
    word-break:break-word;
}

.RecepcionActions{
    padding:0 22px 22px 22px;
}

@media(max-width:992px){
    .DetailGrid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:576px){
    .DetailGrid{
        grid-template-columns:1fr;
    }

    .RecepcionResultHeader{
        flex-direction:column;
        align-items:flex-start;
    }
}

/* =========================================================
   PRODUCTOS EN AGENCIA
========================================================= */

.FilterPanel{
    background:#F8FAFC;
    border:1px solid #E5EAF3;
    border-radius:20px;
    padding:20px;
}

.TableHeaderCustom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:18px;
}

.TableHeaderCustom h5{
    color:var(--qe-primary);
    font-weight:900;
    margin:0 0 4px 0;
}

.TableHeaderCustom p{
    color:var(--qe-muted);
    font-size:12px;
    font-weight:700;
    margin:0;
}

.TableQuick{
    width:100%;
    border-collapse:separate;
    border-spacing:0 10px;
}

.TableQuick thead th{
    color:#475569;
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.04em;
    padding:10px 14px;
    border:0;
}

.TableQuick tbody tr{
    background:#fff;
    box-shadow:0 10px 24px rgba(15,23,42,.06);
}

.TableQuick tbody td{
    padding:14px;
    border-top:1px solid #E5EAF3;
    border-bottom:1px solid #E5EAF3;
    vertical-align:middle;
    font-size:13px;
    font-weight:700;
}

.TableQuick tbody td:first-child{
    border-left:1px solid #E5EAF3;
    border-radius:16px 0 0 16px;
}

.TableQuick tbody td:last-child{
    border-right:1px solid #E5EAF3;
    border-radius:0 16px 16px 0;
}

.CodeBadge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:rgba(12,30,89,.08);
    color:var(--qe-primary);
    border-radius:999px;
    padding:7px 10px;
    font-size:12px;
    font-weight:900;
}

.BadgeEstadoAgencia{
    display:inline-flex;
    align-items:center;
    gap:6px;
    border-radius:999px;
    padding:7px 11px;
    font-size:11px;
    font-weight:900;
    white-space:nowrap;
}

.BadgePendienteRecepcion{
    background:rgba(252,179,23,.18);
    color:#9A6400;
}

.BadgeRecibidoAgencia{
    background:rgba(22,163,74,.15);
    color:#15803D;
}

.BadgeEntregadoCliente{
    background:rgba(14,165,233,.15);
    color:#0369A1;
}

.BadgeDevueltoQuick{
    background:rgba(100,116,139,.15);
    color:#334155;
}

.BadgeIncidencia{
    background:rgba(239,68,68,.14);
    color:#DC2626;
}

.BtnTableAction{
    width:38px;
    height:38px;
    border:0;
    border-radius:13px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    margin:2px;
}

.BtnDetalle{
    background:rgba(12,30,89,.08);
    color:var(--qe-primary);
}

.BtnHistorial{
    background:rgba(252,179,23,.20);
    color:#9A6400;
}

.PaginationQuick{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
}

.PaginationQuick button{
    min-width:38px;
    height:38px;
    border:1px solid #E5EAF3;
    background:#fff;
    border-radius:12px;
    font-weight:900;
    color:#0C1E59;
}

.PaginationQuick button.active{
    background:#0C1E59;
    color:#fff;
}

.PaginationQuick button:disabled{
    opacity:.45;
}

.DetailModalGrid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
}

.HistoryTimeline{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.HistoryItem{
    border:1px solid #E5EAF3;
    border-radius:18px;
    padding:15px;
    background:#F8FAFC;
}

.HistoryItem strong{
    color:#0C1E59;
    font-weight:900;
}

.HistoryItem span{
    display:block;
    color:#64748B;
    font-size:12px;
    font-weight:700;
    margin-top:4px;
}

@media(max-width:992px){
    .TableHeaderCustom{
        flex-direction:column;
        align-items:flex-start;
    }

    .DetailModalGrid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:576px){
    .DetailModalGrid{
        grid-template-columns:1fr;
    }
}

/* =========================================================
   ENTREGAS A CLIENTE
========================================================= */

.EntregaResultCard{
    background:#fff;
    border:1px solid #E5EAF3;
    border-radius:24px;
    box-shadow:0 16px 38px rgba(15,23,42,.07);
    overflow:hidden;
}

.EntregaResultHeader{
    background:linear-gradient(135deg,#0C1E59,#132B66);
    color:#fff;
    padding:20px 22px;
    display:flex;
    justify-content:space-between;
    gap:16px;
    align-items:center;
}

.EntregaResultHeader h5{
    margin:0;
    font-weight:900;
}

.EntregaResultHeader span{
    opacity:.85;
    font-size:12px;
    font-weight:700;
}

.EntregaFormBox{
    padding:22px;
    border-top:1px solid #E5EAF3;
    background:#F8FAFC;
}

.ClaveInput{
    height:58px;
    border-radius:18px;
    font-size:26px;
    font-weight:900;
    text-align:center;
    letter-spacing:8px;
    color:#0C1E59;
}

.BtnQuickYellow{
    min-height:48px;
    border:0;
    border-radius:15px;
    background:var(--qe-yellow);
    color:var(--qe-primary);
    font-weight:900;
    box-shadow:0 14px 28px rgba(252,179,23,.20);
}

.BtnQuickYellow:hover{
    background:#f2a900;
}

.EntregaWarning{
    background:rgba(252,179,23,.15);
    border:1px solid rgba(252,179,23,.35);
    color:#7A4E00;
    border-radius:18px;
    padding:16px;
    font-weight:800;
}

.EntregaSuccessBox{
    background:rgba(22,163,74,.12);
    border:1px solid rgba(22,163,74,.25);
    color:#14532D;
    border-radius:18px;
    padding:16px;
    font-weight:800;
}

/* =========================================================
   DASHBOARD REAL
========================================================= */

.DashboardSectionHeader{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
}

.DashboardSectionHeader h4{
    color:var(--qe-primary);
    font-weight:900;
    margin:0 0 4px 0;
}

.DashboardSectionHeader p{
    color:var(--qe-muted);
    font-size:12px;
    font-weight:700;
    margin:0;
}

.BtnMiniPrimary{
    min-height:38px;
    border-radius:13px;
    padding:0 13px;
    background:var(--qe-primary);
    color:#fff;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:12px;
    font-weight:900;
}

.BtnMiniPrimary:hover{
    color:#fff;
    background:#081746;
}

.DashboardTimeline{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.DashboardTimelineItem{
    display:flex;
    align-items:flex-start;
    gap:12px;
    background:#F8FAFC;
    border:1px solid #E5EAF3;
    border-radius:18px;
    padding:14px;
}

.DashboardTimelineIcon{
    width:38px;
    height:38px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(12,30,89,.08);
    color:var(--qe-primary);
    flex-shrink:0;
    font-size:18px;
}

.DashboardTimelineItem strong{
    display:block;
    color:var(--qe-primary);
    font-size:13px;
    font-weight:900;
}

.DashboardTimelineItem p{
    margin:3px 0 0 0;
    color:#334155;
    font-size:12px;
    font-weight:700;
}

.DashboardTimelineItem span{
    display:block;
    margin-top:4px;
    color:var(--qe-muted);
    font-size:11px;
    font-weight:700;
}

@media(max-width:576px){
    .DashboardSectionHeader{
        flex-direction:column;
        align-items:flex-start;
    }
}

/* =========================================================
   INCIDENCIAS
========================================================= */

.IncidenciaResultCard{
    background:#fff;
    border:1px solid #E5EAF3;
    border-radius:24px;
    box-shadow:0 16px 38px rgba(15,23,42,.07);
    overflow:hidden;
}

.IncidenciaResultHeader{
    background:linear-gradient(135deg,#0C1E59,#132B66);
    color:#fff;
    padding:20px 22px;
    display:flex;
    justify-content:space-between;
    gap:16px;
    align-items:center;
}

.IncidenciaResultHeader h5{
    margin:0;
    font-weight:900;
}

.IncidenciaResultHeader span{
    opacity:.85;
    font-size:12px;
    font-weight:700;
}

.IncidenciaActionBox{
    padding:22px;
    border-top:1px solid #E5EAF3;
    background:#F8FAFC;
}

.BtnQuickDanger{
    min-height:46px;
    border:0;
    border-radius:15px;
    background:#EF4444;
    color:#fff;
    font-weight:900;
    box-shadow:0 14px 28px rgba(239,68,68,.18);
}

.BtnQuickDanger:hover{
    background:#DC2626;
}

.BtnQuickGray{
    min-height:46px;
    border:0;
    border-radius:15px;
    background:#475569;
    color:#fff;
    font-weight:900;
    box-shadow:0 14px 28px rgba(71,85,105,.18);
}

.BtnQuickGray:hover{
    background:#334155;
}

/* =========================================================
   USUARIOS
========================================================= */

.BtnDangerSoft{
    background:rgba(239,68,68,.14);
    color:#DC2626;
}

.BtnSuccessSoft{
    background:rgba(22,163,74,.15);
    color:#15803D;
}

/* =========================================================
   ENVÍOS MOSTRADOR
========================================================= */

.MostradorSection{
    background:#F8FAFC;
    border:1px solid #E5EAF3;
    border-radius:22px;
    padding:18px;
    margin-bottom:18px;
}

.MostradorSection h5{
    color:var(--qe-primary);
    font-weight:900;
    margin-bottom:15px;
}

.MostradorTarifaBox{
    min-height:45px;
    border-radius:16px;
    background:#fff;
    border:1px solid #DDE6F3;
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 15px;
}

.MostradorTarifaBox span{
    color:#64748B;
    font-weight:900;
}

.MostradorTarifaBox strong{
    color:#0C1E59;
    font-size:22px;
    font-weight:900;
}

.ClaveSeguraBox{
    background:#EEF6FF;
    border:1px dashed #93C5FD;
    border-radius:18px;
    padding:15px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-bottom:15px;
}

.ClaveSeguraBox strong{
    color:#0C1E59;
    font-weight:900;
}

.ClaveSeguraBox p{
    margin:3px 0 0 0;
    color:#334155;
    font-size:12px;
    font-weight:700;
}

.ClaveSeguraBox i{
    font-size:34px;
    color:#0C1E59;
}

.ClaveMostrador{
    font-size:24px;
    font-weight:900;
    letter-spacing:10px;
    text-align:center;
}

.ClaveEstado{
    border-radius:15px;
    padding:12px;
    background:#fff;
    border:1px solid #E5EAF3;
    color:#64748B;
    font-weight:800;
}

.ClaveEstado.ok{
    background:#DCFCE7;
    border-color:#86EFAC;
    color:#166534;
}

.ClaveEstado.error{
    background:#FEE2E2;
    border-color:#FCA5A5;
    color:#991B1B;
}

.MostradorActions{
    display:flex;
    justify-content:flex-end;
    margin-top:18px;
}

.MostradorResult{
    background:#fff;
    border:1px solid #DDE6F3;
    border-radius:22px;
    padding:18px;
    box-shadow:0 16px 38px rgba(15,23,42,.07);
}

.MostradorResult h5{
    color:#0C1E59;
    font-weight:900;
}

/* =========================================================
   SIDEBAR MOBILE PROFESIONAL
========================================================= */

.MobileTopbar{
    display:none;
}

.SidebarOverlay{
    display:none;
}

.SidebarCloseButton{
    display:none;
}

@media(max-width: 991px){

    body{
        background:#F4F7FB;
        overflow-x:hidden;
    }

    body.SidebarMobileOpen{
        overflow:hidden;
    }

    .MobileTopbar{
        position:sticky;
        top:0;
        z-index:1040;
        height:68px;
        background:#0C1E59;
        color:#fff;
        display:flex;
        align-items:center;
        gap:12px;
        padding:0 16px;
        box-shadow:0 12px 28px rgba(12,30,89,.18);
    }

    .MobileMenuButton{
        width:44px;
        height:44px;
        border:0;
        border-radius:14px;
        background:#FCB317;
        color:#0C1E59;
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:26px;
        font-weight:900;
        flex-shrink:0;
        box-shadow:0 10px 20px rgba(252,179,23,.25);
    }

    .MobileTopbarBrand{
        min-width:0;
        display:flex;
        flex-direction:column;
        line-height:1.2;
    }

    .MobileTopbarBrand strong{
        font-size:16px;
        font-weight:900;
        color:#fff;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .MobileTopbarBrand span{
        font-size:11px;
        font-weight:700;
        color:rgba(255,255,255,.75);
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .Sidebar,
    .AppSidebar,
    aside.Sidebar{
        position:fixed !important;
        top:0 !important;
        left:0 !important;
        width:285px !important;
        max-width:86vw !important;
        height:100vh !important;
        min-height:100vh !important;
        z-index:1050 !important;
        background:#0C1E59 !important;
        transform:translateX(-105%) !important;
        transition:transform .28s ease !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        padding-top:22px !important;
        box-shadow:18px 0 45px rgba(15,23,42,.35) !important;
        border-radius:0 26px 26px 0 !important;
    }

    body.SidebarMobileOpen .Sidebar,
    body.SidebarMobileOpen .AppSidebar,
    body.SidebarMobileOpen aside.Sidebar{
        transform:translateX(0) !important;
    }

    .SidebarOverlay{
        display:block;
        position:fixed;
        inset:0;
        z-index:1045;
        background:rgba(15,23,42,.55);
        opacity:0;
        visibility:hidden;
        transition:.25s ease;
        backdrop-filter:blur(2px);
    }

    body.SidebarMobileOpen .SidebarOverlay{
        opacity:1;
        visibility:visible;
    }

    .SidebarCloseButton{
        position:absolute;
        top:16px;
        right:16px;
        width:38px;
        height:38px;
        border:0;
        border-radius:13px;
        background:rgba(255,255,255,.12);
        color:#fff;
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:18px;
        z-index:2;
    }

    .SidebarCloseButton:active{
        transform:scale(.96);
    }

    .SidebarLink{
        min-height:48px;
        border-radius:16px;
        margin:4px 14px;
        padding:0 14px;
        display:flex;
        align-items:center;
        gap:12px;
        color:rgba(255,255,255,.88) !important;
        font-size:14px;
        font-weight:800;
    }

    .SidebarLink i{
        width:22px;
        text-align:center;
        font-size:17px;
    }

    .SidebarLink.active,
    .SidebarLink:hover{
        background:rgba(252,179,23,.16) !important;
        color:#fff !important;
    }

    .MainContent,
    .AppContent,
    .ContentWrapper,
    main{
        width:100% !important;
        margin-left:0 !important;
        padding:16px !important;
    }

    .Header,
    .TopHeader,
    .PageHeader{
        margin-top:0 !important;
    }

    .DashboardGrid{
        grid-template-columns:1fr !important;
        gap:14px !important;
    }

    .CardSoft{
        border-radius:20px !important;
        padding:16px !important;
    }

    .ModuleHeader{
        flex-direction:column;
        align-items:flex-start !important;
        gap:12px;
    }

    .ModuleHeader h4,
    .CardSoftHeader h4{
        font-size:20px !important;
    }

    .TableQuick{
        min-width:760px;
    }

    .table-responsive{
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }
}

@media(min-width: 992px){

    .Sidebar,
    .AppSidebar,
    aside.Sidebar{
        transform:none !important;
    }
}

/* =========================================================
   TABLAS COMO CARDS EN CELULAR - GLOBAL
========================================================= */

@media(max-width: 768px){

    .table-responsive{
        overflow-x: visible !important;
    }

    table.TableQuick,
    table.dataTable,
    #datatable-default{
        width:100% !important;
        min-width:0 !important;
        border-collapse:separate !important;
        border-spacing:0 14px !important;
        display:block !important;
    }

    table.TableQuick thead,
    table.dataTable thead,
    #datatable-default thead{
        display:none !important;
    }

    table.TableQuick tbody,
    table.dataTable tbody,
    #datatable-default tbody{
        display:block !important;
        width:100% !important;
    }

    table.TableQuick tr,
    table.dataTable tr,
    #datatable-default tr{
        display:block !important;
        width:100% !important;
        background:#fff !important;
        border:1px solid #E5EAF3 !important;
        border-radius:20px !important;
        margin-bottom:14px !important;
        padding:14px !important;
        box-shadow:0 12px 28px rgba(15,23,42,.08) !important;
        overflow:hidden !important;
    }

    table.TableQuick td,
    table.dataTable td,
    #datatable-default td{
        display:flex !important;
        justify-content:space-between !important;
        align-items:flex-start !important;
        gap:12px !important;
        width:100% !important;
        border:0 !important;
        border-bottom:1px dashed #E5EAF3 !important;
        padding:10px 0 !important;
        text-align:right !important;
        white-space:normal !important;
        word-break:break-word !important;
        font-size:13px !important;
        color:#0F172A !important;
    }

    table.TableQuick td:last-child,
    table.dataTable td:last-child,
    #datatable-default td:last-child{
        border-bottom:0 !important;
        padding-bottom:0 !important;
    }

    table.TableQuick td::before,
    table.dataTable td::before,
    #datatable-default td::before{
        content:attr(data-label);
        min-width:105px;
        max-width:130px;
        text-align:left;
        color:#64748B;
        font-size:11px;
        font-weight:900;
        text-transform:uppercase;
        letter-spacing:.04em;
        flex-shrink:0;
    }

    table.TableQuick td:empty,
    table.dataTable td:empty,
    #datatable-default td:empty{
        display:none !important;
    }

    table.TableQuick td[data-label="Opciones"],
    table.TableQuick td[data-label="Acciones"],
    table.dataTable td[data-label="Opciones"],
    table.dataTable td[data-label="Acciones"],
    #datatable-default td[data-label="Opciones"],
    #datatable-default td[data-label="Acciones"]{
        display:block !important;
        text-align:left !important;
    }

    table.TableQuick td[data-label="Opciones"]::before,
    table.TableQuick td[data-label="Acciones"]::before,
    table.dataTable td[data-label="Opciones"]::before,
    table.dataTable td[data-label="Acciones"]::before,
    #datatable-default td[data-label="Opciones"]::before,
    #datatable-default td[data-label="Acciones"]::before{
        display:block;
        margin-bottom:8px;
        max-width:none;
    }

    table.TableQuick td[data-label="Opciones"] .btn,
    table.TableQuick td[data-label="Acciones"] .btn,
    table.dataTable td[data-label="Opciones"] .btn,
    table.dataTable td[data-label="Acciones"] .btn,
    #datatable-default td[data-label="Opciones"] .btn,
    #datatable-default td[data-label="Acciones"] .btn{
        margin:3px 4px 3px 0 !important;
    }

    .CodeBadge,
    .BadgeEstadoAgencia,
    .label{
        white-space:nowrap !important;
    }

    .dataTables_wrapper .row{
        margin-left:0 !important;
        margin-right:0 !important;
    }

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter{
        width:100% !important;
        text-align:left !important;
        margin-bottom:12px !important;
    }

    .dataTables_wrapper .dataTables_filter input{
        width:100% !important;
        margin-left:0 !important;
        margin-top:6px !important;
        border-radius:14px !important;
    }

    .dataTables_wrapper .dataTables_paginate{
        display:flex !important;
        justify-content:center !important;
        margin-top:12px !important;
    }

    .dataTables_wrapper .dataTables_info{
        text-align:center !important;
        font-size:12px !important;
        color:#64748B !important;
    }
}


/* =========================================================
   TABLAS MOBILE COMO CARDS COMPACTAS - GLOBAL
========================================================= */

@media(max-width: 768px){

    .table-responsive{
        overflow-x:visible !important;
        width:100% !important;
    }

    table.TableQuick,
    table.dataTable,
    #datatable-default{
        width:100% !important;
        min-width:0 !important;
        display:block !important;
        border-collapse:separate !important;
        border-spacing:0 !important;
        background:transparent !important;
    }

    table.TableQuick thead,
    table.dataTable thead,
    #datatable-default thead{
        display:none !important;
    }

    table.TableQuick tbody,
    table.dataTable tbody,
    #datatable-default tbody{
        display:block !important;
        width:100% !important;
    }

    table.TableQuick tbody tr,
    table.dataTable tbody tr,
    #datatable-default tbody tr{
        display:grid !important;
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
        gap:10px !important;
        width:100% !important;
        background:#fff !important;
        border:1px solid #E5EAF3 !important;
        border-radius:22px !important;
        margin:0 0 16px 0 !important;
        padding:14px !important;
        box-shadow:0 14px 32px rgba(15,23,42,.08) !important;
        overflow:hidden !important;
    }

    table.TableQuick tbody td,
    table.dataTable tbody td,
    #datatable-default tbody td{
        display:block !important;
        width:100% !important;
        border:0 !important;
        padding:9px 10px !important;
        background:#F8FAFC !important;
        border-radius:15px !important;
        text-align:left !important;
        white-space:normal !important;
        word-break:normal !important;
        overflow-wrap:anywhere !important;
        font-size:13px !important;
        color:#0F172A !important;
        line-height:1.35 !important;
        min-height:58px !important;
    }

    table.TableQuick tbody td::before,
    table.dataTable tbody td::before,
    #datatable-default tbody td::before{
        content:attr(data-label);
        display:block !important;
        margin-bottom:5px !important;
        color:#64748B !important;
        font-size:10px !important;
        font-weight:900 !important;
        text-transform:uppercase !important;
        letter-spacing:.06em !important;
        line-height:1.1 !important;
    }

    /*
      Código como cabecera grande de la card
    */
    table.TableQuick tbody td:first-child,
    table.dataTable tbody td:first-child,
    #datatable-default tbody td:first-child{
        grid-column:1 / -1 !important;
        background:linear-gradient(135deg,#F8FAFC,#EEF2FF) !important;
        border:1px solid #E2E8F0 !important;
        min-height:auto !important;
        padding:12px !important;
    }

    /*
      Producto, estado y acciones ocupan todo el ancho
    */
 table.TableQuick td[data-label="Producto"],
table.TableQuick td[data-label="Productos"],
table.TableQuick td[data-label="Estado"],
table.TableQuick td[data-label="Opciones"],
table.TableQuick td[data-label="Acciones"],
table.dataTable td[data-label="Producto"],
table.dataTable td[data-label="Productos"],
table.dataTable td[data-label="Estado"],
table.dataTable td[data-label="Opciones"],
table.dataTable td[data-label="Acciones"],
#datatable-default td[data-label="Producto"],
#datatable-default td[data-label="Productos"],
#datatable-default td[data-label="Estado"],
#datatable-default td[data-label="Opciones"],
#datatable-default td[data-label="Acciones"]{
    grid-column:1 / -1 !important;
}
/* Fecha + Estado agencia en la misma fila */
table.TableQuick td[data-label="Fecha"],
table.TableQuick td[data-label="Estado agencia"],
table.dataTable td[data-label="Fecha"],
table.dataTable td[data-label="Estado agencia"],
#datatable-default td[data-label="Fecha"],
#datatable-default td[data-label="Estado agencia"]{
    grid-column:auto !important;
}
table.TableQuick td[data-label="Estado agencia"],
table.dataTable td[data-label="Estado agencia"],
#datatable-default td[data-label="Estado agencia"]{
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
}

    /*
      Acciones compactas
    */
    table.TableQuick td[data-label="Opciones"],
    table.TableQuick td[data-label="Acciones"],
    table.dataTable td[data-label="Opciones"],
    table.dataTable td[data-label="Acciones"],
    #datatable-default td[data-label="Opciones"],
    #datatable-default td[data-label="Acciones"]{
        background:#fff !important;
        border:1px dashed #CBD5E1 !important;
        min-height:auto !important;
    }

    table.TableQuick td[data-label="Opciones"] .btn,
    table.TableQuick td[data-label="Acciones"] .btn,
    table.dataTable td[data-label="Opciones"] .btn,
    table.dataTable td[data-label="Acciones"] .btn,
    #datatable-default td[data-label="Opciones"] .btn,
    #datatable-default td[data-label="Acciones"] .btn{
        margin:3px 5px 3px 0 !important;
        border-radius:12px !important;
        min-width:38px !important;
        min-height:34px !important;
    }

    /*
      Textos importantes
    */
    table.TableQuick td strong,
    table.TableQuick td b,
    table.dataTable td strong,
    table.dataTable td b,
    #datatable-default td strong,
    #datatable-default td b{
        color:#0C1E59 !important;
        font-weight:900 !important;
    }

    .CodeBadge{
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        max-width:100% !important;
        white-space:normal !important;
        word-break:break-word !important;
        border-radius:999px !important;
    }

    .BadgeEstadoAgencia,
    .label{
        display:inline-flex !important;
        align-items:center !important;
        max-width:100% !important;
        white-space:normal !important;
        line-height:1.2 !important;
    }

    /*
      Controles DataTables
    */
    .dataTables_wrapper .row{
        margin-left:0 !important;
        margin-right:0 !important;
    }

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter{
        width:100% !important;
        text-align:left !important;
        margin-bottom:12px !important;
    }

    .dataTables_wrapper .dataTables_filter label{
        width:100% !important;
    }

    .dataTables_wrapper .dataTables_filter input{
        width:100% !important;
        margin-left:0 !important;
        margin-top:6px !important;
        border-radius:14px !important;
    }

    .dataTables_wrapper .dataTables_info{
        text-align:center !important;
        font-size:12px !important;
        color:#64748B !important;
        margin-top:10px !important;
    }

    .dataTables_wrapper .dataTables_paginate{
        display:flex !important;
        justify-content:center !important;
        margin-top:12px !important;
    }
}

/* Celulares muy angostos: mantener 2 columnas, pero más compacto */
@media(max-width: 390px){

    table.TableQuick tbody tr,
    table.dataTable tbody tr,
    #datatable-default tbody tr{
        gap:8px !important;
        padding:12px !important;
    }

    table.TableQuick tbody td,
    table.dataTable tbody td,
    #datatable-default tbody td{
        padding:8px !important;
        font-size:12.5px !important;
        min-height:54px !important;
    }

    table.TableQuick tbody td::before,
    table.dataTable tbody td::before,
    #datatable-default tbody td::before{
        font-size:9.5px !important;
    }
}

.InputBloqueadoMostrador{
    background:#F1F5F9 !important;
    border-color:#CBD5E1 !important;
    color:#0C1E59 !important;
    font-weight:800 !important;
    cursor:not-allowed !important;
}

.InputBloqueadoMostrador:focus{
    box-shadow:none !important;
    border-color:#94A3B8 !important;
}

.DetailGridMostrador{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

.DetailBox{
    background:#F8FAFC;
    border:1px solid #E2E8F0;
    border-radius:18px;
    padding:15px;
}

.DetailBox small{
    display:block;
    color:#64748B;
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.06em;
    margin-bottom:6px;
}

.DetailBox b{
    display:block;
    color:#0C1E59;
    font-size:15px;
    font-weight:900;
    margin-bottom:5px;
}

.DetailBox span{
    display:block;
    color:#334155;
    font-size:13px;
    font-weight:700;
    line-height:1.35;
    margin-top:3px;
}

.BadgeSoft{
    display:inline-flex;
    align-items:center;
    gap:4px;
    border-radius:999px;
    padding:6px 10px;
    font-size:11px;
    font-weight:900;
}

.BadgeGreen{
    background:#DCFCE7;
    color:#166534;
}

.BadgeBlue{
    background:#DBEAFE;
    color:#1D4ED8;
}

.BadgeGray{
    background:#F1F5F9;
    color:#475569;
}

.BtnIconQuick{
    width:36px;
    height:34px;
    border:0;
    border-radius:12px;
    background:#EEF2FF;
    color:#0C1E59;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin:2px;
    font-weight:900;
}

.BtnIconWarning{
    background:#DCFCE7;
    color:#166534;
}

.BtnIconInfo{
    background:#FEF3C7;
    color:#92400E;
}

@media(max-width:768px){
    .DetailGridMostrador{
        grid-template-columns:1fr;
    }
}


/* =========================================================
   BOTONES Y HEADER DE PÁGINAS - FIX GLOBAL
========================================================= */

.PageHeaderQuick{
    display:flex !important;
    justify-content:space-between !important;
    align-items:center !important;
    gap:18px !important;
    margin-bottom:24px !important;
    flex-wrap:wrap !important;
}

.PageHeaderQuick h1{
    margin:0 !important;
    color:#0F172A !important;
    font-size:36px !important;
    font-weight:900 !important;
    letter-spacing:-1px !important;
    line-height:1.1 !important;
}

.PageHeaderQuick p{
    margin:8px 0 0 0 !important;
    color:#334155 !important;
    font-size:15px !important;
    font-weight:600 !important;
}

.BtnQuickPrimary,
a.BtnQuickPrimary,
button.BtnQuickPrimary{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    min-height:46px !important;
    padding:11px 20px !important;
    border:0 !important;
    border-radius:16px !important;
    background:#0C1E59 !important;
    color:#ffffff !important;
    font-size:14px !important;
    font-weight:900 !important;
    text-decoration:none !important;
    line-height:1 !important;
    box-shadow:0 14px 28px rgba(12,30,89,.18) !important;
    cursor:pointer !important;
    transition:.2s ease !important;
    white-space:nowrap !important;
}

.BtnQuickPrimary:hover,
a.BtnQuickPrimary:hover,
button.BtnQuickPrimary:hover{
    background:#081846 !important;
    color:#ffffff !important;
    text-decoration:none !important;
    transform:translateY(-1px) !important;
}

.BtnQuickPrimary i{
    font-size:17px !important;
    line-height:1 !important;
}

.BtnQuickSecondary,
a.BtnQuickSecondary,
button.BtnQuickSecondary{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    min-height:40px !important;
    padding:9px 15px !important;
    border:1px solid #CBD5E1 !important;
    border-radius:14px !important;
    background:#ffffff !important;
    color:#0C1E59 !important;
    font-size:13px !important;
    font-weight:900 !important;
    text-decoration:none !important;
    line-height:1 !important;
    box-shadow:0 8px 20px rgba(15,23,42,.06) !important;
    cursor:pointer !important;
    transition:.2s ease !important;
    white-space:nowrap !important;
}

.BtnQuickSecondary:hover,
a.BtnQuickSecondary:hover,
button.BtnQuickSecondary:hover{
    background:#F8FAFC !important;
    color:#0C1E59 !important;
    border-color:#94A3B8 !important;
    text-decoration:none !important;
}

.BtnQuickSecondary i{
    font-size:15px !important;
    line-height:1 !important;
}

/* Botón verde para WhatsApp u otros */
.BtnQuickSuccess,
a.BtnQuickSuccess,
button.BtnQuickSuccess{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    min-height:42px !important;
    padding:10px 16px !important;
    border:0 !important;
    border-radius:14px !important;
    background:#16A34A !important;
    color:#ffffff !important;
    font-size:13px !important;
    font-weight:900 !important;
    text-decoration:none !important;
    cursor:pointer !important;
    white-space:nowrap !important;
}

.BtnQuickSuccess:hover,
a.BtnQuickSuccess:hover,
button.BtnQuickSuccess:hover{
    background:#15803D !important;
    color:#ffffff !important;
    text-decoration:none !important;
}

/* Header interno de cards */
.CardQuick .d-flex h4{
    color:#0F172A !important;
    font-weight:900 !important;
}

.CardQuick .d-flex .BtnQuickSecondary{
    margin-left:auto !important;
}

/* Fix para que los botones dentro de filtros no se deformen */
.CardQuick .BtnQuickPrimary.w-100{
    width:100% !important;
}

/* Mobile */
@media(max-width:768px){

    .PageHeaderQuick{
        display:block !important;
        margin-bottom:18px !important;
    }

    .PageHeaderQuick h1{
        font-size:28px !important;
        line-height:1.15 !important;
    }

    .PageHeaderQuick p{
        font-size:13px !important;
        line-height:1.45 !important;
        margin-bottom:14px !important;
    }

    .PageHeaderQuick .BtnQuickPrimary{
        width:100% !important;
        margin-top:12px !important;
    }

    .CardQuick .d-flex{
        align-items:flex-start !important;
    }

    .CardQuick .d-flex .BtnQuickSecondary{
        width:100% !important;
        margin-top:10px !important;
        margin-left:0 !important;
    }
}


.AuthBodyQuick{
    min-height:100vh;
    background:linear-gradient(135deg,#0C1E59,#10266F,#FCB317);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
}

.AuthWrapperQuick{
    width:100%;
    max-width:460px;
}

.AuthCardQuick{
    background:#ffffff;
    border-radius:28px;
    padding:28px;
    box-shadow:0 28px 70px rgba(15,23,42,.25);
    border:1px solid rgba(255,255,255,.4);
}

.AuthBrandQuick{
    text-align:center;
    margin-bottom:24px;
}

.AuthLogoQuick{
    width:68px;
    height:68px;
    border-radius:22px;
    background:#0C1E59;
    color:#FCB317;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
    margin-bottom:14px;
    box-shadow:0 18px 35px rgba(12,30,89,.25);
}

.AuthBrandQuick h1{
    margin:0;
    color:#0C1E59;
    font-size:28px;
    font-weight:900;
    letter-spacing:-.5px;
}

.AuthBrandQuick p{
    margin:8px 0 0;
    color:#64748B;
    font-size:14px;
    font-weight:700;
    line-height:1.45;
}

.AuthInputQuick{
    min-height:48px;
    border-radius:15px !important;
    border:1px solid #CBD5E1 !important;
    font-weight:700;
}

.AuthInputQuick:focus{
    border-color:#0C1E59 !important;
    box-shadow:0 0 0 4px rgba(12,30,89,.12) !important;
}

.AuthLinkQuick{
    color:#0C1E59 !important;
    font-weight:900;
    text-decoration:none;
}

.AuthLinkQuick:hover{
    color:#FCB317 !important;
    text-decoration:none;
}

/* =========================================================
   FIX GLOBAL MOBILE: EVITAR ZOOM / DISTORSIÓN AL TOCAR INPUTS
========================================================= */

@media(max-width: 768px){

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

    body{
        overflow-x:hidden !important;
    }

    input,
    select,
    textarea,
    .form-control,
    .form-select,
    .AuthInputQuick,
    .dataTables_filter input{
        font-size:16px !important;
        line-height:1.4 !important;
        min-height:46px !important;
        transform:none !important;
        zoom:1 !important;
    }

    input:focus,
    select:focus,
    textarea:focus,
    .form-control:focus,
    .form-select:focus,
    .AuthInputQuick:focus{
        font-size:16px !important;
        transform:none !important;
        zoom:1 !important;
        outline:none !important;
        box-shadow:0 0 0 4px rgba(12,30,89,.12) !important;
    }

    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="number"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="text"],
    input[type="search"]{
        font-size:16px !important;
    }

    select option{
        font-size:16px !important;
    }

    textarea{
        min-height:90px !important;
        resize:vertical !important;
    }

    button,
    a,
    .btn,
    .BtnQuickPrimary,
    .BtnQuickSecondary,
    .BtnQuickSuccess,
    .BtnIconQuick{
        touch-action:manipulation !important;
    }

    .container,
    .container-fluid,
    .MainContent,
    .CardQuick,
    .AuthWrapperQuick,
    .AuthCardQuick{
        max-width:100% !important;
    }
}


/* =========================================================
   BADGES TIPO ORIGEN - PRODUCTOS EN AGENCIA
========================================================= */

.BadgeTipoOrigen{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    border-radius:999px;
    padding:7px 11px;
    font-size:11px;
    font-weight:900;
    line-height:1.1;
    white-space:nowrap;
}

.BadgeTipoEmpresa{
    background:#EEF2FF;
    color:#3730A3;
}

.BadgeTipoDomicilio{
    background:#DCFCE7;
    color:#166534;
}

.BadgeTipoAgencia{
    background:#FEF3C7;
    color:#92400E;
}

.BadgeTipoRecibido{
    background:#E0F2FE;
    color:#075985;
}

.BtnWhatsapp{
    background:#DCFCE7 !important;
    color:#166534 !important;
}

.BtnEmail{
    background:#FEF3C7 !important;
    color:#92400E !important;
}

@media(max-width:768px){
    .BadgeTipoOrigen{
        white-space:normal;
        text-align:left;
        justify-content:flex-start;
    }
}

/* =========================================================
   MIS GANANCIAS AGENCIA
========================================================= */

.GananciasResumenGrid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
}

.GananciaCard{
    background:#ffffff;
    border:1px solid #E2E8F0;
    border-radius:24px;
    padding:20px;
    box-shadow:0 16px 35px rgba(15,23,42,.07);
}

.GananciaCard small{
    display:block;
    color:#64748B;
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.06em;
    margin-bottom:8px;
}

.GananciaCard strong{
    display:block;
    color:#0C1E59;
    font-size:28px;
    font-weight:900;
    line-height:1.1;
}

.GananciaCard span{
    display:block;
    color:#64748B;
    font-size:13px;
    font-weight:700;
    margin-top:8px;
}

.GananciaCardMain{
    background:linear-gradient(135deg,#0C1E59,#173A8A);
    border:0;
}

.GananciaCardMain small,
.GananciaCardMain span{
    color:rgba(255,255,255,.72);
}

.GananciaCardMain strong{
    color:#ffffff;
}

.BadgeGananciaEstado{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    padding:5px 9px;
    font-size:10px;
    font-weight:900;
    margin-top:4px;
}

.BadgeGananciaConfirmada{
    background:#DCFCE7;
    color:#166534;
}

.BadgeGananciaPendiente{
    background:#FEF3C7;
    color:#92400E;
}

.BadgeGananciaNoComputa{
    background:#FEE2E2;
    color:#991B1B;
}

@media(max-width:991px){
    .GananciasResumenGrid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:575px){
    .GananciasResumenGrid{
        grid-template-columns:1fr;
    }

    .GananciaCard strong{
        font-size:24px;
    }
}

#TipoCobroMostrador{
    font-weight:800;
}

#CobroMostradorMensaje{
    display:block;
    margin-top:6px;
    font-weight:700;
    color:#64748B;
}

/* =========================================================
   COBRO DE TARIFA - PRODUCTOS EN AGENCIA
   Muestra si se cobró en agencia, agencia destino o domicilio
========================================================= */

.BadgeCobroMostrador{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:6px !important;
    border-radius:999px !important;
    padding:6px 10px !important;
    font-size:10.5px !important;
    font-weight:900 !important;
    line-height:1.15 !important;
    margin-top:7px !important;
    width:max-content !important;
    max-width:100% !important;
    white-space:normal !important;
    box-shadow:0 8px 18px rgba(15,23,42,.06) !important;
}

.BadgeCobroMostrador i{
    font-size:13px !important;
    line-height:1 !important;
    flex:0 0 auto !important;
}

.BadgeCobroMostrador b{
    font-weight:900 !important;
    margin-left:2px !important;
    padding-left:5px !important;
    border-left:1px solid currentColor !important;
}

/* Cobrado ahora en agencia origen */
.BadgeCobroOrigen{
    background:#DCFCE7 !important;
    color:#166534 !important;
    border:1px solid #BBF7D0 !important;
}

/* Por cobrar en agencia destino */
.BadgeCobroDestino{
    background:#FEF3C7 !important;
    color:#92400E !important;
    border:1px solid #FDE68A !important;
}

/* Por cobrar en domicilio */
.BadgeCobroDomicilio{
    background:#DBEAFE !important;
    color:#1D4ED8 !important;
    border:1px solid #BFDBFE !important;
}

/* Para que tipo + cobro se acomoden bonito en tabla */
#TablaEnviosAgencia td[data-label="Tipo"]{
    vertical-align:middle !important;
}

#TablaEnviosAgencia td[data-label="Tipo"] .BadgeTipoOrigen,
#TablaEnviosAgencia td[data-label="Tipo"] .BadgeCobroMostrador{
    margin-right:4px !important;
}

/* En modal detalle */
.DetailModalGrid .DetailItem strong{
    word-break:break-word !important;
}

.DetailModalGrid .BadgeCobroMostrador{
    margin-top:0 !important;
}

/* =========================================================
   MOBILE - TABLAS COMO CARDS
========================================================= */

@media(max-width:768px){

    #TablaEnviosAgencia td[data-label="Tipo"]{
        display:flex !important;
        flex-direction:column !important;
        align-items:flex-start !important;
        gap:7px !important;
    }

    #TablaEnviosAgencia td[data-label="Tipo"] .BadgeTipoOrigen,
    #TablaEnviosAgencia td[data-label="Tipo"] .BadgeCobroMostrador{
        width:100% !important;
        max-width:100% !important;
        justify-content:flex-start !important;
        margin:0 !important;
        border-radius:14px !important;
        padding:8px 10px !important;
        font-size:11px !important;
    }

    .BadgeCobroMostrador{
        width:100% !important;
        max-width:100% !important;
        border-radius:14px !important;
        white-space:normal !important;
        flex-wrap:wrap !important;
    }

    .BadgeCobroMostrador b{
        display:inline-flex !important;
        margin-left:0 !important;
        padding-left:6px !important;
    }

    .DetailModalGrid{
        grid-template-columns:1fr !important;
    }
}