/* ============================================================================
   GESTOR EBD CAMPINAS — Padrão Azul e Ouro (D-76, mostruário V3 aprovado)
   VERMELHO = grave · OURO = pendente/destaque/dinheiro · AZUL = positivo/andamento
   Sem verde · sem ícones (texto puro) · fontes Sora + Manrope
   ========================================================================== */
:root{
  --fundo:#060E22; --fundo-radial:#0E1E44;
  --painel:#101F3E; --card:#152848; --card-alto:#1A3156;
  --linha:rgba(120,165,255,.13); --linha-forte:rgba(120,165,255,.22);
  --texto:#EAF0FC; --texto-2:#9FB0D2; --texto-3:#8291B5;
  --royal:#2F7DF6; --royal-vivo:#4D96FF; --royal-fundo:rgba(47,125,246,.14);
  --ouro:#E9C33F; --ouro-claro:#F5D96E; --ouro-fundo:rgba(233,195,63,.13);
  --alerta:#E8554A; --alerta-fundo:rgba(232,85,74,.12);
  --positivo:#7FB8FF; --positivo-fundo:rgba(127,184,255,.14);
  --sombra-card:0 1px 0 rgba(255,255,255,.05) inset, 0 2px 6px rgba(3,8,20,.5), 0 18px 44px rgba(3,8,20,.42);
  --sombra-alta:0 1px 0 rgba(255,255,255,.07) inset, 0 4px 10px rgba(3,8,20,.55), 0 28px 64px rgba(3,8,20,.55);
  --raio:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--fundo);
  background-image:radial-gradient(1100px 520px at 78% -10%, rgba(59,130,246,.26), transparent 60%),
                   radial-gradient(900px 480px at -8% 32%, rgba(96,165,250,.12), transparent 55%);
  color:var(--texto); font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:15px; line-height:1.55; min-height:100vh;
}
h1,h2,h3,.num{font-family:'Sora','Manrope',system-ui,sans-serif}
.num{font-variant-numeric:tabular-nums}
::selection{background:rgba(47,125,246,.35)}
[hidden]{display:none!important}
button{font:inherit;cursor:pointer}
a{color:var(--royal-vivo)}

/* ---------- marca: medalhão de vidro com a logo oficial branca ---------- */
.medalhao{width:88px;height:88px;border-radius:50%;display:grid;place-items:center;margin:0 auto;position:relative;
  background:radial-gradient(120% 120% at 30% 18%, rgba(130,178,255,.30), rgba(18,36,80,.55) 55%, rgba(6,14,34,.78));
  border:1px solid rgba(155,198,255,.38);backdrop-filter:blur(6px);
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 -12px 26px rgba(8,18,46,.65) inset,
             0 14px 34px rgba(3,8,20,.6), 0 0 46px rgba(47,125,246,.38)}
.medalhao::before{content:"";position:absolute;top:6px;left:16px;right:16px;height:26px;border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.38),transparent);filter:blur(2px);pointer-events:none}
.medalhao::after{content:"";position:absolute;inset:-14px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side, rgba(233,195,63,.12), transparent 70%)}
.medalhao img{width:90%;display:block;transform:translate(-3%,1%);filter:drop-shadow(0 3px 7px rgba(0,0,0,.55))}
.medalhao.mini{width:38px;height:38px;margin:0;backdrop-filter:none;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 5px 14px rgba(3,8,20,.55), 0 0 18px rgba(47,125,246,.35)}
.medalhao.mini::before{top:3px;left:7px;right:7px;height:11px}
.medalhao.mini::after{inset:-6px}

/* ---------- TELA DE ENTRADA / INSTALAÇÃO ---------- */
.entrada{min-height:100vh;display:grid;place-items:center;padding:40px 18px}
.entrada-card{width:min(400px,100%);background:linear-gradient(180deg,var(--card-alto),var(--painel));
  border:1px solid var(--linha-forte);border-radius:22px;box-shadow:var(--sombra-alta);
  padding:38px 34px;text-align:center;position:relative;overflow:hidden}
.entrada-card::before{content:"";position:absolute;inset:0 0 auto 0;height:1.5px;
  background:linear-gradient(90deg,transparent,rgba(233,195,63,.8),transparent)}
.entrada-card h1{font-size:22px;font-weight:800;letter-spacing:-.01em;margin:16px 0 4px}
.entrada-card .sub{color:var(--texto-2);font-size:12.5px;margin-bottom:24px}
.campo{text-align:left;margin-bottom:14px}
.campo label{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-3);margin-bottom:6px}
.campo input{width:100%;background:rgba(6,12,26,.7);border:1px solid var(--linha-forte);border-radius:11px;
  padding:12px 14px;color:var(--texto);font:inherit}
.campo input:focus{outline:2px solid var(--royal);outline-offset:1px;border-color:transparent}
.campo-senha{position:relative}
.campo-senha input{padding-right:48px}
.ver-senha{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;
  color:var(--texto-3);display:grid;place-items:center;padding:7px;border-radius:8px;transition:.15s}
