@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');
/* ============================================
   VEYEC WHMCS Theme — Paleta Azul (Legalix)
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap');

/* ============================================BASE============================================ */
html, body {
background-color: #0a0f0a !important;
color: #ffffff !important;
font-family: 'Inter', Arial, sans-serif !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0a0f0a; }
::-webkit-scrollbar-thumb { background: #1a2a3a; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #3b82f6; }

/* ============================================NAVBAR============================================ */
body .header,
body #header,
body .navbar,
body .navbar-default,
body .navbar-light,
body .main-navbar-wrapper,
body .main-navbar-wrapper .navbar {
background-color: rgba(10, 15, 10, 0.97) !important;
background: rgba(10, 15, 10, 0.97) !important;
border-color: rgba(255,255,255,0.06) !important;
box-shadow: none !important;
}

body .topbar {
background-color: rgba(10, 15, 10, 0.98) !important;
border-bottom: 1px solid rgba(255,255,255,0.06) !important;
color: #6b7280 !important;
}

body .topbar .btn,
body .topbar a {
color: #6b7280 !important;
font-size: 0.65rem !important;
font-weight: 700 !important;
}

body .navbar-brand,
body .navbar-brand:hover,
body .navbar-brand:focus {
color: #ffffff !important;
font-weight: 900 !important;
font-size: 1.1rem !important;
letter-spacing: -0.03em !important;
}

body .navbar-brand .logo-img {
filter: brightness(0) invert(1) !important;
max-height: 32px !important;
}

body #nav .nav-item .nav-link,
body .navbar-nav .nav-item .nav-link,
body .navbar-nav > li > a {
color: #9ca3af !important;
font-size: 0.65rem !important;
font-weight: 900 !important;
text-transform: uppercase !important;
letter-spacing: 0.18em !important;
background: transparent !important;
}

body #nav .nav-item .nav-link:hover,
body .navbar-nav .nav-item .nav-link:hover,
body .navbar-nav > li > a:hover,
body #nav .nav-item.active .nav-link,
body .navbar-nav .nav-item.active .nav-link {
color: #3b82f6 !important;
background: transparent !important;
}

/* Dropdown */
body .dropdown-menu {
background-color: #1a1a1a !important;
border: 1px solid rgba(255,255,255,0.07) !important;
border-radius: 0.75rem !important;
box-shadow: 0 20px 50px rgba(0,0,0,0.6) !important;
padding: 0.4rem !important;
}

body .dropdown-menu .dropdown-item,
body .dropdown-menu > li > a {
color: #9ca3af !important;
font-size: 0.72rem !important;
font-weight: 600 !important;
border-radius: 0.5rem !important;
padding: 0.55rem 0.9rem !important;
background: transparent !important;
}

body .dropdown-menu .dropdown-item:hover,
body .dropdown-menu > li > a:hover {
background-color: rgba(59,130,246,0.1) !important;
color: #3b82f6 !important;
}

/* Cart badge */
body .cart-btn .badge {
background-color: #3b82f6 !important;
color: #fff !important;
}


/* ============================================BREADCRUMB============================================ */
body .master-breadcrumb,
body nav.master-breadcrumb {
background-color: rgba(10,15,10,0.9) !important;
border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}

body .breadcrumb {
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
}

body .breadcrumb-item,
body .breadcrumb-item a {
color: #6b7280 !important;
font-size: 0.62rem !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.15em !important;
text-decoration: none !important;
}

body .breadcrumb-item.active {
color: #3b82f6 !important;
}

body .breadcrumb-item + .breadcrumb-item::before {
color: #374151 !important;
}

/* ============================================MAIN BODY / SECTIONS============================================ */
body #main-body,
body .primary-bg-color,
body section#main-body {
background-color: #0a0f0a !important;
}

body .container,
body .container-fluid {
background: transparent !important;
}

/* ============================================DOMAIN SEARCH SECTION============================================ */
body .domain-search-container,
body .domain-search-wrap,
body #domain-search,
body .domain-search {
background-color: #1a1a1a !important;
border: 1px solid rgba(255,255,255,0.07) !important;
border-radius: 1.5rem !important;
}

body .domain-search-container .btn-primary,
body #domain-search .btn-primary {
background-color: #2563eb !important;
border-color: #2563eb !important;
color: #fff !important;
}

/* ============================================CARDS / PANELS============================================ */
body .card,
body .panel,
body .panel-default,
body .panel-primary,
body .panel-body,
body .product-list .card,
body .service-box {
background-color: #1a1a1a !important;
border: 1px solid rgba(255,255,255,0.05) !important;
border-radius: 1.25rem !important;
box-shadow: none !important;
color: #ffffff !important;
}

body .card-body,
body .panel-body {
background: transparent !important;
color: #ffffff !important;
}

body .card-header,
body .panel-heading,
body .panel-default > .panel-heading {
background-color: rgba(255,255,255,0.03) !important;
border-bottom: 1px solid rgba(255,255,255,0.06) !important;
color: #ffffff !important;
font-weight: 900 !important;
font-size: 0.7rem !important;
text-transform: uppercase !important;
letter-spacing: 0.2em !important;
}

