/* ==========================================
   DARK MODE STYLES FOR LIVAUR WEB LAYOUT
   ========================================== */

:root {
  --dm-bg-main: #0f172a;
  --dm-bg-card: #1e293b;
  --dm-bg-hover: #334155;
  --dm-bg-alt: #182232;
  --dm-border-color: #334155;
  --dm-text-main: #f8fafc;
  --dm-text-muted: #94a3b8;
  --dm-text-subtle: #cbd5e1;
  --dm-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
}

/* Global Transitions */
html.dark-mode,
html.dark-mode body,
html.dark-mode main,
html.dark-mode header,
html.dark-mode footer,
html.dark-mode nav,
html.dark-mode div,
html.dark-mode section,
html.dark-mode article,
html.dark-mode .card,
html.dark-mode .service-card,
html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Base Layout Dark Mode */
html.dark-mode,
html.dark-mode body {
  background-color: var(--dm-bg-main) !important;
  color: var(--dm-text-main) !important;
}

html.dark-mode main {
  background-color: var(--dm-bg-main);
}

/* Section Background Overrides for Unify */
html.dark-mode section,
html.dark-mode .g-bg-white,
html.dark-mode .g-bg-white--hover:hover,
html.dark-mode .g-bg-gray-light-v5,
html.dark-mode .g-bg-gray-light-v4,
html.dark-mode .g-bg-gray-light-v3,
html.dark-mode .g-bg-gray-light-v2,
html.dark-mode .g-bg-gray-light-v1,
html.dark-mode .bg-light,
html.dark-mode .bg-white {
  background-color: var(--dm-bg-main) !important;
}

html.dark-mode .g-bg-secondary {
  background-color: var(--dm-bg-alt) !important;
}

/* Borders in Dark Mode */
html.dark-mode .g-brd-gray-light-v4,
html.dark-mode .g-brd-gray-light-v5,
html.dark-mode .g-brd-gray-light-v3,
html.dark-mode .g-brd-gray-light-v2,
html.dark-mode .g-brd-around,
html.dark-mode .g-brd-bottom,
html.dark-mode .g-brd-top,
html.dark-mode .g-brd-left,
html.dark-mode .g-brd-right,
html.dark-mode .border,
html.dark-mode .border-top,
html.dark-mode .border-bottom,
html.dark-mode .border-left,
html.dark-mode .border-right {
  border-color: var(--dm-border-color) !important;
}

/* Typography & Headings */
html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6,
html.dark-mode .h1,
html.dark-mode .h2,
html.dark-mode .h3,
html.dark-mode .h4,
html.dark-mode .h5,
html.dark-mode .h6,
html.dark-mode .g-color-black,
html.dark-mode .g-color-gray-dark-v1,
html.dark-mode .g-color-gray-dark-v2,
html.dark-mode .g-color-gray-dark-v3,
html.dark-mode .g-color-gray-dark-v4,
html.dark-mode .g-color-gray-dark-v5,
html.dark-mode .g-color-main {
  color: var(--dm-text-main) !important;
}

html.dark-mode p,
html.dark-mode span,
html.dark-mode li,
html.dark-mode label,
html.dark-mode small,
html.dark-mode .text-muted,
html.dark-mode .g-color-gray-light-v1 {
  color: var(--dm-text-subtle);
}

