/* Oficina OS — design system estilo Apple (HIG).
   Cores semânticas iOS, vidro fosco, dark mode automático.
   Mantém alvos de toque grandes (uso com luvas/celular). */

* { box-sizing: border-box; margin: 0; padding: 0; }

/* ============================================================
   TOKENS — cores semânticas (iOS system colors)
   ============================================================ */
:root {
  /* acentos */
  --azul: #007aff;
  --azul-escuro: #0a5dc2;
  --verde: #248a3d;
  --verde-vivo: #34c759;
  --vermelho: #ff3b30;
  --vermelho-escuro: #d70015;
  --laranja: #f57c00;
  --amarelo: #ffcc00;
  --cinza: #8e8e93;
  --roxo: #5e5ce6;

  /* superfícies */
  --fundo: #f2f2f7;
  --card: #ffffff;
  --card-2: #f7f7fa;
  --fill: rgba(120, 120, 128, .12);
  --fill-2: rgba(120, 120, 128, .20);

  /* texto */
  --texto: #1c1c1e;
  --texto-2: rgba(60, 60, 67, .62);
  --texto-3: rgba(60, 60, 67, .38);

  /* linhas e vidro */
  --separador: rgba(60, 60, 67, .16);
  --vidro: rgba(250, 250, 252, .82);
  --sombra-card: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 16px rgba(0, 0, 0, .05);
  --sombra-flutuante: 0 8px 32px rgba(0, 0, 0, .16);

  /* tintas (fundos coloridos suaves) */
  --tinta-azul: rgba(0, 122, 255, .12);
  --tinta-verde: rgba(52, 199, 89, .14);
  --tinta-vermelha: rgba(255, 59, 48, .12);
  --tinta-amarela: rgba(255, 204, 0, .18);

  /* aliases legados */
  --cor-fundo: var(--fundo);
  --cor-cartao: var(--card);
  --cor-texto: var(--texto);
  --cor-primaria: var(--azul);

  --raio-card: 18px;
  --raio-controle: 13px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --azul: #0a84ff;
    --azul-escuro: #409cff;
    --verde: #30d158;
    --verde-vivo: #30d158;
    --vermelho: #ff453a;
    --vermelho-escuro: #ff6961;
    --laranja: #ff9f0a;
    --amarelo: #ffd60a;
    --cinza: #98989e;
    --roxo: #7d7aff;

    --fundo: #000000;
    --card: #1c1c1e;
    --card-2: #2c2c2e;
    --fill: rgba(120, 120, 128, .24);
    --fill-2: rgba(120, 120, 128, .36);

    --texto: #f2f2f7;
    --texto-2: rgba(235, 235, 245, .64);
    --texto-3: rgba(235, 235, 245, .40);

    --separador: rgba(84, 84, 88, .60);
    --vidro: rgba(22, 22, 24, .82);
    --sombra-card: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .35);
    --sombra-flutuante: 0 8px 32px rgba(0, 0, 0, .55);

    --tinta-azul: rgba(10, 132, 255, .20);
    --tinta-verde: rgba(48, 209, 88, .20);
    --tinta-vermelha: rgba(255, 69, 58, .20);
    --tinta-amarela: rgba(255, 214, 10, .22);
  }
}

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  background: var(--fundo);
  color: var(--texto);
  padding-bottom: 40px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { letter-spacing: -.02em; }

/* ============================================================
   TOPO — barra em vidro fosco (estilo iOS navigation bar)
   ============================================================ */
.topo {
  background: var(--vidro);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  color: var(--texto);
  padding: 14px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  position: sticky; top: 0; z-index: 40;
  border-bottom: .5px solid var(--separador);
}
.topo h1 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--texto);
}
.topo-marca .slogan-topo {
  font-size: .76rem; font-weight: 500;
  color: var(--texto-2); letter-spacing: 0; margin-top: 2px;
}
.quem-sou { display: flex; align-items: center; gap: 8px; font-size: .9rem; flex: 1; color: var(--texto-2); }
/* Sino sempre COLADO no canto direito do cabecalho. */
.quem-sou .sino { margin-left: auto; }
.quem-sou small { opacity: .85; }
.btn-sair {
  background: var(--fill); color: var(--azul); border: none;
  border-radius: 999px; padding: 7px 14px; font-weight: 600; font-size: .85rem;
  cursor: pointer; transition: opacity .15s ease, transform .15s ease;
}
.btn-sair:active { opacity: .6; transform: scale(.96); }

