/* =====================================================================
   Mexcompany · área de clientes (tema hijo de Twenty-One)
   Mismos colores, tipografías y componentes que el tema de mexcompany.com.
   Este archivo se carga después de theme.min.css, por eso basta con sobreescribir.
   ===================================================================== */

/* 1. Tipografías (los mismos archivos que usa el sitio principal; mismo origen, misma caché) */
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 500 800;
    font-display: swap;
    src: url("/wp-content/themes/mexcompany/assets/fonts/plus-jakarta-var.woff2") format("woff2");
}
@font-face {
    font-family: "Public Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/wp-content/themes/mexcompany/assets/fonts/public-sans-var.woff2") format("woff2");
}

/* 2. Tokens (idénticos a theme.json del tema de WordPress) + variables del carrito Nexus por si se activa */
:root {
    --mx-base: #ffffff;
    --mx-base-2: #f4f6fa;
    --mx-line: #e3e8ef;
    --mx-line-soft: #eef1f5;
    --mx-contrast: #12263f;
    --mx-contrast-2: #0b1a2e;
    --mx-navy-soft: #e8eef7;
    --mx-body: #2b3648;
    --mx-muted: #5f6b7a;
    --mx-accent: #c2560b;
    --mx-accent-decor: #e8760e;
    --mx-accent-soft: #fff1e6;
    --mx-ink: #070f1f;
    --mx-ink-2: #0b1a2e;
    --mx-cyan: #4cc9f0;
    --mx-grad-naranja: linear-gradient(135deg, #ff8a2a 0%, #e8760e 100%);
    --mx-grad-marino: linear-gradient(135deg, #12263f 0%, #1d3a5f 100%);
    --mx-radio: 14px;
    --mx-radio-chico: 10px;
    --mx-sombra: 0 1px 2px rgba(18, 38, 63, 0.05), 0 10px 30px -12px rgba(18, 38, 63, 0.14);
    --mx-display: "Plus Jakarta Sans", "Public Sans", system-ui, sans-serif;
    --mx-texto: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Nexus Cart (solo aplica si el formulario de pedido se cambia a nexus_cart) */
    --white: #fff;
    --neutral-50: #f9fafc; --neutral-100: #f4f6fa; --neutral-200: #e3e8ef; --neutral-300: #d0d7e2;
    --neutral-400: #9aa5b5; --neutral-500: #5f6b7a; --neutral-600: #4a5565; --neutral-700: #2b3648;
    --neutral-800: #12263f; --neutral-900: #0b1a2e; --neutral-950: #06101d;
    --primary: #12263f; --primary-lifted: #0b1a2e; --primary-accented: #06101d;
    --secondary: #5f6b7a; --secondary-lifted: #4a5565; --secondary-accented: #2b3648;
    --success: #1f8f4e; --success-lifted: #197a42; --success-accented: #146336;
    --info: #1d5fd6; --info-lifted: #174db0; --info-accented: #123d8c;
    --notice: #6d3ae0; --notice-lifted: #5b2fc2; --notice-accented: #4a259e;
    --warning: #e8760e; --warning-lifted: #c2560b; --warning-accented: #9a4409;
    --error: #d92d20; --error-lifted: #b4251a; --error-accented: #8f1d15;
    --grayscale: #0b1a2e; --grayscale-lifted: #12263f; --grayscale-accented: #2b3648;
    --neutral: #5f6b7a; --neutral-lifted: #4a5565; --neutral-accented: #2b3648;
    --text-inverted: #fff; --text-muted: #9aa5b5; --text-lifted: #5f6b7a; --text-accented: #4a5565; --text: #12263f;
    --border-muted: #eef1f5; --border: #e3e8ef; --border-lifted: #d0d7e2; --border-accented: #9aa5b5;
    --bg: #fff; --bg-muted: #f9fafc; --bg-lifted: #f4f6fa; --bg-accented: #e3e8ef; --bg-inverted: #0b1a2e;
    --rounding-sm: 8px; --rounding-md: 10px; --rounding-lg: 14px;
    --letter-spacing: 0em;
}

/* 3. Base */
html { font-size: 15px; }
body,
body.primary-bg-color {
    min-width: 0 !important;
    font-family: var(--mx-texto);
    color: var(--mx-body);
    background-color: var(--mx-base-2);
    -webkit-font-smoothing: antialiased;
}
.primary-bg-color { background-color: var(--mx-base-2); }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .card-title, .modal-title, .panel-title {
    font-family: var(--mx-display);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--mx-contrast);
}
a { color: var(--mx-accent); }
a:hover { color: var(--mx-contrast); }
a:not(.btn) { text-decoration: none; }
a:not(.btn):hover { text-decoration: underline; }
section#main-body { padding: 1.75rem 0 3.5rem; }
.primary-content .card-title { font-size: 1.35rem; }

/* 4. Encabezado: barra superior idéntica al sitio */
header.header.mx-encabezado { background: transparent; border: 0; }
.mx-barra {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(7, 15, 31, 0.94);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
}
.mx-barra__inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    min-height: 66px;
}
.mx-marca { display: inline-flex; align-items: center; flex: 0 0 auto; }
.mx-marca img { display: block; width: 164px; height: auto; max-height: none; filter: invert(1) hue-rotate(180deg) brightness(1.15) contrast(0.92); }
header.header .logo-img { max-width: none; max-height: none; }

