/* GH 22-oct-2026: marca HostingCenter Colombia sobre twenty-one (colores y letra del sitio) */
:root {
    --gh-teal: #07100b;
    --gh-teal-2: #0c1f15;
    --gh-green: #059669;
    --gh-mint: #1fd78c;
    --gh-mint-soft: #e2f7ee;
    --gh-ink: #0b1a12;
    --gh-muted: #56635b;
    --gh-line: #e2eae5;
    --gh-bg: #f5f8f6;
}

body,
.primary-bg-color {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--gh-ink);
    background-color: var(--gh-bg);
}
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 { font-family: inherit; color: var(--gh-teal); }
a { color: var(--gh-green); }
a:hover { color: var(--gh-teal); }

/* ---------- Cabecera ---------- */
header.header .topbar { background-color: var(--gh-teal); }
header.header .topbar .btn,
header.header .topbar .active-client .input-group-text { color: #c6d6cc; }
header.header .topbar .btn:hover { color: #fff; }
.header .topbar .btn-active-client span { border-bottom-color: rgba(255,255,255,.35); }
.header .navbar-light { background: #fff; padding-top: 14px; padding-bottom: 14px; }
.header .logo-img { max-height: 38px; width: auto; }
.gh-brand-links { gap: 22px; align-items: center; }
.gh-brand-links a { color: var(--gh-teal); font-weight: 600; font-size: .9rem; white-space: nowrap; }
.gh-brand-links a i { color: var(--gh-green); margin-right: 4px; }
.gh-brand-links a:hover { color: var(--gh-green); text-decoration: none; }
.header .cart-btn { color: var(--gh-teal); }
.header .cart-btn .badge-info { background-color: var(--gh-green); }

.header .main-navbar-wrapper { background: #fff; border-top: 1px solid var(--gh-line); border-bottom: 1px solid var(--gh-line); }
.header .main-navbar-wrapper .navbar-nav .nav-link {
    color: var(--gh-ink);
    font-weight: 600;
    font-size: .92rem;
    padding: 14px 10px;
    white-space: nowrap;
}
@media (min-width: 1200px) and (max-width: 1399px) {
    .header .main-navbar-wrapper .navbar-nav .nav-link { padding-left: 7px; padding-right: 7px; font-size: .88rem; }
}
.header .main-navbar-wrapper .navbar-nav .nav-link:hover,
.header .main-navbar-wrapper .navbar-nav .active > .nav-link { color: var(--gh-green); }
.header .main-navbar-wrapper .dropdown-menu { border-radius: 10px; border-color: var(--gh-line); box-shadow: 0 10px 30px rgba(13,27,42,.08); }
.header .main-navbar-wrapper .dropdown-item:active { background-color: var(--gh-mint-soft); color: var(--gh-teal); }

.master-breadcrumb,
.master-breadcrumb .breadcrumb { background: transparent; padding-left: 0; }
.master-breadcrumb .breadcrumb a { color: var(--gh-muted); }

/* ---------- Botones ---------- */
.btn { border-radius: 8px; font-weight: 600; }
.btn-primary,
.btn-success {
    background-color: var(--gh-green);
    border-color: var(--gh-green);
    color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-success:hover, .btn-success:focus, .btn-success:active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled):active {
    background-color: var(--gh-teal);
    border-color: var(--gh-teal);
    color: #fff;
}
.btn-default { border-color: #d5dde3; color: var(--gh-ink); background: #fff; }
.btn-default:hover { border-color: var(--gh-green); color: var(--gh-green); background: #fff; }

/* ---------- Tarjetas ---------- */
.card,
.sidebar .card {
    border: 1px solid var(--gh-line);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(13,27,42,.04);
    overflow: hidden;
}
.card-header { background: #fff; border-bottom: 1px solid var(--gh-line); }
.card-title { font-weight: 700; font-size: 1.02rem; color: var(--gh-teal); }
.card-footer { background: #fafcfc; border-top: 1px solid var(--gh-line); }
.card-footer:empty { display: none; }
.sidebar .card-header { padding: .75rem 1rem; }
.sidebar .list-group-item { border-color: var(--gh-line); }
.sidebar .list-group-item.active,
.list-group-item.active { background-color: var(--gh-mint-soft); border-color: var(--gh-line); color: var(--gh-teal); }

/* Bordes de color de los paneles del inicio: todos con el verde de marca */
.client-home-cards .card { border-top: 3px solid var(--gh-green); }
.client-home-cards .card .btn.btn-xs[class*="bg-color-"] { background: var(--gh-mint-soft) !important; color: var(--gh-teal) !important; border: 0; }

/* Contadores del inicio */
.tiles { border-radius: 12px; overflow: hidden; border: 1px solid var(--gh-line); background: #fff; }
.tiles .tile { background: #fff; }
.tiles .tile:hover { background: var(--gh-mint-soft); }
.tiles .tile .stat { color: var(--gh-teal); font-weight: 700; }
.tiles .tile .title { color: var(--gh-muted); font-weight: 700; letter-spacing: .04em; }
.tiles .tile i { color: #d3eadf; }
.tiles .tile .highlight { background-color: var(--gh-green) !important; }

/* Productos activos */
.div-service-item .label-success,
.label-success, .badge-success { background-color: var(--gh-green); }

/* Registrar dominio: el formulario se salia de la tarjeta y aparecia barra de desplazamiento */
.client-home-cards [menuitemname="Register a New Domain"] .card-body { overflow: hidden; }

/* Productos activos: si no caben los botones, bajan bajo el nombre (no aplastar el nombre) */
.div-service-item { flex-wrap: wrap; row-gap: 6px; }
.div-service-item .div-service-name { flex: 1 1 200px; min-width: 200px; }

/* ---------- Ayuda Hosting ---------- */
.gh-help-card { border-top: 3px solid var(--gh-mint) !important; }
.gh-help-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
}
.gh-help-grid a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid var(--gh-line);
    border-radius: 10px;
    color: var(--gh-ink);
    font-weight: 600;
    font-size: .9rem;
    background: #fff;
    transition: border-color .15s, background-color .15s;
}
.gh-help-grid a i { color: var(--gh-green); font-size: 1.15rem; width: 20px; text-align: center; }
.gh-help-grid a:hover { border-color: var(--gh-green); background: var(--gh-mint-soft); text-decoration: none; }

/* ---------- Pie de página ---------- */
footer.footer { background-color: var(--gh-teal); color: #c6d6cc; padding: 48px 0 24px; }
footer.footer a,
footer.footer .nav-link { color: #e4eee8; }
footer.footer a:hover { color: var(--gh-mint); text-decoration: none; }
.gh-footer-logo { filter: brightness(0) invert(1); max-width: 160px; height: auto; }
.gh-footer-title { color: #fff; font-weight: 700; margin-bottom: 12px; }
.gh-footer-cols p { font-size: .9rem; }
.gh-footer-cols li { margin-bottom: 6px; font-size: .9rem; }
.gh-social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255,255,255,.1); margin-right: 6px;
}
.gh-social a:hover { background: var(--gh-mint); color: var(--gh-teal); }
.gh-pay { background: #fff; border-radius: 10px; padding: 8px; max-width: 260px; }
.gh-footer-hr { border-color: rgba(255,255,255,.15); }
footer.footer .copyright { color: #8ea397; margin: 12px 0 0; }
footer.footer .btn { color: #e4eee8; }

/* Formularios */
.form-control:focus { border-color: var(--gh-green); box-shadow: 0 0 0 .2rem rgba(5,150,105,.15); }

@media (max-width: 767px) {
    footer.footer { text-align: center; }
    .gh-pay { margin: 0 auto; }
}

/* ---------- Propio de la marca ---------- */
.gh-textlogo { display: inline-block; line-height: 1; white-space: nowrap; color: var(--gh-ink); }
.navbar-brand:hover .gh-textlogo { color: var(--gh-ink); }
footer.footer .gh-textlogo { color: #fff; margin-bottom: 1rem; }
.gh-textlogo { font-family: 'Hanken Grotesk', 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 28px; letter-spacing: -.03em; }
.gh-textlogo i { font-style: normal; color: var(--gh-green); }
footer.footer .gh-textlogo i { color: var(--gh-mint); }
h1, h2, h3, .h1, .h2, .h3 { font-family: 'Hanken Grotesk', 'Plus Jakarta Sans', sans-serif; }
@media (max-width: 575px) {
    .header .navbar-light .container { flex-wrap: nowrap; }
    .header .navbar-brand { min-width: 0; margin-right: 0 !important; }
    .header .gh-textlogo { font-size: 20px; }
    .header .toolbar .nav-item.ml-3 { margin-left: .5rem !important; }
}