: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;overflow-x:hidden}
.AppShell{display:flex;min-height:100vh}.AppMain{margin-left:270px;width:calc(100% - 270px);min-height:100vh}.AppContent{padding:28px}
.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;overflow-y:auto}.SidebarLogo{display:flex;align-items:center;gap:12px;padding:8px 8px 22px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:20px}.SidebarLogoIcon{width:58px;height:58px;border-radius:18px;background:#fff;color:#0C1E59;display:flex;align-items:center;justify-content:center;font-size:28px}.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,.84);text-decoration:none;border-radius:15px;font-weight:800;transition:.18s ease}.SidebarLink:hover{color:#fff;background:rgba(252,179,23,.16)}.SidebarLink i{font-size:18px;width:22px;text-align:center}.SidebarCloseButton{display:none}
.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;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}
.MobileTopbar,.SidebarOverlay{display:none}.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}.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}.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}.ModuleHeader p{color:var(--qe-muted);font-weight:600;margin:0}.SearchPanel{background:#F8FAFC;border:1px solid #E5EAF3;border-radius:20px;padding:20px}
.BtnQuickPrimary,a.BtnQuickPrimary,button.BtnQuickPrimary{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:11px 20px;border:0;border-radius:16px;background:#0C1E59;color:#fff;font-size:14px;font-weight:900;text-decoration:none;line-height:1;box-shadow:0 14px 28px rgba(12,30,89,.18);cursor:pointer;transition:.2s ease;white-space:nowrap}.BtnQuickPrimary:hover{background:#081846;color:#fff;transform:translateY(-1px)}.BtnQuickSecondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:9px 15px;border:1px solid #CBD5E1;border-radius:14px;background:#fff;color:#0C1E59;font-size:13px;font-weight:900;text-decoration:none;cursor:pointer}.BtnQuickYellow{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:11px 18px;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}.BtnDangerSoft{background:rgba(239,68,68,.14);color:#DC2626}.BtnSuccessSoft{background:rgba(22,163,74,.15);color:#15803D}
.PageHeaderQuick{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:24px;flex-wrap:wrap}.PageHeaderQuick h1{margin:0;color:#0F172A;font-size:36px;font-weight:900;letter-spacing:-1px;line-height:1.1}.PageHeaderQuick p{margin:8px 0 0;color:#334155;font-size:15px;font-weight:600}.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}.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}.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)}.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}.BadgeGray{background:#F1F5F9;color:#475569}.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}.ModalQuick{border:0;border-radius:24px;overflow:hidden}.ModalQuick .modal-header{background:#0C1E59;color:#fff}.ModalQuick .modal-header small{opacity:.75}.PriceBox{background:#F8FAFC;border:1px solid #E5EAF3;border-radius:18px;padding:15px}.PriceBox span{display:block;color:#64748B;font-size:11px;font-weight:900;text-transform:uppercase}.PriceBox strong{display:block;color:#0C1E59;font-size:24px;font-weight:900}.PriceResult{background:#fff;border:1px dashed #CBD5E1;border-radius:18px;padding:16px}
.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:#fff;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}.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}.LoginHint{background:#F8FAFC;border:1px solid #E5EAF3;border-radius:15px;padding:12px;color:#475569;font-size:12px}.ErrorBody{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}.ErrorCard{width:100%;max-width:520px;background:#fff;border-radius:24px;padding:28px;box-shadow:0 16px 38px rgba(15,23,42,.10);text-align:center}.ErrorCard h1{color:#0C1E59;font-weight:900}
@media(max-width:1100px){.DashboardGrid,.ProcessSteps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:991px){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}.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)}.Sidebar{position:fixed!important;top:0!important;left:0!important;width:285px!important;max-width:86vw!important;height:100vh!important;z-index:1050!important;transform:translateX(-105%)!important;transition:transform .28s ease!important;box-shadow:18px 0 45px rgba(15,23,42,.35)!important;border-radius:0 26px 26px 0!important}.SidebarMobileOpen .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)}.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}.AppMain{margin-left:0;width:100%}.AppContent{padding:16px}.Topbar{display:none}.CardSoft{padding:16px;border-radius:20px}.ModuleHeader{flex-direction:column;align-items:flex-start}.PageHeaderQuick{display:block}.PageHeaderQuick h1{font-size:28px}.PageHeaderQuick .BtnQuickPrimary{width:100%;margin-top:12px}}
@media(max-width:768px){html{-webkit-text-size-adjust:100%!important;text-size-adjust:100%!important}input,select,textarea,.form-control,.form-select{font-size:16px!important;line-height:1.4!important;min-height:46px!important}.DashboardGrid,.ProcessSteps{grid-template-columns:1fr}.TableHeaderCustom{flex-direction:column;align-items:flex-start}.table-responsive{overflow-x:visible!important;width:100%!important}.TableQuick{width:100%!important;min-width:0!important;display:block!important;border-collapse:separate!important;border-spacing:0!important;background:transparent!important}.TableQuick thead{display:none!important}.TableQuick tbody{display:block!important;width:100%!important}.TableQuick 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!important;padding:14px!important;box-shadow:0 14px 32px rgba(15,23,42,.08)!important;overflow:hidden!important}.TableQuick 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;overflow-wrap:anywhere!important;font-size:13px!important;color:#0F172A!important;line-height:1.35!important;min-height:58px!important}.TableQuick 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}.TableQuick 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}.TableQuick td[data-label="Acciones"]{grid-column:1/-1!important;background:#fff!important;border:1px dashed #CBD5E1!important;min-height:auto!important}.PaginationQuick{justify-content:center}.BtnQuickPrimary,.BtnQuickSecondary,.BtnQuickYellow{width:100%}}



/* =========================================================
   FIX GLOBAL MODALES GRANDES - SCROLL INTERNO + BOTONES VISIBLES
   Pegar al final de public/assets/css/app.css
========================================================= */

/* Evita que el modal se salga de la pantalla */
.modal {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Centra y limita el alto del modal */
.modal-dialog {
    width: auto;
    max-height: calc(100vh - 28px);
    margin: 14px auto !important;
}

/* Modal grande profesional */
.modal-lg,
.modal-xl {
    max-width: min(92vw, 1420px) !important;
}

/* En pantallas grandes, que el modal respire mejor */
@media (min-width: 1200px) {
    .modal-xl {
        max-width: min(88vw, 1500px) !important;
    }

    .modal-lg {
        max-width: min(82vw, 1180px) !important;
    }
}

/* Estructura del modal: header fijo, body con scroll, footer visible */
.modal-content {
    max-height: calc(100vh - 28px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 24px !important;
    box-shadow: 0 30px 90px rgba(15, 23, 42, .35) !important;
}

/* Header siempre visible arriba */
.modal-header {
    flex-shrink: 0 !important;
    min-height: 76px;
    background: #0C1E59 !important;
    color: #fff !important;
    border-bottom: 0 !important;
    padding: 20px 24px !important;
}

.modal-header .modal-title {
    color: #fff !important;
    font-weight: 900 !important;
}

.modal-header small,
.modal-header p,
.modal-header span {
    color: rgba(255, 255, 255, .78) !important;
}

/* Botón cerrar visible */
.modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: .9;
}

.modal-header .btn-close:hover {
    opacity: 1;
}

/* Body con scroll interno */
.modal-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 24px !important;
    background: #fff !important;
}