body .card-title,
body .panel-title,
body h1, body h2, body h3, body h4, body h5, body h6 {
color: #ffffff !important;
font-weight: 900 !important;
letter-spacing: -0.02em !important;
}

/* Product/service cards on homepage */
body .product-list .card,
body .product-list .card-body,
body .product-list .card-footer {
background-color: #1a1a1a !important;
border-color: rgba(255,255,255,0.05) !important;
}

body .product-list .card:hover {
border-color: rgba(59,130,246,0.3) !important;
transform: translateY(-2px) !important;
transition: all 0.3s !important;
}

body .product-list .card .card-footer {
background-color: rgba(255,255,255,0.02) !important;
}

/* ============================================BUTTONS============================================ */
body .btn-primary,
body .btn-success,
body a.btn-primary,
body a.btn-success,
body input[type="submit"].btn-primary {
background-color: #2563eb !important;
border-color: #2563eb !important;
color: #ffffff !important;
font-weight: 900 !important;
font-size: 0.68rem !important;
text-transform: uppercase !important;
letter-spacing: 0.15em !important;
border-radius: 9999px !important;
padding: 0.65rem 1.5rem !important;
box-shadow: none !important;
transition: all 0.2s !important;
}

body .btn-primary:hover,
body .btn-success:hover {
background-color: #3b82f6 !important;
border-color: #3b82f6 !important;
color: #fff !important;
transform: translateY(-1px) !important;
box-shadow: 0 4px 20px rgba(59,130,246,0.3) !important;
}

body .btn-default,
body .btn-secondary,
body a.btn-default {
background-color: transparent !important;
border: 1px solid rgba(59,130,246,0.4) !important;
color: #60a5fa !important;
font-weight: 700 !important;
font-size: 0.68rem !important;
text-transform: uppercase !important;
letter-spacing: 0.15em !important;
border-radius: 9999px !important;
padding: 0.65rem 1.5rem !important;
box-shadow: none !important;
}

body .btn-default:hover,
body .btn-secondary:hover {
border-color: #3b82f6 !important;
color: #3b82f6 !important;
background: rgba(59,130,246,0.06) !important;
}

body .btn-danger {
background-color: transparent !important;
border: 1px solid rgba(239,68,68,0.3) !important;
color: #ef4444 !important;
border-radius: 9999px !important;
font-weight: 700 !important;
font-size: 0.68rem !important;
text-transform: uppercase !important;
letter-spacing: 0.15em !important;
}

body .btn-danger:hover {
background-color: rgba(239,68,68,0.1) !important;
}


/* ============================================FORMS============================================ */
body .form-control,
body input[type="text"],
body input[type="email"],
body input[type="password"],
body input[type="search"],
body select,
body textarea {
background-color: rgba(255,255,255,0.04) !important;
border: 1px solid rgba(255,255,255,0.12) !important;
border-radius: 0.6rem !important;
color: #ffffff !important;
font-size: 0.875rem !important;
padding: 0.65rem 1rem !important;
box-shadow: none !important;
transition: border-color 0.2s !important;
}

body .form-control:focus,
body input:focus,
body select:focus,
body textarea:focus {
border-color: rgba(59,130,246,0.4) !important;
background-color: rgba(59,130,246,0.04) !important;
box-shadow: 0 0 0 3px rgba(59,130,246,0.08) !important;
color: #ffffff !important;
outline: none !important;
}

body .form-control::placeholder,
body input::placeholder {
color: #4b5563 !important;
}

body label,
body .control-label,
body .col-form-label {
color: #9ca3af !important;
font-size: 0.65rem !important;
font-weight: 900 !important;
text-transform: uppercase !important;
letter-spacing: 0.18em !important;
}

body .input-group-text,
body .input-group-prepend .btn,
body .input-group-append .btn {
background-color: rgba(255,255,255,0.05) !important;
border-color: rgba(255,255,255,0.12) !important;
color: #9ca3af !important;
}

/* ============================================TABLES============================================ */
body .table,
body table {
color: #ffffff !important;
}

body .table thead th,
body .table > thead > tr > th {
background-color: rgba(255,255,255,0.03) !important;
border-bottom: 1px solid rgba(255,255,255,0.07) !important;
color: #9ca3af !important;
font-size: 0.6rem !important;
font-weight: 900 !important;
text-transform: uppercase !important;
letter-spacing: 0.22em !important;
padding: 0.9rem 1rem !important;
}

body .table tbody td,
body .table > tbody > tr > td {
border-top: 1px solid rgba(255,255,255,0.05) !important;
padding: 0.9rem 1rem !important;
vertical-align: middle !important;
color: #e5e7eb !important;
}

body .table-striped > tbody > tr:nth-of-type(odd) {
background-color: rgba(255,255,255,0.02) !important;
}

body .table-hover > tbody > tr:hover {
background-color: rgba(59,130,246,0.04) !important;
}

/* ============================================ALERTS============================================ */
body .alert {
border-radius: 0.75rem !important;
font-size: 0.85rem !important;
font-weight: 500 !important;
border-width: 1px !important;
}

body .alert-success {
background-color: rgba(59,130,246,0.08) !important;
border-color: rgba(59,130,246,0.3) !important;
color: #60a5fa !important;
}

