/* *****************************************************

    ** Custom Stylesheet **

    Any custom styling you want to apply should be
    defined here.

***************************************************** */

/* Custom CSS for Nexus Cart
 *
 * This block allows you to customize theme colors and styles for the entire Nexus Cart template.
 *
 * To customize colors:
 * - Replace the var() references with your own hex colors or other CSS values.
 * - For example, instead of --primary: #4b5563; use --primary: #your-color;
 * - You can also override any CSS properties here.
 */

html {
    font-size: 14px;
}

:root {
    --white: #fff;

    /* Neutral shades */
    --neutral-50: #fbf9fa;
    --neutral-100: #f4f5f7;
    --neutral-200: #e4e4e7;
    --neutral-300: #d0d5dd;
    --neutral-400: #9ca3af;
    --neutral-500: #6b7280;
    --neutral-600: #4b5563;
    --neutral-700: #374151;
    --neutral-800: #1f2937;
    --neutral-900: #111827;
    --neutral-950: #030712;

    /* Neutral shades */
    /* define own pallet with brand colors */
    --primary-50: var(--neutral-50);
    --primary-100: var(--neutral-100);
    --primary-200: var(--neutral-200);
    --primary-300: var(--neutral-300);
    --primary-400: var(--neutral-400);
    --primary-500: var(--neutral-500);
    --primary-600: var(--neutral-600);
    --primary-700: var(--neutral-700);
    --primary-800: var(--neutral-800);
    --primary-900: var(--neutral-900);
    --primary-950: var(--neutral-900);

    /* Primary colors */
    /* Use shades from comments if `primary` colors use other colors, then neutral */
    --primary: var(--neutral-900);          /* var(--primary-600) */
    --primary-lifted: var(--neutral-800);   /* var(--primary-700) */
    --primary-accented: var(--neutral-700); /* var(--primary-800) */

    /* Secondary colors */
    --secondary: var(--neutral-500);
    --secondary-lifted: var(--neutral-600);
    --secondary-accented: var(--neutral-700);

    /* Success colors */
    --success: #00a63e;
    --success-lifted: #008236;
    --success-accented: #016630;

    /* Info colors */
    --info: #155dfc;
    --info-lifted: #1447e6;
    --info-accented: #193cb8;

    /* Notice colors */
    --notice: #7f22fe;
    --notice-lifted: #7008e7;
    --notice-accented: #5d0ec0;

    /* Warning colors */
    --warning: #f54a00;
    --warning-lifted: #ca3500;
    --warning-accented: #9f2d00;

    /* Error colors */
    --error: #e7000b;
    --error-lifted: #c10007;
    --error-accented: #9f0712;

    /* Grayscale colors */
    --grayscale: var(--neutral-900);
    --grayscale-lifted: var(--neutral-800);
    --grayscale-accented: var(--neutral-700);

    /* Neutral colors */
    --neutral: var(--neutral-500);
    --neutral-lifted: var(--neutral-600);
    --neutral-accented: var(--neutral-700);

    /* Text neutral colors */
    --text-inverted: var(--white);
    --text-muted: var(--neutral-400);
    --text-lifted: var(--neutral-500);
    --text-accented: var(--neutral-600);
    --text: var(--neutral-900);

    /* Border neutral colors */
    --border-muted: var(--neutral-200);
    --border: var(--neutral-300);
    --border-lifted: var(--neutral-400);
    --border-accented: var(--neutral-600);

    /* Background neutral colors */
    --bg: var(--white);
    --bg-muted: var(--neutral-50);
    --bg-lifted: var(--neutral-100);
    --bg-accented: var(--neutral-200);
    --bg-inverted: var(--neutral-900);

    /* Additional colors */
    --yellow-200: #fff085;
    --yellow-300: #ffdf20;
    --teal-300: #46edd5;
    --teal-400: #00d5be;
    --emerald-300: #5ee9b5;
    --pink-400: #fb64b6;

    /* Additional custom properties */
    /* Font sizes */
    --text-xs: 0.625rem;
    --text-sm: 0.75rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;

    /* Spacing */
    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;

    /* Rounding */
    --rounding-sm: 0.25rem;
    --rounding-md: 0.5rem;
    --rounding-lg: 0.75rem;

    /* Other */
    --letter-spacing: 0em;
    --disabled-opacity: 25%;
}

/* *****************************************************

    ** Servinetsa **
    Mismo diseño que servinetsa.com (tema Servinetsa Moderno).
    El encabezado y el pie de página (header.tpl / footer.tpl)
    usan las mismas medidas y colores que el sitio web.

***************************************************** */

