/* Mesma paleta do portal do Lovable (src/styles.css), sem framework. */
:root {
  --radius: 0.75rem;
  --background: oklch(0.985 0.008 85);
  --foreground: oklch(0.22 0.02 60);
  --card: oklch(1 0 0);
  --primary: oklch(0.62 0.19 42);
  --primary-foreground: oklch(0.99 0.01 85);
  --muted: oklch(0.955 0.012 85);
  --muted-foreground: oklch(0.52 0.02 65);
  --accent: oklch(0.93 0.04 75);
  --destructive: oklch(0.56 0.21 27);
  --success: oklch(0.6 0.14 150);
  --warning: oklch(0.8 0.15 85);
  --warning-foreground: oklch(0.28 0.05 70);
  --border: oklch(0.9 0.012 80);
  --shadow-panel: 0 24px 60px -32px oklch(0.2 0.03 55 / 0.45);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--background); color: var(--foreground); }
body { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 15px; line-height: 1.45; }
main { max-width: 48rem; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; gap: 2rem; padding: 2.5rem 1rem; }
main.largo { max-width: 72rem; }
.selo { font-size: .75rem; font-weight: 600; letter-spacing: .2em; color: var(--primary); text-transform: uppercase; margin: 0; }
h1 { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; margin: .4rem 0; }
h2 { font-size: 1.125rem; font-weight: 600; margin: 0; }
.mudo { color: var(--muted-foreground); font-size: .875rem; margin: .25rem 0 0; }
.pequeno { font-size: .75rem; }
.cartao { background: var(--card); border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px); box-shadow: var(--shadow-panel); padding: 1.5rem; }
@media (min-width: 640px) { .cartao { padding: 2rem; } h1 { font-size: 2.25rem; } main { padding-top: 4rem; } }
label { display: block; font-size: .875rem; font-weight: 500; margin-bottom: .4rem; }
label.peq { font-size: .75rem; }
input[type=text], input[type=email], input[type=password], select, textarea {
  width: 100%; font: inherit; font-size: .9rem; padding: .55rem .75rem; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px);
  background: #fff; color: inherit; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
input[type=file] { font-size: .85rem; width: 100%; }
.campo { margin-bottom: 1.25rem; }
.botao { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; font: inherit; font-weight: 600; font-size: .9rem;
  border: 1px solid transparent; border-radius: calc(var(--radius) - 2px); padding: .6rem 1rem; cursor: pointer; background: var(--primary); color: var(--primary-foreground); }
