/**
 * XHOST Portal - Modern Theme Stylesheet
 * Architectural Design System for WHMCS 9.0 Client Area
 * Author: XHOST / Jesús Arias (PRY-JA003)
 */

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

/* =========================================
   1. DESIGN TOKENS & CSS VARIABLES
   ========================================= */
:root {
  /* Brand Identity - XHOST Emerald & Secondary Navy (ui.xhost.cl) */
  --xh-brand: #4FAA2C;
  --xh-brand-hover: #419124;
  --xh-brand-active: #34761c;
  --xh-brand-light: #eef9eb;
  --xh-brand-ring: rgba(79, 170, 44, 0.25);
  --xh-brand-gradient: linear-gradient(135deg, #4FAA2C 0%, #308A16 100%);

  /* Secondary Navy (ui.xhost.cl) */
  --xh-navy: #060840;
  --xh-navy-hover: #0a0d54;
  --xh-navy-light: #121a80;
  --xh-navy-soft: rgba(6, 8, 64, 0.06);
  --xh-navy-border: rgba(6, 8, 64, 0.12);

  /* Neutrals (Light Mode Default) */
  --xh-bg-app: #f6f7f7;
  --xh-bg-surface: #ffffff;
  --xh-bg-surface-elevated: #ffffff;
  --xh-bg-subtle: #f1f5f9;
  --xh-border: #e2e8f0;
  --xh-border-light: #f1f5f9;
  --xh-border-focus: #4FAA2C;

  /* Typography Colors */
  --xh-text-main: #0f172a;
  --xh-text-secondary: #475569;
  --xh-text-muted: #64748b;
  --xh-text-inverted: #ffffff;

  /* Status Colors */
  --xh-success-bg: #ecfdf5;
  --xh-success-text: #059669;
  --xh-success-border: #a7f3d0;

  --xh-warning-bg: #fffbeb;
  --xh-warning-text: #d97706;
  --xh-warning-border: #fde68a;

  --xh-danger-bg: #fef2f2;
  --xh-danger-text: #e11d48;
  --xh-danger-border: #fecdd3;

  --xh-info-bg: #f0f9ff;
  --xh-info-text: #0284c7;
  --xh-info-border: #bae6fd;

  /* Shadows */
  --xh-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --xh-shadow-card: 0 4px 6px -1px rgba(15, 23, 42, 0.04), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --xh-shadow-hover: 0 12px 24px -4px rgba(15, 23, 42, 0.08), 0 4px 6px -2px rgba(15, 23, 42, 0.03);
  --xh-shadow-dropdown: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.06);

  /* Geometry */
  --xh-radius-sm: 6px;
  --xh-radius-md: 10px;
  --xh-radius-lg: 14px;
  --xh-radius-xl: 18px;
  --xh-radius-pill: 9999px;

  /* Transitions */
  --xh-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --xh-font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --xh-font-mono: 'JetBrains Mono', monospace;
}

/* Dark Mode Tokens */
[data-theme="dark"] {
  --xh-bg-app: #0b0f19;
  --xh-bg-surface: #111827;
  --xh-bg-surface-elevated: #1e293b;
  --xh-bg-subtle: #1e293b;
  --xh-border: #334155;
  --xh-border-light: #1e293b;

  --xh-text-main: #f8fafc;
  --xh-text-secondary: #94a3b8;
  --xh-text-muted: #64748b;

  --xh-brand-light: rgba(79, 170, 44, 0.15);
  --xh-shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
  --xh-shadow-hover: 0 12px 24px -4px rgba(0, 0, 0, 0.45);
}

/* =========================================
   2. GLOBAL RESET & BASE TYPOGRAPHY
   ========================================= */
html, body {
  max-width: 100% !important;
  overflow-x: hidden !important;
  position: relative !important;
}

body {
  font-family: var(--xh-font-sans) !important;
  background-color: var(--xh-bg-app) !important;
  color: var(--xh-text-main) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =========================================
   2.1 FONT AWESOME UNIFICATION & ANTI-EMOJI FALLBACK
   ========================================= */
.fa, .fas, .far, .fal, .fat, .fad, .fab,
.fa-solid, .fa-regular, .fa-light, .fa-thin, .fa-duotone, .fa-brands {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
}

.fa, .fas, .fa-solid {
  font-family: "Font Awesome 6 Pro", "Font Awesome 5 Free", "FontAwesome" !important;
  font-weight: 900 !important;
}

.far, .fa-regular {
  font-family: "Font Awesome 6 Pro", "Font Awesome 5 Free", "FontAwesome" !important;
  font-weight: 400 !important;
}

.fal, .fa-light {
  font-family: "Font Awesome 6 Pro", "Font Awesome 5 Free", "FontAwesome" !important;
  font-weight: 300 !important;
}

.fab, .fa-brands {
  font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands", "FontAwesome" !important;
  font-weight: 400 !important;
}

.fad, .fa-duotone {
  font-family: "Font Awesome 6 Duotone", "Font Awesome 6 Pro", "FontAwesome" !important;
  font-weight: 900 !important;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--xh-font-sans) !important;
  font-weight: 700;
  color: var(--xh-text-main);
  letter-spacing: -0.02em;
}

/* =========================================
   3. MODERN TOPBAR & HEADER
   ========================================= */
.header {
  background-color: var(--xh-bg-surface) !important;
  border-bottom: 1px solid var(--xh-border);
  box-shadow: var(--xh-shadow-sm);
  position: relative;
  z-index: 100;
}

