/* ============================================================================
   iBooster CRM - componentes reutilizaveis
   Tudo em cima de tokens.css. Regra da casa: fio (box-shadow var(--e1)) OU
   sombra, nunca borda + sombra; rotulo em caixa de frase; so o que esta vivo
   se mexe. O kit novo (chave, pilula de status, medidor, anel...) mora em kit.css.
   ========================================================================== */

/* ---------------- botoes ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:32px;padding:0 12px;border-radius:var(--r-sm);
  font-size:var(--fs-sm);font-weight:var(--fw-medium);line-height:1;white-space:nowrap;
  border:1px solid transparent;
  transition:background var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease),color var(--dur-1) var(--ease),transform var(--dur-1) var(--ease);
}
.btn:active{transform:scale(.98)}
.btn svg{width:15px;height:15px;flex:none;stroke-width:2}
.btn-primario{background:var(--brand-fill);color:var(--on-brand);box-shadow:var(--sombra-brand)}
.btn-primario:hover{background:var(--brand-2)}
.btn-linha{background:var(--surface);color:var(--ink);box-shadow:var(--e1),var(--sombra-1)}
.btn-linha:hover{background:var(--surface-2);box-shadow:0 0 0 1px var(--line-strong),var(--sombra-1)}
.btn-fantasma{color:var(--ink-2)}
.btn-fantasma:hover{background:var(--hover);color:var(--ink)}
.btn-perigo{background:var(--surface);color:var(--danger);box-shadow:var(--e1)}
.btn-perigo:hover{background:var(--danger-soft);box-shadow:0 0 0 1px var(--danger-line)}
.btn-sm{height:28px;padding:0 10px;font-size:var(--fs-xs);border-radius:var(--r-xs);gap:5px}
.btn-sm svg{width:14px;height:14px}
.btn-icone{width:32px;height:32px;padding:0}
.btn-icone.btn-sm{width:28px;height:28px}
.btn-bloco{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ---------------- formulario ---------------- */
label.campo{display:grid;gap:6px}
label.campo > span:first-child{font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--ink-2)}
input,select,textarea{
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-sm);
  padding:0 11px;height:36px;width:100%;color:var(--ink);font-size:var(--fs-sm);
  transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease);
}
textarea{padding:9px 11px;height:auto;min-height:84px;resize:vertical;line-height:1.55}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
/* A lista nativa nao herda a cor de acao nem a escala de um titulo. */
select option,select optgroup{font-size:14px;font-weight:400;color:var(--ink);background:var(--surface)}
input:hover,select:hover,textarea:hover{border-color:var(--ink-4)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:var(--anel)}
input[type="date"],input[type="time"]{padding-right:8px}

/* CHECKBOX E RADIO NAO SAO CAMPO DE TEXTO.
   A regra acima vale para TODO input, entao o quadradinho herdava width:100% e
   height:38px: virava uma barra da largura da linha e empurrava o proprio
   rotulo para fora do cartao. A correcao mora AQUI, uma vez. Agora o desenho e
   proprio (16px, verde da casa marcado) e o min-width segura o tamanho mesmo
   onde uma tela ainda escreve style="width:auto;height:auto". */
input[type="checkbox"],input[type="radio"]{
  appearance:none;-webkit-appearance:none;flex:none;cursor:pointer;
  width:16px;height:16px;min-width:16px;min-height:16px;padding:0;
  border:1.5px solid var(--line-strong);border-radius:4px;background:var(--surface);
  display:inline-grid;place-content:center;vertical-align:-3px;accent-color:var(--brand);
  transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease);
}
input[type="radio"]{border-radius:50%}
input[type="checkbox"]:hover,input[type="radio"]:hover{border-color:var(--ink-4)}
input[type="checkbox"]:checked{
  background:var(--brand-fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat;
  border-color:var(--brand-fill);
}
input[type="radio"]:checked{border-color:var(--brand-fill);background:radial-gradient(circle,var(--brand-fill) 0 4px,var(--surface) 4.5px)}
input[type="checkbox"]:disabled,input[type="radio"]:disabled{opacity:.5;cursor:not-allowed}
input[type="checkbox"]:focus,input[type="radio"]:focus{box-shadow:none;outline:none}
input[type="checkbox"]:focus-visible,input[type="radio"]:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
html[data-tema="escuro"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-tema="escuro"] input[type="time"]::-webkit-calendar-picker-indicator{filter:invert(.75)}
/* seta do select: SVG unico em cinza medio, que le bem nos dois temas */
select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:32px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B919C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-position:right 10px center;background-size:16px;background-repeat:no-repeat}
.dica{font-size:var(--fs-xs);color:var(--ink-3);line-height:var(--lh-ui)}
.erro{color:var(--danger);font-size:var(--fs-sm);font-weight:var(--fw-medium);display:flex;gap:6px;align-items:flex-start}
.erro .ic{width:14px;height:14px;margin-top:2px}
.dica .ic{width:13px;height:13px;display:inline-block;vertical-align:-2px;margin-right:3px}
.grade-campos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grade-campos .largo{grid-column:1/-1}
@media(max-width:520px){.grade-campos{grid-template-columns:1fr}}