/* Footer siempre visible abajo */
.modal-footer {
    flex-shrink: 0 !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 5 !important;
    background: #ffffff !important;
    border-top: 1px solid #E5EAF3 !important;
    padding: 16px 24px !important;
    box-shadow: 0 -10px 25px rgba(15, 23, 42, .06) !important;
}

/* Botones del footer bonitos y visibles */
.modal-footer .btn,
.modal-footer button,
.modal-footer .BtnQuickPrimary,
.modal-footer .BtnQuickSecondary,
.modal-footer .BtnQuickSuccess,
.modal-footer .BtnQuickDanger {
    min-height: 44px !important;
    border-radius: 14px !important;
    font-weight: 900 !important;
}

/* Si el formulario está dentro del modal, que no corte el footer */
.modal form {
    min-height: 0 !important;
}

/* Scroll más elegante dentro del modal */
.modal-body::-webkit-scrollbar {
    width: 9px;
}

.modal-body::-webkit-scrollbar-track {
    background: #F1F5F9;
    border-radius: 20px;
}

.modal-body::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 20px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
}

/* Backdrop más profesional */
.modal-backdrop.show {
    opacity: .62 !important;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .modal-dialog,
    .modal-lg,
    .modal-xl {
        width: calc(100vw - 18px) !important;
        max-width: calc(100vw - 18px) !important;
        max-height: calc(100vh - 18px) !important;
        margin: 9px auto !important;
    }

    .modal-content {
        max-height: calc(100vh - 18px) !important;
        border-radius: 20px !important;
    }

    .modal-header {
        min-height: auto !important;
        padding: 16px !important;
    }

    .modal-header .modal-title {
        font-size: 18px !important;
        line-height: 1.2 !important;
    }

    .modal-body {
        padding: 16px !important;
    }

    .modal-footer {
        padding: 14px 16px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .modal-footer .btn,
    .modal-footer button,
    .modal-footer .BtnQuickPrimary,
    .modal-footer .BtnQuickSecondary,
    .modal-footer .BtnQuickSuccess,
    .modal-footer .BtnQuickDanger {
        width: 100% !important;
    }
}

/* Celulares pequeños */
@media (max-width: 390px) {

    .modal-dialog,
    .modal-lg,
    .modal-xl {
        width: calc(100vw - 12px) !important;
        max-width: calc(100vw - 12px) !important;
        margin: 6px auto !important;
    }

    .modal-content {
        max-height: calc(100vh - 12px) !important;
        border-radius: 18px !important;
    }
}

/* =========================================================
   MODALES GLOBALES - SCROLL CORRECTO + FOOTER SIEMPRE VISIBLE
   Pegar al final de public/assets/css/app.css
========================================================= */

.modal {
    padding: 0 !important;
}

.modal-dialog {
    margin: 18px auto !important;
    max-height: calc(100dvh - 36px) !important;
}

/* Tamaños profesionales */
.modal-lg {
    max-width: min(92vw, 1100px) !important;
}

.modal-xl {
    max-width: min(94vw, 1500px) !important;
}

/* El modal ya no se corta */
.modal-content,
.ModalQuick {
    max-height: calc(100dvh - 36px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 24px !important;
    box-shadow: 0 30px 90px rgba(15, 23, 42, .35) !important;
}

/* Header fijo arriba */
.modal-header {
    flex: 0 0 auto !important;
    background: #0C1E59 !important;
    color: #fff !important;
    border-bottom: 0 !important;
    padding: 22px 28px !important;
}

.modal-header .modal-title {
    color: #fff !important;
    font-weight: 900 !important;
}

.modal-header small,
.modal-header p,
.modal-header span {
    color: rgba(255,255,255,.78) !important;
}

.modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
    opacity: .9 !important;
}

.modal-header .btn-close:hover {
    opacity: 1 !important;
}

/* Body con scroll real */
.modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 26px 28px !important;
    background: #fff !important;
}

/* Footer visible abajo, sin tapar contenido */
.modal-footer {
    flex: 0 0 auto !important;
    background: #fff !important;
    border-top: 1px solid #E5EAF3 !important;
    padding: 18px 28px !important;
    box-shadow: 0 -12px 28px rgba(15, 23, 42, .08) !important;
    z-index: 20 !important;
}

/* Botones del footer */
.modal-footer .btn,
.modal-footer button,
.modal-footer .BtnQuickPrimary,
.modal-footer .BtnQuickSecondary,
.modal-footer .BtnQuickSuccess,
.modal-footer .BtnQuickDanger {
    min-height: 46px !important;
    border-radius: 14px !important;
    font-weight: 900 !important;
}

/* Separación interna para que lo último no quede pegado al footer */
.modal-body > *:last-child {
    margin-bottom: 12px !important;
}

/* Secciones dentro del modal */
.modal-body .MostradorSection,
.modal-body .CardSoft,
.modal-body .SearchPanel {
    margin-bottom: 22px !important;
}

.modal-body .MostradorSection:last-child,
.modal-body .CardSoft:last-child,
.modal-body .SearchPanel:last-child {
    margin-bottom: 0 !important;
}

/* Si dentro del modal hay una tabla o listado, también tendrá scroll */
.modal-body .table-responsive {
    max-height: 52vh !important;
    overflow-y: auto !important;
    border-radius: 18px !important;
}

/* Scroll bonito */
.modal-body::-webkit-scrollbar,
.modal-body .table-responsive::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

.modal-body::-webkit-scrollbar-track,
.modal-body .table-responsive::-webkit-scrollbar-track {
    background: #F1F5F9;
    border-radius: 20px;
}

.modal-body::-webkit-scrollbar-thumb,
.modal-body .table-responsive::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 20px;
}

.modal-body::-webkit-scrollbar-thumb:hover,
.modal-body .table-responsive::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
}

/* Fondo oscuro */
.modal-backdrop.show {
    opacity: .62 !important;
}

/* Evita que el body se descuadre cuando abre modal */
body.modal-open {
    overflow: hidden !important;
    padding-right: 0 !important;
}

/* =========================================================
   MODAL EN CELULAR
========================================================= */