/* Unify Header & Navigation */
html.dark-mode #js-header .u-header__section--light,
html.dark-mode .u-header__section--light {
  background-color: var(--dm-bg-card) !important;
  border-bottom: 1px solid var(--dm-border-color);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

html.dark-mode .navbar-nav .nav-link {
  color: var(--dm-text-main) !important;
}

html.dark-mode .navbar-nav .nav-link:hover,
html.dark-mode .navbar-nav .active > .nav-link {
  color: #38bdf8 !important;
}

html.dark-mode .hs-sub-menu {
  background-color: var(--dm-bg-card) !important;
  border: 1px solid var(--dm-border-color) !important;
  box-shadow: var(--dm-shadow) !important;
}

html.dark-mode .hs-sub-menu .dropdown-item {
  color: var(--dm-text-main) !important;
}

html.dark-mode .hs-sub-menu .dropdown-item:hover,
html.dark-mode .hs-sub-menu .dropdown-item a:hover {
  background-color: var(--dm-bg-hover) !important;
  color: #38bdf8 !important;
}

html.dark-mode .hs-sub-menu .dropdown-item a {
  color: var(--dm-text-subtle) !important;
}

/* Cards & Service Cards */
html.dark-mode .service-card,
html.dark-mode .u-shadow-v11,
html.dark-mode .u-shadow-v21,
html.dark-mode .card,
html.dark-mode .box-shadow {
  background-color: var(--dm-bg-card) !important;
  border: 1px solid var(--dm-border-color) !important;
  box-shadow: var(--dm-shadow) !important;
}

html.dark-mode .service-card {
  border-top: 3px solid transparent !important;
}

html.dark-mode .service-card:hover {
  border-top-color: #72be44 !important;
  background-color: #243347 !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .u-shadow-v21--hover:hover {
  background-color: #243347 !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5) !important;
}

/* Carousel Dark Mode Refinements */
html.dark-mode .hero-carousel-wrap {
  background: #090d16;
}

html.dark-mode .slide-overlay {
  background: linear-gradient(to bottom, rgba(15, 23, 42, 0.3) 0%, rgba(15, 23, 42, 0.85) 100%);
}

html.dark-mode .slick-custom-arrow {
  background: rgba(15, 23, 42, 0.6);
  border-color: rgba(255, 255, 255, 0.3);
}

html.dark-mode .slick-custom-arrow:hover {
  background: rgba(56, 189, 248, 0.8);
  border-color: #38bdf8;
  color: #fff;
}

/* Forms & Inputs */
html.dark-mode input[type="text"],
html.dark-mode input[type="password"],
html.dark-mode input[type="email"],
html.dark-mode input[type="number"],
html.dark-mode input[type="search"],
html.dark-mode input[type="tel"],
html.dark-mode input[type="url"],
html.dark-mode select,
html.dark-mode textarea,
html.dark-mode .form-control {
  background-color: var(--dm-bg-main) !important;
  color: var(--dm-text-main) !important;
  border-color: var(--dm-border-color) !important;
}

html.dark-mode input:focus,
html.dark-mode select:focus,
html.dark-mode textarea:focus,
html.dark-mode .form-control:focus {
  background-color: var(--dm-bg-main) !important;
  color: var(--dm-text-main) !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 0.2rem rgba(56, 189, 248, 0.25) !important;
}

/* Buttons */
html.dark-mode .btn-secondary,
html.dark-mode .btn-light,
html.dark-mode .u-btn-outline-primary {
  background-color: transparent !important;
  color: var(--dm-text-main) !important;
  border-color: var(--dm-border-color) !important;
}

html.dark-mode .btn-secondary:hover,
html.dark-mode .btn-light:hover,
html.dark-mode .u-btn-outline-primary:hover {
  background-color: var(--dm-bg-hover) !important;
  color: #38bdf8 !important;
  border-color: #38bdf8 !important;
}

/* Tables */
html.dark-mode table,
html.dark-mode .table {
  color: var(--dm-text-main) !important;
  border-color: var(--dm-border-color) !important;
}

html.dark-mode .table th,
html.dark-mode .table td {
  border-color: var(--dm-border-color) !important;
}

html.dark-mode .table thead th {
  background-color: var(--dm-bg-alt) !important;
  color: var(--dm-text-main) !important;
  border-color: var(--dm-border-color) !important;
}

html.dark-mode .table-hover tbody tr:hover {
  background-color: var(--dm-bg-hover) !important;
  color: var(--dm-text-main) !important;
}

/* Footer Dark Mode Integration */
html.dark-mode #contacts-section,
html.dark-mode footer {
  background-color: #0b1120 !important;
  border-top: 1px solid var(--dm-border-color);
}

/* Toggle Switch Styling - Discrete & Minimalist */
.dark-mode-toggle-btn {
  background: transparent !important;
  border: none !important;
  color: #475569 !important;
  cursor: pointer;
  padding: 6px 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 4px !important;
  transition: all 0.2s ease !important;
  outline: none !important;
  line-height: 1 !important;
}

.dark-mode-toggle-btn i {
  color: #475569 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  transition: color 0.2s ease, transform 0.2s ease !important;
}

.dark-mode-toggle-btn:hover {
  background-color: rgba(0, 0, 0, 0.05) !important;
}

.dark-mode-toggle-btn:hover i {
  color: #72be44 !important;
  transform: scale(1.1);
}

/* Dark Mode Active State */
html.dark-mode .dark-mode-toggle-btn {
  background: transparent !important;
  border: none !important;
  color: #fbbf24 !important;
}

html.dark-mode .dark-mode-toggle-btn i {
  color: #fbbf24 !important;
}

html.dark-mode .dark-mode-toggle-btn:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .dark-mode-toggle-btn:hover i {
  color: #f59e0b !important;
  transform: scale(1.1);
}

/* ==========================================
   ACCOUNT SECTION (web/cuenta) DARK MODE
   ========================================== */

/* Account Sidebar & Profile Avatar Overrides */
html.dark-mode .u-info-v7-1,
html.dark-mode figure.u-info-v7-1,
html.dark-mode figure.u-info-v7-1.g-bg-white {
  background-color: var(--dm-bg-card) !important;
  background: var(--dm-bg-card) !important;
  border: 1px solid var(--dm-border-color) !important;
  border-radius: 8px !important;
  box-shadow: var(--dm-shadow) !important;
}

/* Sidebar Nav Item Native Anchor Formatting */
#sidebar-nav-1,
.list-group#sidebar-nav-1 {
  border-radius: 8px !important;
  overflow: hidden !important;
}

