/* Controle do Salmao — visual das apresentacoes "Kintaru Rendimento Salmao" (pedido do Christiano, 2026-09-25).
   Regras de uso do designer.md: toque >= 44px, foco visivel, contraste, botao pilula, card 12px. */
:root {
  --verde-profundo: #1F423C;   /* capa, barra superior */
  --verde-tabela: #285A4F;     /* cabecalho de tabela, serie "nobre" */
  --tinta: #1F2928;            /* titulos e texto */
  --tinta-suave: #5E6967;      /* subtitulos (deck #6B7674, escurecido p/ contraste) */
  --cartao: #EEF1F0;
  --linha-tabela: #DCE3E1;
  --linha-tabela-alt: #E8EDEB;
  --claro-capa: #C9D6D0;
  --fundo: #FFFFFF;
  --laranja: #E1793C;          /* serie "total", sobrelinha */
  --laranja-texto: #B4561D;
  --dentro: #3FA47C;  --dentro-texto: #23724F;
  --atencao: #C99621; --atencao-texto: #83610F;
  --fora: #D9645B;    --fora-texto: #A83A31;
  --pele: #8FB3A8;
  --borda: #C9D6D0;
  --sombra: 0 6px 24px rgba(31, 41, 40, .16);
  --raio: 12px;
  --fonte: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 16px; --esp-5: 24px; --esp-6: 32px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--fonte); color: var(--tinta); background: var(--fundo); font-size: 15px; line-height: 1.4; -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* ---------- entrada (capa) ---------- */
