/* =========================================================================
   plataforma-api — Design system
   ---------------------------------------------------------------------
   Fundo claro e neutro (creme/branco), amarelo da Taskr como único acento
   forte, tipografia Plus Jakarta Sans/Inter (mesma família já usada em
   ../plataforma-cliente). Estrutura pensada pra ser direta e humanizada:
   uma tarefa por tela, cantos bem arredondados, chips de status sempre com
   ícone+texto (nada comunicado só por cor), foco total em simplicidade e
   acessibilidade.
   ========================================================================= */

:root {
  /* Acento — cor de assinatura da Taskr, único acento forte da interface. */
  --acento: #ffd100;
  --acento-forte: #e6bc00;
  --acento-suave: rgba(255, 209, 0, 0.14);
  --acento-suave-2: rgba(255, 209, 0, 0.4);
  --acento-texto: #171200; /* texto escuro obrigatório sobre fundo amarelo (contraste) */

  /* Neutros — fundo escuro (pedido do Lincoln, cor exata que ele mandou);
     as superfícies dos cards continuam claras — contraste "cards claros
     flutuando sobre fundo escuro", texto interno dos cards não muda. */
  /* 01/09: pedido do Lincoln -- fundo cinza pra preto mesmo, pro banner do
     Início terminar com um fade que se funde nele (ver .pa-hero::after em
     dashboard.css). Era #151515. */
  --fundo: #000000;
  /* 01/09: altura do banner do Início (.pa-hero, dashboard.css) numa
     variável só, pra poder crescer/diminuir sem precisar recalcular à mão
     o quanto os 3 cards de KPI sobem por cima dele (.pa-kpis) — o Lincoln
     pediu explicitamente "à medida que aumente o banner, suba os cards
     junto, o banner tem que começar a acabar só quando estiver abaixo dos
     cards". `.pa-kpis` puxa pra cima numa fração FIXA desta altura
     (~28,6%, ver comentário em `.pa-kpis`), então mexendo só aqui as duas
     coisas crescem/encolhem juntas na mesma proporção — sem isso, cada vez
     que o banner mudasse de tamanho eu precisaria recalcular o
     margin-top negativo do zero. Ajustado por medição direta (Playwright:
     posição do topo/base dos cards vs. o início/fim do gradiente de fade)
     até os cards ficarem por cima da parte ainda nítida da foto, com o
     fade terminando de escurecer só depois de passar da base deles — nunca
     "usando" o fade todo antes mesmo dos cards aparecerem (bug visual do
     ajuste anterior, quando os cards apareciam já em cima de fundo quase
     todo preto). Repetido no mobile (media query 1024px) com o valor
     proporcional do banner lá. */
  --pa-hero-h: 525px;
  --superficie: #ffffff;
  --superficie-2: #f4f0e6;
  --borda: #ece6d8;
  --texto: #17160f;
  --texto-suave: #6b6a60;
  --texto-fraco: #9a9890;

  /* Estados — nunca comunicados só por cor (sempre com ícone/texto). Tons
     escolhidos pra funcionar como TEXTO sobre fundo claro (contraste). */
  --sucesso: #00a06a;
  --sucesso-fundo: #e2f6ee;
  --alerta: #b9790a;
  --alerta-fundo: #fdf1dd;
  --alerta-texto: #8a5c00;
  --erro: #d93b4a;
  --erro-fundo: #fce8ea;
  --info: #2e7fd1;
  --info-fundo: #e8f1fc;

  /* Tipografia — mesma família de ../plataforma-cliente. */
  --fonte-titulo: 'Plus Jakarta Sans', 'Inter', -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --fonte-corpo: 'Plus Jakarta Sans', 'Inter', -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Geometria — cantos bem arredondados (exceção deliberada ao "sem cantos
     arredondados" do manual estrito da Taskr, já usada também em
     ../plataforma-cliente). */
  --raio-xg: 28px;
  --raio-g: 20px;
  --raio-m: 14px;
  --raio-p: 10px;
  --raio-pill: 999px;

  /* Elevação — sombra suave e quente (não preto puro), discreta, nunca
     dramática, pra separar camadas sobre um fundo claro. */
  --sombra-1: 0 1px 2px rgba(23, 22, 15, 0.05), 0 2px 10px rgba(23, 22, 15, 0.05);
  --sombra-2: 0 10px 26px rgba(23, 22, 15, 0.1), 0 2px 6px rgba(23, 22, 15, 0.06);

  --duracao-rapida: 0.12s;
  --duracao-tela: 0.28s; /* pedido do Lincoln: fade mais perceptível entrando nos módulos */
}

* { box-sizing: border-box; }

html, body { margin: 0; background: var(--fundo); }

body {
  color: var(--texto);
  font-family: var(--fonte-corpo);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--fonte-titulo); }

button, input, select, textarea { font-family: inherit; }

