/* Padrão de layout Outbox — copiado de assessor-caixa-livre/app/src/views.js (constante CSS) */
:root{
  --marca:#102339; --marca-2:#E95114; --marca-2-escuro:#C9430F; --marca-suave:#FDEEE7;
  --fundo:#F3F5F8; --superficie:#FFFFFF; --texto:#16222C; --mudo:#5B6975; --linha:#DCE2E7;
  --ok:#1E7A3C; --ok-suave:#E4F3E8; --alerta:#9A5B0B; --alerta-suave:#FBF0DD; --erro:#A2311C; --erro-suave:#FBE6E1;
  --fonte:"Inter Tight","Segoe UI",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--fundo);color:var(--texto);font:15px/1.5 var(--fonte)}
a{color:var(--marca)}
header.topo{background:var(--marca);color:#fff;padding:0 20px}
header.topo .in{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:24px;min-height:56px;flex-wrap:wrap}
header.topo .marca{font-weight:700;letter-spacing:.01em;display:flex;align-items:center;gap:10px}
header.topo .marca img{height:30px;display:block}
header.topo .marca span{font-size:13px;opacity:.85;border-left:1px solid rgba(255,255,255,.3);padding-left:10px}
header.topo nav{display:flex;gap:4px;flex-wrap:wrap}
header.topo nav a{color:#fff;opacity:.8;text-decoration:none;padding:6px 10px;border-radius:6px}
header.topo nav a.ativo,header.topo nav a:hover{opacity:1;background:rgba(255,255,255,.12)}
header.topo nav a.ativo{box-shadow:inset 0 -3px 0 var(--marca-2);border-radius:6px 6px 0 0}
header.topo .quem{margin-left:auto;font-size:13px;opacity:.85;display:flex;gap:12px;align-items:center}
header.topo .quem button{background:none;border:1px solid rgba(255,255,255,.4);color:#fff;border-radius:6px;padding:4px 10px;cursor:pointer}
main{max-width:1180px;margin:0 auto;padding:24px 20px 60px;display:flex;flex-direction:column;gap:20px}
h1{font-size:24px;margin:0} h2{font-size:17px;margin:0}
.barra{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.barra .dir{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.cartao{background:var(--superficie);border:1px solid var(--linha);border-radius:10px;padding:18px;display:flex;flex-direction:column;gap:14px}
.grade2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;align-items:start}
.tabela{overflow-x:auto;background:var(--superficie);border:1px solid var(--linha);border-radius:10px}
table{border-collapse:collapse;width:100%;min-width:720px}
th,td{padding:10px 12px;border-top:1px solid var(--linha);text-align:left;vertical-align:top}
thead th{border-top:0;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mudo);font-weight:600}
tr:hover td{background:#FAFBFC}
label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--mudo);font-weight:600}
input,select,textarea{font:inherit;color:var(--texto);border:1px solid var(--linha);border-radius:8px;padding:9px 10px;background:#fff;width:100%}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--marca-2);outline-offset:1px}
.campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.botao{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--marca-2);background:var(--marca-2);color:#fff;border-radius:8px;padding:8px 14px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap}
.botao:hover{background:var(--marca-2-escuro);border-color:var(--marca-2-escuro)}
.botao.sec{background:#fff;color:var(--marca);border-color:var(--marca)}
.botao.sec:hover{background:var(--fundo)}
.botao.perigo{background:#fff;color:var(--erro);border-color:var(--erro)}
.botao.perigo:hover{background:var(--erro-suave)}
.botao.perigo.cheio{background:var(--erro);color:#fff}
.botao.perigo.cheio:hover{background:#7F2615;border-color:#7F2615}
.botao:disabled{opacity:.45;cursor:not-allowed}
.botao.peq{padding:5px 10px;font-size:13px}
/* confirmação de exclusão definitiva */
dialog.excluir{border:1px solid var(--linha);border-radius:12px;padding:20px;width:min(460px,calc(100% - 32px));color:var(--texto);background:var(--superficie)}
dialog.excluir::backdrop{background:rgba(16,35,57,.55)}
dialog.excluir form{display:flex;flex-direction:column;gap:14px}
dialog.excluir label strong{color:var(--texto)}
dialog.excluir .acoes{justify-content:flex-end}
.pilula{display:inline-block;font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px;white-space:nowrap}
.pilula.ok{background:var(--ok-suave);color:var(--ok)} .pilula.alerta{background:var(--alerta-suave);color:var(--alerta)}
.pilula.erro{background:var(--erro-suave);color:var(--erro)} .pilula.neutra{background:var(--fundo);color:var(--mudo)}
.aviso{padding:12px 14px;border-radius:8px;border:1px solid}
.aviso.ok{background:var(--ok-suave);border-color:var(--ok);color:var(--ok)}
.aviso.erro{background:var(--erro-suave);border-color:var(--erro);color:var(--erro)}
.aviso.info{background:var(--marca-suave);border-color:var(--marca-2);color:var(--marca)}
.mudo{color:var(--mudo)} .peq{font-size:13px}
pre.whats{background:#E6F4EA;border-radius:10px;padding:16px;white-space:pre-wrap;font:14px/1.5 var(--fonte);margin:0;max-width:560px}
/* tela de acesso (login e primeiro acesso) */
.acesso{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);background:var(--superficie)}
.acesso .lado{background:var(--marca);color:#fff;padding:48px clamp(24px,5vw,72px);display:flex;flex-direction:column;justify-content:space-between;gap:40px;position:relative;overflow:hidden}
.acesso .lado::after{content:"";position:absolute;right:-120px;bottom:-120px;width:360px;height:360px;border:28px solid var(--marca-2);border-radius:64px;transform:rotate(45deg);opacity:.18}
.acesso .lado img{width:190px;display:block}
.acesso .lado h1{font-size:clamp(28px,3.4vw,40px);line-height:1.1;letter-spacing:-.01em;max-width:14ch}
.acesso .lado h1 em{font-style:normal;color:var(--marca-2)}
.acesso .lado h1 .interno{font-size:14px;font-weight:600;letter-spacing:.02em;color:rgba(255,255,255,.65);white-space:nowrap;vertical-align:middle}
.acesso .lado ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;max-width:40ch;position:relative;z-index:1}
.acesso .lado li{display:flex;gap:12px;align-items:flex-start;opacity:.92}
.acesso .lado li b{flex:none;min-width:34px;height:28px;border-radius:8px;background:rgba(233,81,20,.18);color:var(--marca-2);display:grid;place-items:center;font-size:13px}
.acesso .lado .rodape{font-size:12px;opacity:.6}
.acesso .form{display:flex;align-items:center;justify-content:center;padding:40px 24px}
.acesso .form .caixa{width:100%;max-width:380px;display:flex;flex-direction:column;gap:18px}
.acesso .form h2{font-size:24px}
.acesso .form .botao{justify-content:center;padding:12px 16px;font-size:16px}
.senha{position:relative;display:block}
.senha input{padding-right:72px}
.senha button{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--marca);font:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:6px}

/* celular */
@media (max-width:760px){
  .acesso{grid-template-columns:1fr;min-height:auto}
  .acesso .lado{padding:28px 20px;gap:18px}
  .acesso .lado img{width:150px}
  .acesso .lado ul,.acesso .lado .rodape{display:none}
  .acesso .lado::after{width:200px;height:200px;right:-80px;bottom:-90px;border-width:18px}
  .acesso .form{align-items:flex-start;padding:28px 20px 40px}
  header.topo{padding:0 16px}
  header.topo .in{gap:8px 12px;padding:10px 0}
  header.topo .marca img{height:24px}
  header.topo .marca span{display:none}
  header.topo .quem{font-size:0}
  header.topo .quem button{font-size:13px}
  header.topo nav{order:3;width:100%;flex-wrap:nowrap;overflow-x:auto}
  header.topo nav a{flex:none}
  main{padding:18px 16px 48px;gap:16px}
  h1{font-size:20px}
  .cartao{padding:16px}
  .grade2{grid-template-columns:1fr}
  .barra .dir{margin-left:0;width:100%}
  .acoes .botao,.acoes form.inline,.acoes form.inline .botao{flex:1 1 auto;justify-content:center}
  .botao{min-height:44px}
  .tabela.resp{background:none;border:0}
  table.resp{min-width:0}
  table.resp thead{display:none}
  table.resp tr{display:block;background:var(--superficie);border:1px solid var(--linha);border-radius:10px;padding:6px 14px;margin-bottom:10px}
  table.resp tr:hover td{background:none}
  table.resp td{display:flex;justify-content:space-between;align-items:center;gap:12px;border:0;padding:8px 0;text-align:right}
  table.resp td+td{border-top:1px solid var(--linha)}
  table.resp td::before{content:attr(data-label);color:var(--mudo);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;text-align:left;flex:none}
  table.resp td.principal{display:block;text-align:left}
  table.resp td{overflow-wrap:anywhere;min-width:0}
  table.resp td>*{min-width:0}
  table.resp td.principal.acoes{display:flex;flex-wrap:wrap;gap:8px}
  table.resp td.principal::before{display:none}
  table.resp td:empty{display:none}
  pre.whats{font-size:13px;padding:12px}
}
.acoes{display:flex;gap:8px;flex-wrap:wrap}
form.inline{display:inline}
code{font-family:var(--mono);font-size:.9em;background:var(--fundo);padding:1px 5px;border-radius:4px}
[hidden]{display:none!important}
/* busca e filtros das listas */
.filtros{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.filtros input[type=search]{flex:1 1 240px;max-width:420px}
.filtros .chips{display:flex;flex-wrap:wrap;gap:6px}
.filtros .chips button{font:inherit;font-size:13px;font-weight:600;border:1px solid var(--linha);background:var(--superficie);color:var(--mudo);border-radius:999px;padding:5px 12px;cursor:pointer}
.filtros .chips button[aria-pressed=true]{background:var(--marca);border-color:var(--marca);color:#fff}
.filtros .contagem{font-size:13px;color:var(--mudo);margin-left:auto}
details.convidar>summary{list-style:none;cursor:pointer}
details.convidar>summary::-webkit-details-marker{display:none}
/* indicador de carregamento */
#progresso{position:fixed;top:0;left:0;height:3px;width:0;background:var(--marca-2);z-index:50;opacity:0;transition:opacity .2s}
#progresso.ativo{opacity:1;animation:progresso 8s cubic-bezier(.1,.7,.3,1) forwards}
@keyframes progresso{from{width:0}to{width:92%}}
.botao.carregando,button.carregando{opacity:.85;cursor:progress;pointer-events:none}
.botao .giro{width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;display:inline-block;animation:giro .7s linear infinite;flex:none}
@keyframes giro{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){#progresso.ativo{animation:none;width:92%}.botao .giro{animation-duration:2s}}