@media (max-width: 768px) {

    .modal-dialog,
    .modal-lg,
    .modal-xl {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
        margin: 8px auto !important;
    }

    .modal-content,
    .ModalQuick {
        max-height: calc(100dvh - 16px) !important;
        border-radius: 20px !important;
    }

    .modal-header {
        padding: 16px !important;
    }

    .modal-header .modal-title {
        font-size: 18px !important;
        line-height: 1.2 !important;
    }

    .modal-body {
        padding: 16px !important;
    }

    .modal-body .table-responsive {
        max-height: 48vh !important;
    }

    .modal-footer {
        padding: 14px 16px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .modal-footer .btn,
    .modal-footer button,
    .modal-footer .BtnQuickPrimary,
    .modal-footer .BtnQuickSecondary,
    .modal-footer .BtnQuickSuccess,
    .modal-footer .BtnQuickDanger {
        width: 100% !important;
    }
}

/* Celulares pequeños */
@media (max-width: 390px) {

    .modal-dialog,
    .modal-lg,
    .modal-xl {
        width: calc(100vw - 10px) !important;
        max-width: calc(100vw - 10px) !important;
        margin: 5px auto !important;
    }

    .modal-content,
    .ModalQuick {
        max-height: calc(100dvh - 10px) !important;
        border-radius: 18px !important;
    }
}



/* =========================================================
   FIX GLOBAL MODALES - SCROLL REAL EN TODOS LOS MODALES
   Pegar al final de public/assets/css/app.css
========================================================= */

.modal {
    padding: 0 !important;
}

.modal-dialog {
    margin: 18px auto !important;
    max-height: calc(100dvh - 36px) !important;
}

/* Modal grande profesional */
.modal-xl {
    max-width: min(96vw, 1600px) !important;
}

.modal-lg {
    max-width: min(94vw, 1100px) !important;
}

/* Contenedor principal del modal */
.modal-content,
.ModalQuick {
    height: calc(100dvh - 36px) !important;
    max-height: calc(100dvh - 36px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 24px !important;
    box-shadow: 0 30px 90px rgba(15, 23, 42, .35) !important;
}

/* IMPORTANTE:
   Cuando el form envuelve header, body y footer,
   también debe ser flex para que el body tenga scroll.
*/
.modal-content > form,
.ModalQuick > form {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* Header fijo arriba */
.modal-header {
    flex: 0 0 auto !important;
    background: #0C1E59 !important;
    color: #fff !important;
    border-bottom: 0 !important;
    padding: 22px 28px !important;
}

.modal-header .modal-title {
    color: #fff !important;
    font-weight: 900 !important;
}

.modal-header small,
.modal-header p,
.modal-header span {
    color: rgba(255,255,255,.78) !important;
}

.modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
    opacity: .9 !important;
}

.modal-header .btn-close:hover {
    opacity: 1 !important;
}

/* Body con scroll real */
.modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 26px 28px 34px 28px !important;
    background: #fff !important;
}

/* Footer siempre visible abajo */
.modal-footer {
    flex: 0 0 auto !important;
    background: #fff !important;
    border-top: 1px solid #E5EAF3 !important;
    padding: 18px 28px !important;
    box-shadow: 0 -12px 28px rgba(15, 23, 42, .08) !important;
    z-index: 50 !important;
}

/* Espacio extra al final del body para que no quede pegado al footer */
.modal-body::after {
    content: "";
    display: block;
    height: 20px;
}

/* Secciones internas */
.modal-body .MostradorSection,
.modal-body .CardSoft,
.modal-body .SearchPanel {
    margin-bottom: 24px !important;
}

.modal-body .MostradorSection:last-child,
.modal-body .CardSoft:last-child,
.modal-body .SearchPanel:last-child {
    margin-bottom: 0 !important;
}

/* Tablas dentro de modales */
.modal-body .table-responsive {
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    border-radius: 18px !important;
}

/* Botones del footer */
.modal-footer .btn,
.modal-footer button,
.modal-footer .BtnQuickPrimary,
.modal-footer .BtnQuickSecondary,
.modal-footer .BtnQuickSuccess,
.modal-footer .BtnQuickDanger {
    min-height: 46px !important;
    border-radius: 14px !important;
    font-weight: 900 !important;
}

/* Scroll bonito */
.modal-body::-webkit-scrollbar {
    width: 10px;
}

.modal-body::-webkit-scrollbar-track {
    background: #F1F5F9;
    border-radius: 20px;
}

.modal-body::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 20px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
}

/* Evita descuadre del body */
body.modal-open {
    overflow: hidden !important;
    padding-right: 0 !important;
}

/* Backdrop */
.modal-backdrop.show {
    opacity: .62 !important;
}

/* =========================================================
   RESPONSIVE MODALES
========================================================= */

@media (max-width: 768px) {

    .modal-dialog,
    .modal-lg,
    .modal-xl {
        width: calc(100vw - 14px) !important;
        max-width: calc(100vw - 14px) !important;
        max-height: calc(100dvh - 14px) !important;
        margin: 7px auto !important;
    }

    .modal-content,
    .ModalQuick {
        height: calc(100dvh - 14px) !important;
        max-height: calc(100dvh - 14px) !important;
        border-radius: 20px !important;
    }

    .modal-header {
        padding: 16px !important;
    }

    .modal-header .modal-title {
        font-size: 18px !important;
        line-height: 1.2 !important;
    }

    .modal-body {
        padding: 16px 16px 28px 16px !important;
    }

    .modal-footer {
        padding: 14px 16px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .modal-footer .btn,
    .modal-footer button,
    .modal-footer .BtnQuickPrimary,
    .modal-footer .BtnQuickSecondary,
    .modal-footer .BtnQuickSuccess,
    .modal-footer .BtnQuickDanger {
        width: 100% !important;
    }
}

@media (max-width: 390px) {

    .modal-dialog,
    .modal-lg,
    .modal-xl {
        width: calc(100vw - 8px) !important;
        max-width: calc(100vw - 8px) !important;
        margin: 4px auto !important;
    }

    .modal-content,
    .ModalQuick {
        height: calc(100dvh - 8px) !important;
        max-height: calc(100dvh - 8px) !important;
        border-radius: 18px !important;
    }
}

/* =========================================================
   HOME / DASHBOARD MEJORADO
   Color + tarjetas 2 en 2 en celular
========================================================= */

.HomeDashboard {
    width: 100%;
}

/* Header principal del dashboard */
.HomeDashboard > .CardSoft:first-child {
    background: linear-gradient(135deg, #0C1E59 0%, #132E88 58%, #FCB317 160%) !important;
    color: #fff !important;
    border: 0 !important;
    position: relative;
    overflow: hidden;
}

.HomeDashboard > .CardSoft:first-child::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    right: -90px;
    top: -110px;
    background: rgba(252, 179, 23, .22);
    border-radius: 50%;
}

.HomeDashboard > .CardSoft:first-child::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    left: -80px;
    bottom: -90px;
    background: rgba(255, 255, 255, .10);
    border-radius: 50%;
}

.HomeDashboard > .CardSoft:first-child .ModuleHeader {
    position: relative;
    z-index: 2;
}

.HomeDashboard > .CardSoft:first-child h4,
.HomeDashboard > .CardSoft:first-child p {
    color: #fff !important;
}

