/* ============================================================
   HZ THEME LAYER — variables de tema claro/oscuro + rediseño.
   Se carga DESPUES de style.css/bootstrap/custom-responsive.css
   para poder sobreescribirlos sin tocar esos archivos.
   ============================================================ */

:root,
:root[data-theme="light"] {
    --hz-bg-page: #f4f6fb;
    --hz-bg-card: #ffffff;
    --hz-bg-card-alt: #f8fafc;
    --hz-bg-sidebar: #101c34;
    --hz-bg-header: #101c34;
    --hz-bg-input: #ffffff;
    --hz-text-primary: #101828;
    --hz-text-muted: #64748b;
    --hz-text-inverse: #f8fafc;
    --hz-border: #e2e8f0;
    --hz-border-strong: #cbd5e1;
    --hz-accent: #1e96a8;
    --hz-accent-dark: #177f8f;
    --hz-accent-soft: #e6f5f7;
    --hz-blue: #2563eb;
    --hz-blue-soft: #e8f0fe;
    --hz-green: #16a34a;
    --hz-green-soft: #e7f7ed;
    --hz-amber: #d97706;
    --hz-amber-soft: #fef3e0;
    --hz-purple: #7c3aed;
    --hz-purple-soft: #f1eafe;
    --hz-shadow: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
    --hz-shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
    --hz-radius: 14px;
    --hz-radius-sm: 10px;
}

:root[data-theme="dark"] {
    --hz-bg-page: #0b1220;
    --hz-bg-card: #131c2e;
    --hz-bg-card-alt: #182338;
    --hz-bg-sidebar: #0b1220;
    --hz-bg-header: #0b1220;
    --hz-bg-input: #182338;
    --hz-text-primary: #e5eaf3;
    --hz-text-muted: #8896ab;
    --hz-text-inverse: #0b1220;
    --hz-border: #223049;
    --hz-border-strong: #2c3c59;
    --hz-accent: #29b6c9;
    --hz-accent-dark: #1e96a8;
    --hz-accent-soft: rgba(41, 182, 201, 0.12);
    --hz-blue: #5b8def;
    --hz-blue-soft: rgba(91, 141, 239, 0.14);
    --hz-green: #34d399;
    --hz-green-soft: rgba(52, 211, 153, 0.12);
    --hz-amber: #f5a623;
    --hz-amber-soft: rgba(245, 166, 35, 0.12);
    --hz-purple: #a78bfa;
    --hz-purple-soft: rgba(167, 139, 250, 0.14);
    --hz-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    --hz-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
}

html[data-theme] body,
html[data-theme] #content,
html[data-theme] .wrapper {
    background: var(--hz-bg-page) !important;
    color: var(--hz-text-primary);
}

/* ---------- Header ---------- */
html[data-theme] nav.clientx.header,
html[data-theme] header.clientx.header {
    background: var(--hz-bg-header) !important;
    border-bottom: 1px solid var(--hz-border);
}

.hz-header-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 8px 14px;
    color: var(--hz-text-muted);
    cursor: pointer;
    max-width: 420px;
    width: 100%;
    transition: border-color 0.15s ease;
}
.hz-header-search:hover,
.hz-header-search.hz-active {
    border-color: var(--hz-accent);
}
.hz-header-search input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--hz-text-inverse);
    flex: 1;
    font-size: 13px;
}
.hz-header-search input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}
.hz-header-search kbd {
    font-size: 11px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 5px;
    padding: 2px 6px;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
}

.hz-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: var(--hz-text-inverse);
    cursor: pointer;
}
.hz-theme-toggle:hover { background: rgba(255, 255, 255, 0.12); }
.hz-theme-toggle .hz-icon-moon { display: none; }
html[data-theme="dark"] .hz-theme-toggle .hz-icon-sun { display: none; }
html[data-theme="dark"] .hz-theme-toggle .hz-icon-moon { display: inline-block; }

/* ---------- Header icon badges + account trigger ---------- */
header.clientx.header .header-right .navbar-nav > li {
    display: inline-flex;
    align-items: center;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}
.hz-icon-group {
    display: flex;
    align-items: center;
    gap: 3px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 4px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 2px 6px rgba(0, 0, 0, 0.12);
}
.hz-icon-group > .dropdown,
.hz-icon-group > .hz-icon-badge-wrap {
    display: inline-flex;
}
header.clientx.header .header-right .navbar-nav .hz-icon-group .hz-theme-toggle,
header.clientx.header .header-right .navbar-nav .hz-icon-group a.dropdown-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: transparent;
    color: var(--hz-text-inverse);
    font-size: 14px;
    position: relative;
    padding: 0 !important;
    margin: 0;
    border: none;
}
header.clientx.header .header-right .navbar-nav .hz-icon-group a.dropdown-toggle:hover {
    background: rgba(255, 255, 255, 0.12);
}
header.clientx.header .header-right .navbar-nav > li.user-menu > a.dropdown-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--hz-text-inverse);
    font-size: 15px;
    padding: 0 !important;
    margin: 0;
}
header.clientx.header .header-right .navbar-nav > li.user-menu > a.dropdown-toggle:hover {
    background: rgba(255, 255, 255, 0.15);
}
.hz-icon-badge-wrap a.dropdown-toggle { position: relative; }
.hz-icon-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #e5484d;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}
.hz-account-trigger { display: flex; align-items: center; }
.hz-account-toggle {
    display: flex !important;
    align-items: center;
    gap: 9px;
    padding: 4px 12px 4px 4px !important;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.hz-account-toggle:hover {
    background: rgba(255, 255, 255, 0.12);
}
.hz-account-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: var(--hz-accent);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
}
.hz-account-name {
    color: var(--hz-text-inverse);
    font-size: 13px;
    font-weight: 600;
}
.hz-account-caret {
    color: rgba(255, 255, 255, 0.5);
    font-size: 10px;
}

/* ---------- Selector de moneda en el header ---------- */
.hz-icon-group .hz-currency-toggle {
    width: auto !important;
    padding: 0 8px !important;
    gap: 5px;
}
.hz-flag {
    display: inline-block;
    width: 18px;
    height: 13px;
    border-radius: 2px;
    background-color: #888;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2) inset;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}
.hz-flag-cop {
    background: linear-gradient(to bottom, #FCD116 0 50%, #003893 50% 75%, #CE1126 75% 100%);
}
.hz-flag-usd {
    background-image:
        linear-gradient(to right, #3c3b6e 38%, transparent 38%),
        repeating-linear-gradient(to bottom, #b22234 0 15%, #fff 15% 30%);
}
.hz-flag-eu, .hz-flag-eur {
    background: #003399;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2) inset, 0 0 0 2px #FFCC00 inset;
}
.hz-flag-ars {
    background: linear-gradient(to bottom, #74ACDF 0 33%, #fff 33% 66%, #74ACDF 66% 100%);
}
.hz-flag-clp {
    background: linear-gradient(to bottom, #fff 0 50%, #D52B1E 50% 100%);
}
.hz-flag-clp::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 45%;
    height: 50%;
    background: #0039A6;
}
.hz-currency-code {
    font-size: 12px;
    font-weight: 700;
    color: var(--hz-text-inverse);
    letter-spacing: 0.02em;
}
.hz-currency-menu.dropdown-menu {
    min-width: 170px;
}
.hz-currency-menu a {
    display: flex !important;
    align-items: center;
    gap: 8px;
}
.hz-currency-menu a small {
    margin-left: auto;
    opacity: 0.6;
    font-weight: 400;
}
.hz-currency-menu a.active {
    font-weight: 700;
    color: var(--hz-accent) !important;
}

/* ---------- Search modal (Ctrl+K) ---------- */
.hz-search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8, 12, 22, 0.6);
    z-index: 3000;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 10vh 16px 0;
}
.hz-search-overlay.hz-open { display: flex; }
.hz-search-box {
    background: var(--hz-bg-card);
    border-radius: var(--hz-radius);
    width: 100%;
    max-width: 620px;
    box-shadow: var(--hz-shadow-md);
    overflow: hidden;
    border: 1px solid var(--hz-border);
}
.hz-search-box input {
    width: 100%;
    border: none;
    outline: none;
    padding: 18px 20px;
    font-size: 15px;
    background: var(--hz-bg-card);
    color: var(--hz-text-primary);
    border-bottom: 1px solid var(--hz-border);
}
.hz-search-results {
    max-height: 50vh;
    overflow-y: auto;
    padding: 8px;
}
.hz-search-group-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--hz-text-muted);
    padding: 10px 12px 4px;
}
.hz-search-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--hz-radius-sm);
    color: var(--hz-text-primary);
    text-decoration: none;
}
.hz-search-item:hover, .hz-search-item.hz-active {
    background: var(--hz-accent-soft);
    color: var(--hz-text-primary);
    text-decoration: none;
}
.hz-search-empty {
    padding: 24px;
    text-align: center;
    color: var(--hz-text-muted);
    font-size: 13px;
}

/* ---------- Sidebar ---------- */
html[data-theme] #sidebar {
    background: var(--hz-bg-sidebar) !important;
    border-right: 1px solid var(--hz-border);
}
html[data-theme] #sidebar .hz-nav-section-title {
    color: rgba(255, 255, 255, 0.35);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 18px 20px 8px;
}
html[data-theme] #sidebar ul.components > li > a {
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: var(--hz-radius-sm);
    margin: 3px 12px;
    padding: 9px 12px !important;
    border-bottom: none !important;
    color: rgba(255, 255, 255, 0.72);
    font-weight: 600;
    font-size: 13.5px;
    position: relative;
    transition: background 0.15s ease, color 0.15s ease;
}
html[data-theme] #sidebar ul.components > li > a > i:first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.06);
    font-size: 14px !important;
    transition: background 0.15s ease;
}
html[data-theme] #sidebar ul.components > li > a:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}
html[data-theme] #sidebar ul.components > li > a:hover > i:first-child {
    background: rgba(255, 255, 255, 0.14);
}
html[data-theme] #sidebar ul.components > li > a.active,
html[data-theme] #sidebar ul.components > li.hz-open > a {
    background: var(--hz-bg-card-alt);
    color: #ffffff;
}
html[data-theme] #sidebar ul.components > li > a.active {
    box-shadow: inset 3px 0 0 0 var(--hz-accent);
}
html[data-theme] #sidebar ul.components > li > a.active > i:first-child {
    background: linear-gradient(135deg, var(--hz-accent), var(--hz-accent-dark));
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.hz-nav-badge {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

/* ---------- Cards / dashboard ---------- */
.hz-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}
@media (max-width: 991px) { .hz-stat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .hz-stat-grid { grid-template-columns: 1fr; } }

.hz-stat-card {
    background: var(--hz-bg-card);
    border: 1px solid var(--hz-border);
    border-radius: var(--hz-radius);
    padding: 18px;
    box-shadow: var(--hz-shadow);
    cursor: pointer;
    text-decoration: none;
    display: block;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.hz-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--hz-shadow-md);
    text-decoration: none;
}
.hz-stat-card .hz-stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 14px;
}
.hz-stat-card .hz-stat-value {
    font-size: 26px;
    font-weight: 700;
    color: var(--hz-text-primary);
    display: block;
}
.hz-stat-card .hz-stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--hz-text-muted);
    font-weight: 600;
}
.hz-icon-blue { background: var(--hz-blue-soft); color: var(--hz-blue); }
.hz-icon-green { background: var(--hz-green-soft); color: var(--hz-green); }
.hz-icon-purple { background: var(--hz-purple-soft); color: var(--hz-purple); }
.hz-icon-amber { background: var(--hz-amber-soft); color: var(--hz-amber); }

.hz-card {
    background: var(--hz-bg-card);
    border: 1px solid var(--hz-border);
    border-radius: var(--hz-radius);
    box-shadow: var(--hz-shadow);
    padding: 20px;
    margin-bottom: 20px;
}
.hz-card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--hz-text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}
.hz-card-title .hz-card-title-link {
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
    color: var(--hz-accent);
    text-decoration: none;
}

.hz-service-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--hz-border);
    gap: 10px 12px;
}
.hz-service-row:last-child { border-bottom: none; }
.hz-service-row .hz-service-domain {
    font-weight: 600;
    color: var(--hz-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hz-service-row .hz-service-plan {
    font-size: 12px;
    color: var(--hz-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hz-service-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1 1 200px;
    max-width: 100%;
    overflow: hidden;
}
.hz-service-left > div { min-width: 0; }
.hz-service-logo {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--hz-bg-card-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.hz-service-logo img {
    max-width: 26px;
    max-height: 26px;
}
.hz-service-logo i {
    color: var(--hz-text-muted);
    font-size: 16px;
}
.hz-service-right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    flex-shrink: 0;
    margin-left: auto;
}
.hz-service-due {
    font-size: 12px;
    color: var(--hz-text-muted);
    white-space: nowrap;
}
.hz-service-btn {
    padding: 7px 16px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
}
@media (max-width: 767px) {
    .hz-service-row { flex-wrap: wrap; }
    .hz-service-right { width: 100%; justify-content: space-between; }
}
.hz-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    text-transform: uppercase;
}
.hz-badge-active { background: var(--hz-green-soft); color: var(--hz-green); }
.hz-badge-pending { background: var(--hz-amber-soft); color: var(--hz-amber); }

.hz-empty-state {
    color: var(--hz-text-muted);
    font-size: 13px;
    padding: 34px 0;
    text-align: center;
}
.hz-icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--hz-bg-card-alt);
    color: var(--hz-text-muted);
    margin-left: 4px;
    border: none;
}
.hz-icon-link:hover {
    background: var(--hz-accent-soft);
    color: var(--hz-accent);
    text-decoration: none;
}

/* ---------- Login / Register ---------- */
html[data-theme] #page-wrapper .bg-box {
    background: var(--hz-bg-card) !important;
    border-radius: var(--hz-radius);
}
html[data-theme] #page-wrapper .rubuts {
    background: linear-gradient(160deg, var(--hz-bg-sidebar), var(--hz-accent-dark)) !important;
    border-radius: var(--hz-radius);
    color: var(--hz-text-inverse);
}
html[data-theme] #page-wrapper .inputBox input {
    background: var(--hz-bg-input) !important;
    color: var(--hz-text-primary) !important;
    border-color: var(--hz-border) !important;
}
.inputBox.hz-input-has-icon { position: relative; }
.inputBox.hz-input-has-icon .hz-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--hz-text-muted);
    font-size: 14px;
    pointer-events: none;
    z-index: 2;
}
.inputBox.hz-input-has-icon input.input { padding-left: 40px !important; }
.inputBox.hz-input-has-icon .inputText { left: 40px !important; }

.hz-auth-side { display: flex; flex-direction: column; }
.hz-auth-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 24px;
}
.hz-auth-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 12px 14px;
    color: var(--hz-text-inverse);
    font-size: 13px;
    font-weight: 600;
}
.hz-auth-feature i { color: var(--hz-accent); font-size: 16px; }
.hz-auth-side-img { margin-top: 24px; display: block; }
@media (max-width: 767px) {
    .hz-auth-features { grid-template-columns: 1fr; }
}
.hz-titel-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    min-width: 30px;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--hz-accent-soft);
    border: 1px solid rgba(41, 182, 201, 0.25);
    color: var(--hz-accent);
    font-size: 13px;
    line-height: 1;
    margin-right: 10px;
    vertical-align: middle;
}
/* --hz-accent-soft en modo oscuro es un tinte al 12% (casi invisible
   sobre la tarjeta oscura), por eso el icono se veia "flotando" sin
   caja visible; se refuerza solo para dark. */
html[data-theme="dark"] .hz-titel-icon {
    background: rgba(41, 182, 201, 0.16);
    border-color: rgba(41, 182, 201, 0.35);
}
html[data-theme] .Pers-titel {
    display: flex !important;
    align-items: center !important;
}
html[data-theme] #page-wrapper .form-box.hz-card { margin-bottom: 20px; }
.hz-auth-side-btn { margin-top: 24px; }

/* ---------- Login/Register: fondo, bordes, textos legibles en oscuro ---------- */
html[data-theme] .host-row {
    background: var(--hz-bg-page) !important;
}
html[data-theme] #page-wrapper .bg-box {
    background: var(--hz-bg-card) !important;
    border-radius: var(--hz-radius);
    box-shadow: var(--hz-shadow-md);
}
html[data-theme] #page-wrapper .rubuts {
    background: linear-gradient(160deg, var(--hz-bg-sidebar), var(--hz-accent-dark)) !important;
    border-radius: var(--hz-radius);
    color: var(--hz-text-inverse);
    overflow: hidden;
}
html[data-theme] #page-wrapper .inputText,
html[data-theme] #page-wrapper .focus .inputText {
    color: var(--hz-text-muted) !important;
}
html[data-theme] #page-wrapper .inputBox input,
html[data-theme] #page-wrapper .inputBox select,
html[data-theme] #page-wrapper .inputBox textarea {
    background: var(--hz-bg-input) !important;
    color: var(--hz-text-primary) !important;
    border: 1px solid var(--hz-border-strong) !important;
    border-radius: 8px !important;
    padding: 0 14px !important;
}
html[data-theme] #page-wrapper .inputBox select { padding: 0 14px !important; height: 46px; }
html[data-theme] #page-wrapper .info-titel,
html[data-theme] #page-wrapper .titel-sup,
html[data-theme] #page-wrapper .wel-titel {
    color: var(--hz-text-primary) !important;
}
html[data-theme] #page-wrapper .login-form .checkbox label,
html[data-theme] #page-wrapper .field-help-text,
html[data-theme] #page-wrapper .marketing-email-optin p {
    color: var(--hz-text-muted) !important;
}
/* ---------- Ocultar flechitas flotantes de colapso (quedaban sueltas y feas).
   El disparador real del menu movil es .hz-mobile-menu-btn (ver bloque
   'Menu principal en movil'), no este boton del tema base. ---------- */
#sidebarCollapse.shift-btn,
#sidebarCollapse-left.shift-btn {
    display: none !important;
}

html[data-theme] #page-wrapper .back-arrow a {
    background: var(--hz-bg-card);
    border-color: var(--hz-border);
    color: var(--hz-text-primary);
    box-shadow: none;
}

/* ---------- Fondo "espacio" para login/registro/reset (comparten body.login-bg) ---------- */
body.login-bg {
    background-color: #070c18 !important;
    background-image:
        radial-gradient(1.6px 1.6px at 10% 12%, #ffffff, transparent),
        radial-gradient(1.2px 1.2px at 24% 46%, #ffffff, transparent),
        radial-gradient(1.8px 1.8px at 38% 8%, #ffffff, transparent),
        radial-gradient(1.2px 1.2px at 52% 62%, #ffffff, transparent),
        radial-gradient(1.6px 1.6px at 66% 24%, #ffffff, transparent),
        radial-gradient(1.2px 1.2px at 78% 52%, #ffffff, transparent),
        radial-gradient(1.8px 1.8px at 88% 14%, #ffffff, transparent),
        radial-gradient(1.2px 1.2px at 94% 70%, #ffffff, transparent),
        radial-gradient(1.4px 1.4px at 6% 78%, #ffffff, transparent),
        radial-gradient(1.4px 1.4px at 44% 88%, #ffffff, transparent),
        radial-gradient(ellipse 900px 500px at 15% -10%, rgba(41, 182, 201, 0.28), transparent 60%),
        radial-gradient(ellipse 800px 500px at 100% 100%, rgba(30, 150, 168, 0.22), transparent 60%),
        linear-gradient(160deg, #070c18 0%, #0b1526 55%, #0a1420 100%) !important;
    background-repeat: repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, no-repeat, no-repeat, no-repeat;
    background-size: 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, cover, cover, cover;
    background-attachment: fixed;
}
html[data-theme] .host-row {
    background: transparent !important;
}

/* ---------- Login/Registro: columnas de igual altura ---------- */
#page-wrapper .host-row {
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch;
}
@media (max-width: 767px) {
    #page-wrapper .host-row { display: block !important; }
}

/* ---------- Titulos de sección del registro, mas presentes ---------- */
html[data-theme] #page-wrapper .info-titel {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.01em;
    padding-bottom: 14px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--hz-border);
}
html[data-theme] #page-wrapper .info-titel small {
    font-weight: 400;
    color: var(--hz-text-muted);
}

/* ---------- Header: profesional, mas alto, alineado, efecto glossy ---------- */
header.clientx.header {
    padding: 0 !important;
    min-height: 72px !important;
    height: 72px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 45%),
        var(--hz-bg-header) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.28);
    display: flex;
    align-items: center;
}
header.clientx.header .container-fluid {
    display: flex;
    align-items: center;
    gap: 28px;
    width: 100%;
    flex-wrap: nowrap;
    padding: 0 28px;
}
header.clientx.header .header-left {
    float: none;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    position: relative;
    padding-right: 28px;
}
header.clientx.header .header-left::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 32px;
    background: rgba(255, 255, 255, 0.1);
}
header.clientx.header .header-left .logo img {
    max-height: 44px;
    width: auto;
}
header.clientx.header .hz-header-search {
    margin: 0;
    flex: 1 1 auto;
    max-width: 460px;
}
header.clientx.header .header-right {
    float: none;
    margin-left: auto;
    flex-shrink: 0;
}
header.clientx.header .header-right .navbar-right {
    float: none;
}
header.clientx.header .header-right .navbar-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}
@media (min-width: 768px) {
    header.clientx.header .top-resp { display: none; }
}
.hz-account-trigger,
.user-menu {
    position: relative;
    margin-left: 6px !important;
    padding-left: 16px !important;
}
.hz-account-trigger::before,
.user-menu::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 28px;
    background: rgba(255, 255, 255, 0.1);
}
/* el header subio de 64px a 72px: reacomodar todo lo que depende de ese offset */
#sidebar,
.defaultClientxSidebar,
.menu-myaccount-clientx,
.menu-notification-clientx,
.menu-settings-clientx,
.menu-cart-clientx {
    top: 72px !important;
}
#content {
    top: 72px !important;
}
@media (max-width: 767px) {
    header.clientx.header .container-fluid { gap: 12px; padding: 0 14px; flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 10px; }
    header.clientx.header { height: auto; min-height: 60px !important; }
    header.clientx.header .header-left { padding-right: 12px; }
    header.clientx.header .header-left .logo img { max-height: 36px; }
    header.clientx.header .hz-header-search { order: 3; flex: 1 1 100%; max-width: none; }
}

/* ---------- Menu principal en movil: rediseño completo. El boton
   hamburguesa ahora vive DENTRO de la misma lista de iconos del header
   (como primer <li>), no como hermano suelto -- asi queda siempre en
   la misma fila que el resto, sin depender de flex-wrap/order (eso
   fue lo que fallaba antes: el navegador lo mandaba a su propia fila). ---------- */
header.clientx.header .header-right .navbar-nav > li.hz-mobile-menu-li,
html[data-theme] .hz-mobile-menu-li {
    display: none !important;
}
@media (max-width: 767px) {
    header.clientx.header .header-left {
        display: none !important;
    }
    header.clientx.header .header-right {
        margin-left: 0 !important;
    }
    html[data-theme] .hz-mobile-menu-li {
        display: flex !important;
    }
    html[data-theme] .hz-mobile-menu-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        flex-shrink: 0;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 8px;
    }
    html[data-theme] .hz-mobile-menu-btn span {
        float: none;
        display: flex;
    }
    html[data-theme] .hz-mobile-menu-btn i {
        color: #ffffff;
        font-size: 15px;
    }
    html[data-theme] .hz-mobile-menu-btn.active i.open { display: none; }
    html[data-theme] .hz-mobile-menu-btn:not(.active) i.close { display: none; }

    /* El toggle de "colapsar" de escritorio (min.js) tambien agrega/quita .active al mismo boton;
       en escritorio eso encoge el sidebar con margin-left:-200px, pero en movil dejaria el menu
       abierto empujado casi fuera de pantalla. Se anula ese margen solo en movil. */
    #sidebar.active {
        margin-left: 0 !important;
    }
    #sidebar {
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);
    }
    #sidebar,
    .defaultClientxSidebar,
    .menu-myaccount-clientx,
    .menu-notification-clientx,
    .menu-settings-clientx,
    .menu-cart-clientx,
    #content {
        top: 112px !important;
    }
}

