/* ==========================================================================
   QueStreaming — Tema cliente WHMCS (child theme de Twenty-One)
   Solo estilos: no modifica plantillas, lógica ni base de datos.
   Para cambiar colores edite las variables de :root.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    --qs-primary: #09e367;          /* verde marca */
    --qs-primary-600: #06c457;
    --qs-primary-700: #05a148;
    --qs-primary-soft: #e7fcef;
    --qs-on-primary: #052b17;       /* texto sobre verde (contraste AA) */
    --qs-navy: #0f2d4a;             /* azul marca */
    --qs-navy-800: #0b2238;
    --qs-navy-900: #071827;
    --qs-link: #0a7d44;
    --qs-text: #1b2a3a;
    --qs-muted: #64748b;
    --qs-border: #e4e9f0;
    --qs-bg: #f4f7fb;
    --qs-surface: #ffffff;
    --qs-radius: 14px;
    --qs-radius-sm: 10px;
    --qs-shadow-sm: 0 1px 2px rgba(15, 45, 74, .06), 0 1px 3px rgba(15, 45, 74, .05);
    --qs-shadow: 0 6px 24px -8px rgba(15, 45, 74, .14), 0 2px 6px rgba(15, 45, 74, .05);
    --qs-shadow-lg: 0 18px 40px -12px rgba(15, 45, 74, .25);
    --qs-ease: cubic-bezier(.2, .7, .2, 1);
    --qs-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body,
body.primary-bg-color {
    font-family: var(--qs-font);
    color: var(--qs-text);
    background: var(--qs-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--qs-font);
    color: var(--qs-navy);
    font-weight: 700;
    letter-spacing: -.015em;
}
a { color: var(--qs-link); transition: color .2s var(--qs-ease); }
a:hover { color: var(--qs-navy); text-decoration: none; }
::selection { background: var(--qs-primary); color: var(--qs-on-primary); }
.text-muted { color: var(--qs-muted) !important; }
.text-primary { color: var(--qs-primary-700) !important; }
.bg-primary { background-color: var(--qs-primary) !important; }

/* ---------- Header ---------- */
#header.header {
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--qs-border);
    box-shadow: var(--qs-shadow-sm);
    position: sticky;
    top: 0;
    z-index: 1030;
}
#header .topbar {
    background: linear-gradient(90deg, var(--qs-navy-900), var(--qs-navy));
    color: #cbd5e1;
    font-size: .82rem;
    padding: 4px 0;
}
#header .topbar .btn,
#header .topbar a { color: #e2e8f0; }
#header .topbar .btn:hover,
#header .topbar a:hover { color: var(--qs-primary); }
#header .topbar .btn-active-client,
#header .topbar .input-group-text {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .12);
    color: #fff;
    border-radius: 999px;
}

#header .navbar-light { padding-top: 12px; padding-bottom: 12px; }
#header .navbar-brand .logo-img { max-height: 46px; transition: transform .3s var(--qs-ease); }
#header .navbar-brand:hover .logo-img { transform: scale(1.03); }

/* buscador */
#header .search .input-group,
#header form .input-group {
    background: var(--qs-bg);
    border: 1px solid var(--qs-border);
    border-radius: 999px;
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
#header .search .input-group:focus-within,
#header form .input-group:focus-within {
    background: #fff;
    border-color: var(--qs-primary);
    box-shadow: 0 0 0 4px rgba(9, 227, 103, .18);
}
#header .search .form-control,
#header .search .btn,
#header form .input-group .form-control,
#header form .input-group .btn,
#header form .input-group .input-group-text {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--qs-text);
}
#header .search .btn,
#header form .input-group .btn { color: var(--qs-muted); }

/* carrito / iconos del header */
#header .toolbar .nav-link,
#header .cart-btn {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--qs-bg);
    border: 1px solid var(--qs-border);
    color: var(--qs-navy);
    position: relative;
    transition: all .2s var(--qs-ease);
}
#header .toolbar .nav-link:hover,
#header .cart-btn:hover {
    background: var(--qs-primary);
    border-color: var(--qs-primary);
    color: var(--qs-on-primary);
    transform: translateY(-1px);
}
#header .cart-btn .badge,
#header .toolbar .badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--qs-navy) !important;
    color: #fff !important;
    border: 2px solid #fff;
    border-radius: 999px;
    font-size: .68rem;
    min-width: 20px;
    padding: 3px 5px;
}