.HomeDashboard > .CardSoft:first-child p {
    opacity: .86;
}

.HomeDashboard > .CardSoft:first-child .ModuleBadge {
    background: rgba(252, 179, 23, .18) !important;
    color: #FCB317 !important;
    border: 1px solid rgba(252, 179, 23, .30);
}

.HomeDashboard #BtnRefrescarHome {
    background: #FCB317 !important;
    color: #0C1E59 !important;
    border: 0 !important;
    box-shadow: 0 16px 32px rgba(252, 179, 23, .25);
}

.HomeDashboard #BtnRefrescarHome:hover {
    background: #ffd05a !important;
    transform: translateY(-1px);
}

/* Tarjetas métricas */
.HomeDashboard > .row.g-3.mb-4 > [class*="col-"] {
    --home-color: #0C1E59;
    --home-bg: #EEF4FF;
    --home-border: rgba(12, 30, 89, .14);
}

.HomeDashboard > .row.g-3.mb-4 > [class*="col-"]:nth-child(1) {
    --home-color: #2563EB;
    --home-bg: #EFF6FF;
    --home-border: rgba(37, 99, 235, .18);
}

.HomeDashboard > .row.g-3.mb-4 > [class*="col-"]:nth-child(2) {
    --home-color: #16A34A;
    --home-bg: #F0FDF4;
    --home-border: rgba(22, 163, 74, .18);
}

.HomeDashboard > .row.g-3.mb-4 > [class*="col-"]:nth-child(3) {
    --home-color: #9333EA;
    --home-bg: #FAF5FF;
    --home-border: rgba(147, 51, 234, .18);
}

.HomeDashboard > .row.g-3.mb-4 > [class*="col-"]:nth-child(4) {
    --home-color: #EA580C;
    --home-bg: #FFF7ED;
    --home-border: rgba(234, 88, 12, .18);
}

.HomeDashboard > .row.g-3.mb-4 > [class*="col-"] > .CardSoft,
.HomeDashboard > .row.g-3.mb-4 > [class*="col-"] > a > .CardSoft {
    min-height: 132px;
    padding: 22px !important;
    border: 1px solid var(--home-border) !important;
    background: linear-gradient(135deg, #fff 0%, var(--home-bg) 100%) !important;
    position: relative;
    overflow: hidden;
    transition: all .25s ease;
}

.HomeDashboard > .row.g-3.mb-4 > [class*="col-"] > .CardSoft:hover,
.HomeDashboard > .row.g-3.mb-4 > [class*="col-"] > a > .CardSoft:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 45px rgba(15, 23, 42, .10) !important;
}

.HomeDashboard > .row.g-3.mb-4 > [class*="col-"] > .CardSoft::before,
.HomeDashboard > .row.g-3.mb-4 > [class*="col-"] > a > .CardSoft::before {
    content: "";
    position: absolute;
    width: 88px;
    height: 88px;
    right: -26px;
    top: -26px;
    background: var(--home-color);
    opacity: .12;
    border-radius: 50%;
}

.HomeDashboard > .row.g-3.mb-4 > [class*="col-"] > .CardSoft::after,
.HomeDashboard > .row.g-3.mb-4 > [class*="col-"] > a > .CardSoft::after {
    content: "";
    position: absolute;
    width: 7px;
    height: 54px;
    left: 0;
    top: 24px;
    background: var(--home-color);
    border-radius: 0 20px 20px 0;
}

/* Corrige el texto de las métricas para que no salga todo en una línea */
.HomeDashboard > .row.g-3.mb-4 .MostradorTarifaBox {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: block !important;
}

.HomeDashboard > .row.g-3.mb-4 .MostradorTarifaBox span {
    display: block !important;
    color: #334155 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    margin-bottom: 8px;
}

.HomeDashboard > .row.g-3.mb-4 .MostradorTarifaBox strong {
    display: block !important;
    color: var(--home-color) !important;
    font-size: 25px !important;
    line-height: 1.1 !important;
    font-weight: 950 !important;
    letter-spacing: -.6px;
}

.HomeDashboard > .row.g-3.mb-4 .text-muted {
    color: #475569 !important;
    font-size: 14px;
}

/* Tarjetas con enlaces */
.HomeDashboard a .CardSoft {
    cursor: pointer;
}

.HomeDashboard a:hover .CardSoft {
    border-color: var(--home-color) !important;
}

/* Tablas del home con un toque visual */
.HomeDashboard > .row.g-4 .CardSoft {
    border-top: 5px solid #0C1E59 !important;
}

.HomeDashboard > .row.g-4 .TableHeaderCustom h5 {
    color: #0C1E59 !important;
}

/* =========================================================
   HOME RESPONSIVE
========================================================= */

@media (max-width: 575.98px) {

    .HomeDashboard {
        padding-bottom: 20px;
    }

    .HomeDashboard > .CardSoft:first-child {
        border-radius: 20px !important;
        padding: 20px !important;
    }

    .HomeDashboard > .CardSoft:first-child .ModuleHeader {
        display: block !important;
    }

    .HomeDashboard > .CardSoft:first-child h4 {
        font-size: 24px !important;
        margin-top: 10px;
    }

    .HomeDashboard > .CardSoft:first-child p {
        font-size: 14px !important;
        line-height: 1.55;
    }

    .HomeDashboard #BtnRefrescarHome {
        width: 100% !important;
        margin-top: 14px;
        min-height: 46px;
    }

    /* Aquí se ponen las tarjetas 2 en 2 */
    .HomeDashboard > .row.g-3.mb-4 {
        --bs-gutter-x: .65rem !important;
        --bs-gutter-y: .65rem !important;
    }

    .HomeDashboard > .row.g-3.mb-4 > .col-xl-3,
    .HomeDashboard > .row.g-3.mb-4 > .col-md-6,
    .HomeDashboard > .row.g-3.mb-4 > [class*="col-"] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }

    .HomeDashboard > .row.g-3.mb-4 > [class*="col-"] > .CardSoft,
    .HomeDashboard > .row.g-3.mb-4 > [class*="col-"] > a > .CardSoft {
        min-height: 118px;
        padding: 15px 13px !important;
        border-radius: 18px !important;
    }

    .HomeDashboard > .row.g-3.mb-4 .MostradorTarifaBox span {
        font-size: 12px !important;
        line-height: 1.25;
        min-height: 30px;
    }

    .HomeDashboard > .row.g-3.mb-4 .MostradorTarifaBox strong {
        font-size: 18px !important;
        letter-spacing: -.3px;
    }

    .HomeDashboard > .row.g-3.mb-4 .text-muted {
        font-size: 12px !important;
        line-height: 1.25;
    }

    .HomeDashboard > .row.g-3.mb-4 > [class*="col-"] > .CardSoft::before,
    .HomeDashboard > .row.g-3.mb-4 > [class*="col-"] > a > .CardSoft::before {
        width: 62px;
        height: 62px;
        right: -22px;
        top: -22px;
    }

    .HomeDashboard > .row.g-3.mb-4 > [class*="col-"] > .CardSoft::after,
    .HomeDashboard > .row.g-3.mb-4 > [class*="col-"] > a > .CardSoft::after {
        height: 40px;
        top: 18px;
        width: 5px;
    }
}