.botao:disabled { opacity: .6; cursor: default; }
.botao.cheio { width: 100%; padding: .8rem 1rem; }
.botao.contorno { background: #fff; color: var(--foreground); border-color: var(--border); }
.botao.fantasma { background: transparent; color: var(--foreground); padding: .35rem .6rem; font-weight: 500; }
.botao.icone { width: 2.4rem; height: 2.4rem; padding: 0; }
.botao.perigo { background: var(--destructive); }
.erro { color: var(--destructive); font-size: .8rem; margin: .3rem 0 0; }
.aviso { border-radius: calc(var(--radius) - 2px); padding: .6rem .8rem; font-size: .85rem; margin: .8rem 0 0; }
.aviso.ruim { background: oklch(0.95 0.05 27); color: var(--destructive); }
.aviso.bom { background: oklch(0.95 0.05 150); color: oklch(0.35 0.1 150); }
.faixa-ensaio { background: var(--warning); color: var(--warning-foreground); font-weight: 600; text-align: center; padding: .5rem 1rem; font-size: .85rem; }
.topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.abas { display: flex; gap: .5rem; margin: 1rem 0; }
.abas button { flex: 1; }
.linha-nf { border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); padding: .75rem; display: grid; gap: .75rem; align-items: end; margin-bottom: .75rem; }
@media (min-width: 640px) { .linha-nf { grid-template-columns: minmax(0,1fr) 150px minmax(0,1fr) auto; } }
.valor { position: relative; }
.valor span { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--muted-foreground); font-size: .875rem; }
.valor input { padding-left: 2.2rem; }
.acoes { display: flex; gap: .25rem; }
.nome-fixo { display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); padding: .5rem .75rem; font-weight: 500; }
.sugestoes { list-style: none; margin: .4rem 0 0; padding: 0; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); overflow: hidden; }
.sugestoes li + li { border-top: 1px solid var(--border); }
.sugestoes button { all: unset; display: block; width: 100%; padding: .5rem .75rem; cursor: pointer; font-size: .875rem; box-sizing: border-box; }
.sugestoes button:hover { background: var(--accent); }
.vela { position: fixed; inset: 0; z-index: 50; background: oklch(0.985 0.008 85 / .85); backdrop-filter: blur(4px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; text-align: center; padding: 1rem; }
.giro { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 4px solid var(--accent); border-top-color: var(--primary); animation: giro 0.9s linear infinite; }
@keyframes giro { to { transform: rotate(360deg); } }
dialog { border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px); padding: 1.5rem; max-width: min(32rem, calc(100vw - 2rem)); width: 100%; box-shadow: var(--shadow-panel); color: inherit; }
dialog::backdrop { background: oklch(0.2 0.02 60 / .45); }
.selo-dialogo { display: flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin-bottom: .5rem; }
.selo-dialogo.alerta { color: oklch(0.55 0.15 70); }
.selo-dialogo.perigo { color: var(--destructive); }
.selo-dialogo.ok { color: var(--success); }
.rodape-dialogo { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; margin-top: 1.25rem; }
.recibo { max-height: 55vh; overflow-y: auto; display: grid; gap: .75rem; margin-top: 1rem; }
.recibo dl { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); padding: .75rem; margin: 0; font-size: .875rem; }
.recibo dt { color: var(--muted-foreground); font-size: .72rem; }
.recibo dd { margin: 0; font-weight: 500; word-break: break-word; }
.recibo .largo { grid-column: span 2; }
.verde { color: var(--success); } .vermelho { color: var(--destructive); } .cinza { color: var(--muted-foreground); }
footer { margin-top: auto; padding-top: 1.5rem; font-size: .75rem; color: var(--muted-foreground); }
footer a { color: inherit; }
table { width: 100%; border-collapse: collapse; font-size: .85rem; }
th { text-align: left; font-size: .7rem; text-transform: uppercase; color: var(--muted-foreground); padding: .5rem .75rem .5rem 0; }
td { border-top: 1px solid var(--border); padding: .5rem .75rem .5rem 0; vertical-align: top; }
.rolar { overflow-x: auto; }
.pilula { border-radius: 999px; padding: .15rem .5rem; font-size: .72rem; font-weight: 600; white-space: nowrap; }
.pilula.bom { background: oklch(0.6 0.14 150 / .15); color: var(--success); }
.pilula.meio { background: oklch(0.8 0.15 85 / .3); color: var(--warning-foreground); }
.pilula.nada { background: var(--muted); color: var(--muted-foreground); }
.oculto { display: none !important; }
pre.diag { background: var(--muted); padding: .75rem; border-radius: 8px; font-size: .78rem; white-space: pre-wrap; word-break: break-word; }
.forte { color: var(--foreground); }
.alto { height: 16rem; }
.mt { margin-top: 1.5rem; } .mt1 { margin-top: 1rem; } .mtp { margin-top: .5rem; }
.botoes-topo { display: flex; gap: .25rem; flex-wrap: wrap; justify-content: flex-end; }
.vela-titulo { font-weight: 600; margin: 0; } .vela-texto { max-width: 20rem; }
.sugestoes li.vazio { padding: .5rem .75rem; }
/* ---- painel de recebimento (admin) ---- */
.numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
@media (min-width: 720px) { .numeros { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.numero { border: 1px solid var(--border); border-left-width: 4px; border-radius: calc(var(--radius) - 2px); padding: .7rem .8rem; display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.numero strong { font-size: 1.7rem; line-height: 1.1; }
.numero span { font-weight: 600; font-size: .85rem; }
.numero small { color: var(--muted-foreground); font-size: .72rem; overflow-wrap: anywhere; }
.numero.recebida { border-left-color: var(--success); } .numero.recebida strong { color: oklch(0.45 0.12 150); }
.numero.pendente { border-left-color: var(--warning); } .numero.pendente strong { color: oklch(0.5 0.12 70); }
.numero.faltando { border-left-color: var(--destructive); } .numero.faltando strong { color: var(--destructive); }
.numero.fora { border-left-color: var(--muted-foreground); } .numero.fora strong { color: var(--muted-foreground); }
.por-empresa { display: grid; gap: .35rem; }
.por-empresa p { margin: 0 0 .15rem; }
.barra-linha { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr) auto; gap: .6rem; align-items: center; font-size: .82rem; }
.barra-linha .sigla { font-weight: 600; }
.barra-linha .pct { color: var(--muted-foreground); font-variant-numeric: tabular-nums; white-space: nowrap; }
.barra { height: .6rem; background: var(--muted); border-radius: 999px; overflow: hidden; }
.barra .cheio { height: 100%; background: var(--primary); border-radius: 999px; }
.barra .cheio.total { background: var(--success); }
.filtros { display: grid; gap: .6rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .filtros { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.4fr); } }
.legenda { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; font-size: .75rem; }
.legenda .cel { min-height: 0; width: auto; padding: .2rem .5rem; flex-direction: row; gap: .3rem; cursor: default; }
.grade-caixa { border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); max-height: 70vh; overflow: auto; }
table.grade { border-collapse: separate; border-spacing: 0; min-width: 100%; }
table.grade th, table.grade td { padding: .35rem; border-top: 1px solid var(--border); vertical-align: middle; }
table.grade thead th { position: sticky; top: 0; background: var(--card); z-index: 2; border-top: 0; text-align: center; white-space: nowrap; }
table.grade thead th.atual { color: var(--primary); }
table.grade th.fixa { position: sticky; left: 0; background: var(--card); z-index: 1; text-align: left; min-width: 9.5rem; max-width: 12rem;
  text-transform: none; font-size: .85rem; color: var(--foreground); font-weight: 400; padding-left: .6rem; box-shadow: 1px 0 0 var(--border); }