body .alert-danger,
body .alert-error {
background-color: rgba(239,68,68,0.08) !important;
border-color: rgba(239,68,68,0.3) !important;
color: #ef4444 !important;
}

body .alert-warning {
background-color: rgba(234,179,8,0.08) !important;
border-color: rgba(234,179,8,0.3) !important;
color: #eab308 !important;
}

body .alert-info {
background-color: rgba(59,130,246,0.08) !important;
border-color: rgba(59,130,246,0.3) !important;
color: #60a5fa !important;
}

/* ============================================BADGES / LABELS============================================ */
body .badge,
body .label {
font-size: 0.58rem !important;
font-weight: 900 !important;
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
border-radius: 9999px !important;
padding: 0.3em 0.7em !important;
}

body .badge-success, body .label-success { background-color: #3b82f6 !important; color: #fff !important; }
body .badge-danger, body .label-danger { background-color: #ef4444 !important; color: #fff !important; }
body .badge-warning, body .label-warning { background-color: #eab308 !important; color: #000 !important; }
body .badge-info, body .label-info { background-color: #3b82f6 !important; color: #fff !important; }
body .badge-secondary, body .label-default {
background-color: rgba(255,255,255,0.08) !important;
color: #9ca3af !important;
}

/* ============================================SIDEBAR============================================ */
body .sidebar .list-group,
body .sidebar .panel {
background: transparent !important;
border: none !important;
}

body .sidebar .list-group-item,
body .sidebar .list-group-item a {
background-color: transparent !important;
border: none !important;
color: #9ca3af !important;
font-size: 0.7rem !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.15em !important;
padding: 0.65rem 0.9rem !important;
border-radius: 0.6rem !important;
transition: all 0.2s !important;
text-decoration: none !important;
}

body .sidebar .list-group-item:hover,
body .sidebar .list-group-item.active,
body .sidebar .list-group-item a:hover {
background-color: rgba(59,130,246,0.08) !important;
color: #3b82f6 !important;
border-color: transparent !important;
}

body .sidebar .panel-heading {
background: transparent !important;
border-bottom: 1px solid rgba(255,255,255,0.06) !important;
color: #3b82f6 !important;
font-size: 0.6rem !important;
font-weight: 900 !important;
text-transform: uppercase !important;
letter-spacing: 0.25em !important;
}


/* ============================================TABS============================================ */
body .nav-tabs {
border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}

body .nav-tabs .nav-link,
body .nav-tabs > li > a {
color: #6b7280 !important;
font-size: 0.65rem !important;
font-weight: 900 !important;
text-transform: uppercase !important;
letter-spacing: 0.18em !important;
border: none !important;
border-bottom: 2px solid transparent !important;
border-radius: 0 !important;
background: transparent !important;
padding: 0.7rem 1.1rem !important;
transition: all 0.2s !important;
}

body .nav-tabs .nav-link:hover,
body .nav-tabs > li > a:hover {
color: #e5e7eb !important;
border-bottom-color: rgba(255,255,255,0.15) !important;
background: transparent !important;
}

body .nav-tabs .nav-link.active,
body .nav-tabs > li.active > a {
color: #3b82f6 !important;
border-bottom: 2px solid #3b82f6 !important;
background: transparent !important;
border-top: none !important;
border-left: none !important;
border-right: none !important;
}

body .tab-content {
padding-top: 1.5rem !important;
background: transparent !important;
}

/* ============================================PAGINATION============================================ */
body .pagination .page-link,
body .pagination > li > a {
background-color: #1a1a1a !important;
border-color: rgba(255,255,255,0.07) !important;
color: #9ca3af !important;
font-size: 0.72rem !important;
font-weight: 700 !important;
}

body .pagination .page-link:hover,
body .pagination > li > a:hover {
background-color: rgba(59,130,246,0.1) !important;
border-color: rgba(59,130,246,0.3) !important;
color: #3b82f6 !important;
}

body .pagination .page-item.active .page-link,
body .pagination > .active > a {
background-color: #2563eb !important;
border-color: #2563eb !important;
color: #fff !important;
}

/* ============================================MODALS============================================ */
body .modal-content {
background-color: #1a1a1a !important;
border: 1px solid rgba(255,255,255,0.08) !important;
border-radius: 1.25rem !important;
box-shadow: 0 40px 80px rgba(0,0,0,0.7) !important;
color: #ffffff !important;
}

body .modal-header {
border-bottom: 1px solid rgba(255,255,255,0.07) !important;
padding: 1.25rem 1.5rem !important;
}

body .modal-footer {
border-top: 1px solid rgba(255,255,255,0.07) !important;
padding: 1rem 1.5rem !important;
}

body .modal-title {
color: #ffffff !important;
font-weight: 900 !important;
}

body .modal-body {
color: #e5e7eb !important;
}

body .close {
color: #6b7280 !important;
opacity: 1 !important;
text-shadow: none !important;
}

body .close:hover {
color: #ffffff !important;
}

/* ============================================MISC============================================ */
body a {
color: #3b82f6 !important;
transition: color 0.2s !important;
}

body a:hover {
color: #60a5fa !important;
text-decoration: none !important;
}

body p, body span, body li, body td, body th {
color: inherit !important;
}

body hr {
border-color: rgba(255,255,255,0.07) !important;
}

body .text-muted {
color: #6b7280 !important;
}

body .text-success { color: #3b82f6 !important; }
body .text-danger { color: #ef4444 !important; }
body .text-warning { color: #eab308 !important; }
body .text-info { color: #60a5fa !important; }

body .well {
background-color: rgba(255,255,255,0.03) !important;
border: 1px solid rgba(255,255,255,0.07) !important;
border-radius: 0.75rem !important;
box-shadow: none !important;
color: #e5e7eb !important;
}

body .progress {
background-color: rgba(255,255,255,0.06) !important;
border-radius: 9999px !important;
height: 6px !important;
}

body .progress-bar {
background-color: #3b82f6 !important;
border-radius: 9999px !important;
}

/* ============================================FOOTER============================================ */
body #footer,
body footer.footer,
body .footer {
background-color: #060a06 !important;
border-top: 1px solid rgba(255,255,255,0.05) !important;
color: #6b7280 !important;
}

body #footer a,
body footer.footer a,
body .footer a {
color: #6b7280 !important;
}

body #footer a:hover,
body footer.footer a:hover {
color: #3b82f6 !important;
}

body #footer .copyright,
body footer .copyright {
color: #374151 !important;
font-size: 0.6rem !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.25em !important;
}

/* ============================================HOMEPAGE SPECIFIC============================================ */
body .homepage-features .panel,
body .homepage-features .card {
background-color: #1a1a1a !important;
border: 1px solid rgba(255,255,255,0.05) !important;
border-radius: 1.25rem !important;
transition: border-color 0.3s !important;
}

body .homepage-features .panel:hover,
body .homepage-features .card:hover {
border-color: rgba(59,130,246,0.2) !important;
}

body .homepage-features .panel .panel-heading,
body .homepage-features .card .card-header {
background: transparent !important;
border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}


/* Esto baja la barra del breadcrumb (Portal Home / Client Area) */
nav[aria-label="breadcrumb"] {
top: 80px !important;
}

/* Esto asegura que el contenido de WHMCS baje y no quede debajo del breadcrumb */
#main-body {
padding-top: 145px !important;
}

/* Forzar texto oscuro en el bloque de Order Summary del carrito */
#orderSummary, .order-summary, div[id^="orderSummary"] {
color: #1a1a1a !important;
}

#orderSummary *, .order-summary *, div[id^="orderSummary"] * {
color: #1a1a1a !important;
}

.order-summary .header, #orderSummary .header {
color: #ffffff !important;
}

/* Cambiar a texto oscuro los enlaces del menú lateral izquierdo (Categories / Actions) */
.panel-sidebar .list-group-item,
.panel-sidebar a.list-group-item,
div[class*="sidebar"] .list-group-item {
color: #1a1a1a !important;
}

.panel-sidebar a.list-group-item:hover,
.panel-sidebar .list-group-item:hover {
color: #000000 !important;
background-color: #f0f0f0 !important;
}

/* Soluciona el corte en la caja de Choose Billing Cycle */
select[name="billingcycle"],
#frmConfigureProduct .form-control {
height: auto !important;
min-height: 45px !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
line-height: normal !important;
}

select[name="billingcycle"],
select.form-control,
#frmConfigureProduct select {
color-scheme: dark !important;
}

select option, .form-control option {
color: #1a1a1a !important;
background-color: #ffffff !important;
}

/* Oculta enlaces de dominios en la barra lateral */
.panel-sidebar a[href*="domain=register"],
.panel-sidebar a[href*="domain=transfer"],
.panel-sidebar a[href*="domain=renew"],
.panel-sidebar a[href*="cart.php?a=add&domain"] {
display: none !important;
}

.panel-sidebar a[href*="domain=renew"],
.panel-sidebar a[href*="renewals"],
.panel-sidebar a[href*="cart.php?gid=renewals"] {
display: none !important;
}

div[menuitemname="Actions"] {
display: none !important;
}

.list-group a[href*="cart.php"]:not([href*="a=confproduct"]):not([href*="a=view"]),
.list-group a[href*="domain"],
.list-group-item[href*="cart.php"]:not([href*="a=confproduct"]):not([href*="a=view"]),
.list-group-item[href*="domain"],
div[class*="sidebar"] a[href*="cart.php"]:not([href*="a=confproduct"]):not([href*="a=view"]),
div[class*="sidebar"] a[href*="domain"] {
display: none !important;
}

/* =========================================
   CAJAS DE ESTADÍSTICAS (MODO OSCURO TOTAL)
   ========================================= */
.tiles a.tile {
background-color: #1a1a1a !important;
border: 1px solid rgba(255,255,255,0.05) !important;
}

.tiles a.tile .stat,
.tiles a.tile .title {
color: #ffffff !important;
}

.tiles a.tile i,
.tiles a.tile i.fas,
.tiles a.tile i[class*="fa-"] {
font-family: "Font Awesome 5 Free", "FontAwesome", sans-serif !important;
font-weight: 900 !important;
color: rgba(255, 255, 255, 0.15) !important;
display: block !important;
}

.tiles a.tile:hover {
background-color: #222222 !important;
}

/* =========================================
   TABLAS EN MODO OSCURO (Facturas, Tickets)
   ========================================= */
table.dataTable tbody tr,
table.dataTable tbody td,
.table tbody tr,
.table tbody td {
background-color: #1a1a1a !important;
color: #e5e7eb !important;
border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

table.dataTable tbody tr:hover,
table.dataTable tbody tr:hover td,
.table tbody tr:hover,
.table tbody tr:hover td {
background-color: #222222 !important;
cursor: pointer !important;
}

table.dataTable tbody td.dataTables_empty,
.dataTables_empty {
color: #9ca3af !important;
background-color: #1a1a1a !important;
text-align: center !important;
}


/* =========================================
   FACTURA COMPLETA EN MODO OSCURO
   ========================================= */
.invoice-container,
.container-invoice,
body.invoice {
background-color: #1a1a1a !important;
border: 1px solid rgba(255, 255, 255, 0.05) !important;
color: #e5e7eb !important;
}

.invoice-container p,
.invoice-container h1,
.invoice-container h2,
.invoice-container h3,
.invoice-container h4,
.invoice-container td,
.invoice-container th,
.invoice-container span,
.invoice-container .text-muted {
color: #e5e7eb !important;
}

.invoice-container .total-row td,
.invoice-container table tr td {
background-color: #1a1a1a !important;
border-color: rgba(255, 255, 255, 0.05) !important;
}

/* =========================================
   MODO OSCURO PARA EL EDITOR DE TICKETS
   ========================================= */
div.md-editor,
div.md-editor > textarea,
textarea#inputMessage,
textarea#replymessage {
background-color: #1a1a1a !important;
color: #ffffff !important;
border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

div.md-editor .md-header,
div.md-editor .md-footer {
background-color: #111811 !important;
border: 1px solid rgba(255, 255, 255, 0.05) !important;
color: #9ca3af !important;
}

div.md-editor .md-header .btn,
div.md-editor .md-header .btn-default {
background-color: transparent !important;
border: none !important;
color: #e5e7eb !important;
box-shadow: none !important;
}

div.md-editor .md-header .btn i,
div.md-editor .md-header .btn span,
div.md-editor .md-header .fa,
div.md-editor .md-header .fas,
div.md-editor .md-header .glyphicon {
font-family: "Font Awesome 5 Free", "FontAwesome", sans-serif !important;
font-weight: 900 !important;
color: #9ca3af !important;
display: inline-block !important;
}

div.md-editor .md-header .btn:hover,
div.md-editor .md-header .btn:hover i {
background-color: rgba(59, 130, 246, 0.1) !important;
color: #3b82f6 !important;
}

div.md-preview {
background-color: #1a1a1a !important;
color: #e5e7eb !important;
border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* =========================================
   ADJUNTOS Y BOTONES LATERALES
   ========================================= */
.custom-file-label {
background-color: #1a1a1a !important;
color: #9ca3af !important;
border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.custom-file-label::after {
background-color: #222222 !important;
color: #e5e7eb !important;
border-left: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.panel-sidebar .btn, .panel-sidebar button {
white-space: nowrap !important;
}

/* =========================================
   FIX: ICONOS DEL TICKET Y BARRA LATERAL
   ========================================= */
.ticket-reply i,
.ticket-reply i.fas,
.ticket-reply i.fa,
.ticket-reply i[class*="fa-"],
.ticket-attachment i,
.ticket-attachment i.fas,
div[class*="ticket"] i.fas {
font-family: "Font Awesome 5 Free", "FontAwesome", sans-serif !important;
font-weight: 900 !important;
display: inline-block !important;
}

.ticket-reply .controls i {
color: #9ca3af !important;
}

.ticket-reply .controls a:hover i {
color: #3b82f6 !important;
}

.panel-sidebar .panel-body,
.panel-sidebar .panel-body *,
.panel-sidebar .list-group-item,
.panel-sidebar .list-group-item *,
.panel-sidebar a.list-group-item,
div[class*="sidebar"] .list-group-item,
div[class*="sidebar"] .list-group-item * {
color: #e5e7eb !important;
background-color: transparent !important;
}

.panel-sidebar a.list-group-item:hover,
.panel-sidebar .list-group-item:hover,
.panel-sidebar a.list-group-item:hover * {
color: #ffffff !important;
background-color: rgba(59, 130, 246, 0.1) !important;
}

/* =========================================
   FIX: ESTRELLAS DE CALIFICACIÓN
   ========================================= */
.ticket-reply .rating span.star, .ticket-reply .rating-done span.star,
.ticket-reply .rating span.star::before, .ticket-reply .rating-done span.star::before {
font-family: "Font Awesome 5 Free", "FontAwesome", sans-serif !important;
font-weight: 900 !important;
color: #4b5563 !important;
}

.ticket-reply .rating span.star.active, .ticket-reply .rating-done span.star.active,
.ticket-reply .rating span.star.active::before, .ticket-reply .rating-done span.star.active::before {
color: #ffc107 !important;
}


/* =========================================
   FIX: ICONOS KNOWLEDGEBASE
   ========================================= */
.kb-article-rating .btn i,
.kb-article-rating .btn span,
form[action*="knowledgebase"] button i,
form[name="kbrating"] button i,
button[name="useful"] i,
button[name="vote"] i {
font-family: "Font Awesome 5 Free", "FontAwesome", sans-serif !important;
font-weight: 900 !important;
display: inline-block !important;
}

.kb-article-rating .btn {
color: #ffffff !important;
}

.kb-article-meta i,
.kb-article-meta span,
.kb-article i,
.kb-article .fas,
.kb-article .fa,
a.btn i.fa-print,
button i.fa-print {
font-family: "Font Awesome 5 Free", "FontAwesome", sans-serif !important;
font-weight: 900 !important;
display: inline-block !important;
}

/* =========================================
   FIX: ICONOS LIGHT/REGULAR
   ========================================= */
.kb-article .fal,
.kb-article .far,
.kb-article i[class*="fa-"],
.panel-sidebar .fal,
.panel-sidebar .far,
.panel-sidebar i[class*="fa-"],
div[class*="sidebar"] .fal,
div[class*="sidebar"] .far,
div[class*="sidebar"] i[class*="fa-"] {
font-family: "Font Awesome 5 Free", "FontAwesome", sans-serif !important;
font-weight: 900 !important;
}

.kb-article .fal::before,
.kb-article .far::before,
.panel-sidebar .fal::before,
.panel-sidebar .far::before {
font-weight: 900 !important;
}

/* =========================================
   BOMBA ATÓMICA: FORZAR TODOS LOS ÍCONOS
   ========================================= */
i.fa, i.fas, i.far, i.fal, span.fa, span.fas, span.far, span.fal,
i[class*="fa-"], span[class*="fa-"] {
font-family: "Font Awesome 5 Free", "FontAwesome", sans-serif !important;
font-weight: 900 !important;
}

i.fab, span.fab {
font-family: "Font Awesome 5 Brands", sans-serif !important;
font-weight: 400 !important;
}

/* =========================================
   FIX: SELECTOR DE ENTRADAS Y BUSCADOR
   ========================================= */
.dataTables_length select,
.dataTables_filter input {
height: auto !important;
min-height: 38px !important;
padding: 4px 10px !important;
line-height: normal !important;
box-sizing: border-box !important;
}

.dataTables_length select option {
color: #1a1a1a !important;
background-color: #ffffff !important;
}

/* =========================================
   FIX: PÁGINA DE ABRIR NUEVO TICKET
   ========================================= */
textarea#message,
#frmSubmitTicket textarea {
background-color: #1a1a1a !important;
color: #ffffff !important;
border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

#frmSubmitTicket select,
select#priority,
select#relatedservice {
background-color: #1a1a1a !important;
color: #ffffff !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
color-scheme: dark !important;
}

#frmSubmitTicket select option {
background-color: #1a1a1a !important;
color: #ffffff !important;
}

#frmSubmitTicket .text-muted,
#frmSubmitTicket .small,
.ticket-attachments-message {
color: #9ca3af !important;
}

/* =========================================
   FIX: MENÚ LATERAL (SIN NÚMERO DE ARTÍCULOS)
   ========================================= */
.panel-sidebar .list-group-item,
.panel-sidebar a.list-group-item,
div[class*="sidebar"] .list-group-item {
position: relative !important;
display: block !important;
padding-right: 15px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}

.panel-sidebar .list-group-item .badge,
.panel-sidebar a.list-group-item .badge,
div[class*="sidebar"] .list-group-item .badge {
display: none !important;
}

/* =========================================
   FIX DEFINITIVO: USAR SELECTORES NATIVOS
   ========================================= */
/* 1. Destruir y ocultar los menús "falsos" de JS que se traban */
#frmSubmitTicket .bootstrap-select,
#frmSubmitTicket .select2-container,
.ticket-reply .bootstrap-select,
.ticket-reply .select2-container {
display: none !important;
}

/* 2. Revivir los selectores nativos */
#frmSubmitTicket select,
.ticket-reply select,
select[name="deptid"],
select[name="urgency"],
select[name="priority"],
select[name="relatedservice"] {
display: block !important;
width: 100% !important;
height: auto !important;
min-height: 45px !important;
background-color: #1a1a1a !important;
color: #ffffff !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
border-radius: 0.6rem !important;
padding: 8px 15px !important;
line-height: normal !important;
opacity: 1 !important;
visibility: visible !important;
position: relative !important;
z-index: 9999 !important;
cursor: pointer !important;
-webkit-appearance: auto !important;
-moz-appearance: auto !important;
appearance: auto !important;
}

/* 3. Colores oscuros para las opciones desplegadas */
#frmSubmitTicket select option,
.ticket-reply select option,
select[name="urgency"] option {
background-color: #1a1a1a !important;
color: #ffffff !important;
padding: 5px !important;
}

/* 4. Asegurarnos que el editor se quede tranquilo abajo */
div.md-editor {
position: relative !important;
z-index: 1 !important;
}

/* =========================================
   FIX: CAMPOS PERSONALIZADOS CORTADOS
   ========================================= */
#customFieldsContainer select,
#customFieldsContainer input[type="text"],
#frmSubmitTicket [name^="customfield"] {
display: block !important;
width: 100% !important;
height: auto !important;
min-height: 45px !important;
background-color: #1a1a1a !important;
color: #ffffff !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
border-radius: 0.6rem !important;
padding: 8px 15px !important;
line-height: normal !important;
}

#customFieldsContainer select {
-webkit-appearance: auto !important;
-moz-appearance: auto !important;
appearance: auto !important;
cursor: pointer !important;
}

#customFieldsContainer select option {
background-color: #1a1a1a !important;
color: #ffffff !important;
padding: 5px !important;
}


/* EL GOLPE DE GRACIA RADICAL - ANTI-JAVASCRIPT */

/* 1. Atacamos CUALQUIER lista dentro del carrito */
#order-standard_cart .includes ul, 
.product-group .includes ul,
div.includes ul {
    display: block !important;
    column-count: 3 !important; /* Usamos columnas de texto, que el JS no sabe manipular */
    column-gap: 20px !important;
    width: 100% !important;
    height: auto !important;
}

/* 2. Forzamos a los items a NO comportarse como bloques flotantes */
#order-standard_cart .includes ul li,
.product-group .includes ul li,
div.includes ul li {
    display: inline-block !important; /* Evita que el JS los flote */
    width: 100% !important; /* 100% del ANCHO DE LA COLUMNA (que ya es 1/3) */
    float: none !important; /* Matamos el float que el JS quiere poner */
    position: static !important; /* Matamos el posicionamiento absoluto si existe */
    break-inside: avoid-column !important;
    padding: 8px 0 !important;
}

/* Ajuste para Tablet (2 columnas) */
@media (max-width: 991px) {
    #order-standard_cart .includes ul {
        column-count: 2 !important;
    }
}