.header .topbar {
  background-color: var(--xh-navy, #060840);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.825rem;
  padding: 6px 0;
}

.topbar .client-alerts-btn {
  background: var(--xh-bg-surface) !important;
  border: 1px solid var(--xh-border) !important;
  border-radius: var(--xh-radius-pill) !important;
  padding: 4px 12px !important;
  font-size: 0.775rem !important;
  color: var(--xh-text-main) !important;
  transition: var(--xh-transition);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.topbar .client-alerts-btn:hover {
  background: var(--xh-bg-subtle) !important;
  border-color: var(--xh-brand) !important;
}

.topbar .badge-notification {
  background-color: var(--xh-danger-text) !important;
  color: #fff !important;
  border-radius: 9999px !important;
  padding: 2px 7px !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  margin-left: 4px;
}

/* Active client badge & user dropdown */
.active-client-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--xh-bg-surface);
  border: 1px solid var(--xh-border);
  padding: 4px 12px;
  border-radius: var(--xh-radius-pill);
  font-weight: 600;
  color: var(--xh-text-main);
  transition: var(--xh-transition);
  cursor: pointer;
}
.active-client-badge:hover,
.active-client-badge:focus {
  background: var(--xh-bg-surface-soft) !important;
  border-color: var(--xh-border-hover) !important;
  color: var(--xh-text-main) !important;
  text-decoration: none !important;
  box-shadow: var(--xh-shadow-sm) !important;
}
.active-client-badge.dropdown-toggle::after {
  display: none !important;
}
.active-client-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--xh-brand-gradient);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dropdown {
  position: relative;
}
.xh-user-dropdown-menu {
  display: none;
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  left: auto !important;
  margin-top: 8px !important;
  background: var(--xh-bg-surface) !important;
  border: 1px solid var(--xh-border) !important;
  border-radius: var(--xh-radius-lg) !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
  padding: 6px 0 !important;
  min-width: 250px !important;
  z-index: 1050 !important;
}
.xh-user-dropdown-menu.show {
  display: block !important;
}
.xh-user-dropdown-menu .dropdown-item,
.xh-user-dropdown-menu .dropdown-item span {
  color: var(--xh-text-main, #1e293b) !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  transition: var(--xh-transition) !important;
}
.xh-user-dropdown-menu .dropdown-item {
  padding: 8px 16px !important;
}
.xh-user-dropdown-menu .dropdown-item:hover,
.xh-user-dropdown-menu .dropdown-item:focus,
.xh-user-dropdown-menu .dropdown-item:hover span,
.xh-user-dropdown-menu .dropdown-item:focus span {
  background: var(--xh-brand-light, #f0fdf4) !important;
  color: var(--xh-brand, #4faa2c) !important;
}
.xh-user-dropdown-menu .dropdown-item:hover i,
.xh-user-dropdown-menu .dropdown-item:focus i {
  color: var(--xh-brand, #4faa2c) !important;
}
.xh-user-dropdown-menu .dropdown-item.active,
.xh-user-dropdown-menu .dropdown-item.active span {
  background: var(--xh-brand-light, #f0fdf4) !important;
  color: #15803d !important;
  font-weight: 600 !important;
}
.xh-user-dropdown-menu .dropdown-item.text-danger,
.xh-user-dropdown-menu .dropdown-item.text-danger span {
  color: #ef4444 !important;
}
.xh-user-dropdown-menu .dropdown-item.text-danger:hover,
.xh-user-dropdown-menu .dropdown-item.text-danger:focus,
.xh-user-dropdown-menu .dropdown-item.text-danger:hover span,
.xh-user-dropdown-menu .dropdown-item.text-danger:focus span {
  background: #fef2f2 !important;
  color: #dc2626 !important;
}
.xh-user-dropdown-menu .dropdown-item.text-danger:hover i,
.xh-user-dropdown-menu .dropdown-item.text-danger:focus i {
  color: #dc2626 !important;
}

/* Main Navigation Bar */
.navbar-main {
  background-color: var(--xh-bg-surface);
  padding: 10px 0;
}

.navbar-main .container {
  max-width: 1320px;
}

.navbar-nav {
  gap: 3px;
}

.navbar-nav .nav-link {
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--xh-text-secondary) !important;
  padding: 7px 11px !important;
  border-radius: var(--xh-radius-md);
  transition: var(--xh-transition);
  white-space: nowrap !important;
  display: inline-flex;
  align-items: center;
  line-height: 1.25;
}

.navbar-nav .nav-link:hover {
  color: var(--xh-brand) !important;
  background-color: var(--xh-brand-light);
}

.navbar-nav .nav-item.active .nav-link,
.navbar-nav .nav-link.active {
  color: var(--xh-brand) !important;
  background-color: var(--xh-brand-light);
  font-weight: 700;
}

/* =========================================
   4. KPI TILES / STATS HERO
   ========================================= */
.xh-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.xh-stat-card {
  background: var(--xh-bg-surface);
  border: 1px solid var(--xh-border);
  border-radius: var(--xh-radius-lg);
  padding: 20px;
  box-shadow: var(--xh-shadow-card);
  transition: var(--xh-transition);
  position: relative;
  overflow: hidden;
  text-decoration: none !important;
  color: inherit !important;
  display: flex;
  flex-direction: column;
}

.xh-stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--xh-shadow-hover);
  border-color: var(--xh-brand);
}

.xh-stat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.xh-stat-icon-wrapper {
  width: 44px;
  height: 44px;
  border-radius: var(--xh-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.xh-icon-services {
  background: #ecfdf5;
  color: #059669;
}
.xh-icon-domains {
  background: #eff6ff;
  color: #2563eb;
}
.xh-icon-invoices {
  background: #fff1f2;
  color: #e11d48;
}
.xh-icon-tickets {
  background: #f5f3ff;
  color: #7c3aed;
}

.xh-stat-count {
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--xh-text-main);
  letter-spacing: -0.03em;
}

.xh-stat-label {
  font-size: 0.85rem;
  color: var(--xh-text-muted);
  font-weight: 600;
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.xh-stat-footer {
  margin-top: 14px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--xh-brand);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* =========================================
   5. CARDS & SURFACES
   ========================================= */
.card, .xh-card {
  background-color: var(--xh-bg-surface) !important;
  border: 1px solid var(--xh-border) !important;
  border-radius: var(--xh-radius-lg) !important;
  box-shadow: var(--xh-shadow-card) !important;
  overflow: hidden;
  transition: var(--xh-transition);
  margin-bottom: 24px;
}

.card-header, .xh-card-header {
  background-color: var(--xh-bg-surface) !important;
  border-bottom: 1px solid var(--xh-border) !important;
  padding: 16px 20px !important;
  font-weight: 700;
  font-size: 1rem;
  color: var(--xh-text-main);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-body {
  padding: 20px !important;
}

/* =========================================
   6. BOTONES & CONTROLES
   ========================================= */
.btn-primary, .xh-btn-primary, .btn-success, .xh-btn-success {
  background: var(--xh-brand-gradient) !important;
  border: 1px solid var(--xh-brand) !important;
  color: #ffffff !important;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 8px 18px;
  border-radius: var(--xh-radius-md);
  box-shadow: 0 2px 4px rgba(79, 170, 44, 0.2);
  transition: var(--xh-transition);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-success:hover, .btn-success:focus, .btn-success:active {
  background: var(--xh-brand-hover) !important;
  border-color: var(--xh-brand-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(79, 170, 44, 0.35);
}

.btn-outline-primary {
  background: transparent !important;
  border: 1px solid var(--xh-brand) !important;
  color: var(--xh-brand) !important;
  font-weight: 600;
  border-radius: var(--xh-radius-md);
  transition: var(--xh-transition);
}

.btn-outline-primary:hover {
  background: var(--xh-brand-light) !important;
  color: var(--xh-brand-hover) !important;
  border-color: var(--xh-brand-hover) !important;
}

.btn-sm, .btn-group-sm > .btn {
  padding: 6px 14px !important;
  font-size: 0.8125rem !important;
  border-radius: var(--xh-radius-sm) !important;
}

/* =========================================
   7. BADGES & PILLS
   ========================================= */
.xh-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--xh-radius-pill);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.xh-badge-success {
  background-color: var(--xh-success-bg);
  color: var(--xh-success-text);
  border: 1px solid var(--xh-success-border);
}

.xh-badge-danger {
  background-color: var(--xh-danger-bg);
  color: var(--xh-danger-text);
  border: 1px solid var(--xh-danger-border);
}

.xh-badge-warning {
  background-color: var(--xh-warning-bg);
  color: var(--xh-warning-text);
  border: 1px solid var(--xh-warning-border);
}

.xh-badge-info {
  background-color: var(--xh-info-bg);
  color: var(--xh-info-text);
  border: 1px solid var(--xh-info-border);
}

.xh-badge-open {
  background-color: var(--xh-danger-bg);
  color: var(--xh-danger-text);
  border: 1px solid var(--xh-danger-border);
}

.xh-badge-answered {
  background-color: var(--xh-info-bg);
  color: var(--xh-info-text);
  border: 1px solid var(--xh-info-border);
}

.xh-badge-customer-reply,
.xh-badge-in-progress {
  background-color: var(--xh-warning-bg);
  color: var(--xh-warning-text);
  border: 1px solid var(--xh-warning-border);
}

.xh-badge-closed {
  background-color: var(--xh-bg-subtle);
  color: var(--xh-text-muted);
  border: 1px solid var(--xh-border);
}

.xh-badge-on-hold {
  background-color: rgba(147, 51, 234, 0.1);
  color: #9333ea;
  border: 1px solid rgba(147, 51, 234, 0.2);
}

/* Pulse dot */
.xh-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
  animation: xhPulse 2s infinite;
}

@keyframes xhPulse {
  0% { transform: scale(0.95); opacity: 0.7; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.7; }
}

/* =========================================
   8. TABLAS MODERNAS
   ========================================= */
.table-modern {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.table-modern th {
  background: var(--xh-bg-app);
  color: var(--xh-text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 12px 16px;
  border-bottom: 1px solid var(--xh-border);
}

.table-modern td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--xh-border);
  color: var(--xh-text-main);
  font-size: 0.875rem;
  vertical-align: middle;
  background: var(--xh-bg-surface);
}

.table-modern tr:hover td {
  background-color: var(--xh-bg-subtle);
}

/* =========================================
   9. FOOTER MODERNO
   ========================================= */
.footer-modern {
  background-color: var(--xh-bg-surface);
  border-top: 1px solid var(--xh-border);
  padding: 32px 0 24px;
  margin-top: 60px;
  color: var(--xh-text-secondary);
  font-size: 0.85rem;
}

/* =========================================
   10. UTILIDADES SEMÁNTICAS (ZERO HARDCODING)
   ========================================= */
/* Official XHOST Brand Logo & Badge (ui.xhost.cl Design System) */
.xh-brand-logo-img {
  height: 42px;
  width: auto;
  max-height: 42px;
  display: block;
  object-fit: contain;
  transition: var(--xh-transition);
}

.navbar-brand:hover .xh-brand-logo-img {
  opacity: 0.92;
  transform: scale(1.02);
}

.xh-brand-badge {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--xh-brand);
  background-color: var(--xh-brand-light);
  border: 1px solid rgba(79, 170, 44, 0.25);
  padding: 3px 8px;
  border-radius: var(--xh-radius-pill, 9999px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  display: inline-block;
  white-space: nowrap;
}

[data-theme="dark"] .xh-brand-badge {
  background-color: rgba(79, 170, 44, 0.15);
  border-color: rgba(79, 170, 44, 0.35);
  color: #86efac;
}

/* Official XHOST Brand Utilities & Bootstrap Overrides (ui.xhost.cl) */
.xh-text-brand,
.text-primary,
a.text-primary {
  color: var(--xh-brand, #4FAA2C) !important;
}

a.text-primary:hover,
a.text-primary:focus {
  color: var(--xh-brand-hover, #419124) !important;
}

.xh-text-navy {
  color: var(--xh-navy, #060840) !important;
}

.xh-bg-brand,
.bg-primary {
  background-color: var(--xh-brand, #4FAA2C) !important;
  color: #ffffff !important;
}

.xh-bg-navy {
  background-color: var(--xh-navy, #060840) !important;
  color: #ffffff !important;
}

.xh-badge-brand,
.badge-primary {
  background-color: var(--xh-brand, #4FAA2C) !important;
  color: #ffffff !important;
}

.xh-badge-navy {
  background-color: var(--xh-navy, #060840) !important;
  color: #ffffff !important;
}

.xh-navy-badge,
.badge-navy-soft {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--xh-navy, #060840) !important;
  background-color: rgba(6, 8, 64, 0.06) !important;
  border: 1px solid rgba(6, 8, 64, 0.15) !important;
  padding: 3px 8px;
  border-radius: var(--xh-radius-pill, 9999px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  display: inline-block;
  white-space: nowrap;
}

[data-theme="dark"] .xh-navy-badge,
[data-theme="dark"] .badge-navy-soft {
  background-color: rgba(6, 8, 64, 0.4) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #cbd5e1 !important;
}

.border-primary {
  border-color: var(--xh-brand, #4FAA2C) !important;
}

@media (max-width: 576px) {
  .xh-brand-logo-img {
    height: 34px;
    max-height: 34px;
  }
}

.xh-brand-logo-icon {
  background: var(--xh-brand-gradient);
  width: 38px;
  height: 38px;
  border-radius: var(--xh-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 800;
  font-size: 1.2rem;
  box-shadow: 0 4px 10px rgba(79, 170, 44, 0.3);
}

.xh-brand-title {
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--xh-text-main);
  line-height: 1.1;
}

.xh-brand-subtitle {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--xh-brand);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.xh-code-badge {
  font-family: var(--xh-font-mono);
  font-size: 0.8rem;
  background-color: var(--xh-bg-subtle);
  border: 1px solid var(--xh-border);
  color: var(--xh-text-main);
  padding: 3px 8px;
  border-radius: var(--xh-radius-sm);
}

.xh-card-danger-accent {
  border-left: 4px solid var(--xh-danger-text) !important;
}

.xh-progress-cell {
  min-width: 140px;
}

.xh-text-caption {
  font-size: 0.775rem;
}

.xh-text-mono {
  font-family: var(--xh-font-mono);
}

.xh-gap-xs { gap: 6px; }
.xh-gap-sm { gap: 10px; }
.xh-gap-md { gap: 14px; }
.xh-gap-lg { gap: 20px; }

.xh-hover-lift {
  transition: var(--xh-transition);
}
.xh-hover-lift:hover {
  background-color: var(--xh-bg-subtle);
  transform: translateX(4px);
}

/* =========================================
   11. COMPONENTES DEL SHELL MAESTRO (WHMCS)
   ========================================= */

/* Topbar Components */
.xh-topbar {
  background-color: var(--xh-navy, #060840);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 6px 0;
}

.xh-theme-toggle {
  width: 32px;
  height: 32px;
  border-radius: 50% !important;
  background: var(--xh-bg-surface) !important;
  border: 1px solid var(--xh-border) !important;
  color: var(--xh-text-secondary) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--xh-transition);
}
.xh-theme-toggle:hover {
  border-color: var(--xh-brand) !important;
  color: var(--xh-brand) !important;
  transform: rotate(15deg);
}

/* Search bar header */
.xh-search-group {
  background: var(--xh-bg-subtle);
  border: 1px solid var(--xh-border);
  border-radius: var(--xh-radius-pill);
  overflow: hidden;
  transition: var(--xh-transition);
  padding: 2px 6px;
}
.xh-search-group:focus-within {
  border-color: var(--xh-brand);
  box-shadow: 0 0 0 3px var(--xh-brand-ring);
  background: var(--xh-bg-surface);
}

.xh-search-input {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 0.85rem !important;
  color: var(--xh-text-main) !important;
  padding: 6px 12px !important;
}

.xh-search-btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 6px 10px !important;
}

/* Cart & Mobile Hamburger */
.xh-cart-btn {
  position: relative !important;
  overflow: visible !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: var(--xh-radius-md, 10px) !important;
  background: var(--xh-bg-surface, #ffffff) !important;
  border: 1px solid var(--xh-border, #e2e8f0) !important;
  color: var(--xh-text-secondary, #64748b) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: var(--xh-transition);
  text-decoration: none !important;
  flex-shrink: 0 !important;
}
.xh-cart-btn:hover {
  border-color: var(--xh-brand, #4faa2c) !important;
  color: var(--xh-brand, #4faa2c) !important;
  background: var(--xh-brand-light, #f0fdf4) !important;
}
.xh-cart-btn i,
.xh-cart-btn .fa-shopping-cart,
.xh-cart-btn .fa-cart-shopping {
  font-family: "Font Awesome 6 Pro", "Font Awesome 5 Free", "FontAwesome" !important;
  font-weight: 900 !important;
  font-style: normal !important;
  font-variant: normal !important;
  text-rendering: auto !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  color: var(--xh-text-secondary, #64748b) !important;
  display: inline-block !important;
  transition: color 0.2s ease !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.xh-cart-btn:hover i,
.xh-cart-btn:hover .fa-shopping-cart,
.xh-cart-btn:hover .fa-cart-shopping {
  color: var(--xh-brand, #4faa2c) !important;
}
.xh-cart-btn svg,
.xh-cart-btn .xh-cart-svg {
  width: 18px !important;
  height: 18px !important;
  stroke: var(--xh-text-secondary, #64748b);
  fill: none;
  display: block !important;
  overflow: visible !important;
  transition: stroke 0.2s ease, transform 0.2s ease;
}
.xh-cart-btn:hover svg,
.xh-cart-btn:hover .xh-cart-svg {
  stroke: var(--xh-brand, #4faa2c);
  transform: scale(1.05);
}

.xh-badge-notification {
  position: absolute !important;
  top: -6px !important;
  right: -6px !important;
  background-color: var(--xh-brand, #4FAA2C) !important;
  color: #ffffff !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  min-width: 19px !important;
  height: 19px !important;
  line-height: 15px !important;
  padding: 0 4px !important;
  border-radius: 9999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) !important;
  border: 2px solid var(--xh-bg-surface, #ffffff) !important;
  z-index: 10 !important;
  pointer-events: none !important;
}

[data-theme="dark"] .xh-badge-notification {
  border-color: var(--xh-bg-surface, #0f172a) !important;
}

.xh-mobile-nav-toggle {
  width: 38px;
  height: 38px;
  border-radius: var(--xh-radius-md) !important;
  background: var(--xh-bg-surface) !important;
  border: 1px solid var(--xh-border) !important;
  color: var(--xh-text-secondary) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Dynamic WHMCS Navbar */
.xh-navbar-wrapper {
  background-color: var(--xh-bg-surface);
  border-top: 1px solid var(--xh-border-light);
}

@media (min-width: 992px) {
  .xh-desktop-nav-list .nav-link,
  .xh-nav-list .nav-link {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--xh-text-secondary) !important;
    padding: 10px 16px !important;
    border-radius: var(--xh-radius-md);
    margin: 4px 2px;
    transition: var(--xh-transition);
    display: inline-flex;
    align-items: center;
  }

  .xh-desktop-nav-list .nav-link:hover,
  .xh-desktop-nav-list .nav-item.active .nav-link,
  .xh-desktop-nav-list .nav-item.show .nav-link,
  .xh-nav-list .nav-link:hover,
  .xh-nav-list .nav-item.active .nav-link,
  .xh-nav-list .nav-item.show .nav-link {
    color: var(--xh-brand) !important;
    background-color: var(--xh-brand-light);
  }
}

/* Dropdown Menus */
.dropdown-menu {
  background-color: var(--xh-bg-surface) !important;
  border: 1px solid var(--xh-border) !important;
  border-radius: var(--xh-radius-md) !important;
  box-shadow: var(--xh-shadow-dropdown) !important;
  padding: 8px !important;
  margin-top: 8px !important;
}

.dropdown-item {
  color: var(--xh-text-main) !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  padding: 8px 14px !important;
  border-radius: var(--xh-radius-sm) !important;
  transition: var(--xh-transition);
}
.dropdown-item:hover, .dropdown-item:focus {
  background-color: var(--xh-brand-light) !important;
  color: var(--xh-brand) !important;
}

.dropdown-divider {
  border-top: 1px solid var(--xh-border) !important;
  margin: 6px 0 !important;
}

/* Master Breadcrumb Bar - 100% Nativo, Sin aspecto heredado */
nav.master-breadcrumb,
.master-breadcrumb,
.xh-breadcrumb-bar {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 14px 0 4px !important;
}

ol.breadcrumb,
.breadcrumb,
.xh-breadcrumb {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 12px 0 !important;
  font-size: 0.84rem !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  list-style: none !important;
}

.breadcrumb-item,
.xh-breadcrumb-item {
  display: inline-flex !important;
  align-items: center !important;
}

.breadcrumb-item a,
.xh-breadcrumb-item a {
  color: #64748b !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: var(--xh-transition);
}

.breadcrumb-item a:hover,
.xh-breadcrumb-item a:hover {
  color: var(--xh-brand, #16a34a) !important;
  text-decoration: underline !important;
}

.breadcrumb-item.active,
.xh-breadcrumb-item.active,
.breadcrumb-item.active span,
.xh-breadcrumb-item.active span {
  color: #0f172a !important;
  font-weight: 600 !important;
}

.breadcrumb-item + .breadcrumb-item::before,
.xh-breadcrumb-item + .xh-breadcrumb-item::before {
  content: "›" !important;
  font-size: 1.15rem !important;
  line-height: 1 !important;
  color: #94a3b8 !important;
  padding: 0 8px !important;
  opacity: 0.8 !important;
}

/* Main Section (#main-body) */
body section#main-body, .xh-main-section {
  background-color: var(--xh-bg-app) !important;
  padding: 16px 0 40px !important;
  min-height: calc(100vh - 280px);
}

/* ==========================================================================
   COMPONENT: Encabezado de Página Estandarizado (.xh-page-header)
   ========================================================================== */
.xh-page-header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  padding-bottom: 0.25rem;
  gap: 1rem;
}

@media (min-width: 768px) {
  .xh-page-header {
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
  }
}

.xh-page-header-content {
  flex: 1 1 auto;
  min-width: 0;
}

.xh-page-header-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--xh-text-main);
  line-height: 1.25;
  margin-bottom: 0.35rem;
}

.xh-page-header-desc {
  color: var(--xh-text-muted);
  font-size: 0.875rem;
  margin-bottom: 0;
  line-height: 1.5;
}

.xh-page-header-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  flex-shrink: 0;
  gap: 0.5rem;
}

/* Sidebar Modern Overrides (Bento Card Style) */
.card-sidebar {
  border: 1px solid var(--xh-border) !important;
  border-radius: var(--xh-radius-lg) !important;
  background-color: var(--xh-bg-surface) !important;
  box-shadow: var(--xh-shadow-card) !important;
  margin-bottom: 24px !important;
  overflow: hidden;
  transition: var(--xh-transition);
}

.card-sidebar .card-header {
  background-color: var(--xh-bg-surface) !important;
  border-bottom: 1px solid var(--xh-border) !important;
  padding: 14px 18px !important;
  border-radius: var(--xh-radius-lg) var(--xh-radius-lg) 0 0 !important;
}

.card-sidebar .card-title {
  font-size: 0.925rem !important;
  font-weight: 700 !important;
  color: var(--xh-text-main) !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-sidebar .card-minimise {
  font-size: 0.75rem !important;
  color: var(--xh-text-muted) !important;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.card-sidebar .list-group-item {
  background-color: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--xh-border-light) !important;
  color: var(--xh-text-secondary) !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  padding: 11px 18px !important;
  transition: var(--xh-transition);
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  text-decoration: none !important;
}

.card-sidebar .list-group-item:last-child {
  border-bottom: none !important;
}

.card-sidebar .list-group-item:hover {
  background-color: var(--xh-brand-light) !important;
  color: var(--xh-brand) !important;
}

.card-sidebar .list-group-item.active {
  background-color: var(--xh-brand-light) !important;
  color: var(--xh-brand) !important;
  border-color: transparent !important;
  border-left: 3px solid var(--xh-brand) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Radio buttons inside filter sidebar */
.card-sidebar .view-filter-btns .list-group-item {
  border: 1px solid transparent !important;
  border-radius: var(--xh-radius-md) !important;
  margin: 3px 8px !important;
  padding: 8px 12px !important;
}

.card-sidebar .view-filter-btns .list-group-item.active {
  background-color: var(--xh-brand-light) !important;
  color: var(--xh-brand) !important;
  border: 1px solid rgba(79, 170, 44, 0.3) !important;
  border-left: 1px solid rgba(79, 170, 44, 0.3) !important;
}

.card-sidebar .view-filter-btns i.fa-circle,
.card-sidebar .view-filter-btns i.fa-dot-circle {
  font-size: 0.85rem !important;
  color: var(--xh-text-muted) !important;
  margin-right: 8px !important;
}

.card-sidebar .view-filter-btns .list-group-item.active i.fa-dot-circle {
  color: var(--xh-brand) !important;
}

/* Badges inside sidebar */
.card-sidebar .badge {
  background-color: var(--xh-bg-subtle) !important;
  color: var(--xh-text-muted) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  padding: 3px 9px !important;
  border-radius: 9999px !important;
  border: 1px solid var(--xh-border) !important;
}

.card-sidebar .list-group-item.active .badge,
.card-sidebar .view-filter-btns .list-group-item.active .badge {
  background-color: var(--xh-brand) !important;
  color: #fff !important;
  border-color: var(--xh-brand) !important;
}

/* Status Filter Pills Bar (Horizontal Quick Filter) */
.xh-status-filter-wrapper {
  background: var(--xh-bg-surface);
  border: 1px solid var(--xh-border);
  border-radius: var(--xh-radius-lg);
  padding: 10px 14px;
  box-shadow: var(--xh-shadow-sm);
}

.xh-status-filter-pill {
  background: transparent;
  border: 1px solid var(--xh-border);
  color: var(--xh-text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 9999px;
  padding: 5px 12px;
  transition: var(--xh-transition);
  display: inline-flex;
  align-items: center;
}

.xh-status-filter-pill:hover {
  border-color: var(--xh-brand);
  color: var(--xh-brand);
  background: var(--xh-brand-light);
}

.xh-status-filter-pill.active {
  background: var(--xh-brand) !important;
  border-color: var(--xh-brand) !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(79, 170, 44, 0.3);
}

.xh-status-filter-pill.active .badge {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #fff !important;
  border: none !important;
}

/* Modales Modernos */
.xh-modal-content {
  background-color: var(--xh-bg-surface) !important;
  border: 1px solid var(--xh-border) !important;
  border-radius: var(--xh-radius-lg) !important;
  box-shadow: var(--xh-shadow-dropdown) !important;
  color: var(--xh-text-main);
}
.xh-modal-content .modal-header {
  border-bottom: 1px solid var(--xh-border);
}
.xh-modal-content .modal-footer {
  border-top: 1px solid var(--xh-border);
}

/* Inputs en Dark Mode */
[data-theme="dark"] .form-control {
  background-color: var(--xh-bg-surface-elevated) !important;
  border-color: var(--xh-border) !important;
  color: var(--xh-text-main) !important;
}
[data-theme="dark"] .form-control:focus {
  border-color: var(--xh-brand) !important;
  box-shadow: 0 0 0 3px var(--xh-brand-ring) !important;
}

/* =========================================
   12. SERVICIOS Y DATATABLES MODERNOS
   ========================================= */

/* Contenedor DataTables */
.dataTables_wrapper {
  color: var(--xh-text-secondary);
  font-size: 0.85rem;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
  margin-bottom: 16px;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--xh-text-muted);
  font-weight: 500;
  margin-bottom: 0;
}

.dataTables_wrapper .dataTables_length select {
  background-color: var(--xh-bg-surface);
  border: 1px solid var(--xh-border);
  color: var(--xh-text-main);
  border-radius: var(--xh-radius-md);
  padding: 4px 10px;
  font-size: 0.825rem;
  outline: none;
  transition: var(--xh-transition);
}
.dataTables_wrapper .dataTables_length select:focus {
  border-color: var(--xh-brand);
  box-shadow: 0 0 0 3px var(--xh-brand-ring);
}

.dataTables_wrapper .dataTables_filter input {
  background-color: var(--xh-bg-surface);
  border: 1px solid var(--xh-border);
  color: var(--xh-text-main);
  border-radius: var(--xh-radius-pill);
  padding: 6px 14px;
  font-size: 0.825rem;
  outline: none;
  transition: var(--xh-transition);
  min-width: 220px;
}
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--xh-brand);
  box-shadow: 0 0 0 3px var(--xh-brand-ring);
}

/* Información de Paginación */
.dataTables_wrapper .dataTables_info {
  padding-top: 14px;
  color: var(--xh-text-muted);
  font-size: 0.8rem;
}

.dataTables_wrapper .dataTables_paginate {
  padding-top: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  background: var(--xh-bg-surface) !important;
  border: 1px solid var(--xh-border) !important;
  color: var(--xh-text-main) !important;
  border-radius: var(--xh-radius-md) !important;
  padding: 6px 12px !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: var(--xh-transition);
  margin: 0 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--xh-brand-light) !important;
  color: var(--xh-brand) !important;
  border-color: var(--xh-brand) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--xh-brand-gradient) !important;
  color: #ffffff !important;
  border-color: var(--xh-brand) !important;
  box-shadow: 0 2px 6px rgba(79, 170, 44, 0.3) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  background: var(--xh-bg-subtle) !important;
  color: var(--xh-text-muted) !important;
  border-color: var(--xh-border-light) !important;
  cursor: not-allowed;
  opacity: 0.6;
}

/* Filas de Servicios */
.xh-service-row {
  cursor: pointer;
  transition: var(--xh-transition);
}
.xh-service-row:hover td {
  background-color: var(--xh-brand-light) !important;
}

.xh-service-icon-box {
  width: 36px;
  height: 36px;
  border-radius: var(--xh-radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.xh-service-icon-lg {
  width: 48px;
  height: 48px;
  font-size: 1.4rem;
}
.xh-service-icon-vps {
  background: #eff6ff;
  color: #2563eb;
}
.xh-service-icon-hosting {
  background: #ecfdf5;
  color: #059669;
}
.xh-service-icon-streaming {
  background: #f5f3ff;
  color: #7c3aed;
}

.xh-service-title {
  font-weight: 700;
  color: var(--xh-text-main);
  font-size: 0.9rem;
  line-height: 1.2;
}

.xh-service-link {
  color: var(--xh-brand);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
  transition: var(--xh-transition);
}
.xh-service-link:hover {
  color: var(--xh-brand-hover);
  text-decoration: underline;
}

.xh-billing-cycle-pill {
  background: var(--xh-bg-subtle);
  border: 1px solid var(--xh-border);
  color: var(--xh-text-secondary);
  font-size: 0.725rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--xh-radius-pill);
  display: inline-block;
}

/* Status Mappings para WHMCS nativo */
.status-active, .status-activo {
  background-color: var(--xh-success-bg) !important;
  color: var(--xh-success-text) !important;
  border: 1px solid var(--xh-success-border) !important;
}
.status-suspended, .status-suspendido {
  background-color: var(--xh-danger-bg) !important;
  color: var(--xh-danger-text) !important;
  border: 1px solid var(--xh-danger-border) !important;
}
.status-pending, .status-pendiente {
  background-color: var(--xh-warning-bg) !important;
  color: var(--xh-warning-text) !important;
  border: 1px solid var(--xh-warning-border) !important;
}
.status-terminated, .status-terminado, .status-cancelled {
  background-color: var(--xh-bg-subtle) !important;
  color: var(--xh-text-muted) !important;
  border: 1px solid var(--xh-border) !important;
}

/* =========================================
   13. DETALLE DE PRODUCTOS Y CONSOLA (WHMCS)
   ========================================= */

.product-details {
  color: var(--xh-text-main);
}

.product-status {
  padding: 16px;
  background-color: var(--xh-bg-app);
  border: 1px solid var(--xh-border);
  border-radius: var(--xh-radius-lg);
}

.product-status .product-icon h3 {
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  margin-top: 10px;
  margin-bottom: 2px;
}

.product-status .product-icon h4 {
  font-size: 0.85rem !important;
  color: var(--xh-text-muted) !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.product-status .product-status-text {
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  margin-top: 10px;
  padding: 4px 12px;
  border-radius: var(--xh-radius-pill);
  display: inline-block;
}

.product-status-active .product-status-text {
  background: var(--xh-success-bg);
  color: var(--xh-success-text);
  border: 1px solid var(--xh-success-border);
}

.product-status-suspended .product-status-text {
  background: var(--xh-danger-bg);
  color: var(--xh-danger-text);
  border: 1px solid var(--xh-danger-border);
}

/* Meta Data Grid en Detalle de Producto */
.xh-product-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  padding: 16px;
  background-color: var(--xh-bg-app);
  border: 1px solid var(--xh-border);
  border-radius: var(--xh-radius-lg);
  margin-bottom: 20px;
}

.xh-meta-item {
  display: flex;
  flex-direction: column;
}

.xh-meta-label {
  font-size: 0.725rem;
  color: var(--xh-text-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.xh-meta-value {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--xh-text-main);
}

/* Pestañas Modernas de WHMCS (.nav-tabs) */
.nav-tabs {
  border-bottom: 1px solid var(--xh-border) !important;
  gap: 6px;
  margin-bottom: 20px;
}

.nav-tabs .nav-link {
  border: 1px solid transparent !important;
  color: var(--xh-text-secondary) !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  border-radius: var(--xh-radius-md) var(--xh-radius-md) 0 0 !important;
  padding: 10px 16px !important;
  transition: var(--xh-transition);
}

.nav-tabs .nav-link:hover {
  color: var(--xh-brand) !important;
  background-color: var(--xh-brand-light) !important;
}

.nav-tabs .nav-link.active {
  color: var(--xh-brand) !important;
  background-color: var(--xh-bg-surface) !important;
  border-color: var(--xh-border) var(--xh-border) var(--xh-bg-surface) !important;
  border-bottom: 2px solid var(--xh-brand) !important;
}

.product-details-tab-container {
  background-color: var(--xh-bg-surface) !important;
  border: 1px solid var(--xh-border);
  border-radius: 0 0 var(--xh-radius-lg) var(--xh-radius-lg);
  padding: 24px;
}

/* Módulos de Servidores (xwapi / cPanel) */
.module-client-area {
  padding: 16px;
  background: var(--xh-bg-app);
  border-radius: var(--xh-radius-md);
  margin-top: 16px;
}
.module-client-area .btn {
  margin: 4px;
}

/* =========================================
   14. BILLING & INVOICES (PRY-JA003 Fase 5)
   ========================================= */

/* Invoice Table Elements */
.xh-invoice-num {
  font-family: var(--xh-font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 4px 10px;
  background-color: var(--xh-bg-subtle);
  border: 1px solid var(--xh-border);
  border-radius: var(--xh-radius-sm);
  color: var(--xh-text-main);
  display: inline-block;
  letter-spacing: -0.02em;
}

.xh-currency-amount {
  font-family: var(--xh-font-sans) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  color: var(--xh-text-main) !important;
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  display: inline-block;
}

.xh-date-text {
  font-size: 0.875rem;
  color: var(--xh-text-secondary);
}

/* View Invoice Container - Document Light Mode */
.xh-invoice-page-body {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
  min-height: 100vh;
  padding: 30px 15px;
  color-scheme: light !important;
}

/* Force light variables inside invoice page even if parent has data-theme="dark" */
[data-theme="dark"] .xh-invoice-page-body,
.xh-invoice-page-body[data-theme="dark"],
.xh-invoice-page-body,
#view-invoice-detail {
  --xh-bg-app: #f1f5f9;
  --xh-bg-surface: #ffffff;
  --xh-bg-subtle: #f8fafc;
  --xh-border: #e2e8f0;
  --xh-border-hover: #cbd5e1;
  --xh-text-main: #0f172a;
  --xh-text-secondary: #475569;
  --xh-text-muted: #64748b;
  --xh-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
  --xh-shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.05), 0 2px 6px -1px rgba(0, 0, 0, 0.03);
}

.xh-invoice-wrapper {
  max-width: 900px;
  margin: 0 auto;
}

/* Utility Bar above Invoice */
.xh-invoice-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: var(--xh-radius-lg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  margin-bottom: 24px;
  gap: 12px;
  flex-wrap: wrap;
}

.xh-invoice-nav-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #475569 !important;
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  transition: var(--xh-transition);
}

.xh-invoice-nav-back:hover {
  color: var(--xh-brand) !important;
}

.xh-invoice-topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Main Invoice Paper Sheet */
.xh-invoice-sheet {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: var(--xh-radius-xl);
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05), 0 2px 6px -1px rgba(0, 0, 0, 0.03) !important;
  padding: 44px;
  margin-bottom: 30px;
  position: relative;
  color: #0f172a !important;
}

/* Header Section */
.xh-invoice-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--xh-border);
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.xh-invoice-brand img {
  max-height: 52px;
  width: auto;
  margin-bottom: 12px;
}

.xh-invoice-title-block h1 {
  font-size: 1.6rem;
  font-weight: 800;
  margin: 0 0 4px 0;
  color: var(--xh-text-main);
  letter-spacing: -0.03em;
}

.xh-invoice-title-block p {
  font-size: 0.875rem;
  color: var(--xh-text-muted);
  margin: 0;
}

/* Status Pill in Invoice View */
.xh-invoice-status-block {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.xh-invoice-badge-lg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: var(--xh-radius-pill);
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.xh-invoice-badge-lg.unpaid {
  background-color: var(--xh-danger-bg);
  color: var(--xh-danger-text);
  border: 1px solid var(--xh-danger-border);
}

.xh-invoice-badge-lg.paid {
  background-color: var(--xh-success-bg);
  color: var(--xh-success-text);
  border: 1px solid var(--xh-success-border);
}

.xh-invoice-badge-lg.cancelled {
  background-color: var(--xh-bg-subtle);
  color: var(--xh-text-muted);
  border: 1px solid var(--xh-border);
}

.xh-invoice-badge-lg.refunded {
  background-color: var(--xh-info-bg);
  color: var(--xh-info-text);
  border: 1px solid var(--xh-info-border);
}

.xh-invoice-badge-lg.collections {
  background-color: var(--xh-warning-bg);
  color: var(--xh-warning-text);
  border: 1px solid var(--xh-warning-border);
}

/* Unpaid Action Callout */
.xh-invoice-unpaid-cta {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(245, 158, 11, 0.08) 100%);
  border: 1px solid var(--xh-danger-border);
  border-radius: var(--xh-radius-lg);
  padding: 24px;
  margin-bottom: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.xh-unpaid-info-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--xh-danger-text);
  margin-bottom: 4px;
}

.xh-unpaid-info-due {
  font-size: 0.875rem;
  color: var(--xh-text-secondary);
}

.xh-unpaid-action .btn,
.payment-btn-container .btn {
  font-size: 1rem !important;
  font-weight: 700 !important;
  padding: 12px 28px !important;
  border-radius: var(--xh-radius-md) !important;
  box-shadow: 0 4px 12px rgba(79, 170, 44, 0.35) !important;
  transition: var(--xh-transition) !important;
}

/* Parties Grid (Issuer vs Recipient) */
.xh-invoice-parties-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}

.xh-party-card {
  background: var(--xh-bg-app);
  border: 1px solid var(--xh-border);
  border-radius: var(--xh-radius-lg);
  padding: 20px;
}

.xh-party-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--xh-text-muted);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.xh-party-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--xh-text-main);
  margin-bottom: 6px;
}

.xh-party-address {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--xh-text-secondary);
  margin: 0;
  font-style: normal;
}

.xh-party-taxid {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--xh-text-main);
  background: var(--xh-bg-surface);
  padding: 3px 8px;
  border-radius: var(--xh-radius-sm);
  border: 1px solid var(--xh-border);
}

/* Meta Strip (Dates & Gateway) */
.xh-invoice-meta-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--xh-bg-subtle);
  border: 1px solid var(--xh-border);
  border-radius: var(--xh-radius-md);
  padding: 14px 20px;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 16px;
}

.xh-meta-strip-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.xh-meta-strip-icon {
  font-size: 1.1rem;
  color: var(--xh-brand);
}

.xh-meta-strip-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: var(--xh-text-muted);
}

.xh-meta-strip-val {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--xh-text-main);
}

/* Invoice Line Items Table */
.xh-invoice-table-wrapper {
  border: 1px solid var(--xh-border);
  border-radius: var(--xh-radius-lg);
  overflow: hidden;
  margin-bottom: 24px;
}

.xh-invoice-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

.xh-invoice-table thead th {
  background: var(--xh-bg-subtle);
  color: var(--xh-text-muted);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 14px 20px;
  border-bottom: 1px solid var(--xh-border);
}

.xh-invoice-table tbody td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--xh-border);
  font-size: 0.9rem;
  color: var(--xh-text-main);
  vertical-align: middle;
}

.xh-invoice-table tbody tr:last-child td {
  border-bottom: none;
}

.xh-item-desc {
  font-weight: 600;
}

.xh-item-amount {
  font-family: var(--xh-font-mono);
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Totals Summary Box */
.xh-invoice-totals-container {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 32px;
}

.xh-invoice-totals-box {
  width: 100%;
  max-width: 360px;
  background: var(--xh-bg-app);
  border: 1px solid var(--xh-border);
  border-radius: var(--xh-radius-lg);
  padding: 18px 22px;
}

.xh-totals-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 0.875rem;
  color: var(--xh-text-secondary);
}

.xh-totals-row.total-grand {
  border-top: 2px solid var(--xh-border);
  margin-top: 8px;
  padding-top: 14px;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--xh-brand);
}

.xh-totals-val {
  font-family: var(--xh-font-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Transactions / Ledger */
.xh-invoice-ledger-card {
  background: var(--xh-bg-surface);
  border: 1px solid var(--xh-border);
  border-radius: var(--xh-radius-lg);
  overflow: hidden;
  margin-bottom: 32px;
}

.xh-ledger-header {
  padding: 14px 20px;
  background: var(--xh-bg-subtle);
  border-bottom: 1px solid var(--xh-border);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--xh-text-main);
  display: flex;
  align-items: center;
  gap: 8px;
}

.xh-ledger-table {
  width: 100%;
  font-size: 0.85rem;
}

.xh-ledger-table th {
  padding: 10px 16px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--xh-text-muted);
  text-transform: uppercase;
}

.xh-ledger-table td {
  padding: 12px 16px;
  border-top: 1px solid var(--xh-border);
  color: var(--xh-text-secondary);
}

/* XPYME / SII Electronic Invoice Notice */
.xh-invoice-dte-notice {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--xh-info-bg);
  border: 1px solid var(--xh-info-border);
  border-radius: var(--xh-radius-lg);
  padding: 16px 20px;
  margin-bottom: 24px;
  font-size: 0.85rem;
  color: var(--xh-info-text);
}

.xh-invoice-dte-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

/* Print Stylesheet Overrides */
@media print {
  body, .xh-invoice-page-body {
    background-color: #ffffff !important;
    color: #000000 !important;
    padding: 0 !important;
  }

  .xh-invoice-topbar,
  .d-print-none,
  .payment-btn-container,
  .xh-invoice-unpaid-cta .btn {
    display: none !important;
  }

  .xh-invoice-sheet {
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .xh-invoice-table thead th,
  .xh-party-card,
  .xh-invoice-totals-box,
  .xh-meta-strip-item,
  .xh-invoice-meta-strip {
    background: transparent !important;
    border-color: #e5e7eb !important;
  }

  .xh-invoice-badge-lg {
    border: 1px solid #000000 !important;
    color: #000000 !important;
    background: transparent !important;
  }
}

/* =========================================
   15. SUPPORT & TICKETS (PRY-JA003 Fase 6)
   ========================================= */

/* Ticket Listing Elements */
.xh-ticket-tid {
  font-family: var(--xh-font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--xh-brand);
  margin-right: 8px;
}

.xh-dept-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--xh-radius-pill);
  background-color: var(--xh-bg-subtle);
  border: 1px solid var(--xh-border);
  color: var(--xh-text-secondary);
}

.xh-ticket-subject-link {
  font-weight: 600;
  color: var(--xh-text-main);
  text-decoration: none !important;
  transition: var(--xh-transition);
}

.xh-ticket-subject-link:hover {
  color: var(--xh-brand);
}

.xh-ticket-subject-link.unread {
  font-weight: 800;
  color: var(--xh-brand);
}

/* Ticket Detail / Conversation Thread */
.xh-ticket-thread-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 30px;
}

.xh-ticket-msg {
  background: var(--xh-bg-surface);
  border: 1px solid var(--xh-border);
  border-radius: var(--xh-radius-lg);
  box-shadow: var(--xh-shadow-sm);
  overflow: hidden;
  transition: var(--xh-transition);
}

.xh-ticket-msg.staff {
  border-left: 4px solid var(--xh-brand) !important;
  background: var(--xh-bg-surface);
}

.xh-ticket-msg-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  background: var(--xh-bg-subtle);
  border-bottom: 1px solid var(--xh-border);
  flex-wrap: wrap;
  gap: 10px;
}

