/* Painel administrativo com a identidade da Country Luxury.
   Sobrescreve o tema django-unfold (os seletores usam #ids para vencer as classes utilitárias do tema). */
@import url("https://fonts.googleapis.com/css2?family=Italiana&display=swap");

:root {
  --cl-creme: #F3EEE8;
  --cl-papel: #FFFDFB;
  --cl-tinta: #2F2824;
  --cl-tinta-2: #5E534B;
  --cl-noite: #2B2420;
  --cl-breu: #1E1815;
  --cl-areia: #C4AC96;
  --cl-linha: rgb(47 40 36 / .09);
  --cl-sombra: 0 1px 2px rgb(43 36 32 / .05), 0 14px 34px -20px rgb(43 36 32 / .35);
  --cl-raio: 16px;
}

/* os cinzas dos textos (#72655C, #776A61) passam do contraste mínimo de 4,5 sobre o creme e o branco */
/* ---------- fundo creme no lugar do branco ---------- */
html body { background: var(--cl-creme) !important; }
#main { background: var(--cl-creme); }
#main > div:first-child { background: transparent; border-color: var(--cl-linha); }

/* ---------- menu lateral escuro ---------- */
#nav-sidebar, #nav-sidebar-inner {
  background: linear-gradient(180deg, var(--cl-noite) 0%, var(--cl-breu) 100%);
  border-color: transparent;
  color: rgb(243 238 232 / .7);
}
#nav-sidebar :is(a, span, h2, div, button, p) { color: inherit; border-color: rgb(243 238 232 / .08); }
#nav-sidebar img[src*="monograma"] { filter: invert(94%) sepia(10%); }
#site-name { font: 400 1.4rem/1.1 "Italiana", serif; letter-spacing: .02em; color: var(--cl-creme); }
#nav-sidebar-apps h2 { color: var(--cl-areia); font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
#nav-sidebar-apps a { border-radius: 10px; transition: background .25s, color .25s, box-shadow .25s; }
#nav-sidebar-apps a:hover { background: rgb(243 238 232 / .07); color: #fff; }
#nav-sidebar-apps a.active {
  background: rgb(243 238 232 / .11); color: #fff;
  box-shadow: inset 3px 0 0 var(--cl-areia);
}
#nav-sidebar-apps a.active .material-symbols-outlined { color: var(--cl-areia); }
#nav-sidebar :is(.bg-base-100, .bg-white, .bg-base-50) { background: rgb(243 238 232 / .08); }
#nav-sidebar .bg-base-200 { background: var(--cl-areia); color: var(--cl-noite); }  /* avatar com a inicial */
/* bloco do usuário no pé do menu e as opções dele: o tema clareia o fundo no hover e o texto (creme) sumia */
#nav-sidebar [class*="hover:bg-base-100"]:hover { background: rgb(243 238 232 / .08); }
#nav-sidebar [class*="hover:bg-red-100"]:hover { background: rgb(224 138 126 / .16); color: #F4C2B9; }  /* Encerrar sessão */
/* a janela das opções do usuário é bg-white, que a regra acima deixa quase transparente: o menu aparecia por trás */
#nav-sidebar [x-show="openUserLinks"] { background: #362D28; border-color: rgb(243 238 232 / .12); box-shadow: 0 -12px 32px -8px rgb(0 0 0 / .55); }

/* ---------- cartões ---------- */
#content fieldset.module,
#content [id$="_set-group"],
#content .painel-cartao {
  background: var(--cl-papel);
  border: 1px solid var(--cl-linha);
  border-radius: var(--cl-raio);
  box-shadow: var(--cl-sombra);
}
#content [id$="_set-group"] { padding: .25rem; }
#content fieldset.module { overflow: hidden; min-width: 0; }  /* sem min-width, o bloco cresce com as listas de permissões */

/* ---------- abas em pílula ---------- */
#tabs-items {
  background: rgb(47 40 36 / .07) !important;
  padding: 5px; border-radius: 999px; gap: 2px;
  min-width: 0; overflow-x: auto; scrollbar-width: none;  /* no celular, encolhe em vez de empurrar o botão "…" para fora */
}
#tabs-wrapper > div { max-width: 100%; }
#tabs-items > a { border-radius: 999px !important; padding: .45rem 1rem !important; color: var(--cl-tinta-2); transition: background .25s, color .25s; }
#tabs-items > a:hover { background: rgb(47 40 36 / .06) !important; color: var(--cl-tinta); }
#tabs-items > a.active {
  background: var(--cl-noite) !important; color: var(--cl-creme) !important;
  box-shadow: 0 8px 18px -10px rgb(43 36 32 / .7) !important;
}

/* sub-abas das seções dentro de "Geral" */
#content fieldset.module ~ nav, #content .tab-wrapper nav { border-color: var(--cl-linha); }

/* ---------- campos ---------- */
#content :is(input[type=text], input[type=number], input[type=email], input[type=password], input[type=url], textarea, select) {
  background: #fff;
  border-color: rgb(47 40 36 / .14);
  border-radius: 10px;
  transition: border-color .2s, box-shadow .2s;
}
#content :is(input, textarea, select):focus {
  border-color: var(--cl-areia);
  box-shadow: 0 0 0 3px rgb(196 172 150 / .3);
  outline: 2px solid var(--cl-tinta); outline-offset: 1px;  /* a borda areia sozinha dava 2,1:1: o foco quase não aparecia */
}
/* a busca das listas fica dentro de uma caixa do tema, que já mostra o foco: sem isto, aparecia uma caixa dentro da outra */
#content #searchbar, #content #searchbar:focus { background: transparent; box-shadow: none; outline: none; }

/* ---------- barra de salvar ---------- */
#submit-row .absolute.inset-0 { background: rgb(243 238 232 / .82) !important; }
#submit-row > div { border-color: var(--cl-linha) !important; }
#submit-row button[name="_save"] { border-radius: 999px; padding-inline: 1.5rem; }
#submit-row :is(button, a) { border-radius: 999px; }

/* ---------- página inicial ---------- */
.painel-inicio { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding-bottom: 2rem; }

.painel-boasvindas {
  position: relative; overflow: hidden;
  display: grid; align-items: end; min-height: 17rem;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  border-radius: 22px;
  color: var(--cl-creme);
  background:
    linear-gradient(100deg, rgb(30 24 21 / .95) 0%, rgb(30 24 21 / .8) 45%, rgb(30 24 21 / .25) 100%),
    var(--foto) center 40% / cover;
  box-shadow: 0 24px 48px -28px rgb(30 24 21 / .7);
}
.painel-boasvindas__texto { max-width: 34rem; }
.painel-boasvindas__saudacao { margin: 0 0 .35rem; color: var(--cl-areia); font-size: .95rem; font-weight: 500; }
.painel-boasvindas h1 { margin: 0 0 .75rem; font: 400 clamp(2.2rem, 1.6rem + 2vw, 3.2rem)/1.05 "Italiana", serif; letter-spacing: .01em; -webkit-text-stroke: .015em currentColor; }
.painel-boasvindas p { margin: 0; color: rgb(243 238 232 / .82); font-size: .95rem; line-height: 1.6; }
.painel-boasvindas__acoes { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }

