/* *****************************************************
   Custom Stylesheet - DMG CLOUD DARK MODE (Definitivo)
***************************************************** */

/* =========================================
   1. GLOBAL Y RESET DE WHMCS
   ========================================= */
body { background-color: #0f172a; background-image: none !important; color: #cbd5e1; }
section#main-body { background: transparent !important; padding-top: 40px; }
.pull-md-right { float: right; background-color: transparent !important; }

/* =========================================
   2. HOMEPAGE: HERO, TECNOLOGÍAS Y FOOTER
   ========================================= */

/* Fondo con textura SOLO en la cabecera principal, con efecto PARALLAX */
#dmg-hero-dark { 
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.70) 0%, rgba(30, 41, 59, 0.90) 100%), 
                url('../img/background.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important; /* <-- LA MAGIA DEL PARALLAX */
    
    color: #ffffff; 
    padding: 90px 0; 
    text-align: center; 
    border-bottom: 2px solid #0ea5e9; 
}

#dmg-hero-dark h2 { color: #f8fafc; font-size: 3em; font-weight: 700; margin-bottom: 20px; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
#dmg-hero-dark p.lead { color: #94a3b8; font-size: 1.3em; margin-bottom: 40px; max-width: 800px; margin-left: auto; margin-right: auto; }

/* Atajos (Shortcuts) - Fondo sólido limpio */
.dmg-shortcuts-dark { background: #1e293b; padding: 40px 0; }
.dmg-shortcuts-dark ul { display: flex; justify-content: center; gap: 20px; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.dmg-shortcuts-dark ul li a { background: #334155; color: #e2e8f0; border: 1px solid #475569; transition: 0.3s; padding: 25px; display: block; border-radius: 8px; text-align: center; min-width: 200px; text-decoration: none; }
.dmg-shortcuts-dark ul li a:hover { background: #0ea5e9; border-color: #38bdf8; transform: translateY(-5px); }
.dmg-shortcuts-dark ul li a i { color: #38bdf8; margin-bottom: 15px; font-size: 2.5em; }
.dmg-shortcuts-dark ul li a:hover i { color: #fff; }
.dmg-shortcuts-dark ul li a p { margin: 0; font-size: 1.1em; font-weight: 600; }

/* Tecnologías (Stack) - Fondo transparente para heredar el azul oscuro general */
.tech-stack { background: transparent; text-align: center; padding: 40px 0; border-bottom: 1px solid #1e293b; }
.tech-stack h3 { color: #f8fafc; font-weight: 600; margin-bottom: 30px; font-size: 1.5em; }
.tech-icons { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; }
.tech-item { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #94a3b8; font-weight: 500; font-size: 1.1em; }
.tech-item i { font-size: 3em; color: #0ea5e9; margin-bottom: 10px; transition: transform 0.3s ease; }
.tech-item:hover i { transform: scale(1.1); color: #38bdf8; }

/* =========================================
   3. HOMEPAGE: PRECIOS Y CARACTERÍSTICAS
   ========================================= */
.pricing-section { background: transparent; padding: 60px 0; border-bottom: 1px solid #1e293b; }
.pricing-section h2 { text-align: center; color: #f8fafc; font-size: 2.5em; font-weight: 700; margin-bottom: 50px; }
.pricing-grid { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; }

.pricing-card { background: #1e293b; border: 1px solid #334155; border-radius: 12px; padding: 40px 30px; width: 320px; text-align: center; transition: all 0.3s ease; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5); }
.pricing-card:hover { transform: translateY(-10px); border-color: #0ea5e9; box-shadow: 0 20px 25px -5px rgba(14, 165, 233, 0.2); }
.pricing-card.popular { border-color: #0ea5e9; position: relative; }
.popular-badge { background: #0ea5e9; color: #fff; font-size: 0.8em; font-weight: bold; padding: 5px 15px; border-radius: 20px; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); }
.pricing-card h4 { color: #f8fafc; font-size: 1.6em; margin-bottom: 15px; }
.price { font-size: 3em; font-weight: 700; color: #38bdf8; margin-bottom: 20px; }
.price span { font-size: 0.35em; color: #94a3b8; font-weight: normal; }
.features-list { list-style: none; padding: 0; margin: 0 0 30px 0; text-align: left; }
.features-list li { padding: 12px 0; border-bottom: 1px solid #334155; color: #cbd5e1; }
.features-list li i { color: #10b981; margin-right: 10px; }
.features-list li:last-child { border-bottom: none; }

.features-grid-section { background: transparent; padding: 70px 0 40px 0; }
.features-grid-section h2 { text-align: center; color: #f8fafc; font-size: 2.5em; font-weight: 700; margin-bottom: 15px; }
.features-grid-section p.subtitle { text-align: center; color: #94a3b8; font-size: 1.2em; margin-bottom: 50px; max-width: 600px; margin-left: auto; margin-right: auto; }
.features-custom-grid { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; }
.feature-box { background: #111827; border: 1px solid #1e293b; border-radius: 8px; padding: 30px; width: 360px; transition: all 0.3s ease; }
.feature-box:hover { border-color: #334155; background: #1e293b; }
.feature-icon-wrapper { background: rgba(14, 165, 233, 0.1); width: 55px; height: 55px; border-radius: 6px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; border: 1px solid rgba(14, 165, 233, 0.2); }
.feature-icon-wrapper i { font-size: 1.6em; color: #38bdf8; }
.feature-box h5 { color: #f8fafc; font-size: 1.3em; font-weight: 600; margin-bottom: 12px; margin-top: 0; }
.feature-box p { color: #94a3b8; font-size: 0.95em; line-height: 1.6; margin: 0; }

/* =========================================
   4. FOOTER (Sólido para cerrar la página)
   ========================================= */
section#footer { background: #0b1120; color: #94a3b8; padding: 60px 0 0 0; border-top: 1px solid #1e293b; margin-top: 0; }
section#footer a { color: #cbd5e1; transition: color 0.3s ease; }
section#footer a:hover { color: #0ea5e9; text-decoration: none; }
.footer-widget { margin-bottom: 30px; }
.footer-widget h4 { color: #f8fafc; font-size: 1.2em; font-weight: 600; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 1px; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 12px; }
.footer-links li i { color: #0ea5e9; margin-right: 8px; font-size: 0.8em; }
.footer-partner-logo { max-width: 160px; margin-bottom: 15px; filter: brightness(0.9); transition: filter 0.3s ease; }
.footer-partner-logo:hover { filter: brightness(1.1); }
.footer-payments { font-size: 2.2em; display: flex; gap: 15px; margin-top: 15px; }
.footer-payments i { color: #cbd5e1; transition: color 0.3s ease; }
.footer-payments i.fa-cc-visa:hover { color: #1a1f71; }
.footer-payments i.fa-cc-mastercard:hover { color: #eb001b; }
.footer-payments i.fa-cc-paypal:hover { color: #00457c; }
.footer-bottom-bar { background: #060913; padding: 20px 0; margin-top: 40px; border-top: 1px solid #1e293b; text-align: center; }
.footer-copyright { margin: 0; font-size: 0.9em; color: #64748b; }

/* =========================================
   5. COMPONENTES GLOBALES WHMCS (Botones, Alertas, Formularios)
   ========================================= */
.btn-cyber, .btn-success, .btn-checkout, .btn-order-now, section#main-body form .input-group-btn .btn { 
    background-color: #0ea5e9 !important; border-color: #0284c7 !important; color: #ffffff !important; text-shadow: none !important; font-weight: 600 !important; box-shadow: 0 0 10px rgba(14, 165, 233, 0.2) !important; transition: all 0.3s ease !important; background-image: none !important; 
}
.btn-cyber:hover, .btn-success:hover, .btn-checkout:hover, .btn-order-now:hover, section#main-body form .input-group-btn .btn:hover { 
    background-color: #0284c7 !important; border-color: #0369a1 !important; box-shadow: 0 0 15px rgba(14, 165, 233, 0.6) !important; transform: translateY(-2px); 
}
.pricing-card.popular a.btn-buy { background: #0ea5e9 !important; color: #ffffff !important; }
.pricing-card.popular a.btn-buy:hover { background: #0284c7 !important; border-color: #0284c7 !important; }
.pricing-card a.btn-buy { background: transparent; color: #0ea5e9 !important; border: 2px solid #0ea5e9; padding: 12px 30px; border-radius: 6px; font-weight: bold; text-decoration: none; transition: 0.3s; display: inline-block; width: 100%; font-size: 1.1em; }
.pricing-card a.btn-buy:hover { background: #0ea5e9; color: #ffffff !important; }

.btn-default, .view-cart-tabs .btn-default { background-color: #334155 !important; border-color: #475569 !important; color: #f8fafc !important; text-shadow: none !important; background-image: none !important; }
.btn-default:hover, .btn-default:focus, .view-cart-tabs .btn-default:hover { background-color: #475569 !important; border-color: #64748b !important; color: #ffffff !important; }

.alert-info { background-color: #0c4a6e !important; border-color: #0284c7 !important; color: #e0f2fe !important; }
.alert-warning { background-color: #451a03 !important; border-color: #78350f !important; color: #fde68a !important; }
.alert-warning a { color: #f59e0b !important; font-weight: bold; }
.alert-success { background-color: #064e3b !important; border-color: #059669 !important; color: #d1fae5 !important; }
.alert-danger { background-color: #7f1d1d !important; border-color: #991b1b !important; color: #fecaca !important; }

.label-info, .select-account a .label-info { background-color: #0ea5e9 !important; color: #ffffff !important; border: none !important; }

.form-control, input[type="text"], input[type="password"], input[type="email"], select, textarea { background-color: #0f172a !important; border: 1px solid #475569 !important; color: #f8fafc !important; }
.form-control:focus, input:focus, select:focus, textarea:focus { border-color: #38bdf8 !important; box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(56, 189, 248, 0.6) !important; }
input::placeholder, .form-control::placeholder { color: #64748b !important; }
.input-group-addon { background-color: #0b1120 !important; border: 1px solid #475569 !important; border-right: none !important; color: #0ea5e9 !important; }

.intl-tel-input .selected-flag { background-color: #0b1120 !important; }
.intl-tel-input .country-list { background-color: #1e293b !important; color: #f8fafc !important; border: 1px solid #475569 !important; }
.intl-tel-input .country-list .country:hover { background-color: #334155 !important; }
.intl-tel-input .country-list .divider { border-bottom: 1px solid #475569 !important; }

/* =========================================
   6. ÁREA DE CLIENTES (Paneles, Listas y Tablas)
   ========================================= */
.header-lined h1 { color: #38bdf8 !important; border-bottom-color: #334155 !important; }
.header-lined h1 small { color: #94a3b8 !important; }
.breadcrumb { background-color: transparent !important; padding-left: 0; }
.breadcrumb > li, .breadcrumb > li.active { color: #94a3b8 !important; }

.panel, .panel-default, .client-home-panels .panel, .sidebar .panel, .tiles .tile { background-color: #1e293b !important; border: 1px solid #334155 !important; }
.panel-heading, .panel-default > .panel-heading, .sidebar .panel-heading, .tiles .tile .title { background-color: #0b1120 !important; color: #f8fafc !important; border-bottom: 1px solid #334155 !important; }
.panel-body, .panel-default > .panel-body, .client-home-panels .panel-body, .tiles .tile .stat { background-color: #1e293b !important; color: #cbd5e1 !important; }
.panel-footer, .panel-default > .panel-footer { background-color: #0b1120 !important; border-top: 1px solid #334155 !important; }
.sidebar .panel-title i { color: #0ea5e9 !important; }

.list-group-item, a.list-group-item, button.list-group-item, .client-list-item, .select-account a,
.sidebar .list-group-item, .panel > .list-group > .list-group-item, .client-home-panels .panel .list-group-item {
    background-color: #1e293b !important; border-color: #334155 !important; color: #cbd5e1 !important;
}
.sidebar .list-group-item i { color: #94a3b8 !important; }

.list-group-item:hover, .list-group-item.active, a.list-group-item:hover, button.list-group-item:hover,
.client-list-item:hover, .select-account a:hover, .select-account a:focus,
.sidebar .list-group-item:hover, .sidebar .list-group-item.active,
.panel > .list-group > .list-group-item:hover, .client-home-panels .panel .list-group-item:hover {
    background-color: #334155 !important; border-color: #475569 !important; color: #ffffff !important;
}
.list-group-item:hover *, .list-group-item.active *, .select-account a:hover *, .select-account a:focus * {
    color: #ffffff !important; background-color: transparent !important;
}

.table, .panel-body .table > tbody > tr > td, table.table td { border-top: 1px solid #334155 !important; color: #cbd5e1 !important; background-color: transparent !important; }
table.table th { background-color: #0b1120 !important; border-bottom: 2px solid #334155 !important; color: #f8fafc !important; }
.panel-body .table > tbody > tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, 0.02) !important; }
.panel-body .table > tbody > tr:hover > td, table.table-hover > tbody > tr:hover > td { background-color: #334155 !important; color: #ffffff !important; }

/* =========================================
   7. TIPOGRAFÍA Y ENLACES (DASHBOARD)
   ========================================= */
.sidebar .panel-heading .panel-title, .sidebar .panel-heading .panel-title * { color: #f8fafc !important; font-weight: 600 !important; }
.client-home-panels .panel .list-group-item { color: #f1f5f9 !important; }
.text-muted, small { color: #94a3b8 !important; }

section#main-body a:not(.btn), .breadcrumb > li > a,
.client-home-panels .panel .list-group-item a:not(.btn),
#main-body .panel-body .table a:not(.btn), #main-body table.table a:not(.btn),
.text-domain { color: #38bdf8 !important; font-weight: 600 !important; transition: color 0.3s ease; }

section#main-body a:not(.btn):hover, .breadcrumb > li > a:hover,
.client-home-panels .panel .list-group-item a:not(.btn):hover,
#main-body .panel-body .table a:not(.btn):hover, #main-body table.table a:not(.btn):hover,
a:hover .text-domain, .text-domain:hover { color: #ffffff !important; text-decoration: none !important; }

/* =========================================
   8. CARRITO Y FORMULARIO DE PEDIDO (CHECKOUT)
   ========================================= */
#order-standard_cart_proxmox, #order-standard_cart { color: #cbd5e1; }
#order-standard_cart_proxmox h1, #order-standard_cart_proxmox h2, #order-standard_cart_proxmox h3,
#order-standard_cart h1, #order-standard_cart h2, #order-standard_cart h3 { color: #f8fafc; }

#order-standard_cart_proxmox .products-con, #order-standard_cart .products-con,
#order-standard_cart_proxmox .main-container, #order-standard_cart .main-container,
#order-standard_cart_proxmox .products, #order-standard_cart .products { background-color: transparent !important; }
#order-standard_cart_proxmox .product, #order-standard_cart .product { background-color: #1e293b !important; border: 1px solid #334155 !important; border-radius: 8px; overflow: hidden; }
#order-standard_cart_proxmox .product header, #order-standard_cart .product header { background-color: #0b1120 !important; color: #ffffff !important; font-weight: bold !important; border-bottom: 1px solid #334155 !important; }
#order-standard_cart_proxmox .product .product-pricing, #order-standard_cart .product .product-pricing,
#order-standard_cart_proxmox .product ul, #order-standard_cart .product ul { background-color: #1e293b !important; }
#order-standard_cart_proxmox .product ul li, #order-standard_cart .product ul li { color: #cbd5e1 !important; border-bottom: 1px solid #334155 !important; }
#order-standard_cart_proxmox .product .price, #order-standard_cart .product .price,
#order-standard_cart_proxmox .product-info .price, #order-standard_cart .product-info .price { color: #38bdf8 !important; font-weight: bold; }
#order-standard_cart_proxmox .product .product-desc, #order-standard_cart .product .product-desc { color: #cbd5e1 !important; }

#order-standard_cart_proxmox .well, #order-standard_cart .well,
#order-standard_cart_proxmox .product-info, #order-standard_cart .product-info { background-color: #1e293b !important; border: 1px solid #334155 !important; box-shadow: none !important; color: #cbd5e1 !important; }
#order-standard_cart_proxmox label, #order-standard_cart label { color: #f8fafc !important; font-weight: 600; }
#order-standard_cart_proxmox .help-block, #order-standard_cart .help-block { color: #94a3b8 !important; }
#order-standard_cart_proxmox .sub-heading span, #order-standard_cart .sub-heading span { background-color: #0f172a !important; color: #38bdf8 !important; }
#order-standard_cart_proxmox .sub-heading::after, #order-standard_cart .sub-heading::after,
#order-standard_cart_proxmox .sub-heading, #order-standard_cart .sub-heading { border-bottom-color: #334155 !important; border-top-color: #334155 !important; }

#order-standard_cart_proxmox .summary-container, #order-standard_cart .summary-container,
#order-standard_cart_proxmox #orderSummary, #order-standard_cart #orderSummary { background-color: #111827 !important; border: 1px solid #334155 !important; color: #cbd5e1 !important; border-radius: 8px; }
#order-standard_cart_proxmox .summary-container .title, #order-standard_cart .summary-container .title { background-color: #0b1120 !important; color: #f8fafc !important; border-bottom: 1px solid #334155 !important; border-radius: 8px 8px 0 0; }
#order-standard_cart_proxmox .summary-container .summary-totals, #order-standard_cart .summary-container .summary-totals { border-top: 1px solid #334155 !important; }
#order-standard_cart_proxmox .summary-container .total-due-today, #order-standard_cart .summary-container .total-due-today { color: #38bdf8 !important; }

#order-standard_cart_proxmox .view-cart-items, #order-standard_cart .view-cart-items { background-color: #1e293b !important; border: 1px solid #334155 !important; }
#order-standard_cart_proxmox .view-cart-items .item, #order-standard_cart .view-cart-items .item { background-color: #1e293b !important; border-bottom: 1px solid #334155 !important; border-top: none !important; }
#order-standard_cart_proxmox .view-cart-items .item-title, #order-standard_cart .view-cart-items .item-title { color: #f8fafc !important; }
#order-standard_cart_proxmox .view-cart-items .item-group, #order-standard_cart .view-cart-items .item-group { color: #94a3b8 !important; }

#order-standard_cart_proxmox .view-cart-tabs .nav-tabs > li > a, #order-standard_cart .view-cart-tabs .nav-tabs > li > a { background-color: #0b1120 !important; color: #94a3b8 !important; border: 1px solid #334155 !important; border-bottom: none !important; }
#order-standard_cart_proxmox .view-cart-tabs .nav-tabs > li.active > a, #order-standard_cart .view-cart-tabs .nav-tabs > li.active > a { background-color: #1e293b !important; color: #f8fafc !important; }
#order-standard_cart_proxmox .view-cart-tabs .tab-content, #order-standard_cart .view-cart-tabs .tab-content,
#order-standard_cart_proxmox .marketing-email-optin, #order-standard_cart .marketing-email-optin { background-color: #1e293b !important; border: 1px solid #334155 !important; color: #cbd5e1 !important; border-radius: 8px; padding: 15px !important; }
#order-standard_cart_proxmox .view-cart-tabs .tab-content input[type="text"], #order-standard_cart .view-cart-tabs .tab-content input[type="text"] { background-color: #0f172a !important; border: 1px solid #475569 !important; color: #f8fafc !important; }

/* =========================================
   9. CORRECCIÓN TEXTOS TARJETAS DE PRODUCTOS
   ========================================= */
#order-standard_cart .product header, 
#order-standard_cart .product header *, 
#order-standard_cart .product .product-title,
#order-standard_cart_proxmox .product header, 
#order-standard_cart_proxmox .product header *,
#order-standard_cart_proxmox .product .product-title {
    color: #f8fafc !important; font-weight: 700 !important;
}

/* =========================================
   10. TABLAS DINÁMICAS (DataTables - Mis Servicios)
   ========================================= */
.dataTables_wrapper .row { background-color: #1e293b !important; margin: 0 !important; padding: 10px 0 !important; }
.dataTables_wrapper .row:first-child { border-bottom: 1px solid #334155 !important; }
.dataTables_wrapper .row:last-child { border-top: 1px solid #334155 !important; }
.dataTables_info { color: #94a3b8 !important; }

.dataTables_filter input[type="search"],
.dataTables_length select { background-color: #0f172a !important; border: 1px solid #475569 !important; color: #f8fafc !important; border-radius: 4px !important; padding: 5px 10px !important; }

.pagination > li > a, .pagination > li > span { background-color: #0f172a !important; border-color: #334155 !important; color: #cbd5e1 !important; }
.pagination > li > a:hover, .pagination > li > span:hover { background-color: #334155 !important; color: #ffffff !important; border-color: #475569 !important; }
.pagination > li.active > a, .pagination > li.active > span,
.pagination > li.active > a:hover, .pagination > li.active > span:hover { background-color: #0ea5e9 !important; border-color: #0ea5e9 !important; color: #ffffff !important; }
.pagination > li.disabled > a, .pagination > li.disabled > span { color: #64748b !important; background-color: #1e293b !important; border-color: #334155 !important; }

table.dataTable tbody tr td span.label, table.table tbody tr td span.label, span.status { display: inline-block; padding: 6px 12px !important; border-radius: 4px !important; font-weight: 600 !important; border: 1px solid transparent !important; min-width: 90px; text-align: center; }
.label.status-active, .label-success, span.status.active { background-color: rgba(16, 185, 129, 0.15) !important; color: #34d399 !important; border-color: rgba(16, 185, 129, 0.3) !important; }
.label.status-cancelled, .label.status-terminated, .label-default, span.status.cancelled, span.status.terminated { background-color: rgba(148, 163, 184, 0.1) !important; color: #94a3b8 !important; border-color: rgba(148, 163, 184, 0.2) !important; }
.label.status-pending, .label.status-suspended, .label-warning, .label-danger, span.status.suspended { background-color: rgba(245, 158, 11, 0.15) !important; color: #fbbf24 !important; border-color: rgba(245, 158, 11, 0.3) !important; }

/* =========================================
   11. CORRECCIÓN FINAL CONTENEDORES DE TABLAS
   ========================================= */
.table-container, .table-container .row, .dataTables_wrapper, .dataTables_wrapper > .row { background-color: #1e293b !important; background-image: none !important; }
.dataTables_filter input, .dataTables_filter input[type="search"] { background-color: #0f172a !important; border: 1px solid #475569 !important; color: #f8fafc !important; padding: 5px 10px !important; border-radius: 4px !important; }
.dataTables_length select { background-color: #0f172a !important; border: 1px solid #475569 !important; color: #f8fafc !important; padding: 4px 8px !important; border-radius: 4px !important; }
.dataTables_length, .dataTables_filter, .dataTables_info { color: #94a3b8 !important; }
.paginate_button a, .dataTables_wrapper .pagination > li > a, .dataTables_wrapper .pagination > li > span { background-color: #0f172a !important; border-color: #334155 !important; color: #cbd5e1 !important; }
.paginate_button.active a, .dataTables_wrapper .pagination > li.active > a { background-color: #0ea5e9 !important; border-color: #0ea5e9 !important; color: #ffffff !important; }

/* =========================================
   12. ANIQUILAR FONDOS GRISES DATATABLES
   ========================================= */
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { background-color: #1e293b !important; }
.listtable, table.dataTable { background-color: transparent !important; }

/* =========================================
   13. LUPA DEL BUSCADOR (DataTables) - SVG Vectorial
   ========================================= */
.dataTables_wrapper .dataTables_filter label .form-control { background: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338bdf8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") #0f172a no-repeat 10px center !important; background-size: 16px 16px !important; color: #f8fafc !important; border: 1px solid #475569 !important; padding-left: 35px !important; }
.dataTables_wrapper .dataTables_filter label .form-control:focus { background-color: #1e293b !important; border-color: #38bdf8 !important; }

/* =========================================
   14. ETIQUETAS DE ESTADO (Facturas)
   ========================================= */
.label.status-paid, .label.Paid, span.status-paid { background-color: rgba(16, 185, 129, 0.15) !important; color: #34d399 !important; border-color: rgba(16, 185, 129, 0.3) !important; }
.label.status-unpaid, .label.Unpaid, span.status-unpaid { background-color: rgba(239, 68, 68, 0.15) !important; color: #f87171 !important; border-color: rgba(239, 68, 68, 0.3) !important; }
.label.status-cancelled, .label.Cancelled, span.status-cancelled { background-color: rgba(148, 163, 184, 0.1) !important; color: #94a3b8 !important; border-color: rgba(148, 163, 184, 0.2) !important; }
.label.status-refunded, .label.Refunded, span.status-refunded { background-color: rgba(14, 165, 233, 0.15) !important; color: #38bdf8 !important; border-color: rgba(14, 165, 233, 0.3) !important; }

/* =========================================
   15. CONTADORES DE LA BARRA LATERAL (Badges)
   ========================================= */
.sidebar .list-group-item .badge { background-color: #334155 !important; color: #f8fafc !important; font-weight: 600 !important; border-radius: 10px !important; padding: 3px 8px !important; }
.sidebar .list-group-item:hover .badge, .sidebar .list-group-item.active .badge { background-color: #0ea5e9 !important; color: #ffffff !important; }

/* =========================================
   16. EDITOR MARKDOWN (Tickets de Soporte)
   ========================================= */
.md-editor { border: 1px solid #475569 !important; border-radius: 4px; overflow: hidden; }
.md-editor .md-header { background-color: #1e293b !important; border-bottom: 1px solid #475569 !important; margin: 0 !important; padding: 6px !important; }
.md-editor .md-header .btn-default { background-color: #334155 !important; border-color: #475569 !important; color: #cbd5e1 !important; }
.md-editor .md-header .btn-default:hover { background-color: #475569 !important; color: #ffffff !important; }
.md-editor > textarea.md-input, .md-editor textarea { background-color: #0f172a !important; color: #f8fafc !important; border: none !important; padding: 10px !important; }
.md-editor > textarea.md-input:focus { box-shadow: none !important; background-color: #0f172a !important; }
.md-editor .md-footer { background-color: #1e293b !important; border-top: 1px solid #475569 !important; color: #94a3b8 !important; padding: 5px 10px !important; }
.md-editor .md-preview { background-color: #0f172a !important; color: #cbd5e1 !important; border-top: 1px dashed #475569 !important; padding: 10px !important; }

/* =========================================
   17. SUGERENCIAS BASE DE CONOCIMIENTOS (AJAX)
   ========================================= */
#autoAnswerSuggestions, .auto-answer-suggestions { background-color: #1e293b !important; border: 1px solid #334155 !important; border-radius: 8px !important; padding: 20px !important; margin-top: 20px !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2) !important; }
#autoAnswerSuggestions h3, .auto-answer-suggestions h3, #autoAnswerSuggestions .h3 { color: #f8fafc !important; margin-top: 0 !important; font-weight: 600 !important; }
#autoAnswerSuggestions p, .auto-answer-suggestions p { color: #94a3b8 !important; }
#autoAnswerSuggestions a, .auto-answer-suggestions a { color: #38bdf8 !important; font-weight: 600 !important; }
#autoAnswerSuggestions a:hover, .auto-answer-suggestions a:hover { color: #ffffff !important; text-decoration: none !important; }

/* =========================================
   18. DETALLES DEL PRODUCTO Y MÓDULOS (Proxmox)
   ========================================= */
.product-details-container, .product-info-box, .product-status-display, .clientareaproductdetails .well, .clientareaproductdetails .panel { background-color: #1e293b !important; border: 1px solid #334155 !important; color: #cbd5e1 !important; }
.product-status-display h2, .product-status-display h3, .product-status-display h4, .clientareaproductdetails h2, .clientareaproductdetails h3, .clientareaproductdetails span { color: #f8fafc !important; }
.nav-tabs { border-bottom: 1px solid #334155 !important; }
.nav-tabs > li > a { background-color: #0b1120 !important; color: #94a3b8 !important; border: 1px solid #334155 !important; border-bottom: none !important; margin-right: 2px !important; }
.nav-tabs > li > a:hover { background-color: #1e293b !important; color: #ffffff !important; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { background-color: #1e293b !important; color: #38bdf8 !important; border: 1px solid #334155 !important; border-bottom-color: transparent !important; }
.tab-content, .tab-pane, .mg-wrapper .mg-panel { background-color: #1e293b !important; color: #cbd5e1 !important; border: none !important; }
#main-body .tab-content { padding: 20px !important; border: 1px solid #334155 !important; border-top: none !important; }
.tab-content .row, .tab-pane .row, .mg-wrapper, .mg-wrapper span { color: #cbd5e1 !important; }
.tab-content strong, .tab-content b, .mg-wrapper strong, .mg-wrapper b { color: #f8fafc !important; }
.tab-content h1, .tab-content h2, .tab-content h3, .tab-content h4, .tab-content h5, .mg-wrapper h1, .mg-wrapper h2, .mg-wrapper h3, .mg-wrapper h4, .mg-wrapper h5 { color: #38bdf8 !important; border-bottom-color: #334155 !important; margin-top: 20px !important; }
.tab-pane .well, .tab-pane .panel, .mg-wrapper .mg-widget, .mg-wrapper .mg-box, .mg-wrapper .mg-item { background-color: #0f172a !important; border: 1px solid #334155 !important; color: #cbd5e1 !important; border-radius: 8px !important; transition: all 0.3s ease !important; }
.tab-pane .well:hover, .tab-pane .panel:hover, .mg-wrapper .mg-widget:hover, .mg-wrapper .mg-box:hover, .mg-wrapper .mg-item:hover { border-color: #0ea5e9 !important; background-color: #111827 !important; transform: translateY(-2px); }
.tab-pane a, .mg-wrapper a { color: #38bdf8 !important; font-weight: 600 !important; }
.tab-pane a:hover, .mg-wrapper a:hover { color: #ffffff !important; text-decoration: none !important; }

/* =========================================
   19. CORRECCIÓN CAJAS BLANCAS (Bootstrap Utilities)
   ========================================= */
.clientareaproductdetails .bg-light, .clientareaproductdetails .bg-white, .product-details-container .bg-light { background-color: #0f172a !important; border: 1px solid #334155 !important; }
.clientareaproductdetails .bg-light h2, .clientareaproductdetails .bg-light h3, .clientareaproductdetails .bg-light h4 { color: #f8fafc !important; }
.tab-content .bg-light, .tab-content .bg-white, .tab-content .thumbnail, .mg-wrapper .lu-bg-white, .mg-wrapper .lu-bg-light, .mg-wrapper .bg-light, .mg-wrapper .bg-white { background-color: #0f172a !important; border: 1px solid #334155 !important; color: #cbd5e1 !important; border-radius: 8px !important; transition: all 0.3s ease !important; }
.tab-content .bg-light:hover, .tab-content .bg-white:hover, .tab-content .thumbnail:hover, .mg-wrapper .lu-bg-white:hover, .mg-wrapper .lu-bg-light:hover, .mg-wrapper .bg-light:hover, .mg-wrapper .bg-white:hover { background-color: #1e293b !important; border-color: #0ea5e9 !important; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important; }

/* =========================================
   20. CAJA DE ICONO Y MODULESGARDEN (Proxmox)
   ========================================= */
div.product-details div.product-icon { background-color: #0f172a !important; border: 1px solid #334155 !important; }
#layers2 .lu-tile { background: #0f172a !important; border: 1px solid #334155 !important; box-shadow: none !important; transition: all 0.3s ease !important; }
#layers2 .lu-tile:hover { background: #1e293b !important; border-color: #0ea5e9 !important; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important; }
#layers2 .lu-tile div, #layers2 .lu-tile .lu-tile__title { color: #cbd5e1 !important; font-weight: 600 !important; }
#layers2 .lu-tile:hover div, #layers2 .lu-tile:hover .lu-tile__title { color: #ffffff !important; }

/* =========================================
   21. WIDGETS DE INFORMACIÓN Y TABLAS (ModulesGarden)
   ========================================= */
#layers2 .lu-widget { background-color: #1e293b !important; border: 1px solid #334155 !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2) !important; color: #cbd5e1 !important; }
#layers2 .lu-widget .lu-top__title, #layers2 .lu-widget .lu-widget__header { color: #38bdf8 !important; font-weight: 600 !important; }
#layers2 .lu-widget .lu-widget__body, #layers2 .lu-widget .lu-widget__body span, #layers2 .lu-widget .lu-widget__body div { color: #cbd5e1 !important; }
#layers2 .lu-widget strong, #layers2 .lu-widget b, #layers2 .lu-widget .lu-text-bold, #layers2 .lu-widget .lu-value, #layers2 .lu-widget .lu-list__value { color: #f8fafc !important; }
#layers2 .lu-widget .lu-list__item, #layers2 .lu-widget .lu-row { border-bottom: 1px solid #334155 !important; }
#layers2 .lu-widget .lu-list__item:last-child { border-bottom: none !important; }
#layers2 .lu-widget i, #layers2 .lu-widget .lu-i-c-2x { color: #94a3b8 !important; }
#layers2 .lu-widget i:hover, #layers2 .lu-widget .lu-i-c-2x:hover { color: #38bdf8 !important; }

/* Evitar que Password se parta (Romper Limitación Flexbox) */
#layers2 .lu-widget .lu-widget__body, #layers2 .lu-widget .lu-widget__body div, #layers2 .lu-widget .lu-widget__body span { word-break: normal !important; word-wrap: normal !important; overflow-wrap: normal !important; -webkit-hyphens: none !important; -ms-hyphens: none !important; hyphens: none !important; }
#layers2 .lu-widget .lu-row > div:first-child, #layers2 .lu-widget .lu-list__item > div:first-child { flex: 0 0 auto !important; max-width: 50% !important; width: auto !important; min-width: 140px !important; padding-right: 15px !important; white-space: nowrap !important; }

/* =========================================
   22. TÍTULOS DE SECCIÓN MODULESGARDEN
   ========================================= */
#layers2 h1, #layers2 h2, #layers2 h3, #layers2 h4, #layers2 h5, #layers2 h6, #layers2 .h4.text-center { color: #38bdf8 !important; font-weight: 600 !important; }
#layers2 .text-muted, #layers2 .lu-text-muted { color: #94a3b8 !important; }

/* =========================================
   23. MODULESGARDEN: FORMULARIOS, BARRAS Y CHECKBOXES
   ========================================= */
/* 1. Carril vacío de las barras (La pista oscura de fondo) */
html body #layers2 .lu-progress,
html body #layers2 .lu-progress__bar {
    background-color: #0f172a !important; 
    background-image: none !important;
    border: 1px solid #334155 !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.4) !important;
}

/* 2. El relleno de la barra (Solo pintar clases específicas de progreso) */
html body #layers2 .lu-progress__fill,
html body #layers2 .lu-progress-bar,
html body #layers2 .lu-progress__bar-fill {
    background-color: #0ea5e9 !important; 
    background-image: none !important;
    border: none !important;
}

/* 3. Checkboxes (El cuadrado en reposo) */
html body #layers2 .lu-form-check .lu-form-indicator {
    background-color: #0f172a !important;
    background-image: none !important;
    border: 1px solid #475569 !important;
}

/* 4. Checkboxes (Marcado / Azul) */
html body #layers2 .lu-form-check input[type="checkbox"]:checked + .lu-form-indicator {
    background-color: #0ea5e9 !important;
    border-color: #0284c7 !important;
}
html body #layers2 .lu-form-check .lu-form-indicator::after {
    border-color: #ffffff !important;
}

/* 5. Buscadores y Formularios (Inputs) */
html body #layers2 .lu-input-group,
html body #layers2 .lu-form-control,
html body #layers2 .lu-input-group__addon {
    background-color: #0f172a !important;
    background-image: none !important;
    border-color: #475569 !important;
    color: #f8fafc !important;
}

/* =========================================
   24. VENTANAS MODALES (Pop-ups ModulesGarden y WHMCS)
   ========================================= */

/* Contenedor principal de la ventana */
html body #layers2 .lu-modal__content,
html body .modal-content {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6) !important;
    border-radius: 8px !important;
}

/* Cabecera (El truco estaba en la clase .lu-modal__top) */
html body #layers2 .lu-modal__top,
html body .modal-header {
    background-color: #0b1120 !important;
    border-bottom: 1px solid #334155 !important;
    border-radius: 8px 8px 0 0 !important;
}

/* Título (Clase oculta .lu-top__title y control de nuestro propio gris) */
html body #layers2 .lu-modal__top .lu-top__title,
html body #app-clientarea #layers2 div.lu-top__title span,
html body #layers2 div.lu-top__title.lu-type-6 span,
html body .modal-title {
    color: #38bdf8 !important; /* Azul eléctrico */
    font-weight: 600 !important;
}

/* Botón de cerrar (Clase oculta .closeModal) */
html body #layers2 .lu-modal__top .closeModal,
html body .modal-header .close {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
html body #layers2 .lu-modal__top .closeModal i,
html body .modal-header .close {
    color: #94a3b8 !important;
    opacity: 0.8 !important;
}
html body #layers2 .lu-modal__top .closeModal:hover i,
html body .modal-header .close:hover {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Cuerpo y textos (Labels como "Start Time") */
html body #layers2 .lu-modal__body,
html body .modal-body {
    color: #cbd5e1 !important;
}
html body #layers2 .lu-form-label,
html body #layers2 .lu-modal__body label,
html body .modal-body label {
    color: #f8fafc !important;
    font-weight: 600 !important;
}

/* Pie del modal */
html body #layers2 .lu-modal__actions,
html body .modal-footer {
    border-top: 1px solid #334155 !important;
    background-color: #0b1120 !important;
    border-radius: 0 0 8px 8px !important;
    padding: 15px !important;
}

/* Botones de acción dentro del Pop-up */
html body #layers2 .lu-btn--success {
    background-color: #0ea5e9 !important; 
    border-color: #0284c7 !important;
    color: #ffffff !important;
}
html body #layers2 .lu-btn--success:hover {
    background-color: #0284c7 !important;
    border-color: #0369a1 !important;
}

html body #layers2 .lu-btn--default,
html body #layers2 .lu-btn--cancel {
    background-color: #334155 !important;
    border-color: #475569 !important;
    color: #f8fafc !important;
}
html body #layers2 .lu-btn--default:hover,
html body #layers2 .lu-btn--cancel:hover {
    background-color: #475569 !important;
    color: #ffffff !important;
}