/* Celulares muy pequeños */
@media (max-width: 360px) {
    .HomeDashboard > .row.g-3.mb-4 > [class*="col-"] > .CardSoft,
    .HomeDashboard > .row.g-3.mb-4 > [class*="col-"] > a > .CardSoft {
        padding: 13px 11px !important;
    }

    .HomeDashboard > .row.g-3.mb-4 .MostradorTarifaBox strong {
        font-size: 16px !important;
    }

    .HomeDashboard > .row.g-3.mb-4 .MostradorTarifaBox span,
    .HomeDashboard > .row.g-3.mb-4 .text-muted {
        font-size: 11px !important;
    }
}

/* =========================================================
   SIDEBAR CON SUBMENÚS - AMERICANSOFT
========================================================= */

.SidebarNav {
    padding-bottom: 28px;
}

.SidebarLink,
.SidebarGroupToggle,
.SidebarSubLink {
    user-select: none;
}

.SidebarLink span {
    flex: 1;
}

.SidebarLink.active {
    background: rgba(252, 179, 23, .16) !important;
    color: #FCB317 !important;
    box-shadow: inset 4px 0 0 #FCB317;
}

.SidebarLink.active i {
    color: #FCB317 !important;
}

.SidebarGroup {
    margin: 6px 0;
}

.SidebarGroupToggle {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: rgba(255,255,255,.72);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 18px;
    border-radius: 16px;
    font-weight: 900;
    transition: all .22s ease;
}

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

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

.SidebarGroupToggle:hover {
    background: rgba(255,255,255,.08);
    color: #fff;
}

.SidebarGroupArrow {
    font-size: 13px !important;
    transition: transform .22s ease;
}

.SidebarGroup.is-open .SidebarGroupArrow {
    transform: rotate(180deg);
}

.SidebarSubmenu {
    display: none;
    padding: 4px 0 8px 0;
    margin-left: 14px;
    border-left: 1px solid rgba(255,255,255,.10);
}

.SidebarGroup.is-open .SidebarSubmenu {
    display: block;
}

.SidebarSubLink {
    color: rgba(255,255,255,.68);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 14px 11px 18px;
    margin: 3px 8px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 800;
    transition: all .22s ease;
    position: relative;
}

.SidebarSubLink::before {
    content: "";
    position: absolute;
    left: -15px;
    top: 50%;
    width: 13px;
    height: 1px;
    background: rgba(255,255,255,.14);
}

.SidebarSubLink i {
    font-size: 16px;
    opacity: .9;
}

.SidebarSubLink:hover {
    background: rgba(255,255,255,.08);
    color: #fff;
    transform: translateX(2px);
}

.SidebarSubLink.active {
    background: #FCB317 !important;
    color: #0C1E59 !important;
    box-shadow: 0 10px 24px rgba(252, 179, 23, .25);
}

.SidebarSubLink.active i {
    color: #0C1E59 !important;
}

/* Grupo abierto con color */
.SidebarGroup.is-open > .SidebarGroupToggle {
    background: rgba(255,255,255,.07);
    color: #fff;
}

.SidebarGroup.is-open > .SidebarGroupToggle > span > i {
    color: #FCB317;
}

/* Scroll bonito en el sidebar */
.Sidebar {
    overflow-y: auto;
    overflow-x: hidden;
}

.Sidebar::-webkit-scrollbar {
    width: 7px;
}

.Sidebar::-webkit-scrollbar-track {
    background: rgba(255,255,255,.04);
}

.Sidebar::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.18);
    border-radius: 20px;
}

.Sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(252,179,23,.45);
}

/* Ajuste mobile */
@media (max-width: 768px) {
    .SidebarGroupToggle {
        padding: 12px 16px;
    }

    .SidebarSubLink {
        padding: 11px 12px 11px 16px;
        font-size: 14px;
    }
}

/* =========================================================
   REPORTES / DASHBOARD DE INDICADORES
========================================================= */

.ReportesDashboard {
    width: 100%;
}

/* Header principal de reportes */
.ReportesDashboard > .CardSoft:first-child {
    background: linear-gradient(135deg, #0C1E59 0%, #132E88 58%, #FCB317 160%) !important;
    color: #fff !important;
    border: 0 !important;
    position: relative;
    overflow: hidden;
}

.ReportesDashboard > .CardSoft:first-child::before {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    right: -100px;
    top: -120px;
    background: rgba(252, 179, 23, .24);
    border-radius: 50%;
}

.ReportesDashboard > .CardSoft:first-child::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    left: -70px;
    bottom: -90px;
    background: rgba(255,255,255,.10);
    border-radius: 50%;
}

.ReportesDashboard > .CardSoft:first-child .ModuleHeader,
.ReportesDashboard > .CardSoft:first-child .SearchPanel {
    position: relative;
    z-index: 2;
}

.ReportesDashboard > .CardSoft:first-child h4,
.ReportesDashboard > .CardSoft:first-child p {
    color: #fff !important;
}

.ReportesDashboard > .CardSoft:first-child p {
    opacity: .88;
}

.ReportesDashboard > .CardSoft:first-child .ModuleBadge {
    background: rgba(252, 179, 23, .18) !important;
    color: #FCB317 !important;
    border: 1px solid rgba(252, 179, 23, .32);
}

/* Panel de filtros dentro del header */
.ReportesDashboard > .CardSoft:first-child .SearchPanel {
    background: rgba(255,255,255,.96) !important;
    border: 1px solid rgba(255,255,255,.25) !important;
    box-shadow: 0 22px 50px rgba(15, 23, 42, .16) !important;
}

.ReportesDashboard > .CardSoft:first-child .SearchPanel label {
    color: #0C1E59 !important;
}

.ReportesDashboard > .CardSoft:first-child .SearchPanel .form-control {
    background: #fff !important;
}

/* Botones de filtro */
.ReportesDashboard #BtnFiltrarReportes {
    background: #0C1E59 !important;
    color: #fff !important;
    box-shadow: 0 14px 30px rgba(12, 30, 89, .25);
}

.ReportesDashboard #BtnMesActualReporte {
    background: #FCB317 !important;
    color: #0C1E59 !important;
    border: 0 !important;
    box-shadow: 0 14px 30px rgba(252, 179, 23, .28);
}

.ReportesDashboard #BtnMesActualReporte:hover,
.ReportesDashboard #BtnFiltrarReportes:hover {
    transform: translateY(-1px);
}

/* Tarjetas de indicadores */
.ReportesDashboard > .row.g-3.mb-4 > [class*="col-"] {
    --rep-color: #0C1E59;
    --rep-bg: #EEF4FF;
    --rep-border: rgba(12, 30, 89, .16);
}

