/* B2B UNIFADAP — estilo mobile-first. Desktop só ganha largura e colunas. */
:root {
  --roxo: #4b2e83; --roxo-escuro: #36205f; --azul: #1a56db; --fundo: #f4f5f9; --carta: #fff;
  --texto: #1f2937; --suave: #6b7280; --borda: #e5e7eb; --verde: #059669; --vermelho: #dc2626; --ambar: #d97706;
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; background: var(--fundo); color: var(--texto); font-size: 16px; }

.topo { position: sticky; top: 0; z-index: 20; background: var(--roxo); color: #fff; padding: calc(10px + var(--safe-t)) 8px 10px;
  display: flex; align-items: center; gap: 6px; min-height: 56px; }
.topo h1 { font-size: 18px; font-weight: 600; flex: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topo .icone { background: none; border: 0; color: #fff; font-size: 26px; width: 44px; height: 44px; border-radius: 22px; }
.topo .icone:active { background: rgba(255,255,255,.15); }

.conteudo { padding: 12px 12px calc(76px + var(--safe-b)); max-width: 1100px; margin: 0 auto; }

.barra-inferior { position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; background: var(--carta); border-top: 1px solid var(--borda);
  display: flex; padding-bottom: var(--safe-b); }
.barra-inferior button { flex: 1; border: 0; background: none; padding: 8px 4px 6px; font-size: 11px; color: var(--suave);
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 56px; }
.barra-inferior button .ico { font-size: 22px; line-height: 1; }
.barra-inferior button.ativa { color: var(--roxo); font-weight: 600; }

.cartao { background: var(--carta); border: 1px solid var(--borda); border-radius: 14px; padding: 14px; margin-bottom: 10px; }
.cartao h3 { font-size: 15px; margin-bottom: 8px; }
.grade-num { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.num-caixa { background: var(--carta); border: 1px solid var(--borda); border-radius: 14px; padding: 14px; }
.num-caixa .num { font-size: 26px; font-weight: 700; color: var(--roxo); }
.num-caixa .rot { font-size: 12px; color: var(--suave); }

.item { background: var(--carta); border: 1px solid var(--borda); border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; }
.item .nome { font-weight: 600; font-size: 15px; }
.item .meta { font-size: 13px; color: var(--suave); margin-top: 2px; }
.item .acoes { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

.btn { border: 0; border-radius: 12px; padding: 12px 16px; font-size: 15px; font-weight: 600; background: #eef0f6; color: var(--roxo);
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }
.btn.primario { background: var(--roxo); color: #fff; }
.btn.perigo { background: #fde8e8; color: var(--vermelho); }
.btn.grande { width: 100%; font-size: 17px; min-height: 50px; }
.btn:disabled { opacity: .5; }
.btn-circ { width: 44px; height: 44px; border-radius: 22px; padding: 0; font-size: 20px; }

input, select, textarea { width: 100%; border: 1px solid var(--borda); border-radius: 12px; padding: 12px; font-size: 16px; font-family: inherit;
  background: #fff; color: var(--texto); min-height: 46px; }
input:focus, select:focus, textarea:focus { outline: 2px solid #c9b8f0; border-color: var(--roxo); }
label { display: block; font-size: 13px; color: var(--suave); margin-bottom: 10px; }
label > input, label > select, label > textarea { margin-top: 4px; }
.busca { position: sticky; top: calc(56px + var(--safe-t)); z-index: 10; background: var(--fundo); padding: 6px 0 10px; }

.selo { display: inline-block; border-radius: 20px; padding: 3px 10px; font-size: 11px; font-weight: 600; }
.selo.cinza { background: #eef0f3; color: var(--suave); } .selo.azul { background: #e2ebff; color: var(--azul); }
.selo.verde { background: #d9f2e5; color: var(--verde); } .selo.vermelho { background: #fde8e8; color: var(--vermelho); }
.selo.ambar { background: #fdf0d9; color: var(--ambar); }

.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(84px + var(--safe-b)); background: #111827; color: #fff;
  padding: 12px 18px; border-radius: 12px; font-size: 14px; z-index: 50; max-width: 92vw; }
.folha { position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: 40; display: flex; align-items: flex-end; }
.folha-caixa { background: #fff; width: 100%; max-height: 90vh; overflow-y: auto; border-radius: 18px 18px 0 0; padding: 16px 16px calc(16px + var(--safe-b)); }
.carregando { text-align: center; color: var(--suave); padding: 30px; }
.vazio { text-align: center; color: var(--suave); padding: 40px 20px; }

/* filtros em "chips", folha de opções, botão flutuante, grades */
.chips { display: flex; gap: 6px; overflow-x: auto; padding: 8px 0 2px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip, .chip-select { flex: 0 0 auto; border: 1px solid var(--borda); background: #fff; border-radius: 20px; padding: 8px 12px; font-size: 13px; color: var(--texto); min-height: 36px; width: auto; }
.chip.ativo { background: #e9e2f7; border-color: var(--roxo); color: var(--roxo); font-weight: 600; }
.opcao { display: flex; align-items: center; gap: 10px; padding: 10px 6px; font-size: 15px; color: var(--texto); border-bottom: 1px solid #f0f0f4; margin: 0; }
.opcao input { width: 20px; height: 20px; min-height: 0; }
.linha-botoes { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; flex-wrap: wrap; }
.grade2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.btn-mini { padding: 6px 10px; min-height: 34px; font-size: 13px; }
.btn-flutuante { position: fixed; right: 16px; bottom: calc(76px + var(--safe-b)); width: 56px; height: 56px; border-radius: 28px; font-size: 28px; padding: 0; box-shadow: 0 6px 18px rgba(75,46,131,.35); z-index: 15; }
.paginacao { display: flex; gap: 8px; justify-content: center; margin: 12px 0; }
.linha-uf { display: grid; grid-template-columns: 36px 1fr 48px; gap: 8px; align-items: center; font-size: 13px; margin: 4px 0; }
.linha-uf .trilho { height: 10px; background: #eef0f3; border-radius: 5px; } .linha-uf .trilho > div { height: 100%; background: var(--roxo); border-radius: 5px; }
.folha h4 { font-size: 15px; display: flex; align-items: center; gap: 8px; }
a.btn { text-decoration: none; }
.cartao.destaque { border-color: var(--verde); box-shadow: 0 0 0 2px #d9f2e5; }
@media (min-width: 900px) { .btn-flutuante { bottom: 24px; } }

/* login */
.tela-login { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; background: linear-gradient(160deg, var(--roxo), var(--roxo-escuro)); }
.cartao-login { background: #fff; border-radius: 20px; padding: 28px 22px; width: 100%; max-width: 380px; text-align: center; }
.cartao-login h1 { font-size: 22px; margin: 8px 0 2px; color: var(--roxo); }
.cartao-login .sub { color: var(--suave); font-size: 13px; margin-bottom: 20px; }
.cartao-login form { text-align: left; }
.erro { color: var(--vermelho); font-size: 13px; margin-bottom: 10px; }

/* desktop: mesmo app, mais espaço */
@media (min-width: 900px) {
  .conteudo { padding: 20px 24px 40px; }
  .barra-inferior { position: sticky; top: 56px; bottom: auto; border-top: 0; border-bottom: 1px solid var(--borda); justify-content: center; }
  .barra-inferior button { flex: 0 0 160px; flex-direction: row; gap: 8px; font-size: 14px; min-height: 48px; }
  .grade-num { grid-template-columns: repeat(4, 1fr); }
  .folha { align-items: center; justify-content: center; }
  .folha-caixa { max-width: 720px; border-radius: 18px; }
}