#sidebar-nav-1 .list-group-item {
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
  transition: all 0.2s ease;
}

#sidebar-nav-1 .list-group-item i {
  margin-right: 10px !important;
  width: 18px !important;
  text-align: center !important;
}

html.dark-mode #sidebar-nav-1,
html.dark-mode ul#sidebar-nav-1,
html.dark-mode ul#sidebar-nav-1.list-group {
  background-color: var(--dm-bg-card) !important;
  background: var(--dm-bg-card) !important;
  border: 1px solid var(--dm-border-color) !important;
  box-shadow: var(--dm-shadow) !important;
}

html.dark-mode #sidebar-nav-1 .list-group-item,
html.dark-mode ul.list-group .list-group-item,
html.dark-mode .list-group-item {
  background-color: var(--dm-bg-card) !important;
  background: var(--dm-bg-card) !important;
  border-color: var(--dm-border-color) !important;
  color: var(--dm-text-main) !important;
}

html.dark-mode #sidebar-nav-1 .list-group-item a,
html.dark-mode ul.list-group .list-group-item a,
html.dark-mode .list-group-item a {
  color: #94a3b8 !important;
}

html.dark-mode #sidebar-nav-1 .list-group-item i,
html.dark-mode ul.list-group .list-group-item i,
html.dark-mode .list-group-item i {
  color: #38bdf8 !important;
}

html.dark-mode #sidebar-nav-1 .list-group-item:hover,
html.dark-mode #sidebar-nav-1 .list-group-item:hover a,
html.dark-mode ul.list-group .list-group-item:hover,
html.dark-mode ul.list-group .list-group-item:hover a {
  background-color: var(--dm-bg-hover) !important;
  background: var(--dm-bg-hover) !important;
  color: #38bdf8 !important;
}

html.dark-mode #sidebar-nav-1 .list-group-item:hover i,
html.dark-mode ul.list-group .list-group-item:hover i {
  color: #38bdf8 !important;
}

html.dark-mode #sidebar-nav-1 .list-group-item.active,
html.dark-mode #sidebar-nav-1 .list-group-item.active a,
html.dark-mode ul.list-group .list-group-item.active,
html.dark-mode ul.list-group .list-group-item.active a,
html.dark-mode .list-group-item.active {
  background-color: #2563eb !important;
  background: #2563eb !important;
  color: #ffffff !important;
  border-color: #2563eb !important;
}

html.dark-mode #sidebar-nav-1 .list-group-item.active i,
html.dark-mode ul.list-group .list-group-item.active i {
  color: #ffffff !important;
}

/* Login Card & Divider */
html.dark-mode .login-card {
  background: var(--dm-bg-card) !important;
  border-color: var(--dm-border-color) !important;
  box-shadow: var(--dm-shadow) !important;
}

html.dark-mode .divider-text::before {
  background-color: var(--dm-border-color) !important;
}

html.dark-mode .divider-text span {
  background-color: var(--dm-bg-card) !important;
  color: var(--dm-text-muted) !important;
}

/* Account Cards (Profile, Credits, Support, Argusblack) */
html.dark-mode .profile-card,
html.dark-mode .credit-stat-card,
html.dark-mode .soporte-table-card,
html.dark-mode .argus-card {
  background-color: var(--dm-bg-card) !important;
  border-color: var(--dm-border-color) !important;
  box-shadow: var(--dm-shadow) !important;
}