/* Logo dentro del menu lateral en movil (reemplaza al logo del header,
   que en movil se esconde para no duplicarse). */
.hz-sidebar-mobile-logo {
    display: none;
}
@media (max-width: 767px) {
    .hz-sidebar-mobile-logo {
        display: block;
        padding: 18px 20px 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        margin-bottom: 8px;
    }
    .hz-sidebar-mobile-logo img {
        max-height: 30px;
        max-width: 100%;
        width: auto;
    }
}

/* ---------- Panel derecho (Su informacion) — estaba blanco, ahora sincronizado con el tema ---------- */
html[data-theme] .defaultClientxSidebar {
    background: var(--hz-bg-card) !important;
    border-left: 1px solid var(--hz-border) !important;
}
html[data-theme] .defaultClientxSidebar .panel-sidebar .panel-title,
html[data-theme] .defaultClientxSidebar .panel-sidebar > .panel-footer,
html[data-theme] .defaultClientxSidebar .list-group a,
html[data-theme] .defaultClientxSidebar .panel-body strong {
    color: var(--hz-text-primary) !important;
}
html[data-theme] .defaultClientxSidebar .panel-heading i,
html[data-theme] .defaultClientxSidebar .list-group i,
html[data-theme] .defaultClientxSidebar .panel-sidebar .list-group-item i,
html[data-theme] .defaultClientxSidebar .panel-body,
html[data-theme] .defaultClientxSidebar .panel-body em {
    color: var(--hz-text-muted) !important;
}
html[data-theme] .defaultClientxSidebar .panel {
    box-shadow: none;
    border-bottom: 1px solid var(--hz-border);
}
html[data-theme] .defaultClientxSidebar .panel-footer .btn-default {
    color: var(--hz-accent) !important;
    background-color: var(--hz-accent-soft) !important;
    border-color: var(--hz-accent-soft) !important;
}
html[data-theme] .defaultClientxSidebar .list-group a.list-group-item:hover,
html[data-theme] .defaultClientxSidebar .panel-sidebar a.list-group-item.active {
    color: var(--hz-text-primary) !important;
}
html[data-theme] .defaultClientxSidebar .panel-sidebar a.list-group-item.active,
html[data-theme] .defaultClientxSidebar .panel-sidebar a.list-group-item.active:focus,
html[data-theme] .defaultClientxSidebar .panel-sidebar a.list-group-item.active:hover {
    background-color: var(--hz-accent-soft) !important;
    border-color: var(--hz-accent-soft) !important;
}
html[data-theme] .defaultClientxSidebar .list-group a.list-group-item:hover::before,
html[data-theme] .defaultClientxSidebar .panel-sidebar a.list-group-item.active::before {
    background: var(--hz-accent) !important;
}
html[data-theme] .defaultClientxSidebar input,
html[data-theme] .defaultClientxSidebar select,
html[data-theme] .defaultClientxSidebar textarea {
    background: var(--hz-bg-input) !important;
    color: var(--hz-text-primary) !important;
    border-color: var(--hz-border) !important;
}

/* Cajas de color solido (Generacion de Ingresos / Credito Disponible) dentro del panel derecho:
   tienen su propio fondo teal a proposito, no deben heredar el gris tenue del panel-body. */
html[data-theme] .defaultClientxSidebar .revenue {
    background: #1e96a8 !important;
}
html[data-theme] .defaultClientxSidebar .revenue .rev,
html[data-theme] .defaultClientxSidebar .revenue .pric-dol,
html[data-theme] .defaultClientxSidebar .revenue .price_wrapper,
html[data-theme] .defaultClientxSidebar .revenue .price_wrapper a {
    color: #ffffff !important;
}
html[data-theme] .defaultClientxSidebar .revenue .price_wrapper a {
    text-decoration: underline;
}

/* ---------- Submenus del menu izquierdo: rediseño completo ---------- */
#sidebar .hz-nav-caret {
    margin-left: auto;
    font-size: 10px !important;
    color: rgba(255, 255, 255, 0.35) !important;
    transition: transform 0.25s ease;
}
#sidebar li.hz-has-children.hz-open > a .hz-nav-caret {
    transform: rotate(180deg);
    color: rgba(255, 255, 255, 0.85) !important;
}
html[data-theme] #sidebar li.hz-has-children.hz-open > a {
    background: var(--hz-bg-card-alt) !important;
    color: #ffffff !important;
}
html[data-theme] #sidebar li.hz-has-children.hz-open > a > i:first-child {
    background: rgba(255, 255, 255, 0.14);
}
/* Panel anidado en vez de una sola linea a la izquierda */
html[data-theme] #sidebar ul.sidebar_items {
    position: relative;
    margin: 4px 12px 8px 12px;
    padding: 5px;
    border-left: none;
    background: rgba(0, 0, 0, 0.18);
    border-radius: var(--hz-radius-sm);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}
html[data-theme] #sidebar ul.sidebar_items li,
html[data-theme] #sidebar ul.sidebar_items li a {
    border-bottom: none !important;
    border: none !important;
}
html[data-theme] #sidebar ul.sidebar_items li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px !important;
    font-size: 12.5px !important;
    font-weight: 500;
    border-radius: 7px;
    margin: 1px 0;
    color: rgba(255, 255, 255, 0.6) !important;
    transition: background 0.15s ease, color 0.15s ease;
}
html[data-theme] #sidebar ul.sidebar_items li a i {
    font-size: 13px !important;
    color: inherit !important;
    width: 15px;
    text-align: center;
    flex-shrink: 0;
}
html[data-theme] #sidebar ul.sidebar_items li a span {
    font-size: 12.5px !important;
    color: inherit !important;
    font-weight: inherit;
}
/* Marcador para distinguir cada item del submenu cuando no trae icono
   propio (la mayoria de las categorias de productos no tienen uno). */
html[data-theme] #sidebar ul.sidebar_items li a > span:first-child::before {
    content: '–';
    display: inline-block;
    margin-right: 8px;
    color: rgba(255, 255, 255, 0.32);
    font-weight: 700;
}
html[data-theme] #sidebar ul.sidebar_items li a:hover > span:first-child::before,
html[data-theme] #sidebar ul.sidebar_items li a.active > span:first-child::before {
    color: rgba(255, 255, 255, 0.9);
}
html[data-theme] #sidebar ul.sidebar_items li a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff !important;
}
html[data-theme] #sidebar ul.sidebar_items li a.active {
    background: linear-gradient(135deg, var(--hz-accent), var(--hz-accent-dark)) !important;
    color: #ffffff !important;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}

/* ---------- Pagina "Mis Productos y Servicios": titulo, barra de filtros, tabla tipo tarjeta ---------- */
html[data-theme] .hz-page-title {
    background: transparent !important;
}
html[data-theme] .hz-page-title h1 {
    color: var(--hz-text-primary) !important;
    font-size: 22px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}
html[data-theme] .hz-page-title h1 i {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--hz-accent-soft);
    color: var(--hz-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
html[data-theme] .hz-page-title p {
    color: var(--hz-text-muted) !important;
    margin: 6px 0 0 48px;
    font-size: 13px;
}

html[data-theme] .hz-toolbar {
    background: var(--hz-bg-card) !important;
    border: 1px solid var(--hz-border);
    border-radius: var(--hz-radius);
    box-shadow: var(--hz-shadow);
    margin-bottom: 18px;
}
html[data-theme] .hz-toolbar h3,
html[data-theme] .hz-toolbar .supportTotalH3 {
    color: var(--hz-text-primary) !important;
}
html[data-theme] .hz-toolbar .dropdown-toggle {
    color: var(--hz-text-muted) !important;
}
html[data-theme] .hz-toolbar .dropdown-toggle font {
    color: var(--hz-text-primary) !important;
}
html[data-theme] .hz-toolbar .search-query {
    background: var(--hz-bg-input) !important;
    color: var(--hz-text-primary) !important;
    border: 1px solid var(--hz-border-strong) !important;
    border-radius: 8px 0 0 8px !important;
}
html[data-theme] .hz-toolbar .input-group-btn .btn {
    border-radius: 0 8px 8px 0 !important;
    background: var(--hz-accent) !important;
    border-color: var(--hz-accent) !important;
}
html[data-theme] .hz-toolbar .dropdown-menu {
    background: var(--hz-bg-card) !important;
    border: 1px solid var(--hz-border) !important;
    box-shadow: var(--hz-shadow-md) !important;
}
html[data-theme] .hz-toolbar .dropdown-menu a {
    color: var(--hz-text-primary) !important;
}
html[data-theme] .hz-toolbar .dropdown-menu a:hover {
    background: var(--hz-accent-soft) !important;
    color: var(--hz-accent) !important;
}
html[data-theme] .hz-toolbar .add-tick {
    background: var(--hz-accent) !important;
    border-color: var(--hz-accent) !important;
}

html[data-theme] .hz-table-card {
    background: var(--hz-bg-card) !important;
    border: 1px solid var(--hz-border);
    border-radius: var(--hz-radius);
    box-shadow: var(--hz-shadow);
    padding: 8px 20px;
}
html[data-theme] .hz-table-card table {
    background: transparent !important;
}
html[data-theme] .hz-table-card table thead th {
    color: var(--hz-text-muted) !important;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--hz-border) !important;
    background: transparent !important;
}
html[data-theme] .hz-table-card table tbody tr {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-bottom: 1px solid var(--hz-border) !important;
    cursor: pointer;
    transition: background 0.12s ease;
}
html[data-theme] .hz-table-card table tbody tr:hover {
    background: var(--hz-bg-card-alt) !important;
}
html[data-theme] .hz-table-card table tbody tr:last-child {
    border-bottom: none !important;
}
html[data-theme] .hz-table-card table.dataTable,
html[data-theme] .hz-table-card div.dataTables_wrapper {
    background: transparent !important;
}
html[data-theme] .hz-table-card td {
    color: var(--hz-text-primary) !important;
    vertical-align: middle !important;
    padding: 16px 8px !important;
}
html[data-theme] .hz-table-card .doman-url a {
    color: var(--hz-text-primary) !important;
    font-weight: 600;
}
html[data-theme] .hz-table-card .data-url ul li a img {
    border-radius: 6px;
}
html[data-theme] .hz-table-card .activ-right ul li a,
html[data-theme] .hz-table-card .data-url ul li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--hz-bg-card-alt);
    color: var(--hz-text-muted) !important;
    margin-right: 4px;
}
html[data-theme] .hz-table-card .activ-right ul li a:hover {
    background: var(--hz-accent-soft);
    color: var(--hz-accent) !important;
}
html[data-theme] .hz-table-card .dataTables_paginate,
html[data-theme] .hz-table-card .dataTables_info {
    color: var(--hz-text-muted) !important;
}
html[data-theme] .hz-table-card .paginate_button {
    color: var(--hz-text-primary) !important;
}
html[data-theme] .hz-table-card .paginate_button.current {
    background: var(--hz-accent) !important;
    border-color: var(--hz-accent) !important;
    color: #fff !important;
}

.hz-status-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: var(--hz-bg-card-alt);
    color: var(--hz-text-muted);
}
.hz-status-pill.status-active { background: var(--hz-green-soft); color: var(--hz-green); }
.hz-status-pill.status-pending { background: var(--hz-amber-soft); color: var(--hz-amber); }
.hz-status-pill.status-suspended,
.hz-status-pill.status-terminated,
.hz-status-pill.status-cancelled,
.hz-status-pill.status-fraud { background: rgba(229, 72, 77, 0.12); color: #e5484d; }
.hz-status-pill.status-completed { background: var(--hz-blue-soft); color: var(--hz-blue); }
.hz-status-pill.status-paid { background: var(--hz-green-soft); color: var(--hz-green); }
.hz-status-pill.status-unpaid { background: var(--hz-amber-soft); color: var(--hz-amber); }
.hz-status-pill.status-refunded { background: var(--hz-blue-soft); color: var(--hz-blue); }
.hz-status-pill.status-collections,
.hz-status-pill.status-payment,
.hz-status-pill.status-pendingtransfer { background: var(--hz-purple-soft); color: var(--hz-purple); }
.hz-status-pill.status-expired { background: rgba(229, 72, 77, 0.12); color: #e5484d; }
a.hz-status-pill:hover { text-decoration: none; filter: brightness(1.08); }

/* ---------- Barra de herramientas: tabs de filtro, buscador ---------- */
html[data-theme] .hz-toolbar.hz-domains-toolbar,
html[data-theme] .hz-toolbar.hz-invoices-toolbar {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
html[data-theme] .hz-toolbar .open-inv {
    color: var(--hz-text-primary) !important;
    font-weight: 600;
    font-size: 14px;
}
html[data-theme] .hz-invoices-tabs-wrap {
    margin-bottom: 16px;
    background: var(--hz-bg-page) !important;
    border-bottom-color: var(--hz-border) !important;
}
html[data-theme] .hz-invoices-tabs-wrap .expired-col,
html[data-theme] .hz-invoices-tabs-wrap .col-md-9 {
    background: transparent !important;
}
html[data-theme] .hz-table-card thead,
html[data-theme] .hz-table-card thead tr,
html[data-theme] .hz-table-card tr.spaceheade,
html[data-theme] .hz-table-card .sorting-desc {
    background: transparent !important;
    background-color: transparent !important;
}
html[data-theme] ul.tabs.addons {
    display: flex;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}
html[data-theme] ul.tabs.addons li {
    width: auto !important;
    padding: 8px 16px !important;
    border-radius: 999px;
    background: var(--hz-bg-card-alt);
    color: var(--hz-text-muted) !important;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--hz-border);
}
html[data-theme] ul.tabs.addons li.active,
html[data-theme] ul.tabs.addons li:hover {
    background: var(--hz-accent) !important;
    color: #fff !important;
    border-color: var(--hz-accent);
}
html[data-theme] ul.tabs.addons li .label {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    padding: 1px 6px;
    margin-left: 4px;
    font-size: 10px;
}
html[data-theme] .domen-serch {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
html[data-theme] .domen-serch input {
    background: var(--hz-bg-input) !important;
    color: var(--hz-text-primary) !important;
    border: 1px solid var(--hz-border-strong) !important;
    border-radius: 8px 0 0 8px !important;
}
html[data-theme] .domen-serch .btn-info {
    background: var(--hz-accent) !important;
    border-color: var(--hz-accent) !important;
    border-radius: 0 8px 8px 0 !important;
}

/* ---------- Iconos de accion (dominios) ---------- */
html[data-theme] .hz-table-card .mange-server li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--hz-bg-card-alt);
    color: var(--hz-text-muted) !important;
    margin-right: 4px;
}
html[data-theme] .hz-table-card .mange-server li a:hover {
    background: var(--hz-accent-soft);
    color: var(--hz-accent) !important;
}
html[data-theme] .hz-table-card .auto-updt {
    font-size: 12px;
    font-weight: 600;
    color: var(--hz-text-muted) !important;
}
html[data-theme] .hz-table-card .auto-updt.active {
    color: var(--hz-green) !important;
}
html[data-theme] .hz-table-card td a {
    color: var(--hz-text-primary);
}

/* ---------- Tarjetas de ingresos (facturacion) ---------- */
html[data-theme] .hz-revenue-card {
    text-align: left;
    background: var(--hz-bg-card) !important;
    background-image: none !important;
    border: 1px solid var(--hz-border) !important;
    box-shadow: var(--hz-shadow) !important;
}
html[data-theme] .hz-revenue-card .rev {
    color: var(--hz-text-muted) !important;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 10px;
}
html[data-theme] .hz-revenue-card .pric-dol {
    color: var(--hz-text-primary) !important;
    font-size: 26px;
    font-weight: 700;
    display: block;
    margin-bottom: 6px;
}
html[data-theme] .hz-revenue-card .price_wrapper a {
    color: var(--hz-accent) !important;
    font-size: 12px;
    font-weight: 600;
}
html[data-theme] .hz-revenue-card .fund-btn {
    color: #fff !important;
    background: var(--hz-accent);
    padding: 4px 12px;
    border-radius: 8px;
}

/* ---------- Labels reales y siempre visibles en login/registro ---------- */
html[data-theme] #page-wrapper label.hz-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--hz-text-primary) !important;
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}
html[data-theme] #page-wrapper label.hz-label .hz-label-optional {
    font-weight: 400;
    color: var(--hz-text-muted) !important;
    text-transform: none;
}
html[data-theme] #page-wrapper .hz-field-row .col-md-4,
html[data-theme] #page-wrapper .hz-field {
    margin-bottom: 18px;
}
html[data-theme] #page-wrapper .inputBox {
    height: auto !important;
    margin-top: 0 !important;
}
html[data-theme] #page-wrapper .inputBox input,
html[data-theme] #page-wrapper .inputBox select {
    height: 46px !important;
    width: 100%;
}
html[data-theme] #page-wrapper .login-form .form-group.hz-field {
    margin-bottom: 18px;
}
html[data-theme] #page-wrapper .login-form .hz-input-has-icon input.input {
    padding-left: 42px !important;
}

/* ---------- Arreglo columna de acciones en "Mis Productos y Servicios" (se veia espichada) ---------- */
html[data-theme] .hz-table-card .activ-right,
html[data-theme] .hz-table-card td .activ-right {
    float: none !important;
    border-left: none !important;
    min-height: 0 !important;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
html[data-theme] .hz-table-card .activ-right ul {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    margin: 0;
}
html[data-theme] .hz-table-card .activ-right ul li {
    list-style: none;
    float: none !important;
    height: auto !important;
    min-height: 0 !important;
}
html[data-theme] .hz-table-card td.paddingLeftTd {
    padding-right: 12px !important;
}
html[data-theme] .hz-table-card table {
    table-layout: auto;
}
html[data-theme] .hz-table-card table td:last-child,
html[data-theme] .hz-table-card table th:last-child {
    white-space: nowrap;
    width: 1%;
}

/* ============================================================
   TIENDA (orderforms/cartx): categorias + tarjetas de producto
   ============================================================ */
html[data-theme] #order-standard_cart,
html[data-theme] #order-standard_cart .pak-row,
html[data-theme] #order-standard_cart .tab_container,
html[data-theme] #order-standard_cart .choose-pack {
    background: transparent !important;
}
html[data-theme] .order-cart-dashboard .order,
html[data-theme] #order-standard_cart .order {
    color: var(--hz-text-primary) !important;
}

/* Nav de categorias */
html[data-theme] .host-nav {
    background: var(--hz-bg-card) !important;
    border: 1px solid var(--hz-border);
    border-radius: var(--hz-radius);
    box-shadow: var(--hz-shadow);
    padding: 14px 16px !important;
    margin-bottom: 20px;
}
html[data-theme] .host-nav > ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}
html[data-theme] .host-nav li.dropdown .dropdown-menu {
    display: none !important;
}
html[data-theme] .host-nav li.dropdown.hz-open .dropdown-menu {
    display: block !important;
}
html[data-theme] .host-nav .drop-nav {
    background: var(--hz-bg-card-alt) !important;
    color: var(--hz-text-primary) !important;
    border-radius: 999px !important;
    padding: 8px 18px !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 1px solid var(--hz-border);
}
html[data-theme] .host-nav li.active .drop-nav,
html[data-theme] .host-nav .drop-nav:hover {
    background: var(--hz-accent) !important;
    color: #fff !important;
    border-color: var(--hz-accent);
}
html[data-theme] .host-nav .dropdown-menu {
    background: var(--hz-bg-card) !important;
    border: 1px solid var(--hz-border) !important;
    box-shadow: var(--hz-shadow-md) !important;
    border-radius: var(--hz-radius-sm) !important;
}
html[data-theme] .host-nav .dropdown-menu a {
    color: var(--hz-text-primary) !important;
}
html[data-theme] .host-nav .dropdown-menu a:hover {
    background: var(--hz-accent-soft) !important;
    color: var(--hz-accent) !important;
}

/* Encabezado "Elige tu paquete" */
html[data-theme] .pack-hed h2 {
    color: var(--hz-text-primary) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
}