.ver-senha:hover{color:var(--royal-vivo)}
.ver-senha:hover{background:var(--royal-fundo)}
.entrada-card .ajuda{margin-top:14px;font-size:12.5px;text-align:center}
.entrada-card .ajuda a{color:var(--royal-vivo);text-decoration:none}
.botao{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;
  font-family:'Sora','Manrope',system-ui,sans-serif;font-weight:700;font-size:14.5px;color:#fff;
  border:1px solid rgba(255,255,255,.2);background:linear-gradient(180deg,var(--royal-vivo),#2364CC);
  border-radius:12px;padding:13px 16px;box-shadow:0 10px 26px rgba(47,125,246,.45), 0 1px 0 rgba(255,255,255,.25) inset;transition:.18s}
.botao:hover{transform:translateY(-1px);box-shadow:0 14px 32px rgba(47,125,246,.55)}
.botao:disabled{opacity:.6;cursor:wait;transform:none}
.botao.ouro{color:#241A02;background:linear-gradient(180deg,var(--ouro-claro),#C79A22);
  border-color:rgba(255,255,255,.4);box-shadow:0 10px 26px rgba(233,195,63,.38)}
.erro-caixa{background:var(--alerta-fundo);border:1px solid rgba(232,85,74,.35);color:#FFB4AD;
  border-radius:10px;padding:10px 13px;font-size:13px;margin-bottom:14px;text-align:left}
.aviso-caixa{background:var(--positivo-fundo);border:1px solid rgba(127,184,255,.3);color:#BFDCFF;
  border-radius:10px;padding:10px 13px;font-size:13px;margin-bottom:14px;text-align:left}
.entrada-rodape{margin-top:22px;color:var(--texto-3);font-size:11.5px;letter-spacing:.06em;text-align:center}

/* ---------- SHELL DO APP ---------- */
.app{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
.lateral{background:linear-gradient(180deg,#0C1830,#0A1428);border-right:1px solid var(--linha);
  padding:20px 14px 20px max(14px,env(safe-area-inset-left,0px));   /* iPhone grande em paisagem cai aqui */
  display:flex;flex-direction:column}
.lateral .marca{display:flex;align-items:center;gap:10px;padding:4px 8px 18px;border-bottom:1px solid var(--linha);margin-bottom:14px}
.lateral .marca b{font-family:'Sora','Manrope',system-ui,sans-serif;font-size:14px;line-height:1.15;display:block}
.lateral .marca small{color:var(--texto-3);font-size:10.5px;letter-spacing:.08em}
.menu{display:flex;flex-direction:column;gap:3px}
.menu a{display:block;color:var(--texto-2);text-decoration:none;font-size:13.5px;font-weight:600;
  padding:10px 14px;border-radius:10px;border:1px solid transparent;transition:.15s}
/* hover: vidro translúcido (pedido do Marcus, 18/09 — destacar antes do clique) */
.menu a:hover{background:linear-gradient(180deg,rgba(130,178,255,.14),rgba(77,150,255,.06));
  border-color:rgba(155,198,255,.28);color:var(--texto);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 4px 14px rgba(10,25,60,.35)}
/* selecionado: mantém o estilo + iluminação em ouro pelo lado esquerdo (como no celular) */
.menu a.ativo{background:linear-gradient(90deg,rgba(47,125,246,.2),rgba(47,125,246,.06));
  border-color:rgba(77,150,255,.3);color:#fff;
  box-shadow:inset 3px 0 0 var(--ouro), inset 16px 0 20px -12px rgba(233,195,63,.4),
             0 6px 16px rgba(20,50,110,.35)}
.lateral .rodape-lateral{margin-top:auto;padding:12px 8px 0;font-size:11px;color:var(--texto-3)}
.conteudo{padding:26px clamp(16px,3.4vw,38px) 46px;min-width:0}
.topo-app{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-bottom:22px}
.topo-app h2{font-size:21px;font-weight:800;letter-spacing:-.01em}
.topo-app .trim{font-family:'Sora','Manrope',system-ui,sans-serif;font-size:12px;font-weight:700;color:var(--royal-vivo);
  background:var(--royal-fundo);border:1px solid rgba(77,150,255,.35);border-radius:999px;padding:5px 13px}
.topo-marca{display:none}   /* a marca no topo do conteúdo é só do celular */
.usuario{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--texto-2)}
.usuario .avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  font-family:'Sora','Manrope',system-ui,sans-serif;font-weight:700;font-size:12px;
  background:linear-gradient(160deg,var(--ouro-claro),#C79A22);color:#241A02;box-shadow:0 4px 12px rgba(233,195,63,.4)}
.botao-sair{background:transparent;border:1px solid var(--linha-forte);color:var(--texto-2);
  border-radius:9px;padding:7px 13px;font-size:12.5px;font-weight:600}
.botao-sair:hover{color:var(--texto);border-color:rgba(120,165,255,.4)}

/* cartões */
.cartoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:22px}
.cartao{background:linear-gradient(180deg,var(--card-alto),var(--card));border:1px solid var(--linha);
  border-radius:var(--raio);box-shadow:var(--sombra-card);padding:16px 17px;position:relative;overflow:hidden}
.cartao .rotulo{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--texto-3);margin-bottom:8px}
.cartao .valor{font-family:'Sora','Manrope',system-ui,sans-serif;font-size:20px;font-weight:800}
.cartao .apoio{font-size:11.5px;color:var(--texto-2);margin-top:5px;overflow-wrap:anywhere}
.cartao.destaque .valor{color:var(--ouro-claro);text-shadow:0 0 26px rgba(233,195,63,.35)}
.cartao.destaque::after{content:"";position:absolute;inset:auto -30% -65% -30%;height:120%;
  background:radial-gradient(closest-side,rgba(233,195,63,.16),transparent);pointer-events:none}
.bloco{background:linear-gradient(180deg,var(--card-alto),var(--card));border:1px solid var(--linha);
  border-radius:var(--raio);box-shadow:var(--sombra-card);padding:18px 20px;margin-bottom:16px}
.bloco h3{font-size:13.5px;font-weight:700;margin-bottom:4px}
.bloco .desc{color:var(--texto-3);font-size:11.5px;margin-bottom:10px}
.selo-etapa{display:inline-block;font-family:'Sora','Manrope',system-ui,sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.14em;color:var(--ouro);border:1px solid rgba(233,195,63,.35);border-radius:999px;
  padding:5px 12px;background:var(--ouro-fundo)}

/* ---------- Administração e Minha conta (E0) ---------- */
.adm-topo{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:14px}
.botao.curto{width:auto;padding:10px 18px;font-size:13px}
.bloco-form{max-width:540px}
.linha-botoes{display:flex;align-items:center;gap:12px;margin-top:6px}
.campo select{width:100%;background:rgba(6,12,26,.7);border:1px solid var(--linha-forte);border-radius:11px;
  padding:12px 38px 12px 14px;color:var(--texto);font:inherit;appearance:none;-webkit-appearance:none;cursor:pointer}
.campo select:focus{outline:2px solid var(--royal);outline-offset:1px;border-color:transparent}
/* a seta que o appearance:none removeu (chevron no traço fino do padrão) */
.campo select,.filtros select,.form-inline select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 L6 6.5 L11 1.5' fill='none' stroke='%238291B5' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 13px center}
.usuario-linha{display:grid;grid-template-columns:1fr auto;gap:4px 14px;align-items:center;padding:13px 4px}
.usuario-linha + .usuario-linha{border-top:1px solid var(--linha)}
.usuario-linha.inativa .quem{opacity:.55}
.usuario-linha .quem b{font:700 14px 'Sora','Manrope',system-ui,sans-serif;display:block}
.usuario-linha .quem b .voce{color:var(--ouro-claro);font-size:11px;font-weight:700}
.usuario-linha .quem small{color:var(--texto-3);font-size:11.5px;overflow-wrap:anywhere}
.selos{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.selo{font:700 9.5px 'Sora','Manrope',system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;
  border-radius:999px;padding:3px 9px;border:1px solid}
.selo.azul{color:var(--royal-vivo);background:var(--royal-fundo);border-color:rgba(77,150,255,.35)}
.selo.ouro{color:var(--ouro);background:var(--ouro-fundo);border-color:rgba(233,195,63,.35)}
.selo.neutro{color:var(--texto-3);background:rgba(130,145,181,.1);border-color:var(--linha-forte)}
.acoes-linha{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.botao-mini{background:transparent;border:1px solid var(--linha-forte);color:var(--texto-2);
  border-radius:8px;padding:5px 11px;font-size:11.5px;font-weight:600;transition:.15s}
.botao-mini:hover{color:var(--texto);border-color:rgba(120,165,255,.45);background:rgba(120,165,255,.08)}
.botao-mini:disabled{opacity:.35;cursor:default;pointer-events:none}   /* desabilitado se distingue do vivo */
.botao-mini.perigo{color:#FFB4AD;border-color:rgba(232,85,74,.35)}
.botao-mini.perigo:hover{background:var(--alerta-fundo);border-color:rgba(232,85,74,.55);color:#FFC9C4}
.perm-grupo{margin:16px 0 4px}
.perm-grupo h4{font:700 10.5px 'Sora','Manrope',system-ui,sans-serif;letter-spacing:.13em;
  text-transform:uppercase;color:var(--texto-3);margin-bottom:4px}
.perm-linha{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 2px;border-top:1px solid var(--linha)}
.perm-linha span{font-size:13px}
.perm-linha select{background:rgba(6,12,26,.7);border:1px solid var(--linha-forte);border-radius:8px;
  color:var(--texto-2);font:600 12px 'Manrope',system-ui,sans-serif;padding:6px 8px;cursor:pointer;max-width:52%}
.perm-linha select.excecao{color:var(--ouro-claro);border-color:rgba(233,195,63,.5)}  /* exceção salta aos olhos */
/* critérios de senha: aparecem ao tocar no campo; cada item vira azul ao cumprir */
.criterios-senha{list-style:none;text-align:left;background:rgba(6,12,26,.55);
  border:1px solid var(--linha);border-radius:11px;padding:10px 14px;margin:-4px 0 14px}
/* pendente = OURO com ✗ (falta resolver); cumprido = AZUL com ✓ — semântica D-76 */
.criterios-senha li{font-size:12px;color:var(--ouro);padding:2.5px 0 2.5px 20px;position:relative;transition:color .15s}
.criterios-senha li::before{content:"✗";position:absolute;left:4px;top:2.5px;font-size:10.5px;font-weight:700}
.criterios-senha li::before{content:"✗" / ""}          /* glifo decorativo: leitor de tela ignora */
.criterios-senha li.ok{color:var(--positivo)}
.criterios-senha li.ok::before{content:"✓";font-size:12px;font-weight:700}
.criterios-senha li.ok::before{content:"✓" / ""}
/* texto invisível que informa "cumprido" aos leitores de tela */
.apenas-leitor{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.usuario-botao{display:flex;align-items:center;gap:10px;background:none;border:0;padding:0;
  font:inherit;color:inherit;cursor:pointer}
.usuario-botao:focus-visible{outline:2px solid var(--ouro);outline-offset:3px;border-radius:10px}
.link-minha-conta{display:inline-block;font-size:11.5px;color:var(--royal-vivo);text-decoration:none;margin-top:3px}
.rodape-lateral .link-minha-conta{display:block;margin-bottom:4px}

/* ---------- E1 · Cadastros ---------- */
/* pílulas das seções da Administração (rolam de lado no celular) */
.pills{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;margin-bottom:16px;
  scrollbar-width:none}
.pills::-webkit-scrollbar{display:none}
.pill{flex-shrink:0;text-decoration:none;font:600 12.5px 'Manrope',system-ui,sans-serif;color:var(--texto-2);
  border:1px solid var(--linha-forte);border-radius:999px;padding:8px 15px;transition:.15s;white-space:nowrap}
.pill:hover{color:var(--texto);background:rgba(120,165,255,.08);border-color:rgba(120,165,255,.4)}
.pill.ativa{color:#fff;background:linear-gradient(90deg,rgba(47,125,246,.25),rgba(47,125,246,.1));
  border-color:rgba(77,150,255,.45);box-shadow:inset 0 0 0 0 transparent, 0 4px 12px rgba(20,50,110,.3);
  position:relative}
.pill.ativa::before{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--ouro),transparent)}

/* filtros das listas */
.filtros{display:flex;flex-wrap:wrap;gap:8px;align-items:center;flex:1;min-width:0}
.filtros input[type=search],.filtros select{background:rgba(6,12,26,.7);border:1px solid var(--linha-forte);
  border-radius:10px;padding:9px 12px;color:var(--texto);font:inherit;font-size:13px}
.filtros input[type=search]{min-width:170px;flex:1;max-width:280px}
.filtros input:focus,.filtros select:focus{outline:2px solid var(--royal);outline-offset:1px;border-color:transparent}
.opcao-caixa{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--texto-2);cursor:pointer;
  margin:2px 0 12px}
.opcao-caixa input{accent-color:var(--royal);width:16px;height:16px}
.adm-topo .opcao-caixa,.filtros .opcao-caixa{margin:0}

/* linhas de lista clicáveis (congregações) */
.linha-link{text-decoration:none;color:inherit;border-radius:10px;transition:.12s;cursor:pointer}
.linha-link:hover{background:rgba(120,165,255,.06)}
.linha-link .abrir-ficha{font:600 11.5px 'Manrope',system-ui,sans-serif;color:var(--royal-vivo);white-space:nowrap}
.cod{display:inline-block;font:700 11px 'Sora','Manrope',system-ui,sans-serif;color:var(--ouro-claro);
  background:var(--ouro-fundo);border:1px solid rgba(233,195,63,.3);border-radius:7px;padding:1.5px 7px;
  margin-right:4px;vertical-align:1px}
.paginacao{display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-top:1px solid var(--linha);margin-top:12px;padding-top:12px}
.paginacao .desc{margin:0}

/* formulários compactos em linha (regionais, formas, listas de apoio) */
.form-inline{display:flex;flex-wrap:wrap;gap:8px;align-items:center;width:100%}
.form-inline input{flex:1;min-width:150px;background:rgba(6,12,26,.7);border:1px solid var(--linha-forte);
  border-radius:10px;padding:10px 13px;color:var(--texto);font:inherit;font-size:13.5px}
.form-inline input:focus{outline:2px solid var(--royal);outline-offset:1px;border-color:transparent}
.form-inline select{background:rgba(6,12,26,.7);border:1px solid var(--linha-forte);border-radius:10px;
  padding:10px 13px;color:var(--texto);font:inherit;font-size:13.5px}
.campo textarea{width:100%;background:rgba(6,12,26,.7);border:1px solid var(--linha-forte);border-radius:11px;
  padding:12px 14px;color:var(--texto);font:inherit;resize:vertical}
.campo textarea:focus{outline:2px solid var(--royal);outline-offset:1px;border-color:transparent}
.campo-curto{max-width:180px}

/* listas de apoio recolhíveis (públicos/classes) */
.detalhe-lista summary{display:flex;align-items:baseline;gap:10px;cursor:pointer;list-style:none}
.detalhe-lista summary::-webkit-details-marker{display:none}
.detalhe-lista summary::after{content:"›";margin-left:auto;color:var(--texto-3);font-weight:700;
  transform:rotate(90deg);transition:.15s}
.detalhe-lista[open] summary::after{transform:rotate(-90deg)}
.detalhe-lista summary h3{margin:0}
.detalhe-lista summary .desc{margin:0}

/* grade de preços (§1.4: tabela · custo · venda · margem) */
.preco-linha{border-top:1px solid var(--linha);padding:11px 2px;display:grid;gap:6px}
.preco-linha:first-of-type{border-top:0}
.preco-linha.fora{opacity:.45}
.preco-titulo{display:flex;align-items:center;gap:10px;font-size:13.5px;cursor:pointer}
.preco-titulo input{accent-color:var(--royal);width:17px;height:17px;flex-shrink:0}
.preco-titulo small{color:var(--texto-3)}
.preco-campos{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;padding-left:27px}
.preco-campos label{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--texto-3);
  font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.preco-campos input{width:88px;background:rgba(6,12,26,.7);border:1px solid var(--linha-forte);
  border-radius:9px;padding:8px 10px;color:var(--texto);font:inherit;font-size:14px;text-align:right}
.preco-campos input:focus{outline:2px solid var(--royal);outline-offset:1px;border-color:transparent}
.preco-info{font-size:12px;color:var(--texto-2)}
.preco-info b{color:var(--texto)}
.pre-margem{color:var(--ouro-claro)!important}
.pre-margem.negativa{color:#FFB4AD!important}

/* ---------- caixa de escolha (combobox padrão do sistema — parecer 22/09) ----------
   Campo que depende de tabela: clica → lista dos CADASTROS com pesquisa e
   "+ Criar novo". Fundo azul, texto azul-claro, seleção em OURO (D-76). */
.cx{position:relative}
.cx-campo{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  background:rgba(6,12,26,.7);border:1px solid var(--linha-forte);border-radius:11px;
  padding:12px 14px;color:var(--texto);font:inherit;text-align:left;cursor:pointer;transition:.15s}
.cx-campo:hover{border-color:rgba(120,165,255,.45)}
.cx-campo:focus-visible,.cx-campo[aria-expanded=true]{outline:2px solid var(--royal);outline-offset:1px;border-color:transparent}
.cx-campo svg{flex-shrink:0;color:var(--texto-3);transition:transform .15s}
.cx-campo[aria-expanded=true] svg{transform:rotate(180deg)}
.cx-texto{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-texto.vazio{color:var(--texto-3)}
.cx-painel{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:45;
  background:linear-gradient(180deg,var(--card-alto),var(--painel));
  border:1px solid var(--linha-forte);border-radius:14px;box-shadow:var(--sombra-alta);
  padding:8px;display:flex;flex-direction:column;gap:6px}
.cx-busca{width:100%;background:rgba(6,12,26,.7);border:1px solid var(--linha-forte);border-radius:9px;
  padding:10px 12px;color:var(--texto);font:inherit;font-size:16px}   /* 16px: sem auto-zoom */
.cx-busca:focus{outline:2px solid var(--ouro);outline-offset:1px;border-color:transparent}
.cx-criar{background:none;border:0;text-align:left;padding:8px 10px;border-radius:9px;
  font:700 12.5px 'Manrope',system-ui,sans-serif;color:var(--royal-vivo);cursor:pointer}
.cx-criar:hover{background:var(--royal-fundo)}
.cx-criar.destacado{color:var(--ouro-claro);background:var(--ouro-fundo);border:1px dashed rgba(233,195,63,.4)}
.cx-lista{max-height:min(260px,38vh);overflow:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:2px}
.cx-opcao{display:block;width:100%;text-align:left;background:none;border:0;border-radius:9px;
  padding:9px 10px;color:var(--texto);cursor:pointer;transition:.12s}
.cx-opcao b{font:600 13.5px 'Manrope',system-ui,sans-serif;display:block}
.cx-opcao small{color:var(--texto-3);font-size:11px}
.cx-opcao:hover{background:rgba(120,165,255,.1)}
/* selecionado: OURO, como manda o padrão */
.cx-opcao.escolhida{background:var(--ouro-fundo);box-shadow:inset 2.5px 0 0 var(--ouro)}
.cx-opcao.escolhida b{color:var(--ouro-claro)}
.cx-nada{color:var(--texto-3);font-size:12.5px;padding:10px}

/* ---------- janela de cadastro rápido (por cima, sem sair do formulário) ---------- */
.veu-modal{position:fixed;inset:0;z-index:90;background:rgba(3,8,20,.6);backdrop-filter:blur(3px)}
.modal-cadastro{position:fixed;z-index:95;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(430px,calc(100vw - 32px));max-height:86dvh;overflow:auto;
  background:linear-gradient(180deg,var(--card-alto),var(--painel));
  border:1px solid var(--linha-forte);border-radius:18px;box-shadow:var(--sombra-alta);
  padding:20px 22px}
.modal-cadastro::before{content:"";position:absolute;inset:0 0 auto 0;height:1.5px;
  background:linear-gradient(90deg,transparent,rgba(233,195,63,.8),transparent)}
.modal-topo{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.modal-topo h3{font-size:15px;font-weight:800}
.modal-fechar{background:none;border:1px solid var(--linha-forte);color:var(--texto-2);
  width:32px;height:32px;border-radius:50%;font-size:16px;line-height:1}
.modal-fechar:hover{color:var(--texto);border-color:rgba(120,165,255,.45)}
.dialogo-texto{font-size:13.5px;color:var(--texto-2);line-height:1.6;margin-bottom:10px}
.dialogo-texto b{color:var(--texto)}
.dialogo-botoes{margin-top:14px;flex-wrap:wrap}
.botao.perigo{color:#fff;background:linear-gradient(180deg,#E8554A,#B93B32);
  border-color:rgba(255,255,255,.25);box-shadow:0 10px 26px rgba(232,85,74,.35)}

/* sub-abas do catálogo (Público · Classes · Revistas) */
.pills.sub{margin:-6px 0 14px}
.pills.sub .pill{font-size:11.5px;padding:6px 13px}

/* alça de arrastar (3 formas de ordenar: alça, setas, por código) */
.alca{display:grid;place-items:center;flex-shrink:0;width:26px;height:34px;border-radius:8px;
  color:var(--texto-3);cursor:grab;touch-action:none}
.alca:hover{color:var(--royal-vivo);background:rgba(120,165,255,.1)}
.alca svg{fill:currentColor}
.linha-arrastavel{display:flex;align-items:center;gap:10px}
.linha-arrastavel .quem{flex:1;min-width:0}
/* o cartão levantado: sobrepõe as irmãs, sombra alta, contorno ouro, segue o ponteiro */
.arrastando{position:relative;z-index:30;opacity:.97;cursor:grabbing;
  background:linear-gradient(180deg,var(--card-alto),var(--card));border-radius:12px;
  box-shadow:0 0 0 1.5px rgba(233,195,63,.55), 0 14px 34px rgba(3,8,20,.75), 0 0 30px rgba(233,195,63,.18);
  padding-left:8px;padding-right:8px;margin-left:-8px;margin-right:-8px}
.arrastando .alca{cursor:grabbing;color:var(--ouro-claro)}
.assentando{position:relative;z-index:30;transition:transform .18s ease-out}
body.sem-selecao{user-select:none;-webkit-user-select:none}
body.sem-selecao *{cursor:grabbing}
.preco-topo{display:flex;align-items:center;gap:8px}
.preco-topo .preco-titulo{flex:1;min-width:0}
.preco-setas{display:flex;gap:5px;flex-shrink:0}

/* campo de arquivo (importação) no padrão dos demais */
.campo input[type=file]{padding:10px;cursor:pointer}
.campo input[type=file]::file-selector-button{background:linear-gradient(180deg,var(--royal-vivo),#2364CC);
  color:#fff;border:0;border-radius:8px;padding:8px 14px;margin-right:12px;
  font:700 12.5px 'Sora','Manrope',system-ui,sans-serif;cursor:pointer}
@media(max-width:900px){
  /* no celular a janela vira painela deslizante de baixo, como o Mais */
  .modal-cadastro{left:0;right:0;top:auto;bottom:0;transform:none;width:auto;
    border-radius:20px 20px 0 0;border-bottom:0;max-height:88dvh;
    padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
}

/* busca global do topo (desktop) */
.busca-topo{position:relative;flex:1;max-width:330px;min-width:190px}
.busca-topo input{width:100%;background:rgba(6,12,26,.7);border:1px solid var(--linha-forte);
  border-radius:11px;padding:10px 14px;color:var(--texto);font:inherit;font-size:13px;-webkit-appearance:none}
.busca-topo input::placeholder{color:var(--texto-3);opacity:.75}
.busca-topo input:focus{outline:2px solid var(--royal);outline-offset:1px;border-color:transparent}
.busca-topo-lista{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:40;
  background:linear-gradient(180deg,var(--card-alto),var(--painel));border:1px solid var(--linha-forte);
  border-radius:14px;box-shadow:var(--sombra-alta);padding:6px;max-height:330px;overflow:auto}
.busca-topo-lista a{display:block;text-decoration:none;color:var(--texto);padding:9px 12px;border-radius:9px}
.busca-topo-lista a:hover{background:rgba(120,165,255,.1)}
.busca-topo-lista a b{font:700 13.5px 'Sora','Manrope',system-ui,sans-serif;display:block}
.busca-topo-lista a small{color:var(--texto-3);font-size:11.5px}
.busca-topo-lista .busca-vazia{padding:10px 12px}

/* responsivo — celular (D-44: atendentes usam o celular de verdade)
   Fontes equilibradas p/ caber mais conteúdo (teste do Marcus, 17/09).
   A navegação do celular é a barra inferior "padrão banco" (bloco mais abaixo);
   a sidebar do desktop some e a marca passa a viver no topo do conteúdo. */
@media(max-width:900px){
  .app{display:block}            /* uma coluna: no celular a navegação é a barra inferior */
  .lateral{display:none}         /* a sidebar do desktop não existe no celular */

  /* tipografia e densidade: mais conteúdo por tela */
  body{font-size:13.5px}
  .conteudo{padding:14px 13px 30px;
    padding-left:max(13px,env(safe-area-inset-left,0px));
    padding-right:max(13px,env(safe-area-inset-right,0px))}   /* iPhone em paisagem: nada sob a câmera */
  .campo input{font-size:16px}   /* 16px = piso que desliga o auto-zoom do Safari/iPhone */
  .topo-app{gap:8px 10px;margin-bottom:13px}
  .topo-app h2{font-size:17px}
  .topo-app .trim{font-size:10.5px;padding:4px 10px}
  .usuario{font-size:11.5px;gap:7px}
  .usuario .avatar{width:28px;height:28px;font-size:10.5px}
  .cartoes{grid-template-columns:repeat(auto-fit,minmax(146px,1fr));gap:9px;margin-bottom:14px}
  .cartao{padding:12px 13px}
  .cartao .rotulo{font-size:9.5px;margin-bottom:5px}
  .cartao .valor{font-size:15.5px}
  .cartao .apoio{font-size:10.5px;margin-top:3px}
  .bloco{padding:13px 14px;margin-bottom:12px}
  .usuario-linha{grid-template-columns:1fr}
  .acoes-linha{justify-content:flex-start}
  .perm-linha select{max-width:46%}
  .selo-etapa{font-size:9.5px;padding:4px 10px}
  .medalhao.mini{width:32px;height:32px}
  .busca-topo{display:none}   /* no celular a busca mora no painel Mais */
  /* 16px é o piso que desliga o auto-zoom do iPhone — vale para TODO campo editável */
  .filtros input[type=search]{font-size:16px;min-width:130px}
  .form-inline input,.form-inline select,.filtros select,
  .campo select,.campo textarea,.perm-linha select,.preco-campos input{font-size:16px}
  .preco-campos{padding-left:0}
  .preco-campos input{width:104px}
  .paginacao{flex-wrap:wrap}
  .campo-curto{max-width:none}
  .botao-mini{padding:10px 14px;font-size:12.5px}   /* alvo de toque digno de dedo */
}
@media(max-width:520px){
  #nome-usuario{display:none}   /* no celular em pé: o avatar basta */
}

/* ---------- navegação "padrão banco" no celular (pedido do Marcus) ----------
   Barra fixa embaixo (até 4 áreas + Mais) e painel Mais deslizando de baixo,
   com busca. Vale SÓ ≤900px — o desktop mantém a sidebar intocada (D-76).
   Ícones: traço fino 1.7, MESMA gramática do olho da senha já aprovado; válidos
   SÓ na barra inferior (resto do sistema segue texto puro). Decisão pendente de
   ata — não mexer sem aprovação do Marcus; .sem-icones na barra desliga todos. */
@media(min-width:901px){.barra-inferior,.painel-mais,.veu-mais{display:none}}
@media(max-width:900px){
  .topo-marca{display:grid}              /* a marca vive no topo do conteúdo, ao lado do título */
  .topo-app .trim{display:none}          /* o selo da etapa mora no rodapé do painel Mais */
  #botao-sair{display:none}              /* Sair mora no painel Mais */
  .conteudo{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}

  .barra-inferior{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;
    padding-bottom:env(safe-area-inset-bottom,0px);
    padding-left:env(safe-area-inset-left,0px);
    padding-right:env(safe-area-inset-right,0px);
    background:rgba(11,24,48,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-top:1px solid var(--linha-forte);transition:transform .2s}
  .bi-item{flex:1;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;background:none;border:0;text-decoration:none;color:var(--texto-3);position:relative;
    font:700 10.5px 'Manrope',system-ui,sans-serif;letter-spacing:.02em;
    -webkit-tap-highlight-color:transparent;transition:color .15s,transform .15s}
  .bi-item svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round}
  .bi-item svg.pontos{fill:currentColor;stroke:none}
  .bi-item:active{transform:scale(.94)}
  .bi-item.ativo{color:var(--ouro-claro)}
  .bi-item.ativo::before{content:"";position:absolute;top:0;left:22%;right:22%;height:2px;border-radius:2px;
    background:linear-gradient(90deg,transparent,var(--ouro),transparent)}
  .barra-inferior.sem-icones svg{display:none}   /* interruptor: barra só texto */
  .barra-inferior.sem-icones .bi-item{font-size:12.5px}

  .veu-mais{position:fixed;inset:0;z-index:70;background:rgba(3,8,20,.55);
    backdrop-filter:blur(3px);opacity:0;transition:opacity .25s}
  .veu-mais.aberto{opacity:1}
  .painel-mais{position:fixed;left:0;right:0;bottom:0;z-index:80;max-height:82dvh;
    display:flex;flex-direction:column;overflow:hidden;   /* alça+busca fixas; só a lista rola */
    background:linear-gradient(180deg,var(--card-alto),var(--painel));
    border:1px solid var(--linha-forte);border-bottom:0;border-radius:20px 20px 0 0;box-shadow:var(--sombra-alta);
    padding:10px max(16px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
    transform:translateY(105%);transition:transform .28s cubic-bezier(.32,.72,.28,1)}
  .painel-mais.aberto{transform:translateY(0)}
  .painel-mais:focus{outline:none}
  .painel-mais::before{content:"";position:absolute;inset:0 0 auto 0;height:1.5px;
    background:linear-gradient(90deg,transparent,rgba(233,195,63,.8),transparent)}
  .zona-puxador{touch-action:none;display:grid;place-items:center;padding:8px 0 12px;margin:-6px 0 0;cursor:grab}
  .zona-puxador:active{cursor:grabbing}
  .puxador{width:36px;height:4px;border-radius:99px;background:rgba(159,176,210,.35)}
  .busca-mais{width:100%;flex-shrink:0;background:rgba(6,12,26,.7);border:1px solid var(--linha-forte);
    border-radius:11px;padding:12px 14px;font:inherit;font-size:16px;   /* 16px desliga o auto-zoom do iPhone */
    color:var(--texto-3);margin-bottom:10px;-webkit-appearance:none}    /* mesma cor dos dizeres dos menus */
  .busca-mais::placeholder{color:var(--texto-3);opacity:.65}
  .mais-lista{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain}   /* só aqui rola */
  .busca-mais:focus{outline:2px solid var(--ouro);outline-offset:1px;border-color:transparent}
  .grupo-busca{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
    color:var(--texto-3);padding:10px 10px 4px}
  .busca-vazia{color:var(--texto-3);font-size:12.5px;padding:14px 10px}
  .item-mais{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:2px 10px;
    min-height:52px;padding:9px 10px;border-radius:12px;text-decoration:none;color:var(--texto);
    position:relative;-webkit-tap-highlight-color:transparent}
  /* células explícitas: com ou sem selo de etapa, a setinha fica SEMPRE no mesmo lugar */
  .item-mais b{grid-column:1;grid-row:1;font:700 14px 'Sora','Manrope',system-ui,sans-serif}
  .item-mais small{grid-column:1;grid-row:2;color:var(--texto-3);font-size:11.5px}
  .item-mais::after{content:"";grid-column:3;grid-row:1 / span 2;align-self:center;
    width:7px;height:7px;justify-self:end;margin-right:2px;
    border-right:1.7px solid var(--texto-3);border-top:1.7px solid var(--texto-3);
    transform:rotate(45deg);opacity:.75}                       /* a setinha dos apps de banco */
  /* sulco 3D separando os menus (escuro em cima, brilho azul embaixo, esmaecido nas pontas) */
  .item-mais + .item-mais::before{content:"";position:absolute;top:-1px;left:8px;right:8px;height:2px;
    pointer-events:none;border-radius:2px;
    background:linear-gradient(180deg,rgba(3,8,20,.85) 0 50%,rgba(130,178,255,.15) 50% 100%);
    -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
    mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
  /* toque: vidro azul claro nas bordas + título em ouro (o destaque nasce do clique) */
  .item-mais:active{background:linear-gradient(180deg,rgba(77,150,255,.16),rgba(47,125,246,.07));
    box-shadow:inset 0 0 0 1px rgba(155,198,255,.5), inset 0 1px 0 rgba(255,255,255,.16),
               0 0 20px rgba(77,150,255,.28)}
  .item-mais:active b{color:var(--ouro-claro)}
  .item-mais:active::after{border-color:var(--royal-vivo);opacity:1}
  .item-mais .selo-etapa{grid-column:2;grid-row:1 / span 2;font-size:9.5px;padding:4px 9px}
  .mais-lista mark{background:none;color:var(--ouro-claro);font-weight:800}
  .mais-rodape{display:flex;align-items:center;gap:12px;border-top:1px solid var(--linha);margin-top:10px;padding-top:14px}
  .mais-rodape .avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
    font-family:'Sora','Manrope',system-ui,sans-serif;font-weight:700;font-size:13px;
    background:linear-gradient(160deg,var(--ouro-claro),#C79A22);color:#241A02;
    box-shadow:0 4px 12px rgba(233,195,63,.4)}
  .mais-quem b{font:700 13.5px 'Sora','Manrope',system-ui,sans-serif;display:block}
  .mais-quem small{color:var(--texto-3);font-size:11px}
  .mais-rodape .botao-sair{margin-left:auto;display:block}
  .mais-etapa{margin-top:10px;font-size:10.5px;color:var(--texto-3);text-align:center}
  body.mais-aberto{overflow:hidden}      /* trava o fundo com o painel aberto */
  body.teclado-aberto .barra-inferior{transform:translateY(110%)}
  @supports not (backdrop-filter:blur(1px)){
    .barra-inferior{background:#0B1830}  /* Android antigo sem blur: fundo sólido */
  }
}
@media(prefers-reduced-motion:reduce){
  .painel-mais,.veu-mais,.bi-item,.barra-inferior{transition-duration:.01ms}
}