html.dark-mode .profile-section-title::after {
  background: #38bdf8 !important;
}

/* Credit Package Buttons */
html.dark-mode .credit-pkg-btn {
  background-color: var(--dm-bg-card) !important;
  border-color: var(--dm-border-color) !important;
  color: var(--dm-text-main) !important;
}

html.dark-mode .credit-pkg-btn:hover {
  background-color: var(--dm-bg-hover) !important;
  border-color: #38bdf8 !important;
  color: #38bdf8 !important;
  box-shadow: 0 4px 15px rgba(56, 189, 248, 0.25) !important;
}

/* Account Nav Tabs (u-nav-v1-1) Modern Dark Mode */
html.dark-mode .u-nav-v1-1,
html.dark-mode ul.u-nav-v1-1 {
  border-bottom-color: var(--dm-border-color) !important;
}

html.dark-mode .u-nav-v1-1 .nav-link,
html.dark-mode ul.u-nav-v1-1 .nav-link {
  color: var(--dm-text-muted) !important;
  background-color: transparent !important;
  border-bottom: 2px solid transparent !important;
  transition: all 0.25s ease !important;
}

html.dark-mode .u-nav-v1-1 .nav-link:hover,
html.dark-mode ul.u-nav-v1-1 .nav-link:hover {
  color: #38bdf8 !important;
  border-bottom-color: rgba(56, 189, 248, 0.4) !important;
}

html.dark-mode .u-nav-v1-1 .nav-link.active,
html.dark-mode .u-nav-v1-1 .nav-link.active:hover,
html.dark-mode ul.u-nav-v1-1 .nav-link.active {
  color: #38bdf8 !important;
  background-color: transparent !important;
  border-bottom-color: #38bdf8 !important;
  border-bottom-width: 2px !important;
  font-weight: 600 !important;
}

html.dark-mode .u-nav-v1-1 .nav-link i {
  color: inherit !important;
}

/* Panels & Accordions */
html.dark-mode .panel,
html.dark-mode .panel-default {
  background-color: var(--dm-bg-card) !important;
  border-color: var(--dm-border-color) !important;
}

html.dark-mode .panel-heading {
  background-color: var(--dm-bg-alt) !important;
  border-color: var(--dm-border-color) !important;
  color: var(--dm-text-main) !important;
}

html.dark-mode .panel-title,
html.dark-mode .panel-title a {
  color: var(--dm-text-main) !important;
}

html.dark-mode .panel-body,
html.dark-mode .panel-footer {
  background-color: var(--dm-bg-card) !important;
  color: var(--dm-text-main) !important;
  border-color: var(--dm-border-color) !important;
}

/* Modals */
html.dark-mode .modal-content {
  background-color: var(--dm-bg-card) !important;
  color: var(--dm-text-main) !important;
  border-color: var(--dm-border-color) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6) !important;
}

html.dark-mode .modal-header,
html.dark-mode .modal-footer {
  border-color: var(--dm-border-color) !important;
}

html.dark-mode .modal-title {
  color: var(--dm-text-main) !important;
}

html.dark-mode .close,
html.dark-mode .modal-header .close {
  color: var(--dm-text-main) !important;
  text-shadow: none !important;
  opacity: 0.8;
}

html.dark-mode .close:hover {
  opacity: 1;
}

/* Alerts & Notices */
html.dark-mode .alert-info {
  background-color: #1e3a8a !important;
  color: #bfdbfe !important;
  border-color: #1d4ed8 !important;
}

html.dark-mode .alert-success {
  background-color: #064e3b !important;
  color: #a7f3d0 !important;
  border-color: #047857 !important;
}

html.dark-mode .alert-warning,
html.dark-mode .g-bg-yellow {
  background-color: #78350f !important;
  color: #fef3c7 !important;
  border-color: #b45309 !important;
}

html.dark-mode .alert-danger {
  background-color: #7f1d1d !important;
  color: #fecaca !important;
  border-color: #b91c1c !important;
}

/* Form Controls & Placeholders */
html.dark-mode ::placeholder {
  color: #64748b !important;
  opacity: 1;
}

html.dark-mode .form-control:disabled,
html.dark-mode .form-control[readonly] {
  background-color: #1e293b !important;
  color: #94a3b8 !important;
  border-color: var(--dm-border-color) !important;
}