.ReportesDashboard > .row.g-3.mb-4 > [class*="col-"]:nth-child(1) {
    --rep-color: #2563EB;
    --rep-bg: #EFF6FF;
    --rep-border: rgba(37, 99, 235, .20);
}

.ReportesDashboard > .row.g-3.mb-4 > [class*="col-"]:nth-child(2) {
    --rep-color: #16A34A;
    --rep-bg: #F0FDF4;
    --rep-border: rgba(22, 163, 74, .20);
}

.ReportesDashboard > .row.g-3.mb-4 > [class*="col-"]:nth-child(3) {
    --rep-color: #EA580C;
    --rep-bg: #FFF7ED;
    --rep-border: rgba(234, 88, 12, .20);
}

.ReportesDashboard > .row.g-3.mb-4 > [class*="col-"]:nth-child(4) {
    --rep-color: #9333EA;
    --rep-bg: #FAF5FF;
    --rep-border: rgba(147, 51, 234, .20);
}

.ReportesDashboard > .row.g-3.mb-4 > [class*="col-"] > .CardSoft {
    min-height: 132px;
    padding: 22px !important;
    border: 1px solid var(--rep-border) !important;
    background: linear-gradient(135deg, #fff 0%, var(--rep-bg) 100%) !important;
    position: relative;
    overflow: hidden;
    transition: all .25s ease;
}

.ReportesDashboard > .row.g-3.mb-4 > [class*="col-"] > .CardSoft:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 45px rgba(15, 23, 42, .10) !important;
}

.ReportesDashboard > .row.g-3.mb-4 > [class*="col-"] > .CardSoft::before {
    content: "";
    position: absolute;
    width: 88px;
    height: 88px;
    right: -26px;
    top: -26px;
    background: var(--rep-color);
    opacity: .12;
    border-radius: 50%;
}

.ReportesDashboard > .row.g-3.mb-4 > [class*="col-"] > .CardSoft::after {
    content: "";
    position: absolute;
    width: 7px;
    height: 54px;
    left: 0;
    top: 24px;
    background: var(--rep-color);
    border-radius: 0 20px 20px 0;
}

/* Métricas internas */
.ReportesDashboard > .row.g-3.mb-4 .MostradorTarifaBox {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: block !important;
}

.ReportesDashboard > .row.g-3.mb-4 .MostradorTarifaBox span {
    display: block !important;
    color: #334155 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    margin-bottom: 8px;
}

.ReportesDashboard > .row.g-3.mb-4 .MostradorTarifaBox strong {
    display: block !important;
    color: var(--rep-color) !important;
    font-size: 25px !important;
    line-height: 1.1 !important;
    font-weight: 950 !important;
    letter-spacing: -.6px;
}

.ReportesDashboard > .row.g-3.mb-4 .text-muted {
    color: #475569 !important;
    font-size: 14px;
}

/* Tablas de reportes */
.ReportesDashboard > .row.g-4 .CardSoft {
    border-top: 5px solid #0C1E59 !important;
    transition: all .25s ease;
}

.ReportesDashboard > .row.g-4 .CardSoft:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 42px rgba(15, 23, 42, .08) !important;
}

.ReportesDashboard > .row.g-4 .TableHeaderCustom h5 {
    color: #0C1E59 !important;
}

.ReportesDashboard > .row.g-4 .TableHeaderCustom p {
    color: #64748B !important;
}

/* Colores diferentes para bloques de tablas */
.ReportesDashboard > .row.g-4:nth-of-type(4) .CardSoft:nth-child(1),
.ReportesDashboard > .row.g-4 .col-xl-6:nth-child(1) .CardSoft {
    border-top-color: #2563EB !important;
}

.ReportesDashboard > .row.g-4 .col-xl-6:nth-child(2) .CardSoft {
    border-top-color: #16A34A !important;
}

.ReportesDashboard > .row.g-4 .col-xl-4:nth-child(1) .CardSoft {
    border-top-color: #9333EA !important;
}

.ReportesDashboard > .row.g-4 .col-xl-4:nth-child(2) .CardSoft {
    border-top-color: #EA580C !important;
}

.ReportesDashboard > .row.g-4 .col-xl-4:nth-child(3) .CardSoft {
    border-top-color: #0C1E59 !important;
}

/* =========================================================
   REPORTES RESPONSIVE
========================================================= */

@media (max-width: 575.98px) {

    .ReportesDashboard {
        padding-bottom: 20px;
    }

    .ReportesDashboard > .CardSoft:first-child {
        border-radius: 20px !important;
        padding: 20px !important;
    }

    .ReportesDashboard > .CardSoft:first-child .ModuleHeader {
        display: block !important;
    }

    .ReportesDashboard > .CardSoft:first-child h4 {
        font-size: 24px !important;
        margin-top: 10px;
    }

    .ReportesDashboard > .CardSoft:first-child p {
        font-size: 14px !important;
        line-height: 1.55;
    }

    .ReportesDashboard > .CardSoft:first-child .SearchPanel {
        padding: 15px !important;
        border-radius: 18px !important;
    }

    .ReportesDashboard #BtnFiltrarReportes,
    .ReportesDashboard #BtnMesActualReporte {
        width: 100% !important;
        min-height: 46px;
    }

    /* Tarjetas 2 en 2 en celular */
    .ReportesDashboard > .row.g-3.mb-4 {
        --bs-gutter-x: .65rem !important;
        --bs-gutter-y: .65rem !important;
    }

    .ReportesDashboard > .row.g-3.mb-4 > .col-xl-3,
    .ReportesDashboard > .row.g-3.mb-4 > .col-md-6,
    .ReportesDashboard > .row.g-3.mb-4 > [class*="col-"] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }

    .ReportesDashboard > .row.g-3.mb-4 > [class*="col-"] > .CardSoft {
        min-height: 118px;
        padding: 15px 13px !important;
        border-radius: 18px !important;
    }

    .ReportesDashboard > .row.g-3.mb-4 .MostradorTarifaBox span {
        font-size: 12px !important;
        line-height: 1.25;
        min-height: 30px;
    }

    .ReportesDashboard > .row.g-3.mb-4 .MostradorTarifaBox strong {
        font-size: 18px !important;
        letter-spacing: -.3px;
    }

    .ReportesDashboard > .row.g-3.mb-4 .text-muted {
        font-size: 12px !important;
        line-height: 1.25;
    }

    .ReportesDashboard > .row.g-3.mb-4 > [class*="col-"] > .CardSoft::before {
        width: 62px;
        height: 62px;
        right: -22px;
        top: -22px;
    }

    .ReportesDashboard > .row.g-3.mb-4 > [class*="col-"] > .CardSoft::after {
        height: 40px;
        top: 18px;
        width: 5px;
    }
}

