/* ============================================================
   RECIBOS — camada mobile sobre o design system Modernist.
   Carrega DEPOIS de styles.css: reusa os tokens (:root) e as
   classes de componente de lá, e só acrescenta o que a tela de
   campo precisa. Não redefina cor/fonte/espaço aqui — use as
   variáveis. Tudo aqui é prefixado "rb-" para nunca colidir
   com as classes do Controle de Prestadores.

   Mobile primeiro: quem usa isso está no pátio, de pé, com
   uma mão, contra o sol. Alvos grandes, contraste alto,
   ação principal fixa no rodapé.
   ============================================================ */

/* — topo — */
.rb-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); padding-top: calc(var(--space-3) + env(safe-area-inset-top));
  background: var(--color-neutral-900); color: var(--color-bg); }
.rb-top .nav-brand { color: var(--color-bg); }
.rb-spacer { flex: 1; }
.rb-top .small-note { color: color-mix(in srgb, #f3f2f2 70%, transparent); }
.rb-logout { cursor: pointer; font-size: 12px; text-decoration: underline; text-underline-offset: 3px;
  color: color-mix(in srgb, #f3f2f2 75%, transparent); }
.rb-logout:hover { color: var(--color-bg); }
.rb-fila { cursor: pointer; }

/* — corpo: espaço no rodapé para a barra de abas e o botão fixo — */
.rb-main { max-width: 760px; margin: 0 auto; padding: 0 var(--space-4);
  padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
.rb-main .panel { padding-top: var(--space-4); }
.rb-main h1 { font-size: 28px; }
.rb-sub { font-size: 13px; margin: 2px 0 0; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.rb-hint { font-size: 12.5px; color: color-mix(in srgb, var(--color-text) 60%, transparent); margin: 0 0 var(--space-3); }
.rb-req { font-weight: 400; color: color-mix(in srgb, var(--color-text) 45%, transparent); }

/* — dois campos lado a lado. Dimensiona o .field, nunca o input:
     .field é flex-column, então flex-basis num input vira ALTURA. — */
.rb-grid { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.rb-grid > .field { flex: 1 1 140px; min-width: 130px; }

/* — o número do recibo é o campo mais importante da tela —

   ATENÇÃO ao seletor: styles.css estiliza "input[type=text]", que tem
   especificidade (0,0,1,1) e portanto GANHA de uma classe sozinha
   (0,0,1,0) mesmo este arquivo carregando depois. Por isso aqui vai
   "input.rb-num" e não ".rb-num" — sem isso o número renderiza com os
   14px do input comum e o campo mais importante da tela vira o menor.
   Mesma armadilha vale para qualquer input novo que precise de fonte
   ou tamanho próprio. */
.rb-field-num > label { font-size: 13px; font-weight: 600; }
input.rb-num { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 30px; letter-spacing: 0.09em; text-align: center; padding: var(--space-3); min-height: 56px; }
.rb-upper, input.rb-upper { text-transform: uppercase; }
.rb-mono, input.rb-mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; }

/* — resposta imediata ao digitar o número — */
.rb-feedback { font-size: 13px; line-height: 1.4; padding: var(--space-3);
  border-left: 4px solid var(--color-neutral-500); background: var(--color-neutral-100); margin-bottom: var(--space-2); }
.rb-feedback.is-ok    { border-left-color: #1f7a4d; background: color-mix(in srgb, #1f7a4d 8%, var(--color-bg)); }
.rb-feedback.is-warn  { border-left-color: var(--color-accent-500); background: var(--color-accent-100); }
.rb-feedback.is-erro  { border-left-color: var(--color-accent-700); background: var(--color-accent-200); font-weight: 600; }

.rb-erro { font-size: 13px; font-weight: 600; color: var(--color-accent-700); margin: var(--space-2) 0 0; }

/* — foto — */
.rb-preview { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.rb-preview img { max-width: 100%; max-height: 260px; border: 2px solid var(--color-divider); display: block; }

/* — ação principal fixa no rodapé, acima das abas — */
.rb-sticky { position: fixed; left: 0; right: 0; z-index: 15;
  bottom: calc(62px + env(safe-area-inset-bottom));
  padding: var(--space-3) var(--space-4);
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  border-top: 2px solid var(--color-divider); backdrop-filter: blur(6px); }
.rb-sticky > .rb-save { max-width: 728px; margin: 0 auto; }
.rb-save { font-size: 15px; padding: var(--space-3) var(--space-4); }

/* — linha de copiar (input + botão) — */
.rb-copy-row { display: flex; gap: var(--space-2); align-items: stretch; }
.rb-copy-row > .input { flex: 1 1 auto; min-width: 0; }
.rb-btn-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.rb-textarea { font-size: 13px; line-height: 1.5; resize: vertical; }

/* — abas fixas no rodapé (padrão de app, não de site) — */
.rb-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 18; display: flex;
  background: var(--color-neutral-900); padding-bottom: env(safe-area-inset-bottom); }
.rb-tab { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: var(--space-2) 0 calc(var(--space-2) + 2px); cursor: pointer;
  background: transparent; border: 0; border-top: 3px solid transparent;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 10.5px;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: color-mix(in srgb, #f3f2f2 60%, transparent); }
.rb-tab svg { width: 20px; height: 20px; }
.rb-tab.active { color: var(--color-bg); border-top-color: var(--color-accent); }
.rb-dot { position: absolute; top: 6px; right: 50%; margin-right: -22px;
  width: 8px; height: 8px; background: var(--color-accent); }

/* Destaque do passo de confirmação, aceso quando o WhatsApp é aberto:
   sinaliza que falta um clique sem marcar nada sozinho. */
.rb-destaque { color: var(--color-accent-800); background: var(--color-accent-100);
  border-left: 4px solid var(--color-accent); padding: var(--space-2) var(--space-3); }

/* — chips de situação na lista — */
.rb-chip { display: inline-block; font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  padding: 2px 6px; white-space: nowrap; }
.rb-chip-ok   { background: color-mix(in srgb, #1f7a4d 16%, transparent); color: #14512f; }
.rb-chip-open { background: var(--color-accent-200); color: var(--color-accent-800); }
.rb-acao { cursor: pointer; font-size: 12px; text-decoration: underline; text-underline-offset: 3px;
  color: var(--color-accent); background: none; border: 0; padding: 0; font-family: var(--font-body); }

/* — telas grandes: abas voltam para o topo e some o rodapé fixo — */
@media (min-width: 800px) {
  .rb-main { padding-bottom: var(--space-8); }
  .rb-tabs { position: sticky; top: 0; bottom: auto; }
  .rb-sticky { position: static; padding: var(--space-4) 0 0; background: none;
    border-top: 0; backdrop-filter: none; }
  .rb-sticky > .rb-save { max-width: 320px; margin: 0; }
  input.rb-num { font-size: 34px; }
}

/* — ficha do pagador, embaixo do campo de transportadora — */
/* Preenchida uma vez por cliente. Fica no fluxo do recibo, e não numa
   tela separada, porque é aqui que alguém descobre que ela falta. */
.rb-ficha { border: 2px solid var(--color-divider); padding: var(--space-3);
  margin-bottom: var(--space-4); background: var(--color-neutral-100); }
.rb-ficha-head { display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-2); margin-bottom: var(--space-2); }
.rb-ficha-head strong { font-family: var(--font-heading); font-size: 14px; line-height: 1.3; }
.rb-ficha-resumo { font-size: 12.5px; margin: 0 0 var(--space-2);
  color: color-mix(in srgb, var(--color-text) 65%, transparent); }
.rb-ficha-resumo.rb-ficha-falta { color: var(--color-accent-700); font-weight: 600; }

/* — para onde a cobrança vai, dito antes do clique — */
.rb-destino { font-size: 13px; padding: var(--space-3); margin-bottom: var(--space-3);
  border-left: 4px solid #1f7a4d; background: color-mix(in srgb, #1f7a4d 8%, var(--color-bg)); }
.rb-destino.rb-destino-alerta { border-left-color: var(--color-accent-700);
  background: var(--color-accent-200); font-weight: 600; }

.btn-sm { padding: 4px 10px; font-size: 12px; }

/* — numero gerado pelo sistema, so leitura — */
/* Tem o mesmo peso visual do antigo campo digitavel: continua sendo a
   primeira coisa que o supervisor procura na tela. */
.rb-num-auto { font-family: var(--font-heading); font-size: 26px; letter-spacing: 1px;
  padding: var(--space-3); border: 2px solid var(--color-divider);
  background: var(--color-neutral-100); color: var(--color-text); }

/* — lancamento retroativo, recolhido — */
/* Fica fechado porque e excecao: serve ao mutirao dos recibos antigos de
   papel e nao ao dia a dia. Aberto, convidaria a digitar numero em recibo
   novo, que e justamente o que a numeracao automatica veio tirar. */
.rb-retro { margin-bottom: var(--space-4); border: 1px dashed var(--color-divider); padding: var(--space-3); }
.rb-retro > summary { cursor: pointer; font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 65%, transparent); }
.rb-retro[open] > summary { margin-bottom: var(--space-3); font-weight: 600; }