:root {
    --fundo: #f4f5f8; --superficie: #fff; --texto: #1b2130; --suave: #657085; --borda: #e2e5ec;
    --bom: #157a3e; --bom-f: #e3f6ea; --atencao: #9a5b00; --atencao-f: #fff1d6; --ruim: #b42318; --ruim-f: #fde4e1; --neutro-f: #eef0f4;
    --perigo: #c0362c; --raio: 14px; --sombra: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
    --cor-t: #fff;
    color-scheme: light;
}
/* cor da página/área: --c (tema claro) e --d (escuro) vêm no style de cada elemento */
body, [style*="--c"] { --cor: var(--c, #0a6b62); }
@media (prefers-color-scheme: dark) {
    :root {
        --fundo: #0f1218; --superficie: #171b23; --texto: #e7eaf0; --suave: #97a1b4; --borda: #29303c;
        --bom: #5ee08f; --bom-f: #143322; --atencao: #ffc35c; --atencao-f: #3b2c10; --ruim: #ff8a7d; --ruim-f: #3d1a17; --neutro-f: #222834;
        --perigo: #ff7a6e; --sombra: none;
        --cor-t: #0b0e13;
        color-scheme: dark;
    }
    body, [style*="--c"] { --cor: var(--d, #2bb3a3); }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--cor); }
code { font: 12.5px/1.4 ui-monospace, Consolas, monospace; background: var(--neutro-f); padding: 1px 5px; border-radius: 5px; }
small { color: var(--suave); }

/* ícones: SVG como máscara, pinta com a cor do texto */
.ico { display: inline-block; flex: none; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }

/* estrutura: menu lateral + conteúdo */
body:not(.entrar):not(.publico) { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.lateral { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--superficie); border-right: 1px solid var(--borda); padding: 18px 12px; display: flex; flex-direction: column; gap: 4px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--texto); padding: 4px 10px 14px; }
.marca img { width: 40px; height: auto; flex: none; }
.marca span { font-weight: 700; font-size: 1.05rem; line-height: 1.1; display: grid; }
.marca small { font-weight: 500; font-size: .75rem; }
.lateral nav { display: grid; gap: 2px; }
.lateral .grupo { margin: 14px 10px 4px; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); }
.lateral nav a, .lateral .rodape a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; color: var(--texto); text-decoration: none; font-size: .92rem; }
.lateral nav a .ico { color: var(--cor); }
.lateral nav a:hover, .lateral .rodape a:hover { background: var(--neutro-f); }
.lateral nav a[aria-current] { background: color-mix(in srgb, var(--cor) 14%, transparent); font-weight: 600; }
.lateral .rodape { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--borda); display: grid; gap: 2px; }
.lateral .rodape a { color: var(--suave); }
main { min-width: 0; padding: 24px clamp(16px, 3vw, 36px) 64px; max-width: 1400px; }

/* topo colorido de cada página */
.topo-pagina { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 20px; margin-bottom: 20px; border-radius: var(--raio);
    background: linear-gradient(120deg, color-mix(in srgb, var(--cor) 16%, var(--superficie)), var(--superficie) 70%); border: 1px solid color-mix(in srgb, var(--cor) 28%, var(--borda)); }
.topo-pagina .logo { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: var(--cor); color: var(--cor-t); flex: none; }
.topo-pagina .logo .ico { width: 30px; height: 30px; }
.topo-pagina h1 { margin: 0; font-size: 1.55rem; }
.topo-pagina p { margin: 2px 0 0; color: var(--suave); }
.topo-pagina .quando { font-size: .8rem; }
.topo-pagina > div:nth-child(2) { flex: 1; min-width: 220px; }
.acoes-topo { display: flex; gap: 8px; flex-wrap: wrap; }
h2 { font-size: 1.1rem; margin: 30px 0 12px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
h2 small { font-weight: 500; }
h2 a { font-size: .85rem; font-weight: 400; }

/* botões e formulários */
button, .botao { font: inherit; font-weight: 600; background: var(--cor); color: var(--cor-t); border: 0; border-radius: 10px; padding: 9px 16px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.botao.claro { background: var(--superficie); color: var(--texto); border: 1px solid var(--borda); }
button.ghost { background: transparent; color: var(--suave); padding: 6px 10px; font-weight: 500; }
.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 22px; box-shadow: var(--sombra); }
.form { max-width: 640px; display: grid; gap: 14px; }
.form h1 { margin: 0 0 6px; font-size: 1.4rem; }
label { display: grid; gap: 5px; font-size: .88rem; color: var(--suave); font-weight: 500; }
label.check { display: flex; gap: 8px; align-items: center; }
input, select, textarea { font: inherit; color: var(--texto); background: var(--fundo); border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px; width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--cor) 55%, transparent); outline-offset: 1px; border-color: var(--cor); }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--cor); }
.acoes { display: flex; gap: 12px; align-items: center; }
.acoes .perigo { background: transparent; color: var(--perigo); margin-left: auto; }
.erro { color: var(--ruim); background: var(--ruim-f); padding: 10px 12px; border-radius: 10px; margin: 0; }
.ok { background: var(--bom-f); color: var(--bom); padding: 10px 12px; border-radius: 10px; }
.nota { color: var(--suave); font-size: .9rem; }