/* Tarjetas de producto */
html[data-theme] .generic_content {
    background: var(--hz-bg-card) !important;
    border: 1px solid var(--hz-border) !important;
    border-radius: var(--hz-radius) !important;
    box-shadow: var(--hz-shadow);
    overflow: hidden;
    padding-bottom: 20px !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
html[data-theme] .generic_content:hover {
    transform: translateY(-3px);
    box-shadow: var(--hz-shadow-md);
}
html[data-theme] .generic_content .head {
    background: linear-gradient(135deg, var(--hz-bg-sidebar), var(--hz-accent-dark)) !important;
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    padding: 20px 12px !important;
}
html[data-theme] .generic_content .head .qty {
    font-size: 11px;
    font-weight: 500;
    opacity: 0.75;
    margin-top: 4px;
}
html[data-theme] .generic_price_tag {
    text-align: center;
    padding: 18px 0 6px;
}
html[data-theme] .generic_price_tag .price {
    color: var(--hz-text-primary) !important;
    font-size: 28px;
    font-weight: 800;
}
html[data-theme] .generic_price_tag .price small {
    color: var(--hz-text-muted) !important;
    font-size: 12px;
    font-weight: 500;
}
html[data-theme] .generic_feature_list {
    padding: 6px 20px 10px;
}
html[data-theme] .generic_feature_list ul li {
    color: var(--hz-text-muted) !important;
    font-size: 13px;
    padding: 7px 0;
    border-bottom: 1px dashed var(--hz-border);
    list-style: none;
}
html[data-theme] .generic_feature_list ul li:last-child {
    border-bottom: none;
}
html[data-theme] .generic_price_btn a.wgs_custom-btn {
    background: var(--hz-accent) !important;
    box-shadow: none !important;
    border-radius: 999px !important;
    padding: 11px 30px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
}
html[data-theme] .generic_price_btn a.wgs_custom-btn:hover {
    background: var(--hz-accent-dark) !important;
}
html[data-theme] .domains-post.custom-sldr .slick-dots li button:before {
    color: var(--hz-text-muted) !important;
}
html[data-theme] .domains-post.custom-sldr .slick-dots li.slick-active button:before {
    color: var(--hz-accent) !important;
}

/* ============================================================
   "Mis Datos" y paginas hermanas (tarjeta de credito, contactos,
   contrasena, seguridad) que comparten includes/contact_head.tpl
   ============================================================ */
html[data-theme] .hz-account-tabs {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 20px;
    padding: 0 !important;
}
/* cpanel.css trae ".user-accout{background:#177f8f}" sin ningun scope:
   ese era el fondo teal solido detras de las pestanas que nunca se
   habia encontrado. */
html[data-theme] .hz-account-tabs .user-accout {
    background: transparent !important;
    width: 100%;
}
html[data-theme] .hz-account-tabs .user-accout ul.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}
html[data-theme] .hz-account-tabs .user-accout ul.tabs li {
    display: flex;
    align-items: center;
    gap: 7px;
    width: auto !important;
    background: var(--hz-bg-card-alt) !important;
    color: var(--hz-text-muted) !important;
    border-radius: var(--hz-radius-sm) !important;
    padding: 9px 15px !important;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--hz-border) !important;
    margin: 0 !important;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
html[data-theme] .hz-account-tabs .user-accout ul.tabs li:hover {
    color: var(--hz-text-primary) !important;
    border-color: var(--hz-border-strong) !important;
}
html[data-theme] .hz-account-tabs .user-accout ul.tabs li.active {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--hz-accent), var(--hz-accent-dark)) !important;
    border-color: transparent !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.2) !important;
}
html[data-theme] .hz-account-tabs .tbs-icone {
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1;
    color: inherit !important;
}
html[data-theme] .hz-account-tabs .user-accout ul.tabs li.active::after,
html[data-theme] .hz-account-tabs .user-accout ul.tabs li:hover::after {
    display: none;
}
@media (max-width: 600px) {
    html[data-theme] .hz-account-tabs .user-accout ul.tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
}
html[data-theme] #page-wrapper .acct-btn,
html[data-theme] .acct-btn {
    color: var(--hz-text-primary) !important;
    background: var(--hz-bg-card-alt);
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--hz-border);
}
html[data-theme] .Pers-titel {
    color: var(--hz-text-primary) !important;
    font-size: 16px;
    font-weight: 700;
    padding-bottom: 14px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--hz-border);
    display: flex;
    align-items: center;
}
html[data-theme] .formBox h5 {
    color: var(--hz-text-primary) !important;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 12px;
}
html[data-theme] .formBox .checkbox label,
html[data-theme] .formBox .field-help-text {
    color: var(--hz-text-muted) !important;
}
html[data-theme] .formBox .btn-cancel {
    color: var(--hz-text-muted) !important;
    background: var(--hz-bg-card-alt);
    border: 1px solid var(--hz-border);
}

/* ============================================================
   Paneles flotantes del header (carrito, notificaciones, cuenta,
   ajustes) -- una sola regla los pintaba blancos a los 4 a la vez.
   ============================================================ */
html[data-theme] .menu-myaccount-clientx,
html[data-theme] .menu-notification-clientx,
html[data-theme] .menu-settings-clientx,
html[data-theme] .menu-cart-clientx {
    background-color: var(--hz-bg-card) !important;
    border-left: 1px solid var(--hz-border) !important;
}
html[data-theme] .panel-setting-heading {
    background: var(--hz-bg-card-alt) !important;
}
html[data-theme] .panel-setting-title {
    color: var(--hz-text-primary) !important;
}
html[data-theme] .panel-setting-heading .f-right {
    color: var(--hz-text-muted) !important;
}
html[data-theme] .notifi-clearbar {
    border-bottom-color: var(--hz-border) !important;
}
html[data-theme] .notifi-title {
    color: var(--hz-text-muted) !important;
}
html[data-theme] .notifi-details p {
    color: var(--hz-text-primary) !important;
}
html[data-theme] .notifi-btm span {
    color: var(--hz-text-muted) !important;
}
html[data-theme] .setting-details-row h5,
html[data-theme] .panel-setting-sidconetnt h5 {
    color: var(--hz-text-muted) !important;
}
html[data-theme] .acc-setting-list a {
    color: var(--hz-text-primary) !important;
}
html[data-theme] #summary-content-dynmic-get {
    color: var(--hz-text-primary) !important;
}
html[data-theme] #summary-content-dynmic-get .price,
html[data-theme] #summary-content-dynmic-get .total {
    color: var(--hz-text-primary) !important;
}

/* ============================================================
   Red de seguridad global: paginas de cuenta que comparten estos
   mismos nombres de clase (Anadir fondos, Pago en lote, Cotizaciones,
   Gestion de usuarios, Contactos, Seguridad, Emails...) y que aun
   no tienen su propia clase hz-* especifica.
   ============================================================ */
html[data-theme] .domains-head,
html[data-theme] .domains-head.user,
html[data-theme] .domains-head.depart,
html[data-theme] .domains-head.configur {
    background: transparent !important;
}
html[data-theme] .domains-head h1 {
    color: var(--hz-text-primary) !important;
}
html[data-theme] .domains-head p {
    color: var(--hz-text-muted) !important;
}
html[data-theme] .server-box,
html[data-theme] .server-inner,
html[data-theme] .tab_container,
html[data-theme] .panel-header,
html[data-theme] .formBox,
html[data-theme] .pers-info,
html[data-theme] .form-main,
html[data-theme] .box-body,
html[data-theme] .open-tickt,
html[data-theme] .lock-info,
html[data-theme] .all-mark,
html[data-theme] .reven-col > div {
    background: var(--hz-bg-card) !important;
    background-image: none !important;
}
html[data-theme] .all-mark {
    border-top: 1px solid var(--hz-border);
}
html[data-theme] .server-box:not(.hz-table-card):not(.hz-account-tabs),
html[data-theme] .formBox {
    border: 1px solid var(--hz-border);
    border-radius: var(--hz-radius);
    box-shadow: var(--hz-shadow);
    padding: 20px;
    margin-bottom: 20px;
}
html[data-theme] .pers-info,
html[data-theme] .form-main,
html[data-theme] .tab_container,
html[data-theme] .box-body {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    border: none !important;
}
html[data-theme] .server-box h1,
html[data-theme] .server-box h2,
html[data-theme] .server-box h3,
html[data-theme] .server-box h4,
html[data-theme] .server-box h5,
html[data-theme] .server-box label,
html[data-theme] .formBox label,
html[data-theme] .server-box > p,
html[data-theme] .formBox > p {
    color: var(--hz-text-primary);
}
html[data-theme] .server-box .inputText,
html[data-theme] .formBox .inputText {
    color: var(--hz-text-muted) !important;
}
/* La plantilla original posiciona .inputText ABSOLUTO, superpuesto
   sobre el input, y solo lo "levanta" arriba cuando existe la clase
   .focus (precargada o por JS). Al darle fondo solido a los inputs
   (regla de abajo) esa etiqueta quedo tapada en todo campo que no
   llega con .focus de entrada: Contactos, Mis Datos, etc. se ven
   "vacios" hasta que se escribe algo. Se fija como etiqueta estatica,
   siempre visible arriba del campo. (El #page-wrapper que se uso antes
   para esto NUNCA aplicaba aqui: ese id solo existe en login/registro,
   el area de clientes normal usa .wrapper > #content). */
html[data-theme] .server-box .inputBox .inputText,
html[data-theme] .formBox .inputBox .inputText {
    position: static !important;
    display: block !important;
    transform: none !important;
    opacity: 1 !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 7px;
}
html[data-theme] .server-box .inputBox,
html[data-theme] .formBox .inputBox {
    padding-top: 2px;
}
html[data-theme] .server-box .inputBox input,
html[data-theme] .server-box .inputBox select,
html[data-theme] .formBox .inputBox input,
html[data-theme] .formBox .inputBox select {
    background: var(--hz-bg-input) !important;
    color: var(--hz-text-primary) !important;
    border: 1px solid var(--hz-border-strong) !important;
    border-radius: 8px !important;
}
html[data-theme] .server-box table,
html[data-theme] .formBox table {
    background: transparent !important;
}
html[data-theme] .server-box table thead th,
html[data-theme] .formBox table thead th {
    color: var(--hz-text-muted) !important;
    background: transparent !important;
    border-bottom: 1px solid var(--hz-border) !important;
}
html[data-theme] .server-box table tbody tr,
html[data-theme] .formBox table tbody tr {
    background: transparent !important;
    border-bottom: 1px solid var(--hz-border) !important;
}
html[data-theme] .server-box table tbody tr:hover,
html[data-theme] .formBox table tbody tr:hover {
    background: var(--hz-bg-card-alt) !important;
}
html[data-theme] .server-box td,
html[data-theme] .formBox td {
    color: var(--hz-text-primary) !important;
}
html[data-theme] .server-box .btn-primary,
html[data-theme] .formBox .btn-primary,
html[data-theme] .wgs_custom-btn {
    background: var(--hz-accent) !important;
    border-color: var(--hz-accent) !important;
    color: #fff !important;
}
html[data-theme] .server-box .dropdown-menu,
html[data-theme] .formBox .dropdown-menu {
    background: var(--hz-bg-card) !important;
    border: 1px solid var(--hz-border) !important;
    box-shadow: var(--hz-shadow-md) !important;
    color: var(--hz-text-primary) !important;
}
html[data-theme] .server-box .dropdown-menu a,
html[data-theme] .formBox .dropdown-menu a {
    color: var(--hz-text-primary) !important;
}
html[data-theme] .server-box .dropdown-menu a:hover,
html[data-theme] .formBox .dropdown-menu a:hover {
    background: var(--hz-accent-soft) !important;
    color: var(--hz-accent) !important;
}
html[data-theme] .server-box .green,
html[data-theme] .server-box .greendark,
html[data-theme] .open-tickt.greendark {
    background: var(--hz-green-soft) !important;
    color: var(--hz-green) !important;
    border: 1px solid var(--hz-green) !important;
}
html[data-theme] .server-box .reddark,
html[data-theme] .open-tickt.reddark {
    background: rgba(229, 72, 77, 0.12) !important;
    color: #e5484d !important;
    border: 1px solid #e5484d !important;
}
/* Tarjetas de resumen de tickets (Abiertos/Respondidos/etc): a estas 4
   variantes nunca les habia tocado color propio (quedaban con el
   mismo fondo oscuro generico, indistinguibles entre si), y .tick-xl/
   .cont-xl traen "color:#fff" fijo de la plantilla original que
   ganaba por especificidad sobre el color del padre. */
html[data-theme] .open-tickt.bluedark {
    background: var(--hz-blue-soft) !important;
    color: var(--hz-blue) !important;
    border: 1px solid var(--hz-blue) !important;
}
html[data-theme] .open-tickt.navyblue {
    background: var(--hz-purple-soft) !important;
    color: var(--hz-purple) !important;
    border: 1px solid var(--hz-purple) !important;
}
html[data-theme] .open-tickt.yellodark {
    background: var(--hz-amber-soft) !important;
    color: var(--hz-amber) !important;
    border: 1px solid var(--hz-amber) !important;
}
html[data-theme] .open-tickt.grey {
    background: var(--hz-bg-card-alt) !important;
    color: var(--hz-text-muted) !important;
    border: 1px solid var(--hz-border) !important;
}
html[data-theme] .open-tickt .tick-xl,
html[data-theme] .open-tickt .cont-xl {
    color: inherit !important;
}
html[data-theme] .open-tickt .progress {
    background: rgba(0, 0, 0, 0.2) !important;
}

/* ---------- Elegir departamento (nuevo ticket): grid de tarjetas ---------- */
.hz-dept-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
@media (max-width: 991px) { .hz-dept-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .hz-dept-grid { grid-template-columns: 1fr; } }
html[data-theme] .hz-dept-card {
    background: var(--hz-bg-card);
    border: 1px solid var(--hz-border);
    border-radius: var(--hz-radius);
    box-shadow: var(--hz-shadow);
    padding: 26px 20px;
    text-align: center;
    text-decoration: none !important;
    display: block;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
html[data-theme] .hz-dept-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--hz-shadow-md);
    border-color: var(--hz-accent);
}
html[data-theme] .hz-dept-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin: 0 auto 16px;
}
html[data-theme] .hz-dept-card h2 {
    color: var(--hz-text-primary) !important;
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 6px;
}
html[data-theme] .hz-dept-card span {
    color: var(--hz-text-muted) !important;
    font-size: 12px;
}

/* ============================================================
   Anuncios / Base de conocimiento / Descargas / Estado del servidor
   ============================================================ */
html[data-theme] .box-cat,
html[data-theme] .restor-cont,
html[data-theme] .news-artical,
html[data-theme] .news-detail-box {
    background: var(--hz-bg-card) !important;
    border: 1px solid var(--hz-border);
    border-radius: var(--hz-radius);
    box-shadow: var(--hz-shadow);
    padding: 20px;
    margin-bottom: 16px;
}
html[data-theme] .cate-titel,
html[data-theme] .cool-titel,
html[data-theme] .rest-titel {
    color: var(--hz-text-primary) !important;
}
html[data-theme] .flare-list a,
html[data-theme] .flare-list li a {
    color: var(--hz-text-primary) !important;
}
html[data-theme] .flare-list a:hover {
    color: var(--hz-accent) !important;
}
html[data-theme] .art-row .art-col,
html[data-theme] .own-right {
    color: var(--hz-text-muted) !important;
}
html[data-theme] .page-content {
    color: var(--hz-text-primary) !important;
}
html[data-theme] .spport-row,
html[data-theme] .restor-head {
    border-color: var(--hz-border) !important;
}
html[data-theme] .news-artical .news-date {
    color: var(--hz-text-muted) !important;
}
html[data-theme] .news-artical a {
    color: var(--hz-text-primary) !important;
}
html[data-theme] .news-d-row {
    border-bottom: 1px solid var(--hz-border) !important;
    color: var(--hz-text-primary) !important;
}
html[data-theme] .cont-ser {
    background: var(--hz-accent) !important;
    color: #fff !important;
}
html[data-theme] .input-group.col-md-12 .form-control,
html[data-theme] .cont-ser input {
    background: var(--hz-bg-input) !important;
    color: var(--hz-text-primary) !important;
    border: 1px solid var(--hz-border-strong) !important;
}

/* ---------- Dashboard: encabezado de bienvenida ---------- */
html[data-theme] .hz-welcome-heading {
    margin-bottom: 20px;
}
html[data-theme] .hz-welcome-heading h1 {
    color: var(--hz-text-primary) !important;
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 4px;
}
html[data-theme] .hz-welcome-heading p {
    color: var(--hz-text-muted) !important;
    font-size: 14px;
    margin: 0;
}

/* ---------- Dashboard: link "Ver X" dentro de las tarjetas de stats ---------- */
.hz-stat-link {
    display: block;
    margin-top: 10px;
    font-size: 11px;
    font-weight: 700;
    color: var(--hz-accent);
}
.hz-stat-card:hover .hz-stat-link {
    text-decoration: underline;
}

/* ---------- Dashboard: tarjeta promocional con ilustracion ---------- */
html[data-theme] .hz-promo-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    overflow: hidden;
    min-height: 210px;
}
.hz-promo-text h3 {
    color: var(--hz-text-inverse);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 10px;
}
.hz-promo-text h3 span {
    color: var(--hz-accent);
}
.hz-promo-text p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
    margin: 0 0 16px;
    max-width: 280px;
}
.hz-promo-img {
    max-width: 190px;
    width: 45%;
    flex-shrink: 0;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.35));
}
@media (max-width: 767px) {
    .hz-promo-img { display: none; }
}

/* ---------- Sidebar: tarjeta de ayuda al final del menu ---------- */
#sidebar .hz-help-box {
    margin: 20px 16px 24px;
    padding: 18px;
    border-radius: var(--hz-radius);
    background: var(--hz-accent-dark);
    color: #fff;
}
#sidebar .hz-help-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    margin-bottom: 10px;
}
#sidebar .hz-help-box h5 {
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 6px;
    color: #fff;
}
#sidebar .hz-help-box p {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.75);
    margin: 0 0 14px;
    line-height: 1.4;
}
#sidebar .hz-help-box .wgs_custom-btn {
    display: block;
    text-align: center;
    background: #fff !important;
    color: var(--hz-accent-dark) !important;
    font-size: 12px;
    padding: 9px;
    border-radius: 8px;
}

/* ---------- Dashboard: filas de tarjetas con la misma altura ---------- */
.hz-row-flex {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}
.hz-row-flex > [class*="col-"] {
    display: flex;
    flex-direction: column;
}
.hz-row-flex > [class*="col-"] > .hz-card:not(.hz-promo-card) {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.hz-row-flex > [class*="col-"] > .hz-promo-card {
    flex: 1;
}

/* ============================================================
   HZ REDESIGN — tipografia, botones premium y selector de
   tema claro/oscuro sincronizado (toggle + panel de Ajustes).
   Anexado al final para tener prioridad de cascada sobre todo
   lo anterior en este mismo archivo y en style.css/bootstrap.
   ============================================================ */

/* ---------- Tipografia general ---------- */
html[data-theme] body,
html[data-theme] input,
html[data-theme] button,
html[data-theme] select,
html[data-theme] textarea,
html[data-theme] .table,
html[data-theme] .dropdown-menu,
html[data-theme] .panel,
html[data-theme] .form-control {
    font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}
html[data-theme] body {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: var(--hz-text-primary) !important;
    -webkit-font-smoothing: antialiased;
}
html[data-theme] h1, html[data-theme] h2, html[data-theme] h3,
html[data-theme] h4, html[data-theme] h5, html[data-theme] h6 {
    font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-weight: 700 !important;
    color: var(--hz-text-primary);
    letter-spacing: -0.01em;
}
html[data-theme] p,
html[data-theme] li,
html[data-theme] label,
html[data-theme] td,
html[data-theme] th {
    font-size: 15px;
    color: var(--hz-text-primary);
}
html[data-theme] .text-muted,
html[data-theme] small,
html[data-theme] .small {
    color: var(--hz-text-muted) !important;
}
html[data-theme] a {
    color: var(--hz-accent);
}
html[data-theme] a:hover {
    color: var(--hz-accent-dark);
}

/* ---------- Botones: rediseno premium, redondeado y "glossy" ---------- */
html[data-theme] .btn,
html[data-theme] .wgs_custom-btn,
html[data-theme] button[type="submit"],
html[data-theme] input[type="submit"] {
    border-radius: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    padding: 9px 20px !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(16, 24, 40, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease !important;
}
html[data-theme] .btn:hover,
html[data-theme] .wgs_custom-btn:hover,
html[data-theme] button[type="submit"]:hover,
html[data-theme] input[type="submit"]:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 6px 14px rgba(16, 24, 40, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}
html[data-theme] .btn:active,
html[data-theme] .wgs_custom-btn:active {
    transform: translateY(0);
    filter: brightness(0.97);
}

html[data-theme] .btn-primary,
html[data-theme] .btn-default,
html[data-theme] .server-box .btn-primary,
html[data-theme] .formBox .btn-primary,
html[data-theme] .dropdown-toggle.btn,
html[data-theme] button[type="submit"],
html[data-theme] input[type="submit"] {
    background: linear-gradient(135deg, var(--hz-accent), var(--hz-accent-dark)) !important;
    color: #ffffff !important;
    border-radius: 12px !important;
}
html[data-theme] .wgs_custom-btn,
html[data-theme] .generic_price_btn a.wgs_custom-btn {
    background: linear-gradient(135deg, var(--hz-accent), var(--hz-accent-dark)) !important;
    color: #ffffff !important;
    border-radius: 999px !important;
}
html[data-theme] .btn-success {
    background: linear-gradient(135deg, var(--hz-green), #0f9d58) !important;
    color: #ffffff !important;
}
html[data-theme] .btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: #ffffff !important;
}
html[data-theme] .btn-warning {
    background: linear-gradient(135deg, var(--hz-amber), #b25b04) !important;
    color: #ffffff !important;
}
html[data-theme] .btn-info {
    background: linear-gradient(135deg, var(--hz-blue), #1d4fd1) !important;
    color: #ffffff !important;
}

/* Botones "Pagar Ahora" de notificaciones: mismo lenguaje visual */
html[data-theme] .ntf-pay-btn {
    display: inline-block;
    border-radius: 999px !important;
    padding: 6px 16px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 6px rgba(16, 24, 40, 0.18) !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--hz-accent), var(--hz-accent-dark)) !important;
    transition: transform 0.15s ease, filter 0.15s ease;
}
html[data-theme] .ntf-pay-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
}
html[data-theme] .ntf-pay-btn.notification-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
}
html[data-theme] .ntf-pay-btn.notification-warning {
    background: linear-gradient(135deg, var(--hz-amber), #b25b04) !important;
}
html[data-theme] .ntf-pay-btn.notification-info {
    background: linear-gradient(135deg, var(--hz-blue), #1d4fd1) !important;
}

/* ---------- Icono de cambio de tema (header) ---------- */
html[data-theme] .hz-theme-toggle {
    width: 40px !important;
    height: 40px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    font-size: 15px;
    transition: transform 0.2s ease, background 0.2s ease;
}
html[data-theme] .hz-theme-toggle i {
    transition: transform 0.3s ease, opacity 0.2s ease;
}
html[data-theme] .hz-theme-toggle:hover {
    transform: rotate(15deg);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08)) !important;
}
html[data-theme="dark"] .hz-theme-toggle .hz-icon-sun { color: #f5a623; }
html[data-theme="light"] .hz-theme-toggle .hz-icon-moon,
html[data-theme] .hz-theme-toggle .hz-icon-moon { color: #cbd5e1; }

/* ---------- Selector "Manage Dashboard Style" = elegir tema claro/oscuro ---------- */
.hz-style-picker {
    display: flex;
    gap: 14px;
    margin-top: 6px;
}
html[data-theme] .hz-style-option {
    position: relative;
    flex: 1;
    border-radius: var(--hz-radius, 14px) !important;
    border: 2px solid var(--hz-border) !important;
    padding: 6px !important;
    cursor: pointer;
    background: var(--hz-bg-card);
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    overflow: hidden;
}
html[data-theme] .hz-style-option img {
    width: 100% !important;
    border-radius: 8px !important;
    display: block;
}
html[data-theme] .hz-style-option:hover {
    transform: translateY(-2px);
    box-shadow: var(--hz-shadow-md);
}
html[data-theme] .hz-style-option.hz-active-theme {
    border-color: var(--hz-accent) !important;
    box-shadow: 0 0 0 3px var(--hz-accent-soft) !important;
}
html[data-theme] .hz-style-label {
    display: block;
    text-align: center;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 6px 0 2px;
    color: var(--hz-text-muted);
}
html[data-theme] .hz-style-option.hz-active-theme .hz-style-label {
    color: var(--hz-accent);
}

/* ============================================================
   HZ REDESIGN 2 — registro: lista de correo, captcha y
   panel lateral de bienvenida (mas rico visualmente).
   ============================================================ */

/* ---------- Bloque "unete a nuestra lista de correo" ---------- */
html[data-theme] .marketing-email-optin {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: var(--hz-accent-soft);
    border: 1px solid var(--hz-border);
    border-radius: var(--hz-radius-sm);
    padding: 16px 18px;
}
html[data-theme] .marketing-email-optin-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--hz-accent);
    color: #ffffff;
    font-size: 16px;
}
html[data-theme] .marketing-email-optin-body { flex: 1 1 auto; }
html[data-theme] .marketing-email-optin h4 {
    margin: 0 0 4px;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--hz-text-primary) !important;
}
html[data-theme] .marketing-email-optin p {
    margin: 0;
    font-size: 13px;
    color: var(--hz-text-muted) !important;
}
html[data-theme] .marketing-email-optin input.toggle-switch-success {
    flex: 0 0 auto;
    margin-top: 4px;
}

