:root {
  --ink: #14202B;
  --ink-2: #22303D;
  --linha-escura: #3A4856;
  --fundo: #EEF1F4;
  --card: #FFFFFF;
  --texto-2: #4F5D6B;
  --texto-claro: #B8C2CC;
  --linha: #E3E7EB;
  --ambar: #E8A317;
  --ambar-fundo: #FFF4D6;
  --ambar-texto: #5C3D00;
  --ambar-forte: #8A5A00;
  --verde: #17633E;
  --vermelho: #A3361F;
  --tit: 'Barlow Condensed', sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--fundo); color: var(--ink); font-family: 'Barlow', system-ui, sans-serif; font-size: 16px; }
body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
main { max-width: 560px; margin: 0 auto; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; }

.topo { background: var(--ink); color: #fff; padding: 24px 20px; display: flex; flex-direction: column; gap: 14px; }
.topo .sobre { font-size: 13px; color: var(--texto-claro); letter-spacing: .04em; text-transform: uppercase; }
.topo h1 { font-family: var(--tit); font-size: 30px; font-weight: 700; }
.topo .grande { font-family: var(--tit); font-size: 42px; font-weight: 700; line-height: 1; }
.topo .grande.ambar { color: var(--ambar); }
.topo .claro { font-size: 14px; color: var(--texto-claro); }
.linha-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.navega { display: flex; gap: 8px; }
.btn-redondo { width: 44px; height: 44px; border-radius: 22px; border: 1px solid var(--linha-escura); background: transparent; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.btn-redondo svg { width: 20px; height: 20px; }
.duas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.caixa-escura { background: var(--ink-2); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.caixa-escura .v { font-family: var(--tit); font-size: clamp(18px, 5.6vw, 24px); font-weight: 700; white-space: nowrap; }

.conteudo { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.card { background: var(--card); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.card h2 { font-size: 17px; font-weight: 700; }
.card h3 { font-size: 15px; font-weight: 700; margin-top: 6px; }
.cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pequeno { font-size: 13px; color: var(--texto-2); }
.item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linha); }
.item:last-of-type { border-bottom: 0; }
.item .t { font-size: 15px; font-weight: 600; }
.item .col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.valor { font-size: 15px; font-weight: 600; white-space: nowrap; }
.linha-valor { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.linha-valor.cinza { color: var(--texto-2); }
.sep { height: 1px; background: var(--linha); margin: 4px 0; }
.total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.total b { font-size: 16px; }
.total .n { font-family: var(--tit); font-size: 28px; font-weight: 700; white-space: nowrap; }
.verde { color: var(--verde); }
.vermelho { color: var(--vermelho); }
.ambar-t { color: var(--ambar-forte); font-weight: 600; }

.alerta { background: var(--ambar-fundo); border: 1px solid var(--ambar); border-radius: 12px; padding: 12px 14px; color: var(--ambar-texto); display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.alerta b { font-size: 15px; }
.alerta, .pequeno, .item .t { overflow-wrap: anywhere; }

.barra { height: 8px; border-radius: 4px; background: var(--linha); overflow: hidden; }
.barra > div { height: 100%; background: var(--ink); }
.barra.ambar > div { background: var(--ambar); }
.barra.verde > div { background: var(--verde); }

.seletor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; background: var(--ink-2); padding: 4px; border-radius: 12px; }
.seletor button { height: 44px; border: 0; border-radius: 9px; background: transparent; color: #fff; font-weight: 600; cursor: pointer; }
.seletor button[aria-pressed="true"] { background: var(--ambar); color: var(--ink); font-weight: 700; }

.etapa { display: flex; gap: 12px; align-items: flex-start; min-height: 46px; }
.bola { width: 28px; height: 28px; border-radius: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; border: 2px solid #9AA6B2; background: #fff; }
.etapa.feito .bola { background: var(--verde); border-color: var(--verde); color: #fff; }
.etapa.atual .bola { background: var(--ambar); border-color: var(--ambar); box-shadow: 0 0 0 4px var(--ambar-fundo); }
.etapa .col { display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
.etapa .t { font-size: 15px; font-weight: 600; }
.etapa.atual .t { font-weight: 700; }
.etapa.depois .t { color: var(--texto-2); }

.btn { min-height: 52px; border-radius: 12px; border: 0; background: var(--ink); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; padding: 0 16px; }
.btn.ambar { background: var(--ambar); color: var(--ink); }
.btn.contorno { background: transparent; border: 2px solid var(--ink); color: var(--ink); }
.btn.tracejado { background: transparent; border: 2px dashed #9AA6B2; color: var(--ink); min-height: 48px; font-size: 15px; font-weight: 600; }
.btn-texto { min-height: 44px; padding: 0 10px; border: 0; background: transparent; font-size: 14px; font-weight: 700; cursor: pointer; color: var(--ink); text-decoration: underline; }
.btn-texto.vermelho { color: var(--vermelho); }
.empilha { display: flex; flex-direction: column; gap: 10px; }

.dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.dia { min-height: 58px; padding: 0; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; cursor: pointer; background: #fff; color: var(--texto-2); border: 1px dashed #9AA6B2; }
.dia[aria-pressed="true"] { background: var(--ink); color: #fff; border: 1px solid var(--ink); }
.dia .s { font-size: 11px; }
.dia .n { font-size: 16px; font-weight: 700; }

.evento { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linha); font-size: 15px; }
.evento:last-of-type { border-bottom: 0; }
.evento .d { font-size: 13px; font-weight: 700; }

.abas { position: fixed; left: 0; right: 0; bottom: 0; background: #fff; border-top: 1px solid #D6DCE2; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 8px 4px calc(10px + env(safe-area-inset-bottom)); z-index: 5; }
.aba { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 48px; justify-content: center; border: 0; background: transparent; font-size: 12px; color: var(--texto-2); cursor: pointer; }
.aba svg, .abas svg { width: 22px; height: 22px; }
.aba[aria-current="page"] { color: var(--ink); font-weight: 700; }
svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Formulários */
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-size: 14px; font-weight: 600; }
.campo input, .campo select { min-height: 48px; border: 1px solid #9AA6B2; border-radius: 10px; padding: 0 12px; background: #fff; }
.campo input:focus, .campo select:focus { outline: 3px solid var(--ambar); outline-offset: 1px; }
dialog { border: 0; border-radius: 18px; padding: 0; width: min(440px, calc(100% - 32px)); }
dialog::backdrop { background: rgba(20, 32, 43, .55); }
#modal-form { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
#modal-form h2 { font-size: 20px; }
.botoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

.login { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 24px; gap: 18px; }
.login .marca { font-family: var(--tit); font-size: 40px; font-weight: 700; }
.erro { color: var(--vermelho); font-weight: 600; font-size: 14px; }

.aviso { position: fixed; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 12px; font-size: 15px; z-index: 10; max-width: calc(100% - 32px); }
.vazio { color: var(--texto-2); font-size: 15px; padding: 6px 0; }

/* Seletor de caminhão no topo escuro */
.seletor-cam label { color: var(--texto-claro); font-size: 13px; font-weight: 600; }
.seletor-cam select { background: var(--ink-2); color: #fff; border-color: var(--linha-escura); font-weight: 600; }
.seletor-cam select:focus { outline: 3px solid var(--ambar); }

/* Linha clicável (caminhão, pessoa, MEI) */
.linha-cam { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid var(--linha); background: transparent; text-align: left; cursor: pointer; min-height: 56px; }
.linha-cam:last-of-type { border-bottom: 0; }
.linha-cam .col { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.linha-cam .t { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.linha-cam svg { width: 20px; height: 20px; color: var(--texto-2); flex-shrink: 0; }
.linha-cam:focus-visible { outline: 3px solid var(--ambar); outline-offset: 2px; border-radius: 8px; }

.etiqueta { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--linha); color: var(--ink); white-space: nowrap; }
.etiqueta.ambar { background: var(--ambar-fundo); color: var(--ambar-texto); border: 1px solid var(--ambar); }
.etiqueta.verde { background: #DDF0E5; color: #0F4A2D; }
.etiqueta.azul { background: #DCE8F5; color: #163B63; }

/* Conversa (mural de mensagens) */
.msg { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 4px 0; }
.msg.minha { align-items: flex-end; }
.msg .balao { max-width: 85%; background: var(--linha); border-radius: 14px; padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; }
.msg.minha .balao { background: var(--ambar-fundo); color: var(--ambar-texto); }
.msg .autor { font-size: 12px; font-weight: 700; color: var(--texto-2); }
.msg .txt { font-size: 15px; overflow-wrap: anywhere; }
.msg .apagar { padding: 2px 6px; min-height: 28px; font-size: 12px; }

/* Check-list de revisão: três botões de status por item */
.etiqueta.vermelha { background: #F7DDD6; color: #8A2B17; border: 1px solid var(--vermelho); }
.tri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.tri button { min-height: 42px; border: 1px solid var(--linha); border-radius: 10px; background: var(--card); color: var(--texto-2); font-weight: 700; cursor: pointer; }
.tri button[aria-pressed="true"][data-s="ok"] { background: #DDF0E5; color: #0F4A2D; border-color: var(--verde); }
.tri button[aria-pressed="true"][data-s="trocar"] { background: #F7DDD6; color: #8A2B17; border-color: var(--vermelho); }
/* Selo de alertas novos (na aba Tarefas do administrador) */
.aba { position: relative; }
.selo { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--vermelho); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.cab > .col { display: flex; flex-direction: column; gap: 2px; }
.tri.duas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tri button[aria-pressed="true"][data-s="problema"] { background: #F7DDD6; color: #8A2B17; border-color: var(--vermelho); }
.tri button[aria-pressed="true"][data-s="na"] { background: var(--linha); color: var(--texto, var(--ink)); }

.bloco { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--linha); }
.bloco:last-of-type { border-bottom: 0; }
.bloco .t { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.acoes { display: flex; flex-wrap: wrap; gap: 4px; }
.com-icone { display: flex; align-items: center; justify-content: center; gap: 10px; }
.numero-grande { font-family: var(--tit); font-size: 22px; font-weight: 700; white-space: nowrap; }

/* Faixa quando o administrador está dentro da conta de outro usuário */
.faixa { position: sticky; top: 0; z-index: 8; background: var(--ambar); color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 16px; font-size: 14px; }
.faixa button { min-height: 40px; padding: 0 14px; border-radius: 10px; border: 2px solid var(--ink); background: var(--ink); color: #fff; font-weight: 700; cursor: pointer; }
.aba { font-size: 11px; }
/* App instalado no iPhone: não deixa o conteúdo ficar embaixo do relógio */
@media (display-mode: standalone) { .topo { padding-top: calc(24px + env(safe-area-inset-top)); } .faixa { padding-top: calc(8px + env(safe-area-inset-top)); } }

/* ============================================================
   Refinos visuais — Incremento 1 (profundidade e interação)
   Tudo aditivo: nenhuma classe ou layout foi alterado.
   ============================================================ */
:root {
  --sombra-card: 0 1px 2px rgba(20, 32, 43, .05), 0 2px 10px rgba(20, 32, 43, .06);
  --sombra-flutua: 0 10px 30px rgba(20, 32, 43, .18);
  --transicao: 160ms ease;
}

/* Profundidade: cartões, alertas, barra de abas e janelas ganham elevação */
.card { box-shadow: var(--sombra-card); }
.alerta { box-shadow: var(--sombra-card); }
.abas { box-shadow: 0 -1px 14px rgba(20, 32, 43, .08); }
dialog { box-shadow: var(--sombra-flutua); }

/* Topo com leve profundidade (gradiente sutil no mesmo tom escuro) */
.topo { background: linear-gradient(165deg, var(--ink-2), var(--ink)); }

/* Transições suaves nos elementos interativos */
.btn, .btn-redondo, .btn-texto, .aba, .seletor button, .dia, .linha-cam {
  transition: background var(--transicao), color var(--transicao),
    border-color var(--transicao), transform var(--transicao), box-shadow var(--transicao), filter var(--transicao);
}

/* Feedback de toque: o elemento "afunda" levemente ao ser pressionado */
.btn:active, .btn-redondo:active, .seletor button:active, .dia:active, .linha-cam:active { transform: scale(.98); }
.btn-texto:active { opacity: .6; }

/* Realce leve ao passar o mouse (no celular não há hover; não atrapalha) */
@media (hover: hover) {
  .btn:hover { filter: brightness(.96); }
  .btn.contorno:hover { background: rgba(20, 32, 43, .05); filter: none; }
  .btn-redondo:hover { background: rgba(255, 255, 255, .10); }
  .linha-cam:hover { background: rgba(20, 32, 43, .03); }
}

/* Animações de entrada discretas */
@keyframes surge { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
dialog[open] { animation: surge 180ms ease; }
dialog[open]::backdrop { animation: fade 180ms ease; }
.aviso { animation: surge 200ms ease; box-shadow: var(--sombra-flutua); }

/* Foco visível e consistente em tudo que recebe teclado */
:where(button, a, select, input, [tabindex]):focus-visible {
  outline: 3px solid var(--ambar);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Respeita quem prefere menos movimento (acessibilidade) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  /* o spinner precisa girar para indicar carregamento em andamento */
  .giro { animation-duration: .8s !important; }
}

/* ============================================================
   Modo escuro — Incremento 2 (prefers-color-scheme: dark)
   Acompanha o tema do aparelho. O topo continua escuro nos dois
   modos (identidade da marca). --ink permanece como "superfície
   escura"; o texto usa a nova variável --texto.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --fundo: #0E151C;          /* fundo da página */
    --card: #19232D;           /* fundo dos cartões */
    --ink: #0B131A;            /* superfície escura (topo, botões escuros, dia marcado) */
    --ink-2: #17222C;          /* caixas escuras do topo, seletor, inputs */
    --linha: #2A3845;          /* divisórias e bordas sutis */
    --linha-escura: #3A4856;
    --texto: #E6ECF2;          /* texto principal (claro) */
    --texto-2: #9FB0BF;        /* texto secundário */
    --texto-claro: #8292A2;
    --ambar-fundo: #3A2E12;    /* fundo do alerta/etiqueta âmbar */
    --ambar-texto: #F3DBA6;
    --ambar-forte: #E7B85C;
    --verde: #42B881;
    --vermelho: #E27059;
    --sombra-card: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 12px rgba(0, 0, 0, .40);
    --sombra-flutua: 0 12px 34px rgba(0, 0, 0, .55);
  }

  html, body { color: var(--texto); }

  /* Botões: o escuro padrão ganha uma superfície um pouco mais clara
     que o fundo, para não sumir; os de contorno/texto usam cor clara */
  .btn { background: #2B3845; }
  .btn.ambar { background: var(--ambar); color: #14202B; }
  .btn.contorno { color: var(--texto); border-color: var(--texto); }
  .btn.tracejado { color: var(--texto); border-color: var(--linha-escura); }
  .btn-texto { color: var(--texto); }
  .btn-texto.vermelho { color: var(--vermelho); }
  @media (hover: hover) {
    .btn.contorno:hover { background: rgba(255, 255, 255, .06); }
    .linha-cam:hover { background: rgba(255, 255, 255, .04); }
  }

  /* Barra de abas e abas */
  .abas { background: var(--card); border-top-color: var(--linha); box-shadow: 0 -1px 14px rgba(0, 0, 0, .35); }
  .aba[aria-current="page"] { color: var(--texto); }

  /* Formulários */
  .campo input, .campo select { background: var(--ink-2); color: var(--texto); border-color: var(--linha-escura); }
  dialog { background: var(--card); color: var(--texto); }

  /* Componentes com cores fixas no modo claro */
  .bola { background: var(--card); border-color: var(--linha-escura); }
  .dia { background: var(--ink-2); color: var(--texto-2); border-color: var(--linha-escura); }
  .dia[aria-pressed="true"] { background: var(--ambar); color: #14202B; border-color: var(--ambar); }
  .barra { background: var(--linha); }
  .barra > div { background: var(--texto-2); }
  .aviso { background: var(--ink-2); }
  .etiqueta { background: var(--linha); color: var(--texto); }
  .etiqueta.verde { background: #163520; color: #8FE3B2; }
  .etiqueta.azul { background: #16293E; color: #A8CBEE; }
  /* .etiqueta.ambar já acompanha o tema pelas variáveis --ambar-fundo/--ambar-texto */

  .erro { color: var(--vermelho); }
}

/* ============================================================
   Estados de carregamento e vazio — Incremento 3
   ============================================================ */
.carregando {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 56px 20px;
  color: var(--texto-2);
  font-size: 15px;
}
.giro {
  width: 22px;
  height: 22px;
  border: 3px solid var(--linha);
  border-top-color: var(--ambar);
  border-radius: 50%;
  animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* Estado vazio: convite à ação, com respiro e boa leitura */
.vazio { line-height: 1.5; }

/* ============================================================
   Hierarquia e consistência — Incremento 4
   Sistema de tipos coerente: a fonte condensada da marca (--tit)
   passa a marcar TODOS os títulos de seção (cards e janelas),
   como já fazia com os números do topo. Barlow comum = corpo.
   ============================================================ */
.card h2, #modal-form h2 { font-family: var(--tit); font-weight: 700; letter-spacing: .01em; }
.card h2 { font-size: 19px; }
#modal-form h2 { font-size: 22px; }

/* ============================================================
   Desktop / computador (telas largas): barra lateral + conteúdo
   centralizado. No celular (abaixo de 860px) nada muda.
   ============================================================ */
@media (min-width: 860px) {
  :root { --lateral: 240px; }
  body { padding-bottom: 0; padding-left: var(--lateral); }
  main { max-width: 860px; margin: 0 auto; padding: 24px; }

  /* A barra de abas vira uma coluna fixa à esquerda */
  .abas {
    top: 0; bottom: 0; right: auto; width: var(--lateral);
    grid-auto-flow: row; grid-auto-columns: auto; align-content: start; gap: 4px;
    border-top: 0; border-right: 1px solid var(--linha);
    padding: 18px 12px calc(18px + env(safe-area-inset-bottom)); box-shadow: none;
    overflow-y: auto;
  }
  .abas::before {
    content: "Oficina"; display: block; font-family: var(--tit); font-weight: 700;
    font-size: 26px; padding: 6px 14px 18px; color: var(--texto, var(--ink));
  }
  .aba {
    flex-direction: row; justify-content: flex-start; gap: 12px;
    min-height: 46px; padding: 0 14px; border-radius: 10px; font-size: 15px;
    transition: background 140ms ease, color 140ms ease;
  }
  .aba svg, .abas svg { width: 20px; height: 20px; }
  .aba[aria-current="page"] { background: var(--ambar-fundo); color: var(--ambar-texto); }
  @media (hover: hover) { .aba:hover { background: var(--linha); } }

  /* Respiro e cantos arredondados no topo das telas */
  .topo { border-radius: 16px; margin-top: 0; }
  .conteudo { padding: 20px 0 48px; }

  /* Tela de login centralizada (não esticada) */
  .login { max-width: 420px; margin: 0 auto; min-height: 100vh; }

  /* Janela (modal) um pouco maior no computador */
  dialog { width: min(520px, calc(100% - 48px)); }
}

/* ===== Impressão / Gerar PDF (relatório) ===== */
.so-imprime { display: none; }
.cabecalho-pdf h1 { margin: 0 0 10px; }
@media print {
  .abas, .topo, #faixa-admin, #aviso, .nao-imprime, dialog { display: none !important; }
  .so-imprime { display: block !important; }
  html, body { background: #fff !important; }
  body { color: #000 !important; }
  main#app { display: block !important; margin: 0 !important; }
  .conteudo { padding: 0 !important; max-width: none !important; margin: 0 !important; }
  .card { box-shadow: none !important; border: 1px solid #bbb !important; break-inside: avoid; background: #fff !important; }
  h1, h2, .numero-grande, .linha-valor, .pequeno, .valor, .t { color: #000 !important; }
  .verde { color: #0F4A2D !important; }
  .vermelho { color: #8A2B17 !important; }
}