/* Ajuste para Celular (1 columna) */
@media (max-width: 480px) {
    #order-standard_cart .includes ul {
        column-count: 1 !important;
    }
}





/* =========================================
   FIX: PLANES PREMIUM COMPARISON 3-4 COLS
   ========================================= */
#order-premium_comparison .price-table-container ul {
    display: flex !important;
    flex-wrap: wrap !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
}

#order-premium_comparison .price-table-container ul > li {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
}

/* En móvil, 1 columna */
@media (max-width: 768px) {
    #order-premium_comparison .price-table-container ul {
        flex-direction: column !important;
    }
    #order-premium_comparison .price-table-container ul > li {
        flex: 0 0 100% !important;
    }
}



/* =========================================
   FIX: FEATURES EN 3 COLUMNAS
   ========================================= */
.includes-features .list-features {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px 20px !important;
    list-style: none !important;
    padding: 1rem 0 !important;
}

.includes-features .list-features li {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    color: #e5e7eb !important;
    font-size: 0.8rem !important;
    padding: 0.5rem 0 !important;
}

@media (max-width: 768px) {
    .includes-features .list-features {
        grid-template-columns: 1fr !important;
    }
}




/* =========================================
   FIX: TILDE/CHECK ALINEADO EN FEATURES
   ========================================= */