:root {
    --sn-navy: #0b2340;
    --sn-navy-2: #0e3a5c;
    --sn-cyan: #12a8e0;
    --sn-cyan-ink: #0a7fb0;
    --sn-orange: #f7941d;
    --sn-orange-ink: #d96f00;
    --sn-ink: #13283b;
    --sn-muted: #5b6b7a;
    --sn-gray-logo: #8c8c8c;
    --sn-line: #e3eaf0;
    --sn-bg: #f4f7fa;
    --sn-radius: 14px;
    --sn-shadow: 0 1px 2px rgba(11, 35, 64, .06), 0 8px 24px rgba(11, 35, 64, .06);
    --sn-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --sn-logo-font: "Nunito", "Plus Jakarta Sans", system-ui, sans-serif;

    /* Colores de marca para el carrito Nexus */
    --primary: var(--sn-orange-ink);
    --primary-lifted: #c26300;
    --primary-accented: #a85600;
    --info: var(--sn-cyan-ink);
    --info-lifted: #086a93;
    --info-accented: #065676;
    --rounding-sm: 0.375rem;
    --rounding-md: 0.625rem;
    --rounding-lg: 0.875rem;
}

/* ---------- Base ---------- */


body,
body.primary-bg-color {
    font-family: var(--sn-font);
    color: var(--sn-ink);
    background-color: var(--sn-bg);
    -webkit-font-smoothing: antialiased;
}
#main-body { background-color: var(--sn-bg); }

/* Mismo ancho que el sitio web (1180px) */
@media (min-width: 1200px) {
    .container { max-width: 1180px; padding-left: 20px; padding-right: 20px; }
}

h1, h2, h3, h4, h5 { color: var(--sn-ink); font-weight: 700; letter-spacing: -.2px; }

a { color: var(--sn-cyan-ink); }
a:hover { color: var(--sn-orange-ink); }

/* ---------- Barra de cliente con sesión iniciada (Twenty-One) ---------- */

header.header { background: transparent; }
header.header .topbar { background-color: var(--sn-navy-2); }

/* ---------- Barra superior (igual al sitio) ---------- */

.sn-topbar { background: var(--sn-navy); color: #b9c8d6; font-size: 13px; line-height: 1.65; }
.sn-topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 32px; }
.sn-topbar a { color: #dfe8f0; }
.sn-topbar a:hover { color: var(--sn-orange); text-decoration: none; }
.sn-topbar-links { display: flex; gap: 20px; align-items: center; }
.sn-topbar-links a { display: inline-flex; align-items: center; gap: 6px; }
.sn-i { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Menú del sitio ---------- */

.sn-nav {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: saturate(1.4) blur(8px);
    border-bottom: 1px solid var(--sn-line);
}
.sn-nav-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 62px; }

.sn-logo { display: inline-flex; flex-direction: column; line-height: 1; color: var(--sn-gray-logo); }
.sn-logo:hover { color: var(--sn-gray-logo); text-decoration: none; }
.sn-logo-word { font-family: var(--sn-logo-font); font-weight: 600; font-size: 28px; letter-spacing: -.5px; }
.sn-logo-word b { color: var(--sn-cyan); font-weight: 700; }
.sn-dot { position: relative; }
.sn-dot::before {
    content: ""; position: absolute; left: 50%; top: .02em; width: .3em; height: .3em;
    transform: translateX(-50%); border-radius: 50%; background: var(--sn-orange);
}
.sn-logo-tag { margin-top: 2px; font-family: var(--sn-font); font-size: 11px; letter-spacing: .3px; color: var(--sn-muted); }
/* En el encabezado el logo va sin el lema y más grande */
.sn-nav .sn-logo-word { font-size: 36px; }

.sn-main-nav { display: flex; align-items: center; gap: 22px; }
.sn-main-nav ul { list-style: none; margin: 0; padding: 0; }
.sn-main-nav > ul { display: flex; align-items: center; gap: 2px; }
.sn-main-nav li { position: relative; }
.sn-main-nav > ul > li > a {
    display: block; white-space: nowrap; padding: 8px 14px; border-radius: 10px;
    color: var(--sn-ink); font-weight: 600; font-size: 15px; line-height: 1.65;
}
.sn-main-nav > ul > li > a:hover { color: var(--sn-cyan-ink); background: #eaf6fc; text-decoration: none; }
.sn-has-sub > a::after {
    content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; vertical-align: 3px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
}
.sn-sub {
    position: absolute; top: 100%; left: 0; min-width: 250px; padding: 8px !important;
    background: #fff; border: 1px solid var(--sn-line); border-radius: 12px; box-shadow: var(--sn-shadow);
    opacity: 0; visibility: hidden; transform: translateY(6px); transition: .15s; z-index: 1040;
}
.sn-has-sub:hover > .sn-sub,
.sn-has-sub:focus-within > .sn-sub { opacity: 1; visibility: visible; transform: none; }
.sn-sub a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--sn-ink); font-size: 14.5px; font-weight: 500; line-height: 1.65; }
.sn-sub a:hover { background: var(--sn-bg); color: var(--sn-cyan-ink); text-decoration: none; }