.xh-ticket-user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.xh-ticket-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--xh-brand-gradient);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  box-shadow: var(--xh-shadow-sm);
}

.xh-ticket-avatar.client {
  background: linear-gradient(135deg, #060840 0%, #121a80 100%);
}

.xh-ticket-author-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--xh-text-main);
}

.xh-ticket-time {
  font-size: 0.775rem;
  color: var(--xh-text-muted);
}

.xh-staff-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--xh-radius-pill);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background-color: var(--xh-brand-light);
  color: var(--xh-brand);
  border: 1px solid var(--xh-brand-ring);
}

.xh-client-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--xh-radius-pill);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background-color: var(--xh-info-bg);
  color: var(--xh-info-text);
  border: 1px solid var(--xh-info-border);
}

.xh-ticket-msg-body {
  padding: 20px 24px;
  color: var(--xh-text-main);
  font-size: 0.925rem;
  line-height: 1.65;
}

.xh-ticket-msg-body hr {
  margin: 16px 0;
  border-top-color: var(--xh-border);
}

/* Attachments */
.xh-attachment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 24px 18px 24px;
  margin: 0;
  list-style: none;
}

.xh-attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--xh-radius-md);
  background: var(--xh-bg-subtle);
  border: 1px solid var(--xh-border);
  color: var(--xh-text-main);
  font-size: 0.825rem;
  font-weight: 600;
  text-decoration: none !important;
  transition: var(--xh-transition);
}

.xh-attachment-chip:hover {
  border-color: var(--xh-brand);
  color: var(--xh-brand);
  background: var(--xh-brand-light);
}

/* Department Grid (Step One) */
.xh-dept-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.xh-dept-card {
  background: var(--xh-bg-surface);
  border: 1px solid var(--xh-border);
  border-radius: var(--xh-radius-lg);
  padding: 24px;
  text-decoration: none !important;
  transition: var(--xh-transition);
  display: flex;
  flex-direction: column;
  box-shadow: var(--xh-shadow-card);
}

.xh-dept-card:hover {
  border-color: var(--xh-brand);
  transform: translateY(-3px);
  box-shadow: var(--xh-shadow-hover);
}

.xh-dept-card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--xh-radius-md);
  background: var(--xh-brand-light);
  color: var(--xh-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 16px;
}

.xh-dept-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--xh-text-main);
  margin-bottom: 8px;
}

.xh-dept-card-desc {
  font-size: 0.85rem;
  color: var(--xh-text-secondary);
  line-height: 1.5;
  margin-bottom: 16px;
  flex-grow: 1;
}

.xh-dept-card-cta {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--xh-brand);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Ticket Submission Confirmation */
.xh-ticket-success-icon {
  display: flex;
  justify-content: center;
}