/* ============================================================
   ABAS — topo no desktop, tab bar flutuante no celular
   ============================================================ */
.abas {
  display: flex;
  background: var(--vidro);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  overflow-x: auto;
  border-bottom: .5px solid var(--separador);
}
.aba {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 4px 11px;
  font-size: .72rem;
  font-weight: 600;
  border: none;
  background: transparent;
  color: var(--texto-2);
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  transition: color .2s ease;
}
/* .aba define display proprio, que venceria o [hidden] do navegador. */
.aba[hidden] { display: none !important; }
.aba-ico { font-size: 1.35rem; line-height: 1; filter: grayscale(100%) opacity(.55); transition: filter .2s ease; }
.aba-txt { letter-spacing: 0; }
.aba.ativa { color: var(--azul); }
.aba.ativa .aba-ico { filter: none; }
.aba.ativa::before {
  content: ""; position: absolute; bottom: 0; left: 22%; right: 22%;
  height: 2.5px; border-radius: 3px 3px 0 0; background: var(--azul);
}

main { padding: 16px; max-width: 720px; margin: 0 auto; }

/* ============================================================
   CARTÕES DE OS
   ============================================================ */
.lista-os { display: flex; flex-direction: column; gap: 14px; }
.card-os {
  background: var(--card);
  border-radius: var(--raio-card);
  padding: 16px;
  box-shadow: var(--sombra-card);
  border: .5px solid var(--separador);
  border-left: 5px solid var(--cinza);
}
.card-os.paralisada { border-left-color: var(--vermelho); }
.card-os.executando { border-left-color: var(--verde-vivo); }
.card-os .os-numero { font-size: 1.2rem; font-weight: 700; color: var(--texto); }
.card-os .os-info { color: var(--texto-2); margin: 4px 0 10px; font-size: .93rem; }

.status-badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--texto-2);
  background: var(--fill);
  margin-bottom: 10px;
}
.status-badge.vermelho { background: var(--tinta-vermelha); color: var(--vermelho-escuro); animation: piscar 1.2s infinite; }
.status-badge.verde { background: var(--tinta-verde); color: var(--verde); }
.status-badge.azul { background: var(--tinta-azul); color: var(--azul); }
@keyframes piscar { 50% { opacity: .55; } }

.alerta-aberto {
  background: var(--tinta-vermelha);
  border: 1px solid rgba(255, 59, 48, .35);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: .93rem;
}

/* ============================================================
   BOTÕES — preenchidos estilo iOS (sem gradiente)
   ============================================================ */
.btn {
  display: block;
  width: 100%;
  padding: 17px 12px;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -.01em;
  border: none;
  border-radius: var(--raio-controle);
  color: #fff;
  cursor: pointer;
  margin-top: 10px;
  transition: transform .15s ease, opacity .15s ease, filter .15s ease;
}
.btn:active { transform: scale(.97); opacity: .85; }
.btn-vermelho { background: var(--vermelho); }
.btn-laranja { background: var(--laranja); }
.btn-amarelo { background: var(--amarelo); color: #1c1c1e; }
.btn-verde { background: var(--verde); }
.btn-azul { background: var(--azul); }
.btn-cinza { background: var(--fill-2); color: var(--texto); }

.vazio { text-align: center; color: var(--texto-3); margin-top: 40px; font-size: 1.02rem; }

/* ============================================================
   PAINEL
   ============================================================ */
#aba-painel h2 {
  margin: 22px 0 10px; font-size: .82rem; font-weight: 600;
  color: var(--texto-2); text-transform: uppercase; letter-spacing: .06em;
}
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.card-num {
  background: var(--card);
  border-radius: 16px;
  padding: 14px;
  text-align: center;
  box-shadow: var(--sombra-card);
  border: .5px solid var(--separador);
}
.card-num .valor { font-size: 1.85rem; font-weight: 700; letter-spacing: -.03em; color: var(--texto); font-variant-numeric: tabular-nums; }
.card-num .rotulo { font-size: .78rem; color: var(--texto-2); margin-top: 2px; }
.card-num.destaque-vermelho .valor { color: var(--vermelho); }
.card-num.destaque-verde .valor { color: var(--verde); }

/* ============================================================
   FORMULÁRIOS — campos estilo inset iOS
   ============================================================ */