table.grade thead th.fixa { z-index: 3; font-size: .7rem; text-transform: uppercase; color: var(--muted-foreground); }
table.grade .nome { font-weight: 600; overflow-wrap: anywhere; }
table.grade .info { display: flex; flex-wrap: wrap; gap: .2rem; margin-top: .15rem; }
table.grade .email { font-size: .7rem; color: var(--muted-foreground); overflow-wrap: anywhere; }
table.grade tr.linha-fora .nome { color: var(--muted-foreground); }
.chip { font-size: .66rem; font-weight: 600; border-radius: 999px; padding: .05rem .4rem; background: var(--accent); white-space: nowrap; }
.chip.marca { background: var(--muted); color: var(--muted-foreground); border: 1px dashed var(--border); }
.cel { all: unset; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  width: 100%; min-width: 4.9rem; min-height: 3rem; padding: .3rem .25rem; border-radius: 8px; cursor: pointer; text-align: center;
  font-size: .74rem; font-weight: 600; line-height: 1.2; border: 1px solid transparent; }
.cel:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.cel .ic { font-size: .95rem; line-height: 1; }
.cel small { font-size: .66rem; font-weight: 500; opacity: .85; }
.cel.recebida { background: oklch(0.6 0.14 150 / .14); color: oklch(0.4 0.11 150); border-color: oklch(0.6 0.14 150 / .35); }
.cel.pendente { background: oklch(0.8 0.15 85 / .28); color: oklch(0.42 0.09 70); border-color: oklch(0.75 0.15 85 / .6); border-style: dashed; }
.cel.faltando { background: oklch(0.95 0.05 27); color: var(--destructive); border-color: oklch(0.56 0.21 27 / .3); }
.cel.fora { background: var(--muted); color: var(--muted-foreground); }
.cel.sem_controle { background: transparent; color: var(--muted-foreground); border-color: var(--border); border-style: dotted; font-weight: 400; }
.cel:hover { filter: brightness(.97); }
/* ---- valor a pagar, chave PIX, totais (03/11) ---- */
.barra-linha { grid-template-columns: 4.2rem minmax(0, 1fr) auto; }
.barra-linha .pagar { grid-column: 2 / -1; font-size: .74rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; margin-top: -.2rem; }
@media (min-width: 720px) { .barra-linha { grid-template-columns: 4.2rem minmax(0, 1fr) 7.5rem minmax(9rem, auto); }
  .barra-linha .pagar { grid-column: auto; margin-top: 0; text-align: right; } }