.capa { min-height: 100vh; min-height: 100dvh; background: var(--verde-profundo); color: #fff; display: flex; flex-direction: column; justify-content: center; padding: var(--esp-6) var(--esp-5); }
.capa .marca { color: var(--claro-capa); letter-spacing: .08em; font-weight: 700; font-size: 13px; }
.capa h1 { font-size: clamp(26px, 6vw, 40px); line-height: 1.1; margin: var(--esp-2) 0; }
.capa .sub { color: var(--claro-capa); font-size: 17px; margin: 0 0 var(--esp-6); }
.pin-caixa { max-width: 320px; }
.pin-visor { display: flex; gap: var(--esp-2); margin-bottom: var(--esp-4); }
.pin-visor span { width: 40px; height: 48px; border-bottom: 3px solid var(--claro-capa); display: grid; place-items: center; font-size: 28px; }
.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--esp-2); }
.teclado button { min-height: 60px; border-radius: var(--raio); border: 1px solid rgba(201, 214, 208, .35); background: rgba(255, 255, 255, .06); color: #fff; font-size: 24px; cursor: pointer; }
.teclado button:active { background: rgba(255, 255, 255, .18); }
.capa .erro { color: #FFC9C3; min-height: 1.4em; margin-top: var(--esp-3); }
.capa .rodape { color: var(--claro-capa); font-size: 12px; margin-top: var(--esp-6); }

/* ---------- barra superior e navegacao ---------- */
.topo { position: sticky; top: 0; z-index: 20; background: var(--verde-profundo); color: #fff; display: flex; align-items: center; gap: var(--esp-3); padding: var(--esp-2) var(--esp-4); padding-top: calc(var(--esp-2) + env(safe-area-inset-top, 0px)); flex-wrap: wrap; }
.topo .marca { font-weight: 700; letter-spacing: .06em; font-size: 13px; color: var(--claro-capa); }
.topo .marca b { color: #fff; }
.topo .espaco { flex: 1; }
.topo select { background: transparent; color: #fff; border: 1px solid rgba(201, 214, 208, .5); border-radius: 999px; min-height: 36px; padding: 0 var(--esp-3); }
.topo select option { color: var(--tinta); }
.topo .usuario { font-size: 13px; color: var(--claro-capa); }
.botao-link { background: none; border: 0; color: inherit; text-decoration: underline; cursor: pointer; min-height: 44px; padding: 0 var(--esp-2); }

.abas { display: flex; gap: var(--esp-1); background: var(--cartao); padding: var(--esp-2) var(--esp-4) 0; border-bottom: 1px solid var(--borda); overflow-x: auto; }
.abas button { border: 0; background: none; min-height: 44px; padding: 0 var(--esp-4); font-weight: 700; color: var(--tinta-suave); border-bottom: 3px solid transparent; cursor: pointer; white-space: nowrap; }
.abas button[aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--laranja); }
@media (max-width: 700px) {
  .abas { position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; justify-content: space-around; padding: 0 0 env(safe-area-inset-bottom, 0px); border-top: 1px solid var(--borda); border-bottom: 0; background: var(--fundo); }
  .abas button { flex: 1; min-height: 56px; border-bottom: 0; border-top: 3px solid transparent; padding: 0 var(--esp-1); font-size: 13px; }
  .abas button[aria-selected="true"] { border-top-color: var(--laranja); }
  main { padding-bottom: 88px !important; }
}

main { max-width: 1120px; margin: 0 auto; padding: var(--esp-5) var(--esp-4) var(--esp-6); }

/* ---------- tipografia do deck ---------- */
.sobrelinha { color: var(--laranja-texto); font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; margin: 0; }
.titulo { font-size: clamp(20px, 3.4vw, 28px); font-weight: 700; margin: var(--esp-1) 0; line-height: 1.15; }
.subtitulo { color: var(--tinta-suave); margin: 0 0 var(--esp-4); }
h3.bloco { font-size: 15px; font-weight: 700; margin: var(--esp-5) 0 var(--esp-3); }

/* ---------- componentes ---------- */
.botao { min-height: 48px; padding: 0 var(--esp-5); border-radius: 999px; border: 1px solid var(--tinta); background: var(--fundo); color: var(--tinta); font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2); text-decoration: none; }
.botao.primario { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.botao.primario:hover { background: var(--verde-profundo); }
.botao.pequeno { min-height: 40px; padding: 0 var(--esp-4); font-size: 14px; }
.botao.perigo { border-color: var(--fora-texto); color: var(--fora-texto); }
.botao:disabled { opacity: .5; cursor: not-allowed; }
.botao.largo { width: 100%; }

.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--esp-3); }
.cartao { background: var(--cartao); border-radius: var(--raio); padding: var(--esp-3) var(--esp-4); }
.cartao .rotulo { color: var(--tinta-suave); font-weight: 700; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.cartao .valor { font-size: 26px; font-weight: 700; margin: var(--esp-1) 0; }
.cartao .nota { color: var(--tinta-suave); font-size: 13px; }

.st-dentro { color: var(--dentro-texto); } .st-atencao { color: var(--atencao-texto); } .st-fora { color: var(--fora-texto); }
.selo { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 700; color: #fff; white-space: nowrap; }
.selo.dentro { background: var(--dentro-texto); } .selo.atencao { background: var(--atencao-texto); } .selo.fora { background: var(--fora-texto); }
.selo.revisar { background: var(--tinta-suave); }

.tabela-rolagem { overflow-x: auto; border-radius: var(--raio); }
table.deck { width: 100%; border-collapse: separate; border-spacing: 0 2px; font-size: 14px; min-width: 640px; }
table.deck th { background: var(--verde-tabela); color: #fff; text-align: left; padding: var(--esp-2) var(--esp-3); font-size: 13px; white-space: nowrap; }
table.deck th:first-child { border-radius: 8px 0 0 8px; } table.deck th:last-child { border-radius: 0 8px 8px 0; }
table.deck td { background: var(--linha-tabela); padding: var(--esp-2) var(--esp-3); white-space: nowrap; }
table.deck tr:nth-child(even) td { background: var(--linha-tabela-alt); }
table.deck td:first-child { font-weight: 700; }
table.deck tr.total td { font-weight: 700; background: var(--claro-capa); }
table.deck td.num, table.deck th.num { text-align: right; }
table.deck tr.clicavel { cursor: pointer; }
table.deck tr.clicavel:hover td { background: var(--claro-capa); }
table.deck tr.anulada td { text-decoration: line-through; color: var(--tinta-suave); }

.leitura { border-left: 4px solid var(--laranja); background: var(--cartao); border-radius: 0 var(--raio) var(--raio) 0; padding: var(--esp-3) var(--esp-4); }
.leitura p { margin: 0 0 var(--esp-2); white-space: pre-wrap; }
.leitura .vazio { color: var(--tinta-suave); font-style: italic; }
.leitura textarea { width: 100%; min-height: 140px; border: 1px solid var(--borda); border-radius: 8px; padding: var(--esp-2); background: var(--fundo); }

.grade-2 { display: grid; grid-template-columns: 1.7fr 1fr; gap: var(--esp-5); align-items: start; }
@media (max-width: 860px) { .grade-2 { grid-template-columns: 1fr; } }

.slide { padding: var(--esp-5) 0 var(--esp-6); border-bottom: 1px solid var(--borda); }
.slide:last-child { border-bottom: 0; }

.podio { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--esp-3); margin-bottom: var(--esp-4); }
.podio .cartao .valor { font-size: 20px; }

/* ---------- formulario de lancamento ---------- */
.form-grade { display: grid; gap: var(--esp-4); max-width: 720px; }
.campo label, .campo .rotulo-campo { display: block; font-weight: 700; font-size: 13px; margin-bottom: var(--esp-2); }
.campo input, .campo select, .campo textarea { width: 100%; min-height: 52px; border: 1px solid var(--borda); border-radius: 10px; padding: 0 var(--esp-3); background: var(--fundo); font-size: 18px; }
.campo textarea { min-height: 72px; padding: var(--esp-2) var(--esp-3); font-size: 15px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--tinta); outline: none; box-shadow: 0 0 0 3px rgba(225, 121, 60, .35); }
.campo .ajuda { color: var(--tinta-suave); font-size: 12px; margin-top: var(--esp-1); }
.linha-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-3); }
.chips { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.chips button { min-height: 44px; padding: 0 var(--esp-4); border-radius: 999px; border: 1px solid var(--borda); background: var(--cartao); cursor: pointer; font-weight: 700; }
.chips button[aria-pressed="true"] { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.cronometro { display: flex; align-items: center; gap: var(--esp-3); flex-wrap: wrap; }
.cronometro .visor { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 96px; }
.cronometro.rodando .visor { color: var(--laranja-texto); }
.avisos { background: #FBEEDF; border-radius: var(--raio); padding: var(--esp-3) var(--esp-4); }
.avisos ul { margin: var(--esp-1) 0 var(--esp-3); padding-left: 20px; }
.erro-form { color: var(--fora-texto); font-weight: 700; }

.aviso-toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 96px; background: var(--tinta); color: #fff; padding: var(--esp-3) var(--esp-5); border-radius: 999px; box-shadow: var(--sombra); z-index: 50; max-width: calc(100% - 32px); text-align: center; }
.fila-offline { background: #FBEEDF; color: var(--tinta); padding: var(--esp-2) var(--esp-4); text-align: center; font-weight: 700; font-size: 14px; }

/* ---------- painel ---------- */
.filtros { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: end; margin-bottom: var(--esp-3); }
.filtros .campo input, .filtros .campo select { min-height: 44px; font-size: 15px; }
.filtros .campo { min-width: 140px; }
.ao-vivo { display: inline-flex; align-items: center; gap: 6px; color: var(--tinta-suave); font-size: 13px; }
.ao-vivo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dentro); }
.ao-vivo.off::before { background: var(--fora); }

.grafico { width: 100%; height: auto; display: block; }
.grafico text { font-family: var(--fonte); fill: var(--tinta); }
.grafico .eixo { stroke: var(--borda); }
.grafico .meta { stroke-dasharray: 5 4; stroke-width: 1.5; }
.legenda { display: flex; flex-wrap: wrap; gap: var(--esp-4); font-size: 13px; color: var(--tinta-suave); margin-top: var(--esp-2); }
.legenda i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

.vazio-estado { text-align: center; padding: var(--esp-6) var(--esp-4); color: var(--tinta-suave); background: var(--cartao); border-radius: var(--raio); }

/* ---------- modo apresentacao ---------- */
.apresentando .topo, .apresentando .abas, .apresentando .filtros, .apresentando .so-tela { display: none !important; }
.apresentando main { max-width: none; padding: 0 !important; }
.apresentando #painel-conteudo { height: 100vh; overflow-y: auto; scroll-snap-type: y mandatory; }
.apresentando .slide { min-height: 100vh; scroll-snap-align: start; padding: 5vh 6vw; border: 0; display: flex; flex-direction: column; justify-content: center; }
.slide.capa-slide { display: none; }
.apresentando .slide.capa-slide { display: flex; background: var(--verde-profundo); color: #fff; }
.capa-slide .marca { color: var(--claro-capa); font-weight: 700; letter-spacing: .08em; }
.capa-slide h1 { font-size: clamp(30px, 5vw, 56px); margin: var(--esp-3) 0; line-height: 1.1; }
.capa-slide .linha { color: var(--claro-capa); font-size: clamp(16px, 2vw, 22px); margin: var(--esp-1) 0; }
.sair-apresentacao { position: fixed; top: var(--esp-3); right: var(--esp-3); z-index: 60; }

@media print {
  .topo, .abas, .filtros, .so-tela, .sair-apresentacao { display: none !important; }
  .slide { break-after: page; border: 0; }
  .slide.capa-slide { display: flex; min-height: 90vh; background: var(--verde-profundo); color: #fff; padding: 10vh 8vw; flex-direction: column; justify-content: center; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  table.deck th, table.deck td, .cartao { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* =================== refinamento visual (2026-09-26) =================== */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
body { background: var(--fundo-app, #F6F8F7); }
:root { --fundo-app: #F6F8F7; --superficie: #FFFFFF; }

/* barra superior */
.topo { gap: var(--esp-3); min-height: 60px; }
.topo .logo svg { width: 36px; height: 36px; display: block; border-radius: 10px; }
.topo .marca { display: flex; flex-direction: column; line-height: 1.1; }
.topo .marca small { font-size: 10px; letter-spacing: .14em; color: var(--claro-capa); }
.topo .marca b { font-size: 16px; color: #fff; letter-spacing: 0; }
.topo .usuario { display: inline-flex; align-items: center; gap: var(--esp-2); }
.topo .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--laranja); color: var(--tinta); display: grid; place-items: center; font-weight: 700; font-size: 12px; }
@media (max-width: 480px) { .topo .nome-usuario { display: none; } }

/* abas com icones */
.abas { background: var(--superficie); }
.abas button { display: inline-flex; align-items: center; gap: var(--esp-2); }
.abas .icone { width: 20px; height: 20px; }
@media (max-width: 700px) {
  .abas { box-shadow: 0 -4px 16px rgba(31, 41, 40, .08); }
  .abas button { flex-direction: column; gap: 2px; font-size: 12px; }
  .abas .icone { width: 24px; height: 24px; }
  .abas button[aria-selected="true"] { color: var(--verde-profundo); }
}

/* resumo do dia */
.resumo-dia { background: var(--verde-profundo); color: #fff; border-radius: 16px; padding: var(--esp-4) var(--esp-5); margin-bottom: var(--esp-5); }
.resumo-titulo { color: var(--claro-capa); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.resumo-numeros { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--esp-3); margin-top: var(--esp-2); }
.resumo-numeros .n { display: block; font-size: clamp(20px, 5vw, 28px); font-weight: 700; font-variant-numeric: tabular-nums; }
.resumo-numeros .r { color: var(--claro-capa); font-size: 12px; }
.resumo-dia .st-dentro { color: #7FD6AE; } .resumo-dia .st-atencao { color: #F1C95E; } .resumo-dia .st-fora { color: #FF9A90; }
.resumo-vazio { margin: var(--esp-2) 0 0; color: var(--claro-capa); }
@media (max-width: 480px) { .resumo-numeros { grid-template-columns: repeat(2, 1fr); } }

.cabeca-tela { margin-bottom: var(--esp-4); }

/* formulario em passos */
.form-lanc { display: grid; gap: var(--esp-4); max-width: 760px; }
.passo { border: 1px solid var(--linha-tabela); background: var(--superficie); border-radius: 16px; padding: var(--esp-4) var(--esp-5) var(--esp-5); margin: 0; display: grid; gap: var(--esp-4); min-width: 0; }
.passo legend { display: flex; align-items: center; gap: var(--esp-3); font-weight: 700; font-size: 17px; padding: 0 var(--esp-2); margin-left: calc(-1 * var(--esp-2)); }
.passo .num { width: 28px; height: 28px; border-radius: 50%; background: var(--tinta); color: #fff; display: grid; place-items: center; font-size: 14px; }
.chips.segmento { background: var(--cartao); border-radius: 999px; padding: 4px; display: inline-flex; gap: 4px; }
.chips.segmento button { border: 0; background: transparent; }
.chips.segmento button[aria-pressed="true"] { background: var(--tinta); color: #fff; }
.chips button { transition: background .15s, color .15s; }
.chips button:hover:not([aria-pressed="true"]) { border-color: var(--tinta-suave); }
.ajuda-vazia { background: var(--cartao); border-radius: 10px; padding: var(--esp-3); margin: 0; color: var(--tinta-suave); }

details.mais { border-top: 1px dashed var(--borda); padding-top: var(--esp-3); }
details.mais summary { cursor: pointer; color: var(--tinta-suave); font-weight: 700; font-size: 14px; min-height: 32px; display: flex; align-items: center; gap: var(--esp-2); }
details.mais[open] summary { margin-bottom: var(--esp-3); }
details.mais .dica { background: var(--cartao); color: var(--tinta); border-radius: 999px; padding: 1px 10px; font-size: 12px; }
details.mais .dica.alerta { background: #FBEEDF; color: var(--laranja-texto); }
details.mais .botao { margin-top: var(--esp-2); }

/* cronometro */
.cronometro { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-4); align-items: end; }
@media (max-width: 480px) { .cronometro { grid-template-columns: 1fr; } }
.botao-cron { border: 2px solid var(--tinta); background: var(--superficie); border-radius: 16px; min-height: 96px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.botao-cron .visor { font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums; }
.botao-cron .acao-cron { font-size: 13px; color: var(--tinta-suave); font-weight: 700; }
.cronometro.rodando .botao-cron { background: var(--laranja); border-color: var(--laranja); }
.cronometro.rodando .botao-cron .acao-cron { color: var(--tinta); }
@media (prefers-reduced-motion: no-preference) { .cronometro.rodando .botao-cron { animation: pulso 1.6s ease-in-out infinite; } }
@keyframes pulso { 50% { box-shadow: 0 0 0 8px rgba(225, 121, 60, .18); } }
.tempo-manual label { font-weight: 400 !important; color: var(--tinta-suave); }

/* pesos */
.grade-pesos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-4); }
@media (max-width: 420px) { .grade-pesos { grid-template-columns: 1fr; } }
.peso label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.peso small { display: block; color: var(--tinta-suave); font-size: 12px; margin-top: 4px; }
.entrada-kg { position: relative; }
.entrada-kg input { width: 100%; min-height: 60px; border: 1.5px solid var(--borda); border-radius: 12px; padding: 0 52px 0 var(--esp-4); font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--superficie); }
.entrada-kg input::placeholder { color: #B9C4C1; font-weight: 400; }
.entrada-kg input:focus { outline: none; border-color: var(--tinta); box-shadow: 0 0 0 3px rgba(225, 121, 60, .35); }
.entrada-kg span { position: absolute; right: var(--esp-4); top: 50%; transform: translateY(-50%); color: var(--tinta-suave); font-weight: 700; pointer-events: none; }

/* resultado da caixa */
.resultado { position: sticky; bottom: 0; z-index: 5; background: var(--superficie); border: 1px solid var(--linha-tabela); border-radius: 16px; padding: var(--esp-4) var(--esp-5); box-shadow: 0 -6px 20px rgba(31, 41, 40, .08); display: grid; gap: var(--esp-3); }
@media (max-width: 700px) { .resultado { bottom: 64px; } }
.resultado.vazio { position: static; box-shadow: none; background: var(--cartao); border-style: dashed; color: var(--tinta-suave); }
.resultado.vazio p { margin: 0; }
.resultado.dentro { border-color: var(--dentro); } .resultado.atencao { border-color: var(--atencao); } .resultado.fora, .resultado.erro { border-color: var(--fora); }
.resultado .rotulo { display: block; color: var(--tinta-suave); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.resultado-principal { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); }
.resultado-principal .grande { font-size: 40px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.resultado-principal .selo { font-size: 14px; padding: 6px 14px; }
.resultado-detalhes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--esp-3); }
.resultado-detalhes b { font-size: 17px; font-variant-numeric: tabular-nums; }
.resultado-detalhes small { color: var(--tinta-suave); display: block; }
.resultado-detalhes .selo { display: none; }
@media (max-width: 420px) { .resultado-principal .grande { font-size: 32px; } .resultado-detalhes b { font-size: 15px; } }

/* regua da meta */
.regua { position: relative; height: 10px; background: var(--cartao); border-radius: 999px; margin: 6px 0 18px; }
.regua-faixa { position: absolute; top: 0; bottom: 0; background: rgba(201, 150, 33, .22); }
.regua-valor { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--tinta-suave); }
.regua-valor.dentro { background: var(--dentro); } .regua-valor.atencao { background: var(--atencao); } .regua-valor.fora { background: var(--fora); }
.regua-meta { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--tinta); }
.regua-meta span { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--tinta-suave); white-space: nowrap; }

.acoes-form { display: flex; gap: var(--esp-2); flex-wrap: wrap; }
.botao.grande { min-height: 58px; font-size: 18px; }

/* lista de caixas do dia */
.lista-caixas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-2); max-width: 760px; }
.item-caixa { width: 100%; display: grid; grid-template-columns: 36px 1fr auto auto; gap: var(--esp-3); align-items: center; text-align: left; background: var(--superficie); border: 1px solid var(--linha-tabela); border-radius: 12px; padding: var(--esp-3); cursor: pointer; min-height: 64px; }
.item-caixa:hover { border-color: var(--tinta-suave); }
.item-caixa .numero { width: 32px; height: 32px; border-radius: 50%; background: var(--cartao); display: grid; place-items: center; font-weight: 700; }
.item-caixa small { display: block; color: var(--tinta-suave); font-size: 12px; }
.item-caixa .valores { text-align: right; font-variant-numeric: tabular-nums; }
.item-caixa .valores b { font-size: 18px; }
@media (max-width: 480px) { .item-caixa { grid-template-columns: 32px 1fr auto; } .item-caixa > .selo { display: none; } }
.ajuda-lista { color: var(--tinta-suave); font-size: 13px; }

/* painel */
.cartao { background: var(--superficie); border: 1px solid var(--linha-tabela); }
.cartao .rotulo { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2); }
.cartao .rotulo .selo { letter-spacing: 0; text-transform: none; }
.cartao.destaque .valor { font-size: 32px; }
.leitura { background: var(--superficie); border: 1px solid var(--linha-tabela); border-left: 4px solid var(--laranja); }
main > .slide, #painel-conteudo .slide { border-bottom-color: var(--linha-tabela); }
.apresentando .slide { background: var(--superficie); }
.apresentando .slide.capa-slide { background: var(--verde-profundo); }

/* fotos da balanca */
.fotos-balanca .rotulo-campo small { font-weight: 400; color: var(--tinta-suave); }
.miniaturas { display: flex; flex-wrap: wrap; gap: var(--esp-3); }
.miniatura { position: relative; margin: 0; width: 88px; height: 88px; }
.miniatura > button:first-child { width: 100%; height: 100%; padding: 0; border: 1px solid var(--linha-tabela); border-radius: 12px; overflow: hidden; cursor: zoom-in; background: var(--cartao); }
.miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.miniatura.nova > button:first-child { border: 2px solid var(--laranja); }
.miniatura .remover { position: absolute; top: -8px; right: -8px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--superficie); background: var(--tinta); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.add-foto { width: 88px; height: 88px; border: 2px dashed var(--borda); border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; color: var(--tinta); font-size: 12px; font-weight: 700; text-align: center; background: var(--superficie); }
.add-foto:hover, .add-foto:focus-within { border-color: var(--tinta); }
.add-foto svg { width: 26px; height: 26px; }
.miniatura-tabela { position: relative; width: 40px; height: 40px; padding: 0; border: 1px solid var(--borda); border-radius: 6px; overflow: hidden; cursor: zoom-in; background: var(--cartao); }
.miniatura-tabela img { width: 100%; height: 100%; object-fit: cover; display: block; }
.miniatura-tabela span { position: absolute; right: 0; bottom: 0; background: var(--tinta); color: #fff; font-size: 10px; padding: 0 3px; border-radius: 4px 0 0 0; }
.visor-foto { position: fixed; inset: 0; z-index: 80; background: rgba(15, 22, 21, .92); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--esp-3); padding: var(--esp-4); padding-top: calc(var(--esp-4) + env(safe-area-inset-top, 0px)); }
.visor-foto img { max-width: 100%; max-height: calc(100% - 72px); object-fit: contain; border-radius: 8px; }
.visor-foto .botao { background: var(--superficie); }

/* desperdicio */
.contagem { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-2); }
.contagem li { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); padding: var(--esp-2) var(--esp-3); border: 1px solid var(--linha-tabela); border-radius: 12px; background: var(--superficie); }
.contagem .nome-emb { font-weight: 700; }
.contador { display: inline-flex; align-items: center; gap: var(--esp-3); }
.contador button { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--tinta); background: var(--superficie); font-size: 22px; font-weight: 700; cursor: pointer; line-height: 1; }
.contador button:last-child { background: var(--tinta); color: #fff; }
.contador button:disabled { opacity: .3; cursor: not-allowed; }
.contador b { min-width: 28px; text-align: center; font-size: 20px; font-variant-numeric: tabular-nums; }
.item-desp { display: flex; justify-content: space-between; gap: var(--esp-3); align-items: center; background: var(--superficie); border: 1px solid var(--linha-tabela); border-radius: 12px; padding: var(--esp-3); }
.item-desp .linhas { flex: 1; min-width: 0; }
.linha-desp { display: flex; align-items: center; gap: var(--esp-2); }
.linha-desp span { flex: 1; }
.linha-desp b { font-variant-numeric: tabular-nums; }
.linha-desp .botao-link { min-height: 32px; font-size: 12px; color: var(--tinta-suave); }
.item-desp small { display: block; color: var(--tinta-suave); font-size: 12px; margin-top: 2px; }
.miniatura.pequena { width: 52px; height: 52px; }
.barras { display: grid; gap: var(--esp-2); }
.barra-linha { display: grid; grid-template-columns: minmax(90px, 38%) 1fr auto; gap: var(--esp-2); align-items: center; font-size: 14px; }
.barra-linha .trilho { height: 14px; background: var(--cartao); border-radius: 999px; overflow: hidden; }
.barra-linha .trilho span { display: block; height: 100%; background: var(--laranja); border-radius: 999px; }
.barra-linha b { font-variant-numeric: tabular-nums; }
.custo-item { width: 110px; min-height: 36px; border: 1px solid var(--borda); border-radius: 8px; padding: 0 8px; text-align: right; background: var(--superficie); }
@media (max-width: 700px) { .abas button span { font-size: 11px; } }