/* selos, cartões, alertas */
.selo { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: .78rem; font-weight: 600; background: var(--neutro-f); color: var(--suave); white-space: nowrap; margin: 1px 2px 1px 0; }
.selo.bom { background: var(--bom-f); color: var(--bom); }
.selo.atencao { background: var(--atencao-f); color: var(--atencao); }
.selo.ruim { background: var(--ruim-f); color: var(--ruim); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 8px; }
.card { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px 16px; text-decoration: none; color: inherit; display: grid; gap: 2px; box-shadow: var(--sombra); }
.card span { color: var(--suave); font-size: .82rem; }
.card strong { font-size: 1.25rem; }
.card.bom strong { color: var(--bom); } .card.ruim strong { color: var(--ruim); }
.alertas { display: grid; gap: 8px; margin: 0 0 18px; }
.alertas p { margin: 0; display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: 12px; background: var(--atencao-f); color: var(--texto); }
.alertas .ico { color: var(--atencao); margin-top: 3px; }
.painel-info { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 14px; }
.painel-info > div { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px 16px; display: grid; gap: 4px; justify-items: start; }
.painel-info span { color: var(--suave); font-size: .82rem; }
.atalhos-linha { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.atalhos-linha a { padding: 7px 12px; border-radius: 99px; border: 1px solid var(--borda); background: var(--superficie); text-decoration: none; color: var(--texto); font-size: .88rem; }
.atalhos-linha a:hover { border-color: var(--cor); color: var(--cor); }

/* visão geral: blocos por área, cada um na cor do provedor */
.areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.area { display: grid; gap: 4px; justify-items: start; padding: 16px; border-radius: var(--raio); text-decoration: none; color: var(--texto); background: var(--superficie);
    border: 1px solid var(--borda); border-top: 4px solid var(--cor); box-shadow: var(--sombra); transition: transform .12s; }
.area:hover { transform: translateY(-2px); }
.area .logo { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--cor); color: var(--cor-t); margin-bottom: 4px; }
.area .logo .ico { width: 22px; height: 22px; }
.area > span:not(.logo):not(.selo) { color: var(--suave); font-size: .88rem; }

/* tabelas com busca e filtros */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.filtros .busca { position: relative; flex: 1 1 240px; max-width: 360px; }
.filtros .busca .ico { position: absolute; left: 11px; top: 11px; color: var(--suave); }
.filtros .busca input { padding-left: 36px; }
.filtros select { width: auto; max-width: 240px; }
.filtros .conta { color: var(--suave); font-size: .85rem; margin-left: auto; }
.tabela { overflow-x: auto; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--borda); vertical-align: top; }
th { color: var(--suave); font-weight: 600; font-size: .8rem; background: color-mix(in srgb, var(--cor) 6%, var(--superficie)); white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: color-mix(in srgb, var(--cor) 5%, transparent); }
td a { text-decoration: none; } td a:hover { text-decoration: underline; }
td.vazio { color: var(--suave); text-align: center; padding: 24px; }
details summary { cursor: pointer; color: var(--cor); }
.barra { display: inline-block; width: 70px; height: 6px; background: var(--neutro-f); border-radius: 9px; vertical-align: middle; overflow: hidden; }
.barra i { display: block; height: 100%; background: var(--cor); }