/* ==========================================
   COMPRAS, SUSCRIPCIONES & SOPORTES DARK MODE
   ========================================== */

/* Cards & Tables Container */
html.dark-mode .compra-table-card,
html.dark-mode .suscripcion-table-card,
html.dark-mode .soporte-table-card {
  background-color: var(--dm-bg-card) !important;
  border-color: var(--dm-border-color) !important;
  box-shadow: var(--dm-shadow) !important;
}

/* Header Banners in Account Views */
html.dark-mode section.g-bg-gray-light-v5,
html.dark-mode section.g-brd-gray-light-v4 {
  background-color: var(--dm-bg-alt) !important;
  border-color: var(--dm-border-color) !important;
}

/* Tables Headings & Rows */
html.dark-mode table.u-table--v1 thead,
html.dark-mode table.u-table--v1 thead tr,
html.dark-mode table.u-table--v1 thead th,
html.dark-mode table.table thead th {
  background-color: var(--dm-bg-alt) !important;
  color: var(--dm-text-main) !important;
  border-color: var(--dm-border-color) !important;
}

html.dark-mode table.u-table--v1 tbody tr,
html.dark-mode table.table tbody tr {
  border-color: var(--dm-border-color) !important;
  background-color: var(--dm-bg-card) !important;
}

html.dark-mode table.u-table--v1 tbody tr:hover,
html.dark-mode table.table-hover tbody tr:hover {
  background-color: var(--dm-bg-hover) !important;
}

html.dark-mode table.u-table--v1 td,
html.dark-mode table.table td {
  border-color: var(--dm-border-color) !important;
  color: var(--dm-text-subtle) !important;
}

html.dark-mode table td strong,
html.dark-mode table td .g-color-black {
  color: var(--dm-text-main) !important;
}

html.dark-mode table td small,
html.dark-mode table td .g-color-gray-dark-v4,
html.dark-mode table td .g-color-gray-dark-v3 {
  color: var(--dm-text-muted) !important;
}

/* Support Note Expandable Rows & Containers */
html.dark-mode tr.g-bg-gray-light-v5,
html.dark-mode table tr.g-bg-gray-light-v5 {
  background-color: #151e2e !important;
}

html.dark-mode div[id^="nota-"] {
  background-color: #0f172a !important;
  border-color: var(--dm-border-color) !important;
  color: var(--dm-text-subtle) !important;
}

/* Empty Table States */
html.dark-mode .table td.text-center.g-py-40 i {
  color: #475569 !important;
}

html.dark-mode .table td.text-center.g-py-40 p {
  color: #94a3b8 !important;
}

/* Soft Badges & Labels in Tables */
html.dark-mode .g-bg-blue-opacity-0_1,
html.dark-mode span.g-bg-blue-opacity-0_1 {
  background-color: rgba(56, 189, 248, 0.15) !important;
  color: #38bdf8 !important;
}

html.dark-mode .g-bg-teal-opacity-0_1,
html.dark-mode span.g-bg-teal-opacity-0_1 {
  background-color: rgba(45, 212, 191, 0.15) !important;
  color: #2dd4bf !important;
}

/* Outline & Small Action Buttons */
html.dark-mode .u-btn-outline-primary,
html.dark-mode a.u-btn-outline-primary,
html.dark-mode button.u-btn-outline-primary {
  background-color: transparent !important;
  border-color: #38bdf8 !important;
  color: #38bdf8 !important;
}

html.dark-mode .u-btn-outline-primary:hover,
html.dark-mode a.u-btn-outline-primary:hover,
html.dark-mode button.u-btn-outline-primary:hover {
  background-color: #38bdf8 !important;
  color: #ffffff !important;
}

/* Pagination Overrides */
html.dark-mode .u-pagination-v1-4 {
  background-color: var(--dm-bg-card) !important;
  border: 1px solid var(--dm-border-color) !important;
  color: var(--dm-text-subtle) !important;
}

html.dark-mode .u-pagination-v1-4:hover {
  background-color: var(--dm-bg-hover) !important;
  color: #38bdf8 !important;
  border-color: #38bdf8 !important;
}

html.dark-mode .u-pagination-v1-4--active,
html.dark-mode .u-pagination-v1-4--active:hover {
  background-color: #2563eb !important;
  background: #2563eb !important;
  color: #ffffff !important;
  border-color: #2563eb !important;
}