.xh-success-circle {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--xh-brand-light, #eef9eb);
  color: var(--xh-brand, #4FAA2C);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  box-shadow: 0 0 0 10px rgba(79, 170, 44, 0.08);
  animation: xh-pop-in 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes xh-pop-in {
  0% { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.xh-ticket-id-chip {
  background: var(--xh-bg-subtle, #f1f5f9);
  border: 1px solid var(--xh-border, #e2e8f0);
  border-radius: var(--xh-radius-pill, 50px);
  padding: 6px 18px;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
}

.xh-ticket-number-link {
  color: var(--xh-brand, #4FAA2C) !important;
  font-weight: 700;
  text-decoration: none !important;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
}

.xh-ticket-number-link:hover {
  text-decoration: underline !important;
}

.xh-btn-copy-tid {
  border: none;
  background: transparent;
  color: var(--xh-text-muted, #64748b);
  cursor: pointer;
  padding: 0 4px;
  transition: color 0.2s ease;
}

.xh-btn-copy-tid:hover {
  color: var(--xh-brand, #4FAA2C);
}

.xh-ticket-sla-box {
  max-width: 620px;
  background: var(--xh-bg-subtle, #f1f5f9);
  border: 1px solid var(--xh-border, #e2e8f0);
  border-left: 4px solid var(--xh-brand, #4FAA2C);
  border-radius: var(--xh-radius-md, 8px);
}

.xh-ticket-sla-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--xh-brand-light, #eef9eb);
  color: var(--xh-brand, #4FAA2C);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

/* =========================================
   16. DASHBOARD HERO, PILLS & NAVBAR REFINEMENT
   ========================================= */

/* Hero greeting banner con degradado secundario #060840 (Navy XHOST) */
.xh-hero-welcome {
  background: linear-gradient(135deg, #060840 0%, #0d1363 55%, #153c25 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: var(--xh-radius-lg);
  padding: 24px;
  margin-bottom: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 10px 25px -5px rgba(6, 8, 64, 0.28), 0 8px 10px -6px rgba(6, 8, 64, 0.2) !important;
  color: #ffffff !important;
}

.xh-hero-welcome h2 {
  color: #ffffff !important;
}

.xh-hero-welcome p,
.xh-hero-welcome p.text-muted {
  color: rgba(255, 255, 255, 0.82) !important;
}

.xh-hero-welcome .text-muted.xh-text-caption,
.xh-hero-welcome div.text-muted {
  color: rgba(255, 255, 255, 0.65) !important;
}

.xh-hero-welcome .xh-badge,
.xh-hero-welcome .xh-badge-success {
  background: rgba(79, 170, 44, 0.22) !important;
  border: 1px solid rgba(79, 170, 44, 0.45) !important;
  color: #86efac !important;
}

[data-theme="dark"] .xh-hero-welcome {
  background: linear-gradient(135deg, #040526 0%, #060840 50%, #0f271a 100%) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Quick actions pills sobre fondo oscuro */
.xh-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.xh-hero-quick-btn,
.xh-quick-actions a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--xh-radius-pill);
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
  font-size: 0.825rem;
  font-weight: 600;
  text-decoration: none !important;
  transition: var(--xh-transition);
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
  white-space: nowrap;
}

.xh-hero-quick-btn:hover,
.xh-quick-actions a:hover {
  background: var(--xh-brand, #4FAA2C) !important;
  border-color: var(--xh-brand, #4FAA2C) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -2px rgba(79, 170, 44, 0.45) !important;
}

.xh-hero-quick-btn.xh-quick-btn-urgent {
  background: rgba(225, 29, 72, 0.22) !important;
  border-color: rgba(225, 29, 72, 0.45) !important;
}

.xh-hero-quick-btn.xh-quick-btn-urgent:hover {
  background: #e11d48 !important;
  border-color: #e11d48 !important;
  box-shadow: 0 8px 20px -2px rgba(225, 29, 72, 0.45) !important;
}

/* Progress bar inside cards */
.xh-progress {
  height: 6px;
  background-color: var(--xh-bg-subtle);
  border-radius: 9999px;
  overflow: hidden;
  margin-top: 6px;
}

.xh-progress-bar {
  height: 100%;
  background: var(--xh-brand-gradient);
  border-radius: 9999px;
}

/* Modern Navbar Links & Active Pill (Desktop >= 992px) */
@media (min-width: 992px) {
  .xh-desktop-nav-list,
  .xh-nav-list {
    display: flex;
    align-items: center;
    gap: 3px;
  }

  .xh-desktop-nav-list .nav-item .nav-link,
  .xh-desktop-nav-list > li > a,
  .xh-nav-list .nav-item .nav-link,
  .xh-nav-list > li > a {
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--xh-text-secondary) !important;
    padding: 7px 11px !important;
    border-radius: var(--xh-radius-md);
    transition: var(--xh-transition);
    display: inline-flex;
    align-items: center;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  .xh-desktop-nav-list .nav-item .nav-link:hover,
  .xh-desktop-nav-list > li > a:hover,
  .xh-nav-list .nav-item .nav-link:hover,
  .xh-nav-list > li > a:hover {
    color: var(--xh-brand) !important;
    background-color: var(--xh-brand-light);
  }

  .xh-desktop-nav-list .nav-item.active .nav-link,
  .xh-desktop-nav-list > li.active > a,
  .xh-nav-list .nav-item.active .nav-link,
  .xh-nav-list > li.active > a {
    color: var(--xh-brand) !important;
    background-color: var(--xh-brand-light) !important;
    font-weight: 700;
  }
}

/* Service Item Modern List Card */
.div-service-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--xh-bg-surface);
  border-bottom: 1px solid var(--xh-border);
  transition: var(--xh-transition);
}

.div-service-item:last-child {
  border-bottom: none;
}

.div-service-item:hover {
  background-color: var(--xh-bg-subtle);
}

.div-service-item .div-service-name {
  flex-grow: 1;
  padding: 0 16px;
}

.div-service-item .div-service-name .font-weight-bold {
  display: block;
  font-size: 0.95rem;
  color: var(--xh-text-main);
}

.div-service-item .div-service-name .text-domain {
  font-size: 0.8rem;
  color: var(--xh-text-secondary);
  font-family: var(--xh-font-mono);
}

.div-service-item .label,
.div-service-item .badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--xh-radius-pill);
}

.div-service-item .label-Active,
.div-service-item .label-active,
.div-service-item .label-success {
  background: var(--xh-success-bg) !important;
  color: var(--xh-success-text) !important;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.div-service-item .label-Suspended,
.div-service-item .label-suspended,
.div-service-item .label-danger {
  background: var(--xh-danger-bg) !important;
  color: var(--xh-danger-text) !important;
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.div-service-item .btn {
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: var(--xh-radius-md);
  padding: 6px 14px;
}

/* Featured Unpaid Invoice Card (Right Column) */
.xh-featured-invoice {
  border-left: 4px solid var(--xh-danger-text) !important;
}

.xh-featured-price {
  font-size: 2rem;
  font-weight: 800;
  color: var(--xh-text-main);
  letter-spacing: -0.02em;
}

.xh-admin-compact-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  font-size: 0.725rem;
  font-weight: 600;
  border-radius: var(--xh-radius-pill);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: var(--xh-danger-text) !important;
  background: rgba(239, 68, 68, 0.08);
  text-decoration: none !important;
  transition: var(--xh-transition);
}

.xh-admin-compact-badge:hover {
  background: var(--xh-danger-text);
  color: #ffffff !important;
}

/* =========================================
   17. REFINAMIENTOS DE FIDELIDAD (PROPUESTA IMAGE 1)
   ========================================= */

/* Navbar Pills & Links (Exclusivo Desktop >= 992px) */
@media (min-width: 992px) {
  .xh-desktop-nav-list,
  .xh-nav-list {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    flex-wrap: nowrap !important;
  }

  .xh-desktop-nav-list .nav-item .nav-link,
  .xh-desktop-nav-list > li > a,
  .xh-nav-list .nav-item .nav-link,
  .xh-nav-list > li > a {
    border-radius: var(--xh-radius-pill) !important;
    font-size: 0.855rem !important;
    font-weight: 600 !important;
    padding: 7px 11px !important;
    color: var(--xh-text-secondary) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    line-height: 1.25 !important;
  }

  @media (max-width: 1280px) {
    .xh-desktop-nav-list,
    .xh-nav-list {
      gap: 2px !important;
    }
    .xh-desktop-nav-list .nav-item .nav-link,
    .xh-desktop-nav-list > li > a,
    .xh-nav-list .nav-item .nav-link,
    .xh-nav-list > li > a {
      font-size: 0.81rem !important;
      padding: 6px 8px !important;
      gap: 4px !important;
    }
    .navbar-main .btn-sm {
      font-size: 0.78rem !important;
      padding: 5px 9px !important;
    }
  }

  .xh-desktop-nav-list .nav-item.active .nav-link,
  .xh-desktop-nav-list > li.active > a,
  .xh-nav-list .nav-item.active .nav-link,
  .xh-nav-list > li.active > a {
    color: var(--xh-brand) !important;
    background-color: var(--xh-brand-light) !important;
    font-weight: 700 !important;
    border-radius: var(--xh-radius-pill) !important;
  }

  /* Ocultar flechas triangulares de dropdown en la barra principal horizontal */
  .xh-desktop-nav-list .dropdown-toggle::after,
  .xh-nav-list .dropdown-toggle::after {
    display: none !important;
  }
}

/* Botón '+ Nuevo Ticket' contorno verde redondeado */
.xh-btn-outline-pill {
  border: 1.5px solid var(--xh-brand) !important;
  color: var(--xh-brand) !important;
  background-color: var(--xh-bg-surface) !important;
  border-radius: var(--xh-radius-pill) !important;
  padding: 6px 18px !important;
  font-weight: 700 !important;
  font-size: 0.825rem !important;
  transition: var(--xh-transition) !important;
  display: inline-flex;
  align-items: center !important;
  text-decoration: none !important;
}
.xh-btn-outline-pill:hover {
  background-color: var(--xh-brand-light) !important;
  color: var(--xh-brand-dark) !important;
  transform: translateY(-1px);
}

/* Botón 'Contratar' sólido verde redondeado */
.xh-btn-solid-pill {
  background: var(--xh-brand-gradient) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--xh-radius-pill) !important;
  padding: 7px 20px !important;
  font-weight: 700 !important;
  font-size: 0.825rem !important;
  box-shadow: 0 4px 12px rgba(79, 170, 44, 0.25) !important;
  transition: var(--xh-transition) !important;
  display: inline-flex;
  align-items: center !important;
  text-decoration: none !important;
}
.xh-btn-solid-pill:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(79, 170, 44, 0.35) !important;
  color: #ffffff !important;
}

/* Botón pequeño redondeado 'Ver Todos (X)' */
.xh-btn-pill-sm {
  border-radius: var(--xh-radius-pill) !important;
  padding: 3px 12px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
}

/* =========================================
   18. TOPHEADER & FOOTER COLOR SECUNDARIO (#060840)
   ========================================= */

/* Topheader: Fondo color secundario #060840 (Navy XHOST) */
html body header.header .topbar,
html body .header .topbar,
html body .xh-topbar {
  background-color: var(--xh-navy, #060840) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  font-size: 0.825rem !important;
  padding: 8px 0 !important;
}

html body header.header .topbar > .container span:not(.dropdown-menu *):not(.xh-user-dropdown-menu *),
html body header.header .topbar > .container div:not(.dropdown-menu):not(.xh-user-dropdown-menu):not(.dropdown-menu *):not(.xh-user-dropdown-menu *),
html body header.header .topbar > .container a:not(.dropdown-item):not(.dropdown-menu *):not(.xh-user-dropdown-menu *) {
  color: #ffffff;
}

html body header.header .topbar > .container .text-muted:not(.dropdown-menu *):not(.xh-user-dropdown-menu *),
html body .xh-topbar > .container .text-muted:not(.dropdown-menu *):not(.xh-user-dropdown-menu *) {
  color: rgba(255, 255, 255, 0.65) !important;
}

/* =========================================
   TOPBAR DROPDOWN MENUS (NOTIFICATIONS & USER ACCOUNT)
   ========================================= */
html body header.header .topbar .dropdown-menu,
html body header.header .topbar .xh-user-dropdown-menu,
html body .header .topbar .dropdown-menu,
html body .header .topbar .xh-user-dropdown-menu,
html body .xh-topbar .dropdown-menu,
html body .xh-topbar .xh-user-dropdown-menu {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
  border-radius: var(--xh-radius-lg, 12px) !important;
}

html body header.header .topbar .dropdown-menu .xh-dropdown-header-soft,
html body header.header .topbar .xh-user-dropdown-menu .xh-dropdown-header-soft {
  background: #f8fafc !important;
}

/* Forzar color oscuro visible en enlaces y textos (span) de todos los dropdowns del topbar */
html body header.header .topbar .dropdown-menu a,
html body header.header .topbar .dropdown-menu .dropdown-item,
html body header.header .topbar .dropdown-menu a span,
html body header.header .topbar .dropdown-menu .dropdown-item span,
html body header.header .topbar .xh-user-dropdown-menu a,
html body header.header .topbar .xh-user-dropdown-menu .dropdown-item,
html body header.header .topbar .xh-user-dropdown-menu a span,
html body header.header .topbar .xh-user-dropdown-menu .dropdown-item span,
html body .header .topbar .dropdown-menu .dropdown-item span,
html body .xh-topbar .xh-user-dropdown-menu .dropdown-item span {
  color: #1e293b !important;
  background: transparent !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}

html body header.header .topbar .dropdown-menu a,
html body header.header .topbar .dropdown-menu .dropdown-item,
html body header.header .topbar .xh-user-dropdown-menu a,
html body header.header .topbar .xh-user-dropdown-menu .dropdown-item {
  padding: 8px 16px !important;
  display: flex !important;
  align-items: center !important;
}

html body header.header .topbar .dropdown-menu a:hover,
html body header.header .topbar .dropdown-menu a:focus,
html body header.header .topbar .dropdown-menu .dropdown-item:hover,
html body header.header .topbar .dropdown-menu .dropdown-item:focus,
html body header.header .topbar .dropdown-menu a:hover span,
html body header.header .topbar .dropdown-menu a:focus span,
html body header.header .topbar .dropdown-menu .dropdown-item:hover span,
html body header.header .topbar .dropdown-menu .dropdown-item:focus span,
html body header.header .topbar .xh-user-dropdown-menu a:hover,
html body header.header .topbar .xh-user-dropdown-menu a:focus,
html body header.header .topbar .xh-user-dropdown-menu .dropdown-item:hover,
html body header.header .topbar .xh-user-dropdown-menu .dropdown-item:focus,
html body header.header .topbar .xh-user-dropdown-menu a:hover span,
html body header.header .topbar .xh-user-dropdown-menu a:focus span,
html body header.header .topbar .xh-user-dropdown-menu .dropdown-item:hover span,
html body header.header .topbar .xh-user-dropdown-menu .dropdown-item:focus span {
  background: #f0fdf4 !important;
  color: #4faa2c !important;
}

html body header.header .topbar .dropdown-menu .dropdown-item.active,
html body header.header .topbar .dropdown-menu .dropdown-item.active span,
html body header.header .topbar .xh-user-dropdown-menu .dropdown-item.active,
html body header.header .topbar .xh-user-dropdown-menu .dropdown-item.active span {
  background: #f0fdf4 !important;
  color: #15803d !important;
  font-weight: 600 !important;
}

html body header.header .topbar .dropdown-menu i,
html body header.header .topbar .dropdown-menu .dropdown-item i,
html body header.header .topbar .xh-user-dropdown-menu i,
html body header.header .topbar .xh-user-dropdown-menu .dropdown-item i {
  color: #64748b !important;
  font-size: 0.85rem !important;
  width: 18px !important;
  text-align: center !important;
  margin-right: 8px !important;
  transition: color 0.2s ease !important;
}

html body header.header .topbar .dropdown-menu a:hover i,
html body header.header .topbar .dropdown-menu .dropdown-item:hover i,
html body header.header .topbar .xh-user-dropdown-menu a:hover i,
html body header.header .topbar .xh-user-dropdown-menu .dropdown-item:hover i {
  color: #4faa2c !important;
}

html body header.header .topbar .dropdown-menu .text-muted,
html body header.header .topbar .dropdown-menu small,
html body header.header .topbar .xh-user-dropdown-menu .text-muted,
html body header.header .topbar .xh-user-dropdown-menu small {
  color: #64748b !important;
}

html body header.header .topbar .dropdown-menu .text-dark,
html body header.header .topbar .dropdown-menu .font-weight-bold,
html body header.header .topbar .xh-user-dropdown-menu .text-dark,
html body header.header .topbar .xh-user-dropdown-menu .font-weight-bold {
  color: #0f172a !important;
}

html body header.header .topbar .dropdown-menu a.text-danger,
html body header.header .topbar .dropdown-menu .dropdown-item.text-danger,
html body header.header .topbar .dropdown-menu a.text-danger span,
html body header.header .topbar .dropdown-menu .dropdown-item.text-danger span,
html body header.header .topbar .xh-user-dropdown-menu a.text-danger,
html body header.header .topbar .xh-user-dropdown-menu .dropdown-item.text-danger,
html body header.header .topbar .xh-user-dropdown-menu a.text-danger span,
html body header.header .topbar .xh-user-dropdown-menu .dropdown-item.text-danger span {
  color: #ef4444 !important;
}

html body header.header .topbar .dropdown-menu a.text-danger i,
html body header.header .topbar .dropdown-menu .dropdown-item.text-danger i,
html body header.header .topbar .xh-user-dropdown-menu a.text-danger i,
html body header.header .topbar .xh-user-dropdown-menu .dropdown-item.text-danger i {
  color: #ef4444 !important;
}

html body header.header .topbar .dropdown-menu a.text-danger:hover,
html body header.header .topbar .dropdown-menu .dropdown-item.text-danger:hover,
html body header.header .topbar .dropdown-menu a.text-danger:hover span,
html body header.header .topbar .dropdown-menu .dropdown-item.text-danger:hover span,
html body header.header .topbar .xh-user-dropdown-menu a.text-danger:hover,
html body header.header .topbar .xh-user-dropdown-menu .dropdown-item.text-danger:hover,
html body header.header .topbar .xh-user-dropdown-menu a.text-danger:hover span,
html body header.header .topbar .xh-user-dropdown-menu .dropdown-item.text-danger:hover span {
  background: #fef2f2 !important;
  color: #dc2626 !important;
}

html body header.header .topbar .dropdown-menu a.text-danger:hover i,
html body header.header .topbar .dropdown-menu .dropdown-item.text-danger:hover i,
html body header.header .topbar .xh-user-dropdown-menu a.text-danger:hover i,
html body header.header .topbar .xh-user-dropdown-menu .dropdown-item.text-danger:hover i {
  color: #dc2626 !important;
}

html body .xh-topbar strong.text-success,
html body header.header .topbar strong.text-success,
html body .xh-topbar .text-success {
  color: #86efac !important;
}

html body .xh-topbar .fa-shield-alt.text-success {
  color: #86efac !important;
}

html body header.header .topbar .client-alerts-btn,
html body .xh-alert-toggle {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: var(--xh-radius-pill) !important;
  padding: 4px 14px !important;
  font-size: 0.775rem !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  box-shadow: none !important;
  transition: var(--xh-transition);
}

html body header.header .topbar .client-alerts-btn:hover,
html body .xh-alert-toggle:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  color: #ffffff !important;
}

html body header.header .topbar .active-client-badge,
html body .active-client-badge {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: var(--xh-radius-pill) !important;
  padding: 4px 14px !important;
  font-weight: 600 !important;
  font-size: 0.825rem !important;
  color: #ffffff !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

html body header.header .topbar .active-client-badge:hover,
html body .active-client-badge:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  color: #ffffff !important;
}

html body .active-client-avatar {
  background: var(--xh-brand, #4FAA2C) !important;
  color: #ffffff !important;
}

/* Fondo global light y sección principal fluida con profundidad #f6f7f7 */
html, body {
  background-color: var(--xh-bg-app, #f6f7f7) !important;
}

body section#main-body,
.xh-main-section,
#main-body {
  background-color: var(--xh-bg-app, #f6f7f7) !important;
  margin-bottom: 0 !important;
  padding: 16px 0 48px !important;
}

.primary-content,
.main-content,
section#main-content {
  margin-bottom: 0 !important;
}

/* Footer: Fondo color secundario #060840 (Navy XHOST) */
html body footer#footer,
html body footer.footer,
html body footer.footer-modern,
html body .xh-footer {
  background-color: var(--xh-navy, #060840) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 28px 0 24px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 0.85rem !important;
  box-shadow: none !important;
}

html body .xh-footer .xh-footer-brand {
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff !important;
  margin-bottom: 4px;
}

html body .xh-footer .text-muted {
  color: rgba(255, 255, 255, 0.6) !important;
}

html body .xh-footer a.xh-footer-link,
html body .xh-footer a.text-muted {
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 0.825rem !important;
  font-weight: 500 !important;
  transition: var(--xh-transition);
}

html body .xh-footer a.xh-footer-link:hover,
html body .xh-footer a.text-muted:hover {
  color: #86efac !important;
  text-decoration: underline !important;
}

html body .xh-footer a.xh-footer-link-status {
  background: rgba(79, 170, 44, 0.15) !important;
  border: 1px solid rgba(79, 170, 44, 0.35) !important;
  color: #86efac !important;
}

html body .xh-footer a.xh-footer-link-status:hover {
  background: var(--xh-brand, #4FAA2C) !important;
  color: #ffffff !important;
}

/* =========================================
   19. ESTILOS UNIFICADOS DE TABLAS Y ACCIONES
   ========================================= */
.xh-btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: var(--xh-bg-surface);
  border: 1px solid var(--xh-border);
  color: var(--xh-text-secondary);
  border-radius: var(--xh-radius-pill);
  padding: 4px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  transition: var(--xh-transition);
  text-decoration: none !important;
}

.xh-btn-pill:hover {
  background-color: var(--xh-bg-subtle);
  border-color: var(--xh-border-hover);
  color: var(--xh-brand);
}

.xh-btn-pill-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #047857;
  border-radius: var(--xh-radius-pill);
  padding: 4px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  transition: var(--xh-transition);
  text-decoration: none !important;
}

.xh-btn-pill-action:hover {
  background-color: #10b981;
  border-color: #10b981;
  color: #ffffff;
}

.xh-table-action-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--xh-radius-sm);
  border: 1px solid var(--xh-border);
  background-color: var(--xh-bg-surface);
  color: var(--xh-text-secondary);
  font-size: 0.85rem;
  transition: var(--xh-transition);
  padding: 0;
  text-decoration: none !important;
}

.xh-table-action-btn:hover {
  border-color: var(--xh-border-hover);
  color: var(--xh-brand);
  background-color: var(--xh-bg-subtle);
}

.xh-btn-manage {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0.35rem 0.85rem;
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: var(--xh-radius-sm);
  background-color: var(--xh-bg-surface);
  border: 1px solid var(--xh-border);
  color: var(--xh-text-main);
  transition: var(--xh-transition);
  text-decoration: none !important;
  white-space: nowrap;
}

.xh-btn-manage:hover {
  background-color: var(--xh-brand);
  border-color: var(--xh-brand);
  color: #ffffff;
}

.xh-btn-manage:hover i {
  color: #ffffff;
  transform: translateX(2px);
}

.xh-btn-manage i {
  transition: transform 0.2s ease;
  font-size: 0.75rem;
}

.xh-btn-manage i,
.xh-btn-manage span,
.xh-table-action-btn i {
  pointer-events: none;
}

.xh-table-title {
  font-size: 0.925rem;
  font-weight: 600;
  color: var(--xh-text-main);
  line-height: 1.35;
}

.xh-table-title:hover {
  color: var(--xh-brand);
}

.xh-badge-secondary {
  background-color: var(--xh-bg-subtle, #f1f5f9);
  color: var(--xh-text-secondary, #64748b);
  border: 1px solid var(--xh-border, #e2e8f0);
}

/* =========================================
   JERARQUÍA VISUAL DE PRÓXIMO VENCIMIENTO Y TABLA DE SERVICIOS
   ========================================= */
.xh-table-modern {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.xh-table-modern th {
  background: var(--xh-bg-subtle, #f8fafc);
  color: var(--xh-text-muted, #64748b);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 13px 16px;
  border-bottom: 2px solid var(--xh-border, #e2e8f0);
  white-space: nowrap;
}

.xh-table-modern td {
  padding: 15px 16px;
  border-bottom: 1px solid var(--xh-border, #e2e8f0);
  vertical-align: middle;
  background: var(--xh-bg-surface, #ffffff);
  transition: background-color 0.15s ease;
}

.xh-service-row {
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.xh-service-row:hover td {
  background-color: var(--xh-bg-subtle, #f8fafc) !important;
}

/* Columna: Próximo Vencimiento con Jerarquía */
.xh-due-date-container {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 175px;
}

.xh-due-date-val {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.925rem;
  color: var(--xh-text-main, #0f172a);
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.xh-due-date-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgba(79, 170, 44, 0.1);
  color: var(--xh-brand, #4FAA2C);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.xh-due-date-text {
  font-weight: 700;
  color: var(--xh-text-main, #0f172a);
}

.xh-due-subtext {
  font-size: 0.775rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  line-height: 1.2;
}

.xh-due-subtext-active {
  color: #059669;
}

.xh-due-subtext-muted {
  color: var(--xh-text-muted, #94a3b8);
}

.xh-due-subtext-danger {
  color: #dc2626;
  font-weight: 600;
}

.xh-due-subtext-warning {
  color: #d97706;
}

/* Badges de Estado Mejorados */
.xh-badge-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.xh-badge-status-active {
  background-color: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

.xh-badge-status-terminated {
  background-color: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

.xh-badge-status-suspended {
  background-color: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.xh-badge-status-pending {
  background-color: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}

.xh-badge-status-cancelled {
  background-color: #f8fafc;
  color: #94a3b8;
  border: 1px solid #e2e8f0;
}

/* Dark Mode Overrides */
[data-theme="dark"] .xh-table-modern th {
  background: var(--xh-bg-surface-elevated, #1e293b);
  border-bottom-color: var(--xh-border);
}

[data-theme="dark"] .xh-table-modern td {
  background: var(--xh-bg-surface, #0f172a);
  border-bottom-color: var(--xh-border);
}

[data-theme="dark"] .xh-service-row:hover td {
  background-color: var(--xh-bg-surface-elevated, #1e293b) !important;
}

[data-theme="dark"] .xh-badge-status-active {
  background-color: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.3);
}

[data-theme="dark"] .xh-badge-status-terminated {
  background-color: rgba(100, 116, 139, 0.15);
  color: #94a3b8;
  border-color: rgba(100, 116, 139, 0.25);
}

[data-theme="dark"] .xh-badge-status-suspended {
  background-color: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.3);
}

[data-theme="dark"] .xh-due-date-icon {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

/* =========================================
   15. DOMAIN MANAGEMENT MODULE (PRY-JA003)
   ========================================= */

/* Domain icon in table */
.xh-domain-icon-box {
  width: 40px;
  height: 40px;
  border-radius: var(--xh-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  background: var(--xh-info-bg);
  color: var(--xh-info-text);
  border: 1px solid var(--xh-info-border);
  transition: var(--xh-transition);
}

[data-theme="dark"] .xh-domain-icon-box {
  background: rgba(2, 132, 199, 0.15);
  color: #38bdf8;
  border-color: rgba(2, 132, 199, 0.3);
}

/* Bulk actions toolbar */
.xh-bulk-bar {
  background: var(--xh-bg-subtle);
  border: 1px solid var(--xh-border);
  border-radius: var(--xh-radius-md);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

/* Domain Details Bento Cards */
.xh-domain-kpi {
  background: var(--xh-bg-surface);
  border: 1px solid var(--xh-border);
  border-radius: var(--xh-radius-lg);
  padding: 20px;
  height: 100%;
  box-shadow: var(--xh-shadow-sm);
  transition: var(--xh-transition);
}

.xh-domain-kpi:hover {
  transform: translateY(-2px);
  box-shadow: var(--xh-shadow-hover);
}

.xh-domain-kpi-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.xh-domain-kpi-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--xh-text-muted);
}

.xh-domain-kpi-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--xh-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.xh-domain-kpi-val {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--xh-text-main);
  line-height: 1.2;
  margin-bottom: 4px;
}

.xh-domain-kpi-desc {
  font-size: 0.8rem;
  color: var(--xh-text-muted);
}

/* Domain Navigation Tabs */
.xh-domain-tabs {
  border-bottom: 1px solid var(--xh-border);
  gap: 6px;
  margin-bottom: 24px;
  display: flex;
  flex-wrap: wrap;
}

.xh-domain-tabs .nav-link {
  border: none;
  background: transparent;
  color: var(--xh-text-secondary);
  font-weight: 600;
  font-size: 0.875rem;
  padding: 10px 18px;
  border-radius: var(--xh-radius-pill);
  transition: var(--xh-transition);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.xh-domain-tabs .nav-link:hover {
  background: var(--xh-bg-subtle);
  color: var(--xh-brand);
}

.xh-domain-tabs .nav-link.active {
  background: var(--xh-brand);
  color: #ffffff !important;
  box-shadow: 0 4px 12px var(--xh-brand-ring);
}

/* Nameserver Input Rows */
.xh-ns-row {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  gap: 12px;
}

.xh-ns-badge {
  min-width: 52px;
  padding: 6px 10px;
  font-family: var(--xh-font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--xh-bg-subtle);
  border: 1px solid var(--xh-border);
  border-radius: var(--xh-radius-sm);
  color: var(--xh-text-secondary);
  text-align: center;
}

/* =========================================
   12. ACCOUNT & SECURITY MODULES (PRY-JA003)
   ========================================= */
.xh-account-nav-wrapper {
  background: var(--xh-bg-surface);
  border: 1px solid var(--xh-border);
  border-radius: var(--xh-radius-lg);
  padding: 8px 12px;
  margin-bottom: 24px;
  box-shadow: var(--xh-shadow-sm);
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.xh-account-nav-wrapper::-webkit-scrollbar {
  height: 4px;
}
.xh-account-nav-wrapper::-webkit-scrollbar-thumb {
  background: var(--xh-border);
  border-radius: 9999px;
}

.xh-account-nav-link {
  color: var(--xh-text-secondary);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 8px 16px;
  border-radius: var(--xh-radius-pill);
  transition: var(--xh-transition);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none !important;
  flex-shrink: 0;
}

.xh-account-nav-link:hover {
  background: var(--xh-brand-light);
  color: var(--xh-brand);
}

.xh-account-nav-link.active {
  background: var(--xh-brand) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px var(--xh-brand-ring);
}

/* Card Header Icon Badge */
.xh-card-icon-badge {
  width: 44px;
  height: 44px;
  border-radius: var(--xh-radius-md);
  background: var(--xh-brand-light);
  color: var(--xh-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}

[data-theme="dark"] .xh-card-icon-badge {
  background: rgba(79, 170, 44, 0.15);
  color: #68d33c;
}

/* Security Status Banner */
.xh-security-banner {
  border-radius: var(--xh-radius-lg);
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  border: 1px solid;
  margin-bottom: 24px;
  transition: var(--xh-transition);
}

.xh-security-banner.is-protected {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(79, 170, 44, 0.04) 100%);
  border-color: rgba(16, 185, 129, 0.3);
}

[data-theme="dark"] .xh-security-banner.is-protected {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(79, 170, 44, 0.08) 100%);
  border-color: rgba(16, 185, 129, 0.4);
}

.xh-security-banner.is-warning {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(217, 119, 6, 0.04) 100%);
  border-color: rgba(245, 158, 11, 0.3);
}

[data-theme="dark"] .xh-security-banner.is-warning {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(217, 119, 6, 0.08) 100%);
  border-color: rgba(245, 158, 11, 0.4);
}

.xh-security-shield-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--xh-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  flex-shrink: 0;
}

.is-protected .xh-security-shield-icon {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.is-warning .xh-security-shield-icon {
  background: rgba(245, 158, 11, 0.15);
  color: #d97706;
}

/* Custom switch overrides for theme */
.xh-custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--xh-brand) !important;
  border-color: var(--xh-brand) !important;
}

.xh-custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--xh-brand) !important;
  border-color: var(--xh-brand) !important;
}

/* Email History Row & Components */
.xh-email-row {
  transition: background-color 0.15s ease;
}
.xh-email-row:hover {
  background-color: var(--xh-bg-surface-soft, rgba(79, 170, 44, 0.05)) !important;
}
.xh-email-row:hover .xh-email-subject {
  color: var(--xh-brand, #4faa2c) !important;
}
.xh-email-row:hover .xh-btn-outline-pill {
  background: var(--xh-brand, #4faa2c) !important;
  color: #fff !important;
  border-color: var(--xh-brand, #4faa2c) !important;
}
.xh-email-row:hover .xh-btn-outline-pill i,
.xh-email-row:hover .xh-btn-outline-pill span {
  color: #fff !important;
}
.xh-email-date-cell {
  color: var(--xh-text-muted);
  font-size: 0.825rem;
}
.xh-email-date-text {
  color: var(--xh-text-main);
  font-weight: 500;
}
.xh-email-icon-box {
  width: 36px;
  height: 36px;
  border-radius: var(--xh-radius-md, 8px);
  background: rgba(79, 170, 44, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  color: var(--xh-brand, #4faa2c);
}
.xh-email-subject {
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--xh-text-main);
  transition: color 0.15s ease;
}
.xh-field-help {
  font-size: 0.775rem !important;
  line-height: 1.35 !important;
  color: var(--xh-text-muted) !important;
}

/* ==========================================================================
   PROGRAMA DE AFILIADOS (PRY-JA003)
   ========================================================================== */
.xh-kpi-clicks {
  background: rgba(14, 165, 233, 0.12) !important;
  color: #0284c7 !important;
}
.xh-kpi-signups {
  background: rgba(79, 170, 44, 0.12) !important;
  color: var(--xh-brand, #4faa2c) !important;
}
.xh-kpi-conversion {
  background: rgba(168, 85, 247, 0.12) !important;
  color: #9333ea !important;
}

.xh-referral-input-group .input-group-text {
  border-color: var(--xh-border-color);
  background: var(--xh-bg-surface-soft) !important;
}
.xh-referral-input-group .form-control {
  border-color: var(--xh-border-color);
  color: var(--xh-text-main);
}
.xh-referral-input-group .form-control:focus {
  border-color: var(--xh-brand, #4faa2c);
  box-shadow: 0 0 0 0.2rem rgba(79, 170, 44, 0.15);
}

@media (min-width: 992px) {
  .border-left-lg {
    border-left: 1px solid var(--xh-border-color) !important;
  }
}

/* Landing / Onboarding de Afiliados (affiliatessignup.tpl) */
.xh-affiliate-signup-card {
  border-radius: var(--xh-radius-lg, 12px);
  border: 1px solid var(--xh-border-color);
  background: var(--xh-bg-surface);
  box-shadow: var(--xh-shadow-sm);
  overflow: hidden;
}

.xh-affiliate-hero-header {
  background: linear-gradient(135deg, rgba(6, 8, 64, 0.04) 0%, rgba(79, 170, 44, 0.08) 100%);
  border-bottom: 1px solid var(--xh-border-color);
  padding: 2.5rem 1.5rem;
  text-align: center;
}

.xh-affiliate-hero-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(79, 170, 44, 0.12);
  color: var(--xh-brand, #4faa2c);
  font-size: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  box-shadow: 0 4px 14px rgba(79, 170, 44, 0.15);
}

.xh-benefit-card {
  padding: 1.5rem;
  border-radius: var(--xh-radius-md, 8px);
  background: var(--xh-bg-surface-soft);
  border: 1px solid var(--xh-border-color);
  height: 100%;
  transition: all 0.2s ease;
}

.xh-benefit-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--xh-shadow-sm);
  border-color: rgba(79, 170, 44, 0.3);
}

.xh-benefit-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--xh-radius-md, 8px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.xh-benefit-icon.icon-money {
  background: rgba(79, 170, 44, 0.12);
  color: var(--xh-brand, #4faa2c);
}
.xh-benefit-icon.icon-dashboard {
  background: rgba(14, 165, 233, 0.12);
  color: #0284c7;
}
.xh-benefit-icon.icon-payout {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
}

/* Dark Mode para Afiliados */
[data-theme="dark"] .xh-affiliate-hero-header {
  background: linear-gradient(135deg, rgba(6, 8, 64, 0.4) 0%, rgba(79, 170, 44, 0.15) 100%);
}

[data-theme="dark"] .xh-kpi-clicks {
  background: rgba(14, 165, 233, 0.2) !important;
  color: #38bdf8 !important;
}
[data-theme="dark"] .xh-kpi-signups {
  background: rgba(79, 170, 44, 0.2) !important;
  color: #86efac !important;
}
[data-theme="dark"] .xh-kpi-conversion {
  background: rgba(168, 85, 247, 0.2) !important;
  color: #c084fc !important;
}

[data-theme="dark"] .xh-referral-input-group .input-group-text {
  background: var(--xh-bg-surface-soft) !important;
  border-color: var(--xh-border-color) !important;
}
[data-theme="dark"] .xh-referral-input-group .form-control {
  background: var(--xh-bg-surface-soft) !important;
  border-color: var(--xh-border-color) !important;
  color: var(--xh-text-main) !important;
}

/* =========================================
   14. CENTRO DE AYUDA, RED Y CONTACTO (FASE 11)
   ========================================= */

/* Knowledgebase Hero */
.xh-kb-hero {
  border-radius: var(--xh-radius-lg, 12px);
  background: linear-gradient(135deg, rgba(6, 8, 64, 0.03) 0%, rgba(79, 170, 44, 0.08) 100%);
  border: 1px solid var(--xh-border-color);
  box-shadow: var(--xh-shadow-sm);
  overflow: hidden;
}

.xh-kb-search-form {
  max-width: 680px;
}

.xh-search-input-group {
  background: var(--xh-bg-surface);
  border: 2px solid var(--xh-border-color);
  border-radius: var(--xh-radius-pill, 9999px);
  padding: 4px;
  box-shadow: var(--xh-shadow-sm);
  transition: all 0.25s ease;
}

.xh-search-input-group:focus-within {
  border-color: var(--xh-brand, #4faa2c);
  box-shadow: 0 0 0 3px rgba(79, 170, 44, 0.15);
}

.xh-search-input-group .form-control:focus {
  outline: none !important;
  box-shadow: none !important;
}

.xh-chip-filter {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--xh-radius-pill, 9999px);
  font-size: 0.775rem;
  font-weight: 500;
  background: var(--xh-bg-surface);
  border: 1px solid var(--xh-border-color);
  color: var(--xh-text-secondary);
  text-decoration: none !important;
  transition: all 0.2s ease;
}

.xh-chip-filter:hover {
  background: var(--xh-brand-light, #eef9eb);
  border-color: var(--xh-brand, #4faa2c);
  color: var(--xh-brand, #4faa2c);
  transform: translateY(-1px);
}

/* Categorías Bento Grid */
.xh-kb-cat-card {
  transition: all 0.25s ease;
  border: 1px solid var(--xh-border-color);
  background: var(--xh-bg-surface);
}

.xh-kb-cat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--xh-shadow-hover, 0 10px 25px -5px rgba(0, 0, 0, 0.08));
  border-color: rgba(79, 170, 44, 0.4);
}

.xh-kb-cat-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--xh-radius-md, 8px);
  background: rgba(79, 170, 44, 0.12);
  color: var(--xh-brand, #4faa2c);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.xh-kb-cat-title {
  transition: color 0.2s ease;
}

.xh-kb-cat-card:hover .xh-kb-cat-title {
  color: var(--xh-brand, #4faa2c) !important;
}

/* Filas de Artículos */
.xh-kb-article-row {
  transition: all 0.2s ease;
  background: transparent;
}

.xh-kb-article-row:hover {
  background: var(--xh-bg-surface-soft, rgba(0, 0, 0, 0.02));
  padding-left: 1.25rem !important;
}

.xh-kb-article-row:hover .xh-kb-article-title {
  color: var(--xh-brand, #4faa2c) !important;
}

.xh-kb-article-row:last-child {
  border-bottom: none !important;
}

/* Lectura de Artículo */
.xh-kb-reading-content {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--xh-text-main);
}

.xh-kb-reading-content h1,
.xh-kb-reading-content h2,
.xh-kb-reading-content h3 {
  color: var(--xh-text-main);
  font-weight: 700;
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
}

.xh-kb-reading-content p {
  margin-bottom: 1.25rem;
}

.xh-kb-reading-content pre,
.xh-kb-reading-content code {
  font-family: var(--xh-font-mono, monospace);
  background: var(--xh-bg-subtle, #f1f5f9);
  border-radius: var(--xh-radius-sm, 6px);
  padding: 0.2rem 0.4rem;
  font-size: 0.875em;
  color: var(--xh-text-main);
}

.xh-kb-reading-content pre {
  padding: 1rem;
  overflow-x: auto;
}

/* Downloads List */
.xh-download-row {
  transition: all 0.2s ease;
}

.xh-download-row:hover {
  background: var(--xh-bg-surface-soft, rgba(0, 0, 0, 0.02));
}

.xh-download-row:last-child {
  border-bottom: none !important;
}

.xh-download-file-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--xh-radius-md, 8px);
  background: rgba(14, 165, 233, 0.12);
  color: #0284c7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

/* Server Status */
.xh-status-hero-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Contact Channels */
.xh-channel-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--xh-radius-md, 8px);
  background: var(--xh-bg-surface-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Announcements */
.xh-announcement-card {
  transition: all 0.25s ease;
}

.xh-announcement-card:hover {
  border-color: rgba(79, 170, 44, 0.35);
  box-shadow: var(--xh-shadow-sm);
  transform: translateY(-2px);
}

/* Dark Mode Overrides para Fase 11 */
[data-theme="dark"] .xh-kb-hero {
  background: linear-gradient(135deg, rgba(6, 8, 64, 0.4) 0%, rgba(79, 170, 44, 0.12) 100%);
}

[data-theme="dark"] .xh-search-input-group {
  background: var(--xh-bg-surface-elevated, #1e293b);
  border-color: var(--xh-border);
}

[data-theme="dark"] .xh-search-input-group .form-control {
  color: var(--xh-text-main) !important;
}

[data-theme="dark"] .xh-chip-filter {
  background: var(--xh-bg-surface-elevated, #1e293b);
  border-color: var(--xh-border);
  color: var(--xh-text-secondary);
}

[data-theme="dark"] .xh-chip-filter:hover {
  background: rgba(79, 170, 44, 0.2);
  color: #86efac;
  border-color: var(--xh-brand);
}

[data-theme="dark"] .xh-kb-cat-card {
  background: var(--xh-bg-surface, #111827);
  border-color: var(--xh-border);
}

[data-theme="dark"] .xh-kb-article-row:hover,
[data-theme="dark"] .xh-download-row:hover {
  background: var(--xh-bg-surface-elevated, #1e293b);
}

[data-theme="dark"] .xh-kb-reading-content pre,
[data-theme="dark"] .xh-kb-reading-content code {
  background: #0f172a;
  color: #e2e8f0;
}

/* Server Status Utilities & External Status Link */
.border-left-success {
  border-left: 4px solid var(--xh-brand, #4faa2c) !important;
}

.border-left-warning {
  border-left: 4px solid var(--xh-warning-text, #d97706) !important;
}

html body .xh-footer .xh-footer-links {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

html body .xh-footer a.xh-footer-link-status {
  color: var(--xh-brand, #4faa2c) !important;
  font-weight: 700 !important;
}

html body .xh-footer a.xh-footer-link-status:hover {
  color: var(--xh-brand-hover, #3d8822) !important;
}

[data-theme="dark"] html body .xh-footer a.xh-footer-link-status {
  color: #86efac !important;
}

[data-theme="dark"] html body .xh-footer a.xh-footer-link-status:hover {
  color: #bbf7d0 !important;
}

/* =========================================
   19. AUTHENTICATION & ONBOARDING (LOGIN / REGISTER / PWRESET / 2FA)
   ========================================= */

/* Fullscreen Auth Wrapper (Login & Standalone Auth) */
.xh-auth-fullscreen-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--xh-bg-app);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  overflow-y: auto;
  padding: 1.5rem;
  transition: background-color var(--xh-transition);
}

/* Split Card Layout */
.xh-auth-card-split {
  display: flex;
  width: 100%;
  max-width: 1120px;
  margin: auto;
  background: var(--xh-bg-surface);
  border-radius: var(--xh-radius-xl, 18px);
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.15), 0 0 0 1px var(--xh-border);
  overflow: hidden;
  min-height: 620px;
  transition: var(--xh-transition);
  position: relative;
}

/* Auth Top Actions Toolbar (Back to site + Theme toggle) */
.xh-auth-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.75rem;
  width: 100%;
}

.xh-auth-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--xh-text-muted);
  text-decoration: none !important;
  transition: var(--xh-transition);
}

.xh-auth-back-link:hover {
  color: var(--xh-brand) !important;
}

.xh-auth-theme-btn {
  background: var(--xh-bg-subtle);
  border: 1px solid var(--xh-border);
  color: var(--xh-text-main);
  width: 36px;
  height: 36px;
  border-radius: var(--xh-radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--xh-transition);
}

.xh-auth-theme-btn:hover {
  background: var(--xh-brand-light);
  color: var(--xh-brand);
  border-color: var(--xh-brand);
}

/* Form Column */
.xh-auth-form-col {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2.5rem;
  background: var(--xh-bg-surface);
  width: 100%;
}

.xh-auth-form-container {
  width: 100%;
  max-width: 410px;
  margin: 0 auto;
}

.xh-auth-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--xh-text-main);
  letter-spacing: -0.02em;
  margin-bottom: 0.35rem;
}

.xh-auth-subtitle {
  font-size: 0.9rem;
  color: var(--xh-text-muted);
  margin-bottom: 1.5rem;
}

/* Right Column (Hero / Showcase) */
.xh-auth-hero-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 3.5rem 3rem;
  background: linear-gradient(145deg, #060840 0%, #0c1258 55%, #08291a 100%);
  color: #ffffff !important;
  position: relative;
  overflow: hidden;
}

.xh-auth-hero-col::before {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79, 170, 44, 0.25) 0%, transparent 70%);
  pointer-events: none;
}

.xh-auth-hero-col::after {
  content: '';
  position: absolute;
  bottom: -60px;
  left: -60px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(2, 132, 199, 0.2) 0%, transparent 70%);
  pointer-events: none;
}

.xh-auth-hero-content {
  position: relative;
  z-index: 2;
}

.xh-auth-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--xh-radius-pill);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 0.75rem;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 1.25rem;
  backdrop-filter: blur(8px);
}

.xh-auth-hero-title {
  font-size: 1.85rem;
  font-weight: 800;
  color: #ffffff !important;
  line-height: 1.25;
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
}

.xh-auth-hero-desc {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85) !important;
  line-height: 1.5;
  margin-bottom: 2rem;
}

.xh-auth-showcase-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.xh-auth-showcase-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: var(--xh-radius-lg);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  transition: var(--xh-transition);
}

.xh-auth-showcase-item:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(79, 170, 44, 0.4);
  transform: translateY(-2px);
}

.xh-auth-showcase-icon {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: var(--xh-radius-md);
  background: rgba(79, 170, 44, 0.25);
  color: #86efac;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.xh-auth-showcase-heading {
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff !important;
  margin-bottom: 0.2rem;
}

.xh-auth-showcase-text {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.75) !important;
  margin-bottom: 0;
  line-height: 1.35;
}

.xh-auth-hero-footer {
  position: relative;
  z-index: 2;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
}

.xh-auth-hero-footer a {
  color: #86efac !important;
  text-decoration: none;
  font-weight: 600;
}

.xh-auth-hero-footer a:hover {
  text-decoration: underline;
}

/* Modern Input Groups & Registration Overrides (Neutralizing legacy theme.css) */
#registration .xh-input-group,
.xh-input-group {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: 100% !important;
  position: relative !important;
}

#registration .xh-input-group .input-group-prepend,
.xh-input-group .input-group-prepend {
  display: flex !important;
  flex-shrink: 0 !important;
  margin-right: -1px !important;
  z-index: 2 !important;
}

#registration .xh-input-group .input-group-prepend .input-group-text,
.xh-input-group .input-group-prepend .input-group-text,
.xh-input-group-prepend {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--xh-bg-subtle) !important;
  border: 1px solid var(--xh-border) !important;
  border-right: none !important;
  color: var(--xh-text-muted) !important;
  border-top-left-radius: var(--xh-radius-md) !important;
  border-bottom-left-radius: var(--xh-radius-md) !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0.65rem 1rem !important;
  font-size: 0.95rem !important;
  min-width: 44px !important;
  height: 100% !important;
  line-height: 1 !important;
}

#registration .xh-input-group .form-control,
#registration .xh-input-group .field,
.xh-input-group .form-control,
.xh-input-group .field {
  position: relative !important;
  flex: 1 1 auto !important;
  width: 1% !important;
  min-width: 0 !important;
  display: block !important;
  background: var(--xh-bg-surface) !important;
  border: 1px solid var(--xh-border) !important;
  color: var(--xh-text-main) !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: var(--xh-radius-md) !important;
  border-bottom-right-radius: var(--xh-radius-md) !important;
  padding: 0.65rem 1rem !important;
  font-size: 0.95rem !important;
  font-family: var(--xh-font-sans) !important;
  transition: var(--xh-transition) !important;
  height: calc(1.5em + 1.3rem + 2px) !important;
  margin-bottom: 0 !important;
}

#registration .xh-input-group .form-control:focus,
#registration .xh-input-group .field:focus,
.xh-input-group .form-control:focus,
.xh-input-group .field:focus {
  border-color: var(--xh-brand) !important;
  box-shadow: 0 0 0 3px var(--xh-brand-ring) !important;
  outline: none !important;
  z-index: 3 !important;
}

#registration .xh-input-group.has-append .form-control,
#registration .xh-input-group.has-append .field,
.xh-input-group.has-append .form-control,
.xh-input-group.has-append .field {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: none !important;
}

#registration .xh-input-group .input-group-append,
.xh-input-group .input-group-append {
  display: flex !important;
  flex-shrink: 0 !important;
  margin-left: -1px !important;
  z-index: 2 !important;
}

#registration .xh-input-group .input-group-append .input-group-text,
#registration .xh-input-group .input-group-append .btn,
.xh-input-group .input-group-append .input-group-text,
.xh-input-group .input-group-append .btn,
.xh-input-group .input-group-append .btn-reveal-pw,
.xh-btn-reveal-pw {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--xh-bg-subtle) !important;
  border: 1px solid var(--xh-border) !important;
  border-left: none !important;
  color: var(--xh-text-muted) !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: var(--xh-radius-md) !important;
  border-bottom-right-radius: var(--xh-radius-md) !important;
  padding: 0 1rem !important;
  cursor: pointer !important;
  transition: var(--xh-transition) !important;
  height: 100% !important;
}

.xh-btn-reveal-pw:hover,
.xh-input-group .input-group-append .btn-reveal-pw:hover {
  color: var(--xh-brand) !important;
  background: var(--xh-brand-light) !important;
}

/* Standalone inputs inside #registration (like phone with intl-tel-input) */
#registration .field:not(.xh-input-group *),
#registration .form-control:not(.xh-input-group *) {
  height: calc(1.5em + 1.3rem + 2px) !important;
  border-radius: var(--xh-radius-md) !important;
  border: 1px solid var(--xh-border) !important;
  background: var(--xh-bg-surface) !important;
  color: var(--xh-text-main) !important;
  font-family: var(--xh-font-sans) !important;
  font-size: 0.95rem !important;
  padding: 0.65rem 1rem !important;
  width: 100% !important;
  display: block !important;
  margin-bottom: 0 !important;
  box-sizing: border-box !important;
}

#registration .field:not(.xh-input-group *):focus,
#registration .form-control:not(.xh-input-group *):focus {
  border-color: var(--xh-brand) !important;
  box-shadow: 0 0 0 3px var(--xh-brand-ring) !important;
  outline: none !important;
}

/* intl-tel-input integration for registration */
#registration .iti {
  width: 100% !important;
  display: block !important;
}

#registration .iti .form-control,
#registration .iti .field {
  padding-left: 54px !important;
  height: calc(1.5em + 1.3rem + 2px) !important;
  border-radius: var(--xh-radius-md) !important;
}

/* Standalone Auth Card (Password Reset, 2FA, Invites) */
.xh-auth-card-single {
  max-width: 540px;
  margin: 3rem auto;
  background: var(--xh-bg-surface);
  border: 1px solid var(--xh-border);
  border-radius: var(--xh-radius-xl, 18px);
  box-shadow: var(--xh-shadow-dropdown);
  padding: 2.5rem;
  transition: var(--xh-transition);
}

.xh-auth-icon-header {
  width: 56px;
  height: 56px;
  border-radius: var(--xh-radius-lg);
  background: var(--xh-brand-light);
  color: var(--xh-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin: 0 auto 1.25rem;
}

/* Onboarding Distraction-Free Header & Footer */
.xh-navbar-onboarding {
  background-color: var(--xh-bg-surface);
  border-bottom: 1px solid var(--xh-border);
  padding: 14px 0;
  box-shadow: var(--xh-shadow-sm);
  position: relative;
  z-index: 1020;
}

.xh-main-section-onboarding {
  padding-top: 1.5rem !important;
}

.xh-footer-onboarding {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  background-color: var(--xh-navy, #060840) !important;
  padding: 28px 0 60px;
  margin-top: 2rem;
  color: rgba(255, 255, 255, 0.75) !important;
}

.xh-footer-onboarding .text-muted,
.xh-footer-onboarding a.text-muted,
.xh-footer-onboarding span.text-muted {
  color: rgba(255, 255, 255, 0.65) !important;
}

.xh-footer-onboarding a.text-muted:hover {
  color: #86efac !important;
}

/* Registration Form Bento Layout */
.xh-register-container {
  max-width: 1040px;
  margin: 1rem auto 3rem;
}

.xh-register-hero {
  background: var(--xh-bg-surface);
  border: 1px solid var(--xh-border);
  border-radius: var(--xh-radius-xl);
  padding: 2rem 2.5rem;
  margin-bottom: 2rem;
  box-shadow: var(--xh-shadow-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.xh-register-card {
  background: var(--xh-bg-surface);
  border: 1px solid var(--xh-border);
  border-radius: var(--xh-radius-lg);
  padding: 2rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--xh-shadow-card);
  transition: var(--xh-transition);
}

.xh-register-card-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--xh-border-light);
}

.xh-register-card-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--xh-radius-md);
  background: var(--xh-brand-light);
  color: var(--xh-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.xh-register-card-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--xh-text-main);
  margin-bottom: 0;
}

.xh-register-card-subtitle {
  font-size: 0.825rem;
  color: var(--xh-text-muted);
}

/* Password Strength Meter */
.xh-password-meter {
  margin-top: 0.5rem;
}

.xh-password-meter .progress {
  height: 8px;
  border-radius: var(--xh-radius-pill);
  background: var(--xh-border);
  overflow: hidden;
  margin-bottom: 0.35rem;
}

.xh-password-meter-text {
  font-size: 0.775rem;
  color: var(--xh-text-muted);
  text-align: right;
  margin-bottom: 0;
}

/* Dark mode tweaks for Auth */
[data-theme="dark"] .xh-auth-theme-btn {
  background: #1e293b;
  border-color: #334155;
  color: #f8fafc;
}

[data-theme="dark"] .xh-auth-theme-btn:hover {
  background: rgba(79, 170, 44, 0.2);
  color: #86efac;
}

[data-theme="dark"] .xh-auth-card-single,
[data-theme="dark"] .xh-register-hero,
[data-theme="dark"] .xh-register-card {
  background: var(--xh-bg-surface);
  border-color: var(--xh-border);
}

/* ==========================================================================
   HOMOGENEOUS AUTH SUBMIT BUTTONS (LOGIN, REGISTRO, PASSWORD RESET, 2FA)
   ========================================================================== */
.xh-btn-auth-submit {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 1.75rem !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  border-radius: var(--xh-radius-pill) !important;
  background: var(--xh-brand-gradient) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(79, 170, 44, 0.3) !important;
  transition: var(--xh-transition) !important;
  cursor: pointer;
  text-decoration: none !important;
}

.xh-btn-auth-submit:hover,
.xh-btn-auth-submit:focus {
  background: var(--xh-brand-gradient) !important;
  filter: brightness(1.06) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(79, 170, 44, 0.42) !important;
  color: #ffffff !important;
}

.xh-btn-auth-submit:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(79, 170, 44, 0.3) !important;
}

/* Ancho completo (100%) en tarjetas de Login, Recuperación y 2FA */
.xh-btn-auth-submit.xh-btn-block {
  width: 100% !important;
}

/* Centrado prominente en formulario de Registro (Bento Grid) */
.xh-btn-auth-submit.xh-btn-register {
  display: inline-flex !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 400px !important;
  margin: 0 auto !important;
}

/* ==========================================================================
   20. CICLO DE VIDA DE SERVICIOS: UPGRADES, DOWNGRADES Y CANCELACIONES (PRY-JA003)
   ========================================================================== */

/* Fondos sutiles (Soft Badges & Containers) */
.bg-primary-soft,
.badge-primary-soft,
.xh-bg-brand-soft {
  background-color: rgba(79, 170, 44, 0.1) !important;
  color: var(--xh-brand, #4FAA2C) !important;
}
.bg-danger-soft {
  background-color: rgba(239, 68, 68, 0.1) !important;
}
.bg-success-soft {
  background-color: rgba(34, 197, 94, 0.1) !important;
}
.bg-warning-soft {
  background-color: rgba(245, 158, 11, 0.1) !important;
}
.bg-info-soft {
  background-color: rgba(59, 130, 246, 0.1) !important;
}
.bg-secondary-soft {
  background-color: rgba(148, 163, 184, 0.12) !important;
}
.bg-light-soft {
  background-color: var(--xh-bg-subtle, #f8fafc) !important;
}

.border-primary-light {
  border-color: rgba(79, 170, 44, 0.25) !important;
}
.border-bottom-dashed {
  border-bottom: 1px dashed var(--xh-border, #e2e8f0) !important;
}
.border-top-2 {
  border-top: 2px solid var(--xh-border, #e2e8f0) !important;
}

/* Service Icon Box */
.xh-service-icon-box {
  transition: var(--xh-transition);
}

/* Cancel Request Specifics */
.xh-btn-danger {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  border: none !important;
  color: #ffffff !important;
  border-radius: var(--xh-radius-pill) !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25) !important;
  transition: var(--xh-transition) !important;
}
.xh-btn-danger:hover,
.xh-btn-danger:focus {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.35) !important;
}

/* Upgrade Pricing Cards */
.xh-upgrade-grid {
  margin-left: -10px;
  margin-right: -10px;
}
.xh-upgrade-grid > [class*="col-"] {
  padding-left: 10px;
  padding-right: 10px;
}
.xh-plan-card {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  border-radius: var(--xh-radius-lg) !important;
}
.xh-plan-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--xh-shadow-lg) !important;
  border-color: var(--xh-brand, #4faa2c) !important;
}
.xh-plan-desc {
  line-height: 1.6;
}
.xh-plan-features li:last-child {
  border-bottom: none !important;
}

/* Upgrade and Summary Tables */
.xh-upgrade-table th,
.xh-summary-table th {
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--xh-text-muted);
}
.xh-upgrade-table td,
.xh-summary-table td {
  font-size: 0.875rem;
  border-color: var(--xh-border);
}

/* Custom Select & Textarea tweaks */
.xh-custom-select {
  height: 42px !important;
  border-radius: var(--xh-radius-md) !important;
  border-color: var(--xh-border) !important;
  color: var(--xh-text-main) !important;
  background-color: var(--xh-bg-surface) !important;
  font-size: 0.85rem !important;
  line-height: 1.4 !important;
  padding: 0.375rem 2rem 0.375rem 0.75rem !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  max-width: 100% !important;
}
.xh-custom-select:focus {
  border-color: var(--xh-brand) !important;
  box-shadow: 0 0 0 3px rgba(79, 170, 44, 0.15) !important;
}

.xh-plan-card .xh-custom-select {
  font-size: 0.825rem !important;
  letter-spacing: -0.01em;
}
.xh-plan-card .xh-custom-select option {
  font-size: 0.85rem;
  padding: 6px 10px;
}

.xh-textarea {
  border-radius: var(--xh-radius-md) !important;
  border-color: var(--xh-border) !important;
  color: var(--xh-text-main) !important;
  background-color: var(--xh-bg-surface) !important;
}
.xh-textarea:focus {
  border-color: var(--xh-brand) !important;
  box-shadow: 0 0 0 3px rgba(79, 170, 44, 0.15) !important;
}

/* Dark Mode Overrides for Section 20 */
[data-theme="dark"] .bg-light-soft {
  background-color: #0f172a !important;
}
[data-theme="dark"] .xh-plan-card .border-top {
  border-top-color: #334155 !important;
  background-color: var(--xh-bg-surface) !important;
}
[data-theme="dark"] .xh-plan-card .border-bottom {
  border-bottom-color: #334155 !important;
  background-color: #0f172a !important;
}
[data-theme="dark"] .border-primary-light {
  border-color: rgba(79, 170, 44, 0.35) !important;
}
[data-theme="dark"] .border-bottom-dashed {
  border-bottom-color: #334155 !important;
}
[data-theme="dark"] .border-top-2 {
  border-top-color: #334155 !important;
}
[data-theme="dark"] .xh-upgrade-table th,
[data-theme="dark"] .xh-summary-table th {
  background-color: #0f172a !important;
  color: #94a3b8 !important;
}
[data-theme="dark"] .xh-summary-table .bg-light-soft {
  background-color: #1e293b !important;
}

/* ==========================================================================
   21. PÁGINAS DEL SISTEMA, ERRORES Y PASARELAS
   ========================================================================== */
.xh-error-page-wrapper,
.xh-access-denied-wrapper,
.xh-banned-wrapper,
.xh-download-denied-wrapper,
.xh-forward-payment-wrapper,
.xh-3dsecure-wrapper {
  min-height: 55vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.max-w-500 {
  max-width: 500px;
}
.max-w-600 {
  max-width: 600px;
}

[data-theme="dark"] .xh-error-page-wrapper .bg-light,
[data-theme="dark"] .xh-access-denied-wrapper .bg-light,
[data-theme="dark"] .xh-banned-wrapper .bg-light,
[data-theme="dark"] .xh-download-denied-wrapper .bg-light {
  background-color: #0f172a !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] .xh-error-page-wrapper .text-dark,
[data-theme="dark"] .xh-access-denied-wrapper .text-dark,
[data-theme="dark"] .xh-banned-wrapper .text-dark,
[data-theme="dark"] .xh-download-denied-wrapper .text-dark,
[data-theme="dark"] .xh-forward-payment-wrapper .text-dark {
  color: #f8fafc !important;
}

/* ==========================================================================
   22. EXPERIENCIA MULTI-CUENTA Y VERIFICACIÓN DE USUARIO
   ========================================================================== */
.xh-switch-account-wrapper,
.xh-switch-account-forced-wrapper,
.xh-verify-email-wrapper {
  min-height: 55vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.xh-account-item {
  border: 1px solid var(--xh-border) !important;
  background-color: var(--xh-bg-surface) !important;
  transition: var(--xh-transition);
}
.xh-account-item:hover:not(.disabled) {
  border-color: var(--xh-brand) !important;
  transform: translateY(-2px);
  box-shadow: var(--xh-shadow-md);
}

.xh-account-avatar {
  width: 44px;
  height: 44px;
  min-width: 44px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

/* Visor Popup de Correos Transaccionales (viewemail.tpl) */
body.xh-popup-email-body {
  background-color: var(--xh-bg-app, #f8fafc) !important;
  padding: 16px;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.xh-email-preview-card {
  display: flex;
  flex-direction: column;
  flex: 1;
  background: var(--xh-bg-surface, #ffffff);
  border-radius: var(--xh-radius-lg, 16px);
  border: 1px solid var(--xh-border, #e2e8f0);
  box-shadow: var(--xh-shadow-md);
  overflow: hidden;
}

.xh-email-iframe-container {
  flex: 1;
  min-height: 460px;
  padding: 12px;
  background: #ffffff;
}

.xh-email-iframe {
  width: 100%;
  height: 100%;
  min-height: 460px;
  border: 1px solid var(--xh-border-light, #f1f5f9);
  border-radius: 8px;
  background: #ffffff;
}

.xh-email-header-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  font-size: 1rem;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.xh-email-badge-label {
  letter-spacing: 0.05em;
}

[data-theme="dark"] .xh-switch-account-wrapper .card-header,
[data-theme="dark"] .xh-switch-account-wrapper .card-footer,
[data-theme="dark"] .xh-switch-account-forced-wrapper .bg-light,
[data-theme="dark"] .xh-popup-email-body .bg-light,
[data-theme="dark"] .xh-popup-email-body .bg-white {
  background-color: #0f172a !important;
  border-color: #334155 !important;
}

[data-theme="dark"] .xh-account-item {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}
[data-theme="dark"] .xh-account-item:hover:not(.disabled) {
  border-color: var(--xh-brand) !important;
  background-color: #0f172a !important;
}
[data-theme="dark"] .xh-account-item.disabled {
  background-color: #0b0f19 !important;
}
[data-theme="dark"] .xh-switch-account-wrapper .text-dark,
[data-theme="dark"] .xh-switch-account-forced-wrapper .text-dark,
[data-theme="dark"] .xh-verify-email-wrapper .text-dark,
[data-theme="dark"] .xh-popup-email-body .text-dark {
  color: #f8fafc !important;
}

[data-theme="dark"] .xh-email-preview-card {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}

[data-theme="dark"] .xh-email-iframe-container {
  background-color: #0f172a !important;
}

[data-theme="dark"] .xh-email-iframe {
  border-color: #334155 !important;
}

/* ==========================================================================
   23. ENCUESTA DE CALIDAD DE SOPORTE CSAT / NPS (ticketfeedback.tpl)
   ========================================================================== */
.xh-feedback-wrapper {
  max-width: 860px;
  margin: 0 auto;
}

.xh-feedback-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  background-color: var(--xh-bg-surface-alt, #f8fafc);
  border: 1px solid var(--xh-border, #e2e8f0);
  border-radius: var(--xh-radius-md, 12px);
  padding: 16px;
}

.xh-feedback-meta-item {
  display: flex;
  flex-direction: column;
}

.xh-feedback-meta-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--xh-text-muted, #64748b);
  margin-bottom: 2px;
}

.xh-feedback-meta-value {
  font-size: 0.925rem;
  font-weight: 700;
  color: var(--xh-text-main, #0f172a);
}

.xh-staff-feedback-card {
  background-color: var(--xh-bg-surface, #ffffff);
  border: 1px solid var(--xh-border, #e2e8f0);
  border-radius: var(--xh-radius-lg, 16px);
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: var(--xh-shadow-sm);
  transition: var(--xh-transition);
}

.xh-staff-avatar {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 50%;
  background: var(--xh-brand-light, rgba(79, 170, 44, 0.12));
  color: var(--xh-brand, #4faa2c);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.25rem;
}

/* Selector de escala NPS 1 al 10 interactivo */
.xh-nps-scale-wrapper {
  margin: 20px 0;
}

.xh-nps-scale-list {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
}

.xh-nps-pill-item {
  flex: 1 1 calc(10% - 6px);
  min-width: 44px;
  position: relative;
  text-align: center;
}

.xh-nps-pill-item input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin: 0;
  cursor: pointer;
  z-index: 2;
}

.xh-nps-pill-label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  border-radius: var(--xh-radius-md, 10px);
  border: 1.5px solid var(--xh-border, #e2e8f0);
  background-color: var(--xh-bg-surface, #ffffff);
  color: var(--xh-text-main, #1e293b);
  font-weight: 700;
  font-size: 1.05rem;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  user-select: none;
}

.xh-nps-pill-item:hover .xh-nps-pill-label {
  border-color: var(--xh-brand, #4faa2c);
  color: var(--xh-brand, #4faa2c);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(79, 170, 44, 0.15);
}

.xh-nps-pill-item input[type="radio"]:checked + .xh-nps-pill-label,
.xh-nps-pill-item.active .xh-nps-pill-label {
  background-color: var(--xh-brand, #4faa2c) !important;
  border-color: var(--xh-brand, #4faa2c) !important;
  color: #ffffff !important;
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 4px 14px rgba(79, 170, 44, 0.35);
}

.xh-nps-legend {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--xh-text-muted, #64748b);
  margin-top: 8px;
  padding: 0 4px;
}

/* Dark mode para CSAT */
[data-theme="dark"] .xh-feedback-meta-grid {
  background-color: #0f172a !important;
  border-color: #334155 !important;
}

[data-theme="dark"] .xh-feedback-meta-label {
  color: #94a3b8 !important;
}

[data-theme="dark"] .xh-feedback-meta-value {
  color: #f8fafc !important;
}

[data-theme="dark"] .xh-staff-feedback-card {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}

[data-theme="dark"] .xh-staff-avatar {
  background: rgba(79, 170, 44, 0.2) !important;
  color: #4faa2c !important;
}

[data-theme="dark"] .xh-nps-pill-label {
  background-color: #0f172a !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}

[data-theme="dark"] .xh-nps-pill-item:hover .xh-nps-pill-label {
  border-color: var(--xh-brand, #4faa2c) !important;
  color: #4faa2c !important;
}

[data-theme="dark"] .xh-nps-legend {
  color: #94a3b8 !important;
}

/* ==========================================================================
   24. REFACTORIZACIÓN ATÓMICA Y UTILIDADES (ZERO HARDCODING)
   ========================================================================== */

/* Botones Atómicos y Acciones de Modal */
.xh-btn-modal-action {
  border-radius: var(--xh-radius-pill) !important;
  padding: 8px 24px !important;
  font-weight: 600 !important;
}

.xh-btn-modal-action.btn-warning {
  color: #212529 !important;
}

.xh-btn-xs {
  font-size: 0.775rem !important;
}

.xh-btn-lg-h48 {
  height: 48px !important;
}

.xh-btn-featured-pay {
  padding: 10px 16px !important;
  border-radius: var(--xh-radius-sm) !important;
}

.xh-btn-featured-secondary {
  border-radius: var(--xh-radius-sm) !important;
}

.xh-btn-featured-sm {
  border-radius: var(--xh-radius-sm) !important;
}

.xh-featured-amount {
  font-size: 1.85rem !important;
  letter-spacing: -0.02em !important;
}

.xh-text-lg {
  font-size: 1.5rem !important;
}

.xh-card-success-border {
  border-left: 4px solid var(--xh-success-text) !important;
}

/* Badges y Píldoras */
.xh-badge-pill {
  border-radius: var(--xh-radius-pill) !important;
}

.xh-badge-pill-xs {
  border-radius: var(--xh-radius-pill) !important;
  font-size: 0.72rem !important;
}

/* Avatares y Cajas de Icono */
.xh-user-avatar-brand {
  width: 38px !important;
  height: 38px !important;
  background: var(--xh-brand-light) !important;
  color: var(--xh-brand) !important;
  font-size: 0.9rem !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.xh-user-avatar-warning {
  width: 38px !important;
  height: 38px !important;
  background: var(--xh-warning-bg, #fff3cd) !important;
  color: var(--xh-warning-text, #856404) !important;
  font-size: 0.9rem !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.xh-payment-icon-box {
  width: 42px !important;
  height: 32px !important;
  background: var(--xh-bg-surface) !important;
  border: 1px solid var(--xh-border) !important;
  font-size: 1.2rem !important;
  color: var(--xh-brand-dark, var(--xh-brand)) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--xh-radius-sm) !important;
}

.xh-affiliate-icon-box {
  border-radius: var(--xh-radius-md) !important;
  background: rgba(79, 170, 44, 0.12) !important;
  color: var(--xh-brand, #2e7d32) !important;
  font-size: 1.5rem !important;
}

.xh-icon-box-48 {
  width: 48px !important;
  height: 48px !important;
}

/* Tarjetas y Contenedores */
.xh-modal-content-rounded {
  border: 1px solid var(--xh-border) !important;
  border-radius: var(--xh-radius-lg) !important;
  overflow: hidden !important;
}

.xh-clickable-surface {
  background: var(--xh-bg-surface) !important;
  cursor: pointer !important;
}

.xh-dashed-card {
  border: 1px dashed var(--xh-border) !important;
  background: var(--xh-bg-surface) !important;
}

.xh-surface-soft-box {
  background-color: var(--xh-bg-surface-soft, var(--xh-bg-subtle)) !important;
}

.xh-affiliate-share-card {
  background: rgba(79, 170, 44, 0.06) !important;
  border-color: rgba(79, 170, 44, 0.25) !important;
}

.xh-box-subtle {
  background: var(--xh-bg-subtle) !important;
  border: 1px solid var(--xh-border) !important;
}

.xh-box-surface {
  background: var(--xh-bg-surface) !important;
  border: 1px solid var(--xh-border) !important;
}

.xh-box-danger {
  background: var(--xh-danger-bg) !important;
  color: var(--xh-danger-text) !important;
}

.xh-breadcrumb-nav {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 12px 0 0 !important;
  margin: 0 !important;
}

.xh-dropdown-menu-wide {
  min-width: 250px !important;
  z-index: 1050 !important;
}

.xh-dropdown-header-soft {
  background: var(--xh-bg-surface-soft, var(--xh-bg-subtle)) !important;
}

/* Tablas y Columnas */
.xh-col-check {
  width: 44px !important;
  max-width: 44px !important;
}

.xh-col-actions {
  width: 90px !important;
  max-width: 100px !important;
}

.xh-col-w30 {
  width: 30% !important;
}

.xh-col-w35 {
  width: 35% !important;
}

.xh-col-w5 {
  width: 5% !important;
}

.xh-col-user {
  width: 260px !important;
}

.xh-col-card-icon {
  width: 60px !important;
}

.xh-col-card-info {
  min-width: 260px !important;
}

.xh-table-col-label {
  width: 220px !important;
}

.xh-col-icon-50 {
  width: 50px !important;
}

.xh-col-min-175 {
  min-width: 175px !important;
}

.xh-col-action-80 {
  width: 50px !important;
}

@media (min-width: 768px) {
  .xh-col-action-80 {
    width: 115px !important;
  }
}

.xh-product-details-title {
  font-size: 1.6rem !important;
  color: var(--xh-text-main) !important;
}

.xh-product-price {
  color: var(--xh-text-main) !important;
  font-size: 0.95rem !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
}

.xh-gap-6 {
  gap: 6px !important;
}

.xh-text-main {
  color: var(--xh-text-main) !important;
}

.xh-price-tabular {
  font-size: 1.15rem !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
}

.xh-cursor-pointer {
  cursor: pointer !important;
}

.xh-tracking-wide {
  letter-spacing: 0.05em !important;
}

.xh-due-date-icon-muted {
  background: var(--xh-bg-subtle) !important;
  color: var(--xh-text-muted) !important;
}

.xh-font-weight-500 {
  font-weight: 500 !important;
}

.xh-max-w-100 {
  max-width: 100px !important;
}

/* Dark Mode Overrides para Utilidades */
[data-theme="dark"] .xh-user-avatar-warning {
  background: #78350f !important;
  color: #fef3c7 !important;
}

[data-theme="dark"] .xh-payment-icon-box {
  background: var(--xh-bg-surface) !important;
  border-color: var(--xh-border) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .xh-affiliate-icon-box {
  background: rgba(79, 170, 44, 0.25) !important;
  color: #86efac !important;
}

[data-theme="dark"] .xh-affiliate-share-card {
  background: rgba(79, 170, 44, 0.12) !important;
  border-color: rgba(79, 170, 44, 0.35) !important;
}

/* =========================================
   20. XHOST STORE, CART & CHECKOUT (STANDARD_CART)
   ========================================= */

/* Contenedor Principal del Proceso de Compra */
html body #order-standard_cart {
  margin-top: 15px;
  margin-bottom: 40px;
}

/* Flexbox Layout y Espacio Generoso entre Aside y Planes */
html body #order-standard_cart > .row {
  display: flex !important;
  flex-wrap: wrap !important;
  margin-left: -15px !important;
  margin-right: -15px !important;
}

/* 1. Sidebar de Categorías del Carrito (Separado 35px de los planes) */
html body #order-standard_cart .cart-sidebar,
html body #order-standard_cart .sidebar {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  flex: 0 0 280px !important;
  max-width: 280px !important;
  width: 280px !important;
  padding-left: 15px !important;
  padding-right: 25px !important; /* Espacio limpio entre el aside y la columna de productos */
  box-sizing: border-box !important;
}

html body #order-standard_cart .cart-body {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  padding-left: 10px !important;
  padding-right: 15px !important;
  box-sizing: border-box !important;
}

@media (max-width: 991.98px) {
  html body #order-standard_cart .cart-sidebar,
  html body #order-standard_cart .sidebar {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-right: 15px !important;
    margin-bottom: 30px !important;
  }
}

/* Tarjeta Única de Categorías */
html body #order-standard_cart .cart-sidebar .card,
html body #order-standard_cart .cart-sidebar .card-sidebar,
html body #order-standard_cart .cart-sidebar .panel-sidebar,
html body #order-standard_cart .sidebar .card,
html body #order-standard_cart .sidebar .panel {
  background: var(--xh-bg-surface, #ffffff) !important;
  border: 1px solid var(--xh-border, #e2e8f0) !important;
  border-radius: var(--xh-radius-lg, 14px) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  overflow: hidden !important;
  margin-bottom: 24px !important;
}

/* Ocultar Tarjetas de Acciones y Divisas del Sidebar (se ubican arriba en header/toolbar) */
html body #order-standard_cart .cart-sidebar div[menuItemName="Actions"],
html body #order-standard_cart .cart-sidebar div[menuItemName="Choose Currency"],
html body #order-standard_cart .cart-sidebar .panel-actions,
html body #order-standard_cart .cart-sidebar .panel-currency,
html body #order-standard_cart .sidebar div[menuItemName="Actions"],
html body #order-standard_cart .sidebar div[menuItemName="Choose Currency"],
html body #order-standard_cart .cart-sidebar .card[data-panel="actions"],
html body #order-standard_cart .cart-sidebar .card[data-panel="currency"] {
  display: none !important;
}

html body #order-standard_cart .cart-sidebar .card-header,
html body #order-standard_cart .cart-sidebar .panel-heading {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 14px 18px !important;
}

html body #order-standard_cart .cart-sidebar .panel-title,
html body #order-standard_cart .cart-sidebar .card-title {
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #060840 !important;
  margin: 0 !important;
}

/* Alineación ESTRICTA a la izquierda de todas las categorías (VPS, Reseller, CWP, cPanel) */
html body #order-standard_cart .cart-sidebar .list-group-item {
  border: none !important;
  border-bottom: 1px solid #f1f5f9 !important;
  padding: 12px 16px !important;
  font-size: 0.875rem !important;
  color: #334155 !important;
  font-weight: 500 !important;
  background: transparent !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important; /* Todos a la izquierda */
  text-align: left !important;
  gap: 10px !important;
}

html body #order-standard_cart .cart-sidebar .list-group-item:last-child {
  border-bottom: none !important;
}

html body #order-standard_cart .cart-sidebar .list-group-item:hover {
  background: rgba(79, 170, 44, 0.06) !important;
  color: #4faa2c !important;
  padding-left: 18px !important;
}

html body #order-standard_cart .cart-sidebar .list-group-item.active,
html body #order-standard_cart .cart-sidebar .list-group-item.active:hover {
  background: rgba(79, 170, 44, 0.12) !important;
  color: #15803d !important;
  font-weight: 700 !important;
  border-left: 4px solid #4faa2c !important;
  padding-left: 16px !important;
}

/* El texto de la categoría alineado a la izquierda */
html body #order-standard_cart .cart-sidebar .list-group-item > span:not(.badge),
html body #order-standard_cart .cart-sidebar .list-group-item .xh-cat-title {
  text-align: left !important;
  flex: 1 1 auto !important;
}

/* Badge numérico empujado a la derecha */
html body #order-standard_cart .cart-sidebar .list-group-item .badge {
  background: #f1f5f9 !important;
  color: #64748b !important;
  border-radius: var(--xh-radius-pill, 50px) !important;
  font-weight: 600 !important;
  padding: 3px 8px !important;
  font-size: 0.75rem !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

html body #order-standard_cart .cart-sidebar .list-group-item.active .badge {
  background: #4faa2c !important;
  color: #ffffff !important;
}

/* 2. Cuerpo del Store & Encabezado con Toolbar */
html body #order-standard_cart .cart-body .header-lined {
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 24px;
  padding-bottom: 16px;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

html body #order-standard_cart .cart-body .header-lined .xh-header-text {
  flex: 1 1 320px !important;
}

html body #order-standard_cart .cart-body .header-lined h1 {
  font-size: 1.85rem !important;
  font-weight: 800 !important;
  color: #060840 !important;
  margin-bottom: 6px !important;
}

html body #order-standard_cart .cart-body .header-lined p {
  color: #64748b !important;
  font-size: 0.95rem !important;
  margin-bottom: 0 !important;
}

/* Toolbar Superior de Tienda (Acciones y Divisas Arriba) */
html body #order-standard_cart .cart-body .xh-store-top-toolbar {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

html body #order-standard_cart .cart-body .xh-store-top-toolbar .xh-currency-pill {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: var(--xh-radius-pill, 50px) !important;
  padding: 6px 14px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: #334155 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

html body #order-standard_cart .cart-body .xh-store-top-toolbar .xh-currency-select {
  border: none !important;
  background: transparent !important;
  font-weight: 700 !important;
  color: #060840 !important;
  cursor: pointer !important;
  outline: none !important;
}

/* 3. Tarjetas Modernas de Productos (Store) */
html body #order-standard_cart .products .product {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
  margin-bottom: 24px !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
  overflow: hidden !important;
}

html body #order-standard_cart .products .product:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 28px -4px rgba(0, 0, 0, 0.09) !important;
  border-color: #cbd5e1 !important;
}

html body #order-standard_cart .products .product header {
  background: #f8fafc !important;
  border-bottom: 1px solid #edf2f7 !important;
  padding: 16px 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

html body #order-standard_cart .products .product header span:first-child {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

html body #order-standard_cart .products .product header .qty {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: #059669 !important;
  background: #ecfdf5 !important;
  padding: 4px 10px !important;
  border-radius: 50px !important;
  border: 1px solid #a7f3d0 !important;
}

html body #order-standard_cart .products .product .product-desc {
  padding: 22px !important;
  flex-grow: 1 !important;
  color: #475569 !important;
}

html body #order-standard_cart .products .product .product-desc p {
  font-size: 0.875rem !important;
  color: #64748b !important;
  margin-bottom: 14px !important;
}

html body #order-standard_cart .products .product .product-desc ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin-bottom: 0 !important;
}

html body #order-standard_cart .products .product .product-desc ul li {
  padding: 7px 0 !important;
  font-size: 0.85rem !important;
  color: #334155 !important;
  border-bottom: 1px dashed #f1f5f9 !important;
  display: flex !important;
  align-items: center !important;
}

html body #order-standard_cart .products .product .product-desc ul li:last-child {
  border-bottom: none !important;
}

html body #order-standard_cart .products .product .product-desc ul li::before,
html body #order-standard_cart .products .product .product-desc .xh-feature-checklist li::before,
html body #order-standard_cart .products .product .product-desc .xh-feature-checklist .xh-feature-item::before {
  content: none !important;
  display: none !important;
}

html body #order-standard_cart .products .product .product-desc ul li .feature-value {
  font-weight: 700 !important;
  color: #0f172a !important;
  margin-right: 4px !important;
}

html body #order-standard_cart .products .product footer {
  background: #f8fafc !important;
  border-top: 1px solid #edf2f7 !important;
  padding: 18px 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 0 !important;
}

html body #order-standard_cart .products .product footer .product-pricing {
  text-align: left !important;
  color: #64748b !important;
  font-size: 0.8rem !important;
  line-height: 1.2 !important;
}

html body #order-standard_cart .products .product footer .product-pricing .price {
  font-size: 1.45rem !important;
  font-weight: 800 !important;
  color: #060840 !important;
  display: block !important;
  font-variant-numeric: tabular-nums !important;
}

html body #order-standard_cart .products .product footer .btn-order-now {
  background: #4faa2c !important;
  border-color: #4faa2c !important;
  color: #ffffff !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  padding: 9px 20px !important;
  border-radius: var(--xh-radius-pill, 50px) !important;
  box-shadow: 0 4px 10px rgba(79, 170, 44, 0.25) !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

html body #order-standard_cart .products .product footer .btn-order-now:hover {
  background: #3d8822 !important;
  border-color: #3d8822 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 14px rgba(79, 170, 44, 0.35) !important;
}

/* Plan Recomendado / Más Popular */
html body #order-standard_cart .products .product.xh-featured-product {
  border: 2px solid #4faa2c !important;
  position: relative !important;
  box-shadow: 0 10px 25px -4px rgba(79, 170, 44, 0.2), 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

html body #order-standard_cart .products .product .xh-plan-featured-badge {
  background: linear-gradient(135deg, #4faa2c 0%, #15803d 100%) !important;
  color: #ffffff !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 6px 14px !important;
  text-align: center !important;
  display: block !important;
  width: 100% !important;
  box-shadow: 0 2px 6px rgba(79, 170, 44, 0.3) !important;
}

/* Checklist Visual Dinámico (xh-feature-checklist) */
html body #order-standard_cart .products .product .product-desc .xh-feature-checklist {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

html body #order-standard_cart .products .product .product-desc .xh-feature-checklist .xh-feature-item {
  padding: 8px 0 !important;
  font-size: 0.85rem !important;
  color: #334155 !important;
  border-bottom: 1px dashed #f1f5f9 !important;
  display: flex !important;
  align-items: center !important;
  transition: all 0.2s ease !important;
}

html body #order-standard_cart .products .product .product-desc .xh-feature-checklist .xh-feature-item:last-child {
  border-bottom: none !important;
}

html body #order-standard_cart .products .product .product-desc .xh-feature-checklist .xh-feature-item:hover {
  background: rgba(79, 170, 44, 0.04) !important;
  padding-left: 6px !important;
}

html body #order-standard_cart .products .product .product-desc .xh-feature-checklist .xh-feature-item i {
  color: #4faa2c !important;
  font-size: 0.85rem !important;
  flex-shrink: 0 !important;
  margin-right: 10px !important;
}

/* Badge circular de verificación con SVG vectorial integrado */
html body #order-standard_cart .products .product .product-desc .xh-feature-checklist .xh-check-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  border-radius: 50% !important;
  background: #ecfdf5 !important;
  border: 1px solid #a7f3d0 !important;
  flex-shrink: 0 !important;
  margin-right: 10px !important;
  box-shadow: 0 1px 3px rgba(79, 170, 44, 0.12) !important;
}

html body #order-standard_cart .products .product .product-desc .xh-feature-checklist .xh-check-badge svg {
  display: block !important;
  width: 11px !important;
  height: 11px !important;
}

/* Precios estilo SaaS */
html body #order-standard_cart .products .product footer .product-pricing .price .xh-price-val {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: #060840 !important;
  font-variant-numeric: tabular-nums !important;
}

html body #order-standard_cart .products .product footer .product-pricing .price .xh-price-curr {
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  margin-left: 3px !important;
}