.includes-features .list-features li {
    position: relative !important;
    padding-left: 1.5rem !important;
    list-style: none !important;
}

.includes-features .list-features li::before {
    position: absolute !important;
    left: 0 !important;
    top: 0.5rem !important;
}



/* =========================================
   FIX: BOTÓN PEDIR AHORA EN PLANES
   ========================================= */
#order-premium_comparison .order-button,
.price-table .order-button {
    background: #2563eb !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0.5rem !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: 900 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: background 0.3s !important;
}

#order-premium_comparison .order-button:hover,
.price-table .order-button:hover {
    background: #3b82f6 !important;
    color: #fff !important;
}



/* ========================================= */
/* FIX: TEXTO VISIBLE Y TILDES VERDES        */
/* ========================================= */

/* Forzamos que los números en la descripción sean negros o verde oscuro */
#order-standard_cart .product-info .product-description strong,
.product-description strong {
    color: #1a1a1a !important; /* Un gris casi negro para que resalte en el fondo blanco */
    font-weight: 800 !important;
}

/* Ponemos los tildes de las features en VERDE VEYEC */
#order-standard_cart .includes ul li i, 
.shared-features ul li i,
#order-standard_cart .includes ul li::before {
    color: #22c55e !important; /* El verde de tu marca */
    font-weight: 900 !important;
    margin-right: 8px !important;
}