/* ---------- Marco para el widget de reCAPTCHA (Google no permite
   re-diseñarlo por dentro; lo enmarcamos para que no rompa el diseño) ---------- */
html[data-theme] .hz-captcha-frame {
    margin-top: 18px;
}
html[data-theme] .hz-captcha-frame .recaptcha-container,
html[data-theme] .hz-captcha-frame #default-captcha-domainchecker {
    display: inline-block;
    background: #ffffff;
    border: 1px solid var(--hz-border);
    border-radius: var(--hz-radius-sm);
    box-shadow: var(--hz-shadow);
    padding: 10px;
}

/* ---------- Panel lateral "Ya tengo una cuenta" ---------- */
html[data-theme] #page-wrapper .rubuts.hz-auth-side {
    position: relative;
    padding: 30px 26px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 100%;
    isolation: isolate;
}
html[data-theme] #page-wrapper .rubuts.hz-auth-side::before,
html[data-theme] #page-wrapper .rubuts.hz-auth-side::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    z-index: 0;
    pointer-events: none;
}
html[data-theme] #page-wrapper .rubuts.hz-auth-side::before {
    width: 260px;
    height: 260px;
    top: -80px;
    right: -80px;
    background: radial-gradient(circle, var(--hz-accent) 0%, transparent 70%);
    opacity: 0.35;
}
html[data-theme] #page-wrapper .rubuts.hz-auth-side::after {
    width: 220px;
    height: 220px;
    bottom: -60px;
    left: -60px;
    background: radial-gradient(circle, var(--hz-purple) 0%, transparent 70%);
    opacity: 0.25;
}
html[data-theme] #page-wrapper .rubuts.hz-auth-side > * {
    position: relative;
    z-index: 1;
}
html[data-theme] #page-wrapper .rubuts.hz-auth-side h3 {
    color: #ffffff !important;
    font-size: 21px !important;
    font-weight: 700 !important;
    line-height: 1.3;
    margin-bottom: 6px;
}
html[data-theme] #page-wrapper .rubuts.hz-auth-side p {
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 4px;
}
html[data-theme] .hz-auth-illustration {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 14px 0 16px;
}
html[data-theme] .hz-auth-illustration img {
    width: 100%;
    max-height: 118px;
    object-fit: cover;
    border-radius: var(--hz-radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: var(--hz-shadow-md);
    display: block;
}

html[data-theme] .hz-auth-features {
    display: flex !important;
    flex-direction: column;
    grid-template-columns: none !important;
    gap: 7px;
    margin-top: 2px;
}
html[data-theme] .hz-auth-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    padding: 9px 14px;
    transition: transform 0.15s ease, background 0.15s ease;
}
html[data-theme] .hz-auth-feature:hover {
    transform: translateX(3px);
    background: rgba(255, 255, 255, 0.12);
}
html[data-theme] .hz-auth-feature > span {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
}
html[data-theme] .hz-auth-feature i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff !important;
    font-size: 12px !important;
}
html[data-theme] .hz-auth-side-btn.log-btn {
    display: inline-block;
    text-align: center;
    background: #ffffff !important;
    color: var(--hz-accent-dark) !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 13px;
    padding: 14px 20px !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    margin-top: 28px;
}
html[data-theme] .hz-auth-side-btn.log-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.3);
}

/* ============================================================
   HZ WIZARD — registro en pasos + refresco del panel lateral.
   ============================================================ */

html[data-theme] #page-wrapper .hz-wizard-subtitle {
    text-align: center;
    color: var(--hz-text-muted) !important;
    font-size: 14px;
    margin: 4px 0 0;
}

/* ---------- Indicador de pasos ---------- */
.hz-wizard-steps { margin: 30px 0 32px; }
.hz-wizard-track {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    max-width: 640px;
    margin: 0 auto;
}
.hz-wizard-step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    width: 140px;
    user-select: none;
}
.hz-wizard-step-item.done { cursor: pointer; }
.hz-wizard-step-circle {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    background: var(--hz-bg-card-alt);
    border: 2px solid var(--hz-border-strong);
    color: var(--hz-text-muted);
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.hz-wizard-step-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--hz-text-muted);
    text-align: center;
    line-height: 1.3;
}
.hz-wizard-step-item.active .hz-wizard-step-circle {
    background: var(--hz-accent);
    border-color: var(--hz-accent);
    color: #ffffff;
    box-shadow: 0 0 0 4px var(--hz-accent-soft);
}
.hz-wizard-step-item.active .hz-wizard-step-label { color: var(--hz-text-primary); }
.hz-wizard-step-item.done .hz-wizard-step-circle {
    background: var(--hz-accent-soft);
    border-color: var(--hz-accent);
    color: var(--hz-accent);
}
.hz-wizard-step-item.done .hz-wizard-step-label { color: var(--hz-accent); }
.hz-wizard-connector {
    flex: 1 1 auto;
    height: 2px;
    background: var(--hz-border-strong);
    margin-top: 20px;
    max-width: 70px;
    transition: background 0.2s ease;
}
.hz-wizard-step-item.done + .hz-wizard-connector { background: var(--hz-accent); }
@media (max-width: 767px) {
    .hz-wizard-step-label { display: none; }
    .hz-wizard-step-item { width: auto; }
    .hz-wizard-connector { max-width: 30px; }
}

/* ---------- Paneles del wizard ---------- */
.hz-wizard-panel { display: none; }
.hz-wizard-panel.active { display: block; animation: hzWizardFadeIn 0.25s ease; }
@keyframes hzWizardFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.hz-wizard-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 18px;
}
.hz-wizard-back {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--hz-text-muted) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer;
    padding: 10px 4px !important;
}
.hz-wizard-back:hover { color: var(--hz-accent) !important; transform: none !important; }
.hz-wizard-nav .hz-wizard-next,
.hz-wizard-nav .btn-account.reg {
    margin-left: auto;
}
.hz-wizard-nav .hz-wizard-next i,
.hz-wizard-nav .hz-wizard-back i {
    font-size: 12px;
}

html[data-theme] .hz-trust-line {
    text-align: center;
    color: var(--hz-text-muted) !important;
    font-size: 12.5px;
    margin: 14px 0 0;
}
html[data-theme] .hz-trust-line i { color: var(--hz-accent); margin-right: 4px; }

/* ---------- Panel lateral: boton "fantasma" y tarjetas con subtitulo ---------- */
html[data-theme] .hz-auth-side-btn.log-btn.hz-ghost-btn {
    background: transparent !important;
    border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    padding: 11px 18px !important;
}
html[data-theme] .hz-auth-side-btn.log-btn.hz-ghost-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.55) !important;
    box-shadow: none !important;
    transform: translateY(-1px);
}
html[data-theme] .hz-auth-feature-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
html[data-theme] .hz-auth-feature-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
}
html[data-theme] .hz-auth-feature-sub {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.6) !important;
}

/* ---------- Tarjeta "necesitas ayuda" ---------- */
html[data-theme] .hz-auth-help-card {
    margin-top: 14px;
    padding: 13px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
}
html[data-theme] .hz-auth-help-card h5 {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    margin: 0 0 4px;
}
html[data-theme] .hz-auth-help-card p {
    color: rgba(255, 255, 255, 0.65) !important;
    font-size: 12.5px;
    margin: 0 0 10px;
}
html[data-theme] .hz-auth-help-card a {
    color: var(--hz-accent) !important;
    font-weight: 700;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
html[data-theme] .hz-auth-help-card a:hover { color: #ffffff !important; }

/* ============================================================
   HZ FIX — telefono (prefijo de pais), autofill del navegador
   y rediseno de las alertas de error/aviso.
   ============================================================ */

/* El plugin de telefono calcula su propio padding-left por JS
   segun el ancho de la bandera+prefijo; nuestro padding global
   con !important se lo pisaba y el numero quedaba debajo de la
   bandera. Le damos espacio fijo suficiente. */
html[data-theme] #page-wrapper #inputPhone,
html[data-theme] #page-wrapper input[name="phonenumber"] {
    padding-left: 92px !important;
}

/* Autofill de Chrome/Edge fuerza un fondo claro que rompe el
   tema oscuro; lo igualamos al fondo real del input. */
html[data-theme] #page-wrapper .inputBox input:-webkit-autofill,
html[data-theme] #page-wrapper .inputBox input:-webkit-autofill:hover,
html[data-theme] #page-wrapper .inputBox input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--hz-text-primary) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--hz-bg-input) inset !important;
    box-shadow: 0 0 0 1000px var(--hz-bg-input) inset !important;
    caret-color: var(--hz-text-primary);
    transition: background-color 5000s ease-in-out 0s;
}

/* Placeholders legibles en ambos temas */
html[data-theme] #page-wrapper .inputBox input::placeholder,
html[data-theme] #page-wrapper .inputBox textarea::placeholder {
    color: var(--hz-text-muted) !important;
    opacity: 0.75;
}

/* ---------- Alertas (errores / avisos): mismo lenguaje visual
   que el resto del panel, con buen contraste en los dos temas ---------- */
html[data-theme] #page-wrapper .alert {
    background: var(--hz-bg-card) !important;
    border: 1px solid var(--hz-border) !important;
    border-left: 4px solid #dc2626 !important;
    border-radius: var(--hz-radius-sm) !important;
    color: var(--hz-text-primary) !important;
    padding: 16px 18px !important;
    box-shadow: var(--hz-shadow);
}
html[data-theme] #page-wrapper .alert-warning { border-left-color: var(--hz-amber) !important; }
html[data-theme] #page-wrapper .alert-info,
html[data-theme] #page-wrapper .alert-success { border-left-color: var(--hz-blue) !important; }
html[data-theme] #page-wrapper .alert strong {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px !important;
    color: #dc2626 !important;
    margin-bottom: 6px;
}
html[data-theme] #page-wrapper .alert-warning strong { color: var(--hz-amber) !important; }
html[data-theme] #page-wrapper .alert-info strong,
html[data-theme] #page-wrapper .alert-success strong { color: var(--hz-blue) !important; }
html[data-theme] #page-wrapper .alert ul {
    margin: 4px 0 0 20px !important;
    padding: 0 !important;
}
html[data-theme] #page-wrapper .alert li,
html[data-theme] #page-wrapper .alert p {
    color: var(--hz-text-primary) !important;
    font-size: 13.5px !important;
}

/* ============================================================
   HZ REGISTER v2 — pagina fija tipo "SaaS onboarding": card
   blanca + foto real, independiente del toggle claro/oscuro
   del resto del sitio (asi se ve siempre, por diseno).
   ============================================================ */

html body #page-wrapper.hz-register-page {
    background: #0b1220;
    min-height: 100vh;
    padding-bottom: 40px;
}
html body #page-wrapper.hz-register-page .container { max-width: 1180px; }

/* ---------- Topbar ---------- */
.hz-register-topbar { padding: 22px 0; }
.hz-register-topbar-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.hz-register-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none !important;
}
.hz-register-brand-icon { width: 34px; height: 34px; }
.hz-register-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.hz-register-brand-text strong { color: #ffffff; font-size: 18px; font-weight: 800; }
.hz-register-brand-text small { color: rgba(255,255,255,0.5); font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; }
.hz-register-topbar-login { color: rgba(255,255,255,0.7); font-size: 14px; }
.hz-register-topbar-login a { color: #5b8def; font-weight: 700; margin-left: 4px; }
.hz-register-topbar-login a:hover { color: #ffffff; }

/* ---------- Card shell ---------- */
html body #page-wrapper.hz-register-page .hz-register-shell { padding: 6px 20px 0; }
html body #page-wrapper.hz-register-page .hz-register-card {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
html body #page-wrapper.hz-register-page .hz-register-form-col {
    padding: 40px 44px 36px;
}
html body #page-wrapper.hz-register-page .hz-register-title {
    color: #101828 !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    margin: 0 0 4px;
}
html body #page-wrapper.hz-register-page .hz-wizard-subtitle {
    text-align: left !important;
    color: #64748b !important;
    font-size: 14px !important;
    margin: 0 0 22px !important;
}

/* ---------- Alertas (siempre en contexto claro) ---------- */
html body #page-wrapper.hz-register-page .alert {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-left: 4px solid #dc2626 !important;
    border-radius: 10px !important;
    color: #101828 !important;
    padding: 14px 16px !important;
    margin-bottom: 18px !important;
}
html body #page-wrapper.hz-register-page .alert strong { color: #dc2626 !important; }
html body #page-wrapper.hz-register-page .alert li,
html body #page-wrapper.hz-register-page .alert p { color: #101828 !important; }

/* ---------- Stepper ---------- */
html body #page-wrapper.hz-register-page .hz-wizard-steps { margin: 4px 0 26px; }
html body #page-wrapper.hz-register-page .hz-wizard-track { justify-content: flex-start; max-width: none; }
html body #page-wrapper.hz-register-page .hz-wizard-step-item { width: auto; min-width: 88px; }
html body #page-wrapper.hz-register-page .hz-wizard-step-circle {
    background: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    color: #94a3b8 !important;
}
html body #page-wrapper.hz-register-page .hz-wizard-step-label { color: #94a3b8 !important; }
html body #page-wrapper.hz-register-page .hz-wizard-step-item.active .hz-wizard-step-circle {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(37,99,235,0.15) !important;
}
html body #page-wrapper.hz-register-page .hz-wizard-step-item.active .hz-wizard-step-label { color: #101828 !important; }
html body #page-wrapper.hz-register-page .hz-wizard-step-item.done .hz-wizard-step-circle {
    background: #e8f0fe !important;
    border-color: #2563eb !important;
    color: #2563eb !important;
}
html body #page-wrapper.hz-register-page .hz-wizard-step-item.done .hz-wizard-step-label { color: #2563eb !important; }
html body #page-wrapper.hz-register-page .hz-wizard-connector { background: #e2e8f0 !important; }
html body #page-wrapper.hz-register-page .hz-wizard-step-item.done + .hz-wizard-connector { background: #2563eb !important; }

/* ---------- Tarjetas de campos ---------- */
html body #page-wrapper.hz-register-page .form-box.hz-card {
    background: #ffffff !important;
    border: 1px solid #eef1f6 !important;
    box-shadow: none !important;
    padding: 0 0 6px !important;
    margin-bottom: 4px !important;
}
html body #page-wrapper.hz-register-page .info-titel { color: #101828 !important; }
html body #page-wrapper.hz-register-page .hz-titel-icon {
    background: #dbeafe !important;
    color: #2563eb !important;
    border-radius: 10px !important;
}
html body #page-wrapper.hz-register-page .hz-card-subtitle {
    color: #64748b !important;
    font-size: 13px;
    margin: -6px 0 18px 40px;
}
html body #page-wrapper.hz-register-page .hz-label { color: #344054 !important; font-weight: 600 !important; font-size: 13px; }
html body #page-wrapper.hz-register-page .hz-label-optional { color: #94a3b8 !important; font-weight: 400 !important; }
html body #page-wrapper.hz-register-page .inputBox input,
html body #page-wrapper.hz-register-page .inputBox select {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #101828 !important;
    border-radius: 9px !important;
}
html body #page-wrapper.hz-register-page .inputBox input::placeholder { color: #94a3b8 !important; opacity: 1; }
html body #page-wrapper.hz-register-page .inputBox input:focus,
html body #page-wrapper.hz-register-page .inputBox select:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.12) !important;
}
html body #page-wrapper.hz-register-page #inputPhone { padding-left: 92px !important; }
html body #page-wrapper.hz-register-page .inputBox input:-webkit-autofill {
    -webkit-text-fill-color: #101828 !important;
    -webkit-box-shadow: 0 0 0 1000px #f8fafc inset !important;
}

/* ---------- Caja de confianza + boton continuar ---------- */
html body #page-wrapper.hz-register-page .hz-trust-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    border: 1px solid #eef1f6;
    border-radius: 10px;
    padding: 12px 16px;
    color: #475569;
    font-size: 13px;
    margin: 6px 0 0;
}
html body #page-wrapper.hz-register-page .hz-trust-box i { color: #94a3b8; }
html body #page-wrapper.hz-register-page .hz-wizard-nav { margin-top: 18px; }
html body #page-wrapper.hz-register-page .hz-wizard-cta {
    background: #2563eb !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 12px 24px !important;
    box-shadow: 0 4px 14px rgba(37,99,235,0.35) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
html body #page-wrapper.hz-register-page .hz-wizard-cta:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 8px 20px rgba(37,99,235,0.4) !important;
}
html body #page-wrapper.hz-register-page .hz-wizard-back { color: #64748b !important; }
html body #page-wrapper.hz-register-page .hz-wizard-back:hover { color: #2563eb !important; }
html body #page-wrapper.hz-register-page .marketing-email-optin {
    background: #eff6ff !important;
    border-color: #dbeafe !important;
}
html body #page-wrapper.hz-register-page .marketing-email-optin h4 { color: #101828 !important; }
html body #page-wrapper.hz-register-page .marketing-email-optin p { color: #64748b !important; }
html body #page-wrapper.hz-register-page .hz-captcha-frame .recaptcha-container { background: #ffffff; }

/* ---------- Panel de foto ---------- */
html body #page-wrapper.hz-register-page .hz-register-photo-col {
    background-size: cover;
    background-position: center;
    padding: 40px 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #ffffff;
}
html body #page-wrapper.hz-register-page .hz-register-photo-title {
    color: #ffffff !important;
    font-size: 30px !important;
    font-weight: 800 !important;
    line-height: 1.25;
    margin: 0 0 12px;
}
html body #page-wrapper.hz-register-page .hz-accent-text { color: #5b9dff !important; }
html body #page-wrapper.hz-register-page .hz-register-photo-sub {
    color: rgba(255,255,255,0.78) !important;
    font-size: 14.5px;
    line-height: 1.6;
    margin: 0 0 28px;
}
html body #page-wrapper.hz-register-page .hz-auth-features {
    display: flex !important;
    flex-direction: column;
    gap: 16px;
    margin: 0 0 26px;
}
html body #page-wrapper.hz-register-page .hz-auth-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    background: none !important;
    border: none !important;
    padding: 0 !important;
}
html body #page-wrapper.hz-register-page .hz-auth-feature i {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: rgba(255,255,255,0.14) !important;
    color: #ffffff !important;
    font-size: 13px !important;
}
html body #page-wrapper.hz-register-page .hz-auth-feature-title { color: #ffffff !important; font-size: 14.5px !important; }
html body #page-wrapper.hz-register-page .hz-auth-feature-sub { color: rgba(255,255,255,0.62) !important; font-size: 12px !important; }

html body #page-wrapper.hz-register-page .hz-trustpilot-badge {
    border-top: 1px solid rgba(255,255,255,0.16);
    padding-top: 18px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
