/* Tema Casa Contente (04/11/2026, pedido do usuário): o visual do site novo (loja-casacontente) no Happy.
   Carregado por último em todas as páginas, sobre o styles.css e os estilos de cada janela. Mesmos tokens do site
   (loja/src/app/globals.css): fundo creme, superfície branca, bordas bege, texto grafite, o vermelho e o amarelo do
   logotipo; Manrope no texto e Fredoka (a mais próxima do desenho do logotipo) nos títulos, menus e botões.
   A marca de cada empresa (marca.js) continua mandando: ela grava as variáveis --marca-* no próprio <html>, por cima
   destes padrões. Pills de status e avisos guardam as cores de significado. */
@font-face{font-family:Manrope;src:url(/fontes/manrope.woff2) format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:Fredoka;src:url(/fontes/fredoka.woff2) format('woff2');font-weight:300 700;font-style:normal;font-display:swap}

:root{
 --cc-fundo:#faf8f5;--cc-fundo-alt:#f3efe9;--cc-superficie:#fff;--cc-borda:#e7e1d8;--cc-texto:#3c3c3a;--cc-suave:#6b655e;
 --cc-marca:#d71921;--cc-marca-escura:#b0141b;--cc-sorriso:#fdb917;--cc-sombra:0 1px 2px rgb(60 60 58 / .04),0 8px 24px -12px rgb(60 60 58 / .18);
 --fonte-texto:Manrope,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
 --fonte-titulo:Fredoka,ui-rounded,ui-sans-serif,system-ui,sans-serif;
 /* Os nomes antigos do styles.css apontam para a paleta nova. */
 --ink:var(--cc-texto);--muted:var(--cc-suave);--line:var(--cc-borda);--accent:var(--cc-marca);--lime:var(--cc-sorriso);
 /* Padrão da barra e do botão principal quando a empresa não tem marca própria. */
 --marca-fundo:#fff;--marca-texto:var(--cc-texto);--marca-texto-2:var(--cc-suave);--marca-borda:var(--cc-borda);
 --marca-suave:var(--cc-fundo-alt);--marca-destaque:#fdecec;--marca-destaque-texto:var(--cc-marca-escura);
 --marca-botao:var(--cc-marca);--marca-botao-hover:var(--cc-marca-escura);--marca-botao-texto:#fff;
 font-family:var(--fonte-texto);color:var(--cc-texto);background:var(--cc-fundo)
}
body{background:var(--cc-fundo);color:var(--cc-texto);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,.brand,.barra-marca,.eyebrow,.gaveta-grupo,.stat strong,dialog h2,.login-form h1{font-family:var(--fonte-titulo);letter-spacing:-.02em}
h1,h2{font-weight:600}h3{font-weight:700}
h1{letter-spacing:-.025em}
.heading p,.module p,.small.muted,.muted{color:var(--cc-suave)}
a:not([class]){color:var(--cc-marca)}a:not([class]):hover{color:var(--cc-marca-escura)}
:where(a,button,summary,[role=button],[tabindex]):focus-visible{outline:2px solid var(--cc-marca);outline-offset:2px}

/* Botões: pílulas, o principal no vermelho da marca e com a fonte dos títulos, como o "Comprar" do site. */
button{border-radius:999px;border-color:var(--cc-borda);background:var(--cc-superficie);color:var(--cc-texto);padding:11px 20px;transition:background-color .15s,border-color .15s,color .15s,transform .15s}
button:hover{background:var(--cc-fundo-alt)}
button.primary{font-family:var(--fonte-titulo);font-weight:500;letter-spacing:.01em}
button.primary:hover{background:var(--marca-botao-hover)}
button.subtle,button.link{border-radius:10px}
/* Botão que é cartão (a pílula de 999 px só serve para botão de uma linha). */
button.cx-item{border-radius:14px}
button.rotina{border-radius:14px;border:1px solid var(--cc-borda);border-left-width:4px;align-content:start;background:var(--cc-superficie)}
button.lime{background:var(--cc-sorriso);color:var(--cc-texto)}
button.perigo{color:var(--cc-marca-escura)}
.barra button,.tabs button,.dialog-x{border-radius:12px}

/* Campos: cantos de 12 px, borda bege e o anel na cor da marca ao focar. */
input,select,textarea{border-color:var(--cc-borda);border-radius:12px;background:var(--cc-superficie);color:var(--cc-texto);transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--cc-marca);box-shadow:0 0 0 3px rgb(215 25 33 / .14)}
input[type=checkbox],input[type=radio]{accent-color:var(--cc-marca)}
label{color:var(--cc-texto)}