.form-bloco {
  background: var(--card);
  border-radius: var(--raio-card);
  padding: 18px 16px;
  margin-bottom: 16px;
  box-shadow: var(--sombra-card);
  border: .5px solid var(--separador);
}
.form-bloco h2 { font-size: 1.05rem; font-weight: 700; margin-bottom: 12px; color: var(--texto); }
form label, .modal-caixa label {
  display: block; margin-bottom: 13px; font-weight: 600; font-size: .9rem; color: var(--texto);
}
form input:not([type="radio"]):not([type="checkbox"]),
form select, form textarea,
.form-bloco input:not([type="radio"]):not([type="checkbox"]),
.form-bloco select, .form-bloco textarea,
.modal-caixa input:not([type="radio"]):not([type="checkbox"]),
.modal-caixa select, .modal-caixa textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 13px 14px;
  font-size: 1rem;
  font-family: inherit;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--fill);
  color: var(--texto);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  -webkit-appearance: none;
  appearance: none;
}
form select, .form-bloco select, .modal-caixa select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238e8e93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
form input:focus, form select:focus, form textarea:focus,
.form-bloco input:focus, .form-bloco select:focus, .form-bloco textarea:focus,
.modal-caixa input:focus, .modal-caixa select:focus, .modal-caixa textarea:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3.5px var(--tinta-azul);
  background: var(--card);
}
input::placeholder, textarea::placeholder { color: var(--texto-3); }
form textarea, .form-bloco textarea, .modal-caixa textarea { min-height: 80px; resize: vertical; }
/* Radios mantem layout proprio. */
.form-bloco .opcoes-radio input, .modal-caixa .opcoes-radio input {
  width: auto; margin: 0; display: inline-block;
}

.linha-usuario {
  display: flex;
  justify-content: space-between;
  padding: 11px 4px;
  border-bottom: .5px solid var(--separador);
  font-size: .95rem;
}
.linha-usuario .papel { color: var(--texto-2); font-weight: 600; }

/* Orcamento tecnico */
.bloco-orcamento {
  background: var(--tinta-azul);
  border: none;
  border-radius: 12px;
  padding: 10px 12px;
  margin-top: 10px;
  font-size: .95rem;
}
.vazio-mini { color: var(--texto-3); font-size: .9rem; padding: 6px 0; }
.btn-remover {
  border: none;
  background: var(--tinta-vermelha);
  color: var(--vermelho-escuro);
  font-weight: 700;
  border-radius: 9px;
  padding: 5px 11px;
  cursor: pointer;
  transition: opacity .15s ease;
}
.btn-remover:active { opacity: .6; }

/* ============================================================
   MODAL — sheet estilo iOS
   ============================================================ */
