/* Tema SiteRápido da área do cliente e das páginas públicas (2026-10-24): a mesma cara do siterapido.com.br — fundo
   azul-noite com brilhos, logo com as listras de velocidade, Inter + Plus Jakarta Sans (arquivos locais em
   assets/fonts, sem Google), botões amarelos arredondados e cartões de vidro. A estrutura (faixa, cabeçalho, barra de
   menus, blocos, lateral e painéis) continua a do cliente.css; aqui só muda a roupa. Carregado depois do cliente.css
   pelo app/views/cliente-topo.php. Tudo preso em body.area: o painel administrativo (/atma/) não usa.

   Dois temas com as mesmas regras: as cores ficam em variáveis. Escuro é o padrão (igual ao site); o claro entra com
   html[data-tema="claro"], escolhido pelo cliente no botão de sol/lua do cabeçalho ou no menu "Olá, Nome" e guardado
   no navegador (localStorage "tema-cliente", lido no <head> antes de desenhar a página para não piscar). */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/inter-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+20A0-20C4, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/inter-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500 800; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+20A0-20C4, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500 800; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: italic; font-weight: 500 800; font-display: swap; src: url("../fonts/plus-jakarta-sans-italico-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+20A0-20C4, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: italic; font-weight: 500 800; font-display: swap; src: url("../fonts/plus-jakarta-sans-italico-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------------------------------------------------------------- cores: escuro (padrão) */
body.area {
    color-scheme: dark;
    --sr-bg: #070B14; --sr-bg-2: #0A1020; --sr-surface: #0E1526; --sr-surface-2: #141D33;
    --sr-amarelo: #FFC619; --sr-forte: #FFFFFF; --sr-texto: #EAF0FF; --sr-texto-2: #8C98B8; --sr-texto-3: #6B7899;
    --sr-link: #FFC619; --sr-link-2: #7DD3FC;
    --sr-borda: rgba(255, 255, 255, .08); --sr-borda-2: rgba(255, 255, 255, .14);
    --sr-veu-1: rgba(255, 255, 255, .03); --sr-veu-2: rgba(255, 255, 255, .06); --sr-veu-3: rgba(255, 255, 255, .1);
    --sr-vidro: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
    --sr-faixa-bg: rgba(7, 11, 20, .85); --sr-cabecalho-bg: rgba(7, 11, 20, .72); --sr-nav-bg: rgba(14, 21, 38, .7);
    --sr-sombra: 0 20px 50px -24px rgba(0, 0, 0, .8); --sr-sombra-menu: 0 20px 50px -10px rgba(0, 0, 0, .7);
    --sr-sombra-login: 0 40px 100px -40px rgba(0, 0, 0, .9), 0 0 80px -40px rgba(59, 130, 246, .45);
    --sr-brilho: radial-gradient(900px 520px at 8% -8%, rgba(29, 78, 216, .32), transparent 70%), radial-gradient(760px 460px at 100% 0%, rgba(8, 145, 178, .22), transparent 70%), radial-gradient(700px 420px at 50% 115%, rgba(180, 83, 9, .14), transparent 70%);
    --sr-hero: radial-gradient(600px 300px at 0% 0%, rgba(29, 78, 216, .45), transparent 70%), radial-gradient(500px 280px at 100% 0%, rgba(8, 145, 178, .35), transparent 70%);
    /* status: fundo translúcido + texto */
    --sr-ok-bg: rgba(52, 211, 153, .14); --sr-ok-tx: #6EE7B7; --sr-ok-bd: rgba(52, 211, 153, .32); --sr-ok-aviso: #A7F3D0;
    --sr-alerta-bg: rgba(251, 191, 36, .14); --sr-alerta-tx: #FCD34D; --sr-alerta-bd: rgba(251, 191, 36, .32); --sr-alerta-aviso: #FDE68A;
    --sr-erro-bg: rgba(248, 113, 113, .14); --sr-erro-tx: #FCA5A5; --sr-erro-bd: rgba(248, 113, 113, .35); --sr-erro-aviso: #FECACA;
    --sr-info-bg: rgba(56, 189, 248, .14); --sr-info-tx: #7DD3FC; --sr-info-bd: rgba(56, 189, 248, .35); --sr-info-aviso: #BAE6FD;
    --sr-laranja-bg: rgba(245, 158, 11, .16); --sr-laranja-tx: #FCD34D; --sr-laranja-bd: rgba(245, 158, 11, .35);
}

/* ---------------------------------------------------------------- cores: claro */
html[data-tema="claro"] body.area {
    color-scheme: light;
    --sr-bg: #F5F7FB; --sr-bg-2: #EEF2F8; --sr-surface: #FFFFFF; --sr-surface-2: #FFFFFF;
    --sr-forte: #0B1220; --sr-texto: #1E293B; --sr-texto-2: #55627D; --sr-texto-3: #6B7690;
    --sr-link: #B45309; --sr-link-2: #0369A1;
    --sr-borda: rgba(15, 23, 42, .09); --sr-borda-2: rgba(15, 23, 42, .16);
    --sr-veu-1: rgba(15, 23, 42, .025); --sr-veu-2: rgba(15, 23, 42, .045); --sr-veu-3: rgba(15, 23, 42, .07);
    --sr-vidro: linear-gradient(180deg, #FFFFFF, #FFFFFF);
    --sr-faixa-bg: #0A1020; --sr-cabecalho-bg: rgba(255, 255, 255, .82); --sr-nav-bg: rgba(255, 255, 255, .7);
    --sr-sombra: 0 18px 40px -24px rgba(15, 23, 42, .35); --sr-sombra-menu: 0 18px 40px -12px rgba(15, 23, 42, .25);
    --sr-sombra-login: 0 30px 80px -40px rgba(15, 23, 42, .4), 0 0 80px -40px rgba(59, 130, 246, .35);
    --sr-brilho: radial-gradient(900px 520px at 8% -8%, rgba(59, 130, 246, .14), transparent 70%), radial-gradient(760px 460px at 100% 0%, rgba(34, 211, 238, .12), transparent 70%), radial-gradient(700px 420px at 50% 115%, rgba(255, 198, 25, .12), transparent 70%);
    --sr-hero: radial-gradient(600px 300px at 0% 0%, rgba(59, 130, 246, .16), transparent 70%), radial-gradient(500px 280px at 100% 0%, rgba(34, 211, 238, .14), transparent 70%);
    --sr-ok-bg: #DCFCE7; --sr-ok-tx: #15803D; --sr-ok-bd: #BBF7D0; --sr-ok-aviso: #14532D;
    --sr-alerta-bg: #FEF3C7; --sr-alerta-tx: #B45309; --sr-alerta-bd: #FDE68A; --sr-alerta-aviso: #78350F;
    --sr-erro-bg: #FEE2E2; --sr-erro-tx: #B91C1C; --sr-erro-bd: #FECACA; --sr-erro-aviso: #7F1D1D;
    --sr-info-bg: #E0F2FE; --sr-info-tx: #0369A1; --sr-info-bd: #BAE6FD; --sr-info-aviso: #0C4A6E;
    --sr-laranja-bg: #FFF7E6; --sr-laranja-tx: #B45309; --sr-laranja-bd: #FCD9A0;
}

/* ---------------------------------------------------------------- base */
body.area {
    --sr-grad: linear-gradient(135deg, #3B82F6 0%, #22D3EE 100%);
    --sr-grad-amarelo: linear-gradient(135deg, #FFD84D 0%, #FFC619 45%, #FF9F1C 100%);
    --sr-titulo: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    /* Variáveis do app.css */
    --fundo: var(--sr-bg); --cartao: var(--sr-surface); --texto: var(--sr-texto); --suave: var(--sr-texto-2); --linha: var(--sr-borda);
    --ok: var(--sr-ok-tx); --ok-fundo: var(--sr-ok-bg); --alerta: var(--sr-alerta-tx); --alerta-fundo: var(--sr-alerta-bg);
    --erro: var(--sr-erro-tx); --erro-fundo: var(--sr-erro-bg); --neutro-fundo: var(--sr-veu-3); --info-fundo: var(--sr-info-bg);
    --escuro: var(--sr-bg-2); --raio: 16px;
    --ca-azul: var(--sr-link-2); --ca-tinta: var(--sr-texto);
    background-color: var(--sr-bg); background-image: var(--sr-brilho); background-attachment: fixed;
    color: var(--sr-texto); font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 15.5px; line-height: 1.6;
    -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column;
}
body.area > main { flex: 1; width: 100%; }
body.area h1, body.area h2, body.area h3 { font-family: var(--sr-titulo); letter-spacing: -.02em; color: var(--sr-forte); }
body.area a { color: var(--sr-link); }
body.area ::selection { background: var(--sr-amarelo); color: #0A0A0A; }
body.area :focus-visible { outline: 2px solid var(--sr-amarelo); outline-offset: 3px; }

/* Faixa de cima (escura nos dois temas, como uma barra de sistema) */
body.area .ca-faixa { background: var(--sr-faixa-bg); border-bottom: 1px solid rgba(255, 255, 255, .08); color: #8C98B8; }
body.area .ca-faixa__item { color: #A8B3CF; }
body.area .ca-faixa__item:hover { color: #fff; }
body.area .ca-faixa__sair { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; color: #fff; padding: 5px 16px; font-weight: 600; }
body.area .ca-faixa__sair:hover { background: rgba(255, 255, 255, .12); color: #fff; }
body.area .ca-contador { background: var(--sr-amarelo); color: #111; }

/* Cabeçalho com a logo do site */
body.area .ca-cabecalho { background: var(--sr-cabecalho-bg); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid var(--sr-borda); position: sticky; top: 0; z-index: 30; color: var(--sr-forte); }
body.area .ca-cabecalho__dentro { min-height: 76px; }
body.area .ca-marca { border: 0; padding: 0; gap: 12px; font-family: var(--sr-titulo); color: var(--sr-forte); }
.ca-logo { display: inline-flex; align-items: center; gap: 2px; font-family: var(--sr-titulo); font-weight: 800; font-style: italic; font-size: 26px; letter-spacing: -.04em; line-height: 1; }
.ca-logo__speed { display: grid; gap: 3px; margin-right: 6px; transform: skewX(-18deg); }
.ca-logo__speed i { display: block; height: 3px; border-radius: 3px; background: var(--sr-grad); }
.ca-logo__speed i:nth-child(1) { width: 14px; margin-left: 6px; }
.ca-logo__speed i:nth-child(2) { width: 20px; }
.ca-logo__speed i:nth-child(3) { width: 10px; margin-left: 10px; }
.ca-logo__site { color: var(--sr-forte); }
.ca-logo__rapido { background: var(--sr-grad-amarelo); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 4px; }
html[data-tema="claro"] .ca-logo__rapido { background: linear-gradient(135deg, #F59E0B 0%, #EA8A00 50%, #E36A00 100%); -webkit-background-clip: text; background-clip: text; }
.ca-marca__sufixo { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sr-texto-2); border: 1px solid var(--sr-borda-2); border-radius: 999px; padding: 4px 10px; font-style: normal; }
body.area .ca-links { align-items: center; gap: 4px; }
body.area .ca-links a { text-transform: none; letter-spacing: 0; font-size: 14.5px; font-weight: 500; color: var(--sr-texto-2); padding: 8px 14px; border-radius: 999px; }
body.area .ca-links a:hover, body.area .ca-links a.ativo { color: var(--sr-forte); background: var(--sr-veu-2); }
body.area .ca-links a.ca-links__destaque { background: var(--sr-grad-amarelo); color: #111; border: 0; font-family: var(--sr-titulo); font-weight: 700; padding: 10px 20px; margin-left: 10px; box-shadow: 0 0 0 1px rgba(255, 198, 25, .4), 0 10px 30px -8px rgba(255, 198, 25, .55); transition: transform .25s; }
body.area .ca-links a.ca-links__destaque:hover { background: var(--sr-grad-amarelo); color: #111; transform: translateY(-1px); }
body.area .ca-cabecalho__menu { color: var(--sr-forte); border: 1px solid var(--sr-borda-2); border-radius: 12px; width: 44px; height: 44px; font-size: 1.2rem; }

/* Botão de tema (sol/lua) */
.ca-tema { display: inline-grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 999px; border: 1px solid var(--sr-borda-2); background: var(--sr-veu-1); color: var(--sr-texto-2); cursor: pointer; padding: 0; transition: color .2s, background .2s; }
.ca-tema:hover { color: var(--sr-forte); background: var(--sr-veu-3); }
body.area .ca-cabecalho__dentro .ca-tema { margin-left: 4px; }
.ca-tema svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ca-tema .ca-tema__sol { display: none; }
html[data-tema="claro"] .ca-tema .ca-tema__sol { display: block; }
html[data-tema="claro"] .ca-tema .ca-tema__lua { display: none; }
.ca-tema-texto::after { content: "Tema claro"; }
html[data-tema="claro"] .ca-tema-texto::after { content: "Tema escuro"; }
body.area .ca-menu__caixa button.ca-menu__opcao { display: block; width: 100%; text-align: left; background: none; border: 0; font: inherit; font-size: .93rem; color: var(--sr-texto); padding: 10px 16px; border-radius: 9px; cursor: pointer; }
body.area .ca-menu__caixa button.ca-menu__opcao:hover { background: var(--sr-veu-2); color: var(--sr-link); }

/* Barra de menus da área logada */
body.area .ca-nav { background: var(--sr-nav-bg); border-bottom: 1px solid var(--sr-borda); }
body.area .ca-nav__item { text-transform: none; letter-spacing: 0; font-size: 14.5px; font-weight: 500; color: var(--sr-texto-2); min-height: 54px; }
body.area .ca-nav__item:hover, body.area .ca-nav__item.ativo, body.area .ca-menu:focus-within > .ca-nav__item { color: var(--sr-forte); background: var(--sr-veu-1); box-shadow: inset 0 -2px 0 var(--sr-amarelo); }
body.area .ca-menu__caixa { background: var(--sr-surface-2); border: 1px solid var(--sr-borda-2); border-radius: 14px; box-shadow: var(--sr-sombra-menu); padding: 6px; }
body.area .ca-menu__caixa a { color: var(--sr-texto); border-radius: 9px; }
body.area .ca-menu__caixa a:hover { background: var(--sr-veu-2); color: var(--sr-link); }
body.area .ca-notificacoes a.urgente { color: var(--sr-erro-tx); }

/* Blocos coloridos: os mesmos quatro, com cantos e gradientes no tom do site (texto branco nos dois temas) */
body.area .ca-bloco { border-radius: 20px; border: 1px solid var(--sr-borda-2); box-shadow: var(--sr-sombra); transition: transform .3s; }
body.area .ca-bloco, body.area .ca-bloco:hover { color: #fff; }
body.area .ca-bloco:hover { transform: translateY(-3px); filter: none; }
body.area .ca-bloco strong { font-family: var(--sr-titulo); font-weight: 800; letter-spacing: -.03em; }
body.area .ca-bloco span { background: rgba(0, 0, 0, .18); text-transform: none; letter-spacing: 0; font-size: .95rem; font-family: var(--sr-titulo); }
body.area .ca-bloco .ic { opacity: .3; }
body.area .ca-bloco--roxo { background: linear-gradient(135deg, #4F46E5, #7C3AED); }
body.area .ca-bloco--verde { background: linear-gradient(135deg, #047857, #0D9488); }
body.area .ca-bloco--vermelho { background: linear-gradient(135deg, #B91C1C, #BE185D); }
body.area .ca-bloco--azul { background: linear-gradient(135deg, #1D4ED8, #0E7490); }

/* Caixas, perfil, atalhos e listas */
body.area .ca-caixa, body.area .cartao, body.area .numero, body.area .msg, body.area .plano, body.area .kb-categoria {
    background: var(--sr-vidro), var(--sr-surface); border: 1px solid var(--sr-borda); border-radius: 18px; color: var(--sr-texto);
}
html[data-tema="claro"] body.area .ca-caixa, html[data-tema="claro"] body.area .cartao, html[data-tema="claro"] body.area .plano, html[data-tema="claro"] body.area .msg { box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 30px -20px rgba(15, 23, 42, .25); }
body.area .ca-caixa { overflow: hidden; }
body.area .ca-caixa__topo { background: var(--sr-veu-1); border-bottom: 1px solid var(--sr-borda); padding: 14px 18px; }
body.area .ca-caixa__topo h2 { color: var(--sr-forte); font-family: var(--sr-titulo); font-weight: 700; font-size: 1.02rem; }
body.area .ca-caixa__topo h2 .ic { color: var(--sr-link); }
body.area .ca-caixa--destaque, body.area .ca-caixa--destaque-azul, body.area .ca-caixa--destaque-verde, body.area .ca-caixa--destaque-cinza { border-top-width: 1px; border-top-color: var(--sr-borda); }
body.area .ca-caixa--destaque { box-shadow: inset 0 2px 0 #F59E0B; }
body.area .ca-caixa--destaque-azul { box-shadow: inset 0 2px 0 #38BDF8; }
body.area .ca-caixa--destaque-verde { box-shadow: inset 0 2px 0 #34D399; }
body.area .ca-caixa--destaque-cinza { box-shadow: inset 0 2px 0 #8C98B8; }
body.area .ca-botao-topo { border-radius: 999px; padding: 5px 13px; font-weight: 600; background: var(--sr-laranja-bg); color: var(--sr-laranja-tx); border: 1px solid var(--sr-laranja-bd); }
body.area .ca-botao-topo--azul { background: var(--sr-info-bg); color: var(--sr-info-tx); border-color: var(--sr-info-bd); }
body.area .ca-botao-topo--verde { background: var(--sr-ok-bg); color: var(--sr-ok-tx); border-color: var(--sr-ok-bd); }
body.area .ca-botao-topo--cinza { background: var(--sr-veu-2); color: var(--sr-texto-2); border-color: var(--sr-borda-2); }
body.area .ca-botao-topo:hover { filter: brightness(1.12); }
body.area .ca-perfil { color: var(--sr-texto-2); }
body.area .ca-perfil strong { color: var(--sr-forte); }
body.area .ca-botao-largo { background: var(--sr-grad-amarelo); color: #111; font-family: var(--sr-titulo); font-weight: 700; border-radius: 999px; padding: 11px; }
body.area .ca-botao-largo:hover { color: #111; background: var(--sr-grad-amarelo); filter: brightness(1.05); }
body.area .ca-atalhos a, body.area .ca-atalhos button { color: var(--sr-texto); border-top-color: var(--sr-borda); }
body.area .ca-atalhos a:hover, body.area .ca-atalhos button:hover { background: var(--sr-veu-1); color: var(--sr-link); }
body.area .ca-atalhos .ic { color: var(--sr-texto-3); }
body.area .ca-atalhos a.ativo { background: rgba(255, 198, 25, .14); color: var(--sr-link); }
body.area .ca-boasvindas { font-family: var(--sr-titulo); font-weight: 800; color: var(--sr-forte); letter-spacing: -.03em; }
body.area .ca-trilha { color: var(--sr-texto-3); border-bottom-color: var(--sr-borda); }
body.area .ca-trilha a { color: var(--sr-texto-2); }
body.area .ca-busca { border: 1px solid var(--sr-borda-2); border-radius: 999px; background: var(--sr-veu-1); padding: 0 22px; }
html[data-tema="claro"] body.area .ca-busca { background: #fff; }
body.area .ca-busca:focus-within { border-color: rgba(255, 198, 25, .7); box-shadow: 0 0 0 3px rgba(255, 198, 25, .18); }
body.area .ca-busca .ic { color: var(--sr-link); }
body.area .ca-busca input, body.area .ca-busca input[type=search], body.area .ca-busca input[type=text],
body.area .ca-busca input:focus { background: transparent; color: var(--sr-forte); border: 0; border-radius: 0; padding: 16px 0; box-shadow: none; }
body.area .ca-busca input::placeholder { color: var(--sr-texto-3); }
body.area .ca-lista__item { color: var(--sr-texto); border-top-color: var(--sr-borda); }
body.area a.ca-lista__item:hover { background: var(--sr-veu-1); }
body.area .ca-lista__item small { color: var(--sr-texto-3); }
body.area .ca-lista__item .destaque { color: var(--sr-link-2); }
body.area .ca-status { border-radius: 999px; padding: 2px 9px; }
body.area .ca-status--ok { background: var(--sr-ok-bg); color: var(--sr-ok-tx); }
body.area .ca-status--alerta { background: var(--sr-alerta-bg); color: var(--sr-alerta-tx); }
body.area .ca-status--erro { background: var(--sr-erro-bg); color: var(--sr-erro-tx); }
body.area .ca-status--neutro { background: var(--sr-veu-3); color: var(--sr-texto-2); }
body.area .ca-vazio { color: var(--sr-texto-3); }
body.area .ca-pacote strong { color: var(--sr-forte); }
body.area .ca-pacote em, body.area .ca-medidor p, body.area .ca-medidor span { color: var(--sr-texto-2); }
body.area .ca-atualizado { color: var(--sr-texto-3); }
/* Medidores (SVG do cliente/servico.php): trilho e número seguem o tema; o arco colorido continua o do PHP */
body.area .ca-medidor svg circle:first-child { stroke: var(--sr-veu-3); }
body.area .ca-medidor svg text { fill: var(--sr-forte); font-family: var(--sr-titulo); }
body.area.area--logado .cartao { border-radius: 18px; }

/* Botões, campos, tabelas, selos e avisos (componentes do app.css) */
body.area .botao { border-radius: 999px; font-family: var(--sr-titulo); font-weight: 700; background: var(--sr-grad-amarelo); color: #111; padding: 11px 22px; border: 0; box-shadow: 0 0 0 1px rgba(255, 198, 25, .35), 0 10px 30px -10px rgba(255, 198, 25, .5); transition: transform .25s, box-shadow .25s; }
body.area .botao:hover { filter: none; transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(255, 198, 25, .6), 0 14px 36px -10px rgba(255, 198, 25, .7); }
body.area .botao--sec, body.area .botao--escuro { background: var(--sr-veu-2); border: 1px solid var(--sr-borda-2); color: var(--sr-forte); box-shadow: none; font-weight: 600; }
body.area .botao--sec:hover, body.area .botao--escuro:hover { background: var(--sr-veu-3); box-shadow: none; }
body.area .botao--perigo { background: var(--sr-erro-bg); border: 1px solid var(--sr-erro-bd); color: var(--sr-erro-tx); box-shadow: none; }
body.area .botao--pequeno { padding: 7px 14px; }
body.area label { color: var(--sr-forte); font-weight: 600; }
body.area .campo small, body.area .suave { color: var(--sr-texto-2); }
body.area input[type=text], body.area input[type=email], body.area input[type=password], body.area input[type=number], body.area input[type=date], body.area input[type=search], body.area input[type=tel], body.area select, body.area textarea {
    background: var(--sr-veu-1); border: 1px solid var(--sr-borda-2); border-radius: 12px; color: var(--sr-forte); padding: 12px 14px;
}
html[data-tema="claro"] body.area input[type=text], html[data-tema="claro"] body.area input[type=email], html[data-tema="claro"] body.area input[type=password], html[data-tema="claro"] body.area input[type=number], html[data-tema="claro"] body.area input[type=date], html[data-tema="claro"] body.area input[type=tel], html[data-tema="claro"] body.area select, html[data-tema="claro"] body.area textarea { background: #fff; }
body.area input::placeholder, body.area textarea::placeholder { color: var(--sr-texto-3); }
body.area input:focus, body.area select:focus, body.area textarea:focus { outline: 0; border-color: rgba(255, 198, 25, .8); box-shadow: 0 0 0 3px rgba(255, 198, 25, .2); }
body.area select option { background: var(--sr-surface); color: var(--sr-forte); }
body.area input[type=checkbox], body.area input[type=radio] { accent-color: var(--sr-amarelo); }
body.area table { background: transparent; }
body.area th { background: var(--sr-veu-1); color: var(--sr-texto-3); border-bottom-color: var(--sr-borda); }
body.area td { border-bottom-color: var(--sr-borda); color: var(--sr-texto); }
body.area tbody tr:hover, body.area .ca-tabela tbody tr[onclick]:hover { background: var(--sr-veu-1); }
body.area .selo--ok { background: var(--sr-ok-bg); color: var(--sr-ok-tx); }
body.area .selo--alerta { background: var(--sr-alerta-bg); color: var(--sr-alerta-tx); }
body.area .selo--erro { background: var(--sr-erro-bg); color: var(--sr-erro-tx); }
body.area .selo--neutro { background: var(--sr-veu-3); color: var(--sr-texto-2); }
body.area .selo--info { background: var(--sr-info-bg); color: var(--sr-info-tx); }
body.area .selo--apagado { background: var(--sr-veu-2); color: var(--sr-texto-3); }
body.area .aviso { border-radius: 14px; }
body.area .aviso--ok { background: var(--sr-ok-bg); color: var(--sr-ok-aviso); border-color: var(--sr-ok-bd); }
body.area .aviso--erro { background: var(--sr-erro-bg); color: var(--sr-erro-aviso); border-color: var(--sr-erro-bd); }
body.area .aviso--info { background: var(--sr-info-bg); color: var(--sr-info-aviso); border-color: var(--sr-info-bd); }
body.area .aviso--alerta { background: var(--sr-alerta-bg); color: var(--sr-alerta-aviso); border-color: var(--sr-alerta-bd); }
body.area .lista-dados dt { color: var(--sr-texto-3); }
body.area .filtros a { background: var(--sr-veu-1); border-color: var(--sr-borda-2); color: var(--sr-texto-2); }
body.area .filtros a.ativo { background: var(--sr-amarelo); border-color: var(--sr-amarelo); color: #111; }
body.area .abas button { background: var(--sr-veu-1); border-color: var(--sr-borda-2); color: var(--sr-texto-2); border-radius: 999px; }
body.area .abas button.ativo { background: var(--sr-amarelo); border-color: var(--sr-amarelo); color: #111; }

/* Login e telas estreitas: cartão de vidro centralizado */
body.area .cartao--estreito { margin: 64px auto; padding: 34px 32px; border-color: var(--sr-borda-2); box-shadow: var(--sr-sombra-login); }
body.area .cartao--estreito h1 { font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; margin-bottom: 6px; }

/* Páginas públicas: planos, contratar, fatura, ajuda, termos */
body.area .hero, body.area .kb-topo { background: var(--sr-hero), var(--sr-surface); border: 1px solid var(--sr-borda); border-radius: 22px; color: var(--sr-forte); }
body.area .hero::after { background: radial-gradient(circle, rgba(255, 198, 25, .9), transparent 70%); opacity: .18; }
body.area .hero h1, body.area .kb-topo h1 { font-weight: 800; letter-spacing: -.03em; color: var(--sr-forte); }
body.area .hero p, body.area .kb-topo p { color: var(--sr-texto-2); }
body.area .plano { padding: 26px; transition: border-color .3s, transform .3s; }
body.area .plano:hover { border-color: var(--sr-borda-2); transform: translateY(-3px); }
body.area .plano__preco { font-family: var(--sr-titulo); color: var(--sr-forte); }
body.area .plano__itens li { border-top-color: var(--sr-borda); }
body.area .plano__itens li.destaque { color: var(--sr-forte); }
body.area .plano__ciclos, body.area .resumo-pedido, body.area .termos__indice { background: var(--sr-veu-1); border: 1px solid var(--sr-borda); }
body.area .plano__ciclos li span:last-child { color: var(--sr-forte); }
body.area .kb-categoria:hover { border-color: rgba(255, 198, 25, .55); box-shadow: inset 3px 0 0 var(--sr-amarelo); }
body.area .kb-item { border-bottom-color: var(--sr-borda); }
body.area .kb-artigo code, body.area .kb-dns li { background: var(--sr-veu-2); }
body.area .kb-dica { background: rgba(255, 198, 25, .1); }
body.area .kb-sugestoes { background: var(--sr-info-bg); border-color: var(--sr-info-bd); }
body.area .fatura__valor { font-family: var(--sr-titulo); color: var(--sr-forte); }
body.area .pix img { background: #fff; padding: 8px; border-radius: 14px; }
body.area .termos h2 { border-top-color: var(--sr-borda); }

/* Tickets e editor */
body.area .msg__topo strong { color: var(--sr-forte); }
body.area .msg--cliente { border-left: 3px solid var(--sr-texto-3); }
body.area .msg--equipe { border-left: 3px solid var(--sr-amarelo); }
body.area .msg--ia { border-left: 3px solid #22D3EE; }
body.area .msg--rascunho { background: var(--sr-info-bg); border-color: var(--sr-info-bd); }
body.area .msg__nota { background: var(--sr-info-bg); color: var(--sr-info-aviso); }
body.area .editor { background: var(--sr-veu-1); border-color: var(--sr-borda-2); }
html[data-tema="claro"] body.area .editor { background: #fff; }
body.area .editor__barra { background: var(--sr-veu-1); border-bottom-color: var(--sr-borda); }
body.area .editor__botao { color: var(--sr-texto-2); }
body.area .editor__botao:hover:not(:disabled), body.area .editor__botao[aria-pressed="true"] { background: var(--sr-veu-3); color: var(--sr-forte); border-color: transparent; }
body.area .editor__area pre, body.area .editor__area code, body.area .msg__corpo--html pre, body.area .msg__corpo--html code { background: var(--sr-veu-2); }
body.area .editor__area a, body.area .msg__corpo--html a { color: var(--sr-link-2); }
body.area .editor .editor__fonte { background: transparent; color: var(--sr-forte); }

/* Rodapé como o do site */
body.area .rodape { border-top: 1px solid var(--sr-borda); background: var(--sr-bg-2); color: var(--sr-texto-3); padding: 28px 16px 34px; margin-top: 40px; }
body.area .rodape a { color: var(--sr-texto-2); text-decoration: none; }
body.area .rodape a:hover { color: var(--sr-link); }

@media (max-width: 760px) {
    .ca-logo { font-size: 21px; }
    .ca-marca__sufixo { font-size: 10px; padding: 3px 8px; letter-spacing: .1em; }
    .ca-tema { width: 38px; height: 38px; }
    /* Celular: logo, tema e ☰ na mesma linha; os links (sem login) descem para a linha de baixo */
    body.area .ca-cabecalho__dentro .ca-tema { order: 1; margin-left: auto; }
    body.area .ca-cabecalho__menu { order: 2; margin-left: 0; }
    body.area .ca-links { order: 3; }
    body.area .ca-cabecalho__dentro { min-height: 64px; }
    body.area .ca-links a.ca-links__destaque { margin-left: 0; }
    body.area .ca-nav__item { box-shadow: none !important; }
    body.area .cartao--estreito { margin: 28px auto; padding: 26px 20px; }
}