/* Celulares muy pequeños */
@media (max-width: 360px) {

    .ReportesDashboard > .row.g-3.mb-4 > [class*="col-"] > .CardSoft {
        padding: 13px 11px !important;
    }

    .ReportesDashboard > .row.g-3.mb-4 .MostradorTarifaBox strong {
        font-size: 16px !important;
    }

    .ReportesDashboard > .row.g-3.mb-4 .MostradorTarifaBox span,
    .ReportesDashboard > .row.g-3.mb-4 .text-muted {
        font-size: 11px !important;
    }
}

/* =========================================================
   CONFIGURACIÓN - DISEÑO PREMIUM
========================================================= */

.ConfiguracionDashboard > .CardSoft:first-child {
    background: linear-gradient(135deg, #0C1E59 0%, #132E88 58%, #FCB317 160%) !important;
    color: #fff !important;
    border: 0 !important;
    position: relative;
    overflow: hidden;
}

.ConfiguracionDashboard > .CardSoft:first-child::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    right: -90px;
    top: -110px;
    background: rgba(252, 179, 23, .24);
    border-radius: 50%;
}

.ConfiguracionDashboard > .CardSoft:first-child .ModuleHeader {
    position: relative;
    z-index: 2;
}

.ConfiguracionDashboard > .CardSoft:first-child h4,
.ConfiguracionDashboard > .CardSoft:first-child p {
    color: #fff !important;
}

.ConfiguracionDashboard > .CardSoft:first-child p {
    opacity: .86;
}

.ConfiguracionDashboard > .CardSoft:first-child .ModuleBadge {
    background: rgba(252, 179, 23, .18) !important;
    color: #FCB317 !important;
    border: 1px solid rgba(252, 179, 23, .30);
}

.ConfiguracionDashboard .CardSoft {
    border-top: 5px solid #0C1E59 !important;
}

.ConfiguracionDashboard .TableHeaderCustom h5 {
    color: #0C1E59 !important;
}

.ConfiguracionDashboard .form-control-color {
    min-height: 48px;
    padding: 6px !important;
}

.FormSwitchCustom {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.FormSwitchCustom .form-check-input {
    width: 48px;
    height: 25px;
    cursor: pointer;
}

.ConfigPreviewCard {
    padding: 0 !important;
    overflow: hidden;
    border-top: 0 !important;
}

.ConfigPreviewHeader {
    padding: 20px;
    color: #fff;
    font-weight: 900;
    font-size: 18px;
}

.ConfigPreviewBody {
    padding: 22px;
}

.ConfigPreviewBody h5 {
    color: #0C1E59;
    font-weight: 950;
    margin-bottom: 6px;
}

.ConfigPreviewBody p {
    color: #64748B;
    font-weight: 700;
}

.ConfigPreviewLine {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 0;
    border-top: 1px solid #E5EAF3;
}

.ConfigPreviewLine span {
    color: #64748B;
    font-weight: 800;
}

.ConfigPreviewLine strong {
    color: #0C1E59;
    font-weight: 950;
}

.ConfigSaveButton {
    min-height: 52px;
    border-radius: 16px !important;
    font-weight: 950 !important;
}

@media (max-width: 768px) {
    .ConfiguracionDashboard > .CardSoft:first-child .ModuleHeader {
        display: block !important;
    }

    .ConfiguracionDashboard #BtnRecargarConfiguracion {
        width: 100%;
        margin-top: 14px;
    }
}


/* =========================================================
   THEME GLOBAL DESDE CONFIGURACIÓN
========================================================= */