/* Si tu plantilla no usa iconos <i> sino que usa una imagen o tildes de texto */
#order-standard_cart .includes ul li {
    color: #ffffff !important; /* El texto de la feature en blanco */
}

/* =========================================
   PLANES CON PUNCH
   ========================================= */

#order-premium_comparison .price-table {
    background: #1a1a1a !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 0.75rem !important;
    overflow: hidden !important;
    transition: all 0.3s !important;
}

#order-premium_comparison .price-table:hover {
    border-color: rgba(59,130,246,0.4) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4) !important;
}

#order-premium_comparison .top-head {
    background: linear-gradient(135deg, #1e3a5f 0%, #1a1a1a 100%) !important;
    border-bottom: 1px solid rgba(59,130,246,0.2) !important;
    padding: 1.5rem 1.25rem !important;
    border-radius: 0 !important;
}

#order-premium_comparison .top-area h4 {
    color: #fff !important;
    font-size: 0.85rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
}

#order-premium_comparison .price {
    color: #60a5fa !important;
    font-size: 1.2rem !important;
    font-weight: 900 !important;
    margin: 0.5rem 0 !important;
}

#order-premium_comparison .price span {
    color: #fff !important;
    font-size: 1.6rem !important;
}

#order-premium_comparison .price-table > ul {
    padding: 1.25rem !important;
    margin: 0 !important;
}