/* AgentFred: cartões de tenants */
.tenants { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.tenant { background: var(--superficie); border: 1px solid var(--borda); border-top: 4px solid var(--t); border-radius: var(--raio); padding: 16px; display: grid; gap: 8px; box-shadow: var(--sombra); }
.tenant header { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.tenant header b { font-size: 1.05rem; }
.tenant p { margin: 0; } .tenant .slug, .tenant .horas { color: var(--suave); font-size: .82rem; }
.tenant dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; font-size: .9rem; }
.tenant dt { color: var(--suave); }
.tenant dd { margin: 0; }
.tenant footer { display: flex; gap: 14px; padding-top: 8px; border-top: 1px solid var(--borda); }

.tenant.alerta { border-top-color: var(--atencao); }
.tenant header code { font-size: .75rem; }
.tenant .selos, .empresa .selos { margin: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.tenant footer, .app footer { flex-wrap: wrap; align-items: center; }
.tenant footer .off { color: var(--suave); font-size: .85rem; }

/* empresas: card com a cor da empresa e a inicial no lugar do logo */
.inicial { display: grid; place-items: center; font-weight: 800; font-size: 1.25rem; background: var(--cor); color: var(--cor-t); flex: none; }
.topo-pagina .logo.inicial { font-size: 1.7rem; }
.topo-pagina .acima { font-size: .85rem; margin: 0 0 2px; }
.empresas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.empresa { display: grid; gap: 12px; align-content: start; padding: 16px; border-radius: var(--raio); text-decoration: none; color: var(--texto); background: var(--superficie);
    border: 1px solid var(--borda); border-top: 4px solid var(--cor); box-shadow: var(--sombra); transition: transform .12s, border-color .12s; }
.empresa:hover { transform: translateY(-2px); border-color: var(--cor); }
.empresa header { display: flex; gap: 12px; align-items: center; }
.empresa header .inicial { width: 42px; height: 42px; border-radius: 12px; }
.empresa header div { display: grid; }
.empresa header b { font-size: 1.05rem; }
.empresa dl, .app dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; font-size: .9rem; }
.empresa dt, .app dt { color: var(--suave); }
.empresa dd, .app dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
dd.neg { color: var(--ruim); font-weight: 600; }
.empresa.solta { border-top-color: var(--atencao); --cor: var(--atencao); }
.empresa.nova { place-items: center; min-height: 120px; border: 2px dashed var(--borda); box-shadow: none; color: var(--suave); font-weight: 600; }
.empresa.nova:hover { color: var(--cor); }

/* dentro da empresa */
.ancoras { display: flex; gap: 6px; flex-wrap: wrap; margin: 18px 0 0; position: sticky; top: 0; z-index: 2; padding: 8px 0; background: var(--fundo); }
.ancoras a { padding: 6px 14px; border-radius: 99px; background: var(--superficie); border: 1px solid var(--borda); text-decoration: none; color: var(--texto); font-size: .88rem; }
.ancoras a:hover { border-color: var(--cor); color: var(--cor); }
h2[id] { scroll-margin-top: 56px; }
.apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.app { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px; display: grid; gap: 10px; box-shadow: var(--sombra); }
.app header { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.app header a { color: var(--texto); font-size: 1.05rem; }
.app .slug { margin: 0; color: var(--suave); font-size: .85rem; }
.app footer { display: flex; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid var(--borda); font-size: .9rem; }
/* barra: quanto da mensalidade o custo consome */
.composicao { display: block; height: 8px; border-radius: 9px; background: color-mix(in srgb, var(--bom) 30%, var(--neutro-f)); overflow: hidden; }
.composicao .c { display: block; height: 100%; background: var(--ruim); max-width: 100%; }
.duas { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 14px 20px; }
.duas h3 { margin: 8px 0 8px; font-size: .95rem; }
/* catálogos da Meta: cards com a foto do item */
.catalogo h3 { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; margin: 18px 0 10px; font-size: 1rem; }
.catalogo h3 small { font-weight: 500; }
.produtos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.produto { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra); display: grid; }
.produto img, .produto .sem-foto { width: 100%; aspect-ratio: 1; object-fit: cover; display: grid; place-items: center; background: var(--neutro-f); color: var(--suave); font-size: .85rem; }
.produto > div { padding: 10px 12px 12px; display: grid; gap: 4px; }
.produto b { font-size: .9rem; line-height: 1.3; }
.produto strong { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.produto p { margin: 2px 0 0; }
form.inline { display: inline; margin: 0; }
button.pequeno { padding: 4px 12px; font-size: .82rem; border-radius: 8px; }

/* celular: menu vira barra de cima com rolagem lateral */
@media (max-width: 860px) {
    body:not(.entrar):not(.publico) { grid-template-columns: 1fr; }
    .lateral { min-width: 0; position: sticky; top: 0; z-index: 5; height: auto; flex-direction: row; align-items: center; overflow-x: auto; padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--borda); }
    .lateral .marca { padding: 0 8px 0 0; } .lateral .marca span, .lateral .grupo { display: none; }
    .lateral nav, .lateral .rodape { display: flex; gap: 2px; margin: 0; padding: 0; border: 0; }
    .lateral nav a, .lateral .rodape a { white-space: nowrap; padding: 7px 9px; }
    main { padding: 16px 16px 48px; }
    .duas { grid-template-columns: 1fr; }
    .ancoras { top: 52px; }
}

/* tela de entrada */
.entrar { display: grid; grid-template-columns: minmax(360px, 520px) 1fr; min-height: 100vh; }
.entrar-form { display: grid; place-items: center; padding: 32px 16px; background: var(--superficie); }
.entrar-form .caixa { width: 100%; max-width: 360px; display: grid; gap: 14px; }
.entrar-form .marca { padding: 0 0 18px; }
.entrar-form h1 { margin: 0; font-size: 1.8rem; letter-spacing: -.01em; }
.entrar-form .sub { margin: -8px 0 6px; color: var(--suave); }
.entrar-form .form { gap: 12px; }
.entrar-form .grande { justify-content: center; padding: 12px; font-size: 1rem; }
.entrar-form .senha { display: flex; gap: 6px; }
.entrar-form .ou { display: flex; align-items: center; gap: 10px; color: var(--suave); font-size: .85rem; margin: 2px 0; }
.entrar-form .ou::before, .entrar-form .ou::after { content: ""; flex: 1; height: 1px; background: var(--borda); }
.entrar-form .miudo { font-size: .82rem; color: var(--suave); margin-top: 8px; }
.g_id_signin { min-height: 44px; }
.entrar-visual { position: relative; overflow: hidden; background: #0b2e2a; color: #fff; }
.entrar-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s; }
.entrar-visual img.on { opacity: 1; }
.entrar-visual .sombra { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(5,25,22,.85)); }
.entrar-visual .texto { position: absolute; left: clamp(32px, 6vw, 80px); right: 32px; bottom: clamp(32px, 8vh, 80px); max-width: 620px; }
.entrar-visual .kicker { margin: 0 0 8px; font-weight: 600; letter-spacing: .04em; opacity: .85; }
.entrar-visual h2 { font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1.15; margin: 0 0 18px; display: block; }
.entrar-visual .logos { display: flex; gap: 14px; opacity: .9; }
.entrar-visual .logos .ico { width: 24px; height: 24px; }
.entrar-visual .curva { position: absolute; left: -1px; top: 0; height: 100%; width: 70px; fill: var(--superficie); }
@media (max-width: 860px) {
    .entrar { grid-template-columns: 1fr; grid-template-rows: 220px auto; }
    .entrar-visual { grid-row: 1; } .entrar-visual .curva, .entrar-visual .logos { display: none; }
    .entrar-visual h2 { font-size: 1.3rem; margin: 0; } .entrar-visual .texto { bottom: 20px; left: 20px; }
}