/* menú principal */
#header .main-navbar-wrapper {
    border-top: 1px solid var(--qs-border);
    padding-top: 6px;
    padding-bottom: 6px;
}
#header .main-navbar-wrapper .navbar-nav > li > a,
#header .main-navbar-wrapper .navbar-nav .nav-link {
    color: var(--qs-navy);
    font-weight: 600;
    font-size: .875rem;
    line-height: 1.3;
    padding: 4px 11px !important; /* altura < 30px: Twenty-One agrupa el menú en "Más" si es más alto */
    border-radius: 10px;
    display: inline-block;
    text-decoration: none;
    transition: background .2s, color .2s;
}
#header .main-navbar-wrapper .navbar-nav > li > a:hover,
#header .main-navbar-wrapper .navbar-nav > li.show > a,
#header .main-navbar-wrapper .navbar-nav > li.active > a,
#header .main-navbar-wrapper .navbar-nav .nav-link:hover,
#header .main-navbar-wrapper .navbar-nav .show > .nav-link,
#header .main-navbar-wrapper .navbar-nav .active > .nav-link {
    background: var(--qs-primary-soft);
    color: var(--qs-primary-700);
}
#header .navbar-toggler {
    border: 1px solid var(--qs-border);
    border-radius: 12px;
    padding: .5rem .7rem;
    background: var(--qs-bg);
    color: var(--qs-navy);
}

/* menús desplegables */
.dropdown-menu {
    border: 1px solid var(--qs-border);
    border-radius: var(--qs-radius);
    box-shadow: var(--qs-shadow-lg);
    padding: 8px;
    animation: qsFadeDown .18s var(--qs-ease);
}
.dropdown-item {
    border-radius: 8px;
    padding: .5rem .8rem;
    font-weight: 500;
    color: var(--qs-text);
}
.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--qs-primary-soft);
    color: var(--qs-primary-700);
}
.dropdown-item.active,
.dropdown-item:active { background: var(--qs-primary); color: var(--qs-on-primary); }
.dropdown-divider { border-color: var(--qs-border); }
@keyframes qsFadeDown {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

/* ---------- Breadcrumb ---------- */
.master-breadcrumb {
    background: transparent !important;
    border: 0 !important;
    padding-top: 14px;
}
.master-breadcrumb .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: .82rem;
    font-weight: 500;
}
.master-breadcrumb .breadcrumb-item a { color: var(--qs-muted); }
.master-breadcrumb .breadcrumb-item a:hover { color: var(--qs-primary-700); }
.master-breadcrumb .breadcrumb-item.active { color: var(--qs-navy); }
.master-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "\f054";
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free";
    font-weight: 900;
    font-size: .6rem;
    color: #a0aec0;
    vertical-align: middle;
}

/* ---------- Contenido ---------- */
#main-body { padding-top: 22px; padding-bottom: 48px; background: transparent; }
.primary-content > h1:first-child,
.header-lined h1 {
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: 1rem;
}
.header-lined { border: 0; }

/* ---------- Tarjetas ---------- */
.card {
    border: 1px solid var(--qs-border);
    border-radius: var(--qs-radius);
    box-shadow: var(--qs-shadow-sm);
    background: var(--qs-surface);
    overflow: hidden;
}
.card-header {
    background: #fff;
    border-bottom: 1px solid var(--qs-border);
    padding: .9rem 1.15rem;
}
.card-footer {
    background: #fafcfe;
    border-top: 1px solid var(--qs-border);
}
.card-title { color: var(--qs-navy); font-weight: 700; }