/* filtros: tudo na altura do botao (32px), para a barra ler como uma linha so */
.filtros{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.filtros select,.filtros input{width:auto;min-width:168px;height:32px;font-size:var(--fs-sm)}
.filtros input[type="checkbox"]{min-width:16px;height:16px}
@media(max-width:600px){
  .filtros select,.filtros input:not([type="checkbox"]){min-width:0;flex:1 1 calc(50% - 4px)}
}
.segmentado{display:inline-flex;background:var(--surface-3);border-radius:var(--r-sm);padding:2px;gap:2px}
.segmentado button{height:28px;padding:0 12px;border-radius:var(--r-xs);font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--ink-3);
  transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
.segmentado button:hover{color:var(--ink)}
.segmentado button.ativo{background:var(--surface-raised);color:var(--ink);box-shadow:0 0 0 1px var(--line),var(--sombra-1)}

/* ---------------- cartoes ---------------- */
.cartao{background:var(--surface);border:0;border-radius:var(--r);box-shadow:var(--e1)}
.cartao-p{padding:16px 18px}
.cartao-tit{display:flex;align-items:center;gap:8px;margin-bottom:12px;min-height:24px}
.cartao-tit .ic{width:16px;height:16px;padding:0;border-radius:0;background:none;color:var(--ink-3);box-sizing:content-box}
.cartao-tit h3{font-size:var(--fs-md);font-weight:var(--fw-semibold);text-transform:none;letter-spacing:var(--ls-ui);color:var(--ink)}
.cartao-tit .dir{margin-left:auto;font-size:var(--fs-xs);color:var(--ink-3);font-weight:var(--fw-medium)}
button.dir{border-radius:var(--r-xs);padding:4px 6px;margin-right:-6px}
button.dir:hover{background:var(--hover)}
.grade{display:grid;gap:14px}
/* item de grade nao cresce alem da coluna por causa de um texto sem quebra (url, nome longo) */
.grade > *{min-width:0}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
.g-2-1{grid-template-columns:2fr 1fr}
@media(max-width:1100px){.g3{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.g2,.g3,.g-2-1{grid-template-columns:1fr}}

/* KPI: numero grande, rotulo quieto. O filete lateral saiu (todo cartao com
   filete e nenhum com enfase); a cor fica so no icone. */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(198px,1fr));gap:12px}