html body #page-wrapper.hz-register-page .hz-trustpilot-label { color: #ffffff; font-weight: 700; font-size: 13px; }
html body #page-wrapper.hz-register-page .hz-trustpilot-stars { color: #00b67a; font-size: 12px; letter-spacing: 1px; }
html body #page-wrapper.hz-register-page .hz-trustpilot-brand { color: #ffffff; font-weight: 800; font-size: 13px; }
html body #page-wrapper.hz-register-page .hz-trustpilot-brand i { color: #00b67a; font-size: 11px; margin-right: 2px; }
html body #page-wrapper.hz-register-page .hz-trustpilot-sub {
    width: 100%;
    color: rgba(255,255,255,0.55);
    font-size: 12px;
}

/* ---------- Fila de confianza + footer (debajo de la card) ---------- */
html body #page-wrapper.hz-register-page .hz-register-trustrow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 26px 20px 0;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 20px 24px;
}
html body #page-wrapper.hz-register-page .hz-trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
}
html body #page-wrapper.hz-register-page .hz-trust-item i {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    color: #5b9dff;
    font-size: 13px;
}
html body #page-wrapper.hz-register-page .hz-trust-item strong { display: block; color: #ffffff; font-size: 13.5px; font-weight: 700; }
html body #page-wrapper.hz-register-page .hz-trust-item span { display: block; color: rgba(255,255,255,0.55); font-size: 12px; }

html body #page-wrapper.hz-register-page .hz-register-footer {
    text-align: center;
    color: rgba(255,255,255,0.4);
    font-size: 12.5px;
    margin-top: 24px;
}
html body #page-wrapper.hz-register-page .hz-register-footer strong { color: rgba(255,255,255,0.6); }

/* ---------- Responsive ---------- */
html body #page-wrapper.hz-register-page,
html body #page-wrapper.hz-register-page .container,
html body #page-wrapper.hz-register-page .hz-register-shell { overflow-x: hidden; max-width: 100%; }
@media (max-width: 991px) {
    html body #page-wrapper.hz-register-page .hz-register-card { grid-template-columns: 1fr; }
    html body #page-wrapper.hz-register-page .hz-register-photo-col { padding: 32px 30px; order: -1; }
    html body #page-wrapper.hz-register-page .hz-register-trustrow { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    html body #page-wrapper.hz-register-page .hz-register-shell { padding: 6px 12px 0; }
    .hz-register-topbar-inner { flex-direction: column; gap: 10px; text-align: center; padding: 0 14px; }
    html body #page-wrapper.hz-register-page .hz-register-card { border-radius: 16px; }
    html body #page-wrapper.hz-register-page .hz-register-form-col { padding: 22px 16px 20px; }
    html body #page-wrapper.hz-register-page .hz-register-photo-col { padding: 26px 18px; }
    html body #page-wrapper.hz-register-page .hz-register-photo-title { font-size: 22px !important; }
    html body #page-wrapper.hz-register-page .hz-wizard-track { justify-content: space-between; }
    html body #page-wrapper.hz-register-page .hz-wizard-step-item { min-width: 0; width: auto; }
    html body #page-wrapper.hz-register-page .hz-wizard-step-label { display: none; }
    html body #page-wrapper.hz-register-page .hz-wizard-step-circle { width: 32px; height: 32px; font-size: 13px; }
    html body #page-wrapper.hz-register-page .hz-wizard-connector { max-width: 24px; margin-top: 0; }
    html body #page-wrapper.hz-register-page .hz-wizard-nav { flex-wrap: wrap; gap: 10px; }
    html body #page-wrapper.hz-register-page .hz-register-trustrow { margin: 20px 0 0; padding: 16px 18px; }
    html body #page-wrapper.hz-register-page .hz-register-title { font-size: 22px !important; }
}

/* ============================================================
   HZ LOGIN v2 — pagina fija oscura tipo "SaaS" con foto real,
   independiente del toggle claro/oscuro del resto del sitio.
   ============================================================ */

html body #page-wrapper.hz-login-page {
    background: #0b1220;
    min-height: 100vh;
    padding: 40px 0;
    display: flex;
    align-items: center;
}
html body #page-wrapper.hz-login-page .container { max-width: 1180px; }
html body #page-wrapper.hz-login-page .hz-login-shell { padding: 0 20px; width: 100%; }
html body #page-wrapper.hz-login-page .hz-login-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #0f1a2e;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(0,0,0,0.5);
}
html body #page-wrapper.hz-login-page .hz-login-form-col {
    padding: 48px 52px;
    position: relative;
}
html body #page-wrapper.hz-login-page .back-arrow { position: absolute; top: 20px; left: 20px; }
html body #page-wrapper.hz-login-page .back-arrow a {
    width: 34px; height: 34px; border-radius: 999px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.7) !important;
}
html body #page-wrapper.hz-login-page .back-arrow a:hover { color: #ffffff !important; background: rgba(255,255,255,0.12); }

html body #page-wrapper.hz-login-page .hz-login-brand {
    display: flex; align-items: center; gap: 10px; margin: 8px 0 26px;
}
html body #page-wrapper.hz-login-page .hz-login-brand-icon { width: 40px; height: 40px; }
html body #page-wrapper.hz-login-page .hz-login-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
html body #page-wrapper.hz-login-page .hz-login-brand-text strong { color: #ffffff !important; font-size: 21px; font-weight: 800; }
html body #page-wrapper.hz-login-page .hz-login-brand-text small { color: rgba(255,255,255,0.45) !important; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; }

html body #page-wrapper.hz-login-page .hz-login-title {
    color: #ffffff !important;
    font-size: 30px !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em;
    margin: 0 0 8px;
}
html body #page-wrapper.hz-login-page .hz-accent-text { color: #29b6c9 !important; }
html body #page-wrapper.hz-login-page .hz-login-subtitle {
    color: rgba(255,255,255,0.6) !important;
    font-size: 14.5px;
    margin: 0 0 28px;
}

html body #page-wrapper.hz-login-page .hz-label { color: rgba(255,255,255,0.85) !important; font-weight: 600 !important; font-size: 13px; }
html body #page-wrapper.hz-login-page .inputBox {
    position: relative;
}
html body #page-wrapper.hz-login-page .inputBox input {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(41,182,201,0.28) !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    height: 48px !important;
    padding-left: 44px !important;
}
html body #page-wrapper.hz-login-page .inputBox input::placeholder { color: rgba(255,255,255,0.35) !important; }
html body #page-wrapper.hz-login-page .inputBox input:focus {
    border-color: #29b6c9 !important;
    box-shadow: 0 0 0 3px rgba(41,182,201,0.18) !important;
}
html body #page-wrapper.hz-login-page .inputBox input:-webkit-autofill {
    -webkit-text-fill-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0 1000px #12203a inset !important;
}
html body #page-wrapper.hz-login-page .hz-input-icon {
    position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
    color: rgba(255,255,255,0.4); font-size: 14px; pointer-events: none;
}
html body #page-wrapper.hz-login-page .hz-pw-toggle {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: rgba(255,255,255,0.4);
    cursor: pointer; padding: 6px; font-size: 14px;
}
html body #page-wrapper.hz-login-page .hz-pw-toggle:hover { color: #29b6c9; }

html body #page-wrapper.hz-login-page .hz-login-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
html body #page-wrapper.hz-login-page .checkbox label { color: rgba(255,255,255,0.75) !important; font-size: 13px; }
html body #page-wrapper.hz-login-page .cr { border-color: rgba(255,255,255,0.3) !important; }
html body #page-wrapper.hz-login-page .checkbox input:checked ~ .cr { background: #29b6c9 !important; border-color: #29b6c9 !important; }
html body #page-wrapper.hz-login-page .need-help { color: #29b6c9 !important; font-size: 13px; font-weight: 600; }
html body #page-wrapper.hz-login-page .need-help:hover { color: #ffffff !important; }

html body #page-wrapper.hz-login-page .hz-login-cta {
    width: 100%;
    background: linear-gradient(135deg, #29b6c9, #1e96a8) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 14.5px !important;
    padding: 14px !important;
    box-shadow: 0 8px 22px rgba(41,182,201,0.35) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
html body #page-wrapper.hz-login-page .hz-login-cta::after { content: " \2192"; }
html body #page-wrapper.hz-login-page .hz-login-cta:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 12px 28px rgba(41,182,201,0.42) !important;
}
html body #page-wrapper.hz-login-page .hz-login-divider {
    display: flex; align-items: center; text-align: center;
    color: rgba(255,255,255,0.4); font-size: 13px; margin: 18px 0;
}
html body #page-wrapper.hz-login-page .hz-login-divider::before,
html body #page-wrapper.hz-login-page .hz-login-divider::after {
    content: ""; flex: 1; height: 1px; background: rgba(255,255,255,0.12);
}
html body #page-wrapper.hz-login-page .hz-login-divider span { padding: 0 12px; }
html body #page-wrapper.hz-login-page .hz-login-ghost-btn {
    display: block; width: 100%; text-align: center;
    background: transparent !important;
    border: 1.5px solid rgba(41,182,201,0.5) !important;
    color: #29b6c9 !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 14.5px !important;
    padding: 12.5px !important;
    transition: background 0.15s ease, border-color 0.15s ease;
}
html body #page-wrapper.hz-login-page .hz-login-ghost-btn:hover {
    background: rgba(41,182,201,0.08) !important;
    border-color: #29b6c9 !important;
    color: #ffffff !important;
}

html body #page-wrapper.hz-login-page .hz-login-trust {
    display: flex; align-items: center; gap: 12px;
    margin-top: 26px; padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
html body #page-wrapper.hz-login-page .hz-login-trust i {
    width: 34px; height: 34px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    border-radius: 999px; background: rgba(41,182,201,0.14); color: #29b6c9; font-size: 13px;
}
html body #page-wrapper.hz-login-page .hz-login-trust strong { display: block; color: #ffffff; font-size: 13.5px; }
html body #page-wrapper.hz-login-page .hz-login-trust span { display: block; color: rgba(255,255,255,0.5); font-size: 12px; }

/* ---------- Panel de foto ---------- */
html body #page-wrapper.hz-login-page .hz-login-photo-col {
    background-size: cover; background-position: center;
    padding: 48px 44px; display: flex; flex-direction: column; justify-content: center;
    color: #ffffff;
}
html body #page-wrapper.hz-login-page .hz-login-photo-title {
    color: #ffffff !important; font-size: 30px !important; font-weight: 800 !important;
    line-height: 1.25; margin: 0 0 12px;
}
html body #page-wrapper.hz-login-page .hz-login-photo-sub {
    color: rgba(255,255,255,0.75) !important; font-size: 14.5px; line-height: 1.6; margin: 0 0 26px;
}
html body #page-wrapper.hz-login-page .hz-auth-features { display: flex !important; flex-direction: column; gap: 16px; margin: 0 0 24px; }
html body #page-wrapper.hz-login-page .hz-auth-feature { display: flex; align-items: center; gap: 12px; background: none !important; border: none !important; padding: 0 !important; }
html body #page-wrapper.hz-login-page .hz-auth-feature i {
    width: 34px; height: 34px; border-radius: 10px;
    background: rgba(41,182,201,0.18) !important; color: #29b6c9 !important; font-size: 14px !important;
}
html body #page-wrapper.hz-login-page .hz-auth-feature-title { color: #ffffff !important; font-size: 14.5px !important; }
html body #page-wrapper.hz-login-page .hz-auth-feature-sub { color: rgba(255,255,255,0.58) !important; font-size: 12px !important; }

html body #page-wrapper.hz-login-page .hz-login-stats {
    display: grid; grid-template-columns: 1fr 1fr;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px; padding: 20px 22px;
}
html body #page-wrapper.hz-login-page .hz-login-stat:first-child { border-right: 1px solid rgba(255,255,255,0.12); }
html body #page-wrapper.hz-login-page .hz-login-stat-num { color: #29b6c9; font-size: 26px; font-weight: 800; }
html body #page-wrapper.hz-login-page .hz-login-stat-title { color: #ffffff; font-size: 13.5px; font-weight: 700; margin-top: 2px; }
html body #page-wrapper.hz-login-page .hz-login-stat-sub { color: rgba(255,255,255,0.5); font-size: 11.5px; margin-top: 2px; }

/* ---------- Responsive ---------- */
html body #page-wrapper.hz-login-page,
html body #page-wrapper.hz-login-page .container,
html body #page-wrapper.hz-login-page .hz-login-shell { overflow-x: hidden; max-width: 100%; }
@media (max-width: 991px) {
    html body #page-wrapper.hz-login-page .hz-login-card { grid-template-columns: 1fr; }
    html body #page-wrapper.hz-login-page .hz-login-photo-col { padding: 36px 30px; }
}
@media (max-width: 767px) {
    html body #page-wrapper.hz-login-page { padding: 16px 0; }
    html body #page-wrapper.hz-login-page .hz-login-shell { padding: 0 12px; }
    html body #page-wrapper.hz-login-page .hz-login-card { border-radius: 16px; }
    html body #page-wrapper.hz-login-page .hz-login-form-col { padding: 44px 22px 28px; }
    html body #page-wrapper.hz-login-page .hz-login-photo-col { padding: 28px 20px; }
    html body #page-wrapper.hz-login-page .hz-login-title { font-size: 24px !important; }
    html body #page-wrapper.hz-login-page .hz-login-photo-title { font-size: 22px !important; }
    html body #page-wrapper.hz-login-page .hz-login-stats { grid-template-columns: 1fr; gap: 14px; }
    html body #page-wrapper.hz-login-page .hz-login-stat:first-child { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.12); padding-bottom: 12px; }
}

/* ---------- Enlace "Iniciar sesion" del topbar de registro (mejorado) ---------- */
html body #page-wrapper.hz-register-page .hz-register-topbar-login a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1.5px solid rgba(91,141,239,0.4);
    border-radius: 999px;
    margin-left: 8px;
    transition: background 0.15s ease, border-color 0.15s ease;
}
html body #page-wrapper.hz-register-page .hz-register-topbar-login a:hover {
    background: rgba(91,141,239,0.12);
    border-color: #5b8def;
}

/* ============================================================
   HZ DASHBOARD v2 — layout de 2 columnas, chips de TLD,
   accesos rapidos y barra lateral de cuenta.
   ============================================================ */

.hz-dashboard-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 22px;
    align-items: start;
}
.hz-dashboard-main { min-width: 0; }

/* Foto real de fondo en la tarjeta promocional */
html[data-theme] .hz-promo-card {
    background-size: cover !important;
    background-position: center !important;
}
.hz-promo-text .hz-accent-text { color: var(--hz-accent); }

/* Chips de TLD bajo el buscador de dominios */
.hz-tld-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
html[data-theme] .hz-tld-chip {
    background: var(--hz-bg-card-alt) !important;
    border: 1px solid var(--hz-border) !important;
    color: var(--hz-text-primary) !important;
    border-radius: 999px !important;
    padding: 6px 14px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
html[data-theme] .hz-tld-chip:hover {
    background: var(--hz-accent-soft) !important;
    border-color: var(--hz-accent) !important;
    color: var(--hz-accent) !important;
}

/* Accesos rapidos */
.hz-quick-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
html[data-theme] .hz-quick-action {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--hz-bg-card-alt) !important;
    border: 1px solid var(--hz-border) !important;
    border-radius: var(--hz-radius-sm) !important;
    padding: 16px !important;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
html[data-theme] .hz-quick-action:hover {
    transform: translateY(-2px);
    border-color: var(--hz-accent) !important;
    box-shadow: var(--hz-shadow-md);
}
html[data-theme] .hz-quick-action-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hz-accent-soft) !important;
    color: var(--hz-accent) !important;
    font-size: 15px !important;
}
html[data-theme] .hz-quick-action strong {
    display: block;
    color: var(--hz-text-primary) !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
}
html[data-theme] .hz-quick-action span {
    display: block;
    color: var(--hz-text-muted) !important;
    font-size: 11.5px !important;
    margin-top: 2px;
}
@media (max-width: 991px) { .hz-quick-actions { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .hz-quick-actions { grid-template-columns: 1fr; } }

/* Barra lateral de cuenta */
.hz-dashboard-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
html[data-theme] .hz-side-card {
    background: var(--hz-bg-card) !important;
    border: 1px solid var(--hz-border) !important;
    border-radius: var(--hz-radius) !important;
    box-shadow: var(--hz-shadow);
    padding: 18px;
}
html[data-theme] .hz-side-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--hz-text-primary) !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    margin-bottom: 14px;
}
html[data-theme] .hz-side-card-head i { color: var(--hz-accent); }

.hz-side-user { text-align: center; margin-bottom: 14px; }
.hz-side-avatar {
    width: 64px; height: 64px; border-radius: 999px;
    background-size: cover; background-position: center;
    display: inline-block; margin-bottom: 10px;
    border: 2px solid var(--hz-border);
}
html[data-theme] .hz-side-user-name { color: var(--hz-text-primary) !important; font-weight: 700; font-size: 14px; }
html[data-theme] .hz-side-user-email { color: var(--hz-text-muted) !important; font-size: 12px; word-break: break-all; }
.hz-side-btn { display: block !important; width: 100%; text-align: center; }

html[data-theme] .hz-side-balance { color: var(--hz-green) !important; font-size: 26px; font-weight: 800; }
html[data-theme] .hz-side-balance-label { color: var(--hz-text-muted) !important; font-size: 12px; margin-bottom: 14px; }
html[data-theme] .hz-side-outline-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    background: transparent !important;
    border: 1.5px solid var(--hz-border-strong) !important;
    color: var(--hz-text-primary) !important;
    border-radius: 10px !important;
    padding: 10px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    transition: border-color 0.15s ease, color 0.15s ease;
}
html[data-theme] .hz-side-outline-btn:hover {
    border-color: var(--hz-accent) !important;
    color: var(--hz-accent) !important;
}

.hz-side-links { list-style: none; margin: 0; padding: 0; }
html[data-theme] .hz-side-links li { border-bottom: 1px solid var(--hz-border); }
html[data-theme] .hz-side-links li:last-child { border-bottom: none; }
html[data-theme] .hz-side-links a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 2px;
    color: var(--hz-text-primary) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}
html[data-theme] .hz-side-links a i { color: var(--hz-text-muted); width: 16px; }
html[data-theme] .hz-side-links a:hover { color: var(--hz-accent) !important; }
html[data-theme] .hz-side-links a:hover i { color: var(--hz-accent); }

html[data-theme] .hz-side-support p { color: var(--hz-text-muted) !important; font-size: 12.5px; margin: 0 0 14px; }

@media (max-width: 991px) {
    .hz-dashboard-layout { grid-template-columns: 1fr; }
    .hz-dashboard-sidebar { flex-direction: row; flex-wrap: wrap; }
    .hz-dashboard-sidebar .hz-side-card { flex: 1 1 240px; }
}
@media (max-width: 767px) {
    .hz-dashboard-sidebar { flex-direction: column; }
}

/* ---------- Trustpilot badge en el panel de foto del login ---------- */
html body #page-wrapper.hz-login-page .hz-trustpilot-badge {
    border-top: 1px solid rgba(255,255,255,0.16);
    padding-top: 18px;
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
html body #page-wrapper.hz-login-page .hz-trustpilot-label { color: #ffffff !important; font-weight: 700; font-size: 13px; }
html body #page-wrapper.hz-login-page .hz-trustpilot-stars { color: #00b67a; font-size: 12px; letter-spacing: 1px; }
html body #page-wrapper.hz-login-page .hz-trustpilot-brand { color: #ffffff !important; font-weight: 800; font-size: 13px; }
html body #page-wrapper.hz-login-page .hz-trustpilot-brand i { color: #00b67a; font-size: 11px; margin-right: 2px; }
html body #page-wrapper.hz-login-page .hz-trustpilot-sub {
    width: 100%;
    color: rgba(255,255,255,0.55) !important;
    font-size: 12px;
}

/* ---------- Banderas emoji (moneda) ---------- */
.hz-flag-emoji {
    display: inline-flex;
    align-items: center;
    font-size: 15px;
    line-height: 1;
    flex-shrink: 0;
}

/* ---------- Chips de TLD con color por extension ---------- */
html[data-theme] .hz-tld-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
html[data-theme] .hz-tld-chip::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    display: inline-block;
    flex-shrink: 0;
}
html[data-theme] .hz-tld-chip.hz-tld-com {
    background: var(--hz-blue-soft) !important;
    border-color: var(--hz-blue) !important;
    color: var(--hz-blue) !important;
}
html[data-theme] .hz-tld-chip.hz-tld-com::before { background: var(--hz-blue); }
html[data-theme] .hz-tld-chip.hz-tld-net {
    background: var(--hz-purple-soft) !important;
    border-color: var(--hz-purple) !important;
    color: var(--hz-purple) !important;
}
html[data-theme] .hz-tld-chip.hz-tld-net::before { background: var(--hz-purple); }
html[data-theme] .hz-tld-chip.hz-tld-org {
    background: var(--hz-green-soft) !important;
    border-color: var(--hz-green) !important;
    color: var(--hz-green) !important;
}
html[data-theme] .hz-tld-chip.hz-tld-org::before { background: var(--hz-green); }
html[data-theme] .hz-tld-chip.hz-tld-comco {
    background: var(--hz-accent-soft) !important;
    border-color: var(--hz-accent) !important;
    color: var(--hz-accent) !important;
}
html[data-theme] .hz-tld-chip.hz-tld-comco::before { background: var(--hz-accent); }
html[data-theme] .hz-tld-chip.hz-tld-co {
    background: var(--hz-amber-soft) !important;
    border-color: var(--hz-amber) !important;
    color: var(--hz-amber) !important;
}
html[data-theme] .hz-tld-chip.hz-tld-co::before { background: var(--hz-amber); }
html[data-theme] .hz-tld-chip:hover {
    filter: brightness(0.95);
    transform: translateY(-1px);
}

/* ============================================================
   HZ DOMAIN CHECKER — resultados de busqueda de dominios
   (cartx/domainregister.tpl). Diseno fijo consistente,
   independiente del toggle claro/oscuro.
   ============================================================ */