/* ---------- Sidebar ---------- */
.sidebar .card,
.card-sidebar {
    border-radius: var(--qs-radius);
    box-shadow: var(--qs-shadow-sm);
    margin-bottom: 18px;
}
.card-sidebar .card-header {
    background: linear-gradient(135deg, var(--qs-navy), var(--qs-navy-800));
    border: 0;
}
.card-sidebar .card-header .card-title,
.card-sidebar .card-header .panel-title,
.card-sidebar .card-header h3,
.card-sidebar .card-header .card-title i,
.card-sidebar .card-header .panel-title i,
.card-sidebar .card-header .card-minimise { color: #fff; }
.card-sidebar .card-header .card-title,
.card-sidebar .card-header .panel-title { font-size: .95rem; letter-spacing: .01em; font-weight: 700; }
.card-sidebar .card-header .card-title i,
.card-sidebar .card-header .panel-title i { color: var(--qs-primary); margin-right: 6px; }
.card-sidebar .list-group-item,
.sidebar .list-group-item {
    border: 0;
    border-left: 3px solid transparent;
    font-size: .88rem;
    font-weight: 500;
    color: var(--qs-text);
    padding: .65rem 1.1rem;
    transition: background .2s, border-color .2s, color .2s, padding .2s;
}
.card-sidebar .list-group-item + .list-group-item { border-top: 1px solid #f1f4f8; }
.card-sidebar .list-group-item:hover,
.sidebar .list-group-item:hover {
    background: var(--qs-primary-soft);
    color: var(--qs-primary-700);
    border-left-color: var(--qs-primary);
    padding-left: 1.3rem;
}
.card-sidebar .list-group-item.active,
.sidebar .list-group-item.active,
.card-sidebar .list-group-item.active:hover {
    background: var(--qs-primary-soft) !important;
    color: var(--qs-navy) !important;
    border-left-color: var(--qs-primary) !important;
    font-weight: 700;
}
.list-group-item .badge {
    background: var(--qs-navy);
    color: #fff;
    border-radius: 999px;
}
.card-sidebar .card-footer { background: #fafcfe; }

/* ---------- Botones ---------- */
.btn {
    border-radius: var(--qs-radius-sm);
    font-weight: 600;
    letter-spacing: .01em;
    padding: .55rem 1.1rem;
    transition: transform .15s var(--qs-ease), box-shadow .2s, background .2s, border-color .2s, color .2s;
}
.btn:focus,
.btn.focus { box-shadow: 0 0 0 4px rgba(9, 227, 103, .25) !important; }
.btn:active { transform: translateY(1px); }
.btn-sm, .btn-group-sm > .btn { padding: .35rem .75rem; font-size: .8rem; border-radius: 8px; }
.btn-lg, .btn-group-lg > .btn { padding: .8rem 1.5rem; border-radius: 12px; }

.btn-primary,
.btn-success,
.btn-order-now,
body #order-standard_cart .btn-order-now,
body #order-standard_cart .btn-checkout {
    background: linear-gradient(135deg, var(--qs-primary), var(--qs-primary-600)) !important;
    border-color: var(--qs-primary-600) !important;
    color: var(--qs-on-primary) !important;
    box-shadow: 0 6px 16px -6px rgba(9, 227, 103, .7);
}
.btn-primary:hover,
.btn-success:hover,
.btn-order-now:hover,
body #order-standard_cart .btn-order-now:hover,
body #order-standard_cart .btn-checkout:hover {
    background: linear-gradient(135deg, var(--qs-primary-600), var(--qs-primary-700)) !important;
    border-color: var(--qs-primary-700) !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -8px rgba(5, 161, 72, .75);
}
.btn-primary:disabled, .btn-primary.disabled { opacity: .55; transform: none; box-shadow: none; }

.btn-default,
.btn-secondary,
.btn-light {
    background: #fff;
    border: 1px solid var(--qs-border);
    color: var(--qs-navy);
}
.btn-default:hover,
.btn-secondary:hover,
.btn-light:hover {
    background: var(--qs-bg);
    border-color: #cfd8e3;
    color: var(--qs-navy);
}
.btn-info {
    background: var(--qs-navy);
    border-color: var(--qs-navy);
    color: #fff;
}
.btn-info:hover { background: var(--qs-navy-800); border-color: var(--qs-navy-800); color: #fff; }
.btn-outline-primary {
    background: #fff !important;
    border: 2px solid var(--qs-primary) !important;
    color: var(--qs-navy) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: var(--qs-primary) !important;
    border-color: var(--qs-primary) !important;
    color: var(--qs-on-primary) !important;
}
.btn-danger { border-radius: var(--qs-radius-sm); }
.btn-link { color: var(--qs-link); font-weight: 600; }

/* ---------- Formularios ---------- */
.form-control,
.custom-select,
select.form-control {
    border: 1px solid #d7dfe9;
    border-radius: var(--qs-radius-sm);
    min-height: 44px;
    color: var(--qs-text);
    background-color: #fff;
    transition: border-color .2s, box-shadow .2s;
}
.form-control:focus,
.custom-select:focus {
    border-color: var(--qs-primary);
    box-shadow: 0 0 0 4px rgba(9, 227, 103, .18);
}
.form-control::placeholder { color: #9aa8b8; }
label, .col-form-label { font-weight: 600; color: var(--qs-navy); font-size: .88rem; }
.input-group-text {
    background: var(--qs-bg);
    border: 1px solid #d7dfe9;
    color: var(--qs-muted);
    border-radius: var(--qs-radius-sm);
}
.input-group > .form-control:not(:first-child),
.input-group > .input-group-prepend + .form-control { border-left: 0; }
.input-group-merge .input-group-text { border-right: 0; }
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--qs-primary-600);
    border-color: var(--qs-primary-600);
}
.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 4px rgba(9, 227, 103, .2);
}