.mx-nav { flex: 1 1 auto; }
.mx-nav__lista { display: flex; align-items: center; gap: 0.15rem; margin: 0; padding: 0; list-style: none; }
.mx-nav__item { position: relative; }
.mx-nav__item > a {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    font-family: var(--mx-texto);
    font-size: 0.95rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.86);
    text-decoration: none !important;
    white-space: nowrap;
}
.mx-nav__item > a:hover, .mx-nav__item:focus-within > a { background: rgba(255, 255, 255, 0.09); color: #fff; }
.mx-nav__item--sub > a::after {
    content: "";
    width: 0.45em; height: 0.45em;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    opacity: 0.6;
}
.mx-nav__sub {
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    min-width: 17rem;
    margin: 0;
    padding: 0.5rem;
    list-style: none;
    background: #0f1f36;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--mx-radio);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.mx-nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.mx-nav__item:hover > .mx-nav__sub, .mx-nav__item:focus-within > .mx-nav__sub { opacity: 1; visibility: visible; transform: translateY(0); }
.mx-nav__sub a {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.88);
    text-decoration: none !important;
}
.mx-nav__sub a:hover { background: rgba(255, 255, 255, 0.08); color: #ffb26b; }

.mx-acciones { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; flex: 0 0 auto; }
.mx-carrito {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border-radius: 10px;
    color: #fff;
    text-decoration: none !important;
}
.mx-carrito:hover { background: rgba(255, 255, 255, 0.09); color: #fff; }
.mx-carrito .badge {
    position: absolute; top: 2px; right: 2px;
    min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 9px;
    font-size: 10px; line-height: 17px; font-weight: 700;
    background: var(--mx-accent-decor); color: #fff;
}
.mx-carrito .badge:empty { display: none; }
.mx-cuenta {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    font-size: 0.95rem; font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.14);
    text-decoration: none !important;
}
.mx-cuenta:hover { background: rgba(255, 255, 255, 0.09); color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.mx-cuenta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mx-boton-naranja,
.mx-boton-naranja:hover,
.mx-boton-naranja:focus {
    display: inline-flex; align-items: center;
    padding: 0.62rem 1.1rem;
    border-radius: 10px;
    background: var(--mx-grad-naranja);
    color: #1a0f04;
    font-family: var(--mx-texto);
    font-size: 0.95rem; font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
    box-shadow: 0 6px 16px -8px rgba(232, 118, 14, 0.7);
    transition: background 0.15s ease, transform 0.15s ease;
}
.mx-boton-naranja:hover { background: #f5872a; transform: translateY(-1px); }
.mx-hamburguesa {
    display: none;
    flex-direction: column; justify-content: center; gap: 4px;
    width: 42px; height: 42px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
}
.mx-hamburguesa span { display: block; height: 2px; border-radius: 2px; background: #fff; }

/* Barra de cliente con sesión (Twenty-One la llama topbar) */
header.header .topbar { background: var(--mx-contrast-2); color: rgba(255, 255, 255, 0.75); font-size: 0.85rem; }
header.header .topbar .btn, header.header .topbar .active-client .btn { color: rgba(255, 255, 255, 0.8); font-size: 0.85rem; }
header.header .topbar .active-client .input-group-text { color: rgba(255, 255, 255, 0.6); }

/* 5. Segunda barra: navegación de WHMCS (tienda, dominios, facturación, soporte, cuenta) */
header.header .main-navbar-wrapper.mx-subnav {
    padding: 0;
    background: var(--mx-base);
    border-bottom: 1px solid var(--mx-line);
}
header.header .mx-subnav .navbar-collapse { padding: 0.55rem 0; align-items: center; }
/* Ojo: scripts.min.js (autoCollapse) mete elementos en "Más" en cuanto #nav mide 30px o más de alto; por eso los enlaces son bajos (~27px). */
header.header .mx-subnav .navbar-nav > li > a,
header.header .mx-subnav .navbar-nav a.dropdown-toggle {
    display: inline-flex; align-items: center;
    padding: 0.2rem 0.75rem !important;
    border-radius: 8px;
    font-family: var(--mx-texto);
    font-size: 0.9rem; font-weight: 500; line-height: 1.4;
    color: var(--mx-muted);
    text-decoration: none !important;
    white-space: nowrap;
}
header.header .mx-subnav .navbar-nav > li > a:hover,
header.header .mx-subnav .navbar-nav > li.show > a { color: var(--mx-contrast); background: var(--mx-line-soft); }
header.header .mx-subnav .navbar-nav > li.active > a { color: var(--mx-contrast); background: var(--mx-navy-soft); }
header.header .mx-subnav .navbar-nav > li > a i { margin-right: 0.35rem; color: var(--mx-accent-decor); }
header.header .mx-subnav .dropdown-menu {
    margin-top: 0;
    padding: 0.5rem;
    border: 1px solid var(--mx-line);
    border-radius: var(--mx-radio);
    box-shadow: 0 18px 40px -18px rgba(18, 38, 63, 0.35);
}
header.header .mx-subnav .dropdown-menu .dropdown-item { border-radius: 8px; padding: 0 !important; }
header.header .mx-subnav .dropdown-menu .dropdown-item a { display: block; padding: 0.5rem 0.75rem !important; font-size: 0.9rem; color: var(--mx-body); text-decoration: none; }
header.header .mx-subnav .dropdown-menu .dropdown-item:hover, header.header .mx-subnav .dropdown-menu .dropdown-item:focus { background: var(--mx-line-soft); }
header.header .mx-subnav .dropdown-menu .dropdown-item.active, header.header .mx-subnav .dropdown-menu .dropdown-item:active { background: var(--mx-navy-soft); }
header.header .mx-subnav .dropdown-menu .dropdown-item a i { color: var(--mx-accent-decor); }
header.header .mx-subnav .navbar-nav .badge { background: var(--mx-accent-soft); color: var(--mx-accent); font-weight: 600; }
.mx-busqueda { margin: 0.45rem 0 0.45rem 0.75rem; }
.mx-busqueda .input-group { width: 200px; }
.mx-busqueda .form-control { height: 36px; border-radius: 10px 0 0 10px !important; border-right: 0; font-size: 0.85rem; }
.mx-busqueda .btn { height: 36px; padding: 0 0.7rem; border-radius: 0 10px 10px 0 !important; border-color: var(--mx-line); color: var(--mx-muted); background: var(--mx-base); }
.mx-nav-movil { display: none; }

/* 6. Migas */
.master-breadcrumb { background: transparent; }
.master-breadcrumb .breadcrumb { padding: 0.9rem 0 0; background: transparent; font-size: 0.82rem; color: var(--mx-muted); }
.master-breadcrumb .breadcrumb a { color: var(--mx-muted); }
.master-breadcrumb .breadcrumb-item.active { color: var(--mx-contrast); }
.master-breadcrumb .breadcrumb-item + .breadcrumb-item::before { content: "›"; color: #b6c0cc; }

/* 7. Tarjetas, listas, tablas, alertas */
.card, .mc-promo-login, .mc-promo-manage, .list-group, .modal-content, .alert, .table-container, .tiles .tile, .home-domain-search .input-group-wrapper, .dropdown-menu, .popover {
    border-radius: var(--mx-radio);
}
.card, .mc-promo-login, .mc-promo-manage { border: 1px solid var(--mx-line); box-shadow: var(--mx-sombra); }
.card-header { background: var(--mx-base); border-bottom: 1px solid var(--mx-line-soft); font-family: var(--mx-display); font-weight: 700; color: var(--mx-contrast); border-radius: var(--mx-radio) var(--mx-radio) 0 0 !important; }
.card-footer { background: var(--mx-base-2); border-top: 1px solid var(--mx-line-soft); border-radius: 0 0 var(--mx-radio) var(--mx-radio) !important; }
.card-header:first-child { border-radius: calc(var(--mx-radio) - 1px) calc(var(--mx-radio) - 1px) 0 0; }
.client-home-cards .card-header { background: var(--mx-base); }
.list-group-item { border-color: var(--mx-line-soft); }
.list-group-item.active, .sidebar .list-group-item.active, .sidebar .list-group-item.active:focus, .sidebar .list-group-item.active:hover { background: var(--mx-contrast); border-color: var(--mx-contrast); color: #fff; }
.sidebar .list-group-item > i.far.fa-circle, .sidebar .list-group-item .badge { color: var(--mx-muted); }
.table { color: var(--mx-body); }
.table thead th, .dataTables_wrapper .table thead th { border-top: 0; border-bottom: 1px solid var(--mx-line); font-family: var(--mx-texto); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mx-muted); }
.table td, .table th { border-top-color: var(--mx-line-soft); vertical-align: middle; }
.table-hover tbody tr:hover { background: var(--mx-base-2); }
.alert { border: 1px solid transparent; }
.alert-info { background: var(--mx-navy-soft); border-color: #d5deec; color: var(--mx-contrast); }
.alert-warning { background: var(--mx-accent-soft); border-color: #f8d8bd; color: #7a3a09; }
.alert-success { background: #e9f7ee; border-color: #cdebd8; color: #14532d; }
.alert-danger { background: #fdecec; border-color: #f7cfcf; color: #8a1c1c; }
.badge { border-radius: 999px; font-weight: 600; padding: 0.3em 0.6em; }
.badge-info, .label-info { background: var(--mx-navy-soft); color: var(--mx-contrast); }
.badge-primary { background: var(--mx-contrast); }
.tiles .tile { background: var(--mx-base); border: 1px solid var(--mx-line); }
.tiles .tile .title { color: var(--mx-muted); }
.tiles .tile .stat { font-family: var(--mx-display); color: var(--mx-contrast); }

/* 8. Botones y formularios */
.btn { border-radius: var(--mx-radio-chico); font-family: var(--mx-texto); font-weight: 600; padding: 0.55rem 1.1rem; }
.btn-sm, .btn-group-sm > .btn { padding: 0.3rem 0.7rem; font-size: 0.82rem; border-radius: 8px; }
.btn-xs, .btn-group-xs > .btn { border-radius: 6px; font-weight: 500; }
.btn-lg, .btn-group-lg > .btn { border-radius: 12px; }
.btn-primary, .btn-primary:disabled, .btn-primary.disabled { background: var(--mx-contrast); border-color: var(--mx-contrast); color: #fff; }
.btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle { background: var(--mx-contrast-2); border-color: var(--mx-contrast-2); color: #fff; }
.btn-primary.focus, .btn-primary:focus, .btn.focus, .btn:focus { box-shadow: 0 0 0 0.2rem rgba(18, 38, 63, 0.2); }
.btn-outline-primary { color: var(--mx-contrast); border-color: var(--mx-contrast); }
.btn-outline-primary:hover, .btn-outline-primary:not(:disabled):not(.disabled):active { background: var(--mx-contrast); border-color: var(--mx-contrast); }
.btn-default { color: var(--mx-contrast); background: var(--mx-base); border-color: var(--mx-line); }
.btn-default:hover, .btn-default:focus, .btn-default.focus, .btn-default:active, .btn-default.active { color: var(--mx-contrast); background: var(--mx-line-soft); border-color: #cfd7e2; }
.btn-success, .btn-success:disabled { background: #1f8f4e; border-color: #1f8f4e; }
.btn-success:hover, .btn-success:focus, .btn-success:not(:disabled):not(.disabled):active { background: #197a42; border-color: #197a42; }
.btn-link, .btn-link:hover { color: var(--mx-accent); }
.btn-checkout, #checkout, .btn-checkout:hover, #checkout:hover { background: var(--mx-grad-naranja); border-color: transparent; color: #1a0f04; }
.btn-checkout:hover, #checkout:hover { background: #f5872a; border-color: #f5872a; }
.form-control, .custom-select, .selectize-input, .bootstrap-select .btn { border-radius: var(--mx-radio-chico); border-color: var(--mx-line); color: var(--mx-body); }
.form-control:focus, .custom-select:focus { border-color: var(--mx-contrast); box-shadow: 0 0 0 0.2rem rgba(18, 38, 63, 0.12); }
.form-control::placeholder { color: #9aa5b5; }
.input-group > .form-control:not(:last-child), .input-group > .custom-select:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .input-group-append > .btn, .input-group > .input-group-append > .input-group-text { border-top-right-radius: var(--mx-radio-chico); border-bottom-right-radius: var(--mx-radio-chico); }
.input-group > .input-group-prepend > .btn, .input-group > .input-group-prepend > .input-group-text { border-top-left-radius: var(--mx-radio-chico); border-bottom-left-radius: var(--mx-radio-chico); }
.input-group-text { background: var(--mx-base-2); border-color: var(--mx-line); color: var(--mx-muted); }
label, .control-label, .col-form-label { font-weight: 600; color: var(--mx-contrast); font-size: 0.9rem; }
.custom-control-input:checked ~ .custom-control-label::before, .icheck-primary > input:checked + label::before { background-color: var(--mx-contrast); border-color: var(--mx-contrast); }
.custom-switch .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--mx-contrast); border-color: var(--mx-contrast); }
.nav-tabs { border-bottom-color: var(--mx-line); }
.nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; color: var(--mx-muted); font-weight: 500; }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--mx-contrast); background: transparent; border-bottom-color: var(--mx-accent-decor); }
.page-item.active .page-link { background: var(--mx-contrast); border-color: var(--mx-contrast); }
.page-link { color: var(--mx-contrast); border-color: var(--mx-line); }
.page-item:first-child .page-link { border-radius: 8px 0 0 8px; }
.page-item:last-child .page-link { border-radius: 0 8px 8px 0; }
.text-primary { color: var(--mx-contrast) !important; }
.bg-primary { background-color: var(--mx-contrast) !important; }
.border-primary { border-color: var(--mx-contrast) !important; }
.progress-bar { background-color: var(--mx-contrast); }
.dropdown-item.active, .dropdown-item:active { background: var(--mx-navy-soft); color: var(--mx-contrast); }

/* 9. Portada del área de clientes: buscador de dominios */
.mx-dominio-portada { margin: 1rem 0 0; }
.home-domain-search { background: transparent; }
.mx-dominio-portada__caja {
    max-width: 880px;
    margin: 0 auto;
    padding: 2.25rem 2rem 1.5rem;
    background: var(--mx-base);
    border: 1px solid var(--mx-line);
    border-radius: 20px;
    box-shadow: var(--mx-sombra);
    text-align: center;
}
.mx-antetitulo, .mx-pie__titulo {
    margin: 0 0 0.5rem;
    font-family: var(--mx-texto);
    font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--mx-accent);
}
.mx-antetitulo::before { content: ""; display: inline-block; width: 0.45em; height: 0.45em; margin-right: 0.5em; border-radius: 50%; background: var(--mx-accent-decor); vertical-align: 0.1em; }
.mx-dominio-portada__caja h2 { margin: 0 0 1.25rem; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.home-domain-search .input-group-wrapper { margin: 0 auto; padding: 6px; max-width: 640px; border: 1px solid var(--mx-line); border-radius: 14px; box-shadow: none; }
.home-domain-search .input-group-wrapper .form-control { height: 46px; font-size: 1rem; }
.home-domain-search .input-group-wrapper .btn { margin: 0 !important; border-radius: 10px !important; padding: 0 1.4rem; }
.mx-dominio-portada__nota { margin: 0.9rem 0 0; font-size: 0.85rem; color: var(--mx-muted); }

/* 10. Pie idéntico al sitio */
footer.footer.mx-pie {
    margin: 0;
    padding: 3.5rem 0 2rem;
    background: var(--mx-ink);
    color: #aab8cc;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.9rem;
}
.mx-pie__arriba { display: flex; flex-wrap: wrap; gap: 3rem 4rem; }
.mx-pie__marca { flex: 0 1 20rem; }
.mx-pie__marca img { display: block; width: 150px; height: auto; margin-bottom: 1rem; filter: invert(1) hue-rotate(180deg) brightness(1.15) contrast(0.92); }
.mx-pie__marca p { margin: 0 0 1rem; color: #aab8cc; line-height: 1.6; }
.mx-pie__sociales { margin: 0; }
footer.footer .mx-pie__sociales .btn, footer.footer .mx-pie__sociales .btn-icon { background: rgba(255, 255, 255, 0.08); color: #fff; border-radius: 8px; }
.mx-pie__columnas { flex: 1 1 42rem; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2rem 1.5rem; }
.mx-pie__columna ul { margin: 0; padding: 0; list-style: none; }
.mx-pie__columna li { margin: 0 0 0.6rem; }
.mx-pie__columna a { color: #aab8cc; text-decoration: none; }
.mx-pie__columna a:hover { color: #ffb26b; text-decoration: underline; }
.mx-pie__titulo { color: #fff; margin-bottom: 1rem; }
.mx-pie .mx-pie__titulo { color: #fff; }
.mx-pie__abajo {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem;
    margin-top: 3rem; padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.82rem; color: rgba(255, 255, 255, 0.55);
}
footer.footer .copyright, footer.footer.mx-pie .copyright { margin: 0; font-size: 0.82rem; text-align: left; }
.mx-pie__idioma { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
footer.footer .mx-boton-idioma, footer.footer .mx-boton-idioma:hover { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16); color: #fff; border-radius: 8px; font-size: 0.82rem; padding: 0.25rem 0.7rem; line-height: 1.6rem; }

/* 10b. Formulario de pedido standard_cart (su all.min.css carga después; por eso el prefijo body) */
body .btn-primary, body .btn-primary:disabled { background: var(--mx-contrast); border-color: var(--mx-contrast); color: #fff; }
body .btn-primary:hover, body .btn-primary:focus, body .btn-primary:not(:disabled):not(.disabled):active { background: var(--mx-contrast-2); border-color: var(--mx-contrast-2); color: #fff; }
body .domain-checker-container .domain-checker-bg,
body .domain-checker-bg { background: linear-gradient(135deg, #12263f 0%, #1d3a5f 100%); }
body .domain-checker-container .domain-checker-bg .row .col-md-12 > div, body .domain-checker-bg .search-box { color: #fff; }
body .domain-checker-container .domain-checker-bg .input-group-box { border-radius: 14px; }
body .iradio_square-blue.checked, body .icheckbox_square-blue.checked, body .iradio_square-blue.checked.hover { background-position: inherit; filter: hue-rotate(15deg) saturate(0.6) brightness(0.7); }
body .cart-body .header-lined h1, body .cart-body h1 { font-family: var(--mx-display); }
body .product-info .product-details, body .view-cart-items, body .order-summary { border-radius: var(--mx-radio); }
body .order-summary { background: var(--mx-contrast); }
body .order-summary .form-control { color: var(--mx-body); }
body .btn-checkout, body #checkout { background: var(--mx-accent-decor); border-color: var(--mx-accent-decor); color: #1a0f04; }
body .btn-checkout:hover, body #checkout:hover { background: #f5872a; border-color: #f5872a; color: #1a0f04; }
body .products .product, body .product-selection-alt .product { border-radius: var(--mx-radio); border-color: var(--mx-line); }
body .products .product header { background: var(--mx-base-2); border-radius: var(--mx-radio) var(--mx-radio) 0 0; }

/* 10c. Página "Generar Facturas" (Factura.com, plantilla customer_area/clientfacturacion.tpl copiada del tema Zomex) */
#modalForm .modal-header { flex-wrap: wrap; align-items: center; }
#modalForm .modal-header .close { order: 2; margin: -0.5rem -0.5rem -0.5rem auto; }
#modalForm .modal-title { order: 1; }
#modalForm .glyphicon, .btn-send-email .glyphicon, .btn-modal-form .glyphicon { display: none; }
#modalForm .step-content label { border-radius: 10px 0 0 10px; border-color: var(--mx-line); color: var(--mx-contrast); font-family: var(--mx-texto); font-weight: 600; }
#modalForm .step-content .f-input { border-radius: 10px; border-color: var(--mx-line); font-family: var(--mx-texto); }
#modalForm .step-content .f-input:focus { border-color: var(--mx-contrast); outline: none; box-shadow: 0 0 0 0.2rem rgba(18, 38, 63, 0.12); }
#modalForm .modal-footer .buttons-right { display: flex; gap: 0.5rem; justify-content: flex-end; width: 100%; }
#modalForm .btn-success.f-submit { background: var(--mx-contrast); border-color: var(--mx-contrast); }
#modalForm .btn-danger.f-back { background: var(--mx-base); border-color: var(--mx-line); color: var(--mx-contrast); }
.label.status { display: inline-block; padding: 0.3em 0.7em; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.label.status-paid { background: #e6f4ec; color: #1f7a4d; }
.label.status-unpaid, .label.status-cancelled { background: var(--mx-accent-soft); color: var(--mx-accent); }
.table-list.dataTable { border: 1px solid var(--mx-line) !important; border-radius: var(--mx-radio) !important; overflow: hidden; }
.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { border: 1px solid var(--mx-line); border-radius: 8px; padding: 0.3rem 0.5rem; }

/* 11. Detalles de Twenty-One que ya no aplican */
header.header .navbar a { color: inherit; }
.btn-return-to-admin { border-radius: 0 0 8px 8px !important; }

/* 12. Responsivo */
@media (max-width: 1399.98px) {
    .mx-boton-naranja { display: none; }
}
@media (max-width: 1199.98px) {
    .mx-nav { display: none; }
    .mx-hamburguesa { display: inline-flex; }
    .mx-cuenta span { display: none; }
    .mx-cuenta { padding: 0.5rem; }
    .mx-barra__inner { min-height: 60px; }
    header.header .mx-subnav .navbar-collapse { padding: 0.5rem 0 1rem; }
    header.header .mx-subnav .navbar-nav > li > a { display: flex; width: 100%; padding: 0.65rem 0.25rem !important; border-radius: 0; border-bottom: 1px solid var(--mx-line-soft); white-space: normal; }
    header.header .mx-subnav .navbar-nav > li { width: 100%; padding-right: 0 !important; }
    header.header .mx-subnav .navbar-nav > li.active > a { background: transparent; color: var(--mx-accent); }
    header.header .mx-subnav .dropdown-menu { position: static; float: none; box-shadow: none; border: 0; padding: 0 0 0 0.75rem; }
    .mx-busqueda { margin: 0.75rem 0 0; }
    .mx-busqueda .input-group { width: 100%; }
    .mx-nav-movil { display: flex; flex-direction: column; margin-top: 1rem; padding: 1rem 0.25rem 0; border-top: 1px solid var(--mx-line); }
    .mx-nav-movil__titulo { margin: 0 0 0.25rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mx-muted); }
    .mx-nav-movil a { padding: 0.55rem 0; color: var(--mx-contrast); font-weight: 500; text-decoration: none; }
    .mx-nav-movil__cta { margin-top: 0.75rem; padding: 0.7rem 1rem !important; border-radius: 10px; background: var(--mx-accent-decor); color: #1a0f04 !important; text-align: center; }
}
@media (max-width: 767.98px) {
    html { font-size: 14.5px; }
    .mx-marca img { width: 148px; }
    section#main-body { padding: 1.25rem 0 2.5rem; }
    .mx-dominio-portada__caja { padding: 1.5rem 1rem 1.25rem; border-radius: 16px; }
    .home-domain-search .input-group-wrapper .btn { padding: 0 1rem; }
    .mx-pie__columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mx-pie__abajo, footer.footer.mx-pie .copyright { justify-content: center; text-align: center; }
    .mx-pie__idioma { justify-content: center; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
    .mx-pie__columnas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}