/* políticas */
.doc main { max-width: 820px; padding-top: 32px; }
.doc main h1 { font-size: 2rem; margin: 0 0 6px; }
.doc main h2 { font-size: 1.2rem; margin: 32px 0 8px; display: block; }
.doc main h3 { font-size: 1rem; margin: 20px 0 6px; }
.doc main p, .doc main li { line-height: 1.65; }
.doc-resumo { color: var(--suave); font-size: 1.08rem; margin: 0; }
.doc-data { color: var(--suave); font-size: .85rem; }
.doc-topo { background: var(--superficie); border-bottom: 1px solid var(--borda); }
.doc-topo > div { max-width: 1180px; margin: 0 auto; padding: 12px 16px; display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }
.doc-marca { font-weight: 700; text-decoration: none; margin-right: auto; }
.doc-topo nav { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.doc-topo nav a { color: var(--suave); text-decoration: none; font-size: .92rem; }
.doc-topo nav a[aria-current] { color: var(--cor); font-weight: 600; }
.docs-lista { display: grid; gap: 10px; margin: 20px 0; }
.docs-lista a { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); text-decoration: none; color: var(--texto); }
.docs-lista a span { color: var(--suave); font-size: .9rem; }
.docs-lista a:hover { border-color: var(--cor); }
.tab-doc { border: 1px solid var(--borda); border-radius: 10px; background: var(--superficie); margin: 8px 0; }
.doc-rodape { max-width: 820px; margin: 0 auto; padding: 0 16px 40px; font-size: .9rem; }