#order-premium_comparison .price-table > ul li {
    color: #9ca3af !important;
    font-size: 0.78rem !important;
    padding: 0.4rem 0 !important;
    font-weight: 600 !important;
    line-height: 1.6 !important;
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
    list-style: none !important;
}

#order-premium_comparison .price-table > ul li:last-child {
    border-bottom: none !important;
}

.includes-features {
    background: #1a1a1a !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    border-radius: 0.75rem !important;
    padding: 2rem !important;
    margin-top: 2rem !important;
}

.includes-features .head-area {
    text-align: center !important;
    margin-bottom: 1.5rem !important;
}

.includes-features .head-area span {
    background: rgba(59,130,246,0.1) !important;
    color: #60a5fa !important;
    padding: 0.5rem 1.5rem !important;
    border-radius: 9999px !important;
    font-size: 0.7rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
}

#order-premium_comparison #headline {
    color: #fff !important;
    font-size: 2rem !important;
    font-weight: 900 !important;
    text-align: center !important;
    margin-bottom: 2rem !important;
}



/* =========================================
   ANUNCIOS / CHANGELOG PROFESIONAL
   ========================================= */
.article-content,
.announcement-single .panel-body {
    font-size: 15px !important;
    line-height: 1.8 !important;
    color: #e5e7eb !important;
}