/* ---------- Alertas ---------- */
.alert {
    border: 0;
    border-left: 4px solid;
    border-radius: var(--qs-radius-sm);
    box-shadow: var(--qs-shadow-sm);
    padding: .9rem 1.15rem;
    font-weight: 500;
}
.alert-success { background: #ecfdf3; color: #065f35; border-left-color: var(--qs-primary-600); }
.alert-info { background: #eef6ff; color: #0b3a66; border-left-color: #3b82f6; }
.alert-warning { background: #fff8e6; color: #7a4b00; border-left-color: #f5a524; }
.alert-danger { background: #fff1f2; color: #8a1c2b; border-left-color: #f43f5e; }
.alert a, .alert .alert-link { font-weight: 700; color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Tablas ---------- */
.table { color: var(--qs-text); }
.table thead th,
.table-list thead th,
table.dataTable thead th {
    background: #f6f9fc;
    color: var(--qs-muted);
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-top: 0;
    border-bottom: 1px solid var(--qs-border) !important;
    padding: .85rem 1rem;
}
.table td {
    border-top: 1px solid #eef2f7;
    vertical-align: middle;
    padding: .85rem 1rem;
}
.table-hover tbody tr,
.table-list tbody tr { transition: background .15s; }
.table-hover tbody tr:hover,
.table-list > tbody > tr:hover > td { background: #f7fbf9 !important; }
.table-container,
.dataTables_wrapper {
    background: #fff;
    border: 1px solid var(--qs-border);
    border-radius: var(--qs-radius);
    box-shadow: var(--qs-shadow-sm);
    overflow: hidden;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { color: var(--qs-muted); font-size: .85rem; }
.page-link {
    border: 1px solid var(--qs-border);
    color: var(--qs-navy);
    border-radius: 8px !important;
    margin: 0 2px;
    font-weight: 600;
}
.page-item.active .page-link {
    background: var(--qs-primary);
    border-color: var(--qs-primary);
    color: var(--qs-on-primary);
}
.page-link:hover { background: var(--qs-primary-soft); color: var(--qs-primary-700); }

/* Etiquetas de estado */
.label, .badge {
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: .02em;
    padding: .35em .75em;
}
.label.status, span.status {
    border-radius: 999px;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.status-active, .label-success, .badge-success { background: #dcfce7 !important; color: #166534 !important; }
.status-pending, .label-warning, .badge-warning { background: #fef3c7 !important; color: #92400e !important; }
.status-suspended, .status-cancelled, .status-terminated, .status-unpaid, .label-danger, .badge-danger { background: #ffe4e6 !important; color: #9f1239 !important; }
.status-paid, .status-completed { background: #dcfce7 !important; color: #166534 !important; }
.status-open, .status-customer-reply, .label-info, .badge-info { background: #e0f2fe !important; color: #075985 !important; }
.status-closed, .status-answered, .status-inactive { background: #eef2f7 !important; color: #475569 !important; }
.badge-primary { background: var(--qs-primary) !important; color: var(--qs-on-primary) !important; }

/* ---------- Panel de cliente: tiles ---------- */
.tiles { margin-bottom: 24px; }
.tiles .tile,
.tiles .col-6 > a.tile,
.tiles a.tile {
    background: #fff;
    border: 1px solid var(--qs-border) !important;
    border-radius: var(--qs-radius);
    box-shadow: var(--qs-shadow-sm);
    padding: 22px 20px;
    position: relative;
    overflow: hidden;
    transition: transform .25s var(--qs-ease), box-shadow .25s var(--qs-ease), border-color .25s;
}
.tiles .tile:hover {
    transform: translateY(-4px);
    box-shadow: var(--qs-shadow);
    border-color: rgba(9, 227, 103, .45) !important;
    text-decoration: none;
}
.tiles .tile i {
    color: var(--qs-primary-600);
    background: var(--qs-primary-soft);
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    opacity: 1;
    position: static;
}
.tiles .tile .stat {
    color: var(--qs-navy);
    font-weight: 800;
    font-size: 2rem;
    margin-top: 10px;
    line-height: 1.1;
}
.tiles .tile .title {
    color: var(--qs-muted);
    font-weight: 600;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.tiles .tile .highlight {
    height: 4px;
    background: linear-gradient(90deg, var(--qs-primary), var(--qs-navy)) !important;
    position: absolute;
    left: 0; right: 0; bottom: 0;
    opacity: 0;
    transition: opacity .25s;
}
.tiles .tile:hover .highlight { opacity: 1; }
.client-home-cards .card .card-header .card-title i { color: var(--qs-primary-600); }
.client-home-cards .card .card-body { padding: 1.15rem; }

/* ---------- Login / registro ---------- */
.login-form .card,
.providerLinkingFeedback + .card {
    border-radius: 20px !important;
    box-shadow: var(--qs-shadow-lg) !important;
    border: 1px solid var(--qs-border) !important;
}
.login-form h6, .login-form .h3 { font-weight: 800; color: var(--qs-navy); }
.login-form .card-footer { background: #f8fafc; }

/* ---------- Tienda / orden (standard_cart) ---------- */
body #order-standard_cart .header-lined h1,
body #order-standard_cart h1 { font-weight: 800; color: var(--qs-navy); }
body #order-standard_cart .products .product {
    background: #fff;
    border: 1px solid var(--qs-border);
    border-radius: 18px;
    box-shadow: var(--qs-shadow-sm);
    padding: 0;
    margin: 0 0 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .25s var(--qs-ease), box-shadow .25s var(--qs-ease), border-color .25s;
}
body #order-standard_cart .products .product:hover {
    transform: translateY(-5px);
    box-shadow: var(--qs-shadow-lg);
    border-color: rgba(9, 227, 103, .5);
}
body #order-standard_cart .products .product header {
    background: linear-gradient(135deg, var(--qs-navy), #14406a);
    margin: 0;
    padding: 16px 20px;
    border: 0;
    border-radius: 0;
    position: relative;
}
body #order-standard_cart .products .product header::after {
    content: "";
    position: absolute;
    left: 20px;
    bottom: 0;
    width: 44px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--qs-primary);
}
body #order-standard_cart .products .product header span {
    color: #fff;
    font-weight: 700;
    font-size: 1.08rem;
}
body #order-standard_cart .products .product header .qty {
    color: #a7f3c9;
    font-size: .78rem;
    font-weight: 600;
}
body #order-standard_cart .products .product div.product-desc {
    padding: 18px 20px;
    font-size: .88rem;
    color: #475569;
    line-height: 1.75;
    width: 60%;
}
body #order-standard_cart .products .product div.product-desc p { margin-bottom: .5rem; }
body #order-standard_cart .products .product div.product-desc ul { padding-left: 0; list-style: none; }
body #order-standard_cart .products .product div.product-desc ul li { padding-left: 1.4rem; position: relative; }
body #order-standard_cart .products .product div.product-desc ul li::before {
    content: "\f00c";
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free";
    font-weight: 900;
    font-size: .72rem;
    color: var(--qs-primary-600);
    position: absolute;
    left: 0;
    top: .2rem;
}
body #order-standard_cart .products .product footer {
    padding: 18px 20px;
    width: 40%;
    text-align: center;
}
body #order-standard_cart .products .product div.product-pricing {
    color: var(--qs-muted);
    font-size: .8rem;
    margin-bottom: 12px;
}
body #order-standard_cart .products .product div.product-pricing span.price {
    display: block;
    color: var(--qs-navy);
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.2;
}
body #order-standard_cart .products .product .btn-order-now {
    width: 100%;
    border-radius: 12px;
    padding: .6rem .9rem;
    white-space: nowrap;
}
@supports (display: grid) {
    body #order-standard_cart .products .product {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto 1fr;
    }
    body #order-standard_cart .products .product header { grid-column: 1 / -1; }
    body #order-standard_cart .products .product div.product-desc,
    body #order-standard_cart .products .product footer { width: auto; float: none; }
    body #order-standard_cart .products .product footer {
        min-width: 170px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-left: 1px dashed var(--qs-border);
        background: #fafcfe;
    }
}

/* resumen del pedido */
body #order-standard_cart .order-summary,
body #order-standard_cart .summary-container {
    background: linear-gradient(160deg, var(--qs-navy), var(--qs-navy-900)) !important;
    border: 0 !important;
    border-radius: 18px !important;
    box-shadow: var(--qs-shadow-lg);
    overflow: hidden;
}
body #order-standard_cart .order-summary h2 {
    color: #fff;
    font-weight: 800;
    font-size: 1.15rem;
    padding: 16px 18px 8px;
    margin: 0;
    background: transparent;
}
body #order-standard_cart .summary-container {
    background: rgba(255, 255, 255, .04) !important;
    box-shadow: none;
    color: #dbe6f2;
    border-radius: 0 !important;
}
body #order-standard_cart .order-summary .total-due-today .amt,
body #order-standard_cart .order-summary .total-due-today span.amt {
    color: var(--qs-primary) !important;
    font-weight: 800;
}
body #order-standard_cart .order-summary .loader { color: #fff; }