/* portfólio público */
.publico main { max-width: 1180px; margin: 0 auto; }
.publico .hero { padding: 48px 0 24px; }
.publico .hero h1 { font-size: 2.4rem; margin: 0; }
.publico .hero p { color: var(--suave); font-size: 1.1rem; margin: 4px 0; }
.publico .sobre { color: var(--cor) !important; font-weight: 700; }
.publico .card strong { font-size: 1.8rem; color: var(--cor); }
.projetos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.projetos h3 { margin: 4px 0; }
.projetos small, .projetos .cliente, .projetos .tags { color: var(--suave); }
.projetos .tags { font-size: .85rem; }
footer { margin-top: 48px; color: var(--suave); }

/* composição da mensalidade: o que ela paga, como se a máquina fosse só do cliente */
dl.comp { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; margin: 0; font-size: .9rem; }
dl.comp dt { color: var(--suave); }
dl.comp dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
dl.comp .total { border-top: 1px solid var(--borda); padding-top: 6px; margin-top: 3px; color: var(--texto); font-weight: 700; }
.miudo { margin: 0; color: var(--suave); font-size: .8rem; }
.miudo .neg { color: var(--ruim); font-weight: 600; }
.pedidos { align-items: start; }
.pedidos h3 { margin: 0 0 10px; }
.acoes-linha { display: inline-flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; white-space: nowrap; }
.duas.pedidos { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); }
@media (max-width: 900px) { .duas.pedidos { grid-template-columns: 1fr; } }
/* flechinha no canto do card: vai direto ao site da empresa */
.ir-site { position: absolute; top: 14px; right: 12px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--suave); }
.ir-site:hover, .ir-site:focus-visible { background: var(--neutro-f); color: var(--texto); }
.ir-site .ico { width: 16px; height: 16px; }

/* hospedagem de cada site, no estilo do painel do hPanel */
.hosp-cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 18px 20px; margin-bottom: 14px; box-shadow: var(--sombra); }
.hosp-cartao h3 { margin: 0 0 12px; font-size: 1rem; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hosp-cartao h3 small, h2 small { font-weight: 500; color: var(--suave); font-size: .8rem; }
.hosp-topo { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; }
.hosp-id { display: flex; gap: 14px; align-items: center; }
.hosp-id b { display: block; font-size: 1.05rem; }
.hosp-id small { color: var(--suave); }
.hosp-logo { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--fundo); border: 1px solid var(--borda); flex: none; }
.hosp-logo .ico { width: 26px; height: 26px; }
.hosp-acoes { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.hosp-acoes .ico { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; }
.pilulas { grid-column: 1 / -1; margin: 0; padding-top: 12px; border-top: 1px solid var(--borda); display: flex; gap: 8px; flex-wrap: wrap; }
.pilula { display: inline-flex; gap: 6px; align-items: center; padding: 5px 12px; border-radius: 99px; border: 1px solid var(--borda); font-size: .85rem; font-weight: 600; }
.pilula.bom { color: var(--bom); background: var(--bom-f); border-color: transparent; }
.pilula.ruim { color: var(--ruim); background: var(--ruim-f); border-color: transparent; }
dl.info { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: .9rem; }
dl.info dt { color: var(--suave); }
dl.info dd { margin: 0; overflow-wrap: anywhere; }
.hosp-tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.hosp-tres > dl + dl { padding-left: 18px; border-left: 1px solid var(--borda); }
.avatar { border-radius: 50%; vertical-align: -4px; margin-right: 6px; }
.hosp-info { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px 22px; }
.hosp-info h4 { margin: 0 0 8px; font-size: .78rem; text-transform: uppercase; letter-spacing: .5px; color: var(--suave); }
.hosp-duas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hosp-duas > .hosp-cartao { margin-bottom: 14px; }
.essenciais { list-style: none; margin: 0; padding: 0; }
.essenciais li { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--borda); }
.essenciais li:first-child { border-top: 0; padding-top: 0; }
.essenciais b { display: block; }
.essenciais small { color: var(--suave); }
.notas-psi { display: grid; grid-template-columns: auto 1fr; gap: 12px 14px; align-items: center; margin-bottom: 12px; }
.nota-psi { --cor-n: var(--bom); width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
    background: conic-gradient(var(--cor-n) calc(var(--n) * 1%), var(--neutro-f) 0); }
