/* Base compartilhada dos portais (empresa/entregador) — mesma paleta do admin */
/* Paleta Araujo Express: base NEUTRA escura + verde só como destaque.
   (Verde em tudo — fundo, bordas, texto — poluía; agora ele marca só o que
   é ação/marca.) Os NOMES das variáveis foram mantidos: --blue = cor da marca. */
:root {
  color-scheme: dark;
  --surface-0: #0a0b0b;
  --surface-1: #141616;
  --surface-2: #1b1e1e;
  --surface-3: #262a2a;
  --border: rgba(255,255,255,0.12);
  --text-primary: #f2f4f3;
  --text-secondary: #c2c6c4;
  --text-muted: #8a908d;
  --blue: #22c55e;
  --azul: #3b82f6;  /* azul de verdade — usado no "A caminho" (verde = concluído) */
  --aqua: #0d9488;
  --yellow: #c9a227;
  --violet: #7c8aa0;
  --magenta: #b06a8f;
  --orange: #cf7a3a;
  --status-good: #22c55e;
  --status-warning: #eab308;
  --status-critical: #ef4444;
  --radius-lg: 14px;
  --radius-md: 10px;
  --radius-sm: 7px;
  --shadow-card: 0 2px 4px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.25);
}
:root[data-theme="light"] {
  color-scheme: light;
  --surface-0: #f5f6f5;
  --surface-1: #ffffff;
  --surface-2: #eff1f0;
  --surface-3: #e4e7e5;
  --border: rgba(11,11,11,0.13);
  --text-primary: #0d0f0e;
  --text-secondary: #4f5451;
  --text-muted: #787d7a;
  --blue: #15803d;
  --azul: #1d4ed8;
  --aqua: #0f766e;
  --yellow: #96650a;
  --violet: #5b6b80;
  --magenta: #97517a;
  --orange: #b45f22;
  --status-good: #15803d;
  --status-warning: #96650a;
  --status-critical: #c53434;
  --shadow-card: 0 2px 5px rgba(11,11,11,.10), 0 1px 2px rgba(11,11,11,.06);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--surface-0); color: var(--text-primary); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
::selection { background: var(--blue); color: white; }
button, input, select, textarea { font-family: inherit; }

.card { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; box-shadow: var(--shadow-card); }
.btn { min-height: 44px; padding: 10px 16px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--blue); border: none; border-radius: var(--radius-sm); color: white; font-weight: 600; cursor: pointer; font-size: 0.9rem; text-decoration: none; touch-action: manipulation; transition: filter .15s, background .15s; }
.btn:hover { filter: brightness(1.08); }
.btn.secondary { background: var(--surface-2); color: var(--text-primary); border: 1px solid var(--border); }
.btn.secondary:hover { filter: none; background: var(--surface-3); }
/* Toque e foco: manipulation evita o atraso de toque duplo; foco visível pra
   navegação por teclado/leitor de tela; sem o flash azul padrão no toque. */