.painel-botao {
  display: inline-flex; align-items: center; min-height: 2.6rem; padding: .6rem 1.3rem;
  border: 1px solid transparent; border-radius: 999px;
  font-weight: 600; font-size: .875rem; text-decoration: none;
  transition: background .25s, color .25s, border-color .25s, transform .25s;
}
.painel-botao:hover { transform: translateY(-1px); }
.painel-botao--claro { background: var(--cl-creme); color: var(--cl-tinta); }
.painel-botao--claro:hover { background: #fff; }
.painel-botao--vazado { border-color: rgb(243 238 232 / .45); color: var(--cl-creme); }
.painel-botao--vazado:hover { background: rgb(243 238 232 / .12); }

/* faixa da página inicial quando falta a conta de e-mail (institucional/painel.py) */
.painel-faixa { display: flex; gap: .7rem; align-items: flex-start; margin: 0; padding: 1rem 1.2rem; border: 1px solid rgb(181 100 59 / .3); border-radius: var(--cl-raio);
  background: #FBEBDD; color: #7A3E1C; font-size: .9rem; line-height: 1.5; box-shadow: var(--cl-sombra); }
.painel-faixa .material-symbols-outlined { color: #B5643B; }
.painel-faixa a { color: #7A3E1C; font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }

.painel-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: 1rem; }
.painel-numero {
  display: grid; align-content: start; gap: .15rem; padding: 1.15rem 1.25rem;
  background: var(--cl-papel); border: 1px solid var(--cl-linha); border-radius: var(--cl-raio);
  box-shadow: var(--cl-sombra); color: var(--cl-tinta-2); text-decoration: none;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.painel-numero:hover { transform: translateY(-2px); border-color: rgb(196 172 150 / .6); box-shadow: 0 18px 36px -22px rgb(43 36 32 / .45); }
.painel-numero__icone { margin-bottom: .4rem; color: #A88F78; font-size: 1.35rem; }
.painel-numero strong { font: 600 1.9rem/1.1 "Inter", system-ui, sans-serif; color: var(--cl-tinta); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.painel-numero span:last-child { font-size: .82rem; }
/* valor longo (ex.: R$ 108.100,00): duas colunas; no celular estreito, a única coluna já é larga */
.painel-numero { min-width: 0; }
.painel-numero strong { overflow-wrap: anywhere; }
.painel-numero--largo { grid-column: span 2; }
@media (max-width: 22rem) { .painel-numero--largo { grid-column: auto; } }

.painel-cartao { padding: 1.25rem 1.5rem; }
.painel-cartao h2 { margin: 0 0 1rem; font: 400 1.6rem/1.1 "Italiana", serif; color: var(--cl-tinta); -webkit-text-stroke: .015em currentColor; }
.painel-historico { margin: 0; padding: 0; list-style: none; }
.painel-historico li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .9rem; align-items: baseline; padding: .7rem 0; border-top: 1px solid var(--cl-linha); }
.painel-historico li:first-child { border-top: 0; }
.painel-historico p { margin: 0; color: var(--cl-tinta-2); }
.painel-historico strong { color: var(--cl-tinta); }
.painel-historico a { color: var(--cl-tinta); font-weight: 600; text-decoration: underline; text-decoration-color: var(--cl-areia); text-underline-offset: .2em; }
.painel-historico__tipo { margin-left: .35rem; padding: .1rem .5rem; border-radius: 999px; background: rgb(47 40 36 / .06); font-size: .72rem; }
.painel-historico__resumo { margin-top: .2rem !important; color: #7A6D64 !important; font-size: .82rem; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.painel-historico__marca { align-self: start; margin-top: .45rem; width: .55rem; height: .55rem; border-radius: 50%; background: var(--cl-areia); }
.painel-historico__marca--novo { background: #7DB394; }
.painel-historico__marca--excluido { background: #E08A7E; }
.painel-historico time { color: #72655C; font-size: .8rem; white-space: nowrap; }
.painel-vazio { margin: 0; color: var(--cl-tinta-2); }

/* ---------- login ---------- */
body.login #page { background: var(--cl-creme); }
body.login h1 { font-weight: 400; }
body.login h1::before {
  content: ""; display: block; width: 2.75rem; height: 3.75rem; margin-bottom: 1.5rem;
  background: url("../institucional/img/monograma.png") left center / contain no-repeat;
}
body.login h1 span:first-child { color: var(--cl-tinta-2); font-weight: 500; font-size: .9rem; }
body.login h1 span:last-child {
  margin-top: .2rem; font: 400 2.6rem/1.05 "Italiana", serif; letter-spacing: .01em;
  color: var(--cl-tinta) !important; -webkit-text-stroke: .015em currentColor;
}
/* também vale para as telas de recuperação de senha (contas/templates/contas/recuperar.html) */
body.login form :is(input[type=text], input[type=password]) { padding: .7rem .9rem; border-radius: 10px; border-color: rgb(47 40 36 / .14); }
body.login form :is(input[type=text], input[type=password]):focus { border-color: var(--cl-areia); box-shadow: 0 0 0 3px rgb(196 172 150 / .3); }
/* foco igual em todos os campos (antes, uns com a borda areia, quase invisível, e outros com o contorno do navegador) */
body.login form :is(input, select, textarea):focus-visible { outline: 2px solid var(--cl-tinta); outline-offset: 1px; }
body.login form :is(button[type=submit], a) { padding-block: .8rem; border-radius: 999px; }
/* partes do cadastro de agência pelo site (rede/cadastro_agencia.html), como as abas do "Cadastrar agência" */
body.login .cadastro-secao { margin: 2rem 0 1rem; padding-top: 1.25rem; border-top: 1px solid rgb(47 40 36 / .12); font: 400 1.5rem/1.2 "Italiana", serif; color: var(--cl-tinta); }
/* em etapas (painel.js): uma parte por vez, com o andamento no alto e "Voltar" e "Continuar" no pé */
body.login .etapa { min-width: 0; margin: 0; padding: 0; border: 0; }
body.login .etapa[hidden] { display: none; }
body.login [data-etapas] .etapa .cadastro-secao { margin-top: .5rem; padding-top: 0; border-top: 0; }
body.login .cadastro-secao:focus { outline: none; }
body.login .etapas-andamento { display: grid; gap: .5rem; margin: 1.5rem 0 .5rem; scroll-margin-top: 1rem; }
body.login .etapas-andamento p { margin: 0; color: var(--cl-tinta-2); font-size: .85rem; font-weight: 600; }
body.login .etapas-andamento__barra { height: 4px; overflow: hidden; border-radius: 999px; background: rgb(47 40 36 / .1); }
body.login .etapas-andamento__barra i { display: block; height: 100%; width: calc(var(--feito, 0) * 100%); border-radius: inherit; background: var(--cl-tinta); transition: width .4s ease; }
body.login .etapa__botoes { display: flex; gap: .75rem; margin-top: 1.5rem; }
body.login .etapa__botoes button { flex: 1; padding-block: .8rem; border-radius: 999px; }
body.login .etapas-enviar[hidden] { display: none; }
body.login .recuperar-texto { margin: 0 0 1.5rem; color: var(--cl-tinta-2); font-size: .92rem; line-height: 1.6; }
/* autocadastro do fornecedor (rede/templates/rede/): campo-armadilha fora da tela e a situação do cadastro */
.armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.acompanhar { display: flex; gap: .9rem; align-items: flex-start; padding: 1.1rem 1.2rem; border-radius: 16px; background: #F6EEE5; color: var(--cl-tinta-2); }
.acompanhar > .material-symbols-outlined { font-size: 1.8rem; color: #B5643B; }
.acompanhar strong { display: block; color: var(--cl-tinta); font-size: 1.05rem; }
.acompanhar p { margin: .3rem 0 0; font-size: .9rem; line-height: 1.55; }
.acompanhar--aprovado { background: #E9F3EC; } .acompanhar--aprovado > .material-symbols-outlined { color: #3F7A5A; }
.acompanhar--recusado > .material-symbols-outlined { color: #72655C; }

/* Entrada (login e recuperação de senha): templates/unfold/layouts/unauthenticated.html.
   Todos os efeitos tocam sozinhos e param para quem pede "reduzir movimento". */
.entrada { --ease: cubic-bezier(.22, .61, .36, 1); display: flex; min-height: 100vh; min-height: 100dvh; background: var(--cl-creme); }
/* granulado leve de papel, como no site */
.entrada::after {
  content: ""; position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
.entrada__lado {
  position: relative; isolation: isolate; overflow: hidden; flex: 1 1 auto; min-width: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 5rem 1rem 3rem;  /* minmax: uma opção comprida numa lista não alarga o cartão */
}
/* brilhos cor de areia que flutuam devagar */
.entrada__lado::before, .entrada__lado::after {
  content: ""; position: absolute; z-index: -2; width: 40rem; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgb(196 172 150 / .55), transparent 68%);
  animation: entrada-flutua 16s ease-in-out infinite alternate;
}
.entrada__lado::before { top: -18rem; left: -16rem; }
.entrada__lado::after { bottom: -20rem; right: -18rem; background: radial-gradient(circle, rgb(168 143 120 / .4), transparent 68%); animation-duration: 21s; animation-direction: alternate-reverse; }
@keyframes entrada-flutua { to { transform: translate(6rem, 4rem) scale(1.2); } }
/* ondas de linhas finas da marca (desenhadas pelo painel.js), que se traçam ao abrir e ondulam */
.entrada__fios { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; opacity: .8; pointer-events: none; overflow: visible; }
.entrada__fios path {
  fill: none; stroke-width: .8; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: entrada-traca 2.8s var(--ease) forwards; animation-delay: calc(var(--i) * 30ms + .3s);
}
@keyframes entrada-traca { to { stroke-dashoffset: 0; } }

/* cartão de vidro com o formulário; cada parte entra subindo, em sequência */
.entrada__cartao {
  position: relative; width: min(100%, 27rem); padding: 2.4rem 2.25rem 2rem;
  background: rgb(255 253 251 / .7); -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1);
  border: 1px solid rgb(255 255 255 / .75); border-radius: 26px;
  box-shadow: 0 1px 2px rgb(43 36 32 / .05), 0 34px 70px -34px rgb(43 36 32 / .5), inset 0 1px 0 rgb(255 255 255 / .85);
  animation: entrada-cartao 1s var(--ease) both;
}
@keyframes entrada-cartao { from { opacity: 0; transform: translateY(24px) scale(.97); } }
.entrada__cartao > :not(form), .entrada__cartao form > * { animation: entrada-sobe .8s var(--ease) both; animation-delay: .15s; }
.entrada__cartao > :nth-child(3), .entrada__cartao form > :nth-child(2) { animation-delay: .27s; }
.entrada__cartao > :nth-child(4), .entrada__cartao form > :nth-child(3) { animation-delay: .39s; }
.entrada__cartao form > :nth-child(4) { animation-delay: .51s; }
.entrada__cartao form > :nth-child(n+5) { animation-delay: .63s; }
@keyframes entrada-sobe { from { opacity: 0; transform: translateY(14px); } }
@media (max-width: 40rem) { .entrada__cartao { padding: 2rem 1.35rem 1.6rem; border-radius: 22px; } }

/* foto: as fotos da apresentação se alternam com zoom lento, sob o lema e o carimbo do selo */
.entrada__foto { display: none; }
@media (min-width: 64rem) {
  .entrada__foto {
    display: block; isolation: isolate; overflow: hidden;
    flex: 0 0 52%; max-width: 60rem; margin: .9rem .9rem .9rem 0; border-radius: 28px;
    position: sticky; top: .9rem; align-self: flex-start; height: calc(100dvh - 1.8rem);  /* formulário longo (cadastro de fornecedor): a foto fica parada */
    background: var(--cl-noite); box-shadow: 0 30px 60px -30px rgb(30 24 21 / .6);
    animation: entrada-foto 1.3s var(--ease) both;
  }
}
@keyframes entrada-foto { from { clip-path: inset(0 0 0 100% round 28px); } to { clip-path: inset(0 round 28px); } }
.entrada__img {
  position: absolute; inset: 0; z-index: -1; background: center / cover no-repeat; opacity: 0;
  animation: entrada-troca 28s linear infinite; animation-delay: calc(var(--n) * 7s);
}
@keyframes entrada-troca {
  0% { opacity: 0; transform: scale(1.14); }
  5%, 25% { opacity: 1; }
  31%, 100% { opacity: 0; transform: scale(1.02); }
}
.entrada__foto::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgb(30 24 21 / .3) 0%, transparent 28%, transparent 48%, rgb(30 24 21 / .85) 100%);
}
.entrada__legenda { position: absolute; z-index: 1; left: clamp(2rem, 4vw, 3.5rem); right: 2rem; bottom: clamp(2rem, 4vw, 3.5rem); color: var(--cl-creme); }
.entrada__legenda span {
  display: inline-flex; align-items: center; gap: .7rem; color: var(--cl-areia);
  font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  animation: entrada-sobe .9s var(--ease) .7s both;
}
.entrada__legenda span::before { content: ""; width: 2.5rem; height: 1px; background: currentColor; }
.entrada__legenda p {
  margin: .9rem 0 0; font: 400 clamp(2.6rem, 1.2rem + 2.6vw, 4.4rem)/1.02 "Italiana", serif; letter-spacing: .01em;
  -webkit-text-stroke: .015em currentColor; text-shadow: 0 2px 30px rgb(0 0 0 / .35);
  animation: entrada-sobe 1.1s var(--ease) .85s both;
}
.entrada__carimbo {
  position: absolute; z-index: 1; top: clamp(1.5rem, 3vw, 2.5rem); right: clamp(1.5rem, 3vw, 2.5rem);
  display: grid; place-items: center; width: 8.5rem; aspect-ratio: 1; border-radius: 50%;
  background: rgb(30 24 21 / .3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: entrada-sobe 1s var(--ease) 1s both;
}
.entrada__carimbo svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: entrada-gira 40s linear infinite; }
.entrada__carimbo text { font-size: 12.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; fill: var(--cl-creme); }
.entrada__carimbo img { width: 22%; filter: invert(94%) sepia(10%); }
@keyframes entrada-gira { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .entrada *, .entrada *::before, .entrada *::after, .entrada__lado::before, .entrada__lado::after { animation: none !important; }
  .entrada__img:first-child { opacity: 1; }
  .entrada__fios path { stroke-dashoffset: 0; }
}

/* =====================================================================
   Página "Conteúdo do site": pensada para quem não tem intimidade com tecnologia
   ===================================================================== */

/* faixa de orientação no topo */
.conteudo-topo {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 1.5rem; align-items: center;
  margin-bottom: 1.25rem; padding: 1.4rem 1.6rem;
  border-radius: 20px; color: var(--cl-creme);
  background: radial-gradient(40rem circle at 100% 0, rgb(196 172 150 / .22), transparent 60%), linear-gradient(120deg, var(--cl-noite), var(--cl-breu));
  box-shadow: 0 20px 40px -26px rgb(30 24 21 / .8);
}
.conteudo-topo h1 { margin: 0; font: 400 2.1rem/1.05 "Italiana", serif; letter-spacing: .01em; -webkit-text-stroke: .015em currentColor; }
.conteudo-topo p { margin: .3rem 0 0; color: rgb(243 238 232 / .75); font-size: .9rem; }
.conteudo-topo__passos { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.conteudo-topo__passos li { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: rgb(243 238 232 / .88); }
.conteudo-topo__passos strong { color: #fff; }
.conteudo-topo__passos span {
  display: grid; place-items: center; width: 1.65rem; height: 1.65rem; border-radius: 50%;
  background: rgb(196 172 150 / .2); box-shadow: inset 0 0 0 1px rgb(196 172 150 / .45);
  color: var(--cl-areia); font-weight: 700; font-size: .75rem;
}
.conteudo-topo__ver {
  display: inline-flex; align-items: center; gap: .4rem; padding: .6rem 1.1rem; border-radius: 999px;
  background: var(--cl-creme); color: var(--cl-tinta); font-weight: 600; font-size: .85rem; text-decoration: none; white-space: nowrap;
  transition: background .25s, transform .25s;
}
.conteudo-topo__ver:hover { background: #fff; transform: translateY(-1px); }
.conteudo-topo__ver .material-symbols-outlined { font-size: 1.05rem; }
@media (max-width: 80rem) {
  .conteudo-topo { grid-template-columns: minmax(0, 1fr) auto; }
  .conteudo-topo__passos { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 40rem) { .conteudo-topo { grid-template-columns: 1fr; } }

/* ícones nas abas principais desta página */
body.model-conteudosite #tabs-items > a::before {
  font: normal 1.15rem/1 "Material Symbols Outlined"; font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased; margin-right: .1rem;
}
body.model-conteudosite #tabs-items > a:nth-child(1)::before { content: "edit_note"; }
body.model-conteudosite #tabs-items > a:nth-child(2)::before { content: "photo_library"; }
body.model-conteudosite #tabs-items > a:nth-child(3)::before { content: "groups"; }
body.model-conteudosite #tabs-items > a:nth-child(4)::before { content: "workspace_premium"; }
body.model-conteudosite #tabs-items > a:nth-child(5)::before { content: "checklist"; }
body.model-conteudosite #tabs-items > a:nth-child(6)::before { content: "handshake"; }

/* partes do site: menu vertical à esquerda (no celular, lista no topo) */
#content [x-data*="activeFieldsetTab"] > .border-b { border: 0 !important; }
#content [x-data*="activeFieldsetTab"] > .border-b > nav { gap: .3rem; }
#content [x-data*="activeFieldsetTab"] > .border-b > nav > a {
  display: flex; align-items: center; gap: .7rem;
  padding: .75rem .95rem !important; border: 0 !important; border-radius: 12px;
  background: transparent; color: var(--cl-tinta-2) !important; font-weight: 500;
  transition: background .2s, color .2s, box-shadow .2s;
}
#content [x-data*="activeFieldsetTab"] > .border-b > nav > a:hover { background: rgb(47 40 36 / .06); color: var(--cl-tinta) !important; }
#content [x-data*="activeFieldsetTab"] > .border-b > nav > a.active {
  background: var(--cl-noite) !important; color: var(--cl-creme) !important;
  box-shadow: 0 12px 24px -16px rgb(30 24 21 / .8);
}
#content [x-data*="activeFieldsetTab"] > .border-b > nav > a.active::after { display: none; }
#content [x-data*="activeFieldsetTab"] > .border-b > nav > a::before {
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 9px;
  background: rgb(47 40 36 / .06); color: #8A7461;
  font: normal 1.2rem/1 "Material Symbols Outlined"; font-feature-settings: "liga"; -webkit-font-smoothing: antialiased;
}
#content [x-data*="activeFieldsetTab"] > .border-b > nav > a.active::before { background: rgb(196 172 150 / .2); color: var(--cl-areia); }
#content [x-data*="activeFieldsetTab"] > .border-b > nav > a:nth-child(1)::before { content: "home"; }
#content [x-data*="activeFieldsetTab"] > .border-b > nav > a:nth-child(2)::before { content: "diversity_3"; }
#content [x-data*="activeFieldsetTab"] > .border-b > nav > a:nth-child(3)::before { content: "flag"; }
#content [x-data*="activeFieldsetTab"] > .border-b > nav > a:nth-child(4)::before { content: "verified"; }
#content [x-data*="activeFieldsetTab"] > .border-b > nav > a:nth-child(5)::before { content: "workspace_premium"; }
#content [x-data*="activeFieldsetTab"] > .border-b > nav > a:nth-child(6)::before { content: "checklist"; }
#content [x-data*="activeFieldsetTab"] > .border-b > nav > a:nth-child(7)::before { content: "handshake"; }
#content [x-data*="activeFieldsetTab"] > .border-b > nav > a:nth-child(8)::before { content: "auto_awesome"; }
/* abas da página Configurações */
body.model-configuracao #content [x-data*="activeFieldsetTab"] > .border-b > nav > a:nth-child(1)::before { content: "mail"; }
body.model-configuracao #content [x-data*="activeFieldsetTab"] > .border-b > nav > a:nth-child(2)::before { content: "document_scanner"; }
/* abas da campanha (campanhas/admin.py) */
body.model-campanha #content [x-data*="activeFieldsetTab"] > .border-b > nav > a:nth-child(1)::before { content: "campaign"; }
body.model-campanha #content [x-data*="activeFieldsetTab"] > .border-b > nav > a:nth-child(2)::before { content: "article"; }
body.model-campanha #content [x-data*="activeFieldsetTab"] > .border-b > nav > a:nth-child(3)::before { content: "ads_click"; }
/* abas da agência (rede/admin.py) */
body.model-agencia #content [x-data*="activeFieldsetTab"] > .border-b > nav > a:nth-child(1)::before { content: "storefront"; }
body.model-agencia #content [x-data*="activeFieldsetTab"] > .border-b > nav > a:nth-child(2)::before { content: "person"; }
body.model-agencia #content [x-data*="activeFieldsetTab"] > .border-b > nav > a:nth-child(3)::before { content: "domain"; }
body.model-agencia #content [x-data*="activeFieldsetTab"] > .border-b > nav > a:nth-child(4)::before { content: "luggage"; }
body.model-agencia #content [x-data*="activeFieldsetTab"] > .border-b > nav > a:nth-child(5)::before { content: "info"; }
@media (min-width: 64rem) {
  /* só espaço entre as colunas: o menu ocupa 20 linhas da grade, e um espaço entre linhas sobraria embaixo do formulário */
  #content [x-data*="activeFieldsetTab"] { display: grid; grid-template-columns: 15rem minmax(0, 1fr); column-gap: 1.5rem; align-items: start; }
  #content [x-data*="activeFieldsetTab"] > .border-b { grid-column: 1; grid-row: 1 / span 20; position: sticky; top: 1rem; }
  #content [x-data*="activeFieldsetTab"] > .border-b > nav { flex-direction: column !important; align-items: stretch !important; }
  #content [x-data*="activeFieldsetTab"] > .tab-wrapper { grid-column: 2; grid-row: 1; }
}

/* cartão de cada parte: fundo quente, campos brancos em destaque */
#content .tab-wrapper fieldset.module { background: #FCF8F3; }
#content .tab-wrapper fieldset.module > .leading-relaxed { max-width: none; margin: 0; padding: 0; }

/* guia: como a parte aparece no site */
.secao-guia {
  display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 1.4rem; align-items: center;
  padding: 1.25rem 1.5rem; background: linear-gradient(135deg, #F6EEE5, #F1E7DC);
  border-bottom: 1px solid var(--cl-linha);
}
.secao-guia__foto {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top;
  border-radius: 10px; border: 3px solid #fff; box-shadow: 0 12px 26px -16px rgb(43 36 32 / .6);
}
.secao-guia__texto p { margin: 0 0 .85rem; color: var(--cl-tinta-2); font-size: .92rem; line-height: 1.6; }
.secao-guia__link {
  display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .95rem; border-radius: 999px;
  background: #fff; border: 1px solid var(--cl-linha); color: var(--cl-tinta); font-weight: 600; font-size: .82rem; text-decoration: none;
  transition: border-color .2s, transform .2s;
}
.secao-guia__link:hover { border-color: var(--cl-areia); transform: translateY(-1px); }
.secao-guia__link .material-symbols-outlined { font-size: 1rem; }
@media (max-width: 40rem) { .secao-guia { grid-template-columns: 1fr; } }

/* guia da aba E-mail (Configurações): passo a passo da senha de app */
.config-guia { padding: 1.25rem 1.5rem; background: linear-gradient(135deg, #F6EEE5, #F1E7DC); border-bottom: 1px solid var(--cl-linha); color: var(--cl-tinta-2); font-size: .92rem; line-height: 1.6; }
.config-guia p { margin: 0 0 .6rem; }
.config-guia ol { margin: 0; padding-left: 1.3rem; list-style: decimal; }
.config-guia li { margin: .2rem 0; }
.config-guia strong { color: var(--cl-tinta); }
.config-guia a { color: var(--cl-tinta); font-weight: 600; text-decoration: underline; text-decoration-color: var(--cl-areia); text-underline-offset: .2em; }

/* campos: nome em cima, dica embaixo, caixa grande e clara */
#content .tab-wrapper .field-line, #content .inline-related .field-line {
  flex-direction: column !important; align-items: stretch !important; gap: .45rem;
  min-height: 0; padding: 1.15rem 1.5rem !important; border-style: solid !important; border-color: var(--cl-linha) !important;
}
#content .tab-wrapper .field-line > div:first-child, #content .inline-related .field-line > div:first-child {
  width: auto !important; min-width: 0 !important; height: auto !important; line-height: 1.3 !important;
}
#content .field-line label { margin: 0 !important; font-size: .92rem; color: var(--cl-tinta); }
#content .field-line .max-w-2xl { max-width: 48rem; }
#content .field-line .leading-relaxed.text-xs { margin-top: .45rem; color: #7A6D64; font-size: .8rem; }
#content .field-line :is(input[type=text], input[type=number], textarea, select) { padding: .7rem .9rem; font-size: .95rem; line-height: 1.5; }

.contador { display: block; margin-top: .3rem; text-align: right; color: #72655C; font-size: .74rem; }
.contador.perto { color: #B5643B; font-weight: 600; }

/* fotos: prévia maior e botão "Trocar foto" bem visível */
#content .field-line .max-w-48 { max-width: 22rem; }
#content .field-line .max-w-48 img, .foto-nova { max-height: 16rem; width: auto; border-radius: 12px; box-shadow: 0 14px 28px -18px rgb(43 36 32 / .6); }
#content a[target="_blank"]:has(> .material-symbols-outlined):not(.secao-guia__link, .conteudo-topo__ver, .abrir-arquivo) { display: none; }
#content label.trocar-foto {
  display: inline-flex; align-items: center; gap: .35rem; margin: .3rem;
  padding: .4rem .85rem !important; border-radius: 999px;
  background: var(--cl-noite); color: var(--cl-creme) !important; font-weight: 600; font-size: .8rem;
}
#content label.trocar-foto::after { content: "Trocar foto"; }
#content label.trocar-foto.sem-foto::after { content: "Escolher foto"; }
/* documentos (painel.js): "Abrir" e "Trocar arquivo" no lugar da prévia e do "Trocar foto" */
#content label.trocar-arquivo.trocar-foto::after { content: "Trocar arquivo"; }
#content label.trocar-arquivo.sem-foto::after { content: "Escolher arquivo"; }
#content a.abrir-arquivo {
  display: inline-flex; align-items: center; gap: .35rem; margin: .3rem 0 .3rem .3rem; padding: .4rem .85rem; border: 1px solid var(--cl-linha) !important;
  border-radius: 999px; background: #fff; color: var(--cl-tinta); font-weight: 600; font-size: .8rem; white-space: nowrap;
}
#content a.abrir-arquivo:hover { border-color: var(--cl-areia) !important; }
#content a.abrir-arquivo > .material-symbols-outlined { font-size: 1.05rem; }
#content a.abrir-arquivo::after { content: "Abrir"; }
@media (max-width: 640px) {  /* no celular, só os ícones: o nome do arquivo fica com o espaço */
  #content a.abrir-arquivo::after, #content label.trocar-arquivo:is(.trocar-foto, .sem-foto)::after { content: none; }
  #content a.abrir-arquivo, #content label.trocar-arquivo { padding: .45rem !important; }
}
#content label.trocar-foto:hover { background: var(--cl-breu); }
#content label.trocar-foto > .material-symbols-outlined { font-size: 1.05rem; }
#content input[type=text][disabled][aria-label] { color: #72655C; font-size: .82rem; }
#content label:has(> input[type=text][disabled][aria-label]) { min-width: 0; }  /* no celular, o nome do arquivo encolhe e o botão cabe inteiro */
#content label.trocar-foto { white-space: nowrap; }
.foto-nova { display: block; margin-bottom: .75rem; outline: 3px solid #7DB394; }
.foto-aviso { margin: .5rem 0 0; color: #3F7A5A; font-size: .8rem; font-weight: 600; }

/* listas: explicação no topo e itens como cartões */
[id$="_set-group"] td textarea { min-width: 14rem; }  /* no celular, a tabela rola para o lado em vez de espremer o texto */
[id$="_set-group"] td select { min-width: 9rem; }
.lista-ajuda {
  display: flex; gap: .6rem; align-items: flex-start; margin: .5rem .5rem 1rem; padding: .85rem 1rem;
  border-radius: 12px; background: #F6EEE5; color: var(--cl-tinta-2); font-size: .87rem; line-height: 1.5;
}
.lista-ajuda .material-symbols-outlined { color: #A88F78; font-size: 1.2rem; }
#content .inline-related { background: #FCF8F3; border-radius: 12px; }

/* =====================================================================
   Listas e formulários (Usuários, Grupos e os próximos cadastros)
   ===================================================================== */

/* faixa de explicação no topo (templates/admin/topo.html) */
.pagina-topo {
  display: flex; gap: 1rem; align-items: center; margin-bottom: 1.25rem; padding: 1.1rem 1.4rem;
  border: 1px solid var(--cl-linha); border-radius: 18px;
  background: radial-gradient(30rem circle at 100% 0, rgb(196 172 150 / .22), transparent 65%), linear-gradient(135deg, #FBF7F2, #F3EADF);
  box-shadow: var(--cl-sombra);
}
.pagina-topo__icone {
  flex: none; display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 14px;
  background: var(--cl-noite); color: var(--cl-areia); font-size: 1.45rem;
  box-shadow: 0 10px 22px -12px rgb(30 24 21 / .8);
}
.pagina-topo h1 { margin: 0; font: 400 1.9rem/1.1 "Italiana", serif; color: var(--cl-tinta); letter-spacing: .01em; -webkit-text-stroke: .015em currentColor; }
.pagina-topo p { margin: .25rem 0 0; max-width: 46rem; color: var(--cl-tinta-2); font-size: .9rem; line-height: 1.55; }
.pagina-topo p:empty { display: none; }  /* tela sem explicação (ex.: lista de Tipos de fornecedor): só o título */
/* botões das listas da rede e do CRM: "Importar planilha" e "Baixar em Excel" (rede/planilhas.py); no celular, numa linha própria */
.pagina-topo__acoes { flex: none; display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; }
.pagina-topo__botao {
  display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 1rem; border: 1px solid rgb(47 40 36 / .14); border-radius: 999px;
  background: rgb(255 253 251 / .8); color: var(--cl-tinta) !important; font-size: .84rem; font-weight: 600; white-space: nowrap;
  transition: background .25s, transform .3s cubic-bezier(.2, 1, .3, 1), box-shadow .3s;
}
.pagina-topo__botao .material-symbols-outlined { font-size: 1.15rem; color: #8A7461; }
.pagina-topo__botao:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 12px 22px -14px rgb(43 36 32 / .6); }
@media (max-width: 48rem) {
  .pagina-topo { flex-wrap: wrap; }
  .pagina-topo > div:not([class]) { flex: 1 1 0; min-width: 0; }
  .pagina-topo__acoes { flex-basis: 100%; margin-left: 0; }
  .pagina-topo__botao { flex: 1 1 auto; justify-content: center; max-width: 100%; white-space: normal; }  /* fonte grande: quebra a linha */
}

/* Importar planilha (templates/admin/importar.html): quadro para escolher ou soltar o arquivo, as dicas ao lado e,
   depois de um envio com erro, a lista dos problemas no alto */
.importar { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.importar__cartao, .importar__dicas, .importar__erros { padding: 1.25rem; border: 1px solid var(--cl-linha); border-radius: 18px; background: var(--cl-papel); box-shadow: var(--cl-sombra); }
.importar__arquivo {
  position: relative; display: grid; justify-items: center; gap: .35rem; padding: 2.6rem 1rem; border: 2px dashed rgb(138 116 97 / .35); border-radius: 14px;
  background: #FBF7F2; text-align: center; cursor: pointer; transition: border-color .25s, background .25s;
}
.importar__arquivo input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.importar__arquivo .material-symbols-outlined { font-size: 2.5rem; color: #8A7461; transition: transform .4s cubic-bezier(.2, 1, .3, 1), color .25s; }
.importar__arquivo strong { color: var(--cl-tinta); font-size: 1rem; overflow-wrap: anywhere; }
.importar__arquivo small { color: var(--cl-tinta-2); font-size: .8rem; }
.importar__arquivo:hover, .importar__arquivo.arrastando { border-color: var(--cl-areia); background: #F6EEE5; }
.importar__arquivo:hover .material-symbols-outlined, .importar__arquivo.arrastando .material-symbols-outlined { transform: translateY(-4px) scale(1.08); }
.importar__arquivo:focus-within { outline: 2px solid var(--cl-tinta); outline-offset: 3px; }
.importar__arquivo.escolhido { border-style: solid; border-color: #3F7A5A; background: #EEF5F0; }
.importar__arquivo.escolhido .material-symbols-outlined { color: #3F7A5A; }
/* Ler cartão (crm/templates/crm/cartao.html): "Tirar foto" e "Escolher um arquivo" lado a lado, um embaixo do outro no celular */
.importar__previa { margin: 1rem 0 0; text-align: center; }
.importar__previa img { display: block; margin: 0 auto; max-width: 100%; max-height: 16rem; border-radius: 12px; box-shadow: var(--cl-sombra); }
.importar__previa figcaption, .importar__gasto { margin: .5rem 0 0; color: var(--cl-tinta-2); font-size: .82rem; }
.importar__opcoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .9rem; }
@media (hover: hover) and (pointer: fine) { .importar__camera { display: none; } }
.importar__botoes { display: flex; justify-content: flex-end; align-items: center; gap: 1.25rem; margin-top: 1rem; }
.importar__botoes a { color: var(--cl-tinta-2); font-size: .88rem; font-weight: 600; }
.importar__botoes a:hover { color: var(--cl-tinta); }
.importar__botoes button { padding: .7rem 1.7rem; border-radius: 999px; background: var(--cl-noite); color: var(--cl-creme); font-weight: 600; transition: background .2s, transform .2s; }
.importar__botoes button:hover { background: var(--cl-breu); transform: translateY(-1px); }
.importar__botoes button:disabled { opacity: .75; transform: none; cursor: wait; }
.importar h2 { margin: 0 0 .7rem; font: 400 1.45rem/1.1 "Italiana", serif; color: var(--cl-tinta); -webkit-text-stroke: .015em currentColor; }
.importar ul { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.importar__dicas li { position: relative; padding-left: 1.1rem; color: var(--cl-tinta-2); font-size: .87rem; line-height: 1.5; }
.importar__dicas li::before { content: ""; position: absolute; left: 0; top: .6em; width: .4rem; height: .4rem; border-radius: 50%; background: var(--cl-areia); }
.importar__erros { order: -1; grid-column: 1 / -1; border-color: rgb(181 100 59 / .3); box-shadow: inset 4px 0 0 #B5643B, var(--cl-sombra); }
.importar__erros li { padding: .5rem .8rem; border-radius: 10px; background: #FBEBDD; color: #7A3E1C; font-size: .86rem; line-height: 1.45; overflow-wrap: anywhere; }
@media (max-width: 64rem) { .importar { grid-template-columns: 1fr; } }

/* Privacidade → Dados de uma pessoa (privacidade/templates/privacidade/dados.html) e Vendas → Relatório (vendas/templates/vendas/relatorio.html) */
.dados-busca, .relatorio-periodo { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .7rem; margin: 0 0 1.4rem; padding: 1rem 1.2rem; border: 1px solid var(--cl-linha); border-radius: 18px; background: var(--cl-papel); box-shadow: var(--cl-sombra); }
.dados-busca input { flex: 1 1 18rem; }
/* mês e ano da venda (vendas/templates/vendas/mes_ano.html): as duas listas lado a lado */
.mes-ano { display: flex; gap: .5rem; max-width: 32rem; }
.mes-ano > * { flex: 1 1 0; min-width: 0; }
.relatorio-periodo .mes-ano > * { flex: 0 0 auto; }  /* no relatório, cada lista com a largura do texto (“Outubro”) */
.dados-busca input, .relatorio-periodo input, .relatorio-periodo select { padding: .6rem .8rem; border: 1px solid rgb(47 40 36 / .18); border-radius: 12px; background: #fff; }
.relatorio-periodo label { display: grid; gap: .25rem; font-size: .78rem; font-weight: 600; color: var(--cl-tinta-2); }
.dados-busca button, .relatorio-periodo button { padding: .65rem 1.5rem; border-radius: 999px; background: var(--cl-noite); color: var(--cl-creme); font-weight: 600; }
.dados-vazio, .dados-nota { color: var(--cl-tinta-2); font-size: .88rem; }
.dados-grupo { margin-bottom: 1.2rem; padding: 1rem 1.2rem; border: 1px solid var(--cl-linha); border-radius: 18px; background: var(--cl-papel); box-shadow: var(--cl-sombra); }
.dados-grupo h2, .relatorio-tabelas h2 { margin: 0 0 .6rem; font: 400 1.45rem/1.1 "Italiana", serif; color: var(--cl-tinta); -webkit-text-stroke: .015em currentColor; }
.dados-grupo h2 span { margin-left: .3rem; font: 600 .8rem system-ui, sans-serif; color: var(--cl-tinta-2); }
.dados-grupo ul { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.dados-grupo li { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; padding: .5rem .7rem; border-radius: 10px; background: #FBF7F2; font-size: .88rem; }
.dados-grupo li span { flex: 1 1 16rem; overflow-wrap: anywhere; }
.dados-grupo li a { font-weight: 600; text-decoration: underline; text-decoration-color: var(--cl-areia); text-underline-offset: 3px; }
.dados-grupo li .dados-excluir { color: #8A2F24 !important; }
.relatorio-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 1rem; margin-bottom: 1.4rem; }
.relatorio-numeros div { padding: 1rem 1.2rem; border: 1px solid var(--cl-linha); border-radius: 18px; background: var(--cl-papel); box-shadow: var(--cl-sombra); }
.relatorio-numeros span { display: block; color: var(--cl-tinta-2); font-size: .8rem; font-weight: 600; }
.relatorio-numeros strong { font-size: 1.5rem; color: var(--cl-tinta); }
.relatorio-tabelas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: 1.2rem; }
.relatorio-tabelas section { padding: 1rem 1.2rem; border: 1px solid var(--cl-linha); border-radius: 18px; background: var(--cl-papel); box-shadow: var(--cl-sombra); overflow-x: auto; }
.relatorio-tabelas table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.relatorio-tabelas th { padding: .5rem; border-bottom: 1px solid var(--cl-linha); color: var(--cl-tinta-2); font-size: .74rem; text-align: left; text-transform: uppercase; letter-spacing: .06em; }
.relatorio-tabelas td { padding: .55rem .5rem; border-bottom: 1px solid rgb(47 40 36 / .06); }
.relatorio-tabelas td:not(:first-child), .relatorio-tabelas th:not(:first-child) { text-align: right; white-space: nowrap; }
.relatorio-tabelas .nada { color: var(--cl-tinta-2); font-size: .88rem; }

/* página da campanha (campanhas/admin.py): o endereço, "Abrir a página", "Copiar o link" e "Enviar pelo WhatsApp" */
.campanha-endereco { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; }
.campanha-endereco a:first-child { font-weight: 600; overflow-wrap: anywhere; text-decoration: underline; text-decoration-color: var(--cl-areia); text-underline-offset: 3px; }
.campanha-endereco button, .campanha-endereco [data-whatsapp], .campanha-endereco [data-abrir] {
  padding: .35rem .85rem; border: 1px solid rgb(47 40 36 / .14); border-radius: 999px; background: #fff; color: var(--cl-tinta) !important;
  font-size: .8rem; font-weight: 600; cursor: pointer; transition: transform .25s, box-shadow .25s;
}
.campanha-endereco button:hover, .campanha-endereco [data-whatsapp]:hover, .campanha-endereco [data-abrir]:hover { transform: translateY(-1px); box-shadow: 0 10px 18px -12px rgb(43 36 32 / .6); }
.campanha-endereco + small { display: block; margin-top: .35rem; color: var(--cl-tinta-2); font-size: .8rem; }
.campanha-link { font-weight: 600; white-space: nowrap; }

/* contato lido de um cartão de visita (crm/admin.py): os contatos parecidos, que podem ser a mesma pessoa, logo abaixo do topo */
/* Aniversariantes da semana, na página inicial (institucional/painel.py) */
.painel-aniversarios { margin-bottom: 1.25rem; }
.painel-aniversarios ul { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.painel-aniversarios li { display: flex; align-items: center; gap: .8rem; }
.painel-aniversarios li > div { display: grid; flex: 1; min-width: 0; }
.painel-aniversarios li > div span { color: var(--cl-tinta-2); font-size: .82rem; }
.painel-aniversarios .material-symbols-outlined { color: #8A7461; }
.painel-aniversarios time { color: var(--cl-tinta-2); font-size: .85rem; font-weight: 600; white-space: nowrap; }
/* Executivos da agência (templates/admin/rede/executivos.html): o responsável no alto da lista */
.responsavel-da-agencia { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin: 0 0 .75rem; color: var(--cl-tinta-2); font-size: .87rem; }
.responsavel-da-agencia strong { color: var(--cl-tinta); }
.responsavel-da-agencia .material-symbols-outlined { font-size: 1.15rem; color: #8A7461; }
/* Cadastro aberto pela leitura de cartão (templates/admin/topo.html): a foto e o que a OpenAI devolveu */
.lido { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: 1.1rem 1.4rem; align-items: start; margin: 0 0 1.25rem; padding: 1.1rem 1.25rem; border: 1px solid var(--cl-linha); border-radius: 18px; background: var(--cl-papel); box-shadow: var(--cl-sombra); }
.lido:not(:has(.lido__foto)) { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 40rem) { .lido { grid-template-columns: minmax(0, 1fr); } }
.lido__foto img { display: block; width: min(18rem, 100%); border-radius: 10px; box-shadow: var(--cl-sombra); }
.lido h2 { margin: 0 0 .5rem; font: 400 1.45rem/1.1 "Italiana", serif; color: var(--cl-tinta); -webkit-text-stroke: .015em currentColor; }
.lido dl { display: grid; gap: .3rem; margin: 0 0 .6rem; }
.lido dl div { display: flex; gap: .6rem; font-size: .87rem; }
.lido dt { flex: 0 0 5.5rem; color: var(--cl-tinta-2); }
.lido dd { margin: 0; color: var(--cl-tinta); overflow-wrap: anywhere; }
.lido p { margin: 0; color: var(--cl-tinta-2); font-size: .8rem; }
img.cartao-lido { max-width: min(18rem, 100%); border-radius: 10px; }
.parecidos { margin: 0 0 1.25rem; padding: 1.1rem 1.25rem; border: 1px solid rgb(181 100 59 / .3); border-radius: 18px; background: var(--cl-papel); box-shadow: inset 4px 0 0 #B5643B, var(--cl-sombra); }
.parecidos h2 { margin: 0 0 .35rem; font: 400 1.45rem/1.1 "Italiana", serif; color: var(--cl-tinta); -webkit-text-stroke: .015em currentColor; }
.parecidos p { margin: 0 0 .8rem; color: var(--cl-tinta-2); font-size: .87rem; line-height: 1.5; }
.parecidos ul { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.parecidos a { display: grid; gap: .1rem; padding: .6rem .85rem; border-radius: 12px; background: #FBEBDD; color: #7A3E1C !important; transition: transform .3s cubic-bezier(.2, 1, .3, 1), box-shadow .3s; }
.parecidos a:hover { transform: translateY(-2px); box-shadow: 0 12px 22px -16px rgb(122 62 28 / .6); }
.parecidos a span { font-size: .82rem; overflow-wrap: anywhere; }

/* lista: busca e tabela em cartões claros */
#changelist .lg\:border { border-color: var(--cl-linha) !important; background: var(--cl-papel); }
#changelist #result_list, #changelist .overflow-x-auto { background: var(--cl-papel); }

/* linha com lixeira (cadastros da rede, rede/admin.py): ao passar o mouse, a linha acende, o nome desliza e a lixeira surge girando */
.lista-acoes { display: flex; justify-content: flex-end; }
/* com muitas colunas, a tabela rola para o lado no celular: a coluna da lixeira fica presa à direita, sempre à vista */
#result_list td:has(.lista-acoes) { position: sticky; right: 0; background: var(--cl-papel); }
#result_list tbody.bg-base-50 td:has(.lista-acoes) { background: #FBFAF9; }  /* linhas listradas do tema (base 50 do UNFOLD["COLORS"]) */
@media (hover: none) { #result_list td:has(.lista-acoes) { box-shadow: -14px 0 14px -12px rgb(47 40 36 / .35); } }
#result_list tr.data-row:has(.lista-lixeira) > * { transition: background .3s, transform .35s cubic-bezier(.2, 1, .3, 1); }
#result_list tr.data-row:has(.lista-lixeira):hover > * { background: #FBF4EC; }
#result_list tr.data-row:has(.lista-lixeira):hover > :first-child { box-shadow: inset 3px 0 0 var(--cl-areia); }
#result_list tr.data-row:has(.lista-lixeira):hover > :first-child a { display: inline-block; transform: translateX(6px); transition: transform .35s cubic-bezier(.2, 1, .3, 1); }
.lista-lixeira {
  display: inline-grid; place-items: center; flex: none; width: 2.15rem; height: 2.15rem; border-radius: 50%;
  border: 1px solid rgb(179 65 46 / .28); background: #fff; color: #B3412E; cursor: pointer;
  transition: transform .5s cubic-bezier(.3, 1.6, .5, 1), opacity .25s, background .25s, color .25s, box-shadow .3s;
}
.lista-lixeira svg { width: 1.15rem; height: 1.15rem; overflow: visible; }
.lista-lixeira .material-symbols-outlined { font-size: 1.1rem; }
.lixeira-tampa { transform-origin: 21px 6px; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }  /* abre pela dobradiça da direita */
.lista-lixeira--bloqueada { border: 1px dashed rgb(47 40 36 / .25); color: #A0958C; }
@keyframes cadeado-balanca { 20%, 60% { transform: rotate(-14deg); } 40%, 80% { transform: rotate(14deg); } }
@media (hover: hover) {  /* no celular e no tablet (sem mouse), a lixeira fica sempre à vista e sem o efeito, que ficaria "preso" depois do toque */
  .lista-lixeira { opacity: 0; transform: scale(.3) rotate(-35deg); }
  tr:hover .lista-lixeira, .lista-lixeira:focus-visible { opacity: 1; transform: none; }
  .lista-lixeira:hover { background: #B3412E; color: #fff; box-shadow: 0 10px 20px -8px rgb(179 65 46 / .75); }
  .lista-lixeira:hover .lixeira-tampa { transform: translateY(-1.5px) rotate(20deg); }
  .lista-lixeira--bloqueada:hover { background: #F3EEE8; color: var(--cl-tinta-2); box-shadow: none; }
  .lista-lixeira--bloqueada:hover .material-symbols-outlined { animation: cadeado-balanca .5s; }
}

/* Funil do CRM (crm/templates/crm/funil.html): uma coluna por etapa; no celular, as colunas rolam para o lado */
.funil { display: grid; grid-template-columns: repeat(4, minmax(15rem, 1fr)); gap: 1rem; overflow-x: auto; padding-bottom: .5rem; scroll-snap-type: x mandatory; }
.funil__coluna { --cor: var(--cl-areia); scroll-snap-align: start; border-radius: 20px; background: rgb(255 253 251 / .55); border: 1px solid var(--cl-linha); padding: .9rem; }
.funil__coluna--negociacao { --cor: #D98A4E; }
.funil__coluna--parceiro { --cor: #3F7A5A; }
.funil__coluna--inativo { --cor: #A0958C; }
.funil__coluna header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: .1rem .2rem .9rem; padding-bottom: .7rem; border-bottom: 2px solid var(--cor); }
.funil__coluna h2 { margin: 0; font: 400 1.45rem/1.1 "Italiana", serif; -webkit-text-stroke: .015em currentColor; color: var(--cl-tinta); }
.funil__coluna header span { min-width: 1.8rem; padding: .15rem .55rem; border-radius: 999px; background: var(--cor); color: #fff; text-align: center; font-size: .78rem; font-weight: 700; }
.funil__coluna ul { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.funil__coluna li { animation: funil-entra .5s calc(min(var(--i), 10) * .04s) cubic-bezier(.2, 1, .3, 1) backwards; }
.funil__cartao {
  display: grid; gap: .2rem; padding: .85rem 1rem; border: 1px solid var(--cl-linha); border-left: 3px solid var(--cor); border-radius: 12px;
  background: #fff; color: var(--cl-tinta); box-shadow: 0 10px 22px -18px rgb(43 36 32 / .5);
  transition: transform .3s cubic-bezier(.2, 1, .3, 1), box-shadow .3s;
}
.funil__cartao:hover { transform: translateY(-2px); box-shadow: 0 16px 28px -18px rgb(43 36 32 / .6); }
.funil__cartao strong { font-size: .95rem; line-height: 1.3; overflow-wrap: anywhere; }
.funil__meta { color: var(--cl-tinta-2); font-size: .8rem; }
.funil__ultimo { margin-top: .3rem; color: #72655C; font-size: .76rem; }
.funil__cartao--parado .funil__ultimo { color: #A5562F; font-weight: 600; }
.funil__etiqueta { justify-self: start; margin-top: .35rem; padding: .1rem .5rem; border-radius: 6px; background: #FBEBDD; color: #8F4B1E; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.funil__vazio { padding: 1rem .5rem; color: #72655C; font-size: .82rem; text-align: center; }
@keyframes funil-entra { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .funil__coluna li, .funil__cartao { animation: none; transition: none; } }

/* confirmação de exclusão em janela (painel.js): fundo desfocado, janela que sobe com mola,
   ícone que salta com ondas em volta e a tampa da lixeira que abre de vez em quando */
.confirma {
  position: fixed; inset: 0; translate: none;  /* o tema posiciona as janelas com top/left 50%; aqui o centro vem do margin: auto */
  width: min(26rem, calc(100vw - 2rem)); height: fit-content; margin: auto; padding: 0; border: 0; border-radius: 26px; overflow: visible;
  background: radial-gradient(26rem circle at 50% -15%, #FBE9E4, transparent 62%), var(--cl-papel); color: var(--cl-tinta);
  box-shadow: 0 50px 90px -30px rgb(30 24 21 / .6), 0 0 0 1px rgb(47 40 36 / .06);
  animation: confirma-entra .6s cubic-bezier(.2, 1.35, .35, 1);
}
.confirma::backdrop { background: rgb(30 24 21 / .45); backdrop-filter: blur(7px); animation: confirma-fundo .35s ease-out; }
.confirma.fechando { animation: confirma-sai .22s ease-in forwards; }
.confirma.fechando::backdrop { animation: confirma-fundo .22s ease-in reverse forwards; }
.confirma__caixa { padding: 2.1rem 1.75rem 1.6rem; text-align: center; }
.confirma__icone {
  position: relative; display: grid; place-items: center; width: 4.75rem; height: 4.75rem; margin: 0 auto 1.2rem; border-radius: 50%;
  background: linear-gradient(145deg, #FDECE8, #F4CFC6); color: #B3412E; box-shadow: inset 0 0 0 1px rgb(179 65 46 / .12);
  animation: confirma-icone .7s .08s cubic-bezier(.3, 1.6, .5, 1) backwards;
}
.confirma__icone::before, .confirma__icone::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgb(179 65 46 / .3);
  animation: confirma-onda 2.4s .5s ease-out infinite;
}
.confirma__icone::after { animation-delay: 1.7s; }
.confirma__icone svg { width: 2.3rem; height: 2.3rem; overflow: visible; }
.confirma__icone .material-symbols-outlined { font-size: 2.3rem; }
.confirma__icone .lixeira-tampa { animation: confirma-tampa 2.6s .9s ease-in-out infinite; }
.confirma:has(.confirma__excluir:hover) .confirma__icone .lixeira-tampa { animation: none; transform: translateY(-3px) rotate(32deg); }
.confirma h2 { margin: 0; font: 400 2rem/1.15 "Italiana", serif; letter-spacing: .01em; -webkit-text-stroke: .015em currentColor; overflow-wrap: anywhere; }
.confirma p { margin: .55rem 0 0; color: var(--cl-tinta-2); font-size: .92rem; line-height: 1.55; }
.confirma :is(h2, p, form) { animation: confirma-item .55s cubic-bezier(.2, 1, .3, 1) backwards; }
.confirma p { animation-delay: .07s; }
.confirma form { animation-delay: .14s; }
.confirma__botoes { display: flex; gap: .6rem; margin-top: 1.6rem; }
.confirma__botoes button {
  flex: 1; padding: .8rem 1rem; border-radius: 999px; font-weight: 600; font-size: .9rem; cursor: pointer;
  transition: transform .2s, box-shadow .3s, background .2s, border-color .2s;
}
.confirma__cancelar { background: #fff; border: 1px solid rgb(47 40 36 / .14); color: var(--cl-tinta); }
.confirma__cancelar:hover { border-color: var(--cl-areia); transform: translateY(-1px); }
.confirma__excluir {
  position: relative; overflow: hidden; border: 0; color: #fff;
  background: linear-gradient(135deg, #C9553F, #9C3423); box-shadow: 0 12px 24px -12px rgb(156 52 35 / .95);
}
.confirma__excluir:hover { transform: translateY(-1px); box-shadow: 0 16px 28px -12px rgb(156 52 35 / 1); }
.confirma--resposta .confirma__icone { background: linear-gradient(145deg, #F6EEE5, #E8DCCD); color: var(--cl-tinta); box-shadow: inset 0 0 0 1px rgb(43 36 32 / .1); }
.confirma--resposta .confirma__icone::before, .confirma--resposta .confirma__icone::after { display: none; }
.confirma--resposta .confirma__excluir { background: var(--cl-noite); box-shadow: 0 12px 24px -12px rgb(43 36 32 / .8); }  /* aprovar ou recusar: sem o vermelho da exclusão */
.confirma__excluir::after {  /* brilho que atravessa o botão */
  content: ""; position: absolute; inset: 0; transform: translateX(-110%);
  background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .35) 50%, transparent 70%);
}
.confirma__excluir:hover::after { transform: translateX(110%); transition: transform .75s ease; }
.confirma__excluir:disabled { cursor: progress; opacity: .85; transform: none; }
/* tipo em uso: cadeado em tons de areia e um único botão, "Entendi" */
.confirma--bloqueio { background: radial-gradient(26rem circle at 50% -15%, #F3E8DC, transparent 62%), var(--cl-papel); }
.confirma--bloqueio .confirma__icone { background: linear-gradient(145deg, #F6EEE5, #E8DACB); color: #8A7461; box-shadow: inset 0 0 0 1px rgb(138 116 97 / .15); }
.confirma--bloqueio .confirma__icone::before, .confirma--bloqueio .confirma__icone::after { border-color: rgb(196 172 150 / .55); }
.confirma--bloqueio .confirma__icone .material-symbols-outlined { animation: cadeado-balanca .6s .45s; }
.confirma--bloqueio .confirma__excluir { display: none; }
.confirma--bloqueio .confirma__cancelar { background: var(--cl-noite); border-color: transparent; color: var(--cl-creme); }
@keyframes confirma-entra { from { opacity: 0; transform: translateY(28px) scale(.9); } }
@keyframes confirma-sai { to { opacity: 0; transform: translateY(14px) scale(.95); } }
@keyframes confirma-fundo { from { opacity: 0; } }
@keyframes confirma-icone { from { transform: scale(0) rotate(-40deg); } }
@keyframes confirma-onda { from { transform: scale(1); opacity: 1; } to { transform: scale(1.75); opacity: 0; } }
@keyframes confirma-item { from { opacity: 0; transform: translateY(10px); } }
@keyframes confirma-tampa { 0%, 68%, 100% { transform: none; } 78% { transform: translateY(-2.5px) rotate(24deg); } 88% { transform: translateY(-1px) rotate(8deg); } }
@media (prefers-reduced-motion: reduce) {
  .confirma, .confirma::backdrop, .confirma *, .confirma *::before, .confirma *::after, .lista-lixeira, .lista-lixeira *, #result_list tr.data-row > * {
    animation: none !important; transition: none !important;
  }
}

/* menu "⋮" ao lado de um campo de escolha (editar, cadastrar, excluir a opção): largura do texto, sem cortar */
nav[id^="related-widget-wrapper-"] { width: max-content !important; max-width: calc(100vw - 2rem); }

/* senha: só o botão de trocar, sem o código técnico (contas/templates/contas/senha.html) */
.senha-campo { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.senha-campo__pontos { color: #72655C; letter-spacing: .2em; }
.senha-campo__botao {
  display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 1rem; border-radius: 999px;
  background: var(--cl-noite); color: var(--cl-creme) !important; font-weight: 600; font-size: .85rem; text-decoration: none;
  transition: background .2s, transform .2s;
}
.senha-campo__botao:hover { background: var(--cl-breu); transform: translateY(-1px); }
.senha-campo__botao .material-symbols-outlined { font-size: 1.05rem; }

/* avisos do tema (azuis) nas cores da marca */
#main .bg-blue-100.text-blue-700 { background: #F6EEE5; color: var(--cl-tinta-2); box-shadow: inset 3px 0 0 var(--cl-areia); }
#main .bg-blue-100.text-blue-700 a { color: var(--cl-tinta); font-weight: 600; }

/* =====================================================================
   Boas-vindas logo depois do login (static/painel/painel.js)
   ===================================================================== */
html.boas-vindas-cobre::before, .boas-vindas {
  content: ""; position: fixed; inset: 0; z-index: 9999;
  background: radial-gradient(50rem circle at 50% 40%, rgb(196 172 150 / .2), transparent 62%), linear-gradient(160deg, var(--cl-noite), var(--cl-breu));
}
.boas-vindas { display: grid; place-items: center; padding: 1.5rem; color: var(--cl-creme); text-align: center; cursor: pointer; }
.boas-vindas.saindo { animation: boas-vindas-sobe 1s cubic-bezier(.76, 0, .24, 1) forwards; }
@keyframes boas-vindas-sobe { to { transform: translateY(-100%); } }
.boas-vindas__centro { display: grid; justify-items: center; }
.boas-vindas img { width: 3.4rem; filter: invert(94%) sepia(10%); animation: boas-vindas-surge 1s cubic-bezier(.22, .61, .36, 1) .1s both; }
@keyframes boas-vindas-surge { from { opacity: 0; transform: scale(.8); } }
.boas-vindas__linha { display: block; width: 4.5rem; height: 1px; margin: 1.6rem 0 1.4rem; background: var(--cl-areia); animation: boas-vindas-linha .9s cubic-bezier(.22, .61, .36, 1) .45s both; }
@keyframes boas-vindas-linha { from { transform: scaleX(0); } }
.boas-vindas__saudacao { margin: 0; color: var(--cl-areia); font-size: .8rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; animation: entrada-sobe .8s cubic-bezier(.22, .61, .36, 1) .6s both; }
.boas-vindas__nome { margin: .5rem 0 0; font: 400 clamp(3rem, 2rem + 5vw, 6rem)/1.05 "Italiana", serif; letter-spacing: .02em; -webkit-text-stroke: .015em currentColor; }
.boas-vindas__nome span { display: inline-block; animation: boas-vindas-letra .9s cubic-bezier(.22, .61, .36, 1) both; animation-delay: calc(.75s + var(--i) * 55ms); }
@keyframes boas-vindas-letra { from { opacity: 0; transform: translateY(.45em); filter: blur(6px); } }
.boas-vindas__texto { margin: 1.1rem 0 0; color: rgb(243 238 232 / .72); font-size: .95rem; animation: entrada-sobe .8s cubic-bezier(.22, .61, .36, 1) 1.15s both; }
/* o painel sobe de leve enquanto a cortina abre */
html.boas-vindas-chegou #content { animation: entrada-sobe .9s cubic-bezier(.22, .61, .36, 1) .15s both; }
@media (prefers-reduced-motion: reduce) {
  .boas-vindas *, html.boas-vindas-chegou #content { animation: none !important; }
  .boas-vindas.saindo { animation: none; opacity: 0; transition: opacity .3s; }
}

/* Permissões (contas/templates/contas/permissoes.html): o que cada perfil pode fazer, com uma chave por perfil */
.permissoes .lista-ajuda { margin: 0 0 1rem; }
/* clip, e não auto: uma caixa com rolagem própria prenderia o cabeçalho dentro dela, e ele sairia da tela ao rolar a página */
.permissoes__tabela { overflow-x: clip; border: 1px solid var(--cl-linha); border-radius: 18px; background: var(--cl-papel); box-shadow: var(--cl-sombra); }
.permissoes table { width: 100%; min-width: 44rem; border-collapse: collapse; }
/* cabeçalho preso no alto ao rolar; a linha de baixo em sombra, porque a borda da célula presa não acompanha (border-collapse) */
.permissoes thead th { position: sticky; top: 0; z-index: 1; padding: 1rem .75rem; background: var(--cl-papel); box-shadow: inset 0 -1px 0 var(--cl-linha), 0 6px 12px -8px rgb(43 36 32 / .25);
  color: var(--cl-tinta); font-size: .85rem; font-weight: 700; text-align: center; }
.permissoes thead th:first-child { text-align: left; padding-left: 1.25rem; }
.permissoes thead th span { display: block; margin-top: .15rem; color: #72655C; font-size: .72rem; font-weight: 500; }
.permissoes__area th { padding: 1.1rem 1.25rem .5rem; text-align: left; font: 400 1.25rem/1.2 "Italiana", serif; color: var(--cl-tinta); -webkit-text-stroke: .015em currentColor; }
.permissoes tbody tr:not(.permissoes__area) { border-top: 1px solid var(--cl-linha); transition: background .2s; }
.permissoes tbody tr:not(.permissoes__area):hover { background: #FBF7F2; }
.permissoes tbody th[scope="row"] { padding: .75rem .75rem .75rem 1.25rem; text-align: left; font-weight: 400; color: var(--cl-tinta); font-size: .9rem; }
.permissoes tbody th small { display: block; margin-top: .15rem; color: var(--cl-tinta-2); font-size: .78rem; line-height: 1.4; }
.permissoes td { width: 8.5rem; padding: .5rem; text-align: center; }
.permissoes__nao { color: #C9BBAE; }
/* chave liga e desliga, nas cores da marca */
.chave { position: relative; flex: none; display: inline-block; width: 2.6rem; height: 1.5rem; cursor: pointer; }
.chave input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chave span { position: absolute; inset: 0; border-radius: 999px; background: #E7DDD2; transition: background .25s; pointer-events: none; }
.chave span::after { content: ""; position: absolute; top: .2rem; left: .2rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgb(43 36 32 / .35); transition: transform .3s cubic-bezier(.2, 1, .3, 1); }
.chave input:checked + span { background: #3F7A5A; }
.chave input:checked + span::after { transform: translateX(1.1rem); }
.chave input:focus-visible + span { outline: 2px solid var(--cl-areia); outline-offset: 2px; }
.permissoes__salvar { position: sticky; bottom: 0; display: flex; justify-content: flex-end; padding: 1rem 0; background: linear-gradient(transparent, var(--cl-creme) 35%); }
.permissoes__salvar button { padding: .75rem 1.8rem; border-radius: 999px; background: var(--cl-noite); color: var(--cl-creme); font-weight: 600; transition: background .2s, transform .2s; }
.permissoes__salvar button:hover { background: var(--cl-breu); transform: translateY(-1px); }
.permissoes__salvar button:disabled { opacity: .75; cursor: wait; transform: none; }
/* no celular, cada linha vira um cartão, com as chaves dos perfis lado a lado e o nome de cada um */
@media (max-width: 48rem) {
  .permissoes table { min-width: 0; }
  .permissoes thead { display: none; }
  .permissoes tbody, .permissoes tr, .permissoes th, .permissoes td { display: block; }
  .permissoes tbody tr:not(.permissoes__area) { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding: .9rem 1rem 1rem; }
  .permissoes tbody th[scope="row"] { grid-column: 1 / -1; padding: 0 0 .2rem; }
  .permissoes td { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: auto; padding: .45rem .6rem;
    border-radius: 10px; background: #FBF7F2; text-align: left; font-size: .76rem; font-weight: 600; color: var(--cl-tinta-2); }
  .permissoes td::before { content: attr(data-perfil); }
  .permissoes td:has(.permissoes__nao) { display: none; }  /* linha do painel: só a chave da diretoria */
  .permissoes__area th { padding-left: 1rem; }
}

/* Ficha: o cadastro aberto só para ler (FichaPrimeiro, contas/admin.py; marca .modo-ficha na faixa do topo).
   Os campos em duas colunas, com o nome pequeno em cima e o dado em destaque; sem as dicas de preenchimento */
#main:has(.modo-ficha) .form-rows:not([x-data]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
#main:has(.modo-ficha) .form-rows:not([x-data]) > .field-row.largo { grid-column: 1 / -1; }
#main:has(.modo-ficha) .field-line { flex-direction: column; align-items: stretch; min-height: 0; padding: .9rem 1.25rem; border-style: solid; border-color: var(--cl-linha); }
#main:has(.modo-ficha) .field-line > div:first-child { width: auto; min-width: 0; height: auto; line-height: 1.2; }
#main:has(.modo-ficha) .field-line label { margin: 0 0 .3rem !important; color: #72655C; font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
#main:has(.modo-ficha) .field-line .readonly { max-width: none; color: var(--cl-tinta); font-size: .98rem; line-height: 1.55; }
#main:has(.modo-ficha) .field-line .readonly.vazio { color: #776A61; font-size: .86rem; font-style: italic; }
#main:has(.modo-ficha) .field-line .readonly + div { display: none; }  /* dica do campo: é para quem preenche */
@media (max-width: 64rem) { #main:has(.modo-ficha) .form-rows:not([x-data]) { grid-template-columns: 1fr; } }
/* botão principal da faixa do topo (Editar) */
.pagina-topo__botao--principal { background: var(--cl-noite); border-color: var(--cl-noite); color: var(--cl-creme) !important; }
.pagina-topo__botao--principal .material-symbols-outlined { color: var(--cl-areia); }
.pagina-topo__botao--principal:hover { background: var(--cl-breu); }


/* links dentro do texto de um campo (ex.: "Li e aceito a política de privacidade", no cadastro de fornecedor) */
form label a { text-decoration: underline; text-underline-offset: 3px; }

/* Acessibilidade (painel.js): "Pular para o conteúdo", o primeiro Tab de cada tela */
.pular { position: fixed; left: 1rem; top: -4rem; z-index: 10000; padding: .75rem 1.25rem; border-radius: 999px; background: var(--cl-tinta); color: var(--cl-creme); }
.pular:focus { top: 1rem; }
/* o campo focado não fica por baixo do topo nem da barra presa ao rolar ("Salvar alterações", a contagem da lista) */
html { scroll-padding: 5rem 0 6rem; }
[role=button][tabindex="0"]:focus-visible { outline: 2px solid var(--cl-tinta); outline-offset: 2px; border-radius: 6px; }
/* com a fonte do navegador grande, a busca da lista encolhe em vez de alargar a página */
#toolbar, #changelist-search, #changelist-search > div { min-width: 0; max-width: 100%; }
.arquivo-miniatura { display: block; width: 6rem; height: 4rem; margin-bottom: .4rem; border-radius: 8px; object-fit: cover; }  /* foto na ficha (painel.js) */