/*
 * css/app.css — estilos das telas internas do app (pós-login). Desktop-first.
 * Reutiliza as variáveis de marca (--preto, --ouro, …) definidas no <style> do index.html.
 */

/* ---------- Shell autenticado (sidebar + conteúdo) ---------- */
#tela-app { flex: 1; display: flex; min-height: 0; }
.app-shell { flex: 1; display: grid; grid-template-columns: 13.5rem minmax(0, 1fr); height: 100svh; }

.sidebar {
  display: flex; flex-direction: column; gap: .1rem;
  padding: 1rem .7rem; height: 100svh; overflow-y: auto;
  background: #0d0b07; border-right: 1px solid rgba(230, 197, 102, 0.13);
  position: relative; z-index: 2;
}
.side-marca { display: flex; align-items: center; gap: .55rem; padding: .3rem .45rem 1.1rem; }
.side-logo { width: 1.9rem; height: 1.9rem; border-radius: .5rem; }
.side-marca b { color: var(--ouro-claro); font-size: 1rem; font-weight: 700; letter-spacing: .2px; }

.side-nav { display: flex; flex-direction: column; gap: .15rem; }
.side-item {
  display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left;
  padding: .5rem .6rem; border-radius: .55rem; cursor: pointer; font: inherit; font-size: .88rem;
  color: #b3aa96; background: none; border: 1px solid transparent;
}
.side-item svg { width: 1.05rem; height: 1.05rem; opacity: .8; flex-shrink: 0; }
.side-item:hover { background: rgba(230, 197, 102, 0.05); color: #f3eddc; }
.side-item.on { background: rgba(230, 197, 102, 0.11); color: var(--ouro-claro); border-color: rgba(230, 197, 102, 0.22); }
.side-item.on svg { opacity: 1; }

.side-foot { margin-top: auto; display: flex; align-items: center; gap: .55rem; padding: .7rem .45rem 0;
  border-top: 1px solid rgba(230, 197, 102, 0.13); }
.side-av { width: 1.9rem; height: 1.9rem; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  font-weight: 700; font-size: .8rem; color: var(--ouro-claro); background: rgba(230, 197, 102, 0.14); }
.side-user { flex: 1; min-width: 0; }
.side-user b { display: block; font-size: .8rem; color: #f3eddc; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-user span { font-size: .68rem; color: rgba(207, 199, 181, 0.5); }
.side-sair { background: none; border: none; color: rgba(207, 199, 181, 0.5); cursor: pointer; padding: .3rem; border-radius: .4rem; display: flex; }
.side-sair:hover { color: var(--ouro-claro); background: rgba(230, 197, 102, 0.08); }

.conteudo { position: relative; z-index: 1; height: 100svh; overflow-y: auto;
  padding: 1.4rem clamp(1rem, 2.5vw, 2rem) 2.5rem; }

.carregando-tela { display: flex; justify-content: center; padding: 4rem 0; }
.erro-tela { text-align: center; color: var(--erro); padding: 3rem 1rem; }
.vazio-msg { padding: 2.5rem; text-align: center; opacity: 0.7; }

/* ---------- Cabeçalho da tela ---------- */
.caixa-topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.2rem;
}
.caixa-titulo {
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  font-weight: 800;
  background: linear-gradient(135deg, var(--ouro-claro), var(--ouro) 55%, var(--ouro-escuro));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.caixa-data { font-size: 0.82rem; opacity: 0.7; text-transform: capitalize; margin-top: 0.1rem; }

/* Seletor de data (dia de caixa) */
.cx-datas { display: flex; align-items: center; gap: .5rem; margin-top: .4rem; flex-wrap: wrap; }
.cx-seta { width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border-radius: 7px; cursor: pointer;
  color: var(--ouro-claro); background: rgba(230,197,102,.06); border: 1px solid rgba(230,197,102,.2); font-size: 1.05rem; line-height: 1; }
.cx-seta:hover:not(:disabled) { background: rgba(230,197,102,.14); }
.cx-seta:disabled { opacity: .3; cursor: default; }
.cx-data-txt { font-size: .82rem; color: var(--texto-suave); text-transform: capitalize; }
.cx-data-input { padding: .25rem .4rem; font: inherit; font-size: .78rem; color: var(--texto-suave);
  background: rgba(255,255,255,.04); border: 1px solid rgba(230,197,102,.2); border-radius: 7px; color-scheme: dark; }
.cx-selo { font-size: .66rem; font-weight: 600; padding: .12rem .55rem; border-radius: 99px; margin-left: .2rem; }
.cx-selo.aberto { color: var(--good-c); background: rgba(120,200,140,.1); border: 1px solid rgba(120,200,140,.28); }
.cx-selo.fechado { color: rgba(207,199,181,.6); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); }
.cab-sub { font-weight: 400; font-size: .72rem; color: rgba(207,199,181,.45); text-transform: none; letter-spacing: 0; }

.btn-ouro {
  padding: 0.55rem 1rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: #1a1407;
  background: linear-gradient(135deg, var(--ouro-claro), var(--ouro) 55%, var(--ouro-escuro));
  border: none; border-radius: 9px; cursor: pointer; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(230, 197, 102, 0.18);
  transition: filter 0.15s ease, transform 0.05s ease;
}
.btn-ouro:hover { filter: brightness(1.06); }
.btn-ouro:active { transform: translateY(1px); }

/* ---------- Resumo do dia (herói + composição + margem) ---------- */
/* Cores de estado (status) — separadas do ouro da marca. */
:root { --good: #7bc98c; --good-c: #9fe0b0; --warn: #e0a83c; --crit: #e0674f; --cinza-forma: #6b6455; }

.rotulo { font-size: .7rem; letter-spacing: .5px; text-transform: uppercase; color: rgba(207,199,181,.55); }
.num { font-variant-numeric: tabular-nums; }
.sub { color: rgba(207,199,181,.55); font-size: .8rem; }

.resumo { display: flex; gap: 1.3rem; flex-wrap: wrap; align-items: center; justify-content: space-between;
  margin-bottom: 1.1rem; padding: 1rem 1.15rem; overflow: visible; }
.resumo-hero { flex: 1; min-width: 240px; }
.resumo-hero .hero-val { font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 800; color: var(--ouro-claro);
  line-height: 1.1; letter-spacing: -.5px; margin: .2rem 0 .7rem; }
.resumo-lado { display: flex; flex-direction: column; gap: 1rem; min-width: 230px; }

/* Barra de composição das formas de pagamento (tooltip por segmento, sem legenda) */
.barra-comp { display: flex; gap: 3px; height: 16px; overflow: visible; }
.barra-comp .seg { position: relative; height: 100%; border-radius: 3px; cursor: default; outline: none; }
.seg.pix { background: var(--ouro-claro); }
.seg.cartao { background: var(--ouro-escuro); }
.seg.credito { background: var(--cinza-forma); }
.barra-comp .seg:hover, .barra-comp .seg:focus-visible { filter: brightness(1.1); }

.seg-tip {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
  white-space: nowrap; z-index: 25; padding: .35rem .65rem; border-radius: 8px; font-size: .78rem; color: #f3eddc;
  background: #141210; border: 1px solid rgba(230, 197, 102, .28); box-shadow: 0 8px 22px rgba(0, 0, 0, .55);
  opacity: 0; visibility: hidden; transition: opacity .14s ease, transform .14s ease; pointer-events: none;
}
.seg:hover .seg-tip, .seg:focus-visible .seg-tip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.seg-tip b { color: var(--ouro-claro); font-weight: 600; }
.seg-tip-pct { color: rgba(207, 199, 181, .55); }
.seg-tip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: #141210; }

/* Só o tooltip do ÚLTIMO segmento (na ponta direita) ancora pra dentro, pra não vazar da tela.
   O primeiro (Pix, largo) fica centralizado normal. */
.barra-comp .seg:last-child .seg-tip { left: auto; right: 0; transform: translateX(0) translateY(4px); }
.barra-comp .seg:last-child:hover .seg-tip, .barra-comp .seg:last-child:focus-visible .seg-tip { transform: translateX(0) translateY(0); }
.barra-comp .seg:last-child .seg-tip::after { left: auto; right: 16px; transform: translateX(0); }

/* Mini-cards da coluna lateral */
.mini-card { padding: .9rem 1.1rem; border: 1px solid rgba(230,197,102,.14); border-radius: 12px;
  display: flex; flex-direction: column; gap: .5rem; }
.mini-card .row-between { display: flex; justify-content: space-between; align-items: center; }
.mini-card .divisor { border: none; border-top: 1px solid rgba(230,197,102,.12); }
.v-forte { color: #f3eddc; font-weight: 600; }
.v-ouro { color: var(--ouro-claro); font-weight: 800; font-size: 1.15rem; }

/* Margem: anel + faixa + tooltip no hover */
.margem-card { position: relative; flex-direction: row; align-items: center; gap: 1rem; cursor: default; outline: none; }
.margem-card.good { border-color: rgba(120,200,140,.28); background: rgba(120,200,140,.05); }
.margem-card.warn { border-color: rgba(224,168,60,.28); background: rgba(224,168,60,.05); }
.margem-card.crit { border-color: rgba(224,103,79,.28); background: rgba(224,103,79,.05); }
.margem-card .col-sm { display: flex; flex-direction: column; gap: .5rem; }

.pill { display: inline-flex; align-items: center; gap: .45rem; padding: .28rem .7rem; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.pill .dotc { width: 8px; height: 8px; border-radius: 50%; }
.pill.good { color: var(--good-c); background: rgba(120,200,140,.1); border: 1px solid rgba(120,200,140,.28); }
.pill.good .dotc { background: var(--good); }
.pill.warn { color: var(--warn); background: rgba(224,168,60,.12); border: 1px solid rgba(224,168,60,.3); }
.pill.warn .dotc { background: var(--warn); }
.pill.crit { color: var(--crit); background: rgba(224,103,79,.12); border: 1px solid rgba(224,103,79,.3); }
.pill.crit .dotc { background: var(--crit); }

.tooltip-faixas { position: absolute; top: calc(100% + 8px); right: 0; z-index: 20; width: 232px;
  background: #141210; border: 1px solid rgba(230,197,102,.25); border-radius: 12px; padding: .8rem .9rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.5); opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease; pointer-events: none; }
.margem-card:hover .tooltip-faixas, .margem-card:focus-within .tooltip-faixas { opacity: 1; visibility: visible; transform: translateY(0); }
.tf-titulo { font-size: .72rem; text-transform: uppercase; letter-spacing: .5px; color: rgba(207,199,181,.55); margin-bottom: .5rem; }
.tf-linha { display: flex; align-items: center; gap: .5rem; font-size: .85rem; padding: .2rem 0; }
.tf-linha .dotc { width: 9px; height: 9px; border-radius: 50%; }
.tf-cond { margin-left: auto; color: rgba(207,199,181,.55); font-variant-numeric: tabular-nums; }
.tf-nota { font-size: .72rem; color: rgba(207,199,181,.45); margin-top: .5rem; padding-top: .5rem; border-top: 1px solid rgba(255,255,255,.06); }

/* ---------- Grid principal: tabela + lateral ---------- */
.caixa-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 17rem;
  gap: 1rem;
  align-items: start;
}
.painel {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(230, 197, 102, 0.14);
  border-radius: 10px;
  overflow: hidden;
}
.painel-cab {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid rgba(230, 197, 102, 0.12);
}
.painel-cab h3 { font-size: 0.85rem; font-weight: 700; color: var(--ouro-claro); letter-spacing: 0.3px; }
.painel-cab .cont {
  font-size: 0.72rem; font-weight: 700; color: var(--ouro-claro);
  background: rgba(230, 197, 102, 0.12); border-radius: 999px; padding: 0.05rem 0.5rem;
}

/* ---------- Tabela de lançamentos ---------- */
.tabela-wrap { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.tabela thead th {
  text-align: left; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.5px;
  opacity: 0.6; font-weight: 600; padding: 0.5rem 1rem;
}
.tabela th.num, .tabela td.num { text-align: right; }
.tabela tbody td { padding: 0.5rem 1rem; border-top: 1px solid rgba(255, 255, 255, 0.05); }
.linha-venda { cursor: pointer; transition: background 0.12s ease; }
.linha-venda:hover { background: rgba(230, 197, 102, 0.05); }
.linha-venda.aberta { background: rgba(230, 197, 102, 0.06); }
.linha-venda td.num { font-variant-numeric: tabular-nums; font-weight: 600; }
.desc { display: block; color: var(--erro); font-size: 0.72rem; font-weight: 500; }
.expandir { color: var(--ouro); opacity: 0.6; text-align: center; width: 2rem; }

.status {
  font-size: 0.72rem; text-transform: capitalize; padding: 0.18rem 0.6rem; border-radius: 999px;
  border: 1px solid transparent;
}
.status.confirmada { color: #9fe0b0; background: rgba(120, 200, 140, 0.1); border-color: rgba(120, 200, 140, 0.25); }
.status.aberta { color: var(--ouro-claro); background: rgba(230, 197, 102, 0.1); border-color: rgba(230, 197, 102, 0.25); }
.status.estornada { color: var(--erro); background: rgba(233, 139, 122, 0.1); border-color: rgba(233, 139, 122, 0.25); }

.linha-detalhe td { padding: 0 1.2rem 0.9rem; border-top: none; }
.detalhe { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  font-size: 0.78rem; padding: 0.35rem 0.7rem; border-radius: 8px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(230, 197, 102, 0.15);
}
.chip b { color: var(--ouro-claro); font-weight: 700; }

/* ---------- Painel lateral: repasses ---------- */
.lista-repasses { list-style: none; padding: 0.5rem 0; }
.lista-repasses li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 1.2rem; }
.lista-repasses li.vazio { opacity: 0.55; justify-content: center; }
.rp-nome { opacity: 0.9; }
.rp-valor { font-weight: 700; color: var(--ouro-claro); font-variant-numeric: tabular-nums; }
.lista-total {
  display: flex; justify-content: space-between; padding: 0.9rem 1.2rem;
  border-top: 1px solid rgba(230, 197, 102, 0.15); font-weight: 800;
}
.lista-total span:last-child { color: var(--ouro-claro); }

/* ---------- Fechar caixa ---------- */
.caixa-fechar { margin-top: 1.75rem; display: flex; justify-content: flex-end; }
.btn-fechar {
  padding: 0.75rem 1.3rem; font-size: 0.9rem; font-weight: 700; cursor: pointer;
  color: var(--ouro-claro); background: rgba(230, 197, 102, 0.06);
  border: 1px solid rgba(230, 197, 102, 0.35); border-radius: 12px;
  transition: background 0.15s ease;
}
.btn-fechar:hover { background: rgba(230, 197, 102, 0.12); }
.btn-fechar:disabled { opacity: 0.6; cursor: progress; }
.selo-fechado {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 1.2rem; border-radius: 999px; font-weight: 600; font-size: 0.9rem;
  color: #9fe0b0; background: rgba(120, 200, 140, 0.08); border: 1px solid rgba(120, 200, 140, 0.28);
}

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, 1rem);
  z-index: 50; padding: 0.8rem 1.3rem; border-radius: 12px; font-size: 0.9rem;
  color: #1a1407; background: linear-gradient(135deg, var(--ouro-claro), var(--ouro));
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none; max-width: 90vw; text-align: center;
}
.toast.visivel { opacity: 1; transform: translate(-50%, 0); }
.toast.erro { background: linear-gradient(135deg, #f0b4a8, var(--erro)); color: #2a0f0a; }

/* ---------- Placeholder da visão do profissional (Passo 6) ---------- */
.em-construcao { text-align: center; padding: 3.5rem 1rem; }
.em-construcao .selo {
  display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.55rem 1.1rem; border-radius: 999px;
  font-size: 0.9rem; font-weight: 600; color: var(--ouro-claro);
  background: rgba(230, 197, 102, 0.08); border: 1px solid rgba(230, 197, 102, 0.28);
}

/* ---------- Realizado × A receber (crédito profissional) ---------- */
.realizado-receber { display: flex; gap: 1.75rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 1rem; }
.a-receber-badge { padding-left: 1.5rem; border-left: 1px solid rgba(230,197,102,.14); }
.a-receber-badge .ar-val { font-size: 1.4rem; font-weight: 800; color: var(--warn); font-variant-numeric: tabular-nums; margin-top: .1rem; }
.a-receber-badge .ar-sub { font-size: .72rem; color: rgba(207,199,181,.55); }

.a-receber-painel { margin-bottom: 1.5rem; border-color: rgba(224,168,60,.28); }
.a-receber-painel .painel-cab { border-bottom-color: rgba(224,168,60,.2); }
.cont.warn { color: var(--warn); background: rgba(224,168,60,.12); }

td.acao { text-align: right; }
.btn-quitar { padding: .4rem .8rem; font-size: .78rem; font-weight: 600; cursor: pointer;
  color: var(--warn); background: rgba(224,168,60,.1); border: 1px solid rgba(224,168,60,.35); border-radius: 8px;
  transition: background .15s ease; white-space: nowrap; }
.btn-quitar:hover { background: rgba(224,168,60,.2); }
.btn-quitar:disabled { opacity: .6; cursor: progress; }

.chip.aviso-chip { color: var(--warn); background: rgba(224,168,60,.08); border-color: rgba(224,168,60,.3); }

/* Status "a receber" (crédito profissional pendente) na tabela de lançamentos */
.status.pendente-cred { color: var(--warn); background: rgba(224,168,60,.12); border-color: rgba(224,168,60,.3); }
.desc-cred { display: block; color: var(--warn); font-size: .7rem; font-weight: 500; }

/* A receber agrupado por profissional (accordion) */
.ar-lista { display: flex; flex-direction: column; }
.ar-grupo { border-top: 1px solid rgba(255,255,255,.05); }
.ar-grupo:first-child { border-top: none; }
.ar-cab { display: flex; align-items: center; gap: .8rem; padding: .7rem 1rem; cursor: pointer; }
.ar-cab:hover { background: rgba(230,197,102,.04); }
.ar-chev { color: var(--warn); font-size: .8rem; transition: transform .15s ease; display: inline-block; }
.ar-cab.aberto .ar-chev { transform: rotate(90deg); }
.ar-nome { font-weight: 600; color: #f3eddc; }
.ar-qtd { font-size: .74rem; color: rgba(207,199,181,.5); }
.ar-total { margin-left: auto; font-weight: 800; color: var(--warn); font-variant-numeric: tabular-nums; }
.btn-quitar-tudo { padding: .35rem .7rem; font: inherit; font-size: .75rem; font-weight: 600; cursor: pointer;
  color: var(--warn); background: rgba(224,168,60,.1); border: 1px solid rgba(224,168,60,.35); border-radius: 8px; white-space: nowrap; }
.btn-quitar-tudo:hover { background: rgba(224,168,60,.2); }
.btn-quitar-tudo:disabled { opacity: .6; cursor: progress; }
.ar-det { padding: 0 1rem .6rem 1.8rem; }
.ar-det .tabela { font-size: .8rem; }
.ar-det .tabela tbody td { padding: .4rem .8rem; }

/* ---------- Lançamento de venda (§7.2) ---------- */
.lanc-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1.5rem; }
.btn-sec { padding: .6rem 1rem; font-size: .85rem; font-weight: 600; color: var(--ouro-claro);
  background: rgba(230,197,102,.06); border: 1px solid rgba(230,197,102,.3); border-radius: 10px; cursor: pointer; }
.btn-sec:hover { background: rgba(230,197,102,.12); }

.lanc-grid { display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: 1.5rem; align-items: start; }
.lanc-form { padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }

.campo-l { display: flex; flex-direction: column; gap: .35rem; }
.campo-l > span { font-size: .78rem; color: rgba(207,199,181,.7); letter-spacing: .3px; }
.campo-l select, .campo-l input {
  width: 100%; padding: .7rem .8rem; font-size: .95rem; color: #f3eddc;
  background: rgba(255,255,255,.04); border: 1px solid rgba(230,197,102,.22); border-radius: 10px; outline: none;
}
.campo-l select:focus, .campo-l input:focus { border-color: var(--ouro); box-shadow: 0 0 0 3px rgba(230,197,102,.12); }
.campo-linha { display: flex; gap: 1rem; }
.campo-linha .campo-l { flex: 1; }
.campo-l.estreito { max-width: 150px; }
.campo-desc { display: flex; gap: .4rem; }
.campo-desc select { max-width: 64px; }
.dica { font-size: .75rem; color: rgba(207,199,181,.5); }
.dica.recep { color: var(--ouro-claro); opacity: .85; }
.dica b { color: var(--ouro-claro); }

.grupo-papel { border: 1px solid rgba(230,197,102,.14); border-radius: 12px; padding: .9rem 1rem; display: flex; flex-direction: column; gap: .6rem; }
.grupo-papel legend { font-size: .78rem; color: var(--ouro-claro); font-weight: 700; padding: 0 .4rem; }
.linha-prof { display: flex; gap: .5rem; align-items: center; }
.linha-prof .lp-prof { flex: 1; padding: .55rem .7rem; color: #f3eddc; background: rgba(255,255,255,.04);
  border: 1px solid rgba(230,197,102,.2); border-radius: 9px; }
.lp-fracao { display: flex; align-items: center; gap: .25rem; }
.lp-fracao .lp-frac { width: 62px; padding: .55rem .4rem; text-align: right; color: #f3eddc;
  background: rgba(255,255,255,.04); border: 1px solid rgba(230,197,102,.2); border-radius: 9px; }
.lp-fracao span { color: rgba(207,199,181,.5); font-size: .85rem; }
.lp-rem { width: 30px; height: 30px; border-radius: 8px; color: var(--erro);
  background: rgba(233,139,122,.08); border: 1px solid rgba(233,139,122,.3); cursor: pointer; }
.lp-espaco { width: 30px; }
.linha-prof .lp-prof:disabled, .lp-fracao .lp-frac:disabled { opacity: .8; cursor: default; -webkit-text-fill-color: #cfc7b5; }
.btn-add { align-self: flex-start; font-size: .8rem; color: var(--ouro-claro); background: none;
  border: 1px dashed rgba(230,197,102,.35); border-radius: 8px; padding: .4rem .7rem; cursor: pointer; }
.btn-add:hover { background: rgba(230,197,102,.06); }

.lanc-espelho { padding: 1.3rem; position: sticky; top: 1rem; display: flex; flex-direction: column; }
#espelho { padding: .5rem 0; }
.esp-vazio { color: rgba(207,199,181,.5); text-align: center; padding: 1.5rem 0; }
.esp-grupo { display: flex; flex-direction: column; }
.esp-linha { display: grid; grid-template-columns: auto 1fr auto; gap: .6rem; align-items: baseline;
  padding: .5rem 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.esp-papel { font-size: .66rem; text-transform: uppercase; letter-spacing: .4px; color: var(--ouro-claro); }
.esp-nome { color: var(--texto-suave); font-size: .85rem; }
.esp-val { font-weight: 700; color: #f3eddc; font-variant-numeric: tabular-nums; }
.esp-tot { margin-top: .8rem; display: flex; flex-direction: column; gap: .5rem; }
.esp-tot-l { display: flex; justify-content: space-between; font-size: .9rem; }
.esp-tot-l .num { font-weight: 700; font-variant-numeric: tabular-nums; }
.esp-tot-l.destaque { padding-top: .6rem; border-top: 1px solid rgba(230,197,102,.2); }
.esp-tot-l.destaque .num { color: var(--ouro-claro); font-size: 1.15rem; font-weight: 800; }
.esp-tot-l.destaque-warn { padding-top: .6rem; border-top: 1px solid rgba(224,168,60,.25); }
.esp-tot-l.destaque-warn .num { color: var(--warn); font-size: 1.15rem; font-weight: 800; }
.lanc-erros { margin-top: .6rem; }
.erro-item { font-size: .82rem; color: var(--erro); padding: .3rem 0; }
.lanc-confirmar { margin-top: 1rem; width: 100%; }
.lanc-confirmar:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* (a navegação agora é a sidebar — ver ".sidebar / .side-item" no topo do arquivo) */

/* ---------- Cadastro de serviço (§7.5) ---------- */
.srv-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1.5rem; }
.srv-acoes { display: flex; gap: .6rem; }
.srv-sub { font-size: .9rem; color: rgba(207,199,181,.6); margin-top: .2rem; }

/* Lista: tabela enxuta e clicável */
.srv-tabela tbody tr.srv-row { cursor: pointer; }
.srv-tabela tbody tr.srv-row:hover { background: rgba(230,197,102,.05); }
.srv-tabela tbody tr.srv-row.inativo { opacity: .5; }
.srv-nome { font-weight: 600; color: #f3eddc; }
.srv-tag { font-size: .62rem; text-transform: uppercase; letter-spacing: .4px; color: rgba(207,199,181,.55);
  border: 1px solid rgba(207,199,181,.25); border-radius: 5px; padding: .05rem .35rem; margin-left: .6rem; }
.srv-chevron { text-align: right; color: var(--ouro); font-size: 1.4rem; opacity: .45; width: 2rem; }
.srv-tabela tbody tr.srv-row:hover .srv-chevron { opacity: 1; }

/* Editor */
.srv-titulo-linha { display: flex; align-items: center; gap: 1rem; }
.srv-editando { font-size: 1.5rem; }
.somente-leitura { color: var(--ouro-claro); background: rgba(230,197,102,.1); border: 1px solid rgba(230,197,102,.3); }
.srv-editor { padding: 1.6rem; max-width: 680px; }
.srv-form { display: flex; flex-direction: column; gap: 1.1rem; }

/* Campos em só-leitura continuam legíveis (Safari costuma acinzentar disabled) */
.campo-l input:disabled { opacity: 1; -webkit-text-fill-color: #f3eddc; color: #f3eddc; cursor: default; }

.srv-repasses { gap: .1rem; }
.srv-rep-linha { display: flex; justify-content: space-between; align-items: center; padding: .5rem 0;
  border-bottom: 1px solid rgba(255,255,255,.05); }
.srv-rep-linha:last-of-type { border-bottom: none; }
.srv-rep-cargo { font-size: .92rem; color: var(--texto-suave); }
.srv-rep-input { display: flex; align-items: center; gap: .45rem; }
.srv-rep-input .s-rep { width: 96px; padding: .5rem .7rem; text-align: right; font-size: .95rem; color: #f3eddc;
  background: rgba(255,255,255,.05); border: 1px solid rgba(230,197,102,.25); border-radius: 9px; outline: none;
  font-variant-numeric: tabular-nums; }
.srv-rep-input .s-rep:focus { border-color: var(--ouro); box-shadow: 0 0 0 3px rgba(230,197,102,.12); }
.srv-rep-input .s-rep:disabled { opacity: 1; -webkit-text-fill-color: var(--ouro-claro); color: var(--ouro-claro);
  background: rgba(230,197,102,.06); border-color: rgba(230,197,102,.18); cursor: default; }
.srv-rep-pct { color: rgba(207,199,181,.55); font-size: .9rem; }

/* Indicador unificado: seletor %/R$ + valor */
.srv-rep-input .s-ind-tipo { padding: .5rem .4rem; color: #f3eddc; background: rgba(255,255,255,.05);
  border: 1px solid rgba(230,197,102,.25); border-radius: 9px; font: inherit; font-size: .85rem; cursor: pointer; }
.srv-rep-input .s-ind-valor { width: 76px; padding: .5rem .7rem; text-align: right; font-size: .95rem; color: #f3eddc;
  background: rgba(255,255,255,.05); border: 1px solid rgba(230,197,102,.25); border-radius: 9px; outline: none; font-variant-numeric: tabular-nums; }
.srv-rep-input .s-ind-tipo:focus, .srv-rep-input .s-ind-valor:focus { border-color: var(--ouro); box-shadow: 0 0 0 3px rgba(230,197,102,.12); }
.srv-rep-input .s-ind-tipo:disabled, .srv-rep-input .s-ind-valor:disabled { opacity: 1;
  -webkit-text-fill-color: var(--ouro-claro); color: var(--ouro-claro); background: rgba(230,197,102,.06); border-color: rgba(230,197,102,.18); cursor: default; }

.srv-ativo { display: flex; align-items: center; gap: .55rem; font-size: .9rem; cursor: pointer; }
.srv-ativo input { width: auto; accent-color: var(--ouro); }
.srv-salvar { display: flex; align-items: center; gap: 1rem; margin-top: .4rem; }
.srv-msg { font-size: .85rem; }
.srv-msg.ok { color: var(--good-c); }
.srv-msg.erro { color: var(--erro); }

/* Linha selecionada (com o drawer aberto) */
.srv-row.sel { background: rgba(230,197,102,.1); }
.srv-row.sel .srv-chevron { opacity: 1; }

/* Drawer lateral (estilo Notion) + overlay que esmaece o fundo */
.srv-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(6,5,3,.6);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .28s ease; }
.srv-backdrop.aberto { opacity: 1; }

.srv-drawer { position: fixed; top: 0; right: 0; z-index: 50; height: 100vh; width: min(560px, 94vw);
  display: flex; flex-direction: column; overflow-y: auto;
  padding: calc(1.6rem + env(safe-area-inset-top)) 1.7rem 2.5rem;
  background: linear-gradient(180deg, #17140d 0%, var(--preto) 100%);
  border-left: 1px solid rgba(230,197,102,.22); box-shadow: -24px 0 70px rgba(0,0,0,.55);
  transform: translateX(100%); opacity: 0;
  transition: transform .32s cubic-bezier(.32,.72,0,1), opacity .3s ease; }
.srv-drawer.aberto { transform: translateX(0); opacity: 1; }

.drawer-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.4rem; }
.drawer-tit { font-size: 1.25rem; color: var(--ouro-claro); font-weight: 800; text-wrap: balance; }
.drawer-sub { font-size: .8rem; color: rgba(207,199,181,.55); margin-top: .25rem; }
.drawer-x { width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; font-size: 1rem; cursor: pointer;
  color: var(--texto-suave); background: rgba(255,255,255,.05); border: 1px solid rgba(230,197,102,.2); }
.drawer-x:hover { background: rgba(230,197,102,.12); color: var(--ouro-claro); }

@media (prefers-reduced-motion: reduce) {
  .srv-backdrop, .srv-drawer { transition: opacity .12s ease; }
  .srv-drawer { transform: none; }
}

/* ---------- Responsivo (fase 2 já começa incremental) ---------- */
@media (max-width: 820px) {
  .caixa-grid { grid-template-columns: 1fr; }
  .lanc-grid { grid-template-columns: 1fr; }
  .lanc-espelho { position: static; }
  .srv-grid { grid-template-columns: 1fr; }

  /* Sidebar vira barra horizontal no topo */
  .app-shell { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .sidebar { height: auto; flex-direction: row; align-items: center; gap: .5rem; overflow-x: auto;
    padding: .5rem .7rem; border-right: none; border-bottom: 1px solid rgba(230, 197, 102, 0.13); }
  .side-marca { padding: 0 .4rem 0 0; }
  .side-marca b { display: none; }
  .side-nav { flex-direction: row; gap: .25rem; }
  .side-item span { white-space: nowrap; }
  .side-foot { margin: 0 0 0 auto; padding: 0; border-top: none; }
  .side-user { display: none; }
  .conteudo { height: auto; }
}