/* Conecte Host - tokens de marca sobre o Nexus (WHMCS 9.0.6).
 * Base: templates/nexus/css/custom.css. Cores do site institucional (styles.css):
 * accent #0d8f6b, accent-deep #066b50, ink #0f1c24, ink-soft #3d5260, steel #1a3a4a, bg #e8eef2.
 * #0d8f6b com texto branco da 4.07:1 (abaixo de AA); botoes e links usam --primary-700 #0b7d5e (5.11:1).
 */
/* *****************************************************

    ** Custom Stylesheet **

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

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

/* Custom CSS for Nexus Theme
 *
 * This file allows you to customize the theme colors and styles for the entire Nexus 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.
 */

:root {
    --white: #fff;

    /* Neutral shades */
    --neutral-50: #f6f9fb;
    --neutral-100: #e8eef2;
    --neutral-200: #d9e2e8;
    --neutral-300: #c3cfd7;
    --neutral-400: #8b9ba6;
    --neutral-500: #627480;
    --neutral-600: #3d5260;
    --neutral-700: #2b3f4c;
    --neutral-800: #1a3a4a;
    --neutral-900: #0f1c24;
    --neutral-950: #08121a;

    /* Neutral shades */
    /* define own pallet with brand colors */
    --primary-50: #eefaf5;
    --primary-100: #d6f2e7;
    --primary-200: #ade4cf;
    --primary-300: #78cfb0;
    --primary-400: #3fb58e;
    --primary-500: #1a9e78;
    --primary-600: #0d8f6b;
    --primary-700: #0b7d5e;
    --primary-800: #066b50;
    --primary-900: #07513d;
    --primary-950: #032c21;

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

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

    /* 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-500);  /* nexus: neutral-400, abaixo de 3:1 */
    --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-100);
    --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.625rem;
    --rounding-lg: 0.875rem;

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

/* =====================================================================
   Conecte Host - etapa 4a: tipografia, estrutura, menu lateral, topo, rodape
   ===================================================================== */
:root {
    --ch-font-display: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
    --ch-font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
    --ch-sidenav-w: 264px;
    --ch-topbar-h: 64px;
    --ch-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ch-shadow-sm: 0 1px 2px rgba(15, 28, 36, 0.06), 0 1px 3px rgba(15, 28, 36, 0.05);
    --ch-shadow-md: 0 10px 30px -14px rgba(15, 28, 36, 0.25);
    --ch-focus: 0 0 0 3px rgba(13, 143, 107, 0.35);
}

/* Tipografia */
body, .ch-body {
    font-family: var(--ch-font-body);
    color: var(--text);
    background: var(--neutral-50);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .card-title, .modal-title {
    font-family: var(--ch-font-display);
    letter-spacing: -0.01em;
    color: var(--text);
}
a { color: var(--primary); }
a:hover { color: var(--primary-lifted); }

/* Foco visivel e consistente (teclado) */
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--primary-600);
    outline-offset: 2px;
    box-shadow: none;
}
.form-control:focus, .custom-select:focus {
    border-color: var(--primary-600);
    box-shadow: var(--ch-focus);
}