/* Breadcrumb de Tienda */
html body #order-standard_cart .cart-body .xh-store-breadcrumb {
  font-size: 0.825rem !important;
  font-weight: 500 !important;
  color: #64748b !important;
}

html body #order-standard_cart .cart-body .xh-store-breadcrumb a {
  color: #4faa2c !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

html body #order-standard_cart .cart-body .xh-store-breadcrumb a:hover {
  color: #15803d !important;
  text-decoration: underline !important;
}

/* Iconos de Categoría en Sidebar */
html body #order-standard_cart .cart-sidebar .list-group-item .xh-cat-icon {
  width: 18px !important;
  text-align: center !important;
  margin-right: 8px !important;
}

/* Franja de Confianza (Trust Grid) */
html body #order-standard_cart .xh-store-trust-grid {
  margin-top: 40px !important;
  padding-top: 30px !important;
  border-top: 1px solid #e2e8f0 !important;
}

html body #order-standard_cart .xh-trust-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: var(--xh-radius-lg, 14px) !important;
  padding: 20px 16px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.25s ease !important;
  height: 100% !important;
}

html body #order-standard_cart .xh-trust-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08) !important;
  border-color: #cbd5e1 !important;
}

html body #order-standard_cart .xh-trust-card h6 {
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

html body #order-standard_cart .xh-trust-card small {
  font-size: 0.78rem !important;
  color: #64748b !important;
  line-height: 1.3 !important;
  display: block !important;
}