.kpi{background:var(--surface);border:0;border-radius:var(--r);padding:14px 16px;box-shadow:var(--e1);position:relative;overflow:hidden}
.kpi .topo-kpi{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.kpi .ico{width:24px;height:24px;border-radius:var(--r-xs);display:grid;place-items:center;background:var(--suave,var(--brand-soft));color:var(--cor,var(--brand))}
.kpi .ico svg{width:14px;height:14px;stroke-width:2}
.kpi .l{font-size:var(--fs-sm);font-weight:var(--fw-medium);text-transform:none;letter-spacing:0;color:var(--ink-2)}
.kpi .n{font-size:var(--fs-2xl);font-weight:var(--fw-semibold);letter-spacing:var(--ls-tight);font-variant-numeric:tabular-nums;line-height:var(--lh-tight)}
.kpi .s{font-size:var(--fs-xs);color:var(--ink-3);margin-top:4px}
/* celular: dois KPIs por linha, e nao quatro cartoes altos empilhados */
@media(max-width:600px){
  .kpis{grid-template-columns:1fr 1fr;gap:10px}
  .kpi{padding:12px 14px}
  .kpi .topo-kpi{margin-bottom:8px}
  .kpi .n{font-size:var(--fs-xl)}
}

/* ---------------- avatar ---------------- */
.avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-size:12px;font-weight:var(--fw-semibold);color:#fff;letter-spacing:.01em;user-select:none}
.avatar.xxs{width:16px;height:16px;font-size:8px}
.avatar.xs{width:22px;height:22px;font-size:9.5px}
.avatar.sm{width:26px;height:26px;font-size:10.5px}
.avatar.md{width:40px;height:40px;font-size:14px}
.avatar.lg{width:52px;height:52px;font-size:18px}
.avatar.xl{width:84px;height:84px;font-size:28px;border-radius:24px}
.pilha{display:flex}
.pilha .avatar{margin-left:-7px;box-shadow:0 0 0 2px var(--surface)}
.pilha .avatar:first-child{margin-left:0}

/* ---------------- etiquetas ---------------- */
.tag{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-2xs);font-weight:var(--fw-medium);line-height:16px;padding:1px 7px;border-radius:var(--r-full);
  background:var(--surface-3);color:var(--ink-2);white-space:nowrap;border:1px solid transparent}
.tag .ic{width:11px;height:11px}
.tag.ponto::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.selo{display:inline-flex;align-items:center;font-size:var(--fs-2xs);font-weight:var(--fw-semibold);line-height:16px;padding:1px 8px;border-radius:var(--r-full);color:#fff;white-space:nowrap}
.selo-suave{background:color-mix(in srgb,var(--cor) 12%,transparent);color:var(--cor);border:1px solid transparent}
.tag.alerta{background:var(--warn-soft);color:var(--warn)}
.tag.perigo{background:var(--danger-soft);color:var(--danger)}
.tag.ok{background:var(--ok-soft);color:var(--ok)}

/* ---------------- tabela ----------------
   Sem faixa no cabecalho, rotulo em caixa de frase, linha de ~44px, numero
   tabular a direita. */
.tabela-caixa{background:var(--surface);border:0;border-radius:var(--r);overflow:hidden;box-shadow:var(--e1)}
.tabela-rolagem{overflow-x:auto}
table.tabela{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.tabela th{text-align:left;font-size:var(--fs-xs);text-transform:none;letter-spacing:0;color:var(--ink-3);
  font-weight:var(--fw-medium);padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface);position:sticky;top:0;z-index:1}
.tabela th.clicavel{cursor:pointer;user-select:none}
.tabela th.clicavel:hover{color:var(--ink)}
.tabela th .ord{color:var(--brand);margin-left:3px}
.tabela td{padding:11px 12px;border-bottom:1px solid var(--line-soft);vertical-align:middle;color:var(--ink-2)}
.tabela tbody td:first-child{color:var(--ink)}
.tabela tbody tr{cursor:pointer;transition:background var(--dur-1) var(--ease)}
.tabela tbody tr:hover{background:var(--surface-2)}
.tabela tbody tr:last-child td{border-bottom:none}
/* A tabela ja rola dentro do proprio cartao, entao quebrar "R$ 17.500" em duas
   linhas para caber e so piora a leitura: valor e nome ficam em linha unica. */
.tabela td.num,.tabela th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tabela td .nome-conta{white-space:nowrap;font-weight:var(--fw-semibold)}

/* ---------------- modal e gaveta ---------------- */
.modal{position:fixed;inset:0;z-index:var(--z-modal);display:grid;place-items:center;padding:20px}
.modal-fundo{position:absolute;inset:0;background:rgba(10,11,14,.42);backdrop-filter:blur(3px);animation:apaga var(--dur-2) var(--ease)}
@keyframes apaga{from{opacity:0}to{opacity:1}}
.modal-corpo{position:relative;background:var(--surface);border:0;border-radius:var(--r-lg);
  padding:24px;width:min(520px,100%);max-height:88vh;overflow-y:auto;box-shadow:var(--e3);
  display:grid;gap:14px;animation:pula var(--dur-3) var(--ease-out)}
.modal-corpo.largo{width:min(720px,100%)}
@keyframes pula{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.modal-corpo h3{font-size:var(--fs-lg);font-weight:var(--fw-semibold);letter-spacing:-.01em}
.modal-acoes{display:flex;gap:8px;justify-content:flex-end;margin-top:2px}

.gaveta{position:fixed;inset:0;z-index:var(--z-drawer)}
.gaveta-fundo{position:absolute;inset:0;background:rgba(10,11,14,.36);backdrop-filter:blur(2px);animation:apaga var(--dur-2) var(--ease)}
.gaveta-corpo{position:absolute;top:0;right:0;bottom:0;width:min(600px,100%);background:var(--bg);
  overflow-y:auto;box-shadow:var(--e3);border-left:0;animation:desliza var(--dur-4) var(--ease-out)}
.gaveta-topo{position:sticky;top:0;z-index:2;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);padding:14px 22px;display:flex;align-items:center;gap:12px;min-height:56px}
.gaveta-pad{padding:20px 22px 40px}
.fechar{width:32px;height:32px;border-radius:var(--r-sm);display:grid;place-items:center;color:var(--ink-3);flex:none;margin-left:auto;transition:background var(--dur-1) var(--ease)}
.fechar .ic{width:18px;height:18px}
.fechar:hover{background:var(--hover);color:var(--ink)}

/* ---------------- toast ----------------
   Pilula escura no centro de baixo; a cor fica so no icone da frente (ok, erro
   ou aviso), nunca no fundo inteiro. Aviso e a duvida: nem feito, nem falhou. */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:var(--z-toast);
  background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;
  font-size:var(--fs-sm);font-weight:var(--fw-medium);box-shadow:var(--e3);display:flex;align-items:center;gap:9px;
  animation:sobeToast var(--dur-2) var(--ease-out);max-width:min(440px,92vw)}