body #order-standard_cart .view-cart-items-header {
    background: var(--qs-navy) !important;
    color: #fff;
    border-radius: 14px 14px 0 0;
    font-weight: 700;
}
body #order-standard_cart .view-cart-items {
    border: 1px solid var(--qs-border);
    border-top: 0;
    border-radius: 0 0 14px 14px;
    background: #fff;
}
body #order-standard_cart .view-cart-items .item { border-bottom: 1px solid #eef2f7; }
body #order-standard_cart .view-cart-tabs .nav-tabs .nav-link { border-radius: 10px 10px 0 0; font-weight: 600; }
body #order-standard_cart .sub-heading { border-top-color: var(--qs-border); }
body #order-standard_cart .sub-heading span {
    color: var(--qs-navy);
    font-weight: 700;
    background: var(--qs-bg);
}
body #order-standard_cart .field-container,
body #order-standard_cart .product-info,
body #order-standard_cart .domain-checker-container {
    border-radius: var(--qs-radius);
}
body #order-standard_cart .product-info {
    background: #fff;
    border: 1px solid var(--qs-border);
    box-shadow: var(--qs-shadow-sm);
    padding: 18px;
}
body #order-standard_cart .domain-checker-container {
    background: linear-gradient(135deg, var(--qs-navy), #14406a);
    box-shadow: var(--qs-shadow);
}
body #order-standard_cart .panel-addon,
body #order-standard_cart .addon-products .card {
    border-radius: var(--qs-radius);
    border: 1px solid var(--qs-border);
    transition: border-color .2s, box-shadow .2s;
}
body #order-standard_cart .panel-addon-selected {
    border-color: var(--qs-primary) !important;
    box-shadow: 0 0 0 3px rgba(9, 227, 103, .2);
}
body #order-standard_cart .panel-addon-selected .panel-add {
    background: var(--qs-primary);
    color: var(--qs-on-primary);
}
body #order-standard_cart .payment-methods label,
body #order-standard_cart .account-select-container .account {
    border-radius: var(--qs-radius-sm);
}
body #order-standard_cart .account.active { border-color: var(--qs-primary) !important; background: var(--qs-primary-soft); }