/* 4. Carrito de Compras (View Cart / Review & Checkout) */
html body #order-standard_cart .view-cart-items-header {
  background: #060840 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  border-radius: 14px 14px 0 0 !important;
  border: 1px solid #060840 !important;
  padding: 12px 18px !important;
}

html body #order-standard_cart .view-cart-items {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 0 0 14px 14px !important;
  margin-bottom: 24px !important;
  overflow: hidden !important;
}

html body #order-standard_cart .view-cart-items .item {
  border-bottom: 1px solid #f1f5f9 !important;
  padding: 16px 18px !important;
}

html body #order-standard_cart .view-cart-items .item:last-child {
  border-bottom: none !important;
}

html body #order-standard_cart .view-cart-items .item-title {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

html body #order-standard_cart .view-cart-items .item-domain {
  color: #64748b !important;
  font-size: 0.85rem !important;
}

html body #order-standard_cart .view-cart-items .item-price {
  font-size: 1rem !important;
  text-align: right !important;
  white-space: nowrap !important;
}

html body #order-standard_cart .view-cart-items .item-price > span:first-child,
html body #order-standard_cart .view-cart-items .item-price > span:not(.cycle) {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #060840 !important;
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: flex-end !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  font-variant-numeric: tabular-nums !important;
}

html body #order-standard_cart .view-cart-items .item-price .cycle {
  font-size: 0.75rem !important;
  font-weight: 400 !important;
  color: #64748b !important;
  display: block !important;
  margin-top: 2px !important;
  letter-spacing: 0.01em !important;
}