.nota-psi span { width: 50px; height: 50px; border-radius: 50%; background: var(--superficie); display: grid; place-items: center; font-weight: 800; color: var(--cor-n); }
.nota-psi.atencao { --cor-n: var(--atencao); } .nota-psi.ruim { --cor-n: var(--ruim); }
.notas-psi small { display: block; color: var(--suave); font-size: .82rem; }
.consumo { display: grid; gap: 12px; }
.uso-linha { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: .9rem; }
.uso-linha b { font-variant-numeric: tabular-nums; }
.barra-uso { grid-column: 1 / -1; height: 8px; border-radius: 9px; background: var(--neutro-f); overflow: hidden; }
.barra-uso i { display: block; height: 100%; background: var(--bom); }
.barra-uso.atencao i { background: var(--atencao); } .barra-uso.ruim i { background: var(--ruim); }
.hosp-resumo { margin: 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: .82rem; color: var(--suave); }
.hosp-resumo .ico { width: 14px; height: 14px; }
details summary { cursor: pointer; color: var(--c); font-weight: 600; margin: 12px 0 8px; }
@media (max-width: 900px) { .hosp-tres, .hosp-duas, .hosp-topo { grid-template-columns: 1fr; } .hosp-tres > dl + dl { padding-left: 0; border-left: 0; } .hosp-acoes { justify-content: flex-start; } }

/* card da empresa: o corpo é um link para a empresa e o rodapé tem os atalhos */
.empresa-corpo { display: grid; gap: 12px; align-content: start; color: inherit; text-decoration: none; }
.empresa-links { display: flex; flex-wrap: wrap; gap: 4px 14px; padding-top: 10px; margin-top: auto; border-top: 1px solid var(--borda); font-size: .85rem; }
.empresa-links a, .empresa-links button.link { color: var(--c, var(--texto)); font-weight: 600; text-decoration: none; }
.empresa-links a:hover, .empresa-links button.link:hover { text-decoration: underline; }
.empresa-links form.inline { display: inline; }
button.link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.empresa { grid-template-rows: 1fr auto; }