/* ---------- Inicio: accesos rápidos (¿Cómo podemos ayudar hoy?) ---------- */
.action-icon-btns a,
.action-icon-btns .card-accent-teal,
.action-icon-btns [class*="card-accent-"] {
    background: #fff;
    border: 1px solid var(--qs-border);
    border-top: 3px solid var(--qs-primary) !important;
    border-radius: var(--qs-radius);
    box-shadow: var(--qs-shadow-sm);
    color: var(--qs-navy);
    font-weight: 600;
    transition: transform .25s var(--qs-ease), box-shadow .25s var(--qs-ease);
}
.action-icon-btns a:hover {
    transform: translateY(-4px);
    box-shadow: var(--qs-shadow);
    color: var(--qs-primary-700);
    text-decoration: none;
}
.action-icon-btns .ico-container {
    width: 58px;
    height: 58px;
    margin: 0 auto 10px;
    border-radius: 16px;
    background: var(--qs-primary-soft);
    display: flex;
    align-items: center;
    justify-content: center;
}
.action-icon-btns .ico-container i { color: var(--qs-primary-700) !important; font-size: 1.5rem; }

/* ---------- Tickets ---------- */
.ticket-reply {
    border: 1px solid var(--qs-border);
    border-radius: var(--qs-radius);
    overflow: hidden;
    box-shadow: var(--qs-shadow-sm);
}
.ticket-reply.staff { border-left: 4px solid var(--qs-primary); }
.ticket-reply .posted-by { background: #f8fafc; }
.ticket-reply.staff .posted-by { background: var(--qs-primary-soft); }

/* ---------- Base de conocimiento / anuncios ---------- */
.kb-search .form-control,
.knowledgebase-search .form-control { border-radius: 999px; min-height: 52px; padding-left: 1.25rem; }
.announcement-single,
.kb-article-item {
    border-radius: var(--qs-radius);
}

/* ---------- Modales ---------- */
.modal-content {
    border: 0;
    border-radius: 18px;
    box-shadow: var(--qs-shadow-lg);
    overflow: hidden;
}
.modal-header { border-bottom: 1px solid var(--qs-border); }
.modal-header.bg-primary,
.modal-header.panel-heading {
    background: linear-gradient(135deg, var(--qs-navy), #14406a) !important;
    color: #fff;
}
.modal-header .close { color: inherit; opacity: .8; text-shadow: none; }
.modal-backdrop.show { opacity: .55; background: var(--qs-navy-900); }

/* ---------- Pestañas / navs ---------- */
.nav-tabs { border-bottom: 1px solid var(--qs-border); }
.nav-tabs .nav-link {
    border: 0;
    border-bottom: 3px solid transparent;
    color: var(--qs-muted);
    font-weight: 600;
}
.nav-tabs .nav-link:hover { color: var(--qs-navy); border-bottom-color: #cfd8e3; }
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--qs-navy);
    background: transparent;
    border-bottom-color: var(--qs-primary);
}
.nav-pills .nav-link { border-radius: 10px; font-weight: 600; color: var(--qs-navy); }
.nav-pills .nav-link.active { background: var(--qs-primary); color: var(--qs-on-primary); }

/* ---------- Barra de progreso ---------- */
.progress { background: #e8eef5; border-radius: 999px; height: .6rem; }
.progress-bar { background: linear-gradient(90deg, var(--qs-primary), var(--qs-primary-700)); border-radius: 999px; }

/* ---------- Footer ---------- */
#footer.footer {
    background: radial-gradient(1200px 300px at 10% -20%, rgba(9, 227, 103, .18), transparent 60%),
                linear-gradient(180deg, var(--qs-navy), var(--qs-navy-900));
    color: #a9bcd0;
    padding: 44px 0 28px;
    border-top: 0;
    margin-top: 0;
}
#footer.footer a,
#footer .nav-link { color: #d5e1ee; font-weight: 500; }
#footer.footer a:hover,
#footer .nav-link:hover { color: var(--qs-primary); }
#footer .copyright { color: #7f97b0; font-size: .82rem; }
#footer .list-inline-item a,
#footer .btn-icon,
#footer .social a {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .1);
    transition: all .2s var(--qs-ease);
}
#footer .list-inline-item a:hover,
#footer .btn-icon:hover,
#footer .social a:hover {
    background: var(--qs-primary);
    border-color: var(--qs-primary);
    color: var(--qs-on-primary);
    transform: translateY(-2px);
}
#footer .btn,
#footer .btn-default {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    color: #e2e8f0;
}
#footer .btn:hover { background: rgba(255, 255, 255, .14); color: #fff; }

/* Volver arriba */
#back-to-top,
.back-to-top {
    border-radius: 12px !important;
    background: var(--qs-primary) !important;
    color: var(--qs-on-primary) !important;
    box-shadow: var(--qs-shadow);
}