@keyframes sobeToast{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
.toast.ok::before,.toast.erro::before,.toast.aviso::before{content:'';width:16px;height:16px;flex:none;border-radius:50%;
  -webkit-mask:var(--toast-ic) center/16px no-repeat;mask:var(--toast-ic) center/16px no-repeat}
.toast.ok::before{background:var(--ok);--toast-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 14.2-4-4 1.4-1.4 2.6 2.6 5-5 1.4 1.4z'/%3E%3C/svg%3E")}
.toast.erro::before{background:var(--danger);--toast-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1 5h2v7h-2zm0 9h2v2h-2z'/%3E%3C/svg%3E")}
.toast.aviso::before{background:var(--warn);--toast-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1 5h2v7h-2zm0 9h2v2h-2z'/%3E%3C/svg%3E")}

/* ---------------- estados ---------------- */
.vazio{display:grid;place-items:center;gap:6px;padding:32px 20px;text-align:center;color:var(--ink-3)}
.vazio svg{width:40px;height:40px;padding:0;border-radius:0;background:none;color:var(--ink-4);stroke-width:1.5;box-sizing:content-box;margin-bottom:4px}
.vazio p{font-size:var(--fs-sm);max-width:36ch;line-height:var(--lh-ui)}
.vazio .t{font-weight:var(--fw-semibold);color:var(--ink);font-size:var(--fs-md)}
.vazio .btn{margin-top:8px}
.vazio-linha{color:var(--ink-3);font-size:var(--fs-sm);padding:14px 0;text-align:center}

.esqueleto{background:linear-gradient(90deg,var(--surface-3) 25%,var(--surface-2) 50%,var(--surface-3) 75%);
  background-size:200% 100%;animation:brilho 1.4s var(--ease) infinite;border-radius:var(--r-xs);min-height:12px}
.esqueleto.linha{height:12px;margin:6px 0}
.esqueleto.bloco{height:64px;border-radius:var(--r)}
@keyframes brilho{to{background-position:-200% 0}}

.barra-mini{height:6px;border-radius:var(--r-full);background:var(--track);overflow:hidden}
.barra-mini i{display:block;height:100%;border-radius:var(--r-full);transition:width .5s var(--ease-out)}

/* ---------------- impressao da proposta (aba Briefing) ----------------
   A proposta e pintada em #area-impressao na hora do Ctrl+P: na tela o div
   nao existe visualmente, e no papel ele e a unica coisa que sai. */
#area-impressao{display:none}
@media print{
  body.imprimindo>*:not(#area-impressao){display:none !important}
  body.imprimindo #area-impressao{display:block;padding:24px}
}

/* ==================== papel 'leitor' ====================
   Parceiro de fora (agencia, conselheiro, auditor) enxerga o pipeline e nao
   mexe nele. A trava REAL e no servidor: o exigirSessao recusa qualquer metodo
   que nao seja GET. O CSS abaixo so evita oferecer o que seria recusado -
   botao que devolve 403 e pior que botao que nao existe.

   Vale para as telas todas de uma vez, inclusive as que ainda nao existem, e e
   por isso que a regra e por ATRIBUTO na raiz e nao por classe em cada vista.
   O que sobra visivel: filtros, busca, exportar, imprimir e o proprio perfil. */
/* A REGRA E POR EXCLUSAO, e isso e o ponto: todo botao de acao some para o
   leitor, e quem e SO LEITURA precisa ser marcado com data-leitor-ok. Uma lista
   de ids do que esconder envelheceria no primeiro botao novo que alguem
   escrevesse - e o vazamento seria silencioso. Assim o default e seguro. */
[data-papel="leitor"] .btn-primario:not([data-leitor-ok]),
[data-papel="leitor"] .btn-linha:not([data-leitor-ok]),
[data-papel="leitor"] .btn-perigo,
[data-papel="leitor"] #btn-novo,
[data-papel="leitor"] [data-criar],
[data-papel="leitor"] [data-editar],
[data-papel="leitor"] [data-remover],
[data-papel="leitor"] [data-prop-status],
[data-papel="leitor"] [data-prop-apagar]{display:none !important}

/* campo continua legivel, mas nao editavel: esconder o valor seria pior que
   mostra-lo travado, ja que ele TEM permissao de ver */
[data-papel="leitor"] .grade-campos input,
[data-papel="leitor"] .grade-campos select,
[data-papel="leitor"] .grade-campos textarea{
  pointer-events:none; background:var(--surface-2); color:var(--ink-2); border-style:dashed}

/* passo do roadmap deixa de ser clicavel */
[data-papel="leitor"] .rm-passos .ps{pointer-events:none}

.leitor-aviso{display:none}
[data-papel="leitor"] .leitor-aviso{display:flex;gap:9px;align-items:center;
  background:var(--info-soft);color:var(--info);border:0;box-shadow:0 0 0 1px color-mix(in srgb,var(--info) 30%,transparent);
  border-radius:var(--r-sm);padding:8px 12px;font-size:var(--fs-sm);font-weight:var(--fw-medium);
  margin-bottom:14px}
[data-papel="leitor"] .leitor-aviso svg{width:14px;height:14px;flex:none}

/* ---------------- celular: gaveta, modal, tabela, dedo ----------------
   Gaveta ocupa a tela; modal vira folha de baixo; tabela rola de lado em vez
   de espremer sete colunas em 380px; campo com 16px para o iOS nao dar zoom
   no foco; botao com altura de dedo. */
@media (max-width:760px){
  .gaveta-corpo{width:100%}
  .gaveta-pad{padding:16px 14px calc(40px + env(safe-area-inset-bottom))}
  .modal{padding:0;align-items:end}
  .modal-corpo{width:100%;max-width:100%;border-radius:var(--r-lg) var(--r-lg) 0 0;max-height:92vh;overflow:auto;padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  .tabela-caixa{overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* so a tabela que rola dentro da propria caixa; tabela curta num cartao (Minha carteira) nao */
  .tabela-caixa table.tabela,.tabela-rolagem table.tabela{min-width:560px}
  .tabela th,.tabela td{padding:10px 10px}
  .toast{bottom:calc(84px + env(safe-area-inset-bottom));width:calc(100% - 28px)}
}
@media (hover:none) and (pointer:coarse){
  .btn{min-height:36px}
  .btn-sm{min-height:32px}
  input,select,textarea{font-size:16px}
  input[type="checkbox"],input[type="radio"]{width:18px;height:18px;min-width:18px;min-height:18px}
}