.modal-fundo {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  /* acima da telaAuth (100): o modal de primeiro acesso abre ainda no login */
  z-index: 130;
}
/* display:flex acima sobrepoe o atributo hidden; reforca o esconder. */
.modal-fundo[hidden], .toast[hidden] { display: none; }
.modal-caixa {
  background: var(--card);
  border-radius: 22px;
  padding: 22px 20px;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--sombra-flutuante);
  animation: subir-sheet .32s cubic-bezier(.32, .72, .28, 1);
}
@keyframes subir-sheet {
  from { transform: translateY(24px) scale(.97); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.modal-caixa h2 { margin-bottom: 14px; font-size: 1.15rem; font-weight: 700; }
.modal-acoes { display: flex; gap: 10px; margin-top: 8px; }
.modal-acoes .btn { margin-top: 0; }

.opcoes-radio { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.opcoes-radio label {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--fill);
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.opcoes-radio input { width: auto; margin: 0; accent-color: var(--azul); }
.opcoes-radio label:has(input:checked) { border-color: var(--azul); background: var(--tinta-azul); }

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

/* ============================================================
   ASSISTENTE TÉCNICO
   ============================================================ */
.dica { color: var(--texto-2); font-size: .9rem; margin-bottom: 10px; line-height: 1.45; }
.resposta-tecnico .pergunta-eco { font-weight: 600; color: var(--texto); margin-bottom: 8px; }
.texto-resposta {
  white-space: pre-wrap;
  font-family: inherit;
  background: var(--fill);
  border-radius: 12px;
  padding: 13px;
  font-size: 1.02rem;
  line-height: 1.55;
}
.fonte-badge { color: var(--texto-3); }

/* ============================================================
   PREÇOS
   ============================================================ */
.barra-logado {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--tinta-verde);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-weight: 600;
}
.linha-preco {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: .5px solid var(--separador);
  font-size: .95rem;
}
.campo-valor { display: flex; align-items: center; gap: 4px; font-weight: 600; }
.campo-valor input {
  width: 110px;
  padding: 9px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--fill);
  color: var(--texto);
  font-size: 1rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.total-linha {
  text-align: right;
  font-size: 1.05rem;
  font-weight: 600;
  margin: 12px 0;
  color: var(--verde);
}
.ok-finalizada { color: var(--verde); font-weight: 600; margin-top: 8px; }
.btn-link {
  background: none;
  border: none;
  color: var(--azul);
  text-decoration: none;
  cursor: pointer;
  font-size: .95rem;
  padding: 0;
  font-weight: 600;
}
.btn-link:active { opacity: .5; }

/* ============================================================
   TOAST — pílula flutuante em vidro
   ============================================================ */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(28, 28, 30, .88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
  padding: 13px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  box-shadow: var(--sombra-flutuante);
  /* toast e mensagem transitoria: sempre visivel, acima de qualquer camada */
  z-index: 250;
  max-width: 90vw;
  text-align: center;
  animation: subir-toast .3s cubic-bezier(.32, .72, .28, 1);
}
@keyframes subir-toast {
  from { transform: translate(-50%, 12px); opacity: 0; }
  to { transform: translate(-50%, 0); opacity: 1; }
}
.toast.erro { background: rgba(215, 0, 21, .92); }
.toast.sucesso { background: rgba(36, 138, 61, .92); }

/* ============================================================
   AVATARES
   ============================================================ */
.avatar {
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
  display: inline-block;
}
.avatar-letra {
  background: var(--azul);
  color: #fff;
  font-weight: 700;
  text-align: center;
  font-size: .85em;
}

/* ============================================================
   BUSCA — campo estilo iOS search
   ============================================================ */
.busca-placa {
  width: 100%;
  padding: 14px 16px;
  font-size: 1.02rem;
  border: 1px solid transparent;
  border-radius: var(--raio-controle);
  margin-bottom: 14px;
  text-transform: uppercase;
  background: var(--card);
  color: var(--texto);
  box-shadow: var(--sombra-card);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.busca-placa:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3.5px var(--tinta-azul); }

/* ============================================================
   AVISOS E AÇÕES MENORES
   ============================================================ */
.alerta-info {
  background: var(--tinta-azul);
  border: none;
  border-radius: 12px;
  padding: 11px 13px;
  margin: 8px 0;
  font-size: .95rem;
}
.alerta-ok {
  background: var(--tinta-verde);
  border: none;
  border-radius: 12px;
  padding: 11px 13px;
  margin: 8px 0;
  font-weight: 600;
  color: var(--verde);
}
.acoes-mini { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.btn-mini {
  border: none;
  background: var(--fill);
  color: var(--azul);
  border-radius: 999px;
  padding: 8px 13px;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s ease, transform .15s ease;
}
.btn-mini:active { opacity: .6; transform: scale(.96); }

/* ============================================================
   TELA DE ENTRADA (login / cadastro)
   ============================================================ */
.auth-fundo {
  position: fixed; inset: 0; z-index: 100;
  background: var(--fundo);
  background-image:
    radial-gradient(1200px 600px at 85% -10%, var(--tinta-azul), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, var(--tinta-azul), transparent 55%);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  overflow-y: auto;
}
.auth-fundo[hidden] { display: none; }
.auth-caixa {
  background: var(--card); border-radius: 26px; padding: 32px 26px;
  width: 100%; max-width: 400px;
  box-shadow: var(--sombra-flutuante);
  border: .5px solid var(--separador);
}
.auth-logo {
  text-align: center; font-size: 2.2rem; font-weight: 800; letter-spacing: -.03em;
  color: var(--texto); margin-bottom: 18px; line-height: 1;
}
.auth-logo span {
  display: block; font-size: .74rem; font-weight: 600; letter-spacing: .32em;
  color: var(--azul); margin-top: 8px;
}
.slogan-auth {
  text-align: center; color: var(--texto-2); font-size: .92rem;
  font-weight: 500; margin: -6px 0 24px;
}
.auth-caixa h2 { font-size: 1.3rem; font-weight: 700; margin-bottom: 16px; color: var(--texto); }
.auth-caixa label { display: block; margin-bottom: 16px; font-weight: 600; font-size: .95rem; color: var(--texto); }
.auth-caixa input, .auth-caixa select {
  display: block; width: 100%; margin-top: 7px; padding: 17px 16px;
  font-size: 1.15rem; border: 1px solid transparent; border-radius: 14px;
  background: var(--fill); color: var(--texto);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  -webkit-appearance: none; appearance: none;
}
.auth-caixa select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238e8e93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px;
}
.auth-caixa input:focus, .auth-caixa select:focus {
  outline: none; border-color: var(--azul);
  box-shadow: 0 0 0 3.5px var(--tinta-azul); background: var(--card);
}
.auth-caixa .btn { padding: 18px; font-size: 1.1rem; border-radius: 14px; }
.auth-troca { text-align: center; margin-top: 16px; font-size: .95rem; color: var(--texto-2); }
.auth-troca .btn-link { font-size: .95rem; }
.link-criar { text-align: center; margin-top: 10px; }

/* ============================================================
   ASSISTENTE: campo e botão grandes
   ============================================================ */
.campo-grande {
  min-height: 130px !important; font-size: 1.1rem !important; line-height: 1.45;
  padding: 16px !important;
}
.btn-grande { padding: 20px !important; font-size: 1.15rem !important; }

/* ============================================================
   TREINAMENTO
   ============================================================ */
.passos-treino { margin: 0; padding-left: 22px; }
.passos-treino li { margin-bottom: 12px; font-size: 1rem; line-height: 1.5; }

/* ============================================================
   CELULAR: tab bar flutuante em vidro (estilo iOS)
   ============================================================ */
@media (max-width: 760px) {
  nav.abas {
    position: fixed; left: 10px; right: 10px; bottom: 10px; top: auto;
    transform: none;
    z-index: 60; width: auto;
    display: flex; flex-direction: row; align-items: center; gap: 2px;
    background: var(--vidro);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    backdrop-filter: saturate(180%) blur(24px);
    border: .5px solid var(--separador);
    border-radius: 28px;
    box-shadow: var(--sombra-flutuante);
    padding: 7px 6px;
    padding-bottom: calc(7px + env(safe-area-inset-bottom, 0));
  }
  nav.abas .aba {
    flex: 1; min-width: 0;
    padding: 10px 2px; border-radius: 20px;
    color: var(--texto-2);
  }
  nav.abas .aba[hidden] { display: none; }
  nav.abas .aba .aba-ico { font-size: 1.5rem; line-height: 1; }
  /* Inativas: so o icone (grande). O nome aparece na aba ativa. */
  nav.abas .aba .aba-txt { display: none; }
  nav.abas .aba.ativa {
    flex: 2.6;
    flex-direction: row; justify-content: center; gap: 7px;
    background: var(--tinta-azul); color: var(--azul);
    box-shadow: none;
  }
  nav.abas .aba.ativa .aba-txt {
    display: block; font-size: .8rem; font-weight: 700; letter-spacing: -.01em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  nav.abas .aba.ativa::before { display: none; }
  nav.abas .aba:active { transform: scale(.94); }
  nav.abas[hidden] { display: none; }
  /* Conteudo abre espaco para a barra de baixo; topo volta a largura natural. */
  body { padding-bottom: 100px; padding-right: 0; }
  header.topo {
    padding-top: calc(14px + env(safe-area-inset-top, 0));
  }
}

/* ============================================================
   PLAYER DA VIDEO-AULA
   ============================================================ */
.player-fundo {
  position: fixed; inset: 0; z-index: 200;
  background: #0b0b0f;
  background-image: radial-gradient(1000px 600px at 50% -20%, rgba(10, 132, 255, .28), transparent 65%);
  display: flex; flex-direction: column; color: #fff;
}
.player-fundo[hidden] { display: none; }
.player-topo {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 20px; font-weight: 700; font-size: 1.05rem;
  padding-top: calc(18px + env(safe-area-inset-top, 0));
}
.player-fechar {
  background: rgba(255,255,255,.14); border: none; color: #fff;
  width: 40px; height: 40px; border-radius: 50%; font-size: 1.05rem; cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.player-slide {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: 24px; text-align: center; gap: 18px;
}
.player-numero {
  font-size: .85rem; font-weight: 700; letter-spacing: .18em;
  color: #64b5f6; text-transform: uppercase;
}
.player-texto {
  font-size: 1.55rem; line-height: 1.5; font-weight: 600; letter-spacing: -.02em;
  max-width: 640px; margin: 0 auto;
}
.player-progresso {
  display: flex; gap: 6px; justify-content: center; padding: 8px 20px; flex-wrap: wrap;
}
.player-progresso .ponto {
  width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.25);
  transition: transform .2s ease, background .2s ease;
}
.player-progresso .ponto.feito { background: rgba(255,255,255,.65); }
.player-progresso .ponto.ativo { background: var(--amarelo); transform: scale(1.35); }
.player-controles {
  display: flex; justify-content: center; align-items: center; gap: 22px;
  padding: 18px 0 calc(34px + env(safe-area-inset-bottom, 0));
}
.player-controles button {
  background: rgba(255,255,255,.12); border: none; color: #fff;
  width: 62px; height: 62px; border-radius: 50%; font-size: 1.5rem; cursor: pointer;
  transition: transform .15s ease;
}
.player-controles button:active { transform: scale(.92); }
.player-controles .player-play { background: #fff; color: #1c1c1e; width: 74px; height: 74px; font-size: 1.8rem; }

/* ---- Fase 2: agenda, separacao, laudo, consultor ---- */
.foto-mini {
  width: 64px; height: 64px; object-fit: cover; border-radius: 10px;
  border: .5px solid var(--separador); margin: 4px 4px 0 0;
}
.bloco-consultor {
  border-top: .5px solid var(--separador); margin-top: 10px; padding-top: 8px;
}
.laudo-texto {
  max-height: 45vh; overflow-y: auto; background: var(--fill);
  border-radius: 12px; padding: 12px; font-size: .92rem;
}
.bloco-orcamento ul { margin: 6px 0 8px 20px; font-size: .95rem; }
details summary {
  cursor: pointer; color: var(--azul); font-weight: 600; font-size: .9rem; margin: 10px 0 6px;
}

/* ============================================================
   FLUXO DO SERVIÇO no cartão da OS
   ============================================================ */
.fluxo-os {
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px;
  margin: 10px 0 4px; padding: 8px 10px; background: var(--fill); border-radius: 12px;
}
.fluxo-os .etapa {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .72rem; font-weight: 600; color: var(--texto-3);
  padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}
.fluxo-os .etapa.feita { color: var(--verde); background: var(--tinta-verde); }
.fluxo-os .etapa.atual {
  color: #fff; background: var(--azul);
  box-shadow: 0 2px 8px var(--tinta-azul);
}
.fluxo-os .etapa-ico { font-size: .8rem; line-height: 1; }
.fluxo-os .etapa-seta { color: var(--texto-3); font-weight: 700; font-size: .8rem; }

/* ============================================================
   EMERGÊNCIA
   ============================================================ */
.btn-emergencia {
  display: block; width: 100%; margin-bottom: 12px;
  background: var(--tinta-vermelha); color: var(--vermelho-escuro); border: none;
  border-radius: var(--raio-controle); padding: 12px; font-weight: 700; font-size: .92rem;
  cursor: pointer; letter-spacing: .01em;
  transition: transform .15s ease, opacity .15s ease;
}
.btn-emergencia:active { transform: scale(.97); opacity: .8; }
.faixa-emergencia {
  position: sticky; top: 0; z-index: 70;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--vermelho); color: #fff; font-weight: 700; font-size: .95rem;
  padding: 12px 16px; animation: piscar 1.2s infinite;
}
.faixa-emergencia[hidden] { display: none; }
.faixa-emergencia button {
  background: rgba(255,255,255,.25); border: none; color: #fff;
  border-radius: 999px; padding: 5px 11px; font-weight: 700; cursor: pointer;
}
@media (prefers-reduced-motion: reduce) { .faixa-emergencia { animation: none; } }

/* ============================================================
   SINO DE AVISOS
   ============================================================ */
.sino {
  position: relative; background: var(--fill); border: none;
  border-radius: 999px; width: 42px; height: 42px; font-size: 1.3rem; cursor: pointer;
  line-height: 1; display: inline-flex; align-items: center; justify-content: center;
  transition: transform .15s ease, opacity .15s ease;
}
.sino:active { transform: scale(.9); opacity: .7; }
.sino-badge {
  position: absolute; top: -5px; right: -5px;
  background: var(--vermelho); color: #fff; font-size: .7rem; font-weight: 700;
  border-radius: 999px; padding: 2px 6px; min-width: 19px; text-align: center;
  border: 2px solid var(--card);
}
.aviso-novo { background: var(--tinta-amarela); border-radius: 10px; }

/* Alerta de pendencias de faturamento (consultor/admin) */
.alerta-faturamento {
  background: var(--tinta-amarela); border: none; color: var(--texto);
  border-radius: 12px; padding: 11px 14px; margin-bottom: 12px; font-size: .92rem;
}
.alerta-faturamento[hidden] { display: none; }

/* Selos de ERP e nota fiscal no cartao */
.selo-erp, .selo-nf {
  display: inline-block; font-size: .72rem; font-weight: 700;
  border-radius: 999px; padding: 3px 10px; margin: 2px 4px 0 0;
}
.selo-erp { background: var(--tinta-azul); color: var(--azul); }
.selo-nf { background: var(--tinta-verde); color: var(--verde); }
.btn-mini-nf { background: var(--tinta-amarela); color: var(--texto); }

/* Pendencia de evidencia no orcamento */
.pendencia {
  color: var(--vermelho-escuro); font-weight: 700; font-size: .78rem;
  background: var(--tinta-vermelha); border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}

/* ============================================================
   ALERTA GIGANTE
   ============================================================ */
.alertao-fundo {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.alertao-fundo[hidden] { display: none; }
.alertao-caixa {
  background: var(--card); border-radius: 26px; padding: 30px 24px;
  width: 100%; max-width: 440px; text-align: center;
  box-shadow: var(--sombra-flutuante);
  animation: alertao-pulso .4s cubic-bezier(.32, .72, .28, 1);
}
@keyframes alertao-pulso { 0% { transform: scale(.86); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.alertao-icone { font-size: 4rem; line-height: 1; }
.alertao-titulo {
  font-size: .95rem; font-weight: 700; letter-spacing: .14em; color: var(--vermelho);
  margin: 12px 0 12px; text-transform: uppercase;
}
.alertao-texto { font-size: 1.25rem; font-weight: 600; line-height: 1.45; color: var(--texto); letter-spacing: -.01em; }
.alertao-extra { color: var(--texto-2); font-size: .9rem; margin-top: 10px; }
.alertao-botao { font-size: 1.15rem !important; padding: 18px !important; margin-top: 20px; }
@media (prefers-reduced-motion: reduce) { .alertao-caixa, .alertao-icone { animation: none; } }

/* ============================================================
   BOTÕES DO TOPO da aba Serviços
   ============================================================ */
.linha-botoes-topo { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.linha-botoes-topo .btn-emergencia { flex: 1; margin-bottom: 0; }
.btn-cobrar {
  flex: 1; background: var(--tinta-azul); color: var(--azul); border: none;
  border-radius: var(--raio-controle); padding: 12px; font-weight: 700; font-size: .92rem;
  cursor: pointer; letter-spacing: .01em;
  transition: transform .15s ease, opacity .15s ease;
}
.btn-cobrar:active { transform: scale(.97); opacity: .8; }

/* Quadro de assinatura do cliente (checklist) */
.quadro-assinatura {
  width: 100%; border: 2px dashed var(--separador); border-radius: 14px;
  touch-action: none; background: var(--card); margin-bottom: 8px;
}

/* ============================================================
   ETAPAS DO SERVIÇO (tela Meu Serviço do mecânico)
   ============================================================ */
.etapas-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px; margin: 10px 0;
}
.etapa-btn {
  border: 1.5px solid var(--separador); background: var(--card); color: var(--texto);
  border-radius: 12px; padding: 13px 6px; font-weight: 600; font-size: .85rem;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.etapa-btn.ativa {
  background: var(--azul); color: #fff;
  border-color: var(--azul); box-shadow: 0 3px 10px var(--tinta-azul);
}
.etapa-btn:active { transform: scale(.96); }
.etapa-btn.feita { opacity: .5; }
.etapa-btn:disabled { cursor: not-allowed; }

/* ============================================================
   CAMPO DE FOTO
   ============================================================ */
.campo-foto { margin-bottom: 12px; }
.btn-foto {
  display: block; width: 100%; text-align: left;
  background: var(--tinta-azul); color: var(--azul); border: 1.5px dashed var(--azul);
  border-radius: 12px; padding: 13px 14px; font-weight: 600; font-size: .95rem;
  cursor: pointer;
  transition: transform .15s ease, opacity .15s ease;
}
.btn-foto:active { transform: scale(.98); opacity: .8; }
.foto-status { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.foto-ok { color: var(--verde); font-weight: 700; font-size: .85rem; }
.foto-erro { color: var(--vermelho-escuro); font-weight: 600; font-size: .85rem; }
.enviando { color: var(--laranja); font-weight: 600; font-size: .85rem; animation: piscar 1.2s infinite; }
.grade-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.thumb-envio { display: flex; align-items: center; gap: 4px; }

/* ============================================================
   DRIVE (memória da oficina)
   ============================================================ */
.drive-filtros { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.drive-filtros input {
  width: 100%; padding: 12px 13px; font-size: .95rem;
  border: 1px solid transparent; border-radius: 12px;
  background: var(--fill); color: var(--texto);
}
.drive-filtros input:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3.5px var(--tinta-azul); }
.drive-grade { margin-top: 8px; }
.drive-item { display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-decoration: none; color: inherit; }
.drive-thumb { width: 72px; height: 72px; display: flex; align-items: center;
  justify-content: center; font-size: 34px; background: var(--fill); border-radius: 14px;
  overflow: hidden; }
.drive-thumb .foto-mini { width: 72px; height: 72px; object-fit: cover; }
.drive-rotulo { font-size: 11px; text-align: center; max-width: 84px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; color: var(--texto-2); }

.btn-atualizar { background: var(--fill); color: var(--azul); border: none;
  border-radius: 999px; font-weight: 600; padding: 10px 14px; font-size: 14px;
  cursor: pointer; transition: transform .15s ease, opacity .15s ease; }
.btn-atualizar:active { transform: scale(.96); opacity: .7; }

.btn-atualizar-topo { margin-right: 4px; }

.selo-excluida { background: var(--tinta-vermelha); color: var(--vermelho-escuro); font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px; }

.btn-ia { background: var(--roxo); color: #fff; border: none; margin: 4px 0 8px; }

.btn-mini-apagar { background: var(--tinta-vermelha); color: var(--vermelho-escuro); }

/* ============================================================
   KANBAN (painel de acompanhamento)
   ============================================================ */
.kanban { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 12px;
  -webkit-overflow-scrolling: touch; }
.kanban-col { min-width: 230px; max-width: 260px; flex: 0 0 auto;
  background: var(--fill); border-radius: 16px; padding: 8px; }
.kanban-titulo { font-weight: 700; color: var(--texto); font-size: 13px; padding: 4px 6px 8px;
  display: flex; justify-content: space-between; align-items: center;
  text-transform: uppercase; letter-spacing: .04em; }
.kanban-qtd { background: var(--azul); color: #fff; border-radius: 999px; padding: 1px 9px;
  font-size: 12px; font-weight: 700; }
.kanban-card { background: var(--card); border-radius: 12px; padding: 9px 11px; margin-bottom: 8px;
  border-left: 4px solid var(--azul); box-shadow: var(--sombra-card);
  font-size: 13px; line-height: 1.4; }
.kanban-card.executando { border-left-color: var(--verde-vivo); }
.kanban-card.paralisada { border-left-color: var(--vermelho); }
.kanban-selos { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; }
.kanban-selos span { background: var(--tinta-vermelha); color: var(--vermelho-escuro); font-size: 10px; font-weight: 700;
  padding: 1px 7px; border-radius: 999px; }
.kanban-vazio { color: var(--texto-3); text-align: center; font-size: 12px; padding: 8px; }

.btn-ajuda-app { background: var(--fill); color: var(--azul); border: none;
  border-radius: var(--raio-controle); font-weight: 700; padding: 12px 14px; font-size: .92rem;
  cursor: pointer; transition: transform .15s ease, opacity .15s ease; }
.btn-ajuda-app:active { transform: scale(.97); opacity: .8; }

/* ============================================================
   SKELETON LOADING (primeira carga)
   ============================================================ */
.skeleton {
  background: linear-gradient(90deg, var(--fill) 25%, var(--fill-2) 50%, var(--fill) 75%);
  background-size: 200% 100%;
  animation: brilho 1.2s infinite;
  border-radius: var(--raio-card);
  min-height: 110px;
  margin-bottom: 10px;
}
@keyframes brilho { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ============================================================
   ANIMAÇÕES LEVES
   ============================================================ */
.card-os, .kanban-card { animation: surgir .28s cubic-bezier(.32, .72, .28, 1); }
@keyframes surgir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .card-os, .kanban-card, .modal-caixa, .toast, .alertao-caixa { animation: none; }
}