button { -webkit-tap-highlight-color: transparent; }
button:not(:disabled) {
  transition: transform var(--duracao-rapida) ease, background var(--duracao-rapida) ease,
    border-color var(--duracao-rapida) ease, opacity var(--duracao-rapida) ease, box-shadow var(--duracao-rapida) ease;
}
button:not(:disabled):active { transform: scale(0.97); }

a { color: var(--acento); text-decoration: none; }

/* ---------------------------------------------------------------------
   Botões
   --------------------------------------------------------------------- */
.pa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding: 0 22px;
  border: none;
  border-radius: var(--raio-pill);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  width: auto;
}
.pa-btn.bloco { width: 100%; }
.pa-btn svg { width: 18px; height: 18px; }

.pa-btn.primario { background: var(--acento); color: var(--acento-texto); box-shadow: var(--sombra-2); }
.pa-btn.primario:hover { background: var(--acento-forte); }
.pa-btn.primario:disabled { background: var(--borda); color: var(--texto-fraco); box-shadow: none; cursor: not-allowed; }

.pa-btn.secundario { background: var(--superficie); color: var(--acento); border: 1.5px solid var(--acento-suave-2); }
.pa-btn.secundario:hover { background: var(--acento-suave); }

.pa-btn.fantasma { background: transparent; color: var(--texto-suave); border: 1.5px solid var(--borda); }
.pa-btn.fantasma:hover { border-color: var(--texto-fraco); color: var(--texto); }

.pa-btn.perigo { background: var(--erro-fundo); color: var(--erro); }
.pa-btn.perigo:hover { background: rgba(217, 59, 74, 0.16); }

/* Variante nova — mesmo padrão de pílula/gradiente do botão "Entrar" do
   login do CRM (referência visual que o Lincoln mandou), mas em
   acinzentado/preto em vez de amarelo. Pra usar num botão qualquer: classe
   `pa-btn escuro` (ex.: `<button class="pa-btn escuro">`). Não troca nada
   nos botões que já existem — é só uma opção nova disponível, ainda sem
   nenhum lugar específico de destino confirmado. */