.Sidebar {
    background: var(--as-primary, #0C1E59) !important;
}

.SidebarLogoIcon {
    background: #fff !important;
    color: var(--as-primary, #0C1E59) !important;
    overflow: hidden;
}

.SidebarLogoIcon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
}

.SidebarLogo strong {
    color: #fff !important;
}

.SidebarLogo span {
    color: rgba(255,255,255,.72) !important;
}

.SidebarLink.active,
.SidebarSubLink.active {
    background: var(--as-secondary, #FCB317) !important;
    color: var(--as-primary, #0C1E59) !important;
}

.SidebarLink.active i,
.SidebarSubLink.active i {
    color: var(--as-primary, #0C1E59) !important;
}

.SidebarGroup.is-open > .SidebarGroupToggle > span > i {
    color: var(--as-secondary, #FCB317) !important;
}

.ModuleBadge {
    background: var(--as-secondary-soft, rgba(252,179,23,.16)) !important;
    color: #8A5A00 !important;
}

.BtnQuickPrimary,
button.BtnQuickPrimary,
a.BtnQuickPrimary {
    background: var(--as-primary, #0C1E59) !important;
    color: #fff !important;
    border-color: var(--as-primary, #0C1E59) !important;
}

.BtnQuickPrimary:hover,
button.BtnQuickPrimary:hover,
a.BtnQuickPrimary:hover {
    filter: brightness(1.08);
}

.BtnQuickSecondary,
button.BtnQuickSecondary,
a.BtnQuickSecondary {
    border-color: rgba(12, 30, 89, .16) !important;
    color: var(--as-primary, #0C1E59) !important;
}

.TableHeaderCustom h5,
.ModuleHeader h4,
.CardSoft h4,
.CardSoft h5 {
    color: var(--as-primary, #0C1E59) !important;
}

.CodeBadge {
    color: var(--as-primary, #0C1E59) !important;
}

.PaginationQuick button.active {
    background: var(--as-primary, #0C1E59) !important;
    border-color: var(--as-primary, #0C1E59) !important;
}

.modal-header {
    background: var(--as-primary, #0C1E59) !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--as-secondary, #FCB317) !important;
    box-shadow: 0 0 0 .22rem rgba(252, 179, 23, .20) !important;
}

/* Header premium de Home, Reportes y Configuración */
.HomeDashboard > .CardSoft:first-child,
.ReportesDashboard > .CardSoft:first-child,
.ConfiguracionDashboard > .CardSoft:first-child {
    background: linear-gradient(
        135deg,
        var(--as-primary, #0C1E59) 0%,
        var(--as-primary, #0C1E59) 58%,
        var(--as-secondary, #FCB317) 160%
    ) !important;
}

.HomeDashboard #BtnRefrescarHome,
.ReportesDashboard #BtnMesActualReporte {
    background: var(--as-secondary, #FCB317) !important;
    color: var(--as-primary, #0C1E59) !important;
}

.SidebarLogo {
    gap: 13px;
}

.SidebarLogo strong {
    display: block;
    max-width: 165px;
    font-size: 17px;
    line-height: 1.15;
    white-space: normal;
}

.SidebarLogo span {
    display: block;
    max-width: 165px;
    font-size: 12px;
    line-height: 1.15;
}

@media (max-width: 768px) {
    .SidebarLogo strong {
        max-width: 190px;
    }

    .SidebarLogo span {
        max-width: 190px;
    }
}

/* =========================================================
   SIDEBAR PREMIUM - AMERICANSOFT
   Pegar al final de app.css
========================================================= */

.Sidebar {
    background:
        radial-gradient(circle at 20% 0%, rgba(252, 179, 23, .18) 0%, transparent 28%),
        radial-gradient(circle at 100% 45%, rgba(255, 255, 255, .08) 0%, transparent 26%),
        linear-gradient(180deg, var(--as-primary, #0C1E59) 0%, #071542 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 18px 0 45px rgba(15, 23, 42, .16);
}

/* Línea decorativa arriba */
.Sidebar::before {
    content: "";
    display: block;
    height: 5px;
    width: 100%;
    background: linear-gradient(90deg, var(--as-secondary, #FCB317), #fff3b0, var(--as-secondary, #FCB317));
}

/* Logo */
.SidebarLogo {
    margin: 24px 18px 22px 18px !important;
    padding: 15px !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, .075) !important;
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 40px rgba(0,0,0,.12);
}

.SidebarLogoIcon {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, #fff 0%, #F8FAFC 100%) !important;
    color: var(--as-primary, #0C1E59) !important;
    box-shadow: 0 12px 24px rgba(0,0,0,.18);
}

.SidebarLogoIcon i {
    font-size: 28px !important;
}

.SidebarLogoIcon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
}

.SidebarLogo strong {
    color: #fff !important;
    font-size: 18px !important;
    line-height: 1.05 !important;
    font-weight: 950 !important;
    letter-spacing: -.4px;
    text-shadow: 0 3px 12px rgba(0,0,0,.22);
}

.SidebarLogo span {
    color: var(--as-secondary, #FCB317) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: .2px;
}

/* Separador debajo del logo */
.SidebarLogo::after {
    content: "";
    position: absolute;
}

/* Navegación */
.SidebarNav {
    padding: 0 14px 30px 14px !important;
}

/* Link principal */
.SidebarLink {
    min-height: 50px;
    margin: 6px 0 !important;
    padding: 13px 15px !important;
    border-radius: 17px !important;
    color: rgba(255,255,255,.76) !important;
    font-weight: 900 !important;
    letter-spacing: -.2px;
    transition: all .24s ease;
    position: relative;
    overflow: hidden;
}

.SidebarLink i {
    width: 26px;
    height: 26px;
    min-width: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.78) !important;
    font-size: 18px !important;
    transition: all .24s ease;
}

.SidebarLink:hover {
    background: rgba(255,255,255,.10) !important;
    color: #fff !important;
    transform: translateX(4px);
}

.SidebarLink:hover i {
    color: var(--as-secondary, #FCB317) !important;
}

/* Activo principal */
.SidebarLink.active {
    background: linear-gradient(135deg, var(--as-secondary, #FCB317), #FFD76A) !important;
    color: var(--as-primary, #0C1E59) !important;
    box-shadow: 0 14px 30px rgba(252, 179, 23, .25);
}

.SidebarLink.active i {
    color: var(--as-primary, #0C1E59) !important;
}

/* Grupos */
.SidebarGroup {
    margin: 8px 0 !important;
}

.SidebarGroupToggle {
    min-height: 52px;
    padding: 13px 15px !important;
    border-radius: 17px !important;
    color: rgba(255,255,255,.76) !important;
    font-weight: 950 !important;
    letter-spacing: -.2px;
    background: transparent !important;
    transition: all .24s ease;
}

.SidebarGroupToggle span {
    gap: 13px !important;
}

.SidebarGroupToggle span > i {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 10px;
    background: rgba(255,255,255,.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.84) !important;
    font-size: 17px !important;
    transition: all .24s ease;
}

.SidebarGroupToggle:hover {
    background: rgba(255,255,255,.10) !important;
    color: #fff !important;
    transform: translateX(4px);
}

.SidebarGroupToggle:hover span > i {
    background: rgba(252,179,23,.18);
    color: var(--as-secondary, #FCB317) !important;
}

.SidebarGroupArrow {
    color: rgba(255,255,255,.62) !important;
}

/* Grupo abierto */
.SidebarGroup.is-open > .SidebarGroupToggle {
    background: rgba(255,255,255,.11) !important;
    color: #fff !important;
    box-shadow: inset 4px 0 0 var(--as-secondary, #FCB317);
}

.SidebarGroup.is-open > .SidebarGroupToggle span > i {
    background: var(--as-secondary, #FCB317) !important;
    color: var(--as-primary, #0C1E59) !important;
}

/* Submenú */
.SidebarSubmenu {
    display: none;
    margin: 8px 0 10px 27px !important;
    padding: 7px 0 7px 13px !important;
    border-left: 1px dashed rgba(252,179,23,.34) !important;
    animation: SidebarSubFade .22s ease both;
}

.SidebarGroup.is-open .SidebarSubmenu {
    display: block !important;
}

@keyframes SidebarSubFade {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.SidebarSubLink {
    min-height: 42px;
    margin: 4px 0 4px 0 !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
    color: rgba(255,255,255,.66) !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    transition: all .22s ease;
}

.SidebarSubLink::before {
    background: rgba(252,179,23,.42) !important;
}

.SidebarSubLink i {
    width: 22px;
    min-width: 22px;
    font-size: 15px !important;
    color: rgba(255,255,255,.66) !important;
}

.SidebarSubLink:hover {
    background: rgba(255,255,255,.10) !important;
    color: #fff !important;
    transform: translateX(4px);
}

.SidebarSubLink:hover i {
    color: var(--as-secondary, #FCB317) !important;
}

/* Submenú activo */
.SidebarSubLink.active {
    background: linear-gradient(135deg, var(--as-secondary, #FCB317), #FFD76A) !important;
    color: var(--as-primary, #0C1E59) !important;
    box-shadow: 0 12px 24px rgba(252,179,23,.25);
}

.SidebarSubLink.active i {
    color: var(--as-primary, #0C1E59) !important;
}

/* Botón cerrar en móvil */
.SidebarCloseButton {
    background: rgba(255,255,255,.10) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 14px !important;
}

.SidebarCloseButton:hover {
    background: var(--as-secondary, #FCB317) !important;
    color: var(--as-primary, #0C1E59) !important;
}

/* Scroll premium */
.Sidebar::-webkit-scrollbar {
    width: 8px;
}

.Sidebar::-webkit-scrollbar-track {
    background: rgba(255,255,255,.04);
}

.Sidebar::-webkit-scrollbar-thumb {
    background: rgba(252,179,23,.38);
    border-radius: 30px;
}

.Sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(252,179,23,.70);
}

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

@media (max-width: 768px) {
    .SidebarLogo {
        margin: 18px 14px 18px 14px !important;
        padding: 13px !important;
        border-radius: 20px !important;
    }

    .SidebarLogoIcon {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
    }

    .SidebarLogo strong {
        font-size: 16px !important;
    }

    .SidebarNav {
        padding: 0 12px 26px 12px !important;
    }

    .SidebarLink,
    .SidebarGroupToggle {
        min-height: 50px;
        padding: 12px 14px !important;
    }

    .SidebarSubmenu {
        margin-left: 24px !important;
    }
}