/* ---------- Encabezado de resultado (disponible/no disponible) ---------- */
.domain-checker-result-headline {
    background: #101c34 !important;
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 20px;
    text-align: center;
}
.domain-checker-result-headline .domain-unavailable,
.domain-checker-result-headline .domain-invalid {
    color: #ff8a80 !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    margin: 0;
}
.domain-checker-result-headline .avia-sab {
    color: #34d399 !important;
    font-weight: 700 !important;
    font-size: 15px !important;
}
.domain-checker-result-headline .domain-price strong {
    color: #ffffff !important;
}
.domain-checker-result-headline .price {
    color: #29b6c9 !important;
    font-weight: 800 !important;
    font-size: 20px !important;
}
.domain-checker-result-headline small {
    color: rgba(255,255,255,0.6) !important;
}
.domain-checker-result-headline .cart-btn.btn-add-to-cart {
    background: linear-gradient(135deg, #29b6c9, #1e96a8) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 10px 22px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(41,182,201,0.3);
}

/* ---------- Tarjetas de TLD (spotlight) ---------- */
.col-host {
    box-shadow: 0 6px 18px rgba(16,24,40,0.08) !important;
    border: 1px solid #eef1f6 !important;
    background: #ffffff !important;
    border-radius: 14px !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.col-host:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(16,24,40,0.14) !important;
}
.in-titel {
    background: linear-gradient(135deg, #2563eb, #1d4fd1) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(37,99,235,0.35);
    font-size: 14px !important;
}
#spotlightTlds .col-host:nth-child(1) .in-titel,
#spotlightTlds .col-host:nth-child(6) .in-titel { background: linear-gradient(135deg, #2563eb, #1d4fd1) !important; box-shadow: 0 4px 10px rgba(37,99,235,0.35); }
#spotlightTlds .col-host:nth-child(2) .in-titel,
#spotlightTlds .col-host:nth-child(7) .in-titel { background: linear-gradient(135deg, #7c3aed, #6425c9) !important; box-shadow: 0 4px 10px rgba(124,58,237,0.35); }
#spotlightTlds .col-host:nth-child(3) .in-titel,
#spotlightTlds .col-host:nth-child(8) .in-titel { background: linear-gradient(135deg, #64748b, #475569) !important; box-shadow: 0 4px 10px rgba(71,85,105,0.35); }
#spotlightTlds .col-host:nth-child(4) .in-titel,
#spotlightTlds .col-host:nth-child(9) .in-titel { background: linear-gradient(135deg, #1e96a8, #177f8f) !important; box-shadow: 0 4px 10px rgba(30,150,168,0.35); }
#spotlightTlds .col-host:nth-child(5) .in-titel,
#spotlightTlds .col-host:nth-child(10) .in-titel { background: linear-gradient(135deg, #d97706, #b25b04) !important; box-shadow: 0 4px 10px rgba(217,119,6,0.35); }
.usd-price .price,
.usd-price .available.price {
    color: #101828 !important;
    font-size: 20px !important;
    font-weight: 800 !important;
}
.domains-post-register .cart-blue,
.domains-post-register button.btn-add-to-cart {
    background: linear-gradient(135deg, #29b6c9, #1e96a8) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 9px 18px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    box-shadow: 0 4px 12px rgba(41,182,201,0.3);
    transition: transform 0.15s ease, filter 0.15s ease;
}
.domains-post-register .cart-blue:hover,
.domains-post-register button.btn-add-to-cart:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
}
.domains-post-register button.btn.unavailable,
.domains-post-register button.btn.invalid {
    background: #f1f5f9 !important;
    color: #94a3b8 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 999px !important;
    font-weight: 600 !important;
    font-size: 12.5px !important;
}

/* ---------- Dominios sugeridos ---------- */
.suggested-domains .sted span {
    color: #101828 !important;
    font-weight: 800 !important;
    font-size: 16px !important;
}
.domain-suggestion {
    background: #ffffff !important;
    border: 1px solid #eef1f6 !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    margin-bottom: 10px !important;
    box-shadow: 0 2px 8px rgba(16,24,40,0.05);
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}
.domain-suggestion h3 {
    margin: 0 !important;
    font-size: 15px !important;
}
.domain-suggestion h3 .domain {
    color: #101828 !important;
    font-weight: 700 !important;
}
.domain-suggestion h3 .extension {
    color: #29b6c9 !important;
    font-weight: 700 !important;
}
.domain-suggestion .price {
    color: #101828 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
}
.domain-suggestions-warning p,
.no-more.small { color: #94a3b8 !important; }

/* ---------- Cajas promocionales (hosting / transferencia) ---------- */
.domain-promo-box {
    background: #ffffff !important;
    border: 1px solid #eef1f6 !important;
    border-radius: 16px !important;
    padding: 28px 26px !important;
    box-shadow: 0 6px 18px rgba(16,24,40,0.08) !important;
    text-align: center;
    opacity: 1 !important;
    height: 100%;
}
.domain-promo-box .clearfix { margin-bottom: 4px; }
.domain-promo-box i.fa-4x {
    font-size: 34px !important;
    width: 64px;
    height: 64px;
    line-height: 64px !important;
    border-radius: 999px;
    margin: 0 auto 14px;
    display: inline-block !important;
    color: #ffffff !important;
}
.domain-promo-box i.fa-server { background: linear-gradient(135deg, #2563eb, #1d4fd1) !important; }
.domain-promo-box i.fa-globe { background: linear-gradient(135deg, #29b6c9, #1e96a8) !important; }
.domain-promo-box h3 {
    color: #101828 !important;
    font-weight: 800 !important;
    font-size: 19px !important;
    opacity: 1 !important;
    margin: 0 0 4px !important;
}
.domain-promo-box p {
    color: #64748b !important;
    opacity: 1 !important;
    font-size: 13.5px !important;
    margin: 0 0 6px !important;
}

/* Las tarjetas de arriba (spotlight TLD, dominios sugeridos, promos)
   se escribieron con colores fijos claros (sin variable de tema), asi
   que se quedaban blancas incluso en modo oscuro -- justo la
   "cabecera blanca" reportada en el buscador de dominios. Se agregan
   overrides solo para dark, sin tocar el diseño claro que ya funciona. */
html[data-theme="dark"] .col-host {
    background: var(--hz-bg-card) !important;
    border-color: var(--hz-border) !important;
}
html[data-theme="dark"] .usd-price .price,
html[data-theme="dark"] .usd-price .available.price {
    color: var(--hz-text-primary) !important;
}
html[data-theme="dark"] .suggested-domains .sted span {
    color: var(--hz-text-primary) !important;
}
html[data-theme="dark"] .domain-suggestion {
    background: var(--hz-bg-card) !important;
    border-color: var(--hz-border) !important;
}
html[data-theme="dark"] .domain-suggestion h3 .domain,
html[data-theme="dark"] .domain-suggestion .price {
    color: var(--hz-text-primary) !important;
}
html[data-theme="dark"] .domain-suggestions-warning p,
html[data-theme="dark"] .no-more.small {
    color: var(--hz-text-muted) !important;
}
html[data-theme="dark"] .domain-promo-box {
    background: var(--hz-bg-card) !important;
    border-color: var(--hz-border) !important;
}
html[data-theme="dark"] .domain-promo-box h3 {
    color: var(--hz-text-primary) !important;
}
html[data-theme="dark"] .domain-promo-box p {
    color: var(--hz-text-muted) !important;
}
/* Popup "Continuar al carrito" que aparece al hacer scroll */
html[data-theme] .cont-cart {
    background: var(--hz-bg-card) !important;
    box-shadow: var(--hz-shadow-md) !important;
    border: 1px solid var(--hz-border);
}
html[data-theme] .cart-btng {
    background: linear-gradient(135deg, var(--hz-accent), var(--hz-accent-dark)) !important;
    color: #ffffff !important;
}
.domain-promo-box p.font-bold {
    color: #101828 !important;
    font-weight: 700 !important;
}
.domain-promo-box p.text-warning,
.domain-promo-box p.text-primary {
    color: #101828 !important;
}
.domain-promo-box .btn {
    display: inline-block;
    border-radius: 999px !important;
    padding: 11px 26px !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    border: none !important;
    margin-top: 10px;
    box-shadow: 0 4px 12px rgba(16,24,40,0.15);
}
.domain-promo-box .btn.btn-warning {
    background: linear-gradient(135deg, #f5a623, #d97706) !important;
    color: #ffffff !important;
}
.domain-promo-box .btn.btn-primary {
    background: linear-gradient(135deg, #29b6c9, #1e96a8) !important;
    color: #ffffff !important;
}
.domain-promo-box .small {
    color: #94a3b8 !important;
    font-size: 11.5px !important;
}

/* ---------- Accesos rapidos: icono con color propio por tarjeta ---------- */
html[data-theme] .hz-quick-action:nth-child(1) .hz-quick-action-icon {
    background: var(--hz-blue-soft) !important;
    color: var(--hz-blue) !important;
}
html[data-theme] .hz-quick-action:nth-child(2) .hz-quick-action-icon {
    background: var(--hz-green-soft) !important;
    color: var(--hz-green) !important;
}
html[data-theme] .hz-quick-action:nth-child(3) .hz-quick-action-icon {
    background: var(--hz-purple-soft) !important;
    color: var(--hz-purple) !important;
}
html[data-theme] .hz-quick-action:nth-child(4) .hz-quick-action-icon {
    background: var(--hz-amber-soft) !important;
    color: var(--hz-amber) !important;
}

/* ---------- Icono de idioma con nombre visible ---------- */
.hz-lang-toggle {
    display: flex !important;
    align-items: center;
    gap: 6px;
    width: auto !important;
    padding: 0 10px !important;
    background: transparent !important;
}
.hz-lang-toggle:hover {
    background: transparent !important;
    opacity: 0.75;
}
.hz-lang-name {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85) !important;
    text-transform: capitalize;
}
.hz-flag-svg {
    width: 18px;
    height: 13px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
    display: block;
}

/* ---------- Selector de moneda: sin recuadro, solo bandera + flecha ---------- */
html[data-theme] .dropdown-toggle.hz-currency-toggle {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
html[data-theme] .dropdown-toggle.hz-currency-toggle:hover {
    background: transparent !important;
    opacity: 0.75;
}

/* ---------- Panel "Mi cuenta": el fondo sigue el tema (blanco en
   claro, oscuro en oscuro), el texto debe seguirlo tambien. ---------- */
html[data-theme] .myaccount-sidenav li a {
    color: var(--hz-text-primary) !important;
}
html[data-theme] .myaccount-sidenav li a i {
    color: var(--hz-text-muted) !important;
}
html[data-theme] .myaccount-sidenav li a:hover,
html[data-theme] .myaccount-sidenav li.active a {
    color: var(--hz-accent) !important;
}
html[data-theme] .myaccount-sidenav li a:hover i,
html[data-theme] .myaccount-sidenav li.active a i {
    color: var(--hz-accent) !important;
}

/* ---------- Menu lateral: reducir espacio icono-texto y dar
   color propio a cada icono (en vez de un solo tono plano). ---------- */
html[data-theme] #sidebar ul.list-unstyled.components li a i {
    padding: 0 !important;
    width: 20px !important;
    text-align: center;
    font-size: 16px !important;
}
html[data-theme] #sidebar ul.list-unstyled.components span {
    margin-left: 12px !important;
}
html[data-theme] #sidebar > ul.components:first-of-type > li:nth-child(2) > a > i,
html[data-theme] #sidebar > ul.components:first-of-type > li.hz-has-children > a > i:first-child {
    color: var(--hz-purple) !important;
}
html[data-theme] #sidebar > ul.components:first-of-type > li:nth-child(3) > a > i {
    color: var(--hz-green) !important;
}
html[data-theme] #sidebar > ul.components:first-of-type > li:nth-child(4) > a > i {
    color: var(--hz-amber) !important;
}
html[data-theme] #sidebar > ul.components:first-of-type > li:nth-child(5) > a > i {
    color: var(--hz-blue) !important;
}
html[data-theme] #sidebar > ul.components:first-of-type > li:nth-child(6) > a > i {
    color: var(--hz-accent) !important;
}
html[data-theme] #sidebar ul.list-unstyled.components li a.active i {
    color: #ffffff !important;
}

/* ---------- Anadir fondos: tarjeta premium "glossy" ---------- */
html[data-theme] .hz-addfunds-card {
    background: var(--hz-bg-card) !important;
    border: 1px solid var(--hz-border) !important;
    border-radius: var(--hz-radius) !important;
    box-shadow: var(--hz-shadow-md) !important;
    padding: 28px !important;
}
html[data-theme] .hz-addfunds-card .form-colam {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
html[data-theme] .hz-addfunds-card .col-sm-6 { flex: 1 1 220px; }
html[data-theme] .hz-addfunds-card .downFooter {
    color: var(--hz-text-muted) !important;
    font-size: 12.5px;
    margin-top: 14px;
}
html[data-theme] .hz-addfunds-card .btn-footer .btn-save.wgs_custom-btn {
    background: linear-gradient(135deg, var(--hz-accent), var(--hz-accent-dark)) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.25) !important;
    border-radius: 999px !important;
    padding: 12px 30px !important;
    font-weight: 700 !important;
}

html[data-theme] .rank-item,
html[data-theme] .rank-item.active {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.hz-fund-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
html[data-theme] .hz-fund-tile {
    display: flex !important;
    align-items: center;
    gap: 14px;
    background: var(--hz-bg-card-alt) !important;
    border: 1px solid var(--hz-border) !important;
    border-radius: var(--hz-radius) !important;
    padding: 14px 18px !important;
    box-shadow: 0 2px 8px rgba(16,24,40,0.06), inset 0 1px 0 rgba(255,255,255,0.04);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
html[data-theme] .hz-fund-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--hz-shadow-md);
}
html[data-theme] .hz-fund-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #ffffff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 2px 8px rgba(0,0,0,0.15);
}
html[data-theme] .hz-fund-green .hz-fund-icon { background: linear-gradient(135deg, var(--hz-green), #0f9d58) !important; }
html[data-theme] .hz-fund-blue .hz-fund-icon { background: linear-gradient(135deg, var(--hz-blue), #1d4fd1) !important; }
html[data-theme] .hz-fund-amber .hz-fund-icon { background: linear-gradient(135deg, var(--hz-amber), #b25b04) !important; }
html[data-theme] .hz-fund-purple .hz-fund-icon { background: linear-gradient(135deg, var(--hz-purple), #6425c9) !important; }
html[data-theme] .hz-fund-tile .scans-cont { flex: 1; display: flex; flex-direction: column; gap: 2px; }
html[data-theme] .hz-fund-tile .scans-cont strong {
    color: var(--hz-text-muted) !important;
    font-weight: 600 !important;
    font-size: 12.5px !important;
    order: 1;
}
html[data-theme] .hz-fund-tile .scans-cont .classRightLeft {
    color: var(--hz-text-primary) !important;
    font-weight: 800 !important;
    font-size: 17px !important;
    order: 0;
}

/* ============================================================
   HZ TABLAS — cobertura global para listados con DataTables
   (dominios, tickets, facturas...) que nunca recibieron tema
   oscuro: encabezados, paginacion, barras de herramientas.
   ============================================================ */
html[data-theme] div.dataTables_wrapper,
html[data-theme] .dataTables_wrapper .row,
html[data-theme] .dataTables_wrapper .form-inline {
    background: transparent !important;
    color: var(--hz-text-primary) !important;
}
html[data-theme] .dataTables_length label,
html[data-theme] .dataTables_filter label,
html[data-theme] .dataTables_info {
    color: var(--hz-text-muted) !important;
}
html[data-theme] .dataTables_length select,
html[data-theme] .dataTables_filter input {
    background: var(--hz-bg-input) !important;
    color: var(--hz-text-primary) !important;
    border: 1px solid var(--hz-border-strong) !important;
}
html[data-theme] table.dataTable thead th,
html[data-theme] table.dataTable thead td {
    background: var(--hz-bg-card-alt) !important;
    color: var(--hz-text-primary) !important;
    border-bottom: 2px solid var(--hz-border) !important;
}
html[data-theme] table.dataTable tbody th,
html[data-theme] table.dataTable tbody td {
    background: var(--hz-bg-card) !important;
    color: var(--hz-text-primary) !important;
    border-color: var(--hz-border) !important;
}
html[data-theme] .paginate_button {
    color: var(--hz-text-primary) !important;
    background: var(--hz-bg-card-alt) !important;
    border: 1px solid var(--hz-border) !important;
    border-radius: 6px !important;
    margin: 0 2px;
}
html[data-theme] .paginate_button.current,
html[data-theme] .paginate_button.current:hover {
    background: var(--hz-accent) !important;
    border-color: var(--hz-accent) !important;
    color: #ffffff !important;
}
html[data-theme] .paginate_button.disabled {
    opacity: 0.4;
}
html[data-theme] .dataTables_wrapper .btn-group,
html[data-theme] .dataTables_wrapper .dropdown-menu {
    background: var(--hz-bg-card) !important;
    color: var(--hz-text-primary) !important;
    border: 1px solid var(--hz-border) !important;
}
html[data-theme] .dataTables_wrapper .dropdown-menu a {
    color: var(--hz-text-primary) !important;
}

/* ---------- Tickets de soporte: toolbar y tabla ---------- */
html[data-theme] .ticket-head {
    background: var(--hz-bg-card-alt) !important;
    border-radius: 0 0 var(--hz-radius) var(--hz-radius);
    border-bottom: 1px solid var(--hz-border);
}
html[data-theme] .tickt-header h3,
html[data-theme] .tickt-header .supportTotalH3 {
    color: var(--hz-text-primary) !important;
}
html[data-theme] .tickt-header .dropdown-toggle {
    color: var(--hz-text-muted) !important;
}
html[data-theme] .search-tickets .search-query {
    background: var(--hz-bg-input) !important;
    color: var(--hz-text-primary) !important;
    border: 1px solid var(--hz-border-strong) !important;
}
html[data-theme] .search-tickets .btn.btn-danger {
    background: var(--hz-accent) !important;
    border-color: var(--hz-accent) !important;
    color: #ffffff !important;
}
html[data-theme] .ticket-table-top th,
html[data-theme] .tragat-table thead {
    background: var(--hz-bg-card-alt) !important;
    color: var(--hz-text-primary) !important;
}
html[data-theme] .ticket-table {
    background: var(--hz-bg-card-alt) !important;
    box-shadow: none !important;
}
html[data-theme] .ticket-table h4 {
    color: var(--hz-text-primary) !important;
}
html[data-theme] .ticket-table p {
    color: var(--hz-text-muted) !important;
}
html[data-theme] .search-tickets .input-group {
    border-color: var(--hz-border-strong) !important;
}
/* .filt (boton de filtro por departamento en Tickets/Servicios) traia
   fondo blanco fijo y nunca se toco. */
html[data-theme] .filt {
    background: var(--hz-bg-card-alt) !important;
    color: var(--hz-text-muted) !important;
    border: 1px solid var(--hz-border) !important;
}
html[data-theme] .filt:hover {
    color: var(--hz-text-primary) !important;
}

/* ---------- Etiquetas de formulario en paginas normales del area
   de clientes (Mis Datos, etc.) que no pasan por #page-wrapper ---------- */
html[data-theme] label.hz-label {
    color: var(--hz-text-primary) !important;
    font-weight: 600 !important;
}

/* ---------- Anadir fondos: quitar el anidado "caja dentro de caja"
   (form-main/formBox/pers-info ya no necesitan su propio marco,
   la tarjeta exterior hz-addfunds-card es el unico borde visible). ---------- */
html[data-theme] .hz-addfunds-card .pers-info,
html[data-theme] .hz-addfunds-card .tab_container,
html[data-theme] .hz-addfunds-card .form-main,
html[data-theme] .hz-addfunds-card .formBox {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
html[data-theme] .hz-addfunds-card .row {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}
html[data-theme] .hz-addfunds-card .col-md-6 {
    display: flex;
    flex-direction: column;
}
html[data-theme] .hz-addfunds-card .btn-footer {
    margin-top: 18px !important;
    margin-left: 0 !important;
}

/* ---------- Transferir dominio: unificar los "recuadros" sueltos en
   una sola tarjeta glossy, igual que Anadir fondos ---------- */
html[data-theme] .hz-transfer-card {
    background: var(--hz-bg-card) !important;
    border: 1px solid var(--hz-border) !important;
    border-radius: var(--hz-radius) !important;
    box-shadow: var(--hz-shadow-md) !important;
    padding: 28px !important;
    max-width: 640px;
}
html[data-theme] .hz-transfer-card .pers-info,
html[data-theme] .hz-transfer-card .tab_container,
html[data-theme] .hz-transfer-card .form-main,
html[data-theme] .hz-transfer-card .formBox {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 22px 0 !important;
}
html[data-theme] .hz-transfer-card .formBox:last-of-type {
    margin-bottom: 0 !important;
}
html[data-theme] .hz-transfer-card .Pers-titel {
    font-size: 15px;
    margin-bottom: 18px;
}
html[data-theme] .hz-transfer-card .hz-transfer-field {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
}
/* El input de la plantilla original (cartx) superpone la etiqueta
   detras del campo y solo aparece arriba cuando .focus esta presente;
   como aqui el input ya tiene fondo solido (tema oscuro), la etiqueta
   quedaba tapada. Se fija como etiqueta estatica siempre visible. */
html[data-theme] .hz-transfer-card .inputBox {
    padding-top: 20px;
    margin-bottom: 4px;
}
html[data-theme] .hz-transfer-card .inputBox .inputText {
    position: static !important;
    display: block !important;
    transform: none !important;
    opacity: 1 !important;
    line-height: 1.2 !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--hz-text-muted) !important;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 8px;
}
html[data-theme] .hz-transfer-card .inputBox .input {
    height: 46px !important;
    padding: 0 14px !important;
    background: var(--hz-bg-input) !important;
    color: var(--hz-text-primary) !important;
    border: 1px solid var(--hz-border-strong) !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
}
html[data-theme] .hz-transfer-card .hz-transfer-help {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    color: var(--hz-accent) !important;
    font-size: 12.5px;
    font-weight: 600;
}
html[data-theme] .hz-transfer-card #btnTransferDomain.wgs_custom-btn {
    background: linear-gradient(135deg, var(--hz-accent), var(--hz-accent-dark)) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.25) !important;
    border-radius: 999px !important;
    padding: 12px 30px !important;
    font-weight: 700 !important;
    width: 100%;
}
html[data-theme] .hz-transfer-card .hz-transfer-note {
    margin-top: 18px;
}
html[data-theme] .hz-transfer-card .hz-transfer-note p {
    color: var(--hz-text-muted) !important;
    font-size: 12.5px;
    margin: 0;
}
/* .form-colam y #captchaContainer traen 50px de margin-bottom de la
   plantilla original (pensados para un layout de varias columnas);
   en la tarjeta unica generaban huecos enormes entre los campos. */
html[data-theme] .hz-transfer-card .form-colam {
    margin-bottom: 0 !important;
}
html[data-theme] .hz-transfer-card #captchaContainer {
    margin-bottom: 0 !important;
    float: none !important;
    width: 100%;
}
html[data-theme] .hz-transfer-card .row {
    margin: 0 0 18px 0 !important;
}
html[data-theme] .hz-transfer-card .row:last-of-type {
    margin-bottom: 0 !important;
}

/* ---------- Renovar dominios (cart.php paso 2: configurar renovaciones) ---------- */
html[data-theme] .body-page {
    background: var(--hz-bg-page) !important;
}
html[data-theme] .sap-row {
    background: var(--hz-bg-card) !important;
    box-shadow: none !important;
    border-bottom: 1px solid var(--hz-border);
}
html[data-theme] .pur-titel {
    color: var(--hz-text-primary) !important;
}
html[data-theme] .step .step-item a {
    color: var(--hz-text-muted) !important;
}
html[data-theme] .step .step-item.active a {
    color: var(--hz-text-primary) !important;
    font-weight: 700;
}
html[data-theme] .step .step-item:not(:first-child)::before,
html[data-theme] .step .step-item.active ~ .step-item::before {
    background: var(--hz-border) !important;
}
html[data-theme] .step .step-item a::before {
    background: var(--hz-accent) !important;
}
html[data-theme] .step .step-item.active a::before {
    background: var(--hz-accent-dark) !important;
}
html[data-theme] .stp-cot,
html[data-theme] .stp-cot.check,
html[data-theme] .step-item.active span {
    color: #ffffff !important;
}
html[data-theme] .web-rank {
    border-top-color: var(--hz-border) !important;
}
html[data-theme] .domain-renewals h3,
html[data-theme] .domain-renewal h3 {
    color: var(--hz-text-primary) !important;
}
html[data-theme] .domain-renewal {
    background: var(--hz-bg-card) !important;
    border: 1px solid var(--hz-border) !important;
    border-radius: var(--hz-radius) !important;
    box-shadow: var(--hz-shadow) !important;
    padding: 20px !important;
    margin-bottom: 16px !important;
}
html[data-theme] .domain-renewal p {
    color: var(--hz-text-muted) !important;
}
html[data-theme] .domain-renewal .control-label {
    color: var(--hz-text-primary) !important;
}
html[data-theme] .domain-renewal .form-control,
html[data-theme] .select-renewal-pricing {
    background: var(--hz-bg-input) !important;
    color: var(--hz-text-primary) !important;
    border: 1px solid var(--hz-border-strong) !important;
    border-radius: 8px !important;
}
html[data-theme] .btn-add-renewal-to-cart {
    background: linear-gradient(135deg, var(--hz-accent), var(--hz-accent-dark)) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 8px 20px !important;
    font-weight: 600 !important;
}
html[data-theme] .btn-add-renewal-to-cart .added {
    color: #ffffff !important;
}
html[data-theme] #scrollingCartSummary .order-summary {
    background: linear-gradient(135deg, var(--hz-accent), var(--hz-accent-dark)) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
html[data-theme] #no-domains.alert {
    background: var(--hz-bg-card) !important;
    color: var(--hz-text-primary) !important;
    border: 1px solid var(--hz-border) !important;
}
html[data-theme] .domain-renewals-filter.form-control {
    background: var(--hz-bg-input) !important;
    color: var(--hz-text-primary) !important;
    border: 1px solid var(--hz-border-strong) !important;
}

/* ---------- Barra "Elegir contacto / Añadir nuevo" en Contactos:
   .well y .foem-addx .custom-select nunca recibieron tema oscuro
   (fondo azul claro / blanco fijos, cpanel.css). ---------- */
html[data-theme] .well {
    background-color: var(--hz-bg-card-alt) !important;
    border: 1px solid var(--hz-border) !important;
    box-shadow: none !important;
}
html[data-theme] .foem-addx label {
    color: var(--hz-text-primary) !important;
}
html[data-theme] .foem-addx .custom-select {
    background: var(--hz-bg-input) !important;
    border: 1px solid var(--hz-border-strong) !important;
}
html[data-theme] .foem-addx button.btn.btn-default.go {
    background: linear-gradient(135deg, var(--hz-accent), var(--hz-accent-dark)) !important;
    border: none !important;
    border-radius: 8px !important;
}
/* Widget JS "custom-select" (min.js): reemplaza el <select> por estos
   divs generados; nunca tuvieron tema oscuro en ningun lado del sitio. */
html[data-theme] .select-selected,
html[data-theme] .select-items div {
    color: var(--hz-text-primary) !important;
    border-color: transparent transparent var(--hz-border) transparent !important;
}
html[data-theme] .select-items {
    background: var(--hz-bg-card) !important;
    border: 1px solid var(--hz-border) !important;
    box-shadow: var(--hz-shadow-md);
}
html[data-theme] .select-items div:hover,
html[data-theme] .same-as-selected {
    background-color: var(--hz-bg-card-alt) !important;
}
html[data-theme] .select-selected:after {
    border-color: var(--hz-text-muted) transparent transparent transparent !important;
}
html[data-theme] .select-selected.select-arrow-active:after {
    border-color: transparent transparent var(--hz-text-muted) transparent !important;
}

/* ---------- Cambiar contraseña (/user/password): pagina sin ninguna
   tarjeta contenedora, se veia "espichada" con muchos huecos en
   escritorio. Se envuelve en una tarjeta como Anadir fondos. ---------- */
html[data-theme] .hz-password-card {
    background: var(--hz-bg-card) !important;
    border: 1px solid var(--hz-border) !important;
    border-radius: var(--hz-radius) !important;
    box-shadow: var(--hz-shadow-md) !important;
    padding: 28px !important;
    max-width: 640px;
}
html[data-theme] .hz-password-card .Pers-titel {
    font-size: 15px;
    margin-bottom: 22px;
}
html[data-theme] .hz-password-card .change-pass {
    margin-bottom: 22px !important;
}
html[data-theme] .hz-password-card .change-pass .col-md-5,
html[data-theme] .hz-password-card > form > .col-md-5 {
    width: 100%;
    max-width: 100%;
}
html[data-theme] .hz-password-card .change-pass input {
    color: var(--hz-text-primary) !important;
    background: var(--hz-bg-input) !important;
    border: 1px solid var(--hz-border-strong) !important;
    border-radius: 8px !important;
    height: 46px !important;
}
html[data-theme] .hz-password-card .generate-password {
    border-radius: 8px !important;
    white-space: nowrap;
}
html[data-theme] .hz-password-card .stren a {
    color: var(--hz-accent) !important;
}
html[data-theme] .hz-password-card .progress {
    background: var(--hz-bg-card-alt) !important;
    box-shadow: none !important;
    border-radius: 999px;
    overflow: hidden;
}
html[data-theme] .hz-password-card .btn-footer.card {
    display: flex;
    gap: 10px;
}

/* ---------- Detalle de servicio de hosting (tarjeta "cPanel"):
   account-header, box-cpanl, files-*, disk-use... nunca habian
   recibido tema oscuro en absoluto (cpanel.css, pagina muy visitada). ---------- */
html[data-theme] .account-header {
    background: var(--hz-bg-card-alt) !important;
    border-bottom: 1px solid var(--hz-border) !important;
}
html[data-theme] .back-act a {
    color: var(--hz-text-muted) !important;
    border-right-color: var(--hz-border) !important;
}
html[data-theme] .web-url {
    color: var(--hz-text-primary) !important;
}
html[data-theme] .box-cpanl {
    background: var(--hz-bg-card) !important;
    box-shadow: var(--hz-shadow) !important;
}
html[data-theme] .uno a {
    color: var(--hz-accent) !important;
}
html[data-theme] .host-shar a {
    color: var(--hz-text-muted) !important;
}
html[data-theme] .host-name a {
    color: var(--hz-text-primary) !important;
}
html[data-theme] .visit {
    color: var(--hz-text-primary) !important;
    border: 1px solid var(--hz-border-strong) !important;
}
html[data-theme] .visit:hover {
    background: var(--hz-bg-card-alt) !important;
    color: var(--hz-text-primary) !important;
}
html[data-theme] .visit.ifo,
html[data-theme] .visit.ifo:hover {
    background: var(--hz-accent) !important;
    border-color: var(--hz-accent) !important;
    color: #ffffff !important;
}
html[data-theme] .disk-titel,
html[data-theme] .rpm {
    color: var(--hz-text-primary) !important;
}
html[data-theme] .last-upd {
    color: var(--hz-text-muted) !important;
}
html[data-theme] .files-item a {
    color: var(--hz-text-primary) !important;
}
/* Sub-navegacion del servicio (Resumen/Detalles de facturacion/...) */
html[data-theme] ul.tabs.servicestab li {
    background-color: var(--hz-bg-card-alt) !important;
    color: var(--hz-text-muted) !important;
    border: 1px solid var(--hz-border) !important;
    box-shadow: none !important;
}
html[data-theme] ul.tabs.servicestab li a {
    color: inherit !important;
}
html[data-theme] ul.tabs.servicestab li:hover,
html[data-theme] ul.tabs.servicestab li.active {
    background-color: var(--hz-accent) !important;
    color: #ffffff !important;
}
html[data-theme] ul.tabs.servicestab li:hover:after,
html[data-theme] ul.tabs.servicestab li.active:after {
    border-top-color: var(--hz-accent) !important;
}

/* ---------- Ver ticket: la conversacion tipo chat nunca recibio tema
   oscuro (burbujas blancas, barra de respuesta fija blanca, panel
   lateral con texto gris oscuro invisible). Pagina de muy alto trafico. ---------- */
html[data-theme] .comment-block {
    background: var(--hz-bg-card) !important;
    border: 1px solid var(--hz-border) !important;
    color: var(--hz-text-primary);
}
html[data-theme] .comment-block:after {
    border-color: transparent var(--hz-border) !important;
}
html[data-theme] .replay-me .comment-block {
    background: var(--hz-accent-soft) !important;
    border-color: var(--hz-accent-soft) !important;
}
html[data-theme] .comment-wrap.replay-me .comment-block:before {
    border-color: transparent var(--hz-accent-soft) !important;
}
html[data-theme] .name-client {
    color: var(--hz-text-primary) !important;
}
html[data-theme] .date-time {
    color: var(--hz-text-muted) !important;
}
html[data-theme] .comment-actions li.complain {
    border-right-color: var(--hz-border) !important;
}
html[data-theme] .today-help h4 {
    color: var(--hz-accent) !important;
    background: var(--hz-accent-soft) !important;
}
html[data-theme] .today-help:after {
    background: var(--hz-border) !important;
}
html[data-theme] .reply-row {
    background: var(--hz-bg-card) !important;
    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.25) !important;
    border-top: 1px solid var(--hz-border) !important;
}
html[data-theme] .start-chat textarea {
    background: var(--hz-bg-input) !important;
    color: var(--hz-text-primary) !important;
    border: 1px solid var(--hz-border-strong) !important;
}
html[data-theme] .ticket-side {
    background: var(--hz-bg-card) !important;
    border: 1px solid var(--hz-border) !important;
    border-radius: var(--hz-radius);
    overflow: hidden;
}
html[data-theme] .ticket-side h2 {
    color: var(--hz-text-primary) !important;
    border-bottom-color: var(--hz-border) !important;
}
html[data-theme] .ticket-side li {
    color: var(--hz-text-muted) !important;
    border-bottom-color: var(--hz-border) !important;
}
html[data-theme] .ticket-side li span {
    color: var(--hz-text-primary) !important;
}
html[data-theme] .btn-close a {
    background: var(--hz-bg-card-alt) !important;
    color: var(--hz-text-primary) !important;
}
html[data-theme] .tickt-id {
    color: var(--hz-text-primary) !important;
}

/* La fila .art-row tiene background:#eee fijo en style.css. Como las columnas
   cat-col/art-col no tienen la misma altura, ese fondo se asoma como una caja
   gris vacia debajo de la columna mas corta, en claro y en oscuro. */
html[data-theme] .art-row.row {
    background: transparent !important;
}
/* ---------- Base de conocimiento (Knowledgebase): columnas y tarjetas
   de articulo/categoria nunca recibieron tema oscuro. ---------- */
html[data-theme] .cat-col {
    background: var(--hz-bg-page) !important;
}
html[data-theme] .art-col {
    background: var(--hz-bg-card-alt) !important;
}
html[data-theme] .box-cat {
    background: var(--hz-bg-card) !important;
    box-shadow: var(--hz-shadow) !important;
    border: 1px solid var(--hz-border);
}
html[data-theme] .cate-titel {
    color: var(--hz-text-primary) !important;
}
html[data-theme] #custom-search-input {
    background-color: var(--hz-bg-input) !important;
    border: 1px solid var(--hz-border-strong) !important;
}
html[data-theme] #custom-search-input input {
    color: var(--hz-text-primary) !important;
}
html[data-theme] .flare-list li {
    border-bottom-color: var(--hz-border) !important;
}
html[data-theme] .flare-list p {
    color: var(--hz-text-muted) !important;
}
html[data-theme] .restor-cont p {
    color: var(--hz-text-muted) !important;
}

/* ---------- Anuncios: tarjetas blancas nunca recibieron tema oscuro. ---------- */
html[data-theme] .news-d-row {
    background: var(--hz-bg-card) !important;
    box-shadow: var(--hz-shadow) !important;
}
html[data-theme] .news-artical h4 {
    color: var(--hz-text-primary) !important;
}
html[data-theme] .news-artical p {
    color: var(--hz-text-muted) !important;
}

/* ---------- Editor de texto (nuevo ticket / respuestas): caja blanca
   fija nunca tematizada. ---------- */
html[data-theme] .md-editor {
    border-color: var(--hz-border-strong) !important;
}
html[data-theme] .md-editor > .btn-toolbar {
    background-color: var(--hz-bg-card-alt) !important;
}
html[data-theme] .md-editor > textarea.markdown-editor,
html[data-theme] .md-editor > .md-preview {
    background-color: var(--hz-bg-input) !important;
    color: var(--hz-text-primary) !important;
    border-color: var(--hz-border) !important;
}
html[data-theme] .markdown-editor-status {
    color: var(--hz-text-muted) !important;
}

/* ---------- Alertas (.alert) GENERICAS en todo el sitio: la unica
   cobertura que existia estaba encerrada en "#page-wrapper", y ese id
   solo existe en login/registro. En el resto del area de clientes
   (Contactos, Detalles, tickets, 2FA, verificar email...) los alerts
   de error/exito/aviso quedaban con los colores pastel por defecto de
   Bootstrap: no ilegibles (tienen su propio fondo), pero como un
   parche claro pegado sobre una pagina oscura. Se unifica con los
   mismos tintes que ya se usan en el resto del rediseño. ---------- */
html[data-theme] .alert {
    border-radius: var(--hz-radius-sm) !important;
    border-width: 1px !important;
}
html[data-theme] .alert-success {
    background: var(--hz-green-soft) !important;
    border-color: var(--hz-green) !important;
    color: var(--hz-green) !important;
}
html[data-theme] .alert-info {
    background: var(--hz-blue-soft) !important;
    border-color: var(--hz-blue) !important;
    color: var(--hz-blue) !important;
}
html[data-theme] .alert-warning {
    background: var(--hz-amber-soft) !important;
    border-color: var(--hz-amber) !important;
    color: var(--hz-amber) !important;
}
html[data-theme] .alert-danger {
    background: rgba(229, 72, 77, 0.12) !important;
    border-color: #e5484d !important;
    color: #e5484d !important;
}
html[data-theme] .alert h4,
html[data-theme] .alert p,
html[data-theme] .alert li,
html[data-theme] .alert .alert-link {
    color: inherit !important;
}

/* ---------- 2FA / verificar email / aceptar invitacion: usan un
   formulario "logincontainer/.login-form" viejo y distinto al login
   rediseñado, nunca tematizado (texto casi negro sobre pagina oscura). ---------- */
html[data-theme] .wel-titel {
    color: var(--hz-accent) !important;
}
html[data-theme] .login-form .inputBox input {
    border-bottom-color: var(--hz-border-strong) !important;
    color: var(--hz-text-primary) !important;
}
html[data-theme] .login-form .inputBox .inputText {
    color: var(--hz-text-muted) !important;
}
html[data-theme] .login-form .focus .inputText {
    color: var(--hz-accent) !important;
}
html[data-theme] .login-form .checkbox label {
    color: var(--hz-text-muted) !important;
}
html[data-theme] .login-form span.cr {
    background: var(--hz-bg-input) !important;
    border-color: var(--hz-border-strong) !important;
}
html[data-theme] .need-help {
    color: var(--hz-accent) !important;
}

/* ---------- Elegir dominio (paso del carrito al contratar hosting):
   fondo gris claro fijo, tarjetas blancas y sin centrar cuando son
   menos de 4 (sin .row, cada .col-md-3 flota, dejando un hueco). ---------- */
html[data-theme] .hz-domain-choice {
    background: var(--hz-bg-page) !important;
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}
html[data-theme] .hz-domain-choice .custpm_box {
    float: none !important;
    width: auto !important;
    flex: 0 1 250px;
    padding: 0 !important;
}
html[data-theme] .hz-domain-choice .card-info-box,
html[data-theme] .hz-domain-choice .card-info-box .content {
    background: var(--hz-bg-card) !important;
    border: 1px solid var(--hz-border);
}
html[data-theme] .hz-domain-choice .card-info-box.tran-no {
    background: var(--hz-bg-card-alt) !important;
}
html[data-theme] .hz-domain-choice .text {
    color: var(--hz-text-primary) !important;
}
html[data-theme] .hz-domain-choice .hz-choice-sub {
    color: var(--hz-text-muted);
    font-size: 12px;
    font-weight: 400;
    margin-top: 8px;
    line-height: 1.4;
}
html[data-theme] .hz-domain-choice .card-info-box .icone {
    background: var(--hz-accent) !important;
}
html[data-theme] .hz-domain-choice .card-info-box .content.active,
html[data-theme] .hz-domain-choice .card-info-box .content:hover {
    background: linear-gradient(135deg, var(--hz-accent), var(--hz-accent-dark)) !important;
}
html[data-theme] .hz-domain-choice .card-info-box .content.active .text,
html[data-theme] .hz-domain-choice .card-info-box .content:hover .text,
html[data-theme] .hz-domain-choice .card-info-box .content.active .hz-choice-sub,
html[data-theme] .hz-domain-choice .card-info-box .content:hover .hz-choice-sub {
    color: #ffffff !important;
}
html[data-theme] .hz-domain-choice .card-info-box .content.active .icone,
html[data-theme] .hz-domain-choice .card-info-box .content:hover .icone {
    background: none !important;
    border: 1px solid #ffffff;
}

/* ---------- Configuracion de dominios (cart.php?a=confdomains): las
   tarjetas de complementos (DNS/ID/Email) y la barra de periodo nunca
   se tematizaron -- se veian como parches claros lavados sobre pagina
   oscura, con texto gris disenado para fondo claro. ---------- */
html[data-theme] .period {
    background: var(--hz-bg-card) !important;
}
html[data-theme] .eriod-col {
    color: var(--hz-text-primary) !important;
}
html[data-theme] .sting-col a {
    background: var(--hz-bg-card-alt) !important;
    border: 1px solid var(--hz-border) !important;
    color: var(--hz-accent) !important;
    box-shadow: none !important;
}
html[data-theme] .increased {
    background-image: none !important;
    border: 1px solid var(--hz-border) !important;
}
html[data-theme] .increased.bcr1 {
    background: var(--hz-blue-soft) !important;
    border-color: var(--hz-blue) !important;
}
html[data-theme] .increased.bcr2 {
    background: var(--hz-amber-soft) !important;
    border-color: var(--hz-amber) !important;
}
html[data-theme] .increased.bcr3 {
    background: rgba(229, 72, 77, 0.12) !important;
    border-color: #e5484d !important;
}
html[data-theme] .increased h2 {
    color: var(--hz-text-primary) !important;
}
html[data-theme] .increased p,
html[data-theme] .increased span,
html[data-theme] .increased span strong {
    color: var(--hz-text-muted) !important;
}
html[data-theme] p.yer {
    color: var(--hz-text-muted) !important;
}
html[data-theme] .custom_switch {
    border-color: var(--hz-border) !important;
}
html[data-theme] .custom_switch span {
    background: var(--hz-bg-card-alt) !important;
    color: var(--hz-text-muted) !important;
}
html[data-theme] .signd-titel a {
    color: var(--hz-accent) !important;
}

/* ---------- Ver carrito / checkout (cart.php?a=view): pagina critica
   (donde se paga) nunca recibio tema oscuro. ".items-titel"/".label-text"
   traian "color:#000" fijo -- sobre la pagina oscura eso se veia como
   texto "lavado"/casi invisible, exactamente lo reportado. ---------- */
html[data-theme] .items-titel {
    color: var(--hz-text-primary) !important;
}
html[data-theme] .cart-colam {
    background: var(--hz-bg-card) !important;
    border-color: var(--hz-border) !important;
}
html[data-theme] .cart-colam.server {
    background: var(--hz-blue-soft) !important;
}
html[data-theme] .cart-colam.ssl-item {
    background: var(--hz-bg-card-alt) !important;
}
html[data-theme] .crt-regist h4 {
    color: var(--hz-text-primary) !important;
}
html[data-theme] .crt-regist span,
html[data-theme] span.crt-price,
html[data-theme] span.st {
    color: var(--hz-text-muted) !important;
}
html[data-theme] .crt-drop .select-selected {
    background: var(--hz-bg-input) !important;
    border-color: var(--hz-border-strong) !important;
    color: var(--hz-text-primary) !important;
}
html[data-theme] .year-price {
    color: var(--hz-text-primary) !important;
}
html[data-theme] .off-year {
    color: var(--hz-blue) !important;
}
html[data-theme] .trash a {
    border-color: var(--hz-accent) !important;
    color: var(--hz-accent) !important;
}
html[data-theme] .trash a:hover {
    background: var(--hz-accent) !important;
    color: #ffffff !important;
}
html[data-theme] .label-text,
html[data-theme] .total-clt,
html[data-theme] .promo a {
    color: var(--hz-text-primary) !important;
}
html[data-theme] .shipping .label-text {
    border-bottom-color: var(--hz-border) !important;
}
html[data-theme] .cart-grid-total {
    border-top-color: var(--hz-border) !important;
    border-bottom-color: var(--hz-border) !important;
}
html[data-theme] .pric-clt {
    color: var(--hz-accent) !important;
}
html[data-theme] .order-btn {
    background: transparent !important;
}
html[data-theme] .col-md-7.no-spase {
    border-right-color: var(--hz-border) !important;
}

/* ---------- Checkout (elegir cuenta / metodo de pago) dentro de la
   misma pagina de carrito: tarjetas de cuenta y forma de pago blancas
   fijas, nunca tematizadas. ---------- */
html[data-theme] #order-standard_cart .account-select-container {
    border-right-color: var(--hz-border) !important;
}
html[data-theme] #order-standard_cart .account-select-container div.account {
    background: var(--hz-bg-card-alt) !important;
    border-color: var(--hz-border) !important;
    color: var(--hz-text-primary) !important;
}
html[data-theme] #order-standard_cart .account-select-container div.account.active {
    background: var(--hz-bg-card) !important;
    border-color: var(--hz-accent) !important;
}
html[data-theme] .fild-titel {
    color: var(--hz-text-primary) !important;
}
html[data-theme] .treet-titel {
    color: var(--hz-text-muted) !important;
}
html[data-theme] .Payment-row {
    background: transparent !important;
    border-bottom-color: var(--hz-border) !important;
}
html[data-theme] .payment {
    color: var(--hz-text-primary) !important;
}
html[data-theme] .pay-list li {
    background: var(--hz-bg-card) !important;
    border: 1px solid var(--hz-border) !important;
    box-shadow: none !important;
}
html[data-theme] .checkmark {
    background-color: var(--hz-bg-input) !important;
}
html[data-theme] .pay-row .change-pass .inputBox,
html[data-theme] .card-cont .inputBox {
    background: var(--hz-bg-input) !important;
    color: var(--hz-text-primary) !important;
}
html[data-theme] .card-cont .select-selected {
    background: var(--hz-bg-input) !important;
    border-color: var(--hz-border-strong) !important;
    color: var(--hz-text-primary) !important;
}