html body #order-standard_cart .order-summary {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05) !important;
  overflow: hidden !important;
  margin-bottom: 24px !important;
}

html body #order-standard_cart .order-summary h2 {
  background: #060840 !important;
  color: #ffffff !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  padding: 14px 18px !important;
  margin: 0 !important;
  border: none !important;
}

html body #order-standard_cart .order-summary .summary-container {
  padding: 20px !important;
  background: #ffffff !important;
  border: none !important;
}

/* Bloque de Total a Pagar en Cart / Configuración / Checkout */
html body #order-standard_cart .order-summary .total-due-today,
html body #order-standard_cart .total-due-today,
html body #order-standard_cart .total-due-today-padded {
  text-align: center !important;
  margin: 16px 0 !important;
  padding: 14px 12px !important;
  background: #f8fafc !important;
  border-radius: var(--xh-radius-lg, 12px) !important;
  border: 1px dashed #cbd5e1 !important;
  font-size: 1rem !important;
}

html body #order-standard_cart .order-summary .total-due-today .amt,
html body #order-standard_cart .total-due-today .amt,
html body #order-standard_cart #totalDueToday,
html body #order-standard_cart span.amt {
  font-size: 1.35rem !important; /* Tamaño contenido, elegante y no tosco */
  font-weight: 700 !important;   /* Menor peso (700 en vez de 800) */
  color: #060840 !important;
  line-height: 1.25 !important;
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  margin: 0 auto 4px auto !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.02em !important;
}

/* Estilo unificado para la palabra de la divisa (Dólares, Pesos) - PUNTO BAJO Y PESO LIGERO */
html body #order-standard_cart .xh-curr-tag,
html body #order-standard_cart .total-due-today .amt .xh-curr-tag,
html body #order-standard_cart .total-due-today .amt small,
html body #order-standard_cart .total-due-today .amt span.xh-curr-tag,
html body #order-standard_cart .view-cart-items .item-price .xh-curr-tag,
html body #order-standard_cart .view-cart-items .item-price span.xh-curr-tag {
  font-size: 0.72rem !important;  /* Punto bajo (11-12px) */
  font-weight: 500 !important;   /* Peso ligero / medio (no 800 ni 700) */
  color: #64748b !important;      /* Slate suave y armonioso para no sobrecargar */
  display: inline-block !important;
  margin-left: 4px !important;
  letter-spacing: 0.04em !important;
  vertical-align: baseline !important;
  text-transform: uppercase !important;
}

/* Etiquetas en filas de desglose de resumen */
html body #order-standard_cart .xh-curr-tag-sm {
  font-size: 0.68rem !important;
  font-weight: 500 !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin-left: 3px !important;
}

html body #order-standard_cart .xh-summary-amt {
  font-weight: 600 !important;
  color: #060840 !important;
  font-variant-numeric: tabular-nums !important;
}

/* Etiqueta "Total a pagar" */
html body #order-standard_cart .order-summary .total-due-today > span:not(.amt),
html body #order-standard_cart .total-due-today > span:not(.amt),
html body #order-standard_cart .total-due-today > span:last-child {
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  display: block !important;
  text-align: center !important;
  margin-top: 2px !important;
}

html body #order-standard_cart .btn-checkout {
  background: #4faa2c !important;
  border-color: #4faa2c !important;
  color: #ffffff !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  padding: 14px 24px !important;
  border-radius: var(--xh-radius-pill, 50px) !important;
  box-shadow: 0 4px 14px rgba(79, 170, 44, 0.3) !important;
  transition: all 0.25s ease !important;
  width: 100% !important;
}

html body #order-standard_cart .btn-checkout:hover {
  background: #3d8822 !important;
  border-color: #3d8822 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 18px rgba(79, 170, 44, 0.4) !important;
}

/* 5. Checkout Distraction-Free & Pasarelas de Pago */

/* Ocultar aside / categorías de productos en el Checkout */
html body #order-standard_cart:has(#frmCheckout) .cart-sidebar,
html body #order-standard_cart:has(#frmCheckout) .sidebar,
html body #order-standard_cart:has(#frmCheckout) .sidebar-categories-collapsed,
html body.page-order-checkout #order-standard_cart .cart-sidebar,
html body.page-order-checkout #order-standard_cart .sidebar,
html body.page-order-checkout #order-standard_cart .sidebar-categories-collapsed,
html body #order-standard_cart.is-checkout-page .cart-sidebar,
html body #order-standard_cart.is-checkout-page .sidebar,
html body #order-standard_cart.is-checkout-page .sidebar-categories-collapsed {
  display: none !important;
}

html body #order-standard_cart:has(#frmCheckout) .cart-body,
html body.page-order-checkout #order-standard_cart .cart-body,
html body #order-standard_cart.is-checkout-page .cart-body {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
}

/* Tarjetas y Contenedores de Checkout */
html body #order-standard_cart #frmCheckout .card {
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
  margin-bottom: 20px !important;
}

/* Separadores de Sección en Checkout (Sub-headings con soporte multilínea / información adicional) */
html body #order-standard_cart #frmCheckout .sub-heading,
html body #order-standard_cart .sub-heading {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  text-align: center !important;
  border-top: none !important;
  border-bottom: none !important;
  height: auto !important;
  margin: 36px 0 24px 0 !important;
  line-height: 1.4 !important;
}

html body #order-standard_cart #frmCheckout .sub-heading::before,
html body #order-standard_cart #frmCheckout .sub-heading::after,
html body #order-standard_cart .sub-heading::before,
html body #order-standard_cart .sub-heading::after {
  content: "" !important;
  flex: 1 1 0% !important;
  border-bottom: 1px solid #e2e8f0 !important;
  height: 1px !important;
}

html body #order-standard_cart #frmCheckout .sub-heading span,
html body #order-standard_cart .sub-heading span,
html body #order-standard_cart #frmCheckout .sub-heading span.primary-bg-color,
html body #order-standard_cart .sub-heading span.primary-bg-color {
  background: transparent !important;
  padding: 0 18px !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #060840 !important;
  letter-spacing: 0.01em !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.35 !important;
  position: static !important;
  top: auto !important;
  max-width: 100% !important;
}

html body #order-standard_cart #frmCheckout .sub-heading span small,
html body #order-standard_cart #frmCheckout .sub-heading span i,
html body #order-standard_cart .sub-heading span small,
html body #order-standard_cart .sub-heading span i {
  display: block !important;
  font-size: 0.8rem !important;
  font-weight: 400 !important;
  color: #64748b !important;
  line-height: 1.35 !important;
  margin-top: 4px !important;
  font-style: normal !important;
}

/* Inputs Base de Checkout */
html body #order-standard_cart #frmCheckout .form-control,
html body #order-standard_cart #frmCheckout .field {
  border-radius: 8px !important;
  border: 1px solid #cbd5e1 !important;
  padding: 10px 14px !important;
  font-size: 0.95rem !important;
  color: #1e293b !important;
  background-color: #ffffff !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  height: 44px !important;
}

html body #order-standard_cart #frmCheckout textarea.form-control,
html body #order-standard_cart #frmCheckout textarea.field {
  height: auto !important;
  min-height: 90px !important;
  padding: 12px 14px !important;
}

html body #order-standard_cart #frmCheckout .form-control:focus,
html body #order-standard_cart #frmCheckout .field:focus {
  border-color: #4faa2c !important;
  box-shadow: 0 0 0 3px rgba(79, 170, 44, 0.15) !important;
  outline: none !important;
}

/* =========================================================
   CAMPOS CON ICONO PREPEND (CORRECCIÓN DE SUPERPOSICIÓN)
   ========================================================= */
html body #order-standard_cart #frmCheckout .form-group.prepend-icon,
html body #order-standard_cart .form-group.prepend-icon {
  position: relative !important;
  margin-bottom: 1.25rem !important;
}

html body #order-standard_cart #frmCheckout .prepend-icon .field-icon,
html body #order-standard_cart .prepend-icon .field-icon {
  position: absolute !important;
  top: 1px !important;
  left: 1px !important;
  bottom: 1px !important;
  width: 42px !important;
  height: calc(100% - 2px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #94a3b8 !important;
  z-index: 4 !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 8px 0 0 8px !important;
  transition: color 0.2s ease !important;
}