.pa-btn.escuro {
  background: linear-gradient(135deg, #3a3a37 0%, #1b1a17 100%);
  color: #f5f2e8;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--sombra-1);
}
.pa-btn.escuro:hover { background: linear-gradient(135deg, #45443f 0%, #232220 100%); }
.pa-btn.escuro:disabled { background: var(--borda); color: var(--texto-fraco); box-shadow: none; cursor: not-allowed; }

/* ---------------------------------------------------------------------
   Cards / superfícies
   --------------------------------------------------------------------- */
.pa-card {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-1);
  padding: 20px;
}
.pa-card.clicavel { cursor: pointer; transition: box-shadow var(--duracao-rapida) ease, transform var(--duracao-rapida) ease; }
.pa-card.clicavel:hover { box-shadow: var(--sombra-2); transform: translateY(-1px); }

/* ---------------------------------------------------------------------
   Chip de status — nunca só cor: sempre tem um rótulo de texto junto.
   --------------------------------------------------------------------- */
.pa-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--raio-pill);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2px;
}
.pa-chip .bolinha { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
/* 01/09: pedido do Lincoln -- "botões continuam claros": os chips ainda
   usavam os tokens --*-fundo, feitos pra ficar em cima de superfície clara
   (--sucesso-fundo/--alerta-fundo/--erro-fundo são pastéis quase brancos).
   Dentro dos cards escuros (já convertidos pra #101010 nas rodadas
   anteriores) isso sobrava como uma pílula clara solta no meio do painel
   escuro. Troca pro mesmo padrão translúcido usado no resto da tela:
   fundo = a própria cor do status a ~18% de opacidade, texto = a cor cheia
   (--sucesso/--alerta/--erro), sem tocar nos tokens globais (que continuam
   servindo outras telas claras, ex. Entrega). */
.pa-chip.trabalhando { background: rgba(0, 160, 106, 0.18); color: var(--sucesso); }
.pa-chip.trabalhando .bolinha { background: var(--sucesso); animation: pa-pulso 1.7s ease-out infinite; }
/* 26/08: pedido do Lincoln -- robo "disponivel" esta CONECTADO e pronto pra
   trabalhar, mas antes aparecia cinza (igual "offline", so texto um pouco
   mais escuro) -- dava pra confundir os dois. Agora fica verde pulsante,
   igual "trabalhando", so muda o rotulo. */
.pa-chip.disponivel { background: rgba(0, 160, 106, 0.18); color: var(--sucesso); }
.pa-chip.disponivel .bolinha { background: var(--sucesso); animation: pa-pulso 1.7s ease-out infinite; }
/* --alerta-texto era um marrom escuro pensado pra texto sobre fundo pastel
   claro -- em cima do novo fundo escuro translúcido ficava ilegível (mesmo
   problema já visto e corrigido no .pa-kpi-status.amber). Troca pra
   --alerta (a cor âmbar cheia), igual os outros dois variants. */
.pa-chip.carregando { background: rgba(185, 121, 10, 0.18); color: var(--alerta); }
.pa-chip.carregando .bolinha { background: var(--alerta); animation: pa-pulso 1.7s ease-out infinite; }
/* 26/08: pedido do Lincoln -- "sem conexao" agora fica vermelho pulsante em
   vez de cinza (que parecia igual ao "disponivel" antigo). */
.pa-chip.offline { background: rgba(217, 59, 74, 0.18); color: var(--erro); }
.pa-chip.offline .bolinha { background: var(--erro); animation: pa-pulso-vermelho 1.7s ease-out infinite; }
.pa-chip.indisponivel { background: rgba(217, 59, 74, 0.18); color: var(--erro); }
.pa-chip.indisponivel .bolinha { background: var(--erro); }
@keyframes pa-pulso {
  0% { box-shadow: 0 0 0 0 rgba(0, 160, 106, 0.3); }
  70% { box-shadow: 0 0 0 6px rgba(0, 160, 106, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 160, 106, 0); }
}

/* 26/08: pedido do Lincoln -- "indicador verde pulsante ao houver conexao e
   um vermelho ao nao haver". Mesmo efeito de anel do pa-pulso (verde), so
   que na cor de erro, pra usar no chip "offline" (sem conexao). */
@keyframes pa-pulso-vermelho {
  0% { box-shadow: 0 0 0 0 rgba(217, 59, 74, 0.35); }
  70% { box-shadow: 0 0 0 6px rgba(217, 59, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(217, 59, 74, 0); }
}

/* ---------------------------------------------------------------------
   Barra de bateria — sempre com o número ao lado, nunca só a barra.
   --------------------------------------------------------------------- */
.pa-bateria { display: flex; align-items: center; gap: 8px; }
.pa-bateria-trilho {
  flex: 1;
  height: 8px;
  border-radius: var(--raio-pill);
  background: var(--borda);
  overflow: hidden;
}
.pa-bateria-nivel { height: 100%; border-radius: var(--raio-pill); background: var(--sucesso); transition: width 0.3s ease; }
.pa-bateria-nivel.baixa { background: var(--erro); }
.pa-bateria-nivel.media { background: var(--alerta); }
.pa-bateria-numero { font-size: 12.5px; font-weight: 800; color: var(--texto-suave); min-width: 34px; text-align: right; }

/* ---------------------------------------------------------------------
   Campos de formulário
   --------------------------------------------------------------------- */
.pa-campo { margin-bottom: 16px; }
.pa-campo label { display: block; font-size: 13px; color: var(--texto-suave); margin-bottom: 8px; font-weight: 700; }
.pa-input, .pa-select {
  width: 100%;
  height: 50px;
  padding: 0 16px;
  border-radius: var(--raio-m);
  border: 1.5px solid var(--borda);
  background: var(--superficie-2);
  color: var(--texto);
  font-size: 15px;
  font-family: inherit;
}
.pa-input:focus, .pa-select:focus { outline: none; border-color: var(--acento); background: var(--superficie); }
.pa-input::placeholder { color: var(--texto-fraco); }

/* ---------------------------------------------------------------------
   Mensagens de estado
   --------------------------------------------------------------------- */
.pa-mensagem {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-radius: var(--raio-m);
  padding: 14px 16px;
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: 18px;
}
.pa-mensagem svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }
.pa-mensagem.erro { background: var(--erro-fundo); color: var(--erro); }
.pa-mensagem.sucesso { background: var(--sucesso-fundo); color: var(--sucesso); }
.pa-mensagem.aviso { background: var(--alerta-fundo); color: var(--alerta-texto); }

/* ---------------------------------------------------------------------
   Skeleton / spinner
   --------------------------------------------------------------------- */
.pa-skeleton {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--superficie-2) 38%, rgba(255, 255, 255, 0.85) 50%, var(--superficie-2) 62%);
  background-size: 220% 100%;
  animation: pa-brilho 1.3s ease-in-out infinite;
}
@keyframes pa-brilho { 0% { background-position: 120% 0; } 100% { background-position: -20% 0; } }
.pa-spinner {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2.5px solid rgba(23, 22, 15, 0.14);
  border-top-color: var(--acento);
  animation: pa-girar 0.7s linear infinite;
  flex: 0 0 auto;
}
/* Spinner usado DENTRO de um botão primário (fundo amarelo) — precisa de
   tom escuro, não claro, pra manter o contraste do texto sobre o amarelo. */
.pa-spinner.no-botao-primario { border-color: rgba(23, 18, 0, 0.35); border-top-color: var(--acento-texto); }
/* 28/08: spinner pro botão "Iniciar entrega" depois de virar `.pa-btn
   escuro` (cor mais neutra, pedido do Lincoln) — precisa do MESMO
   raciocínio do variant acima, só invertido: fundo agora é escuro, então o
   spinner precisa de tom CLARO (senão fica quase invisível, igual o
   .pa-spinner padrão ficaria invisível num botão amarelo). */
.pa-spinner.no-botao-escuro { border-color: rgba(255, 255, 255, 0.22); border-top-color: #f5f2e8; }
@keyframes pa-girar { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }