/* ============================================================
   E-Consulters — redesenho da área do cliente sobre o Lagom 2
   Arquivo: templates/lagom2/core/styles/modern/assets/css/custom.css
   Carregado automaticamente pelo Lagom depois do CSS do tema.
   Para desfazer: apagar este arquivo.
   Referência visual: IA-LAGOM/mockup/painel-cliente.html

   Configurações complementares no admin (Addons > RS Themes > Styles):
     - Left Navigation Style ........ Secondary  (menu lateral escuro)
     - Sidebar Account Style ........ Secondary  (cartão da conta escuro)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Chakra+Petch:wght@500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root:not(.lagom-dark-mode) {
    /* ── Neutros (cinza levemente quente) ─────────────────── */
    --gray-base:                    #4a4744;
    --gray-lighter:                 #6d6a66;
    --gray-lighter-2:               #9b9792;
    --gray-lighter-3:               #dcd8d3;
    --gray-lighter-4:               #e7e4e0;
    --gray-faded:                   #f5f4f2;
    --gray-darker:                  #141414;
    --gray-gradient-start:          #f5f4f2;
    --gray-gradient-end:            #faf9f7;
    --body-bg:                      #f5f4f2;

    /* ── Laranja E-Consulters (#ff6600, cor do logo) ──────── */
    --brand-primary:                #ff6600;
    --brand-primary-lighter:        #ff8533;
    --brand-primary-lighter-2:      #ffd1b3;
    --brand-primary-lighter-3:      #ffe3d1;
    --brand-primary-lighter-4:      #fff1e6;
    --brand-primary-darker:         #c24e00;
    --brand-primary-gradient-start: #ff6600;
    --brand-primary-gradient-end:   #f05a00;
    --brand-primary-gradient-h:     linear-gradient(135deg, var(--brand-primary-gradient-start) 0%, var(--brand-primary-gradient-end) 100%);
    --brand-primary-gradient-v:     linear-gradient(135deg, var(--brand-primary-gradient-start) 0%, var(--brand-primary-gradient-end) 100%);

    /* ── Secundária = grafite do site (menu e cartão da conta) */
    --brand-secondary:                  #141414;
    --brand-secondary-lighter:          #2a2a2a;
    --brand-secondary-lighter-2:        #555555;
    --brand-secondary-lighter-3:        #8a8682;
    --brand-secondary-darker:           #0a0a0a;
    --brand-secondary-gradient-start:   #101010;
    --brand-secondary-gradient-end:     #1a1005;
    --brand-secondary-gradient-h:       linear-gradient(135deg, #0d0d0d 0%, #1a1005 55%, #0d0d0d 100%);
    --brand-secondary-gradient-v:       linear-gradient(180deg, #101010 0%, #101010 100%);

    /* ── Ícones e ilustrações ─────────────────────────────── */
    --gray-icons-hover:             #ff6600;
    --svg-illustration-color-0:     #c24e00;
    --svg-illustration-color-1:     #ff6600;
    --svg-illustration-color-2:     #ff8533;
    --svg-illustration-color-3:     #ffb380;
    --svg-illustration-color-4:     #ffb380;
    --svg-illustration-color-5:     #ffd1b3;
    --svg-illustration-color-6:     #ffe3d1;
    --svg-illustration-line-color:  rgba(255, 102, 0, 0.24);

    /* ── Tipografia ───────────────────────────────────────── */
    --font-family-base:             'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-family-monospace:        'JetBrains Mono', Consolas, 'Courier New', monospace;
    --text-heading-color:           #141414;
    --link-color:                   #c24e00;   /* laranja escurecido: legível em fundo branco */
    --link-hover-color:             #ff6600;
    --font-weight-h2:               700;
    --font-weight-h3:               600;
    --font-weight-h4:               600;
    --font-weight-h5:               600;

    /* ── Blocos (cards, painéis, tiles) ───────────────────── */
    --ui-block-bg:                  #ffffff;
    --ui-block-border:              1px solid #e7e4e0;
    --ui-block-border-color:        #e7e4e0;
    --ui-block-shadow:              none;
    --tile-hover-shadow:            0 8px 24px rgba(20, 20, 20, .06);
    --tile-hover-transform:         none;
    --tile-border-color-hover:      #d9d4ce;
    --tile-min-height:              0px;
    --panel-title-font-size:        16px;

    /* ── Cantos (6 / 12 / 20 do site) ─────────────────────── */
    --border-radius-xs:             4px;
    --border-radius-sm:             6px;
    --border-radius-base:           8px;
    --border-radius-lg:             12px;
    --border-radius-xlg:            20px;
    --btn-base-border-radius:       6px;
    --btn-sm-border-radius:         6px;
    --btn-xs-border-radius:         4px;
    --btn-lg-border-radius:         6px;
    --btn-xlg-border-radius:        6px;
    --badge-border-radius:          999px;

    /* ── Topo e navegação ─────────────────────────────────── */
    --app-nav-top-bg:               #ffffff;
    --app-nav-top-border-bottom:    1px solid #e7e4e0;
    --ui-nav-link-hover-color:      #ff6600;
    --ui-nav-link-active-color:     #ff6600;
}

/* Modo escuro do Lagom, caso o seletor de tema seja ativado */
:root {
    --dark-mode-brand-primary:                #ff6600;
    --dark-mode-brand-primary-lighter:        #ff8533;
    --dark-mode-brand-primary-darker:         #e65c00;
    --dark-mode-brand-primary-gradient-start: #ff6600;
    --dark-mode-brand-primary-gradient-end:   #f05a00;
}

/* ── Base ─────────────────────────────────────────────────── */
body, button, input, select, textarea,
.btn, .dropdown-menu, .popover, .tooltip {
    font-family: var(--font-family-base);
}
::selection { background: #ffd1b3; color: #141414; }

/* Números com a fonte técnica que ecoa o "enterprise" do logo */
.tile-stat,
.price, .price-amount,
.invoice-total, .h-amount {
    font-family: 'Chakra Petch', var(--font-family-base);
    font-variant-numeric: tabular-nums;
}

/* ── Menu lateral escuro (Left Navigation Style = Secondary) ─ */
.app-nav-secondary .menu > li.active > a,
.app-nav-secondary .menu > li > a:hover {
    background: linear-gradient(135deg, rgba(255, 102, 0, .18), rgba(255, 102, 0, .06));
    box-shadow: inset 3px 0 0 #ff6600;
    border-radius: 6px;
}
.app-nav-secondary .menu > li.active > a i,
.app-nav-secondary .menu > li.active > a svg { color: #ff8533; }

/* Logo branco no menu escuro, mesmo sem "logo inverse" cadastrado */
.app-nav-secondary .app-nav-header .logo {
    background: url('../img/logo-econsulters-light.png') left center / contain no-repeat;
}
.app-nav-secondary .app-nav-header .logo img { visibility: hidden; }

/* Faixa laranja fina no topo da página */
.app-nav::before {
    content: "";
    display: block;
    height: 3px;
    background: var(--brand-primary-gradient-h);
}

/* ── Cabeçalho do painel como faixa escura (só no dashboard) ─ */
.page-clientareahome .main-header {
    --main-header-title-color:             #ffffff;
    --main-header-breadcrumb-color:        rgba(255, 255, 255, .62);
    --main-header-breadcrumb-color-active: #ff8533;
    --main-header-breadcrumb-color-hover:  #ffffff;
    padding-top: 24px;
    padding-bottom: 8px;
    background: transparent;
}
/* A faixa é desenhada dentro do recuo do .container, alinhada com os cards */
.page-clientareahome .main-header > .container {
    --ec-gutter: var(--layout-left-container-gutter, var(--layout-container-gutter, 15px));
    position: relative;
    padding-top: 28px;
    padding-bottom: 28px;
    padding-left: calc(var(--ec-gutter) + 32px);
    padding-right: calc(var(--ec-gutter) + 32px);
}
.page-clientareahome .main-header > .container::before,
.page-clientareahome .main-header > .container::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--ec-gutter);
    right: var(--ec-gutter);
    border-radius: 20px;
    pointer-events: none;
}
.page-clientareahome .main-header > .container::before {
    background:
        radial-gradient(60% 120% at 100% 0%, rgba(255, 102, 0, .35), transparent 60%),
        linear-gradient(135deg, #0d0d0d 0%, #1a1005 55%, #0d0d0d 100%);
}
.page-clientareahome .main-header > .container::after {
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 28px 28px;
    -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000);
            mask-image: linear-gradient(90deg, transparent 30%, #000);
}
.page-clientareahome .main-header > .container > * { position: relative; z-index: 1; }
.page-clientareahome .main-header-title {
    color: #ffffff;
    letter-spacing: -.02em;
}
.page-clientareahome .main-header-title::before {
    content: "Área do cliente";
    display: block;
    margin-bottom: 8px;
    font: 600 11.5px/1 'Chakra Petch', var(--font-family-base);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #ff8533;
}
.page-clientareahome .main-header .breadcrumb a { color: rgba(255, 255, 255, .62); }
.page-clientareahome .main-header .breadcrumb > .active,
.page-clientareahome .main-header .breadcrumb > li:last-child { color: #ff8533; }

/* ── Tiles (resumo da conta) ──────────────────────────────── */
.tiles .tile {
    padding: 18px 20px;
    text-align: left;
    transition: border-color .15s, box-shadow .15s;
}
.tiles .tile-stat {
    font-size: 38px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.01em;
    color: #141414;
}
.tiles .tile-title {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--gray-lighter);
}
/* Fatura em aberto: tile em destaque */
.tiles .tile:has(.tile-stat.text-danger) {
    border-color: #ffcfa8;
    background: linear-gradient(180deg, #fff1e6, #ffffff 70%);
}
.tiles .tile-stat.text-danger { color: #c24e00 !important; }

/* ── Painéis ──────────────────────────────────────────────── */
.panel .panel-heading { border-bottom: 1px solid #e7e4e0; }
.panel .panel-title { letter-spacing: -.005em; }
.panel .panel-title > i,
.panel .panel-title > .ls { color: #ff6600; }
.list-group-item:hover { background: #fbfaf9; }

/* Status em formato de pílula */
.status, .label {
    border-radius: 999px;
    font-weight: 600;
}

/* ── Aviso de fatura em aberto no topo do painel ──────────── */
.client-home-alerts .alert-warning {
    background: #fdf3dc;
    border: 1px solid #f3dfae;
    border-radius: 12px;
    color: #7a5a1c;
}
.client-home-alerts .alert-warning .alert-icon { color: #b7791f; }

/* ── Botões ───────────────────────────────────────────────── */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
    background: var(--brand-primary-gradient-h);
    border-color: transparent;
    font-weight: 600;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):hover {
    background: var(--brand-primary-darker);
    border-color: transparent;
    box-shadow: 0 6px 24px rgba(255, 102, 0, .3);
}

/* ── Formulários ──────────────────────────────────────────── */
.form-control:focus {
    border-color: #ff8533;
    box-shadow: 0 0 0 3px rgba(255, 102, 0, .16);
}

@media (max-width: 767px) {
    .page-clientareahome .main-header > .container { padding: 22px calc(var(--ec-gutter) + 20px); }
    .page-clientareahome .main-header > .container::before,
    .page-clientareahome .main-header > .container::after { border-radius: 12px; }
    .tiles .tile-stat { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
    .tiles .tile { transition: none; }
}

/* ============================================================
   Painel novo (mockup) — só aparece quando o template inclui
   .ec-hero / .ec-rail-help (hoje: apenas com admin logado)
   ============================================================ */

/* Esconde o cabeçalho padrão: a saudação substitui */
.page-clientareahome:has(.ec-hero) .main-header { display: none; }

/* Grade: herói, aviso e resumo ocupam a largura toda; painéis à esquerda, coluna lateral à direita */
.main-grid:has(.ec-hero) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--main-sidebar-width, 300px);
    column-gap: 24px;
    row-gap: 24px;
    padding-top: 24px;
}
.main-grid:has(.ec-hero) > .main-content { display: contents; }
.main-grid:has(.ec-hero) > .main-content > * { grid-column: 1 / -1; min-width: 0; margin-bottom: 0; }
.main-grid:has(.ec-hero) > .main-content > .client-home-panels { grid-column: 1; order: 10; }
.main-grid:has(.ec-hero) > .main-sidebar { grid-column: 2; order: 11; width: auto; margin: 0; max-width: none; }
@media (max-width: 1199px) {
    .main-grid:has(.ec-hero) { grid-template-columns: minmax(0, 1fr); }
    .main-grid:has(.ec-hero) > .main-content > .client-home-panels,
    .main-grid:has(.ec-hero) > .main-sidebar { grid-column: 1; }
}

/* Herói */
.ec-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 24px;
    padding: 30px 32px;
    border-radius: 20px;
    color: #f1efec;
    background:
        radial-gradient(60% 120% at 100% 0%, rgba(255, 102, 0, .35), transparent 60%),
        linear-gradient(135deg, #0d0d0d 0%, #1a1005 55%, #0d0d0d 100%);
}
.ec-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 28px 28px;
    -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000);
            mask-image: linear-gradient(90deg, transparent 30%, #000);
}
.ec-hero > * { position: relative; z-index: 1; }
.ec-eyebrow {
    font: 600 11.5px/1 'Chakra Petch', var(--font-family-base);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #ff8533;
}
.ec-hero-title {
    margin: 10px 0 6px;
    font: 700 clamp(24px, 3vw, 34px)/1.15 var(--font-family-base);
    letter-spacing: -.02em;
    color: #ffffff;
    text-wrap: balance;
}
.ec-hero-sub { margin: 0; color: #bdb8b2; font-size: 14px; }
.ec-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.ec-hero-actions .btn,
.ec-notice .btn,
.ec-rail-help .btn { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.ec-hero-actions svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.ec-btn-ghost,
.ec-btn-ghost:visited {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .16);
    color: #ffffff;
}
.ec-btn-ghost:hover,
.ec-btn-ghost:focus { background: rgba(255, 255, 255, .12); color: #ffffff; }
.btn-primary { transition: transform .15s, box-shadow .15s, background .15s; }
.btn-primary:hover { transform: translateY(-1px); }

/* Aviso de fatura */
.ec-notice {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    background: #fdf3dc;
    border: 1px solid #f3dfae;
    border-radius: 12px;
}
.ec-notice-icon {
    flex: none;
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: #fbe6b5;
    color: #b7791f;
}
.ec-notice-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.ec-notice-text { min-width: 0; }
.ec-notice-text strong { display: block; font-size: 14.5px; color: #141414; }
.ec-notice-text span { font-size: 13.5px; color: #7a5a1c; }
.ec-notice .btn { margin-left: auto; }

/* Resumo da conta */
.ec-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ec-kpi,
.ec-kpi:visited {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 20px;
    background: #ffffff;
    border: 1px solid #e7e4e0;
    border-radius: 12px;
    color: #141414;
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.ec-kpi:hover,
.ec-kpi:focus {
    color: #141414;
    text-decoration: none;
    border-color: #ffb380;
    box-shadow: 0 10px 28px rgba(20, 20, 20, .07);
    transform: translateY(-2px);
}
.ec-kpi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13.5px;
    font-weight: 500;
    color: #6d6a66;
}
.ec-kpi-top svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.ec-kpi:hover .ec-kpi-top svg { color: #ff6600; }
.ec-kpi-num {
    font: 600 38px/1.1 'Chakra Petch', var(--font-family-base);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}
.ec-kpi-sub { font-size: 12.5px; color: #6d6a66; }
.ec-kpi-attn { border-color: #ffcfa8; background: linear-gradient(180deg, #fff1e6, #ffffff 70%); }
.ec-kpi-attn .ec-kpi-num { color: #c24e00; }

@media (max-width: 991px) {
    .ec-hero { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; }
    .ec-hero-actions { justify-content: flex-start; }
    .ec-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ec-notice { flex-wrap: wrap; }
    .ec-notice .btn { margin-left: 0; }
}
@media (max-width: 480px) {
    .ec-kpis { gap: 10px; }
    .ec-kpi { padding: 14px; }
    .ec-kpi-num { font-size: 30px; }
}

/* Menu lateral: ícones monocromáticos, cor no hover e no item ativo */
.app-nav-secondary .menu-primary > li > a :is(i, svg, img) {
    filter: grayscale(1) brightness(1.9) contrast(.85);
    opacity: .8;
    transition: filter .2s, opacity .2s, transform .2s;
}
.app-nav-secondary .menu-primary > li > a:hover :is(i, svg, img),
.app-nav-secondary .menu-primary > li.active > a :is(i, svg, img) {
    filter: none;
    opacity: 1;
    transform: scale(1.06);
}
.app-nav-secondary .menu-primary > li > a { transition: background .15s, color .15s, box-shadow .15s; }

/* Card de suporte no pé do menu */
.ec-rail-help {
    margin: 24px 4px 16px;
    padding: 16px;
    border: 1px solid #262626;
    border-radius: 12px;
    background: radial-gradient(120% 100% at 0% 0%, rgba(255, 102, 0, .16), transparent 60%), #1b1b1b;
    color: #a8a5a1;
}
.ec-rail-help strong { display: block; margin-bottom: 4px; font-size: 14px; color: #ffffff; }
.ec-rail-help p { margin: 0 0 12px; font-size: 13px; line-height: 1.45; }
.ec-status-dot {
    display: inline-block;
    width: 8px; height: 8px;
    margin-right: 6px;
    border-radius: 50%;
    background: #1f9d55;
    box-shadow: 0 0 0 3px rgba(31, 157, 85, .2);
}

@media (prefers-reduced-motion: reduce) {
    .ec-kpi, .btn-primary,
    .app-nav-secondary .menu-primary > li > a :is(i, svg, img) { transition: none; }
    .ec-kpi:hover, .btn-primary:hover { transform: none; }
}

/* ── Ajustes v4 ───────────────────────────────────────────── */

/* Números dos tiles: cor no próprio número (a regra de link do Lagom vencia a herança) */
.ec-kpis .ec-kpi .ec-kpi-num { color: #141414; }
.ec-kpis .ec-kpi.ec-kpi-attn .ec-kpi-num { color: #c24e00; }

/* Cartão da empresa: nome menor e endereço mais discreto */
.main-sidebar [class*="panel-sidebar-"] .panel-body > strong,
.main-sidebar [class*="panel-sidebar-"] .panel-title {
    display: block;
    margin-bottom: 8px;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: -.005em;
}
.main-sidebar [class*="panel-sidebar-"] .panel-body {
    font-size: 13.5px;
    line-height: 1.6;
}

/* Tickets recentes: número em fonte mono, status em pílula, data discreta */
.panel-support-tickets .list-group-item .status-modern > b,
.panel-support-tickets .list-group-item .status-modern b:first-child {
    font: 500 12.5px 'JetBrains Mono', var(--font-family-monospace);
    color: #6d6a66;
    margin-right: 2px;
}
.panel-support-tickets .list-group-item .status-modern {
    font-weight: 500;
    color: #141414;
}
.panel-support-tickets .list-group-item label.status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
    padding: 2px 9px;
    border-radius: 999px;
    background: #f1efec;
    color: #6d6a66;
    font-size: 12px;
    font-weight: 600;
    vertical-align: 1px;
}
.panel-support-tickets .list-group-item label.status::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--status-color, #9b9792);
}
.panel-support-tickets .list-group-item small { color: #6d6a66; font-size: 12.5px; }

/* Serviços: hostname como código */
.panel-active-services .text-domain {
    display: inline-block;
    margin-top: 4px;
    padding: 1px 6px;
    border: 1px solid #e7e4e0;
    border-radius: 4px;
    background: #f5f4f2;
    font: 500 12.5px 'JetBrains Mono', var(--font-family-monospace);
    color: #141414;
}
.panel-active-services .list-group-item-group b { font-weight: 600; }

/* ── v5: ícones de linha no menu escuro (pelo nome do item) ── */
.app-nav-secondary .menu-primary > li[menuItemName="Home"] > a > svg,
.app-nav-secondary .menu-primary > li[menuItemName="Página Inicial"] > a > svg,
.app-nav-secondary .menu-primary > li[menuItemName="Painel"] > a > svg,
.app-nav-secondary .menu-primary > li[menuItemName="Dashboard"] > a > svg,
.app-nav-secondary .menu-primary > li[menuItemName="Services"] > a > svg,
.app-nav-secondary .menu-primary > li[menuItemName="Serviços"] > a > svg,
.app-nav-secondary .menu-primary > li[menuItemName="Domains"] > a > svg,
.app-nav-secondary .menu-primary > li[menuItemName="Domínios"] > a > svg,
.app-nav-secondary .menu-primary > li[menuItemName="Billing"] > a > svg,
.app-nav-secondary .menu-primary > li[menuItemName="Faturas"] > a > svg,
.app-nav-secondary .menu-primary > li[menuItemName="Financeiro"] > a > svg,
.app-nav-secondary .menu-primary > li[menuItemName="Support"] > a > svg,
.app-nav-secondary .menu-primary > li[menuItemName="Suporte"] > a > svg,
.app-nav-secondary .menu-primary > li[menuItemName="Affiliates"] > a > svg,
.app-nav-secondary .menu-primary > li[menuItemName="Afiliados"] > a > svg,
.app-nav-secondary .menu-primary > li[menuItemName="Network Status"] > a > svg,
.app-nav-secondary .menu-primary > li[menuItemName="Status Serviços"] > a > svg,
.app-nav-secondary .menu-primary > li[menuItemName="Status dos Serviços"] > a > svg,
.app-nav-secondary .menu-primary > li[menuItemName="Status"] > a > svg,
.app-nav-secondary .menu-primary > li[menuItemName="Store"] > a > svg,
.app-nav-secondary .menu-primary > li[menuItemName="Nova Contratação"] > a > svg,
.app-nav-secondary .menu-primary > li[menuItemName="Contratar"] > a > svg,
.app-nav-secondary .menu-primary > li[menuItemName="Produtos/Serviços"] > a > svg,
.app-nav-secondary .menu-primary > li[menuItemName="Produtos"] > a > svg { display: none; }
.app-nav-secondary .menu-primary > li[menuItemName="Home"] > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Página Inicial"] > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Painel"] > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Dashboard"] > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Services"] > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Serviços"] > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Domains"] > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Domínios"] > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Billing"] > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Faturas"] > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Financeiro"] > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Support"] > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Suporte"] > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Affiliates"] > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Afiliados"] > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Network Status"] > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Status Serviços"] > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Status dos Serviços"] > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Status"] > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Store"] > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Nova Contratação"] > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Contratar"] > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Produtos/Serviços"] > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Produtos"] > a::before {
    content: "";
    flex: none;
    display: inline-block;
    width: 22px;
    height: 22px;
    margin-right: 14px;
    vertical-align: middle;
    background-color: currentColor;
    opacity: .75;
    -webkit-mask: var(--ec-icon) center / contain no-repeat;
            mask: var(--ec-icon) center / contain no-repeat;
    transition: opacity .15s, background-color .15s, transform .15s;
}
.app-nav-secondary .menu-primary > li[menuItemName="Home"]:hover > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Página Inicial"]:hover > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Painel"]:hover > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Dashboard"]:hover > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Services"]:hover > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Serviços"]:hover > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Domains"]:hover > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Domínios"]:hover > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Billing"]:hover > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Faturas"]:hover > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Financeiro"]:hover > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Support"]:hover > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Suporte"]:hover > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Affiliates"]:hover > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Afiliados"]:hover > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Network Status"]:hover > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Status Serviços"]:hover > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Status dos Serviços"]:hover > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Status"]:hover > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Store"]:hover > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Nova Contratação"]:hover > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Contratar"]:hover > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Produtos/Serviços"]:hover > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Produtos"]:hover > a::before { opacity: 1; transform: translateX(1px); }
.app-nav-secondary .menu-primary > li[menuItemName="Home"].active > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Página Inicial"].active > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Painel"].active > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Dashboard"].active > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Services"].active > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Serviços"].active > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Domains"].active > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Domínios"].active > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Billing"].active > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Faturas"].active > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Financeiro"].active > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Support"].active > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Suporte"].active > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Affiliates"].active > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Afiliados"].active > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Network Status"].active > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Status Serviços"].active > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Status dos Serviços"].active > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Status"].active > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Store"].active > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Nova Contratação"].active > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Contratar"].active > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Produtos/Serviços"].active > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Produtos"].active > a::before { opacity: 1; background-color: #ff8533; }
.app-nav-secondary .menu-primary > li[menuItemName="Home"] > a,
.app-nav-secondary .menu-primary > li[menuItemName="Página Inicial"] > a,
.app-nav-secondary .menu-primary > li[menuItemName="Painel"] > a,
.app-nav-secondary .menu-primary > li[menuItemName="Dashboard"] > a { --ec-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); }
.app-nav-secondary .menu-primary > li[menuItemName="Services"] > a,
.app-nav-secondary .menu-primary > li[menuItemName="Serviços"] > a { --ec-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='7' rx='1.5'/%3E%3Crect x='3' y='13' width='18' height='7' rx='1.5'/%3E%3Cpath d='M7 7.5h.01M7 16.5h.01'/%3E%3C/svg%3E"); }
.app-nav-secondary .menu-primary > li[menuItemName="Domains"] > a,
.app-nav-secondary .menu-primary > li[menuItemName="Domínios"] > a { --ec-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3.5 3 14.5 0 18M12 3c-3 3.5-3 14.5 0 18'/%3E%3C/svg%3E"); }
.app-nav-secondary .menu-primary > li[menuItemName="Billing"] > a,
.app-nav-secondary .menu-primary > li[menuItemName="Faturas"] > a,
.app-nav-secondary .menu-primary > li[menuItemName="Financeiro"] > a { --ec-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-3-2-3 2-3-2-3 2z'/%3E%3Cpath d='M9 8h6M9 12h6'/%3E%3C/svg%3E"); }
.app-nav-secondary .menu-primary > li[menuItemName="Support"] > a,
.app-nav-secondary .menu-primary > li[menuItemName="Suporte"] > a { --ec-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H8l-4 4z'/%3E%3C/svg%3E"); }
.app-nav-secondary .menu-primary > li[menuItemName="Affiliates"] > a,
.app-nav-secondary .menu-primary > li[menuItemName="Afiliados"] > a { --ec-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='4'/%3E%3Cpath d='M3 21a6 6 0 0 1 12 0M17 8h4M19 6v4'/%3E%3C/svg%3E"); }
.app-nav-secondary .menu-primary > li[menuItemName="Network Status"] > a,
.app-nav-secondary .menu-primary > li[menuItemName="Status Serviços"] > a,
.app-nav-secondary .menu-primary > li[menuItemName="Status dos Serviços"] > a,
.app-nav-secondary .menu-primary > li[menuItemName="Status"] > a { --ec-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l3 8 4-16 3 8h4'/%3E%3C/svg%3E"); }
.app-nav-secondary .menu-primary > li[menuItemName="Nova Contratação"] > a,
.app-nav-secondary .menu-primary > li[menuItemName="Contratar"] > a { --ec-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E"); }
.app-nav-secondary .menu-primary > li[menuItemName="Store"] > a,
.app-nav-secondary .menu-primary > li[menuItemName="Produtos/Serviços"] > a,
.app-nav-secondary .menu-primary > li[menuItemName="Produtos"] > a { --ec-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 4.5v9L12 21l-8-4.5v-9z'/%3E%3Cpath d='M4 7.5l8 4.5 8-4.5M12 12v9'/%3E%3C/svg%3E"); }

/* Coluna do menu em flex para o card de suporte caber no pé */
.app-nav-secondary #main-menu > .container {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.app-nav-secondary #main-menu .menu-primary {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
}
.app-nav-secondary #main-menu .ec-rail-help { flex: none; }

/* Serviço sem hostname: esconde a caixinha vazia */
.panel-active-services .text-domain:empty { display: none; }
@media (prefers-reduced-motion: reduce) {
    .app-nav-secondary .menu-primary > li > a::before { transition: none; }
}

/* ── v5: card "Fatura em aberto" na coluna da direita ───────── */
.main-grid:has(.ec-hero) > .main-content > .client-home-panels { grid-row: span 2; }
.main-grid:has(.ec-hero) > .main-content > .ec-side { grid-column: 2; order: 11; align-self: start; }
.main-grid:has(.ec-hero) > .main-sidebar { order: 12; align-self: start; }
@media (max-width: 1199px) {
    .main-grid:has(.ec-hero) > .main-content > .client-home-panels { grid-row: auto; }
    .main-grid:has(.ec-hero) > .main-content > .ec-side { grid-column: 1; }
}
.ec-side { background: #ffffff; border: 1px solid #e7e4e0; border-radius: 12px; margin: 0; }
.ec-side-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #e7e4e0; }
.ec-side-head h2 { margin: 0; font-size: 16px; font-weight: 600; color: #141414; }
.ec-side-head a { font-size: 13px; font-weight: 500; color: #c24e00; }
.ec-invoice { display: flex; flex-direction: column; gap: 12px; padding: 20px; }
.ec-invoice-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ec-invoice-amt { font: 600 28px/1.1 'Chakra Petch', var(--font-family-base); font-variant-numeric: tabular-nums; color: #141414; }
.ec-invoice-meta { font-size: 13px; color: #6d6a66; }
.ec-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.ec-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ec-pill-warn { background: #fdf3dc; color: #b7791f; }
.ec-btn-block { display: flex; justify-content: center; width: 100%; }

/* ── v5: topo no formato do mockup ───────────────────────────── */
body .main-top .top-nav > li.nav-item-cart .item-text,
body .main-top .top-nav > li[menuItemName="Notifications"] .item-text { display: none; }
body .main-top .top-nav > li.nav-item-cart > a,
body .main-top .top-nav > li[menuItemName="Notifications"] > a {
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 6px;
    transition: background .15s;
}
body .main-top .top-nav > li.nav-item-cart > a:hover,
body .main-top .top-nav > li[menuItemName="Notifications"] > a:hover { background: #f5f4f2; }
body .main-top .top-nav > li.my-account > a {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 12px 5px 6px;
    border: 1px solid #e7e4e0;
    border-radius: 999px;
    background: #ffffff;
    max-width: 340px;
}
body .main-top .top-nav > li.my-account > a .item-text {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 13.5px; font-weight: 500; color: #141414;
}

/* v6: hostname do tamanho do texto */
.panel-active-services .text-domain { width: auto; max-width: max-content; align-self: flex-start; }

/* ============================================================
   v7 — aproximação final do mockup (pré-visualização)
   ============================================================ */

/* Coluna principal: painéis empilhados em largura cheia (o masonry usa o .column-sizer como medida) */
.main-grid:has(.ec-hero) .client-home-panels > .column-sizer,
.main-grid:has(.ec-hero) .client-home-panels > [data-panels-grid-item] {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
}
.main-grid:has(.ec-hero) > .main-content > .client-home-panels { grid-row: span 3; }

/* Coluna da direita: Fatura → Notícias → Dados da empresa */
.main-grid:has(.ec-hero) > .main-content > .ec-side-news { grid-column: 2; order: 11; align-self: start; }
.ec-side-news { background: transparent; border: 0; }
.ec-side-news > .panel { margin: 0; }
@media (max-width: 1199px) {
    .main-grid:has(.ec-hero) > .main-content > .ec-side-news { grid-column: 1; }
    .main-grid:has(.ec-hero) > .main-content > .client-home-panels { grid-row: auto; }
}

/* Dados da empresa: card branco como no mockup */
.main-grid:has(.ec-hero) .main-sidebar [class*="panel-sidebar-"] {
    background: #ffffff !important;
    border: 1px solid #e7e4e0;
    border-radius: 12px;
    box-shadow: none;
    color: #6d6a66;
    --text-heading-color: #141414;
}
.main-grid:has(.ec-hero) .main-sidebar [class*="panel-sidebar-"] .panel-body::before {
    content: "Dados da empresa";
    display: block;
    margin: -2px 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e7e4e0;
    font-size: 16px;
    font-weight: 600;
    color: #141414;
}
.main-grid:has(.ec-hero) .main-sidebar [class*="panel-sidebar-"] .panel-body > strong {
    font-size: 15px;
    color: #141414;
}
.main-grid:has(.ec-hero) .main-sidebar [class*="panel-sidebar-"] .panel-body { color: #6d6a66; }
.main-grid:has(.ec-hero) .main-sidebar [class*="panel-sidebar-"] .btn {
    background: #ffffff !important;
    border: 1px solid #e7e4e0 !important;
    color: #141414 !important;
    box-shadow: none;
}
.main-grid:has(.ec-hero) .main-sidebar [class*="panel-sidebar-"] .btn:hover {
    border-color: #ff8533 !important;
    color: #c24e00 !important;
}

/* Serviços: "Gerenciar" como botão principal */
.main-grid:has(.ec-hero) .panel-active-services .list-group-item .btn {
    background: linear-gradient(135deg, #ff6600, #f05a00);
    border-color: transparent;
    color: #ffffff;
    font-weight: 600;
}
.main-grid:has(.ec-hero) .panel-active-services .list-group-item .btn:hover {
    background: #c24e00;
    color: #ffffff;
    box-shadow: 0 6px 24px rgba(255, 102, 0, .3);
}

/* Menu compacto como no mockup */
.app-nav-secondary {
    --app-nav-left-wide-link-padding-v: 10px;
    --app-nav-left-wide-link-padding-h: 12px;
    --app-nav-left-wide-link-font-size: 14.5px;
}
.app-nav-secondary .menu-primary > li > a {
    padding: 10px 12px;
    font-size: 14.5px;
    line-height: 1.4;
    min-height: 0;
}
.app-nav-secondary .menu-primary > li > a::before {
    width: 18px;
    height: 18px;
    margin-right: 12px;
}
.app-nav-secondary .menu-primary > li { margin-bottom: 2px; }
.app-nav-secondary .app-nav-header .logo {
    width: 176px;
    min-height: 36px;
}

/* v8: menu compacto com seletor reforçado (o layout lateral do Lagom é mais específico) */
body.lagom-layout-left-wide .app-nav.app-nav-secondary .app-nav-menu .menu.menu-primary > li > a {
    padding: 9px 12px !important;
    min-height: 0 !important;
    height: auto !important;
    font-size: 14.5px !important;
    line-height: 1.4 !important;
}
body.lagom-layout-left-wide .app-nav.app-nav-secondary .app-nav-menu .menu.menu-primary > li > a .item-text {
    font-size: 14.5px !important;
    line-height: 1.4 !important;
}
body.lagom-layout-left-wide .app-nav.app-nav-secondary .app-nav-menu .menu.menu-primary > li > a > .ls-caret {
    font-size: 10px;
    opacity: .6;
}

/* ============================================================
   v9 — parte de baixo do painel com HTML próprio (mockup)
   ============================================================ */

/* Sem a coluna lateral do Lagom: o conteúdo ocupa a largura toda */
.main-grid:has(.ec-hero) { display: block !important; padding-top: 24px; }
.main-grid:has(.ec-hero) > .main-sidebar { display: none !important; }
.main-grid:has(.ec-hero) > .main-content {
    display: flex !important;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    max-width: 100% !important;
    margin: 0;
}
.main-grid:has(.ec-hero) > .main-content > * { margin-bottom: 0; }

/* Grade 2/3 + 1/3 */
.ec-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.ec-col { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
@media (max-width: 1199px) { .ec-grid { grid-template-columns: minmax(0, 1fr); } }

.ec-panel { background: #ffffff; border: 1px solid #e7e4e0; border-radius: 12px; min-width: 0; overflow: hidden; }
.ec-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #e7e4e0; }
.ec-panel-head h2 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.005em; color: #141414; }
.ec-panel-head a { font-size: 13px; font-weight: 500; color: #c24e00; }
.ec-panel-head a:hover { text-decoration: underline; color: #c24e00; }
.ec-empty { padding: 20px; font-size: 14px; color: #6d6a66; }
.ec-empty a { font-weight: 600; color: #c24e00; }

/* Seus serviços (usa o HTML que o Lagom monta para cada serviço) */
.ec-svc { padding: 20px; border-bottom: 1px solid #e7e4e0; }
.ec-svc:last-child { border-bottom: 0; }
.ec-svc .list-group-item-content { display: flex; align-items: center; gap: 16px 24px; flex-wrap: wrap; }
.ec-svc .graphic-item { display: none; }
.ec-svc .list-group-item-name { flex: 1 1 260px; min-width: 0; }
.ec-svc .list-group-item-fullname { display: block; font-size: 17px; font-weight: 600; color: #141414; line-height: 1.35; }
.ec-svc .list-group-item-group { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 500; color: #6d6a66; letter-spacing: .02em; }
.ec-svc .list-group-item-group b { font-weight: 600; }
.ec-svc .text-domain {
    display: inline-block;
    margin-top: 6px;
    padding: 1px 6px;
    border: 1px solid #e7e4e0;
    border-radius: 4px;
    background: #f5f4f2;
    font: 500 12.5px 'JetBrains Mono', var(--font-family-monospace);
    color: #141414;
}
.ec-svc .text-domain::before { content: "Hostname "; font-family: var(--font-family-base); color: #6d6a66; }
.ec-svc .text-domain:empty { display: none; }
.ec-svc .list-group-item-status { display: flex; align-items: center; gap: 8px; }
.ec-svc .label, .ec-svc .status {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: 999px;
    background: #e6f6ec; color: #1f9d55;
    font-size: 12px; font-weight: 600;
}
.ec-svc .btn {
    background: linear-gradient(135deg, #ff6600, #f05a00);
    border-color: transparent;
    color: #ffffff;
    font-weight: 600;
}
.ec-svc .btn:hover { background: #c24e00; color: #ffffff; }

/* Tickets recentes */
.ec-list { list-style: none; margin: 0; padding: 0; }
.ec-list li { border-bottom: 1px solid #e7e4e0; }
.ec-list li:last-child { border-bottom: 0; }
.ec-list a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 14px;
    align-items: center;
    padding: 14px 20px;
    color: #141414;
    text-decoration: none;
    transition: background .15s;
}
.ec-list a:hover { background: #fbfaf9; color: #141414; text-decoration: none; }
.ec-list .ec-tid { grid-column: 1; grid-row: 1 / span 2; font: 500 12.5px 'JetBrains Mono', var(--font-family-monospace); color: #6d6a66; }
.ec-list a > b, .ec-list a > strong {
    grid-column: 2; grid-row: 1;
    font-size: 14px; font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ec-list a > small { grid-column: 2; grid-row: 2; font-size: 12.5px; color: #6d6a66; }
.ec-list .ec-status, .ec-list label {
    grid-column: 3; grid-row: 1 / span 2;
    display: inline-flex; align-items: center; gap: 6px;
    margin: 0;
    padding: 3px 10px; border-radius: 999px;
    background: #f5f4f2; color: #6d6a66;
    font-size: 12px; font-weight: 600;
}
.ec-list .ec-status::before, .ec-list label::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--status-color, #9b9792);
}
.ec-tag {
    margin-right: 6px; padding: 2px 6px; border-radius: 4px;
    background: #fff1e6; color: #c24e00;
    font: 600 10.5px 'Chakra Petch', var(--font-family-base);
    letter-spacing: .08em; vertical-align: 1px;
}
@media (max-width: 480px) { .ec-list .ec-tid { display: none; } .ec-list a { grid-template-columns: minmax(0, 1fr) auto; } }

/* Avisos de segurança (notícias) */
.ec-news-list { display: flex; flex-direction: column; }
.ec-news-item, .ec-news-list > * { display: block; padding: 16px 20px; border-bottom: 1px solid #e7e4e0; color: #141414; text-decoration: none; }
.ec-news-item:last-child { border-bottom: 0; }
.ec-news-item:hover { background: #fbfaf9; color: #141414; text-decoration: none; }
.ec-news-item b, .ec-news-item strong { display: block; font-size: 15px; font-weight: 600; line-height: 1.4; }
.ec-news-item small, .ec-news-item .date { display: block; margin-top: 6px; font-size: 12.5px; color: #6d6a66; }
.ec-news-item::after { content: "Ler o aviso completo →"; display: block; margin-top: 8px; font-size: 13px; font-weight: 600; color: #c24e00; }

/* Dados da empresa */
.ec-company { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; font-size: 13.5px; }
.ec-company address { margin: 0; font-style: normal; color: #6d6a66; line-height: 1.6; }
.ec-company address strong { color: #141414; font-weight: 600; }
.ec-contact { display: flex; align-items: center; gap: 10px; }
.ec-contact strong { font-weight: 600; color: #141414; }
.ec-avatar {
    width: 32px; height: 32px; flex: none;
    display: grid; place-items: center;
    border-radius: 50%;
    background: #fff1e6; color: #c24e00;
    font: 700 12px 'Chakra Petch', var(--font-family-base);
    text-transform: uppercase;
}
.ec-company-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ec-btn-outline, .ec-btn-outline:visited { background: #ffffff; border: 1px solid #e7e4e0; color: #141414; font-weight: 600; }
.ec-btn-outline:hover, .ec-btn-outline:focus { border-color: #ff8533; color: #c24e00; background: #ffffff; }

/* ── v10: card de serviço como no mockup ─────────────────────── */
.ec-svc { position: relative; }
.ec-svc .list-group-item-content { padding-right: 230px; }
.ec-svc .list-group-item-content .btn,
.ec-svc .list-group-item-actions { display: none !important; }
.ec-svc-actions {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 8px;
}
.ec-svc-extra { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.ec-specs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    background: #e7e4e0;
    border: 1px solid #e7e4e0;
    border-radius: 6px;
    overflow: hidden;
}
.ec-spec { background: #ffffff; padding: 12px 14px; }
.ec-spec dt {
    margin-bottom: 6px;
    font: 600 10.5px/1 'Chakra Petch', var(--font-family-base);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #6d6a66;
}
.ec-spec dd {
    margin: 0;
    font: 600 18px/1.2 'Chakra Petch', var(--font-family-base);
    font-variant-numeric: tabular-nums;
    color: #141414;
}
.ec-spec dd small { margin-left: 2px; font: 500 12px var(--font-family-base); color: #6d6a66; }
.ec-spec dd.ec-ok { color: #1f9d55; }
@media (max-width: 767px) {
    .ec-svc .list-group-item-content { padding-right: 0; }
    .ec-svc-actions { position: static; }
    .ec-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── v11: disponibilidade 30 dias (dados do Zabbix via hook) ── */
.ec-uptime { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 13px; color: #6d6a66; }
.ec-bars { display: flex; gap: 3px; flex: 1; min-width: 200px; }
.ec-bars i { flex: 1; height: 22px; border-radius: 2px; background: #b9e3c8; }
.ec-bars i.ec-warn { background: #f3dfae; }
.ec-bars i.ec-down { background: #f2b8b8; }
.ec-bars i.ec-na { background: #ece9e5; }
.ec-uptime b { font: 600 13px 'Chakra Petch', var(--font-family-base); color: #141414; }
.ec-spec dd.ec-bad { color: #c53030; }

/* v12: "Abrir ticket" do card de serviço com borda (o .ec-svc .btn deixava laranja) */
.ec-svc .ec-svc-actions .ec-btn-outline {
    background: #ffffff;
    border: 1px solid #e7e4e0;
    color: #141414;
}
.ec-svc .ec-svc-actions .ec-btn-outline:hover {
    background: #ffffff;
    border-color: #ff8533;
    color: #c24e00;
}

/* v13: nome da conta no topo nunca sobrepõe os vizinhos (proteção caso o menu venha do cache) */
.main-top .top-nav > li.my-account .active-client { display: flex; flex-direction: column; min-width: 0; max-width: 220px; }
.main-top .top-nav > li.my-account .active-client > span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.main-top .top-nav > li.my-account .active-client > span:not(.item-text) { display: none; }

/* ============================================================
   v14 — páginas internas (mockup "Páginas internas"), etapa 1: CSS
   Só com admin logado: o card .ec-rail-help só existe nesse caso.
   ============================================================ */

/* Cabeçalho escuro nas páginas internas */
body:is(.page-clientareaproducts, .page-clientareaproductdetails, .page-clientareainvoices, .page-supportticketslist, .page-viewticket):has(.ec-rail-help) .main-header {
    --main-header-title-color: #ffffff;
    --main-header-breadcrumb-color: rgba(255, 255, 255, .62);
    --main-header-breadcrumb-color-active: #ff8533;
    --main-header-breadcrumb-color-hover: #ffffff;
    padding-top: 24px;
    padding-bottom: 8px;
    background: transparent;
}
body:is(.page-clientareaproducts, .page-clientareaproductdetails, .page-clientareainvoices, .page-supportticketslist, .page-viewticket):has(.ec-rail-help) .main-header > .container {
    --ec-gutter: var(--layout-left-container-gutter, var(--layout-container-gutter, 15px));
    position: relative;
    padding: 24px calc(var(--ec-gutter) + 28px);
}
body:is(.page-clientareaproducts, .page-clientareaproductdetails, .page-clientareainvoices, .page-supportticketslist, .page-viewticket):has(.ec-rail-help) .main-header > .container::before,
body:is(.page-clientareaproducts, .page-clientareaproductdetails, .page-clientareainvoices, .page-supportticketslist, .page-viewticket):has(.ec-rail-help) .main-header > .container::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: var(--ec-gutter); right: var(--ec-gutter);
    border-radius: 20px;
    pointer-events: none;
}
body:is(.page-clientareaproducts, .page-clientareaproductdetails, .page-clientareainvoices, .page-supportticketslist, .page-viewticket):has(.ec-rail-help) .main-header > .container::before {
    background:
        radial-gradient(60% 140% at 100% 0%, rgba(255, 102, 0, .32), transparent 60%),
        linear-gradient(135deg, #0d0d0d 0%, #1a1005 55%, #0d0d0d 100%);
}
body:is(.page-clientareaproducts, .page-clientareaproductdetails, .page-clientareainvoices, .page-supportticketslist, .page-viewticket):has(.ec-rail-help) .main-header > .container::after {
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 28px 28px;
    -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000);
            mask-image: linear-gradient(90deg, transparent 35%, #000);
}
body:is(.page-clientareaproducts, .page-clientareaproductdetails, .page-clientareainvoices, .page-supportticketslist, .page-viewticket):has(.ec-rail-help) .main-header > .container > * { position: relative; z-index: 1; }
body:is(.page-clientareaproducts, .page-clientareaproductdetails, .page-clientareainvoices, .page-supportticketslist, .page-viewticket):has(.ec-rail-help) .main-header-title {
    color: #ffffff;
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 700;
    letter-spacing: -.02em;
}
body:is(.page-clientareaproducts, .page-clientareaproductdetails, .page-clientareainvoices, .page-supportticketslist, .page-viewticket):has(.ec-rail-help) .main-header-title::before {
    display: block;
    margin-bottom: 8px;
    font: 600 11px/1 'Chakra Petch', var(--font-family-base);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #ff8533;
}
body.page-clientareaproducts:has(.ec-rail-help) .main-header-title::before,
body.page-clientareaproductdetails:has(.ec-rail-help) .main-header-title::before { content: "Serviços"; }
body.page-clientareainvoices:has(.ec-rail-help) .main-header-title::before { content: "Financeiro"; }
body.page-supportticketslist:has(.ec-rail-help) .main-header-title::before,
body.page-viewticket:has(.ec-rail-help) .main-header-title::before { content: "Suporte"; }
body:is(.page-clientareaproducts, .page-clientareaproductdetails, .page-clientareainvoices, .page-supportticketslist, .page-viewticket):has(.ec-rail-help) .main-header .breadcrumb a { color: rgba(255, 255, 255, .62); }
body:is(.page-clientareaproducts, .page-clientareaproductdetails, .page-clientareainvoices, .page-supportticketslist, .page-viewticket):has(.ec-rail-help) .main-header .breadcrumb > li:last-child { color: #ff8533; }

/* Listas (serviços, faturas, tickets): tabela como no mockup */
body:has(.ec-rail-help) .table-container {
    background: #ffffff;
    border: 1px solid #e7e4e0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: none;
}
body:has(.ec-rail-help) .table-container .table-top {
    padding: 14px 20px;
    border-bottom: 1px solid #e7e4e0;
    background: #ffffff;
}
body:has(.ec-rail-help) .table-container .view-filter-btns .btn {
    border-radius: 999px;
    border: 1px solid #e7e4e0;
    background: #ffffff;
    color: #6d6a66;
    font-size: 13px;
    font-weight: 500;
}
body:has(.ec-rail-help) .table-container .view-filter-btns .btn:hover { border-color: #ff8533; color: #c24e00; }
body:has(.ec-rail-help) .table-container .table > thead > tr > th {
    padding: 12px 20px;
    background: #fcfbfa;
    border-bottom: 1px solid #e7e4e0;
    font: 600 10.5px/1 'Chakra Petch', var(--font-family-base);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #6d6a66;
    white-space: nowrap;
}
body:has(.ec-rail-help) .table-container .table > tbody > tr > td {
    padding: 14px 20px;
    border-top: 0;
    border-bottom: 1px solid #e7e4e0;
    vertical-align: middle;
    font-size: 14px;
}
body:has(.ec-rail-help) .table-container .table > tbody > tr:last-child > td { border-bottom: 0; }
body:has(.ec-rail-help) .table-container .table > tbody > tr { transition: background .12s; }
body:has(.ec-rail-help) .table-container .table > tbody > tr:hover { background: #fbfaf9; }
body:has(.ec-rail-help) .table-container .table .text-domain,
body:has(.ec-rail-help) .table-container .table td .domain {
    font: 500 12.5px 'JetBrains Mono', var(--font-family-monospace);
    color: #6d6a66;
}

/* Status em pílula (serviços, faturas, tickets) */
body:has(.ec-rail-help) .table-container .status,
body:has(.ec-rail-help) .page-clientareaproductdetails .status,
body:has(.ec-rail-help) .page-viewticket .status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: #f5f4f2;
    color: #6d6a66;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}
body:has(.ec-rail-help) .status:is(.status-active, .status-paid, .status-open, .status-completed) { background: #e6f6ec; color: #1f9d55; }
body:has(.ec-rail-help) .status:is(.status-unpaid, .status-overdue, .status-pending, .status-customer-reply, .status-payment-pending) { background: #fdf3dc; color: #b7791f; }
body:has(.ec-rail-help) .status:is(.status-answered, .status-in-progress, .status-on-hold) { background: #e7f0fa; color: #2563a8; }
body:has(.ec-rail-help) .status:is(.status-suspended, .status-fraud, .status-collections) { background: #fde8e8; color: #c53030; }
body:has(.ec-rail-help) .status:is(.status-closed, .status-cancelled, .status-terminated, .status-refunded, .status-draft) { background: #f5f4f2; color: #6d6a66; }
body:has(.ec-rail-help) .table-container .status-icon svg { width: 14px; height: 14px; }

/* Ticket aberto: conversa em balões */
body.page-viewticket:has(.ec-rail-help) .ticket-reply {
    margin-bottom: 16px;
    padding: 16px 18px;
    border: 1px solid #e7e4e0;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: none;
}
body.page-viewticket:has(.ec-rail-help) .ticket-reply.staff-reply {
    background: #fbfaf9;
    border-color: #efe6dc;
    box-shadow: inset 3px 0 0 #ff6600;
}
body.page-viewticket:has(.ec-rail-help) .ticket-reply-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #efebe6;
    font-size: 13px;
    color: #6d6a66;
}
body.page-viewticket:has(.ec-rail-help) .ticket-reply .user-info { font-weight: 600; color: #141414; }
body.page-viewticket:has(.ec-rail-help) .ticket-reply .user-label {
    margin-left: 6px;
    padding: 2px 6px;
    border-radius: 4px;
    background: #fff1e6;
    color: #c24e00;
    font: 600 10px 'Chakra Petch', var(--font-family-base);
    letter-spacing: .1em;
    text-transform: uppercase;
}
body.page-viewticket:has(.ec-rail-help) .ticket-reply-message { font-size: 14.5px; line-height: 1.6; color: #141414; }
body.page-viewticket:has(.ec-rail-help) .ticket-reply-message pre,
body.page-viewticket:has(.ec-rail-help) .ticket-reply-message code {
    border-radius: 6px;
    background: #141414;
    color: #e8e6e3;
    font: 12.5px/1.5 'JetBrains Mono', var(--font-family-monospace);
}
body.page-viewticket:has(.ec-rail-help) .ticket-reply-message pre { padding: 10px 12px; overflow-x: auto; }
body.page-viewticket:has(.ec-rail-help) .panel-ticket-reply textarea:focus {
    border-color: #ff8533;
    box-shadow: 0 0 0 3px rgba(255, 102, 0, .15);
}

/* Detalhe do serviço: informações como a grade do mockup */
body.page-clientareaproductdetails:has(.ec-rail-help) .list-info-title {
    font: 600 10.5px/1.2 'Chakra Petch', var(--font-family-base);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #6d6a66;
}
body.page-clientareaproductdetails:has(.ec-rail-help) .list-info-text {
    font-size: 15px;
    font-weight: 600;
    color: #141414;
    font-variant-numeric: tabular-nums;
}
body.page-clientareaproductdetails:has(.ec-rail-help) .panel,
body.page-clientareaproductdetails:has(.ec-rail-help) .section .panel {
    border: 1px solid #e7e4e0;
    border-radius: 12px;
    box-shadow: none;
}
body.page-clientareaproductdetails:has(.ec-rail-help) .nav-tabs > li > a,
body.page-clientareaproductdetails:has(.ec-rail-help) .nav-tabs .nav-link { font-weight: 500; }
body.page-clientareaproductdetails:has(.ec-rail-help) .nav-tabs > li.active > a,
body.page-clientareaproductdetails:has(.ec-rail-help) .nav-tabs .nav-link.active { box-shadow: inset 0 -2px 0 #ff6600; }

/* ============================================================
   v15 — páginas internas, etapa 2
   ============================================================ */

/* Botões do cabeçalho escuro: laranja cheio */
body:is(.page-clientareaproducts, .page-clientareaproductdetails, .page-clientareainvoices, .page-supportticketslist, .page-viewticket):has(.ec-rail-help) .main-header .btn:not(.btn-default):not(.dropdown-toggle) {
    background: linear-gradient(135deg, #ff6600, #f05a00);
    border-color: transparent;
    color: #ffffff;
}

/* Meus serviços: sem a coluna "Ações" na lateral; resumo no topo */
body.page-clientareaproducts:has(.ec-rail-help) .main-sidebar { display: none; }
body.page-clientareaproducts:has(.ec-rail-help) .main-sidebar + .main-content { max-width: 100%; }
.ec-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.ec-stat { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; background: #ffffff; border: 1px solid #e7e4e0; border-radius: 12px; }
.ec-stat span { font-size: 13px; font-weight: 500; color: #6d6a66; }
.ec-stat b { font: 600 26px/1.15 'Chakra Petch', var(--font-family-base); font-variant-numeric: tabular-nums; color: #141414; }
.ec-stat small { font-size: 12.5px; color: #6d6a66; }
.ec-stat-cta { justify-content: space-between; gap: 10px; background: linear-gradient(180deg, #fff1e6, #ffffff 70%); border-color: #ffcfa8; }
.ec-stat-cta .btn { align-self: flex-start; }
@media (max-width: 991px) { .ec-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Linha do serviço: especificações e mini gráfico de uptime */
.ec-row-extra { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 8px; }
.ec-mini-specs { display: flex; gap: 14px; font: 600 14px 'Chakra Petch', var(--font-family-base); color: #141414; }
.ec-mini-specs small { display: block; font: 600 9.5px 'Chakra Petch', var(--font-family-base); letter-spacing: .12em; color: #6d6a66; }
.ec-mini-up { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #6d6a66; }
.ec-mini-up b { font: 600 12.5px 'Chakra Petch', var(--font-family-base); color: #141414; }
.ec-spark { display: flex; gap: 2px; height: 22px; }
.ec-spark i { width: 4px; height: 100%; border-radius: 1px; background: #b9e3c8; }
.ec-spark i.ec-warn { background: #f3dfae; }
.ec-spark i.ec-down { background: #f2b8b8; }
.ec-spark i.ec-na { background: #ece9e5; }
body.page-clientareaproducts:has(.ec-rail-help) .table .text-small { font: 500 12.5px 'JetBrains Mono', var(--font-family-monospace); color: #6d6a66; }

/* Detalhe do serviço: visão geral com uptime grande */
.ec-svc-overview { margin-bottom: 22px; }
.ec-host { padding: 1px 6px; border: 1px solid #e7e4e0; border-radius: 4px; background: #f5f4f2; font: 500 12.5px 'JetBrains Mono', var(--font-family-monospace); color: #141414; }
.ec-overview-body { display: flex; flex-direction: column; gap: 22px; padding: 20px; }
.ec-uptime-big { display: flex; flex-direction: column; gap: 10px; }
.ec-uptime-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: 13.5px; color: #6d6a66; }
.ec-uptime-head b { font: 600 22px 'Chakra Petch', var(--font-family-base); color: #141414; }
.ec-bars-big { min-width: 0; }
.ec-bars-big i { height: 34px; border-radius: 3px; }
.ec-bars-big i:hover { outline: 2px solid #141414; outline-offset: 1px; }
.ec-bars-axis { display: flex; justify-content: space-between; font-size: 11.5px; color: #6d6a66; }
.ec-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: #6d6a66; }
.ec-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; vertical-align: -1px; background: #b9e3c8; }
.ec-legend .ec-warn::before { background: #f3dfae; }
.ec-legend .ec-down::before { background: #f2b8b8; }
.ec-legend .ec-na::before { background: #ece9e5; }
@media (max-width: 767px) { .ec-svc-overview .ec-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* v16: ticket aberto como no mockup — conversa primeiro (ordem cronológica), resposta embaixo */
body.page-viewticket:has(.ec-rail-help) .main-content { display: flex; flex-direction: column; }
body.page-viewticket:has(.ec-rail-help) .main-content > section:has(.panel-ticket-reply) { order: 2; }
body.page-viewticket:has(.ec-rail-help) .main-content > .visible-print-block { order: 3; }
body.page-viewticket:has(.ec-rail-help) .main-content > section:has(.ticket-reply) > .section-body {
    display: flex;
    flex-direction: column-reverse;
}

/* ============================================================
   v18 — nova página inicial (mockup home-portal.html)
   Só existe quando o template inclui .ec-home (pré-visualização)
   ============================================================ */
.page-homepage:has(.ec-home) .main-banner { display: none; }
.ec-home { display: flex; flex-direction: column; gap: 24px; padding-block: 24px 8px; }

/* Herói com login */
.ec-hhero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr);
    gap: 40px;
    align-items: center;
    padding: 44px 40px 72px;
    border-radius: 20px;
    color: #f1efec;
    background:
        radial-gradient(55% 90% at 85% 0%, rgba(255, 102, 0, .30), transparent 60%),
        linear-gradient(135deg, #0d0d0d 0%, #1a1005 55%, #0d0d0d 100%);
}
.ec-hhero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 32px 32px;
    -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 70%);
            mask-image: linear-gradient(90deg, transparent 20%, #000 70%);
}
.ec-hhero > * { position: relative; z-index: 1; min-width: 0; }
.ec-hhero-title {
    margin: 14px 0 12px;
    font: 700 clamp(28px, 3.6vw, 44px)/1.08 var(--font-family-base);
    letter-spacing: -.025em;
    color: #ffffff;
    text-wrap: balance;
}
.ec-hhero-title em { font-style: normal; color: #ff8533; }
.ec-hhero-lead { margin: 0; max-width: 34em; font-size: 16px; color: #bdb8b2; }
.ec-kb-search {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 520px;
    margin-top: 26px;
    padding: 6px 6px 6px 14px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 12px;
    transition: border-color .15s, background .15s;
}
.ec-kb-search:focus-within { border-color: #ff8533; background: rgba(255, 255, 255, .1); }
.ec-kb-search svg { width: 18px; height: 18px; flex: none; fill: none; stroke: #bdb8b2; stroke-width: 2; }
.ec-kb-search input { flex: 1; min-width: 0; padding: 8px 0; border: 0; outline: none; background: none; color: #ffffff; font-size: 15px; }
.ec-kb-search input::placeholder { color: #8f8a84; }
.ec-kb-hint { margin-top: 10px; font-size: 13px; color: #8f8a84; }
.ec-kb-hint a { margin-left: 10px; color: #bdb8b2; border-bottom: 1px dotted #6c6965; }
.ec-kb-hint a:hover { color: #ffffff; }

.ec-login { padding: 28px; border-radius: 20px; background: #ffffff; color: #141414; box-shadow: 0 30px 60px rgba(0, 0, 0, .35); }
.ec-login h2 { margin: 0 0 4px; font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: #141414; }
.ec-login-sub { margin: 0 0 20px; font-size: 14px; color: #6d6a66; }
.ec-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.ec-field label { margin: 0; font-size: 13px; font-weight: 600; color: #141414; }
.ec-field input { padding: 11px 12px; border: 1px solid #e7e4e0; border-radius: 6px; font-size: 15px; color: #141414; background: #ffffff; }
.ec-field input:focus { outline: none; border-color: #ff8533; box-shadow: 0 0 0 3px rgba(255, 102, 0, .15); }
.ec-login-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; font-size: 13.5px; }
.ec-login-row label { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 400; color: #6d6a66; }
.ec-login-row input { accent-color: #ff6600; }
.ec-login-row a, .ec-login-alt a { color: #c24e00; font-weight: 600; }
.ec-login .btn-primary { padding: 12px; font-size: 15px; }
.ec-login .captcha, .ec-login .recaptcha-container { margin-bottom: 14px; }
.ec-login-alt { margin-top: 16px; padding-top: 16px; border-top: 1px solid #e7e4e0; text-align: center; font-size: 13.5px; color: #6d6a66; }

/* Atalhos avançando sobre o herói */
.ec-quick { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: -60px; padding-inline: 20px; position: relative; z-index: 2; }
.ec-q, .ec-q:visited {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #e7e4e0;
    border-radius: 12px;
    color: #141414;
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.ec-q:hover, .ec-q:focus { color: #141414; text-decoration: none; border-color: #ffb380; box-shadow: 0 12px 28px rgba(20, 20, 20, .08); transform: translateY(-2px); }
.ec-q-ico { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: #fff1e6; color: #c24e00; transition: background .15s, color .15s; }
.ec-q:hover .ec-q-ico { background: #ff6600; color: #ffffff; }
.ec-q-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ec-q b { font-size: 15.5px; font-weight: 600; }
.ec-q span { font-size: 13px; line-height: 1.45; color: #6d6a66; }

/* Status ao vivo (Instatus) */
.ec-status-strip { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 16px 20px; background: #ffffff; border: 1px solid #e7e4e0; border-radius: 12px; }
.ec-status-state { display: flex; align-items: center; gap: 10px; font-weight: 600; color: #141414; }
.ec-status-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: #9b9792; }
.ec-status-ok .ec-status-dot { background: #1f9d55; box-shadow: 0 0 0 4px rgba(31, 157, 85, .18); }
.ec-status-info .ec-status-dot { background: #2563a8; box-shadow: 0 0 0 4px rgba(37, 99, 168, .18); }
.ec-status-warn .ec-status-dot { background: #b7791f; box-shadow: 0 0 0 4px rgba(183, 121, 31, .18); }
.ec-status-crit .ec-status-dot { background: #c53030; box-shadow: 0 0 0 4px rgba(197, 48, 48, .18); }
.ec-status-groups { display: flex; gap: 8px; flex-wrap: wrap; }
.ec-status-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #e6f6ec; color: #1f9d55; font: 600 12px 'Chakra Petch', var(--font-family-base); letter-spacing: .04em; }
.ec-status-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ec-status-chip-alert { background: #e7f0fa; color: #2563a8; }
.ec-status-strip > a { margin-left: auto; font-size: 14px; font-weight: 500; color: #c24e00; }

/* Avisos */
.ec-home-news .ec-notice-item { display: block; padding: 18px 20px; border-bottom: 1px solid #e7e4e0; color: #141414; text-decoration: none; transition: background .12s; }
.ec-home-news .ec-notice-item:last-child { border-bottom: 0; }
.ec-home-news .ec-notice-item:hover { background: #fbfaf9; color: #141414; text-decoration: none; }
.ec-notice-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ec-pill-crit { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: #fde8e8; color: #c53030; font-size: 12px; font-weight: 600; }
.ec-pill-crit::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ec-notice-date { font-size: 12.5px; color: #6d6a66; }
.ec-home-news h3 { margin: 0 0 6px; font-size: 16px; line-height: 1.4; font-weight: 600; color: #141414; text-wrap: balance; }
.ec-home-news p { margin: 0; font-size: 14px; color: #6d6a66; }
.ec-notice-more { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 600; color: #c24e00; }

@media (max-width: 1199px) { .ec-quick { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 991px) {
    .ec-hhero { grid-template-columns: minmax(0, 1fr); padding: 32px 24px 64px; gap: 28px; }
    .ec-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-inline: 0; margin-top: -44px; }
    .ec-status-strip > a { margin-left: 0; }
}
@media (max-width: 480px) { .ec-quick { grid-template-columns: minmax(0, 1fr); } .ec-login { padding: 22px; } }
@media (prefers-reduced-motion: reduce) { .ec-q, .ec-q-ico { transition: none; } .ec-q:hover { transform: none; } }

/* ============================================================
   v23 — detalhe do serviço: menu lateral (Visão geral / Ações)
   A borda de .panel da v15 pegava estes painéis, que no Lagom não têm caixa
   ============================================================ */
body.page-clientareaproductdetails:has(.ec-rail-help) .main-sidebar .panel-sidebar {
    padding: 8px;
    margin-bottom: 16px;
    background: #ffffff;
    border: 1px solid #e7e4e0;
    border-radius: 12px;
    box-shadow: none;
}
body.page-clientareaproductdetails:has(.ec-rail-help) .main-sidebar .panel-sidebar .panel-heading {
    margin: 0;
    padding: 8px 12px 6px;
    background: none;
    border: 0;
}
body.page-clientareaproductdetails:has(.ec-rail-help) .main-sidebar .panel-sidebar .panel-title {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #6d6a66;
}
body.page-clientareaproductdetails:has(.ec-rail-help) .main-sidebar .panel-sidebar .panel-minimise { display: none; }
body.page-clientareaproductdetails:has(.ec-rail-help) .main-sidebar .panel-sidebar .panel-body { padding: 4px 12px 8px; }
body.page-clientareaproductdetails:has(.ec-rail-help) .main-sidebar .panel-sidebar .list-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
}
body.page-clientareaproductdetails:has(.ec-rail-help) .main-sidebar .panel-sidebar .list-group-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 9px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #141414;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    text-decoration: none;
}
body.page-clientareaproductdetails:has(.ec-rail-help) .main-sidebar .panel-sidebar .list-group-item::before,
body.page-clientareaproductdetails:has(.ec-rail-help) .main-sidebar .panel-sidebar .list-group-item::after { display: none; }
body.page-clientareaproductdetails:has(.ec-rail-help) .main-sidebar .panel-sidebar .list-group-item > i,
body.page-clientareaproductdetails:has(.ec-rail-help) .main-sidebar .panel-sidebar .list-group-item > svg {
    flex: 0 0 18px;
    width: 18px;
    margin: 0;
    text-align: center;
    color: #6d6a66;
}
body.page-clientareaproductdetails:has(.ec-rail-help) .main-sidebar .panel-sidebar a.list-group-item:hover,
body.page-clientareaproductdetails:has(.ec-rail-help) .main-sidebar .panel-sidebar a.list-group-item:focus-visible {
    background: #f5f4f2;
    color: #141414;
}
body.page-clientareaproductdetails:has(.ec-rail-help) .main-sidebar .panel-sidebar .list-group-item.active,
body.page-clientareaproductdetails:has(.ec-rail-help) .main-sidebar .panel-sidebar .list-group-item.active:hover {
    background: #fff1e6;
    color: #c24e00;
}
body.page-clientareaproductdetails:has(.ec-rail-help) .main-sidebar .panel-sidebar .list-group-item.active > i,
body.page-clientareaproductdetails:has(.ec-rail-help) .main-sidebar .panel-sidebar .list-group-item.active > svg { color: #ff6600; }
/* Painel sem nenhum item (ex.: "Ações" sem botões do módulo): não mostrar a caixa vazia */
body:has(.ec-rail-help) .main-sidebar .panel-sidebar:not(:has(.list-group-item)):not(:has(.panel-body)) { display: none; }

/* ============================================================
   v26 — card "Suporte técnico" do menu: ponto verde pulsando
   (a regra .ec-status-dot da página inicial, cinza por padrão, vencia esta)
   ============================================================ */
.ec-rail-help .ec-status-dot {
    position: relative;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    vertical-align: 1px;
    background: #22c55e;
    box-shadow: none;
}
.ec-rail-help .ec-status-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #22c55e;
    animation: ec-pulse 2s ease-out infinite;
}
@keyframes ec-pulse {
    0%   { transform: scale(1);   opacity: .7; }
    70%  { transform: scale(2.6); opacity: 0; }
    100% { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .ec-rail-help .ec-status-dot::after { animation: none; opacity: 0; }
    .ec-rail-help .ec-status-dot { box-shadow: 0 0 0 3px rgba(34, 197, 94, .25); }
}

/* v27 — faixa de status da página inicial: ponto pulsando na cor do status (cinza enquanto carrega, sem pulso) */
.ec-status-strip .ec-status-dot { position: relative; box-shadow: none; }
.ec-status-strip:is(.ec-status-ok, .ec-status-info, .ec-status-warn, .ec-status-crit) .ec-status-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: inherit;
    animation: ec-pulse 2s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .ec-status-strip .ec-status-dot::after { animation: none; opacity: 0; }
}

/* ============================================================
   v28 — menu lateral igual para visitante (antes só com cliente logado)
   ============================================================ */
.app-nav-secondary .menu-primary > li[menuItemName="2ª Via Fatura"] > a > svg, .app-nav-secondary .menu-primary > li[menuItemName="2ª Via Fatura"] > a > img,
.app-nav-secondary .menu-primary > li[menuItemName="Login"] > a > svg, .app-nav-secondary .menu-primary > li[menuItemName="Login"] > a > img,
.app-nav-secondary .menu-primary > li[menuItemName="Registrar"] > a > svg, .app-nav-secondary .menu-primary > li[menuItemName="Registrar"] > a > img { display: none; }
.app-nav-secondary .menu-primary > li[menuItemName="2ª Via Fatura"] > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Login"] > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Registrar"] > a::before {
    content: "";
    flex: none;
    display: inline-block;
    width: 22px;
    height: 22px;
    margin-right: 14px;
    vertical-align: middle;
    background-color: currentColor;
    opacity: .75;
    -webkit-mask: var(--ec-icon) center / contain no-repeat;
            mask: var(--ec-icon) center / contain no-repeat;
    transition: opacity .15s, background-color .15s, transform .15s;
}
.app-nav-secondary .menu-primary > li[menuItemName="2ª Via Fatura"]:hover > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Login"]:hover > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Registrar"]:hover > a::before { opacity: 1; transform: translateX(1px); }
.app-nav-secondary .menu-primary > li[menuItemName="2ª Via Fatura"].active > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Login"].active > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Registrar"].active > a::before { opacity: 1; background-color: #ff8533; }
.app-nav-secondary .menu-primary > li[menuItemName="2ª Via Fatura"] > a { --ec-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-3-2-3 2-3-2-3 2z'/%3E%3Cpath d='M9 8h6M9 12h6'/%3E%3C/svg%3E"); }
.app-nav-secondary .menu-primary > li[menuItemName="Login"] > a { --ec-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4h3a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-3'/%3E%3Cpath d='M10 17l5-5-5-5M15 12H3'/%3E%3C/svg%3E"); }
.app-nav-secondary .menu-primary > li[menuItemName="Registrar"] > a { --ec-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='4'/%3E%3Cpath d='M3 21a6 6 0 0 1 12 0M19 8v6M16 11h6'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: reduce) { .app-nav-secondary .menu-primary > li[menuItemName="2ª Via Fatura"] > a::before, .app-nav-secondary .menu-primary > li[menuItemName="Login"] > a::before, .app-nav-secondary .menu-primary > li[menuItemName="Registrar"] > a::before { transition: none; } }

/* ============================================================
   v29 — base de conhecimento (início, categoria, artigo)
   Só existe quando o template inclui .ec-kb (pré-visualização: admin)
   ============================================================ */

/* Sem barra lateral: conteúdo ocupa a largura toda */
body:has(.ec-kb) .main-sidebar { display: none !important; }
body:has(.ec-kb) .main-content { flex: 1 1 100%; width: 100%; max-width: 100%; margin: 0; }

/* Cabeçalho escuro, igual às páginas internas */
body:has(.ec-kb) .main-header {
    --main-header-title-color: #ffffff;
    --main-header-breadcrumb-color: rgba(255, 255, 255, .62);
    --main-header-breadcrumb-color-active: #ff8533;
    --main-header-breadcrumb-color-hover: #ffffff;
    padding-top: 24px;
    padding-bottom: 8px;
    background: transparent;
}
body:has(.ec-kb) .main-header > .container {
    --ec-gutter: var(--layout-left-container-gutter, var(--layout-container-gutter, 15px));
    position: relative;
    padding: 28px calc(var(--ec-gutter) + 32px);
}
body:has(.ec-kb) .main-header > .container::before,
body:has(.ec-kb) .main-header > .container::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: var(--ec-gutter); right: var(--ec-gutter);
    border-radius: 20px;
    pointer-events: none;
}
body:has(.ec-kb) .main-header > .container::before {
    background:
        radial-gradient(60% 140% at 100% 0%, rgba(255, 102, 0, .32), transparent 60%),
        linear-gradient(135deg, #0d0d0d 0%, #1a1005 55%, #0d0d0d 100%);
}
body:has(.ec-kb) .main-header > .container::after {
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 28px 28px;
    -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000);
            mask-image: linear-gradient(90deg, transparent 35%, #000);
}
body:has(.ec-kb) .main-header > .container > * { position: relative; z-index: 1; }
body:has(.ec-kb) .main-header-title {
    max-width: 30em;
    color: #ffffff;
    font-size: clamp(24px, 2.8vw, 34px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
    text-wrap: balance;
}
body:has(.ec-kb) .main-header-title::before {
    content: "Base de conhecimento";
    display: block;
    margin-bottom: 10px;
    font: 600 11px/1 'Chakra Petch', var(--font-family-base);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #ff8533;
}
body:has(.ec-kb) .main-header .breadcrumb a { color: rgba(255, 255, 255, .62); }
body:has(.ec-kb) .main-header .breadcrumb > li:last-child { color: #ff8533; }
body:has(.ec-kb-read) .main-header .breadcrumb > li:last-child { display: none; }

/* Estrutura */
.ec-kb { display: flex; flex-direction: column; gap: 32px; color: #141414; }
.ec-kb-section { display: flex; flex-direction: column; gap: 14px; }
.ec-kb-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ec-kb-head h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: #141414; }
.ec-kb-head span { font-size: 13px; color: #6d6a66; }
.ec-kb-empty { margin: 0; padding: 24px; border: 1px dashed #d9d5d0; border-radius: 12px; color: #6d6a66; text-align: center; }

/* Busca */
.ec-kb-top { display: flex; flex-direction: column; gap: 14px; }
.ec-kb-searchbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 8px 8px 18px;
    background: #ffffff;
    border: 1px solid #e7e4e0;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(20, 20, 20, .06);
    transition: border-color .15s, box-shadow .15s;
}
.ec-kb-searchbar:focus-within { border-color: #ff8533; box-shadow: 0 0 0 4px rgba(255, 102, 0, .14), 0 12px 30px rgba(20, 20, 20, .06); }
.ec-kb-searchbar svg { flex: none; width: 20px; height: 20px; fill: none; stroke: #6d6a66; stroke-width: 2; stroke-linecap: round; }
.ec-kb-searchbar input { flex: 1; min-width: 0; height: 44px; padding: 0; border: 0; background: transparent; font-size: 16px; color: #141414; outline: none; box-shadow: none; }
.ec-kb-searchbar input::placeholder { color: #9b9792; }
.ec-kb-searchbar .btn { flex: none; height: 44px; padding: 0 22px; border-radius: 10px; font-weight: 600; }
.ec-kb-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ec-kb-tags[hidden] { display: none; }
.ec-kb-tags-label { margin-right: 4px; font: 600 11px/1 'Chakra Petch', var(--font-family-base); letter-spacing: .14em; text-transform: uppercase; color: #6d6a66; }
.ec-kb-tag { padding: 5px 12px; border: 1px solid #e7e4e0; border-radius: 999px; background: #ffffff; font-size: 13px; color: #3d3a37; text-decoration: none; transition: border-color .15s, color .15s, background .15s; }
.ec-kb-tag:hover, .ec-kb-tag:focus-visible { border-color: #ff8533; background: #fff1e6; color: #c24e00; text-decoration: none; }

/* Categorias em grade */
.ec-kb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.ec-kb-card {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    gap: 6px 14px;
    padding: 18px;
    background: #ffffff;
    border: 1px solid #e7e4e0;
    border-radius: 14px;
    color: #141414;
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.ec-kb-card:hover, .ec-kb-card:focus-visible { border-color: #ffb27f; box-shadow: 0 14px 30px rgba(20, 20, 20, .07); transform: translateY(-2px); color: #141414; text-decoration: none; }
.ec-kb-card-ico { grid-row: 1 / span 2; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: #fff1e6; color: #ff6600; }
.ec-kb-card-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.ec-kb-card-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ec-kb-card-body b { font-size: 16px; font-weight: 600; line-height: 1.3; }
.ec-kb-card-body small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; line-height: 1.5; color: #6d6a66; }
.ec-kb-count { justify-self: start; font: 600 11.5px/1 'Chakra Petch', var(--font-family-base); letter-spacing: .06em; color: #c24e00; }

/* Listas de artigos */
.ec-kb-list { margin: 0; padding: 0; list-style: none; background: #ffffff; border: 1px solid #e7e4e0; border-radius: 14px; overflow: hidden; }
.ec-kb-list li + li { border-top: 1px solid #efece8; }
.ec-kb-list a { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 14px; padding: 16px 20px; color: #141414; text-decoration: none; transition: background .12s; }
.ec-kb-list a:hover, .ec-kb-list a:focus-visible { background: #fbfaf9; color: #141414; text-decoration: none; }
.ec-kb-list a:hover b { color: #c24e00; }
.ec-kb-item-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ec-kb-item-body b { font-size: 15.5px; font-weight: 600; line-height: 1.4; transition: color .12s; }
.ec-kb-item-body small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; line-height: 1.5; color: #6d6a66; }
.ec-kb-num { min-width: 28px; padding-top: 1px; font: 600 15px/1.4 'Chakra Petch', var(--font-family-base); color: #ff6600; }
.ec-kb-doc { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: #f5f4f2; color: #6d6a66; }
.ec-kb-doc svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.ec-kb-edit { position: absolute; top: 12px; right: 12px; }

/* Artigo: coluna de leitura + índice fixo à direita em telas largas */
.ec-kb-read { display: grid; grid-template-columns: minmax(0, 860px) 240px; justify-content: start; column-gap: 40px; row-gap: 24px; }
.ec-kb-read > * { grid-column: 1; }
.ec-kb-read > .ec-kb-toc { grid-column: 2; grid-row: 1 / span 6; align-self: start; position: sticky; top: 24px; }
.ec-kb-toc { padding: 16px 18px; background: #ffffff; border: 1px solid #e7e4e0; border-radius: 14px; }
.ec-kb-toc[hidden] { display: none; }
.ec-kb-toc b { display: block; margin-bottom: 10px; font: 600 11px/1 'Chakra Petch', var(--font-family-base); letter-spacing: .14em; text-transform: uppercase; color: #6d6a66; }
.ec-kb-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: ec-toc; display: flex; flex-direction: column; gap: 2px; }
.ec-kb-toc li { counter-increment: ec-toc; }
.ec-kb-toc a { display: grid; grid-template-columns: 22px 1fr; padding: 6px 8px; border-radius: 8px; font-size: 13.5px; line-height: 1.4; color: #3d3a37; text-decoration: none; }
.ec-kb-toc a::before { content: counter(ec-toc, decimal-leading-zero); font: 600 11px/1.6 'Chakra Petch', var(--font-family-base); color: #ff6600; }
.ec-kb-toc a:hover, .ec-kb-toc a:focus-visible { background: #fff1e6; color: #c24e00; text-decoration: none; }

.ec-kb-article { position: relative; padding: 40px 48px; background: #ffffff; border: 1px solid #e7e4e0; border-radius: 16px; }
.ec-kb-article-tools { position: absolute; top: 16px; right: 16px; }
.ec-kb-article .article-content { font-size: 16.5px; line-height: 1.75; color: #2b2926; overflow-wrap: break-word; }
.ec-kb-article .article-content > :first-child { margin-top: 0; }
.ec-kb-article .article-content p { margin: 0 0 1.1em; }
.ec-kb-article .article-content p.lead { font-size: 18.5px; line-height: 1.6; color: #4a4744; }
.ec-kb-article .article-content h2 { margin: 2em 0 .6em; padding-top: 1.2em; border-top: 1px solid #efece8; font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -.015em; color: #141414; scroll-margin-top: 24px; }
.ec-kb-article .article-content h3 { margin: 1.6em 0 .5em; font-size: 18.5px; font-weight: 600; line-height: 1.35; color: #141414; }
.ec-kb-article .article-content :is(ul, ol) { margin: 0 0 1.2em; padding-left: 1.4em; }
.ec-kb-article .article-content li { margin-bottom: .45em; }
.ec-kb-article .article-content li::marker { color: #ff6600; }
.ec-kb-article .article-content a { color: #c24e00; text-decoration: underline; text-decoration-color: rgba(194, 78, 0, .35); text-underline-offset: 3px; }
.ec-kb-article .article-content a:hover { text-decoration-color: currentColor; }
.ec-kb-article .article-content :not(pre) > code { padding: .12em .4em; border-radius: 5px; background: #f3f1ee; font: .86em/1.4 'JetBrains Mono', ui-monospace, Consolas, monospace; color: #9a3d00; }
.ec-kb-article .article-content pre {
    margin: 0 0 1.4em;
    padding: 18px 20px;
    border: 0;
    border-radius: 12px;
    background: #141414;
    color: #ece9e5;
    font: 13.5px/1.65 'JetBrains Mono', ui-monospace, Consolas, monospace;
    white-space: pre;
    overflow-x: auto;
}
.ec-kb-article .article-content pre code { padding: 0; background: none; color: inherit; font: inherit; }
.ec-kb-article .article-content table { width: 100%; margin: 0 0 1.4em; border-collapse: separate; border-spacing: 0; border: 1px solid #e7e4e0; border-radius: 12px; overflow: hidden; font-size: 14.5px; }
.ec-kb-article .article-content :is(th, td) { padding: 10px 14px; border: 0; border-bottom: 1px solid #efece8; text-align: left; vertical-align: top; }
.ec-kb-article .article-content tr:last-child > td { border-bottom: 0; }
.ec-kb-article .article-content th { background: #f8f7f5; font-weight: 600; color: #141414; }
.ec-kb-article .article-content img { max-width: 100%; height: auto; border-radius: 10px; }
.ec-kb-article .article-content blockquote { margin: 0 0 1.2em; padding: 4px 0 4px 18px; border-left: 3px solid #ff6600; color: #4a4744; }
.ec-kb-article .article-content .alert { margin: 0 0 1.4em; padding: 14px 18px; border: 0; border-left: 3px solid #d69e2e; border-radius: 10px; background: #fdf6e7; color: #5c4210; font-size: 15px; }
.ec-kb-article .article-content .alert-info { border-left-color: #2563a8; background: #eef4fb; color: #1e3d63; }
.ec-kb-article .article-content .alert-danger { border-left-color: #c53030; background: #fdeeee; color: #6b1d1d; }
.ec-kb-article .article-content .alert-success { border-left-color: #1f9d55; background: #ebf7f0; color: #14532d; }

/* Avaliação */
.ec-kb-rate { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 22px; background: #ffffff; border: 1px solid #e7e4e0; border-radius: 14px; }
.ec-kb-rate-text { display: flex; flex-direction: column; gap: 2px; }
.ec-kb-rate-text b { font-size: 15.5px; font-weight: 600; }
.ec-kb-rate-text span { font-size: 13px; color: #6d6a66; }
.ec-kb-rate-actions { display: flex; gap: 8px; }
.ec-kb .ec-kb-btn-soft { padding: 8px 18px; border: 1px solid #e7e4e0; border-radius: 10px; background: #ffffff; font-weight: 600; color: #141414; }
.ec-kb .ec-kb-btn-soft:hover, .ec-kb .ec-kb-btn-soft:focus-visible { border-color: #ff8533; background: #fff1e6; color: #c24e00; }

/* Chamada final */
.ec-kb-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 26px 30px;
    border-radius: 16px;
    background:
        radial-gradient(60% 160% at 100% 0%, rgba(255, 102, 0, .28), transparent 60%),
        linear-gradient(135deg, #0d0d0d 0%, #1a1005 55%, #0d0d0d 100%);
    color: #bdb8b2;
}
.ec-kb-cta h2 { margin: 0 0 4px; font-size: 19px; font-weight: 700; color: #ffffff; }
.ec-kb-cta p { margin: 0; font-size: 14px; }
.ec-kb-cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ec-kb-cta .btn { padding: 10px 18px; border-radius: 10px; font-weight: 600; }
.ec-kb .ec-kb-btn-ghost { border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06); color: #ffffff; }
.ec-kb .ec-kb-btn-ghost:hover, .ec-kb .ec-kb-btn-ghost:focus-visible { background: rgba(255, 255, 255, .12); color: #ffffff; }

@media (max-width: 1199px) {
    .ec-kb-read { grid-template-columns: minmax(0, 1fr); }
    .ec-kb-read > .ec-kb-toc { grid-column: 1; grid-row: auto; position: static; }
}
@media (max-width: 767px) {
    body:has(.ec-kb) .main-header > .container { padding: 22px calc(var(--ec-gutter) + 20px); }
    .ec-kb-article { padding: 24px 20px; }
    .ec-kb-article .article-content { font-size: 16px; }
    .ec-kb-searchbar { padding-left: 14px; }
    .ec-kb-searchbar .btn { padding: 0 16px; }
    .ec-kb-list a { padding: 14px 16px; }
    .ec-kb-cta { padding: 22px 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .ec-kb-card, .ec-kb-searchbar, .ec-kb-tag, .ec-kb-list a { transition: none; }
    .ec-kb-card:hover { transform: none; }
}

/* v31 — base de conhecimento usa a largura toda; botão Editar (admin) sem cobrir o título */
body:has(.ec-kb) .main-grid { display: block; }
body:has(.ec-kb) .main-grid > .main-content { width: 100%; max-width: none; padding: 0; }
.ec-kb-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.ec-kb-card:has(.ec-kb-edit), .ec-kb-list a:has(.ec-kb-edit) { padding-right: 84px; }
.ec-kb-card { grid-template-rows: auto 1fr auto; }
.ec-kb-card .ec-kb-count { grid-column: 2; align-self: end; margin-top: 6px; }
.ec-kb-card-ico { grid-row: 1 / span 3; align-self: start; }

/* Topo: nome completo do campo "first name", cortado com reticências se for muito longo */
.main-top .top-nav > li.my-account > a .ec-user-name,
.app-nav .top-nav > li.my-account > a .ec-user-name {
    display: inline-block;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* v32 — base de conhecimento: artigo ocupa a largura toda; títulos e temas em tom escuro */
.ec-kb-read { grid-template-columns: minmax(0, 1fr) 260px; }
.ec-kb .ec-kb-card-body b,
.ec-kb .ec-kb-item-body b { color: #141414; }
.ec-kb .ec-kb-card:hover .ec-kb-card-body b,
.ec-kb .ec-kb-list a:hover .ec-kb-item-body b { color: #c24e00; }
.ec-kb a.ec-kb-tag { color: #3d3a37; }
.ec-kb a.ec-kb-tag:hover, .ec-kb a.ec-kb-tag:focus-visible { color: #c24e00; }
.ec-kb-article:has(.ec-kb-article-tools) { padding-top: 64px; }

/* v34 — base de conhecimento: tipografia um pouco menor, no padrão do resto do portal */
body:has(.ec-kb) .main-header-title { font-size: clamp(22px, 2.3vw, 28px); }
.ec-kb-article { padding: 32px 40px; }
.ec-kb-article:has(.ec-kb-article-tools) { padding-top: 56px; }
.ec-kb-article .article-content { font-size: 15px; line-height: 1.7; }
.ec-kb-article .article-content p.lead { font-size: 16.5px; line-height: 1.6; }
.ec-kb-article .article-content h2 { margin: 1.8em 0 .55em; padding-top: 1.1em; font-size: 20px; }
.ec-kb-article .article-content h3 { margin: 1.5em 0 .45em; font-size: 16.5px; }
.ec-kb-article .article-content pre { padding: 16px 18px; font-size: 13px; }
.ec-kb-article .article-content table { font-size: 13.5px; }
.ec-kb-article .article-content .alert { font-size: 14px; }
.ec-kb-toc a { font-size: 13px; }
@media (max-width: 767px) {
    .ec-kb-article { padding: 22px 18px; }
    .ec-kb-article .article-content { font-size: 15px; }
}

/* v35 — item "Contratar Serviço" (menu de visitante) com o mesmo ícone de Nova Contratação */
.app-nav-secondary .menu-primary > li[menuItemName="Contratar Serviço"] > a > svg, .app-nav-secondary .menu-primary > li[menuItemName="Contratar Serviço"] > a > img,
.app-nav-secondary .menu-primary > li[menuItemName="Contratar serviço"] > a > svg, .app-nav-secondary .menu-primary > li[menuItemName="Contratar serviço"] > a > img,
.app-nav-secondary .menu-primary > li[menuItemName="Contratar Serviços"] > a > svg, .app-nav-secondary .menu-primary > li[menuItemName="Contratar Serviços"] > a > img,
.app-nav-secondary .menu-primary > li[menuItemName="Contratar serviços"] > a > svg, .app-nav-secondary .menu-primary > li[menuItemName="Contratar serviços"] > a > img { display: none; }
.app-nav-secondary .menu-primary > li[menuItemName="Contratar Serviço"] > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Contratar serviço"] > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Contratar Serviços"] > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Contratar serviços"] > a::before {
    content: "";
    flex: none;
    display: inline-block;
    width: 22px;
    height: 22px;
    margin-right: 14px;
    vertical-align: middle;
    background-color: currentColor;
    opacity: .75;
    -webkit-mask: var(--ec-icon) center / contain no-repeat;
            mask: var(--ec-icon) center / contain no-repeat;
    transition: opacity .15s, background-color .15s, transform .15s;
}
.app-nav-secondary .menu-primary > li[menuItemName="Contratar Serviço"]:hover > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Contratar serviço"]:hover > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Contratar Serviços"]:hover > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Contratar serviços"]:hover > a::before { opacity: 1; transform: translateX(1px); }
.app-nav-secondary .menu-primary > li[menuItemName="Contratar Serviço"].active > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Contratar serviço"].active > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Contratar Serviços"].active > a::before,
.app-nav-secondary .menu-primary > li[menuItemName="Contratar serviços"].active > a::before { opacity: 1; background-color: #ff8533; }
.app-nav-secondary .menu-primary > li[menuItemName="Contratar Serviço"] > a,
.app-nav-secondary .menu-primary > li[menuItemName="Contratar serviço"] > a,
.app-nav-secondary .menu-primary > li[menuItemName="Contratar Serviços"] > a,
.app-nav-secondary .menu-primary > li[menuItemName="Contratar serviços"] > a { --ec-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E"); }