: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 .ico { width: 30px; height: 30px; color: var(--c, #0a6b62); }
.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); }

/* 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; }
}

/* 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; }
}

/* 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); }