/* ---------- Detalles de UI ---------- */
.list-group-item { border-color: #eef2f7; }
.popover, .tooltip-inner { border-radius: 10px; }
.tooltip-inner { background: var(--qs-navy); font-weight: 500; }
hr { border-top-color: var(--qs-border); }
.form-control:disabled, .form-control[readonly] { background-color: #f5f8fb; }
*:focus-visible { outline: 2px solid var(--qs-primary); outline-offset: 2px; }

/* scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--qs-bg); }
::-webkit-scrollbar-thumb { background: #c5d1de; border-radius: 999px; border: 2px solid var(--qs-bg); }
::-webkit-scrollbar-thumb:hover { background: #9fb1c4; }

/* ---------- Responsivo ---------- */
@media (max-width: 1199.98px) {
    #header .main-navbar-wrapper .navbar-nav > li > a { padding: 4px 8px !important; }
}
@media (max-width: 991.98px) {
    #header.header { position: relative; }
    #header .navbar-brand .logo-img { max-height: 38px; }
    #header .main-navbar-wrapper .navbar-collapse {
        background: #fff;
        border: 1px solid var(--qs-border);
        border-radius: var(--qs-radius);
        box-shadow: var(--qs-shadow);
        padding: 10px;
        margin-top: 10px;
    }
    #header .main-navbar-wrapper .navbar-nav > li > a { padding: .7rem .9rem !important; display: block; }
    .sidebar { margin-bottom: 8px; }
    .primary-content > h1:first-child,
    .header-lined h1 { font-size: 1.45rem; }
}
@media (max-width: 767.98px) {
    #main-body { padding-top: 12px; }
    .card-header, .card-body { padding-left: 1rem; padding-right: 1rem; }
    .tiles .tile { padding: 16px; }
    .tiles .tile .stat { font-size: 1.6rem; }
    .table-container, .dataTables_wrapper { overflow-x: auto; }
    body #order-standard_cart .products .product { display: flex; flex-direction: column; }
    body #order-standard_cart .products .product div.product-desc,
    body #order-standard_cart .products .product footer { width: 100%; }
    body #order-standard_cart .products .product footer {
        border-left: 0;
        border-top: 1px dashed var(--qs-border);
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        text-align: left;
    }
    body #order-standard_cart .products .product div.product-pricing { margin-bottom: 0; }
    body #order-standard_cart .products .product .btn-order-now { width: auto; }
    #footer.footer { text-align: center; padding: 32px 0 22px; }
    .btn-block-xs { display: block; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}
/* ==========================================================================
   Login a dos columnas (login.tpl)
   Para usar una foto de fondo en el panel izquierdo, agregue:
   .qs-auth-side { --qs-login-img: url('/ruta/a/tu-imagen.jpg'); }
   ========================================================================== */
.qs-auth { max-width: 1060px; margin: 16px auto 48px; }
.qs-auth-card { display: grid; grid-template-columns: 1.05fr 1fr; background: #fff; border: 1px solid var(--qs-border); border-radius: 24px; overflow: hidden; box-shadow: var(--qs-shadow-lg); min-height: 620px; }
.qs-auth-side { position: relative; overflow: hidden; color: #c9d8e8; padding: 44px 42px 34px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
    background: linear-gradient(160deg, rgba(15, 45, 74, .93) 0%, rgba(7, 24, 39, .97) 100%), var(--qs-login-img, linear-gradient(transparent, transparent)) center / cover no-repeat; }
.qs-auth-side::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 34px 34px; -webkit-mask-image: radial-gradient(ellipse at 30% 20%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse at 30% 20%, #000 20%, transparent 75%); pointer-events: none; }
.qs-auth-glow { position: absolute; width: 420px; height: 420px; right: -160px; bottom: -140px; border-radius: 50%; background: radial-gradient(circle, rgba(9,227,103,.35), transparent 65%); filter: blur(10px); pointer-events: none; }
.qs-auth-side-top, .qs-auth-side-bottom { position: relative; z-index: 1; }
.qs-auth-logo { display: inline-flex; align-items: center; background: #fff; border-radius: 14px; padding: 8px 14px; box-shadow: 0 8px 24px -10px rgba(0,0,0,.5); color: var(--qs-navy); font-weight: 800; }
.qs-auth-logo img { max-height: 40px; width: auto; }
.qs-auth-kicker { display: flex; width: fit-content; align-items: center; gap: 8px; margin: 28px 0 12px; padding: 6px 12px; border-radius: 999px; background: rgba(9,227,103,.12); border: 1px solid rgba(9,227,103,.3); color: #8ef5bb; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.qs-auth-kicker i { font-size: .45rem; color: var(--qs-primary); animation: qsPulse 1.6s ease-in-out infinite; }
@keyframes qsPulse { 50% { opacity: .25; } }
.qs-auth-title { color: #fff; font-size: 2.15rem; font-weight: 800; line-height: 1.15; letter-spacing: -.025em; margin: 0 0 12px; }
.qs-auth-title span { background: linear-gradient(90deg, var(--qs-primary), #7cf7b4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.qs-auth-lead { color: #a9bdd2; font-size: .98rem; line-height: 1.6; margin: 0 0 26px; max-width: 420px; }
.qs-auth-features { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.qs-auth-features li { display: flex; align-items: center; gap: 14px; }
.qs-auth-ico { flex: 0 0 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: var(--qs-primary); font-size: 1.05rem; }
.qs-auth-features strong { display: block; color: #fff; font-size: .92rem; font-weight: 700; }
.qs-auth-features small { display: block; color: #91a8bf; font-size: .8rem; }
.qs-auth-eq { display: flex; align-items: flex-end; gap: 5px; height: 46px; margin-bottom: 18px; }
.qs-auth-eq span { flex: 1; max-width: 8px; height: 100%; border-radius: 4px; background: linear-gradient(180deg, var(--qs-primary), rgba(9,227,103,.25)); transform-origin: bottom; animation: qsEq 1.2s ease-in-out infinite; }
.qs-auth-eq span:nth-child(3n) { animation-duration: .9s; animation-delay: -.3s; }
.qs-auth-eq span:nth-child(3n+1) { animation-duration: 1.4s; animation-delay: -.7s; }
.qs-auth-eq span:nth-child(4n) { animation-duration: 1.05s; animation-delay: -.5s; }
.qs-auth-eq span:nth-child(5n) { animation-duration: 1.6s; animation-delay: -1.1s; }
@keyframes qsEq { 0%, 100% { transform: scaleY(.2); } 50% { transform: scaleY(1); } }
.qs-auth-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.qs-auth-chips span, .qs-auth-chips a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); color: #dbe7f3; font-size: .78rem; font-weight: 600; }
.qs-auth-chips i { color: var(--qs-primary); }
.qs-auth-chips a:hover { background: var(--qs-primary); border-color: var(--qs-primary); color: var(--qs-on-primary); }
.qs-auth-chips a:hover i { color: var(--qs-on-primary); }
.qs-auth-main { display: flex; flex-direction: column; justify-content: center; padding: 48px 46px; }
.qs-auth-form { width: 100%; max-width: 400px; margin: 0 auto; }
.qs-auth-head { margin-bottom: 26px; }
.qs-auth-badge { width: 52px; height: 52px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; background: var(--qs-primary-soft); color: var(--qs-primary-700); font-size: 1.5rem; margin-bottom: 16px; }
.qs-auth-h { font-size: 1.9rem; font-weight: 800; margin: 0 0 6px; color: var(--qs-navy); }
.qs-auth-sub { color: var(--qs-muted); margin: 0; }
.qs-auth-form .form-control { min-height: 50px; }
.qs-auth-form .input-group-text { min-width: 46px; justify-content: center; }
.qs-auth-form .btn-reveal-pw { border: 1px solid #d7dfe9; border-left: 0; border-radius: 0 var(--qs-radius-sm) var(--qs-radius-sm) 0; background: #fff; color: var(--qs-muted); }
.qs-auth-forgot { color: var(--qs-link); font-weight: 600; }
.qs-auth-remember { margin: -4px 0 18px; }
.qs-auth-remember label { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--qs-text); cursor: pointer; }
.qs-auth-remember .form-check-input { position: static; margin: 0; width: 17px; height: 17px; accent-color: var(--qs-primary-600); }
.qs-auth-submit { min-height: 52px; font-size: 1rem; }
.qs-auth-register { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--qs-border); text-align: center; color: var(--qs-muted); font-size: .9rem; }
.qs-auth-register a { font-weight: 700; margin-left: 4px; }
.qs-auth-register a i { font-size: .75rem; transition: transform .2s; }
.qs-auth-register a:hover i { transform: translateX(3px); }
.qs-auth-social { margin-top: 18px; text-align: center; }
.qs-auth-social img { max-width: 100%; border-radius: 12px; }
@media (max-width: 991.98px) {
    .qs-auth-card { grid-template-columns: 1fr; min-height: 0; }
    .qs-auth-side { padding: 30px 28px; gap: 20px; }
    .qs-auth-title { font-size: 1.7rem; }
    .qs-auth-features { grid-template-columns: 1fr 1fr; }
    .qs-auth-eq { display: none; }
    .qs-auth-main { padding: 36px 28px; }
}
@media (max-width: 575.98px) {
    .qs-auth { margin-top: 4px; }
    .qs-auth-card { border-radius: 18px; }
    .qs-auth-side { padding: 24px 20px; }
    .qs-auth-kicker { margin-top: 18px; }
    .qs-auth-title { font-size: 1.45rem; }
    .qs-auth-lead { font-size: .9rem; margin-bottom: 0; }
    .qs-auth-features, .qs-auth-side-bottom { display: none; }
    .qs-auth-main { padding: 28px 20px; }
    .qs-auth-h { font-size: 1.6rem; }
}