/* Superfícies: cartões de 16 px com borda bege; os cartões de janela sobem de leve ao passar o mouse (o card do site). */
.panel,.stat,dialog,.notice{border-color:var(--cc-borda)}
.panel,.stat{border-radius:16px;background:var(--cc-superficie)}
.panel-head{border-bottom-color:var(--cc-borda)}
.item{border-bottom-color:var(--cc-borda)}
.stat.featured{background:var(--cc-texto);border-color:var(--cc-texto)}
.module{color:var(--cc-texto);border-radius:16px;border:1px solid var(--cc-borda);background:var(--cc-superficie);transition:transform .2s,box-shadow .2s,border-color .2s}
.module:hover,a.module:hover{background:var(--cc-superficie);transform:translateY(-2px);box-shadow:var(--cc-sombra);border-color:#ddd5c9}
.module .symbol{background:var(--cc-fundo-alt);color:var(--cc-marca);border-radius:14px}
.module:hover .symbol{background:#fdecec}
.module h2,.module h3{font-family:var(--fonte-titulo);font-weight:600;font-size:1.12rem;letter-spacing:-.01em}
/* Cartão das janelas (04/11/2026, pedido do usuário): o título ao lado do ícone, bem espaçado; a descrição embaixo; o
   "Abrir" no pé, à direita. */
.module{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr auto;column-gap:18px;row-gap:14px;align-items:center}
.module .symbol{grid-column:1;grid-row:1}
.module h2,.module h3{grid-column:2;grid-row:1;margin:0;line-height:1.25}
.module p{grid-column:1/-1;grid-row:2;align-self:start;margin:0}
.module .abrir{grid-column:1/-1;grid-row:3;justify-self:end;margin-top:0}
.module .badge{grid-column:1/-1;justify-self:start}
/* Grade do Início: 4 colunas no computador (acima de 1150 px); 2 no tablet e 1 no celular, como antes. */
@media (min-width:1151px){.module-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.module .abrir{color:var(--cc-marca);font-weight:600}
.notice{background:var(--cc-fundo-alt);color:var(--cc-texto);border-radius:14px}
.notice.alerta{border-color:#f3b4b6;background:#fdf1f1;color:var(--cc-marca-escura)}
dialog{border-radius:24px;background:var(--cc-superficie);color:var(--cc-texto);box-shadow:0 30px 80px -20px rgb(60 60 58 / .35)}
/* Janela fechada nunca aparece (uma regra com display:grid/flex anula o esconder do navegador e a janela fica solta
   no fim da página: aconteceu com o Assistente). */
dialog:not([open]){display:none!important}
dialog::backdrop{background:rgb(60 60 58 / .45)}
.avatar{background:var(--cc-fundo-alt);color:var(--cc-texto)}

/* Etiquetas: pílulas, como no site. As cores de situação (verde, azul, âmbar, vermelho) não mudam. */
.badge{border-radius:999px;padding:5px 11px}
.badge.gray{background:var(--cc-fundo-alt);color:var(--cc-suave)}
.chip{border-color:var(--cc-borda)}
.chip.ativo,.chip.active,#prod-abrir-filtros.ativo{background:var(--cc-texto);color:#fff;border-color:var(--cc-texto)}

/* Abas: sublinhado amarelo do "sorriso" no item aberto, como o menu do site. */
.tabs{border-bottom-color:var(--cc-borda)}
.tabs button{color:var(--cc-suave);border-radius:10px 10px 0 0}
.tabs button:hover{color:var(--cc-texto);background:transparent}
.tabs button.active{color:var(--cc-texto);border-bottom-color:var(--cc-sorriso)}

/* Barra de cima: branca e translúcida, com a borda fina do cabeçalho do site. */
.barra{backdrop-filter:saturate(1.4) blur(8px);-webkit-backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--marca-borda)}
.barra-marca{font-weight:600;font-size:1.12rem}
.barra-marca img{filter:none}
.barra .badge.demo{background:var(--cc-fundo-alt);color:var(--cc-suave)}
.barra-busca{border-radius:999px!important;background:var(--cc-fundo)!important}
.barra-busca:hover{background:var(--cc-fundo-alt)!important}
.barra .avatar{background:var(--cc-fundo-alt);color:var(--cc-texto)}

/* Gaveta: branca, grupos na fonte dos títulos, item aberto em vermelho claro. */
.gaveta-item{border-radius:12px;font-weight:600}
.gaveta-item .icon{color:var(--cc-suave)}
.gaveta-item.active .icon{color:var(--cc-marca)}
.gaveta-grupo{font-weight:600;letter-spacing:.06em}

/* Atalho dos portais (barra de cima, à esquerda do usuário): a janelinha com cada portal da pessoa. Cores próprias, para não
   herdar o texto claro da barra de uma empresa com marca escura. */
.portais-menu{position:relative}
.barra-portais{display:grid;place-items:center;width:40px;height:40px;padding:0!important}
.barra-portais:hover,.barra-portais[aria-expanded=true]{background:var(--marca-suave)}
.portais-lista{position:absolute;right:0;top:calc(100% + 10px);z-index:1300;width:min(640px,calc(100vw - 20px));max-height:min(78vh,620px);overflow:auto;display:grid;gap:2px;padding:8px;background:var(--cc-superficie);color:var(--cc-texto);border:1px solid var(--cc-borda);border-radius:20px;box-shadow:0 24px 60px -20px rgb(60 60 58 / .4)}
.portais-lista[hidden]{display:none}
.portais-colunas{columns:2;column-gap:6px}.portais-colunas .portais-item{break-inside:avoid;margin-bottom:2px}@media (max-width:600px){.portais-colunas{columns:1}}
.portais-titulo{font-family:var(--fonte-titulo);font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--cc-suave);padding:8px 12px 4px}
.portais-item{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:14px;color:var(--cc-texto);text-decoration:none}
.portais-item:hover,.portais-item:focus-visible{background:var(--cc-fundo-alt);color:var(--cc-texto)}
.portais-item .icon{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:12px;background:var(--cc-fundo-alt);color:var(--cc-marca)}
.portais-item b{display:block;font-family:var(--fonte-titulo);font-weight:600;font-size:1rem}
.portais-item small{display:block;margin-top:2px;color:var(--cc-suave);line-height:1.35}
.portais-item.atual{background:#fdecec}.portais-item.atual small{color:var(--cc-marca-escura);font-weight:600}
/* Foto da pessoa no círculo (avatar): a foto cobre as iniciais; sem foto, ficam as iniciais. */
.avatar{position:relative;overflow:hidden}
.avatar-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.avatar.avatar-grande{width:96px;height:96px;font-size:1.8rem;flex:none}
.conta-foto{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
/* Menu do usuário (ícone no canto direito da barra): conta, ajuda, trocar senha e sair. No celular, o botão dos portais
   sai da barra e os portais entram neste menu. */
.usuario-menu{position:relative}
.barra-usuario{display:grid;place-items:center;width:40px;height:40px;padding:0!important;border-radius:999px!important}
.barra .barra-usuario .avatar{display:grid!important;width:34px;height:34px;font-size:.8rem}
.barra-usuario:hover .avatar,.barra-usuario[aria-expanded=true] .avatar{background:#fdecec;color:var(--cc-marca-escura)}
.usuario-topo{display:flex;gap:12px;align-items:center;padding:8px 12px 12px;margin-bottom:4px;border-bottom:1px solid var(--cc-borda)}
.barra .usuario-topo .avatar{display:grid!important;flex:none}
.usuario-topo b{display:block;font-family:var(--fonte-titulo);font-weight:600;font-size:1.02rem}
.usuario-topo small{display:block;color:var(--cc-suave)}
.usuario-acao{display:flex;align-items:center;justify-content:flex-start!important;gap:12px;width:100%;padding:11px 12px;border:0;border-radius:12px;background:transparent;color:var(--cc-texto);font:inherit;font-weight:600;text-align:left;text-decoration:none}
.usuario-acao:hover,.usuario-acao:focus-visible{background:var(--cc-fundo-alt);color:var(--cc-texto)}
.usuario-acao svg{color:var(--cc-suave);flex:none}
#logout.usuario-acao,#logout.usuario-acao svg{color:var(--cc-marca-escura)}
.usuario-portais{display:none;margin-top:4px;padding-top:4px;border-top:1px solid var(--cc-borda)}
@media (max-width:420px){.portais-menu{display:none}.usuario-portais{display:grid;gap:2px}.barra-usuario{width:36px;height:36px}.barra .barra-usuario .avatar{width:30px;height:30px}}
/* Cadastro de pessoas: lista de funcionários do Sankhya e o quadro de portais. */
.func-lista{max-height:260px;overflow:auto;gap:4px}
.func-item{display:grid;gap:2px;text-align:left;border-radius:14px;padding:10px 14px;width:100%}
.func-item small{color:var(--cc-suave)}
.func-item:disabled{opacity:.6}
.quadro-portais{border:1px solid var(--cc-borda);border-radius:16px;padding:12px 16px}
.quadro-portais legend{padding:0 6px;font-weight:700}
/* Entrada: o painel da marca em vermelho, com o traço amarelo do sorriso. */
.login{background:var(--cc-fundo)}
.login-brand{background:radial-gradient(120% 90% at 85% 15%,#e8333a 0%,var(--cc-marca) 45%,var(--cc-marca-escura) 100%)}
.login-brand h1{font-family:var(--fonte-titulo);font-weight:600;letter-spacing:-.03em}
.login-brand p{color:rgb(255 255 255 / .82)}
.login-brand .stroke{background:var(--cc-sorriso);border-radius:999px;height:5px}
.login-brand .brand img{filter:brightness(0) invert(1)}
.login-form{background:var(--cc-fundo)}
.login-form .eyebrow{color:var(--cc-marca)}
.demo-box{border-radius:16px;border-color:var(--cc-borda);background:var(--cc-superficie)}

/* Avisos rápidos e regras da senha. */
#toast{background:var(--cc-texto);border-radius:999px}
.regras-senha li.ok{color:#1f5f3a}
progress{accent-color:var(--cc-marca)}

/* Celular: a Fredoka é mais larga que a fonte de antes; a barra encolhe para nada passar da tela (o nome do portal
   ganha reticências se faltar lugar). */
@media (max-width:480px){.barra{gap:6px;padding:0 10px}.barra-marca{font-size:.9rem;gap:6px;padding-inline:4px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.barra-marca img{flex:none}.barra-dir{gap:2px;min-width:0}}
/* Até 420 px a barra mostra só a logo (como já faz com a marca da empresa); o nome do portal fica no topo do menu. */
@media (max-width:420px){.barra{padding:0 8px}.pilula-jornada{padding:6px 8px!important}.barra button.fila-ind{padding:6px 7px}.barra-marca{font-size:0;gap:0}.barra-portais{width:34px;height:34px}.barra-busca{padding:6px!important}.barra .barra-sino,.barra-menu{padding:6px}}
@media (prefers-reduced-motion:reduce){.module,button,.module:hover{transition:none;transform:none}}
@media print{body{background:#fff}}

/* Cabeçalho das janelas (04/11/2026, pedido do usuário: "os itens devem ficar alinhados"): as ações (filtros e botões) numa
   linha só, todas com a mesma altura e alinhadas pelo meio; o rótulo do filtro fica ao lado dele, não em cima. Quando não
   cabem ao lado do título, descem inteiras para a linha de baixo (alinhadas à esquerda), em vez de quebrar pela metade. */
button{line-height:1.3}
.heading{align-items:flex-start;gap:14px 28px}
.heading>.row{flex:0 1 auto;max-width:100%;align-items:center;gap:10px;margin-top:2px}
.heading>.row>label{display:flex;flex-direction:row;align-items:center;gap:8px;white-space:nowrap;color:var(--cc-suave);font-weight:600}
.heading>.row :is(button,select,input:not([type=checkbox]):not([type=radio])){height:44px;padding-top:0;padding-bottom:0}
.heading>.row button{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
.heading>.row select{padding-right:36px}

/* Painéis seguidos (04/11/2026, pedido do usuário: "essas divs ficaram coladas"): um painel logo depois do outro ganha o
   espaço de 18 px, a não ser que o pai já dê o espaço (grade ou pilha com gap). Aviso dentro de uma pilha não soma a margem
   dele ao gap. */
.panel+.panel,.panel+section,.panel+.two-col,section.panel+.notice{margin-top:18px}
:is(.stack,.two-col,.agenda,.module-grid,.mk-grade,.co-duas,.kpis,.cards)>.panel+.panel{margin-top:0}
.stack>.notice{margin-bottom:0}
/* Conteúdo logo abaixo da linha da barra do painel (04/11/2026, pedido do usuário: "os botões ficaram colados à linha"):
   chips e textos depois da .toolbar ou do .panel-head ganham 14 px de distância da linha. */
.panel>:is(.toolbar,.panel-head)+.chips{padding-top:14px}
.toolbar{align-items:center}
/* Janelas em uso (Happy Admin) */
.ju-lista{display:grid;gap:12px}
.ju-lista .panel+.panel{margin-top:0}
.ju-portal{padding:0}
.ju-topo{display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer}
.ju-topo .small{margin-left:auto}
.ju-acoes{padding:0 16px 8px;gap:8px}
.ju-grupo{margin:14px 16px 6px}
.ju-linha{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 16px;border-top:1px solid var(--cc-borda);cursor:pointer}
.ju-linha small{display:block;font-size:12px}
.ju-mover{padding:5px 12px;font-size:13px}
.ju-linha i{font-style:normal;color:var(--cc-suave)}
.ju-linha input{width:20px;height:20px;margin:0}

/* Ver como (Happy Admin): faixa da aba aberta como outra pessoa. */
.vercomo-faixa{position:fixed;left:50%;bottom:10px;transform:translateX(-50%);z-index:900;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 12px;max-width:calc(100vw - 20px);box-sizing:border-box;padding:8px 16px;border-radius:999px;background:var(--cc-texto);color:#fff;font-size:13px;box-shadow:var(--cc-sombra)}.vercomo-faixa button{padding:4px 12px;font-size:13px}@media print{.vercomo-faixa{display:none}}
.vercomo-fim{max-width:520px;margin:15vh auto;padding:24px;text-align:center}
.vc-tela{display:flex;flex-direction:column;gap:18px}.vc-tela>.heading{margin-bottom:0}.vc-tela>.notice{margin:0}.vc-tela>.panel{margin:0}.vc-busca{display:flex;flex-direction:column;gap:6px;max-width:420px;font-weight:600;font-size:14px}.vc-busca input{font-weight:400}
.vc-lista{display:flex;flex-direction:column;gap:18px}.vc-lista>.panel{margin:0}
.vc-grupo{display:flex;flex-direction:column;gap:12px}.vc-acesso{border:1px solid var(--cc-borda);border-radius:14px;padding:16px 18px;background:var(--cc-superficie)}.vc-acesso h3{margin:0 0 3px;font-family:var(--fonte-titulo);font-weight:600}.vc-topo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}.vc-topo button{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;font-size:14px}.vc-sub{display:block}.vc-pessoas{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--cc-borda)}.vc-pessoas button{padding:6px 12px;font-size:13px;display:inline-flex;align-items:center;gap:6px;max-width:100%}

/* Grupos de acesso (Happy Admin). */
.gr-tela-geral{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:18px;align-items:start}.gr-tela-geral .panel{margin:0}@media (max-width:820px){.gr-tela-geral{grid-template-columns:minmax(0,1fr)}}
.gr-lista{padding:10px;display:flex;flex-direction:column;gap:3px}.gr-portal{margin:12px 8px 3px}.gr-portal:first-child{margin-top:4px}
.gr-item{display:block;width:100%;text-align:left;padding:9px 12px;border:0;border-radius:12px;background:transparent}.gr-item small{display:block;font-size:12px}.gr-item.ativo{background:#fdecec}
.gr-topo{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:6px}.gr-nome{display:flex;flex-direction:column;gap:4px;flex:1 1 240px;max-width:420px;font-weight:600;font-size:14px}.gr-nome input{font-weight:400}
.gr-bloco{border:1px solid var(--cc-borda);border-radius:14px;overflow:hidden}.gr-bloco>summary{cursor:pointer;padding:12px 16px}
.gr-tela{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:12px;padding:9px 16px;border-top:1px solid var(--cc-borda);cursor:pointer}.gr-tela small{display:block;font-size:12px}.gr-tela input{width:20px;height:20px;margin:0}.gr-aviso{color:#92400e}.gr-pessoas{margin:0;padding:0 16px 14px}

/* Celular primeiro (06/11/2026, pedido do usuário). O iPhone amplia a tela ao tocar num campo com letra menor que 16 px e não
   desfaz o zoom ao sair: todo campo tem 16 px em tela de toque ou estreita. Não travar o zoom do viewport: quem precisa ampliar continua podendo. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (pointer:coarse),(max-width:760px){input:not([type=checkbox],[type=radio],[type=range],[type=file]),select,textarea{font-size:16px!important}}