/* Link "ir para o conteudo" */
.ch-skip {
    position: absolute; left: 1rem; top: -100px; z-index: 2000;
    background: var(--primary); color: #fff; padding: .5rem 1rem; border-radius: var(--rounding-md);
}
.ch-skip:focus { top: 1rem; color: #fff; }

/* Estrutura */
/* O Nexus pinta o html de escuro (combina com o rodape dele); aqui o rodape e claro. */
html { background-color: var(--neutral-50); }
.ch-shell { min-height: 100vh; }
.ch-main { display: flex; flex-direction: column; min-height: 100vh; min-width: 0; }
.ch-main > #main-body { flex: 1 0 auto; }
#main-body { background: transparent; padding-top: 1.5rem; padding-bottom: 2.5rem; }
#main-body:focus { outline: none; }

@media (min-width: 992px) {
    .ch-main { margin-left: var(--ch-sidenav-w); }
}

/* Menu lateral */
.ch-sidenav {
    position: fixed; inset: 0 auto 0 0; z-index: 1040;
    width: var(--ch-sidenav-w); max-width: 86vw;
    display: flex; flex-direction: column;
    background: var(--neutral-900); color: #c7d3db;
    border-right: 1px solid rgba(255, 255, 255, 0.04);
    transform: translateX(-100%);
    transition: transform .28s var(--ch-ease);
}
@media (min-width: 992px) {
    .ch-sidenav { transform: none; }
    .ch-sidenav__close, .ch-backdrop { display: none !important; }
}
.ch-nav-open .ch-sidenav { transform: none; box-shadow: var(--ch-shadow-md); }
.ch-nav-open { overflow: hidden; }
@media (min-width: 992px) { .ch-nav-open { overflow: auto; } }
.ch-backdrop {
    position: fixed; inset: 0; z-index: 1030;
    background: rgba(8, 18, 26, 0.5);
}
.ch-sidenav__brand {
    display: flex; align-items: center; justify-content: space-between;
    height: var(--ch-topbar-h); padding: 0 1rem 0 1.25rem; flex: 0 0 auto;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ch-sidenav__logo img { display: block; height: 30px; width: auto; }
.ch-sidenav__scroll { flex: 1 1 auto; overflow-y: auto; padding: .75rem .75rem 1rem; scrollbar-width: thin; }
.ch-nav { list-style: none; margin: 0 0 .5rem; padding: 0; }
.ch-nav li { list-style: none; }
.ch-nav__group { margin-top: .9rem; }
.ch-nav__heading {
    display: flex; align-items: center; gap: .6rem;
    padding: .25rem .65rem .35rem;
    font-family: var(--ch-font-display); font-size: .72rem; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase; color: #8fa3b0;
}
.ch-nav__sub { list-style: none; margin: 0; padding: 0; }
.ch-nav__link {
    display: flex; align-items: center; gap: .6rem;
    min-height: 2.5rem; padding: .45rem .65rem .45rem 2.35rem;
    border-radius: var(--rounding-md);
    color: #c7d3db; font-size: .92rem; font-weight: 500; text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.ch-nav__link--top { padding-left: .65rem; }
.ch-nav__link:hover, .ch-nav__link:focus { background: rgba(255, 255, 255, 0.06); color: #fff; text-decoration: none; }
.ch-nav__link.is-active { background: rgba(13, 143, 107, 0.18); color: #fff; box-shadow: inset 3px 0 0 var(--primary-500); }
.ch-nav__link .fa-fw, .ch-nav__heading .fa-fw { width: 1.1rem; color: #7fd2b6; }
.ch-nav__link:focus-visible { outline-color: var(--primary-400); }
.ch-badge {
    margin-left: auto; min-width: 1.4rem; padding: 0 .4rem; border-radius: 999px;
    background: var(--primary-600); color: #fff; font-size: .72rem; font-weight: 600; line-height: 1.4rem; text-align: center;
}
.ch-sidenav__foot { flex: 0 0 auto; padding: .75rem; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.ch-sidenav__user {
    display: flex; align-items: center; gap: .65rem; padding: .5rem; border-radius: var(--rounding-md);
    color: #e3eaef; text-decoration: none; font-weight: 500; font-size: .9rem;
}
.ch-sidenav__user:hover { background: rgba(255, 255, 255, 0.06); color: #fff; text-decoration: none; }
.ch-sidenav__username { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ch-avatar {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 2rem; height: 2rem; border-radius: 50%;
    background: var(--primary-600); color: #fff; font-family: var(--ch-font-display); font-weight: 600; font-size: .9rem;
}

/* Botao de icone (topo e menu) */
.ch-iconbtn {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: var(--rounding-md);
    background: transparent; color: var(--neutral-600); font-size: 1.15rem; cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.ch-iconbtn:hover { background: var(--neutral-100); color: var(--text); text-decoration: none; }
.ch-sidenav .ch-iconbtn { color: #c7d3db; }
.ch-sidenav .ch-iconbtn:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.ch-dot {
    position: absolute; top: .2rem; right: .15rem; min-width: 1.05rem; height: 1.05rem; padding: 0 .25rem;
    border-radius: 999px; background: var(--primary-700); color: #fff;
    font-size: .65rem; font-weight: 700; line-height: 1.05rem; text-align: center;
}
.ch-dot--empty { display: none; }

/* Topo */
header.header.ch-topbar {
    position: sticky; top: 0; z-index: 1020;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: saturate(160%) blur(8px); backdrop-filter: saturate(160%) blur(8px);
    border-bottom: 1px solid var(--border-muted);
    box-shadow: none; padding: 0;
}
.ch-topbar__inner {
    display: flex; align-items: center; gap: .75rem;
    height: var(--ch-topbar-h); padding: 0 1rem;
}
@media (min-width: 992px) {
    .ch-topbar__inner { padding: 0 1.75rem; }
    .ch-topbar__menu, .ch-topbar__logo { display: none !important; }
}
.ch-topbar__logo img { display: block; height: 26px; width: auto; }
.ch-search { position: relative; flex: 1 1 auto; max-width: 420px; margin: 0; display: none; }
@media (min-width: 768px) { .ch-search { display: block; } }
.ch-search .fa-search { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.ch-search .form-control {
    height: 2.5rem; padding-left: 2.4rem; border-radius: 999px;
    background: var(--neutral-50); border: 1px solid var(--border-muted); font-size: .9rem;
}
.ch-topbar__actions { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.ch-account { display: flex; align-items: center; gap: .25rem; margin-left: .25rem; }
.ch-account__name {
    display: inline-flex; align-items: center; gap: .55rem; padding: .25rem .5rem .25rem .25rem;
    border-radius: 999px; color: var(--text); font-weight: 600; font-size: .9rem; text-decoration: none;
    max-width: 240px;
}
.ch-account__name span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-account__name:hover { background: var(--neutral-100); color: var(--text); text-decoration: none; }
.ch-guestnav { flex-direction: row; margin: 0; }
.ch-guestnav > li > a { display: inline-flex; align-items: center; height: 2.5rem; padding: 0 .9rem; border-radius: var(--rounding-md); color: var(--text); font-weight: 600; }
.ch-guestnav > li > a:hover { background: var(--neutral-100); text-decoration: none; }
.ch-guestnav .dropdown-menu { right: 0; left: auto; }

/* Notificacoes (popover nativo do Nexus) */
.popover { border: 1px solid var(--border-muted); border-radius: var(--rounding-lg); box-shadow: var(--ch-shadow-md); font-family: var(--ch-font-body); }

/* Breadcrumb */
.master-breadcrumb { background: transparent; border: 0; padding-top: 1rem; }
.master-breadcrumb .breadcrumb { background: transparent; padding: 0; margin: 0; font-size: .85rem; }
.master-breadcrumb .breadcrumb-item a { color: var(--text-lifted); }
.master-breadcrumb .breadcrumb-item.active { color: var(--text-accented); }

/* Rodape */
footer.footer.ch-footer {
    background: transparent; color: var(--text-lifted); border-top: 1px solid var(--border-muted);
    padding: 1.25rem 0; margin: 0; font-size: .85rem;
}
footer.footer.ch-footer .copyright { margin: 0; text-align: left; color: var(--text-lifted); font-size: .85rem; }
.ch-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; }
.ch-footer__links { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.25rem; list-style: none; margin: 0; padding: 0; }
.ch-footer__links a, .ch-footer__locale { color: var(--text-accented); }
.ch-footer__links .list-inline-item { margin: 0; }
.ch-footer__locale {
    display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem;
    background: transparent; border: 1px solid var(--border); border-radius: 999px; font-size: .8rem; cursor: pointer;
}
.ch-footer__locale:hover { border-color: var(--primary-600); color: var(--primary); }

/* Botoes */
.btn { border-radius: var(--rounding-md); font-weight: 600; transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover, .btn-primary:focus { background: var(--primary-lifted); border-color: var(--primary-lifted); color: #fff; }
.btn-primary:active, .btn-primary:not(:disabled):not(.disabled):active { background: var(--primary-accented); border-color: var(--primary-accented); }
.btn:disabled, .btn.disabled { opacity: .55; cursor: not-allowed; }

/* O Nexus 9 escurece o .btn-success na barra lateral e nos paineis (seletores body ...); aqui volta para a cor da marca. */
.btn-success, body.ch-body .sidebar .btn-success, body.ch-body .primary-content .client-home-cards .card .btn-success { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-success:hover, .btn-success:focus, body.ch-body .sidebar .btn-success:hover, body.ch-body .primary-content .client-home-cards .card .btn-success:hover { background: var(--primary-lifted); border-color: var(--primary-lifted); color: #fff; }

/* Barra lateral secundaria do Nexus (so abaixo de 992px): ocupa a linha inteira */
.sidebar.sidebar-secondary { flex: 0 0 100%; max-width: 100%; padding: 0 15px; }

/* Cards */
.card { border: 1px solid var(--border-muted); border-radius: var(--rounding-lg); box-shadow: var(--ch-shadow-sm); }
.card-header { background: transparent; border-bottom: 1px solid var(--border-muted); }

/* Telas de acesso (login, redefinicao de senha, 2FA): painel da marca + cartao */
.ch-authbrand {
    background: var(--neutral-900); color: #d9e2e8; font-family: var(--ch-font-body);
    padding: 1.25rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.ch-authbrand__logo img { display: block; height: 30px; width: auto; }
.ch-authbrand__body, .ch-authbrand__back { display: none; }
.ch-authbrand__eyebrow { color: var(--primary-400); font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 .75rem; }
.ch-authbrand__title { font-family: var(--ch-font-display); font-size: 2rem; line-height: 1.2; font-weight: 600; color: #fff; margin: 0 0 2rem; max-width: 22ch; }
.ch-authbrand__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.ch-authbrand__list li { display: flex; gap: .85rem; align-items: flex-start; font-size: .92rem; line-height: 1.45; color: #c3cfd7; }
.ch-authbrand__list i { color: var(--primary-400); font-size: 1.1rem; margin-top: .15rem; }
.ch-authbrand__list strong { display: block; color: #fff; font-weight: 600; }
.ch-authbrand__back { color: #c3cfd7; font-size: .85rem; }
.ch-authbrand__back:hover { color: #fff; }
.ch-auth .ch-shell { display: flex; flex-direction: column; }
.ch-auth .ch-main { margin-left: 0; flex: 1; min-height: 0; }
.ch-auth #main-body { padding: 1.5rem 0 2rem; }
@media (min-width: 992px) {
    .ch-authbrand {
        position: fixed; inset: 0 auto 0 0; width: 42%; max-width: 560px; z-index: 10;
        flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 2.5rem 3rem;
    }
    .ch-authbrand__body { display: block; }
    .ch-authbrand__back { display: inline-flex; align-items: center; gap: .5rem; }
    .ch-auth .ch-main { margin-left: min(42%, 560px); min-height: 100vh; display: flex; flex-direction: column; }
    .ch-auth #main-body { flex: 1; display: flex; align-items: center; padding: 3rem 0; }
    .ch-auth #main-body > .container { width: 100%; }
}
.ch-authcard, .ch-auth #main-body .card.mw-540 {
    max-width: 440px; width: 100%; margin: 0 auto; background: #fff;
    border: 1px solid var(--border-muted); border-radius: var(--rounding-lg); box-shadow: var(--ch-shadow-md);
}
.ch-authcard { padding: 2rem 1.5rem; }
.ch-auth #main-body .card.mw-540 > .card-body { padding: 2rem 1.5rem; }
@media (min-width: 576px) {
    .ch-authcard, .ch-auth #main-body .card.mw-540 > .card-body { padding: 2.5rem 2.25rem; }
}
.ch-authcard__head { margin-bottom: 1.5rem; }
.ch-authcard__title, .ch-auth #main-body .card.mw-540 .h3, .ch-auth #main-body .card.mw-540 .card-title {
    font-family: var(--ch-font-display); font-size: 1.6rem; font-weight: 600; color: var(--neutral-900); margin: 0 0 .35rem;
}
.ch-authcard__lead { color: var(--text-muted); margin: 0; }
.ch-authcard__alt { text-align: center; margin: 1.5rem 0 0; color: var(--text-muted); font-size: .92rem; }
.ch-authcard__alt a, .ch-link-sm { color: var(--primary); font-weight: 600; }
.ch-link-sm { font-size: .85rem; }
.ch-authcard .form-control-label { font-weight: 600; color: var(--neutral-800); }

/* Campo com icone (e botao opcional a direita) */
.ch-field { position: relative; display: flex; align-items: stretch; flex-wrap: nowrap; width: 100%; }
.ch-field__icon { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--neutral-500); pointer-events: none; z-index: 4; }
.ch-field > .form-control { padding-left: 2.6rem; height: calc(1.5em + 1.5rem); border-radius: var(--rounding-md) !important; }
.ch-field > .form-control:focus { border-color: var(--primary-600); box-shadow: 0 0 0 3px rgba(13, 143, 107, .18); }
.ch-field__btn {
    position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); z-index: 4;
    background: transparent; border: 0; color: var(--neutral-600); padding: .4rem .65rem; font-weight: 400;
}
.ch-field__btn:hover { color: var(--neutral-900); }
.ch-field:has(.ch-field__btn) > .form-control { padding-right: 2.75rem; }

/* Cadastro (clientregister.tpl do Nexus, so apresentacao) */
#registration .card-title { font-family: var(--ch-font-display); font-weight: 600; color: var(--neutral-900); }
#registration .card-body { padding: 1.75rem; }
#registration .form-control { height: calc(1.5em + 1.25rem); border-radius: var(--rounding-md); }
#registration .form-control:focus { border-color: var(--primary-600); box-shadow: 0 0 0 3px rgba(13, 143, 107, .18); }
#registration .field-icon { color: var(--neutral-500); }
#registration .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success { background: var(--primary); color: #fff; }
#registration .btn-primary[type=submit] { min-width: 14rem; }

/* Dashboard (clientareahome.tpl) */
.ch-dash-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.ch-dash-head__title { font-family: var(--ch-font-display); font-size: 1.75rem; font-weight: 600; color: var(--neutral-900); margin: 0 0 .25rem; }
.ch-dash-head__lead { color: var(--text-muted); margin: 0; }
.ch-dash-credit { display: flex; flex-direction: column; align-items: flex-end; padding: .6rem 1rem; background: var(--primary-50); border: 1px solid var(--primary-100); border-radius: var(--rounding-md); }
.ch-dash-credit span { font-size: .78rem; color: var(--neutral-600); }
.ch-dash-credit strong { font-family: var(--ch-font-display); font-size: 1.15rem; color: var(--primary-800); }

.ch-notice {
    display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; padding: .9rem 1.1rem; margin-bottom: 1.25rem;
    border: 1px solid; border-radius: var(--rounding-lg); background: #fff;
}
.ch-notice > i { font-size: 1.25rem; }
.ch-notice__text { flex: 1 1 14rem; color: var(--neutral-800); }
.ch-notice--danger { border-color: #f1c4c4; background: #fdf3f3; }
.ch-notice--danger > i { color: #b42318; }
.ch-notice--warning { border-color: #f3dfb0; background: #fdf8ec; }
.ch-notice--warning > i { color: #93600a; }

.ch-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
@media (min-width: 1200px) { .ch-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } }
.ch-kpi {
    position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icon label" "value value" "meta meta";
    align-items: center; gap: .35rem .65rem; padding: 1rem 1.1rem; background: #fff; color: var(--neutral-900);
    border: 1px solid var(--border-muted); border-radius: var(--rounding-lg); box-shadow: var(--ch-shadow-sm);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ch-kpi:hover, .ch-kpi:focus-visible { text-decoration: none; color: var(--neutral-900); border-color: var(--primary-300); box-shadow: var(--ch-shadow-md); transform: translateY(-1px); }
.ch-kpi__icon { grid-area: icon; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--rounding-md); background: var(--primary-50); color: var(--primary-700); }
.ch-kpi__label { grid-area: label; font-size: .85rem; font-weight: 600; color: var(--neutral-600); min-width: 0; overflow-wrap: anywhere; }
.ch-kpi__value { grid-area: value; font-family: var(--ch-font-display); font-size: 1.9rem; font-weight: 600; line-height: 1.1; margin-top: .35rem; }
.ch-kpi__meta { grid-area: meta; font-size: .8rem; color: var(--text-muted); min-width: 0; overflow-wrap: anywhere; }
.ch-kpi--warning .ch-kpi__icon { background: #fdf3dc; color: #93600a; }
.ch-kpi--danger .ch-kpi__icon { background: #fde8e8; color: #b42318; }
.ch-kpi--danger { border-color: #f1c4c4; }

.ch-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-bottom: 1.5rem; }
@media (min-width: 768px) { .ch-quick { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ch-quick__item {
    display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; background: #fff; color: var(--neutral-800); font-weight: 600; font-size: .9rem;
    border: 1px solid var(--border-muted); border-radius: var(--rounding-md);
}
.ch-quick__item i { color: var(--primary-700); width: 1.1rem; text-align: center; }
.ch-quick__item:hover, .ch-quick__item:focus-visible { text-decoration: none; color: var(--primary-800); border-color: var(--primary-300); background: var(--primary-50); }

.ch-panels .card { margin-bottom: 1.25rem; overflow: hidden; }
.ch-panels .card-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .9rem 1.1rem; }
.ch-panels .card-title { display: flex; align-items: center; gap: .5rem; font-family: var(--ch-font-display); font-size: 1.02rem; font-weight: 600; color: var(--neutral-900); }
.ch-panels .card-title i { color: var(--primary-700); }
.ch-panels .card-title .badge { background: var(--neutral-100); color: var(--neutral-700); font-weight: 600; }
.ch-panels .list-group-item { border-left: 0; border-right: 0; padding: .75rem 1.1rem; font-size: .9rem; }
.ch-panels .list-group-item:first-child { border-top: 0; }
.ch-panels .card-footer { background: transparent; border-top: 1px solid var(--border-muted); font-size: .85rem; }
.ch-panels .card-footer:empty { display: none; }
body.ch-body .primary-content .ch-panels .card .card-body { padding: 0; }
.ch-panels .card-body > p { margin: 0; padding: 1rem 1.1rem; color: var(--neutral-700); }
body.ch-body .primary-content .client-home-cards .card .card-header .btn.ch-panel-btn {
    flex-shrink: 0; border: 1px solid var(--primary-300); color: var(--primary); background: #fff; font-size: .8rem; padding: .3rem .7rem; white-space: nowrap;
}
body.ch-body .primary-content .client-home-cards .card .card-header .btn.ch-panel-btn:hover, body.ch-body .primary-content .client-home-cards .card .card-header .btn.ch-panel-btn:focus { background: var(--primary); border-color: var(--primary); color: #fff; }
body.ch-body .primary-content .ch-panels .card .card-footer { padding: .6rem 1.1rem; }
body.ch-body .primary-content .ch-panels .card .list-group .list-group-item { padding: .75rem 1.1rem; }
body.ch-body #main-body .btn-outline-primary { color: var(--primary); border-color: var(--primary-300); }
body.ch-body #main-body .btn-outline-primary:hover, body.ch-body #main-body .btn-outline-primary:focus { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Cabecalho de pagina (includes/ch-pagehead.tpl) */
.ch-pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 1rem; margin-bottom: 1.25rem; }
.ch-pagehead__title { font-family: var(--ch-font-display); font-size: 1.6rem; font-weight: 600; color: var(--neutral-900); margin: 0 0 .2rem; }
.ch-pagehead__lead { color: var(--text-muted); margin: 0; }
.ch-pagehead__action { white-space: nowrap; }

/* Status (servicos, faturas, tickets): pilula com ponto */
body.ch-body .label.status {
    display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .65rem; border-radius: 999px;
    font-size: .78rem; font-weight: 600; line-height: 1.4; white-space: nowrap; border: 1px solid transparent;
    background: var(--neutral-100); color: var(--neutral-700);
}
body.ch-body .label.status::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
body.ch-body .label.status-active, body.ch-body .label.status-paid, body.ch-body .label.status-completed, body.ch-body .label.status-accepted,
body.ch-body .label.status-answered, body.ch-body .label.status-delivered { background: #e3f6ee; color: #066b50; }
body.ch-body .label.status-pending, body.ch-body .label.status-unpaid, body.ch-body .label.status-payment-pending, body.ch-body .label.status-customer-reply,
body.ch-body .label.status-grace, body.ch-body .label.status-inprogress, body.ch-body .label.status-onhold, body.ch-body .label.status-pending-registration,
body.ch-body .label.status-pending-transfer { background: #fdf3dc; color: #8a5a06; }
body.ch-body .label.status-suspended, body.ch-body .label.status-overdue, body.ch-body .label.status-collections, body.ch-body .label.status-fraud,
body.ch-body .label.status-redemption { background: #fde8e8; color: #a8200d; }
body.ch-body .label.status-open { background: #e6f0fa; color: #1d4f86; }
body.ch-body .label.status-cancelled, body.ch-body .label.status-terminated, body.ch-body .label.status-closed, body.ch-body .label.status-refunded,
body.ch-body .label.status-expired, body.ch-body .label.status-dead, body.ch-body .label.status-lost, body.ch-body .label.status-transferred-away { background: var(--neutral-100); color: var(--neutral-700); }

/* Tabelas de lista (DataTables do Nexus) */
body.ch-body .dataTables_wrapper .listtable { background: #fff; border: 1px solid var(--border-muted); border-radius: var(--rounding-lg); box-shadow: var(--ch-shadow-sm); overflow: hidden; }
body.ch-body .dataTables_wrapper .dataTables_filter { padding: .9rem 1.1rem .5rem; margin: 0; float: none; text-align: left; }
body.ch-body .dataTables_wrapper .dataTables_filter label { width: 100%; margin: 0; }
body.ch-body .dataTables_wrapper .dataTables_filter label .form-control { width: 100%; max-width: 320px; margin: 0; border-radius: 999px; padding-left: 2.4rem; }
body.ch-body .dataTables_wrapper .dataTables_filter::after { left: calc(1.1rem + .9rem); top: calc(50% + .2rem); color: var(--neutral-500); }
body.ch-body .dataTables_wrapper .dataTables_info { padding: 0 1.1rem .6rem; font-size: .82rem; color: var(--text-muted); float: none; }
body.ch-body .dataTables_wrapper table.table-list { margin: 0 !important; border: 0; width: 100% !important; }
body.ch-body .dataTables_wrapper table.table-list thead th {
    background: var(--neutral-50); color: var(--neutral-600); font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    padding: .7rem 1rem; border-top: 1px solid var(--border-muted) !important; border-bottom: 1px solid var(--border-muted) !important; vertical-align: middle;
}
body.ch-body .dataTables_wrapper table.table-list thead th, body.ch-body .dataTables_wrapper table.table-list tr td { border-radius: 0 !important; }
body.ch-body .dataTables_wrapper table.table-list td { padding: .85rem 1rem; vertical-align: middle; border-top: 1px solid var(--border-muted); font-size: .9rem; }
body.ch-body .dataTables_wrapper table.table-list tbody tr { cursor: pointer; transition: background .12s ease; }
body.ch-body .dataTables_wrapper table.table-list tbody tr:hover td { background: var(--primary-50); }
body.ch-body .dataTables_wrapper table.table-list td.dataTables_empty { padding: 2rem 1rem; color: var(--text-muted); cursor: default; }
body.ch-body .dataTables_wrapper .dataTables_length, body.ch-body .dataTables_wrapper .dataTables_paginate { margin-top: .9rem; font-size: .85rem; }
body.ch-body .dataTables_wrapper .pagination .page-link { color: var(--primary); }
body.ch-body .dataTables_wrapper .pagination .page-item.active .page-link { background: var(--primary); border-color: var(--primary); color: #fff; }
.ch-table td.ch-cell-main { text-align: left !important; }
.ch-cell-title { display: block; font-weight: 600; color: var(--neutral-900); }
.ch-cell-title:hover { color: var(--primary); }
.ch-cell-sub { display: block; font-size: .82rem; color: var(--text-muted); overflow-wrap: anywhere; }

/* Abaixo de 768px: cada linha vira um cartao, com o rotulo vindo de data-label */
@media (max-width: 767.98px) {
    body.ch-body .dataTables_wrapper .dataTables_filter label .form-control { max-width: none; }
    body.ch-body .dataTables_wrapper table.ch-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    body.ch-body .dataTables_wrapper table.ch-table, body.ch-body .dataTables_wrapper table.ch-table tbody { display: block; }
    body.ch-body .dataTables_wrapper table.ch-table tbody tr { display: flex; flex-direction: column; padding: .85rem 1.1rem; border-top: 1px solid var(--border-muted); }
    body.ch-body .dataTables_wrapper table.ch-table tbody td.ch-cell-main { order: -1; }
    body.ch-body .dataTables_wrapper table.ch-table tbody td { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: .35rem; padding: .25rem 0; border: 0; text-align: right !important; }
    body.ch-body .dataTables_wrapper table.ch-table tbody td[data-label]::before { content: attr(data-label); color: var(--text-muted); font-size: .8rem; text-align: left; margin-right: auto; }
    body.ch-body .dataTables_wrapper table.ch-table tbody td.ch-cell-main { display: block; padding-bottom: .4rem; text-align: left !important; }
    body.ch-body .dataTables_wrapper table.ch-table tbody td.ch-cell-main::before { display: none; }
    body.ch-body .dataTables_wrapper table.ch-table tbody td.ch-cell-ssl:empty, body.ch-body .dataTables_wrapper table.ch-table tbody td.ch-cell-ssl:not(:has(img)) { display: none; }
    body.ch-body .dataTables_wrapper table.ch-table tbody td.dataTables_empty { display: block; text-align: center !important; }
    body.ch-body .dataTables_wrapper table.ch-table tbody tr:hover td { background: transparent; }
    body.ch-body .dataTables_wrapper .dataTables_length { float: none; }
    body.ch-body .dataTables_wrapper .dataTables_paginate { float: none; display: flex; justify-content: center; }
}

/* Tickets: lista */
.ch-ticket-link .ticket-number { display: block; font-size: .78rem; font-weight: 600; color: var(--text-muted); }
.ch-ticket-link .ticket-subject { display: block; color: var(--neutral-900); }
.ch-ticket-link.is-unread .ticket-subject { font-weight: 700; }
.ch-ticket-link.is-unread .ticket-number::after { content: ""; display: inline-block; width: .45rem; height: .45rem; margin-left: .4rem; border-radius: 50%; background: var(--primary-600); vertical-align: middle; }
body.ch-body .label.status.status-custom { color: #fff; }
body.ch-body .label.status.status-custom::before { background: rgba(255, 255, 255, .85); }

/* Tickets: conversa (viewticket.tpl do Nexus, so CSS). Cliente neutro; equipe com faixa e fundo da marca. */
body.ch-body .view-ticket .ticket-reply { border-left: 3px solid var(--neutral-300); }
body.ch-body .view-ticket .ticket-reply .posted-by { background: var(--neutral-50); color: var(--neutral-600); border-radius: 0; }
body.ch-body .view-ticket .ticket-reply .posted-by .posted-by-name { color: var(--neutral-900); }
body.ch-body .view-ticket .ticket-reply.staff { border-left-color: var(--primary-600); background: #f5fbf8; }
body.ch-body .view-ticket .ticket-reply.staff .posted-by { background: var(--primary-50); color: var(--primary-900); }
body.ch-body .view-ticket .ticket-reply.staff .posted-by .posted-by-name { color: var(--primary-900); }
body.ch-body .view-ticket .requestor-badge { border-radius: 999px; font-weight: 600; }
body.ch-body .view-ticket .attachments { border-top-color: var(--border); }

/* Formularios: foco na cor da marca */
body.ch-body .form-control:focus, body.ch-body .custom-select:focus { border-color: var(--primary-600); box-shadow: 0 0 0 3px rgba(13, 143, 107, .18); }
body.ch-body .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--primary); border-color: var(--primary); }
body.ch-body input[type=checkbox], body.ch-body input[type=radio] { accent-color: var(--primary); }

/* Detalhe do servico (clientareaproductdetails.tpl do Nexus, so CSS) */
body.ch-body .product-details .product-status { background: #fff; border: 1px solid var(--border-muted); border-radius: var(--rounding-lg); overflow: hidden; }
body.ch-body div.product-details div.product-icon {
    display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icone nome" "icone grupo"; align-items: center; column-gap: 1rem;
    text-align: left !important; padding: 1.25rem; background: var(--neutral-50); font-size: 1rem; line-height: 1.3; border-radius: 0;
}
body.ch-body div.product-details div.product-icon .fa-stack { grid-area: icone; font-size: 1.35rem; }
body.ch-body div.product-details div.product-icon .fa-stack .fa-stack-2x { color: var(--primary-700); }
body.ch-body div.product-details div.product-icon h3 { grid-area: nome; font-family: var(--ch-font-display); font-size: 1.3rem; font-weight: 600; color: var(--neutral-900); margin: 0; }
body.ch-body div.product-details div.product-icon h4 { grid-area: grupo; font-size: .85rem; font-weight: 500; color: var(--text-muted); margin: 0; }
body.ch-body .product-details .product-status-text {
    display: flex; align-items: center; gap: .45rem; padding: .6rem 1.25rem; font-size: .8rem; font-weight: 600; letter-spacing: .04em;
    background: var(--neutral-100); color: var(--neutral-700); border-top: 1px solid var(--border-muted);
}
body.ch-body .product-details .product-status-text::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
body.ch-body .product-details .product-status-active .product-status-text { background: #e3f6ee; color: #066b50; }
body.ch-body .product-details .product-status-pending .product-status-text { background: #fdf3dc; color: #8a5a06; }
body.ch-body .product-details .product-status-suspended .product-status-text, body.ch-body .product-details .product-status-fraud .product-status-text { background: #fde8e8; color: #a8200d; }
/* Coluna de datas e valores: rotulo (h4) + valor (texto) viram uma lista em duas colunas */
body.ch-body .product-details .row > .col-md-6.text-center {
    display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); align-content: start; gap: .55rem 1.25rem; text-align: left !important;
    padding-top: .25rem; font-size: .92rem; color: var(--neutral-900); font-variant-numeric: tabular-nums;
}
body.ch-body .product-details .row > .col-md-6.text-center > h4 { margin: 0; font-family: var(--ch-font-body); font-size: .8rem; font-weight: 600; color: var(--text-muted); align-self: center; }
@media (max-width: 767.98px) { body.ch-body .product-details .row > .col-md-6.text-center { margin-top: 1.25rem; } }
/* Abas de informacao do servidor e area do modulo */
body.ch-body div.product-details-tab-container { border-color: var(--border-muted); border-radius: 0 0 var(--rounding-lg) var(--rounding-lg); padding: 1.25rem; }
body.ch-body .product-details-tab-container .col-sm-5 { color: var(--text-muted); font-weight: 600; font-size: .85rem; }
body.ch-body .product-details-tab-container .col-sm-7 { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@media (max-width: 575.98px) { body.ch-body .product-details-tab-container .col-sm-5 { text-align: left !important; margin-top: .5rem; } }
body.ch-body .module-client-area { padding: 1rem 0 0; }
body.ch-body #virtualizor_manager { border-radius: var(--rounding-lg); margin-top: 1rem; }
/* Com o painel carregado (body.ch-virt-ok, conectehost.js), os botoes de energia/VNC da barra lateral e a tabela
 * host/IP acima do painel repetem o que ele mostra. Alterar senha e Cancelar ficam. */
body.ch-virt-ok #Primary_Sidebar-Service_Details_Actions-Custom_Module_Button_Start_VPS,
body.ch-virt-ok #Primary_Sidebar-Service_Details_Actions-Custom_Module_Button_Reboot_VPS,
body.ch-virt-ok #Primary_Sidebar-Service_Details_Actions-Custom_Module_Button_Stop_VPS,
body.ch-virt-ok #Primary_Sidebar-Service_Details_Actions-Custom_Module_Button_Poweroff_VPS,
body.ch-virt-ok #Primary_Sidebar-Service_Details_Actions-Custom_Module_Button_Launch_VNC,
body.ch-virt-ok #domain > .row:has(~ .module-client-area) { display: none !important; }

/* Configuracao do produto (cart.php?a=confproduct): seletor de SO e campos do servidor (js/conectehost.js) */
.ch-os {
    margin: 1.75rem 0 2rem; padding: 1.5rem; background: var(--white); border: 1px solid var(--neutral-200);
    border-radius: var(--rounding-lg); box-shadow: var(--ch-shadow-sm);
}
.ch-os__title { font-size: 1.375rem; font-weight: 600; margin: 0 0 .25rem; }
.ch-os__lead { color: var(--neutral-600); margin: 0 0 1.25rem; font-size: .9375rem; }
.ch-os__selected {
    display: flex; align-items: center; gap: .875rem; padding: .875rem 1rem; margin-bottom: 1.25rem;
    background: var(--primary-50); border: 1px solid var(--primary-200); border-radius: var(--rounding-md);
}
.ch-os__selected-logo { width: 2.5rem; height: 2.5rem; object-fit: contain; padding: .35rem; background: var(--white); border-radius: var(--rounding-md); flex: none; }
.ch-os__selected-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.ch-os__selected-label { font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--primary-800); }
.ch-os__selected-text strong { font-family: var(--ch-font-display); font-size: 1.0625rem; font-weight: 600; color: var(--neutral-900); }
.ch-os__selected-meta { font-size: .8125rem; color: var(--neutral-600); }
.ch-os__selected-check { color: var(--primary-600); font-size: 1.25rem; }
.ch-os__search { position: relative; margin-bottom: .875rem; }
.ch-os__search i { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); color: var(--neutral-500); pointer-events: none; z-index: 2; }
body.ch-body .ch-os__search .form-control { padding-left: 2.6rem; height: calc(1.5em + 1.4rem); border-radius: var(--rounding-md); }
.ch-os__pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.ch-os__pill {
    border: 1px solid var(--neutral-300); background: var(--white); color: var(--neutral-800); font-weight: 600; font-size: .875rem;
    padding: .45rem 1rem; border-radius: 999px; transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.ch-os__pill:hover { border-color: var(--primary-600); color: var(--primary-800); }
.ch-os__pill.is-active { background: var(--primary); border-color: var(--primary); color: var(--white); }
.ch-os__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: .75rem; }
.ch-os__card {
    position: relative; display: flex; align-items: flex-start; gap: .875rem; width: 100%; text-align: left;
    padding: 1rem 2.75rem 1rem 1rem; background: var(--white); border: 1px solid var(--neutral-200); border-radius: var(--rounding-md);
    color: inherit; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease, background-color .15s ease;
}
.ch-os__card[hidden] { display: none; }
.ch-os__card:focus:not(:focus-visible), .ch-os__pill:focus:not(:focus-visible), .ch-os__chip:focus:not(:focus-visible), .ch-pw__btn:focus:not(:focus-visible) { outline: none; }
.ch-os__card:hover { border-color: var(--primary-300); box-shadow: var(--ch-shadow-md); transform: translateY(-1px); }
.ch-os__card.is-selected { border-color: var(--primary-600); background: var(--primary-50); box-shadow: 0 0 0 1px var(--primary-600); }
.ch-os__logo { width: 2.5rem; height: 2.5rem; object-fit: contain; flex: none; padding: .3rem; background: var(--neutral-50); border-radius: var(--rounding-md); }
.ch-os__card.is-selected .ch-os__logo { background: var(--white); }
.ch-os__card-text { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.ch-os__name { font-family: var(--ch-font-display); font-weight: 600; font-size: 1rem; color: var(--neutral-900); }
.ch-os__desc { font-size: .8125rem; line-height: 1.45; color: var(--neutral-600); }
.ch-os__count { font-size: .75rem; color: var(--neutral-500); margin-top: .1rem; }
.ch-os__check {
    position: absolute; top: .875rem; right: .875rem; width: 1.375rem; height: 1.375rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: .7rem; color: transparent;
    border: 1.5px solid var(--neutral-300); transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.ch-os__card.is-selected .ch-os__check { background: var(--primary); border-color: var(--primary); color: var(--white); }
.ch-os__empty { color: var(--neutral-600); margin: .5rem 0 0; }
.ch-os__versions { margin-top: 1.25rem; padding-top: 1.125rem; border-top: 1px solid var(--neutral-100); }
.ch-os__versions[hidden] { display: none; }
.ch-os__versions-label { display: block; font-weight: 600; font-size: .875rem; color: var(--neutral-800); margin-bottom: .625rem; }
.ch-os__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.ch-os__chip {
    min-width: 4.5rem; padding: .5rem .875rem; border: 1px solid var(--neutral-300); border-radius: var(--rounding-md);
    background: var(--white); color: var(--neutral-800); font-weight: 600; font-size: .875rem; font-variant-numeric: tabular-nums;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.ch-os__chip:hover { border-color: var(--primary-600); color: var(--primary-800); }
.ch-os__chip.is-selected { background: var(--primary); border-color: var(--primary); color: var(--white); }
.ch-req { color: #c0392b; }
.ch-help { display: block; margin-top: .375rem; font-size: .8125rem; color: var(--neutral-600); }
/* Cartao "Configurar servidor" (etapa 1) e etapa numerada nos titulos */
.ch-srv {
    margin: 1.75rem 0 0; padding: 1.5rem; background: var(--white); border: 1px solid var(--neutral-200);
    border-radius: var(--rounding-lg); box-shadow: var(--ch-shadow-sm);
}
.ch-srv + .ch-os { margin-top: 1.25rem; }
.ch-srv__head { margin-bottom: 1.25rem; }
.ch-srv__title { display: flex; align-items: center; gap: .625rem; font-size: 1.375rem; font-weight: 600; margin: 0 0 .25rem; }
.ch-os__title { display: flex; align-items: center; gap: .625rem; }
.ch-srv__lead { color: var(--neutral-600); margin: 0; font-size: .9375rem; }
.ch-step {
    flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem;
    border-radius: 50%; background: var(--primary-100); color: var(--primary-800); font-family: var(--ch-font-display); font-size: .9375rem; font-weight: 600;
}
.ch-srv .field-container > .row { margin-left: -.625rem; margin-right: -.625rem; }
.ch-srv .field-container > .row > [class*="col-"] { padding-left: .625rem; padding-right: .625rem; }
body.ch-body #order-standard_cart .ch-srv .form-group, body.ch-body #order-standard_cart .ch-srv .field-container { margin-bottom: 0; }
@media (max-width: 575.98px) {
    .ch-srv { padding: 1.125rem; }
    .ch-os__selected .ch-os__selected-check { display: none; }
    .ch-os__selected .ch-os__change { flex-basis: 100%; }
    .ch-srv .field-container > .row > [class*="col-"] + [class*="col-"] { margin-top: 1.25rem; }
}
.ch-labelrow { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .45rem; min-height: 1.75rem; }
body.ch-body .ch-labelrow label { margin: 0; font-weight: 600; font-size: .875rem; color: var(--neutral-800); }
.ch-input { position: relative; }
.ch-input__icon { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); color: var(--neutral-500); pointer-events: none; z-index: 2; }
body.ch-body .ch-input > .form-control { padding-left: 2.6rem; height: calc(1.5em + 1.4rem); border-radius: var(--rounding-md); }
body.ch-body .ch-input > .form-control::placeholder { color: var(--neutral-400); }
.ch-pw { position: relative; }
body.ch-body .ch-pw > .form-control { padding-right: 2.75rem; font-variant-ligatures: none; }
.ch-pw__btn {
    position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); background: transparent; border: 0;
    color: var(--neutral-600); padding: .4rem .65rem; z-index: 2;
}
.ch-pw__btn:hover { color: var(--neutral-900); }
.ch-pw__gen {
    display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .65rem; border: 1px solid var(--primary-200);
    border-radius: 999px; background: var(--primary-50); color: var(--primary-800); font-weight: 600; font-size: .75rem; white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease;
}
.ch-pw__gen:hover { background: var(--primary-100); border-color: var(--primary-300); color: var(--primary-900); }
.ch-pw__gen:focus:not(:focus-visible) { outline: none; }
@media (max-width: 575.98px) {
    .ch-os { padding: 1.125rem; }
    .ch-os__grid { grid-template-columns: 1fr; }
}
.ch-os__selected { flex-wrap: wrap; }
.ch-os__change {
    flex: none; padding: .4rem .8rem; border: 1px solid var(--primary-300); border-radius: var(--rounding-md);
    background: var(--white); color: var(--primary-800); font-weight: 600; font-size: .8125rem;
    transition: background-color .15s ease, border-color .15s ease;
}
.ch-os__change:hover { background: var(--primary-100); border-color: var(--primary-600); }
.ch-os__change[hidden] { display: none; }
.ch-os__change:focus:not(:focus-visible) { outline: none; }

/* Janela de versao do SO (<dialog>) */
.ch-osdlg {
    width: min(30rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 0; border: 0;
    border-radius: var(--rounding-lg); background: var(--white); color: var(--text); box-shadow: 0 24px 60px -20px rgba(8, 18, 26, .45);
}
.ch-osdlg::backdrop { background: rgba(8, 18, 26, .55); }
.ch-osdlg[open] { animation: ch-osdlg-in .18s var(--ch-ease); }
@keyframes ch-osdlg-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
html:has(.ch-osdlg[open]) { overflow: hidden; }
.ch-osdlg__box { display: flex; flex-direction: column; max-height: calc(100vh - 2rem); }
.ch-osdlg__head { display: flex; align-items: flex-start; gap: .875rem; padding: 1.25rem 1.25rem 1rem; border-bottom: 1px solid var(--neutral-100); }
.ch-osdlg__logo { width: 3rem; height: 3rem; object-fit: contain; padding: .4rem; background: var(--neutral-50); border-radius: var(--rounding-md); flex: none; }
.ch-osdlg__intro { flex: 1; min-width: 0; }
.ch-osdlg__title { font-size: 1.25rem; font-weight: 600; margin: .1rem 0 .2rem; }
.ch-osdlg__desc { font-size: .875rem; color: var(--neutral-600); margin: 0; line-height: 1.45; }
.ch-osdlg__close {
    flex: none; width: 2.25rem; height: 2.25rem; margin: -.25rem -.25rem 0 0; border: 0; border-radius: 50%;
    background: transparent; color: var(--neutral-600); font-size: 1.125rem;
}
.ch-osdlg__close:hover { background: var(--neutral-100); color: var(--neutral-900); }
.ch-osdlg__body { margin: 0; padding: 1rem 1.25rem; border: 0; overflow-y: auto; min-width: 0; }
/* legend flutuante: sai da borda do fieldset e respeita o padding */
.ch-osdlg__legend { float: left; width: 100%; font-size: .875rem; font-weight: 600; color: var(--neutral-800); margin: 0 0 .625rem; padding: 0; }
.ch-osdlg__legend + .ch-osdlg__list { clear: both; }
.ch-osdlg__list { display: flex; flex-direction: column; gap: .5rem; }
.ch-osdlg__opt {
    position: relative; display: flex; align-items: center; gap: .75rem; margin: 0; padding: .8rem 1rem; cursor: pointer;
    border: 1px solid var(--neutral-200); border-radius: var(--rounding-md); background: var(--white);
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.ch-osdlg__opt:hover { border-color: var(--primary-300); }
.ch-osdlg__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ch-osdlg__opt:has(input:checked) { border-color: var(--primary-600); background: var(--primary-50); box-shadow: 0 0 0 1px var(--primary-600); }
.ch-osdlg__opt:has(input:focus-visible) { outline: 2px solid var(--primary-600); outline-offset: 2px; }
.ch-osdlg__opt-text { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .6rem; flex: 1; min-width: 0; }
.ch-osdlg__ver { font-family: var(--ch-font-display); font-weight: 600; font-size: 1rem; color: var(--neutral-900); font-variant-numeric: tabular-nums; }
.ch-osdlg__meta { font-size: .8125rem; color: var(--neutral-600); }
.ch-osdlg__tag { font-size: .6875rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--primary-800); background: var(--primary-100); border-radius: 999px; padding: .1rem .5rem; }
.ch-osdlg__mark {
    flex: none; width: 1.375rem; height: 1.375rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: .7rem; color: transparent; border: 1.5px solid var(--neutral-300);
}
.ch-osdlg__opt:has(input:checked) .ch-osdlg__mark { background: var(--primary); border-color: var(--primary); color: var(--white); }
.ch-osdlg__foot { display: flex; justify-content: flex-end; gap: .5rem; padding: 1rem 1.25rem; border-top: 1px solid var(--neutral-100); }
body.ch-body .ch-osdlg__foot .btn { min-width: 7rem; font-weight: 600; border-radius: var(--rounding-md); }
body.ch-body .ch-osdlg__cancel { background: var(--white); border: 1px solid var(--neutral-300); color: var(--neutral-800); }
body.ch-body .ch-osdlg__cancel:hover { background: var(--neutral-50); }
@media (max-width: 575.98px) {
    .ch-osdlg { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: var(--rounding-lg) var(--rounding-lg) 0 0; }
    .ch-osdlg__foot .btn { flex: 1; }
}

/* Carrinho (standard_cart): sem a coluna "Categorias / Acoes" (o menu Loja e o icone do carrinho ja fazem isso);
   conteudo em largura total e resumo do pedido numa coluna propria, acompanhando a rolagem */
body.ch-body #order-standard_cart .cart-sidebar,
body.ch-body #order-standard_cart .sidebar-collapsed { display: none; }
/* O Nexus 9 zera o padding do .cart-body (padding:0!important em theme.css); o .row de dentro (margem -15px) passava 15px da tela */
body.ch-body #order-standard_cart .cart-body { float: none; width: 100%; padding-left: 15px !important; padding-right: 15px !important; }
@media (min-width: 992px) {
    body.ch-body #order-standard_cart .secondary-cart-body { flex: 1 1 0; width: auto; min-width: 0; }
    body.ch-body #order-standard_cart .secondary-cart-sidebar { flex: 0 0 20rem; width: 20rem; max-width: 20rem; }
    body.ch-body #order-standard_cart #orderSummary { position: sticky; top: calc(var(--ch-topbar-h) + 1rem); margin-top: 0 !important; }
}
@media (min-width: 1200px) {
    body.ch-body #order-standard_cart .secondary-cart-sidebar { flex-basis: 22rem; width: 22rem; max-width: 22rem; }
}
@media (max-width: 991.98px) {
    body.ch-body #order-standard_cart .secondary-cart-sidebar { width: 100%; max-width: 32rem; }
}


/* Movimento reduzido */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}