.article-content h3,
.announcement-single h3 {
    font-size: 1rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: #3b82f6 !important;
    border-bottom: 1px solid rgba(59,130,246,0.2) !important;
    padding-bottom: 0.75rem !important;
    margin: 2rem 0 1rem !important;
}

.article-content ul,
.announcement-single ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin-bottom: 2rem !important;
}

.article-content ul li,
.announcement-single ul li {
    padding: 0.5rem 0 !important;
    padding-left: 1.5rem !important;
    position: relative !important;
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
    font-size: 0.9rem !important;
    color: #d1d5db !important;
}

.article-content ul li:last-child,
.announcement-single ul li:last-child {
    border-bottom: none !important;
}

.article-content ul li::before,
.announcement-single ul li::before {
    content: "→" !important;
    position: absolute !important;
    left: 0 !important;
    color: #3b82f6 !important;
    font-weight: 900 !important;
}

.article-content strong,
.announcement-single strong {
    color: #fff !important;
}

.article-content a,
.announcement-single a {
    color: #3b82f6 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.article-content a:hover,
.announcement-single a:hover {
    color: #60a5fa !important;
}



/* =========================================
   FIX: ANUNCIOS LISTADO Y DETALLE
   ========================================= */
.announcement-single,
.announcements-list,
.article-content,
.announcement-body,
.announcements .panel-body,
.announcements .card-body,
.announcement-text,
#announcementsList .card-body,
#announcementsList .panel-body {
    background: transparent !important;
    color: #e5e7eb !important;
}

/* Preview del anuncio en el listado */
.announcement-single blockquote,
.announcements blockquote,
#announcementsList blockquote,
.announcement-text blockquote,
.article-content blockquote {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-left: 3px solid #3b82f6 !important;
    border-radius: 0.5rem !important;
    color: #d1d5db !important;
    padding: 1.25rem !important;
    margin: 1rem 0 !important;
    font-size: 0.85rem !important;
    line-height: 1.7 !important;
}

/* Título del anuncio */
.announcements h3 a,
#announcementsList h3 a,
.announcement-single h2 {
    color: #3b82f6 !important;
    text-decoration: none !important;
}

/* Fecha */
.announcements .announcement-date,
.announcements .text-muted,
#announcementsList .text-muted {
    color: #6b7280 !important;
}

/* Botón seguir leyendo */
.announcements .btn,
#announcementsList .btn {
    background: transparent !important;
    border: 1px solid rgba(59,130,246,0.4) !important;
    color: #60a5fa !important;
    border-radius: 0.5rem !important;
    font-weight: 900 !important;
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    padding: 0.6rem 1.25rem !important;
}

.announcements .btn:hover,
#announcementsList .btn:hover {
    background: rgba(59,130,246,0.1) !important;
    border-color: #3b82f6 !important;
    color: #3b82f6 !important;
}



/* FIX: Fondo blanco en anuncios */
.announcements .announcement article {
    background-color: rgba(255,255,255,0.03) !important;
    border-left: 3px solid #3b82f6 !important;
    border-radius: 0.5rem !important;
    color: #d1d5db !important;
    padding: 1.25rem !important;
}



/* Ocultar hora en anuncios */
.announcements .announcement-date .time,
.announcements time {
    display: none !important;
}




/* Ocultar hora (soy) en anuncios */
.announcement-single .date i.fa-clock,
.announcement-single .date .time,
.announcement-single .article-date i.fa-clock {
    display: none !important;
}