html body #order-standard_cart #frmCheckout .prepend-icon .field-icon i,
html body #order-standard_cart .prepend-icon .field-icon i {
  font-size: 14px !important;
  color: #94a3b8 !important;
  line-height: 1 !important;
  transition: color 0.2s ease !important;
}

/* Feedback de foco: icono verde corporativo */
html body #order-standard_cart #frmCheckout .form-group.prepend-icon:focus-within .field-icon,
html body #order-standard_cart #frmCheckout .form-group.prepend-icon:focus-within .field-icon i,
html body #order-standard_cart .form-group.prepend-icon:focus-within .field-icon,
html body #order-standard_cart .form-group.prepend-icon:focus-within .field-icon i {
  color: #4faa2c !important;
}

/* PADDING IZQUIERDO CORREGIDO: Evita que el texto y placeholder se monten sobre el icono */
html body #order-standard_cart #frmCheckout .prepend-icon .form-control,
html body #order-standard_cart #frmCheckout .prepend-icon .field,
html body #order-standard_cart .prepend-icon .form-control,
html body #order-standard_cart .prepend-icon .field {
  padding-left: 44px !important;
}

/* =========================================================
   TELÉFONO INTERNACIONAL CON INTL-TEL-INPUT (BANDERA Y CÓDIGO)
   ========================================================= */
/* Ocultar el icono duplicado de fontawesome (.field-icon fa-phone) cuando hay selector de país */
html body #order-standard_cart #frmCheckout .prepend-icon label[for="inputPhone"].field-icon,
html body #order-standard_cart #frmCheckout .prepend-icon label[for="inputDCPhone"].field-icon,
html body #order-standard_cart .prepend-icon label[for="inputPhone"].field-icon,
html body #order-standard_cart .prepend-icon label[for="inputDCPhone"].field-icon {
  display: none !important;
}

/* Contenedor del plugin (soporta tanto .intl-tel-input tradicional como .iti moderno) */
html body #order-standard_cart #frmCheckout .intl-tel-input,
html body #order-standard_cart #frmCheckout .iti,
html body #order-standard_cart .intl-tel-input,
html body #order-standard_cart .iti {
  width: 100% !important;
  display: block !important;
  position: relative !important;
}

/* Contenedor de bandera y dial code */
html body #order-standard_cart #frmCheckout .intl-tel-input .flag-container,
html body #order-standard_cart #frmCheckout .iti__flag-container,
html body #order-standard_cart .intl-tel-input .flag-container,
html body #order-standard_cart .iti__flag-container {
  position: absolute !important;
  top: 1px !important;
  bottom: 1px !important;
  left: 1px !important;
  z-index: 5 !important;
  display: flex !important;
  align-items: center !important;
}

html body #order-standard_cart #frmCheckout .intl-tel-input .selected-flag,
html body #order-standard_cart #frmCheckout .iti__selected-flag,
html body #order-standard_cart .intl-tel-input .selected-flag,
html body #order-standard_cart .iti__selected-flag {
  height: calc(100% - 2px) !important;
  top: 1px !important;
  left: 1px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 8px 0 10px !important;
  border-radius: 7px 0 0 7px !important;
  background-color: #f8fafc !important;
  border-right: 1px solid #e2e8f0 !important;
  box-sizing: border-box !important;
}

html body #order-standard_cart #frmCheckout .intl-tel-input .selected-dial-code,
html body #order-standard_cart #frmCheckout .iti__selected-dial-code,
html body #order-standard_cart .intl-tel-input .selected-dial-code,
html body #order-standard_cart .iti__selected-dial-code {
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: #334155 !important;
  margin-left: 6px !important;
  padding-left: 0 !important;
  line-height: 1 !important;
}

/* Padding base para el input telefónico según longitud del código de país */
/* Base / Fallback general cuando separate-dial-code está activo */
html body #order-standard_cart #frmCheckout .intl-tel-input.separate-dial-code input,
html body #order-standard_cart #frmCheckout .iti--separate-dial-code input,
html body #order-standard_cart #frmCheckout input#inputPhone,
html body #order-standard_cart #frmCheckout input#inputDCPhone,
html body #order-standard_cart input#inputPhone,
html body #order-standard_cart input#inputDCPhone {
  padding-left: 84px !important;
}

/* Caso 1: Código de 1 dígito (+1 Estados Unidos / Canadá) */
html body #order-standard_cart #frmCheckout .intl-tel-input.separate-dial-code.iti-sdc-1 input#inputPhone,
html body #order-standard_cart #frmCheckout .intl-tel-input.separate-dial-code.iti-sdc-1 input#inputDCPhone,
html body #order-standard_cart #frmCheckout .intl-tel-input.separate-dial-code.iti-sdc-1 input,
html body #order-standard_cart #frmCheckout .iti.iti--separate-dial-code.iti-sdc-1 input#inputPhone,
html body #order-standard_cart #frmCheckout .iti.iti--separate-dial-code.iti-sdc-1 input {
  padding-left: 74px !important;
}

/* Caso 2: Código de 2 dígitos (+56 Chile, +34 España, +54 Argentina, +57 Colombia, +52 México) */
html body #order-standard_cart #frmCheckout .intl-tel-input.separate-dial-code.iti-sdc-2 input#inputPhone,
html body #order-standard_cart #frmCheckout .intl-tel-input.separate-dial-code.iti-sdc-2 input#inputDCPhone,
html body #order-standard_cart #frmCheckout .intl-tel-input.separate-dial-code.iti-sdc-2 input,
html body #order-standard_cart #frmCheckout .iti.iti--separate-dial-code.iti-sdc-2 input#inputPhone,
html body #order-standard_cart #frmCheckout .iti.iti--separate-dial-code.iti-sdc-2 input {
  padding-left: 84px !important;
}

/* Caso 3: Código de 3 dígitos (+598 Uruguay, +506 Costa Rica, +593 Ecuador, etc.) */
html body #order-standard_cart #frmCheckout .intl-tel-input.separate-dial-code.iti-sdc-3 input#inputPhone,
html body #order-standard_cart #frmCheckout .intl-tel-input.separate-dial-code.iti-sdc-3 input#inputDCPhone,
html body #order-standard_cart #frmCheckout .intl-tel-input.separate-dial-code.iti-sdc-3 input,
html body #order-standard_cart #frmCheckout .iti.iti--separate-dial-code.iti-sdc-3 input#inputPhone,
html body #order-standard_cart #frmCheckout .iti.iti--separate-dial-code.iti-sdc-3 input {
  padding-left: 94px !important;
}

/* Caso 4: Código de 4 dígitos (+1242 Bahamas, etc.) */
html body #order-standard_cart #frmCheckout .intl-tel-input.separate-dial-code.iti-sdc-4 input#inputPhone,
html body #order-standard_cart #frmCheckout .intl-tel-input.separate-dial-code.iti-sdc-4 input#inputDCPhone,
html body #order-standard_cart #frmCheckout .intl-tel-input.separate-dial-code.iti-sdc-4 input,
html body #order-standard_cart #frmCheckout .iti.iti--separate-dial-code.iti-sdc-4 input#inputPhone,
html body #order-standard_cart #frmCheckout .iti.iti--separate-dial-code.iti-sdc-4 input {
  padding-left: 104px !important;
}

/* Caso 5: Código de 5 dígitos */
html body #order-standard_cart #frmCheckout .intl-tel-input.separate-dial-code.iti-sdc-5 input#inputPhone,
html body #order-standard_cart #frmCheckout .intl-tel-input.separate-dial-code.iti-sdc-5 input#inputDCPhone,
html body #order-standard_cart #frmCheckout .intl-tel-input.separate-dial-code.iti-sdc-5 input,
html body #order-standard_cart #frmCheckout .iti.iti--separate-dial-code.iti-sdc-5 input#inputPhone,
html body #order-standard_cart #frmCheckout .iti.iti--separate-dial-code.iti-sdc-5 input {
  padding-left: 112px !important;
}

/* Sin separate-dial-code (sólo bandera) */
html body #order-standard_cart #frmCheckout .intl-tel-input:not(.separate-dial-code) input,
html body #order-standard_cart #frmCheckout .iti:not(.iti--separate-dial-code) input,
html body #order-standard_cart .intl-tel-input:not(.separate-dial-code) input,
html body #order-standard_cart .iti:not(.iti--separate-dial-code) input {
  padding-left: 54px !important;
}

/* Modo oscuro para Checkout: Sub-headings y Selector de País */
[data-theme="dark"] #order-standard_cart .sub-heading::before,
[data-theme="dark"] #order-standard_cart .sub-heading::after,
[data-theme="dark"] #order-standard_cart #frmCheckout .sub-heading::before,
[data-theme="dark"] #order-standard_cart #frmCheckout .sub-heading::after {
  border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] #order-standard_cart .sub-heading span,
[data-theme="dark"] #order-standard_cart #frmCheckout .sub-heading span {
  color: #f1f5f9 !important;
}

[data-theme="dark"] #order-standard_cart .sub-heading span small,
[data-theme="dark"] #order-standard_cart .sub-heading span i,
[data-theme="dark"] #order-standard_cart #frmCheckout .sub-heading span small,
[data-theme="dark"] #order-standard_cart #frmCheckout .sub-heading span i {
  color: #94a3b8 !important;
}

[data-theme="dark"] #order-standard_cart #frmCheckout .intl-tel-input .selected-flag,
[data-theme="dark"] #order-standard_cart #frmCheckout .iti__selected-flag,
[data-theme="dark"] #order-standard_cart .intl-tel-input .selected-flag,
[data-theme="dark"] #order-standard_cart .iti__selected-flag {
  background-color: #1e293b !important;
  border-right-color: #334155 !important;
}

[data-theme="dark"] #order-standard_cart #frmCheckout .intl-tel-input .selected-dial-code,
[data-theme="dark"] #order-standard_cart #frmCheckout .iti__selected-dial-code,
[data-theme="dark"] #order-standard_cart .intl-tel-input .selected-dial-code,
[data-theme="dark"] #order-standard_cart .iti__selected-dial-code {
  color: #f1f5f9 !important;
}

/* Pasarelas de Pago en Checkout */
html body #order-standard_cart .gateway-selector .radio-inline,
html body #order-standard_cart #frmCheckout .gateway-selector .radio-inline {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 16px;
  margin-right: 10px;
  margin-bottom: 10px;
  transition: all 0.2s ease;
  cursor: pointer;
}

html body #order-standard_cart .gateway-selector .radio-inline:hover,
html body #order-standard_cart #frmCheckout .gateway-selector .radio-inline:hover {
  border-color: #4faa2c;
  background: #f0fdf4;
}

/* 6. Estilos de Catálogo de Homepage (index.php) */
.xh-catalog-hero {
  background: linear-gradient(135deg, #060840 0%, #0d1363 55%, #153c25 100%) !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 25px -5px rgba(6, 8, 64, 0.3) !important;
}

.xh-catalog-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.xh-catalog-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 28px -4px rgba(0, 0, 0, 0.08) !important;
  border-color: #4faa2c !important;
}

.xh-catalog-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  border: 1px solid #edf2f7;
}

.xh-catalog-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #0f172a;
}

.xh-btn-catalog {
  border-radius: 50px !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  transition: all 0.2s ease !important;
}

.xh-btn-catalog:hover {
  background: #4faa2c !important;
  border-color: #4faa2c !important;
  color: #ffffff !important;
  box-shadow: 0 4px 10px rgba(79, 170, 44, 0.25) !important;
}

.xh-domain-search-card {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
}

.xh-bento-card-action {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none !important;
  color: #1e293b !important;
  transition: all 0.2s ease;
}

.xh-bento-card-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06);
  border-color: #4faa2c;
  color: #4faa2c !important;
}

/* Tarjeta de Invitación a Login y Registro para Invitados en Homepage */
.xh-login-invite-card {
  background: var(--xh-bg-surface, #ffffff) !important;
  border: 1px solid var(--xh-border, #e2e8f0) !important;
  border-radius: var(--xh-radius-lg, 16px) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
  position: relative;
  overflow: hidden;
}

[data-theme="dark"] .xh-login-invite-card {
  background: var(--xh-bg-surface, #1e293b) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
}

.xh-login-invite-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--xh-brand-gradient, linear-gradient(135deg, #4faa2c 0%, #3e8c22 100%));
}

.xh-topbar-guest a:hover {
  text-decoration: underline !important;
}

/* ==========================================================================
   26. SISTEMA DE NAVEGACIÓN MÓVIL RESPONSIVE Y PREVENCIÓN DE OVERFLOW (PRY-JA003)
   ========================================================================== */

/* Prevenir desborde por subpíxeles y márgenes de bootstrap */
.container,
.container-fluid {
  max-width: 100% !important;
}

/* Tablas Responsivas Estrictas */
.table-responsive {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  margin-bottom: 1rem;
}

/* Blindaje de Tarjetas y Héroes contra Márgenes Negativos */
.xh-hero-welcome,
.xh-catalog-hero,
.xh-card,
.card {
  max-width: 100% !important;
  overflow: hidden !important;
  word-break: break-word;
}

/* =========================================
   DISEÑO DEL MENÚ RESPONSIVE MÓVIL (#mainNavbar)
   ========================================= */
@media (max-width: 991.98px) {
  /* 1. OCULTAMIENTO CATEGÓRICO DEL MENÚ HORIZONTAL DE ESCRITORIO */
  .xh-desktop-nav-list,
  nav.xh-desktop-nav-list,
  .navbar-main nav,
  .navbar-main .navbar-nav.flex-row,
  .navbar-main .d-none.d-lg-flex,
  #navbar-nav-links {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    pointer-events: none !important;
  }

  .navbar-main {
    position: relative;
    padding: 8px 0 !important;
  }

  .navbar-main > .container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Toolbar de acciones y botón hamburguesa */
  .navbar-main .xh-header-actions,
  .navbar-main .d-flex.align-items-center.xh-gap-sm {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
  }

  /* Ocultar botones secundarios en el header blanco en móvil (evita duplicar con topbar y asegura protagonismo al botón hamburguesa) */
  .navbar-main > .container .xh-header-actions .btn:not(.xh-mobile-nav-toggle):not(.xh-cart-btn),
  .navbar-main > .container .xh-header-actions a.btn:not(.xh-cart-btn),
  .navbar-main > .container .xh-header-actions .xh-btn-outline-pill,
  .navbar-main > .container .xh-header-actions .xh-btn-solid-pill {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  /* Botón Hamburguesa Moderno (44px a11y) */
  .xh-mobile-nav-toggle {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: var(--xh-radius-md, 10px) !important;
    background: var(--xh-bg-surface, #ffffff) !important;
    border: 1.5px solid var(--xh-border, #e2e8f0) !important;
    color: var(--xh-text-main, #0f172a) !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.15rem !important;
    cursor: pointer !important;
    transition: var(--xh-transition) !important;
    outline: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    padding: 0 !important;
    margin-left: 6px !important;
    flex-shrink: 0 !important;
    z-index: 10;
  }

  .xh-mobile-nav-toggle:hover,
  .xh-mobile-nav-toggle:focus {
    color: var(--xh-brand, #4FAA2C) !important;
    border-color: var(--xh-brand, #4FAA2C) !important;
    background-color: var(--xh-brand-light, #eef9eb) !important;
  }

  .xh-mobile-nav-toggle[aria-expanded="true"] {
    background-color: var(--xh-brand-light, #eef9eb) !important;
    border-color: var(--xh-brand, #4FAA2C) !important;
    color: var(--xh-brand, #4FAA2C) !important;
    box-shadow: 0 0 0 3px rgba(79, 170, 44, 0.15) !important;
  }

  /* Menú Desplegable Móvil (#mainNavbar) */
  #mainNavbar {
    width: 100% !important;
    border-top: 1px solid var(--xh-border, #e2e8f0);
    padding: 14px 0 18px 0 !important;
    margin-top: 10px !important;
    animation: xhNavSlideDown 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

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

  #mainNavbar.collapse:not(.show) {
    display: none !important;
  }

  #mainNavbar.collapse.show,
  #mainNavbar.show {
    display: block !important;
    visibility: visible !important;
  }

  #mainNavbar .xh-mobile-nav-list,
  #mainNavbar .xh-nav-list,
  #mainNavbar ul.navbar-nav {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  #mainNavbar .nav-item {
    width: 100% !important;
    margin: 0 !important;
    display: block !important;
    float: none !important;
  }

  #mainNavbar .nav-link,
  #mainNavbar .nav-item .nav-link,
  #mainNavbar .xh-mobile-nav-list .nav-link {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    padding: 11px 14px !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    color: var(--xh-text-main, #0f172a) !important;
    border-radius: var(--xh-radius-md, 10px) !important;
    background: transparent;
    transition: var(--xh-transition);
    text-decoration: none !important;
    white-space: normal !important;
    min-height: 44px; /* a11y touch target */
  }

  #mainNavbar .nav-link i.mr-1,
  #mainNavbar .nav-link i.mr-2 {
    width: 22px;
    text-align: center;
    color: var(--xh-text-secondary, #64748b);
  }

  #mainNavbar .nav-link:hover,
  #mainNavbar .nav-item.active > .nav-link,
  #mainNavbar .nav-link.active {
    background-color: var(--xh-brand-light, #eef9eb) !important;
    color: var(--xh-brand, #4FAA2C) !important;
  }

  #mainNavbar .nav-item.active > .nav-link i,
  #mainNavbar .nav-link:hover i {
    color: var(--xh-brand, #4FAA2C) !important;
  }

  /* Chevron Indicador para Submenús */
  #mainNavbar .dropdown-toggle::after {
    display: inline-block !important;
    border: none !important;
    content: "\f078" !important;
    font-family: "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important;
    font-size: 0.72rem !important;
    color: var(--xh-text-muted, #94a3b8) !important;
    transition: transform 0.2s ease !important;
    margin-left: auto !important;
  }

  #mainNavbar .dropdown.show > .dropdown-toggle::after,
  #mainNavbar .nav-item.show > .dropdown-toggle::after {
    transform: rotate(180deg) !important;
    color: var(--xh-brand, #4FAA2C) !important;
  }

  /* Acordeón Inline para Submenús (Sin desbordes flotantes) */
  #mainNavbar .dropdown-menu {
    position: static !important;
    float: none !important;
    display: none;
    width: 100% !important;
    min-width: 0 !important;
    box-shadow: none !important;
    border: 1px solid var(--xh-border-light, #f1f5f9) !important;
    background: var(--xh-bg-subtle, #f8fafc) !important;
    border-radius: var(--xh-radius-md, 10px) !important;
    padding: 6px !important;
    margin: 4px 0 8px 0 !important;
    transform: none !important;
  }

  #mainNavbar .dropdown.show > .dropdown-menu,
  #mainNavbar .nav-item.show > .dropdown-menu,
  #mainNavbar .dropdown-menu.show {
    display: block !important;
    animation: xhSubMenuExpand 0.2s ease-out;
  }

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

  #mainNavbar .dropdown-item {
    display: flex !important;
    align-items: center !important;
    padding: 9px 12px !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    color: var(--xh-text-secondary, #475569) !important;
    border-radius: var(--xh-radius-sm, 6px) !important;
    background: transparent !important;
    white-space: normal !important;
    min-height: 40px;
    text-decoration: none !important;
  }

  #mainNavbar .dropdown-item:hover,
  #mainNavbar .dropdown-item:focus {
    background: var(--xh-brand-light, #eef9eb) !important;
    color: var(--xh-brand, #4FAA2C) !important;
  }

  /* Acciones Rápidas Móviles al pie del menú */
  .xh-mobile-nav-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 14px;
    margin-top: 12px;
    border-top: 1px solid var(--xh-border, #e2e8f0);
  }

  .xh-mobile-nav-actions .btn {
    width: 100%;
    justify-content: center;
    padding: 10px 16px;
    font-size: 0.88rem;
    font-weight: 700;
    border-radius: var(--xh-radius-pill, 9999px) !important;
  }
}

/* Ocultar elementos móviles en pantallas de escritorio (>= 992px) */
@media (min-width: 992px) {
  #mainNavbar,
  .xh-mobile-nav-toggle {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
}

/* Modo Oscuro para Menú Móvil */
[data-theme="dark"] #mainNavbar {
  border-top-color: var(--xh-border, #334155);
}

[data-theme="dark"] #mainNavbar .dropdown-menu {
  background: var(--xh-bg-surface-elevated, #1e293b) !important;
  border-color: var(--xh-border, #334155) !important;
}

[data-theme="dark"] #mainNavbar .nav-link {
  color: var(--xh-text-main, #f8fafc) !important;
}

[data-theme="dark"] #mainNavbar .dropdown-item {
  color: var(--xh-text-secondary, #94a3b8) !important;
}

[data-theme="dark"] .xh-mobile-nav-toggle {
  background: var(--xh-bg-surface, #111827) !important;
  border-color: var(--xh-border, #334155) !important;
  color: var(--xh-text-main, #f8fafc) !important;
}

/* Ajustes Específicos para Teléfonos Móviles (<= 576px) */
@media (max-width: 576px) {
  .navbar-brand {
    margin-right: 8px !important;
  }

  .xh-brand-logo-img {
    height: 28px !important;
    max-width: 125px !important;
  }

  .xh-topbar {
    font-size: 0.75rem !important;
    padding: 5px 0 !important;
  }

  .active-client-badge {
    padding: 2px 6px !important;
  }

  .xh-hero-welcome {
    padding: 16px !important;
  }

  .xh-catalog-hero {
    padding: 20px 16px !important;
  }

  .xh-stats-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Carrito compacto en móvil */
  .xh-cart-btn {
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}