/* ---------- Movil: tarjeta promocional del dashboard con texto
   cortado/amontonado (min-height + overflow:hidden fijos, pensados
   para cuando habia una imagen al lado; ahora la foto es solo el
   fondo, y el texto quedaba comprimido). ---------- */
@media (max-width: 767px) {
    html[data-theme] .hz-promo-card {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end;
        min-height: 220px;
        padding: 22px 20px !important;
    }
    .hz-promo-text {
        width: 100%;
    }
    .hz-promo-text p {
        max-width: 100%;
    }
    .hz-promo-text h3 {
        font-size: 19px;
    }
}

/* ---------- Movil: tabla de "Todos los servicios" (y similares) no
   es responsive -- los iconos de accion se amontonan y se superponen
   en vez de quedar en una tabla con scroll horizontal. ---------- */
@media (max-width: 767px) {
    html[data-theme] .hz-table-card .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    html[data-theme] .hz-table-card table {
        min-width: 640px;
    }
    html[data-theme] .hz-table-card .activ-right,
    html[data-theme] .hz-table-card .activ-right ul,
    html[data-theme] .hz-table-card .data-url ul {
        white-space: nowrap;
    }
}

/* ---------- Movil: fila de iconos del header + avatar se salian del
   ancho de pantalla (5 iconos de 34px + el avatar apenas no cabian en
   telefonos de ~360-390px), dejando el avatar cortado en la esquina. ---------- */