button, a, [role="button"], summary { touch-action: manipulation; }
button, a, input, select, textarea, [role="button"], summary { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.btn.danger { background: transparent; color: var(--status-critical); border: 1px solid color-mix(in srgb, var(--status-critical) 40%, transparent); }
.btn.small { padding: 6px 11px; font-size: 0.8rem; }
.btn:disabled { opacity: 0.5; cursor: default; }

.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field label { font-size: 0.74rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
/* width:100% + min-width:0 impedem o input de manter a largura padrão (~size=20)
   e forçar a página a ficar mais larga que a tela num grid de 2 colunas. */
.field input, .field select, .field textarea { width: 100%; min-width: 0; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 0.92rem; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; }

.pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; white-space: nowrap; }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.ok { background: color-mix(in srgb, var(--status-good) 16%, transparent); color: var(--status-good); }
.pill.pendente { background: color-mix(in srgb, var(--status-warning) 16%, transparent); color: var(--status-warning); }
.pill.info { background: color-mix(in srgb, var(--blue) 16%, transparent); color: var(--blue); }
.pill.alerta { background: color-mix(in srgb, var(--status-critical) 16%, transparent); color: var(--status-critical); }
.pill.neutro { background: var(--surface-2); color: var(--text-muted); }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 0.86rem; }
th { color: var(--text-muted); font-weight: 600; text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.04em; background: var(--surface-2); }
tbody tr:last-child td { border-bottom: none; }
td.num { font-variant-numeric: tabular-nums; }
.table-card { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.table-scroll { overflow-x: auto; }

/* No celular, tabelas .responsive-table viram cartões empilhados (cada célula
   numa linha com o rótulo à esquerda) — bem mais fácil de ler que rolar pro lado. */
@media (max-width: 560px) {
  table.responsive-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  /* width:auto nas linhas: com width:100% + margin elas ficavam mais largas que
     o card e "vazavam" pra fora (visual desalinhado). Como blocos, elas já
     ocupam o espaço disponível menos a margem. */
  table.responsive-table, table.responsive-table tbody, table.responsive-table tr, table.responsive-table td { display: block; width: auto; }
  table.responsive-table { width: 100%; }
  table.responsive-table tr { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); padding: 2px 14px; margin: 10px; }
  table.responsive-table tr + tr { margin-top: 0; }
  table.responsive-table td { border: none; padding: 9px 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; text-align: right; min-height: 38px; }
  table.responsive-table td:not(:last-child) { border-bottom: 1px solid var(--border); }
  table.responsive-table td::before { content: attr(data-label); color: var(--text-muted); font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; text-align: left; flex-shrink: 0; }
  table.responsive-table td.vazio-mobile { display: block; text-align: center; min-height: 0; }
  table.responsive-table td.vazio-mobile::before { content: none; }
  /* o card externo não precisa rolar quando a tabela já virou cartão */
  .table-card > .table-scroll { overflow-x: visible; }
}

/* ===== Celular: alvo de toque e legibilidade =====
   Medido em 14/ago/2026 nos dois portais dentro de um iframe de 360px. O que
   sobrava pequeno: caixas de marcar com 18px, alguns links com 38px e trechos
   de texto abaixo de 11px. Aqui fica o piso — cada portal ajusta o resto. */
@media (max-width: 780px) {
  .btn, .btn.small { min-height: 44px; }
  /* caixinha/bolinha de 18px não se acerta com o dedo na rua */
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; flex-shrink: 0; }
  .field input, .field select, .field textarea { min-height: 44px; }
  .icon-btn { min-width: 44px; min-height: 44px; }
  /* link que age como botão (ex.: "Abrir no Maps", WhatsApp) */
  a.btn { min-height: 44px; }
}
@media (max-width: 560px) {
  table.responsive-table td::before { font-size: 0.74rem; }
  .empty-state { font-size: 0.88rem; }
}

.empty-state { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 34px 16px; color: var(--text-muted); text-align: center; font-size: 0.86rem; }

/* Aviso grande e opaco: o anterior era pequeno, semitransparente e sumia em 5s —
   no celular, na rua, passava despercebido. Agora tem borda grossa, sombra forte
   e entra com um pulo curto pra puxar o olho. */
#toast { position: fixed; bottom: 18px; right: 14px; left: 14px; max-width: 460px; margin-left: auto; background: var(--surface-3); border: 2px solid var(--border); border-left-width: 7px; border-radius: var(--radius-md); padding: 15px 18px; font-size: 1rem; font-weight: 600; line-height: 1.45; color: var(--text-primary); box-shadow: 0 10px 34px rgba(0,0,0,.55); z-index: 90; opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .18s, transform .18s; pointer-events: none; }
#toast.show { opacity: 1; transform: none; animation: toast-pulo .32s ease-out; }
@keyframes toast-pulo { 0% { transform: translateY(14px) scale(.98); } 60% { transform: translateY(-3px) scale(1.015); } 100% { transform: none; } }
/* Verde = concluído · Vermelho = problema (barra lateral + fundo suave) */
#toast.t-ok { border-color: var(--status-good); border-left: 7px solid var(--status-good); background: color-mix(in srgb, var(--status-good) 26%, var(--surface-3)); }
#toast.t-erro { border-color: var(--status-critical); border-left: 7px solid var(--status-critical); background: color-mix(in srgb, var(--status-critical) 26%, var(--surface-3)); }

.skel { color: transparent !important; border-radius: 6px; background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: skel 1.1s infinite linear; min-width: 64px; }
@keyframes skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes fadein { from { opacity: 0; transform: translateY(3px);} to { opacity: 1; transform: none; } }

/* Respeita "reduzir animações" do sistema (acessibilidade). */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}