.sn-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 22px; border-radius: 999px; border: 2px solid transparent;
    font-weight: 700; font-size: 15px; line-height: 1.2; white-space: nowrap;
    transition: background .15s, color .15s, transform .15s;
}
.sn-btn:hover { transform: translateY(-1px); text-decoration: none; }
.sn-btn-primary { background: var(--sn-orange); color: #fff; }
.sn-btn-primary:hover { background: var(--sn-orange-ink); color: #fff; }
.sn-btn-sm { padding: 9px 18px; font-size: 14px; }

.sn-nav-toggle { display: none; }
.sn-nav-burger { display: none; width: 44px; height: 44px; margin: 0; border-radius: 10px; cursor: pointer; align-items: center; justify-content: center; }
.sn-nav-burger span, .sn-nav-burger span::before, .sn-nav-burger span::after { display: block; width: 22px; height: 2px; background: var(--sn-ink); position: relative; content: ""; }
.sn-nav-burger span::before { position: absolute; top: -7px; }
.sn-nav-burger span::after { position: absolute; top: 7px; }

/* ---------- Franja con imagen (igual a las páginas del sitio) ---------- */

.sn-hero {
    position: relative;
    color: #fff;
    background: var(--sn-navy) url("../img/hero.jpg") no-repeat right center / cover;
}
.sn-hero::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(11, 35, 64, .96) 0%, rgba(11, 35, 64, .82) 42%, rgba(11, 35, 64, 0) 70%);
}
.sn-hero-inner { position: relative; padding-top: 26px; padding-bottom: 22px; }
.sn-hero h1 {
    margin: 0; color: #fff;
    font-size: clamp(26px, 3.2vw, 34px); line-height: 1.08; letter-spacing: -1.2px; font-weight: 800;
}
.sn-breadcrumbs { margin-bottom: 4px; font-size: 14px; color: #9fb3c6; }
.sn-breadcrumbs .breadcrumb { margin: 0; padding: 0; background: transparent; font-size: 14px; }
.sn-breadcrumbs .breadcrumb-item,
.sn-breadcrumbs .breadcrumb-item + .breadcrumb-item::before { color: #9fb3c6; }
.sn-breadcrumbs .breadcrumb-item + .breadcrumb-item::before { content: ">"; }
.sn-breadcrumbs .breadcrumb-item a { color: #dfe8f0; }
.sn-breadcrumbs .breadcrumb-item a:hover { color: var(--sn-orange); text-decoration: none; }
.sn-breadcrumbs .breadcrumb-item.active { color: var(--sn-orange); }

/* Menú del portal (WHMCS) dentro de la franja */
.sn-portal {
    position: relative;
    z-index: 20;
    background: rgba(5, 18, 35, .55);
    border-top: 1px solid rgba(255, 255, 255, .08);
    backdrop-filter: blur(6px);
}
.sn-portal-inner { display: flex; align-items: center; gap: 12px; min-height: 52px; }
.sn-portal .main-navbar-wrapper { flex: 1; min-width: 0; padding: 0; background: transparent; }
.sn-portal .navbar-collapse { padding: 0; }
.sn-portal .navbar-nav > li > a {
    display: inline-block;
    /* Twenty-One muestra "Más" y mueve elementos si el menú mide 30px o más de alto */
    padding: 4px 12px !important;
    white-space: nowrap;
    border-radius: 8px;
    color: #dfe8f0;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 20px;
}
.sn-portal .navbar-nav > li > a:hover,
.sn-portal .navbar-nav > li.show > a,
.sn-portal .navbar-nav > li.active > a { background: rgba(255, 255, 255, .1); color: #fff; text-decoration: none; }
.sn-portal .dropdown-menu {
    margin-top: 10px; padding: 8px;
    border: 1px solid var(--sn-line); border-radius: 12px; box-shadow: var(--sn-shadow);
}
.sn-portal .dropdown-menu .dropdown-item { padding: 0; border-radius: 8px; background: transparent; }
.sn-portal .dropdown-menu .dropdown-item a {
    display: block; padding: 8px 12px !important; border-radius: 8px;
    color: var(--sn-ink); font-size: 14.5px; font-weight: 500;
}
.sn-portal .dropdown-menu .dropdown-item a:hover { background: var(--sn-bg); color: var(--sn-cyan-ink); text-decoration: none; }
.sn-portal .dropdown-divider { border-color: var(--sn-line); }

.sn-portal-search .search {
    width: 230px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    overflow: hidden;
}
.sn-portal-search .search .btn,
.sn-portal-search .search .form-control { border: 0; background: transparent; color: #fff; box-shadow: none; }
.sn-portal-search .search .btn { color: #9fb3c6; padding-right: 4px; }
.sn-portal-search .search .form-control { font-size: 14px; }
.sn-portal-search .search .form-control::placeholder { color: #9fb3c6; }
.sn-portal-search .search:focus-within { border-color: var(--sn-cyan); background: rgba(255, 255, 255, .12); }

.sn-cart-btn {
    position: relative;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    overflow: visible; /* Twenty-One pone overflow: hidden y recorta el contador */
}
.sn-cart-btn:hover { color: var(--sn-orange); background: rgba(255, 255, 255, .14); }
.sn-cart-btn .badge { position: absolute; top: -6px; right: -6px; padding: 3px 6px; border-radius: 999px; background: var(--sn-orange); color: #fff; font-size: 10px; }

.sn-portal-toggle { color: #fff; font-weight: 600; padding: 6px 10px; }
.sn-portal-toggle:hover { color: var(--sn-orange); }

/* ---------- Botones ---------- */

.btn { border-radius: 10px; font-weight: 600; }
.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--sn-orange);
    border-color: var(--sn-orange);
    color: #fff;
}
.btn-primary:hover,
.btn-primary:focus { background-color: var(--sn-orange-ink); border-color: var(--sn-orange-ink); color: #fff; }
.btn-primary:focus { box-shadow: 0 0 0 4px rgba(247, 148, 29, .25); }

.btn-outline-primary { color: var(--sn-cyan-ink); border-color: #9fd6ee; background: #fff; }
.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active { color: #fff; background-color: var(--sn-cyan-ink); border-color: var(--sn-cyan-ink); }

.btn-success,
.home-domain-search .input-group-wrapper .advanced-input .btn-success { background-color: var(--sn-cyan-ink); border-color: var(--sn-cyan-ink); }
.btn-success:hover { background-color: #086a93; border-color: #086a93; }

.btn-default { border-color: #cfdbe5; }

/* ---------- Tarjetas y paneles ---------- */

.card { border: 1px solid var(--sn-line); border-radius: var(--sn-radius); box-shadow: var(--sn-shadow); }
.card-header { background: #fff; border-bottom-color: var(--sn-line); font-weight: 700; }
.card-header:first-child { border-radius: var(--sn-radius) var(--sn-radius) 0 0; }
.card-footer { background: #fbfdff; border-top-color: var(--sn-line); }

.card-columns.home .card { transition: border-color .15s, transform .15s; }
.card-columns.home .card:hover { border-color: #bfe3f4; transform: translateY(-2px); }
.card-columns.home .card-title { font-weight: 700; }

.action-icon-btns a {
    border-radius: var(--sn-radius);
    border: 1px solid var(--sn-line);
    box-shadow: var(--sn-shadow);
    color: var(--sn-ink);
    transition: transform .15s, border-color .15s;
}
.action-icon-btns a:hover { transform: translateY(-2px); border-color: #bfe3f4; color: var(--sn-cyan-ink); text-decoration: none; }
.action-icon-btns a:hover .ico-container i { color: var(--sn-orange); }
.action-icon-btns .ico-container i { color: var(--sn-cyan); }
.action-icon-btns a[class*="card-accent-"] { border-top: 3px solid var(--sn-cyan); }
.action-icon-btns a.card-accent-midnight-blue { border-top-color: var(--sn-navy); }

.home-domain-search { border-bottom: 1px solid var(--sn-line); }
.home-domain-search h2 { font-weight: 800; letter-spacing: -.4px; }
.home-domain-search .input-group-wrapper { border: 1px solid #cfdbe5; border-radius: var(--sn-radius); box-shadow: var(--sn-shadow); }

.sidebar .list-group-item.active,
.sidebar .list-group-item.active:focus,
.sidebar .list-group-item.active:hover,
.list-group-item.active { background-color: #eaf6fc; border-color: #eaf6fc; color: var(--sn-cyan-ink); font-weight: 700; }
.sidebar .list-group-item:hover { color: var(--sn-cyan-ink); }
.sidebar .list-group-item.active .badge { background: #fff; color: var(--sn-cyan-ink); }

.form-control,
.custom-select { border-color: #cfdbe5; border-radius: 10px; }
.form-control:focus,
.custom-select:focus { border-color: var(--sn-cyan); box-shadow: 0 0 0 4px rgba(18, 168, 224, .15); }
.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 > .form-control:not(:first-child),
.input-group > .custom-select:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }

.badge-info { background-color: var(--sn-cyan-ink); }
.alert { border-radius: 12px; }
.alert-info { background: #eaf6fc; border-color: #bfe3f4; color: #075a7d; }

.page-item.active .page-link { background-color: var(--sn-cyan-ink); border-color: var(--sn-cyan-ink); }
.page-link { color: var(--sn-cyan-ink); }

/* ---------- Pie de página (igual al sitio) ---------- */

footer.footer.sn-footer { margin: 0; padding: 0; background: var(--sn-navy); color: #a9bbcc; font-size: 15px; line-height: 1.65; }
.sn-footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; padding-top: 56px; padding-bottom: 40px; }
.sn-footer .sn-logo { color: #c9d6e2; }
.sn-footer .sn-logo-tag { color: #8aa0b5; }
.sn-footer p { margin: 16px 0 0; }
.sn-footer h4 { margin: 0 0 14px; color: #fff; font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.sn-footer ul { list-style: none; margin: 0; padding: 0; }
.sn-footer li { margin: 0 0 8px; }
.sn-footer a { color: #dfe8f0; }
.sn-footer a:hover { color: var(--sn-orange); text-decoration: none; }
.sn-footer-bottom {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
    padding-top: 20px; padding-bottom: 28px; border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: 13.5px; color: #8aa0b5;
}
.sn-footer-bottom .list-inline-item { margin: 0 0 0 8px; }
.sn-footer-bottom .btn { background-color: rgba(255, 255, 255, .08); color: #dfe8f0; border-radius: 8px; font-size: 13px; line-height: 1.75rem; padding: 0 10px; }

/* ---------- Responsive (mismos cortes que el sitio) ---------- */

@media (max-width: 1024px) {
    .sn-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1199.98px) {
    .sn-portal-inner { flex-wrap: wrap; padding-top: 6px; padding-bottom: 6px; }
    .sn-portal .main-navbar-wrapper { order: 3; flex-basis: 100%; }
    .sn-portal .navbar-collapse.show,
    .sn-portal .navbar-collapse.collapsing { padding-bottom: 8px; }
    .sn-portal .navbar-nav > li > a { display: block; padding: 8px 12px !important; }
    .sn-portal .dropdown-menu { margin-top: 0; }
    .sn-cart-btn { margin-left: auto; }
}

@media (max-width: 860px) {
    .sn-nav-burger { display: inline-flex; }
    .sn-main-nav {
        position: absolute; left: 0; right: 0; top: 100%; display: none; flex-direction: column; align-items: stretch;
        padding: 12px 20px 20px; background: #fff; border-bottom: 1px solid var(--sn-line); box-shadow: var(--sn-shadow);
    }
    .sn-nav-toggle:checked ~ .sn-main-nav { display: flex; }
    .sn-main-nav > ul { flex-direction: column; align-items: stretch; }
    .sn-sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 0 14px !important; min-width: 0; }
    .sn-has-sub > a::after { display: none; }
    .sn-main-nav .sn-btn { align-self: flex-start; margin-top: 8px; }
    .sn-topbar-text { display: none; }
    .sn-topbar-inner { justify-content: flex-end; }
    .sn-hero { background-position: 70% center; }
    .sn-hero::before { background: linear-gradient(180deg, rgba(11, 35, 64, .9), rgba(11, 35, 64, .78)); }
}

@media (max-width: 560px) {
    .sn-logo-word { font-size: 25px; }
    .sn-nav .sn-logo-word { font-size: 30px; }
    .sn-footer-grid { grid-template-columns: 1fr; gap: 28px; }
}