@media (max-width: 480px) {
    header.clientx.header .container-fluid { gap: 8px !important; padding: 0 10px !important; }
    header.clientx.header .header-left { padding-right: 8px !important; }
    header.clientx.header .header-left::after { display: none; }
    header.clientx.header .header-left .logo img { max-height: 28px !important; }
    .hz-icon-group { gap: 0px; padding: 3px; }
    header.clientx.header .header-right .navbar-nav .hz-icon-group .hz-theme-toggle,
    header.clientx.header .header-right .navbar-nav .hz-icon-group a.dropdown-toggle {
        width: 30px !important;
        height: 30px !important;
        font-size: 13px !important;
    }
    .hz-account-trigger {
        margin-left: 2px !important;
        padding-left: 8px !important;
    }
    .hz-account-toggle {
        padding: 2px !important;
    }
    .hz-account-avatar {
        width: 30px !important;
        height: 30px !important;
    }
    html[data-theme] .hz-mobile-menu-btn {
        width: 30px !important;
        height: 30px !important;
    }
    header.clientx.header .header-right {
        margin-left: 0 !important;
    }
}

/* ---------- Movil: titulo de bienvenida del dashboard, sin ajuste de
   tamano para pantallas angostas. ---------- */
@media (max-width: 480px) {
    html[data-theme] .hz-welcome-heading h1 {
        font-size: 20px !important;
        line-height: 1.3;
    }
}

/* ---------- Movil: achicar el buscador y ocultar el atajo "Ctrl+K"
   (no aplica en pantalla tactil). ---------- */
@media (max-width: 767px) {
    header.clientx.header .hz-header-search {
        padding: 6px 12px !important;
    }
    header.clientx.header .hz-header-search input {
        font-size: 12.5px !important;
    }
    header.clientx.header .hz-header-search kbd {
        display: none !important;
    }
}

/* ---------- Ajustes de seguridad (2FA / preguntas de seguridad):
   encabezados en gris oscuro fijo (invisibles sobre fondo oscuro) y
   una caja informativa celeste clara sin tematizar. ---------- */
html[data-theme] .security-que h5 {
    color: var(--hz-text-primary) !important;
}
html[data-theme] .part-applict {
    background: var(--hz-bg-card-alt) !important;
    color: var(--hz-text-muted) !important;
}
html[data-theme] .disable {
    color: var(--hz-text-muted) !important;
}
html[data-theme] .security-que .btn-toggle {
    background: var(--hz-bg-card-alt) !important;
    color: var(--hz-text-muted) !important;
}
html[data-theme] .security-que .btn-toggle.active {
    background: var(--hz-accent) !important;
}
html[data-theme] .security-que .btn-toggle > .handle {
    background: #ffffff !important;
}

/* ---------- Cobertura generica de modales (confirmar eliminar, etc.) ---------- */
html[data-theme] .modal-content {
    background: var(--hz-bg-card) !important;
    color: var(--hz-text-primary) !important;
    border: 1px solid var(--hz-border) !important;
}
html[data-theme] .modal-header,
html[data-theme] .modal-footer {
    border-color: var(--hz-border) !important;
}
html[data-theme] .modal-title {
    color: var(--hz-text-primary) !important;
}

/* ---------- Tooltips: wgs_navbar.tpl trae ".tooltip.right{width:110px}"
   sin ningun scope (pensado solo para los iconos cortos del sidebar) y
   aprieta CUALQUIER tooltip del sitio a 110px, partiendo textos largos
   (ej. "Ayuda" en Transferir dominio) en una columna angosta que se
   monta sobre el resto de la pagina. ---------- */
.tooltip.right,
.tooltip.left {
    width: auto !important;
}
.tooltip-inner {
    max-width: 260px !important;
    text-align: left !important;
    padding: 8px 12px !important;
    line-height: 1.4 !important;
}

/* ============================================================
   HZ BOOTSTRAP GENERICO — .panel/.form-control/.table nunca
   recibieron tema oscuro (solo tipografia). Cobertura amplia
   para cualquier pagina que use estos componentes estandar.
   ============================================================ */
html[data-theme] .panel {
    background: var(--hz-bg-card) !important;
    border: 1px solid var(--hz-border) !important;
    border-radius: var(--hz-radius) !important;
    box-shadow: var(--hz-shadow) !important;
}
html[data-theme] .panel-default > .panel-heading {
    background: var(--hz-bg-card-alt) !important;
    color: var(--hz-text-primary) !important;
    border-bottom: 1px solid var(--hz-border) !important;
    border-radius: var(--hz-radius) var(--hz-radius) 0 0 !important;
}
html[data-theme] .panel-title {
    color: var(--hz-text-primary) !important;
}
html[data-theme] .panel-body {
    background: transparent !important;
    color: var(--hz-text-primary) !important;
}
html[data-theme] .form-control {
    background: var(--hz-bg-input) !important;
    color: var(--hz-text-primary) !important;
    border: 1px solid var(--hz-border-strong) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}
html[data-theme] .form-control:focus {
    border-color: var(--hz-accent) !important;
    box-shadow: 0 0 0 3px var(--hz-accent-soft) !important;
}
html[data-theme] .control-label {
    color: var(--hz-text-primary) !important;
}
html[data-theme] table.table {
    color: var(--hz-text-primary) !important;
    background: var(--hz-bg-card) !important;
}
html[data-theme] table.table thead th {
    background: var(--hz-bg-card-alt) !important;
    color: var(--hz-text-primary) !important;
    border-color: var(--hz-border) !important;
}
html[data-theme] table.table td,
html[data-theme] table.table th {
    border-color: var(--hz-border) !important;
    color: var(--hz-text-primary) !important;
}
html[data-theme] .masspay-total td {
    color: var(--hz-text-primary) !important;
    font-weight: 600;
}
html[data-theme] .masspay-total:last-child td {
    color: var(--hz-accent) !important;
    font-weight: 800 !important;
    font-size: 15px;
}

html[data-theme] table.table tbody td,
html[data-theme] table.table tbody th {
    background: var(--hz-bg-card) !important;
}

/* ---------- Panel lateral nativo (facturas vencidas, etc.):
   permitir scroll y alinear/mejorar los botones del cuerpo del panel ---------- */
.defaultClientxSidebar {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
html[data-theme] .panel-sidebar .panel-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
html[data-theme] .panel-sidebar .panel-body a.btn,
html[data-theme] .panel-sidebar .panel-body a[class*="btn"] {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100% !important;
    height: 44px;
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    color: #ffffff !important;
    text-align: center;
    box-shadow: 0 3px 10px rgba(0,0,0,0.18);
}
html[data-theme] .panel-sidebar .panel-body a.btn i,
html[data-theme] .panel-sidebar .panel-body a[class*="btn"] i {
    color: #ffffff !important;
    font-size: 13px !important;
}

/* ---------- Barra de scroll delgada y discreta para el panel lateral ---------- */
.defaultClientxSidebar::-webkit-scrollbar {
    width: 6px;
}
.defaultClientxSidebar::-webkit-scrollbar-track {
    background: transparent;
}
.defaultClientxSidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 999px;
}
.defaultClientxSidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}
.defaultClientxSidebar {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

/* ---------- Boton "Anadir fondos" del panel de facturas: texto y
   fondo garantizados legibles, ocultar icono roto si lo hay ---------- */
html[data-theme] .panel-sidebar .panel-body a.btn img,
html[data-theme] .panel-sidebar .panel-body a[class*="btn"] img {
    display: none !important;
}
html[data-theme] .panel-sidebar .panel-body a.btn-info,
html[data-theme] .panel-sidebar .panel-body a[class*="addfund"],
html[data-theme] .panel-sidebar .panel-body a[href*="addfunds"] {
    background: linear-gradient(135deg, var(--hz-accent), var(--hz-accent-dark)) !important;
}
html[data-theme] .panel-sidebar .panel-body a.btn-info *,
html[data-theme] .panel-sidebar .panel-body a[class*="addfund"] *,
html[data-theme] .panel-sidebar .panel-body a[href*="addfunds"] * {
    color: #ffffff !important;
    font-weight: 700 !important;
    opacity: 1 !important;
}

/* ---------- Segundo boton del panel (Anadir fondos) por POSICION,
   no por clase, ya que el nombre real de su clase no coincidia. ---------- */
html[data-theme] .panel-sidebar .panel-body a.btn:nth-of-type(2),
html[data-theme] .panel-sidebar .panel-body a[class*="btn"]:nth-of-type(2),
html[data-theme] .panel-sidebar .panel-body a:last-of-type {
    background: linear-gradient(135deg, var(--hz-accent), var(--hz-accent-dark)) !important;
    opacity: 1 !important;
}
html[data-theme] .panel-sidebar .panel-body a.btn:nth-of-type(2) *,
html[data-theme] .panel-sidebar .panel-body a[class*="btn"]:nth-of-type(2) *,
html[data-theme] .panel-sidebar .panel-body a:last-of-type * {
    color: #ffffff !important;
    opacity: 1 !important;
    font-weight: 700 !important;
}

/* ---------- Boton real "Anadir fondos" (encontrado por inspeccion:
   .btn-default con fondo al 12% de opacidad, y .fund-btn con texto
   igual al fondo -- ambos casi invisibles). ---------- */
html[data-theme] a.fund-btn,
html[data-theme] .panel-sidebar .panel-body a.btn.btn-default {
    background: linear-gradient(135deg, var(--hz-accent), var(--hz-accent-dark)) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.18) !important;
}
html[data-theme] a.fund-btn *,
html[data-theme] .panel-sidebar .panel-body a.btn.btn-default * {
    color: #ffffff !important;
    opacity: 1 !important;
}
html[data-theme] a.fund-btn:hover,
html[data-theme] .panel-sidebar .panel-body a.btn.btn-default:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

/* ---------- Boton de busqueda (lupa) junto a inputs: mas glossy ---------- */
html[data-theme] .input-group-addon {
    border-radius: 0 10px 10px 0 !important;
    background: linear-gradient(135deg, var(--hz-accent), var(--hz-accent-dark)) !important;
    color: #ffffff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
    transition: filter 0.15s ease;
}
html[data-theme] .input-group-addon:hover {
    filter: brightness(1.08);
}

/* ============================================================
   HZ CATEGORIAS TLD — pastillas de filtro y tabla de precios
   por categoria (cart.php?a=add&domain=register), nunca
   recibieron tema oscuro ni diseno premium.
   ============================================================ */
html[data-theme] .tld-filters a {
    border-radius: 999px !important;
    padding: 8px 16px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 4px 8px 0 !important;
    transition: transform 0.15s ease, filter 0.15s ease;
}
html[data-theme] .tld-filters a.badge-secondary {
    background: var(--hz-bg-card-alt) !important;
    color: var(--hz-text-muted) !important;
    border: 1px solid var(--hz-border) !important;
}
html[data-theme] .tld-filters a.badge-secondary:hover {
    background: var(--hz-accent-soft) !important;
    color: var(--hz-accent) !important;
}
html[data-theme] .tld-filters a.badge-success {
    background: linear-gradient(135deg, var(--hz-accent), var(--hz-accent-dark)) !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}
html[data-theme] .tld-filters a:hover {
    transform: translateY(-1px);
}

html[data-theme] .domain-pricing,
html[data-theme] .domain-pricing .tld-inr {
    background: var(--hz-bg-card) !important;
}
html[data-theme] .domain-pricing .tld-row {
    background: var(--hz-bg-card) !important;
    border-bottom: 1px solid var(--hz-border) !important;
    color: var(--hz-text-primary) !important;
}
html[data-theme] .domain-pricing .tld-row.highlighted {
    background: var(--hz-accent-soft) !important;
}
html[data-theme] .domain-pricing .tld-row * {
    color: var(--hz-text-primary) !important;
}
html[data-theme] .domain-pricing .tld-row small {
    color: var(--hz-text-muted) !important;
}
html[data-theme] .domain-pricing .tld-pricing-header .col-xs-2,
html[data-theme] .domain-pricing .tld-pricing-header .col-sm-2,
html[data-theme] .domain-pricing .tld-pricing-header .col-xs-4,
html[data-theme] .domain-pricing .tld-pricing-header .col-sm-4 {
    background: var(--hz-bg-card-alt) !important;
    color: var(--hz-text-primary) !important;
    border-bottom: 3px solid var(--hz-accent) !important;
}
html[data-theme] .domain-pricing .tld-pricing-header div:nth-child(odd) {
    background: var(--hz-bg-card-alt) !important;
    border-color: var(--hz-border) !important;
}
html[data-theme] .domain-pricing .two-row-center {
    border-right: 1px solid var(--hz-border) !important;
}

/* ---------- Correccion de alcance: el boton esta en .panel-footer,
   no en .panel-body como se asumio antes. Ahora cubre cualquier
   ubicacion dentro de .panel-sidebar. ---------- */
html[data-theme] .panel-sidebar a.btn.btn-default,
html[data-theme] .panel-sidebar .panel-footer a.btn {
    background: linear-gradient(135deg, var(--hz-accent), var(--hz-accent-dark)) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.18) !important;
    border-radius: 10px !important;
}
html[data-theme] .panel-sidebar a.btn.btn-default *,
html[data-theme] .panel-sidebar .panel-footer a.btn * {
    color: #ffffff !important;
    opacity: 1 !important;
}
html[data-theme] .panel-sidebar .panel-footer {
    background: transparent !important;
    border-top: 1px solid var(--hz-border) !important;
    padding: 12px !important;
}
html[data-theme] .panel-sidebar .panel-danger > .panel-heading {
    background: rgba(239,68,68,0.14) !important;
    color: #ef4444 !important;
    border-color: rgba(239,68,68,0.3) !important;
}

/* ---------- Checkout (cart.php?a=view/confproduct/confdomains):
   en estas paginas cart_style.css carga DESPUES de este archivo, asi
   que sus reglas (pensadas solo para el tema claro original) le ganan
   la cascada a cualquier cosa de aqui sin !important. Todo lo de abajo
   lo lleva a proposito para forzar el resultado real. ---------- */
html[data-theme] .accout-left {
    background: var(--hz-bg-card) !important;
    border-radius: var(--hz-radius);
    box-shadow: var(--hz-shadow);
}
html[data-theme] .Pers-titel {
    color: var(--hz-text-primary) !important;
}
html[data-theme] .change-pass.account p.small.text-muted,
html[data-theme] .marketing-email-optin p {
    color: var(--hz-text-muted) !important;
}
html[data-theme] .accout-left .inputBox .inputText {
    color: var(--hz-text-muted) !important;
}
html[data-theme] .accout-left .focus .inputText {
    color: var(--hz-accent) !important;
}
html[data-theme] .accout-left .inputBox .input,
html[data-theme] .accout-left textarea.input {
    color: var(--hz-text-primary) !important;
    border-bottom: 1px solid var(--hz-border-strong) !important;
    background: transparent !important;
}
html[data-theme] .marketing-email-optin {
    background: var(--hz-bg-card-alt) !important;
    border: 1px solid var(--hz-border) !important;
    border-radius: var(--hz-radius-sm);
    padding: 16px !important;
}
html[data-theme] .marketing-email-optin h4 {
    color: var(--hz-text-primary) !important;
}
html[data-theme] .checkbox-inline {
    color: var(--hz-text-primary) !important;
}
html[data-theme] .checkbox-inline a {
    color: var(--hz-accent) !important;
}

/* ---------- Configuracion del producto (confproduct): caja blanca del
   ciclo de facturacion, y se queda vacia (solo el titulo) cuando el
   producto tiene un unico ciclo de precio -- se oculta en ese caso. ---------- */
html[data-theme] .term-box {
    background: var(--hz-bg-card) !important;
    border-radius: var(--hz-radius);
}
html[data-theme] .select-lanth h3 {
    color: var(--hz-text-primary) !important;
}
.select-lanth:has(ul.selectBillingCycle):not(:has(ul.selectBillingCycle li)) {
    display: none;
}
html[data-theme] .domen-page select.form-control {
    background: var(--hz-bg-input) !important;
    color: var(--hz-text-primary) !important;
    border: 1px solid var(--hz-border-strong) !important;
}

/* ---------- Configuracion de dominio (confdomains): igual patron de
   cart_style.css con fondos claros fijos que nunca se tematizaron. ---------- */
html[data-theme] .period {
    background: var(--hz-bg-card-alt) !important;
}
html[data-theme] .eriod-col,
html[data-theme] .sting-col {
    color: var(--hz-text-primary) !important;
}
html[data-theme] .increased {
    background-image: none !important;
    background: var(--hz-bg-card) !important;
    border-color: var(--hz-border) !important;
}
html[data-theme] .bcr1,
html[data-theme] .bcr2,
html[data-theme] .bcr3 {
    background: var(--hz-bg-card) !important;
    border-color: var(--hz-border) !important;
}
html[data-theme] .increased h2 {
    color: var(--hz-text-primary) !important;
}
html[data-theme] .increased p,
html[data-theme] .increased span {
    color: var(--hz-text-muted) !important;
}
html[data-theme] .domains-head.configur h1,
html[data-theme] .nameserv-head h1 {
    color: var(--hz-text-primary) !important;
}
html[data-theme] .domains-head.configur p,
html[data-theme] .nameserv-head p {
    color: var(--hz-text-muted) !important;
}
html[data-theme] .signd-titel a {
    color: var(--hz-accent) !important;
}

/* ---------- Sidebar movil: overflow:visible + height fijo (heredado de
   style.css) hacia que el contenido que no cabe se derramara ENCIMA del
   contenido de la pagina de atras en vez de scrollear dentro de si mismo.
   Con el menu completo (Menu Principal + Herramientas + caja de ayuda)
   la lista es mas alta que el alto de pantalla en moviles chicos. ---------- */
@media (max-width: 767px) {
    html[data-theme] #sidebar {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 24px;
    }
}

/* ---------- Sidebar movil: el hueco enorme entre 'Menu Principal' y
   'Herramientas' era .wgssidefontcoloraddon{height:700px} fijo (con
   scrollbar propio pero oculto) aplicado a AMBAS listas <ul> sin
   importar cuantos items tengan de verdad. En movil cada lista debe
   medir lo que su contenido real ocupa; el scroll ya lo maneja el
   propio #sidebar (ver regla de overflow-y mas arriba). ---------- */
@media (max-width: 767px) {
    html[data-theme] #sidebar .wgssidefontcoloraddon {
        height: auto !important;
        overflow-y: visible !important;
    }
}