.total-pagar { display: grid; grid-template-columns: auto auto; gap: .1rem .6rem; align-items: baseline; justify-content: start;
  border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); padding: .6rem .8rem; background: var(--muted); }
.total-pagar .rot { grid-column: 1 / -1; font-weight: 600; font-size: .85rem; }
.total-pagar strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.total-pagar small { grid-column: 1 / -1; font-size: .7rem; }
.avisos-pix { list-style: none; margin: .8rem 0 0; padding: .6rem .8rem; border: 1px solid oklch(0.56 0.21 27 / .45); border-left-width: 4px;
  border-radius: calc(var(--radius) - 2px); background: oklch(0.97 0.03 27); color: oklch(0.42 0.15 27); font-size: .82rem; font-weight: 600; display: grid; gap: .2rem; }
.avisos-pix li::before { content: "⚠ "; }
.chip.alerta { background: oklch(0.95 0.05 27); color: var(--destructive); border: 1px solid oklch(0.56 0.21 27 / .4); }
.bloco-edit { border-top: 1px solid var(--border); padding-top: .75rem; display: grid; gap: .4rem; }
.bloco-edit h3 { font-size: .95rem; margin: 0; }
.bloco-edit p { margin: 0; }
.form-edit { display: grid; gap: .5rem; align-items: end; }
@media (min-width: 560px) { .form-edit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; } }
.campo-peq label { margin-bottom: .2rem; }
.trilha { margin: 0; padding-left: 1.1rem; font-size: .78rem; color: var(--muted-foreground); display: grid; gap: .15rem; }
dialog { max-width: min(40rem, calc(100vw - 2rem)); }
/* ---- pagamento (03/11) ---- */
.total-pagar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; background: transparent; border: 0; padding: 0; }
.total-pagar .tot { display: grid; grid-template-columns: auto auto; gap: .1rem .6rem; align-items: baseline; justify-content: start;
  border: 1px solid var(--border); border-left-width: 4px; border-radius: calc(var(--radius) - 2px); padding: .6rem .8rem; min-width: 0; }
.total-pagar .tot.pago { border-left-color: var(--success); } .total-pagar .tot.pago strong { color: oklch(0.45 0.12 150); }
.total-pagar .tot.apagar { border-left-color: var(--primary); }
.total-pagar .nota { grid-column: 1 / -1; font-size: .7rem; }
@media (max-width: 480px) { .total-pagar { grid-template-columns: 1fr; } }
.selo-pago { margin-top: .15rem; font-size: .64rem; font-weight: 700; border-radius: 999px; padding: .05rem .4rem; background: oklch(0.45 0.12 150); color: #fff; white-space: nowrap; }
.cel.paga { border-style: solid; border-width: 2px; }
@media (min-width: 560px) { .form-pago { grid-template-columns: 10rem 9rem minmax(0, 1fr) auto; } }