/* sino de avisos da visão geral */
.sino { position: relative; }
.sino-botao { display: inline-flex; gap: 6px; align-items: center; }
.sino-botao .ico { width: 18px; height: 18px; }
.sino-conta { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--neutro-f); color: var(--suave); font-size: .78rem; font-weight: 700; display: inline-grid; place-items: center; }
.sino-botao.tem-aviso .sino-conta { background: var(--atencao); color: #fff; }
.sino-lista { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; width: min(440px, 90vw); max-height: 70vh; overflow: auto; background: var(--superficie);
    border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: 0 12px 32px rgba(0,0,0,.18); padding: 12px; text-align: left; }
.sino-titulo { margin: 0 0 8px; font-weight: 700; }
.sino-lista ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sino-lista li { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: start; padding: 8px 10px; border-radius: 10px; background: var(--atencao-f); font-size: .88rem; }
.sino-lista li[hidden] { display: none; }
.sino-lista li .ico { width: 16px; height: 16px; color: var(--atencao); margin-top: 2px; }
.sino-tirar { background: none; border: 0; font-size: 1.1rem; line-height: 1; cursor: pointer; color: var(--suave); padding: 0 2px; }
.sino-tirar:hover { color: var(--texto); }
.sino-vazio { margin: 4px 0; color: var(--suave); font-size: .88rem; }
.sino-voltar { margin-top: 10px; background: none; border: 0; padding: 0; color: var(--suave); font: inherit; font-size: .82rem; text-decoration: underline; cursor: pointer; }

/* página da empresa: cada app aberto direto, com tudo dele */
.app-bloco { background: var(--superficie); border: 1px solid var(--borda); border-left: 4px solid var(--c); border-radius: var(--raio); margin: 0 0 18px; box-shadow: var(--sombra); scroll-margin-top: 56px; }
.app-bloco > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 16px 20px; }
.app-bloco > summary::-webkit-details-marker { display: none; }
.app-bloco > summary::before { content: "▸"; color: var(--suave); transition: transform .15s; }
.app-bloco[open] > summary::before { transform: rotate(90deg); }
.app-bloco[open] > summary { border-bottom: 1px solid var(--borda); }
.app-bloco-nome { font-size: 1.15rem; }
.app-bloco > summary .slug { flex-basis: 100%; color: var(--suave); font-size: .88rem; padding-left: 18px; }
.app-bloco-acoes { margin-left: auto; display: flex; gap: 8px; }
.app-bloco-corpo { padding: 16px 20px 6px; }
.app-bloco-corpo .cards { margin-top: 0; }
h3.secao { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin: 22px 0 10px; font-size: 1.02rem; scroll-margin-top: 56px; }
h3.secao small { color: var(--suave); font-weight: 500; font-size: .8rem; }
h3.secao a { font-size: .82rem; font-weight: 500; }

/* informações do plano/servidor: um cartão por assunto */
.info-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.info-tile { border: 1px solid var(--borda); border-radius: 12px; padding: 14px; background: var(--fundo); }
.info-tile header { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.info-tile header .ico { width: 18px; height: 18px; color: var(--c); }
.info-tile h4 { margin: 0; font-size: .82rem; text-transform: uppercase; letter-spacing: .5px; color: var(--suave); }
.info-tile dl { margin: 0; display: grid; gap: 9px; }
.info-tile dt { font-size: .76rem; color: var(--suave); }
.info-tile dd { margin: 2px 0 0; font-size: .92rem; overflow-wrap: anywhere; }
.copiavel { display: inline-flex; gap: 6px; align-items: center; max-width: 100%; }
.copiavel code { background: var(--superficie); border: 1px solid var(--borda); border-radius: 6px; padding: 2px 6px; overflow-wrap: anywhere; }
.copiar { background: none; border: 0; padding: 2px; cursor: pointer; color: var(--suave); display: inline-grid; place-items: center; border-radius: 6px; }
.copiar:hover, .copiar:focus-visible { color: var(--c); background: var(--superficie); }
.copiar .ico { width: 15px; height: 15px; }
.copiar.copiado { color: var(--bom); }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip { padding: 2px 9px; border-radius: 99px; background: var(--superficie); border: 1px solid var(--borda); font-size: .8rem; }

/* teste de velocidade em andamento: círculo girando, para ver que a página não travou */
.testando { display: inline-flex; gap: 10px; align-items: center; margin-left: 10px; color: var(--suave); font-size: .88rem; }
.testando[hidden] { display: none; }
.girando { width: 18px; height: 18px; border: 3px solid var(--neutro-f); border-top-color: var(--c); border-radius: 50%; animation: girar .8s linear infinite; flex: none; }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .girando { animation-duration: 2.4s; } }

/* ícones: imagem do site/empresa no quadradinho, e a cabecinha do Fred no canto das lojas do AgentFred */
.inicial { position: relative; }
.inicial.com-imagem { background: #fff; border: 1px solid var(--borda); padding: 4px; }
.inicial.com-imagem > img:first-child { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; }
.inicial .selo-fred { position: absolute; right: -6px; bottom: -6px; width: 22px; height: 22px; padding: 2px; background: #fff; border-radius: 50%;
    border: 1px solid var(--borda); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.logo.inicial .selo-fred { width: 24px; height: 24px; }
.app-bloco > summary .inicial { width: 34px; height: 34px; border-radius: 10px; font-size: .95rem; }
.empresa header .inicial { flex: none; }
[data-cards] > [hidden] { display: none; }