/* =====================================================================
   SIGMA FROTA - Camada de estilo sobre o Tailwind (CDN)
   Aqui ficam apenas os detalhes que o utilitario nao cobre bem:
   sombras autorais, animacoes, scrollbar e estados tateis.
   ===================================================================== */

:root {
  /* Paleta oficial */
  --vermelho:        #D32F2F;
  --vermelho-claro:  #E53935;
  --vermelho-escuro: #B71C1C;
  --grafite:         #212121;
  --grafite-900:     #1A1A1A;
  --branco:          #FFFFFF;

  /* Neutros derivados */
  --cinza-50:  #FAFAFA;
  --cinza-100: #F4F4F5;
  --cinza-200: #E7E7EA;
  --cinza-400: #A1A1AA;
  --cinza-500: #71717A;
  --cinza-600: #52525B;

  /* Status */
  --ok:      #15803D;
  --atencao: #B45309;
  --critico: #D32F2F;

  /* Sombras suaves em camadas (o segredo do visual "premium") */
  --sombra-sm: 0 1px 2px rgba(16, 16, 20, .04), 0 1px 3px rgba(16, 16, 20, .06);
  --sombra-md: 0 2px 4px rgba(16, 16, 20, .04), 0 6px 16px -4px rgba(16, 16, 20, .08);
  --sombra-lg: 0 4px 8px rgba(16, 16, 20, .04), 0 16px 40px -12px rgba(16, 16, 20, .14);
  --sombra-vermelha: 0 6px 20px -6px rgba(211, 47, 47, .45);
}

* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'tnum';
  color: var(--grafite);
  background: var(--cinza-50);
}

/* Numeros tabulares: KM e valores nunca "dancam" na tela */
.tnum { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* --------------------------------------------------------------- Cards */
.card {
  background: var(--branco);
  border: 1px solid rgba(16, 16, 20, .06);
  border-radius: 18px;
  box-shadow: var(--sombra-sm);
  transition: box-shadow .28s cubic-bezier(.16,1,.3,1), transform .28s cubic-bezier(.16,1,.3,1);
}
.card-hover:hover {
  box-shadow: var(--sombra-md);
  transform: translateY(-2px);
}

/* ------------------------------------------------------------- Botoes */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 600; border-radius: 14px;
  transition: transform .16s cubic-bezier(.16,1,.3,1), box-shadow .22s ease, background-color .22s ease;
  will-change: transform;
}
.btn:active { transform: scale(.97); }
/* .hidden do Tailwind precisa vencer o display:inline-flex do .btn
   (especificidade 0,2,0 - nao interfere nas variantes responsivas) */
.btn.hidden { display: none; }

.btn-primario {
  background: linear-gradient(180deg, var(--vermelho-claro), var(--vermelho));
  color: #fff; box-shadow: var(--sombra-vermelha);
}
.btn-primario:hover { background: linear-gradient(180deg, var(--vermelho), var(--vermelho-escuro)); }
.btn-primario:disabled { background: var(--cinza-200); color: var(--cinza-500); box-shadow: none; cursor: not-allowed; }

.btn-neutro {
  background: var(--branco); color: var(--grafite);
  border: 1px solid var(--cinza-200); box-shadow: var(--sombra-sm);
}
.btn-neutro:hover { background: var(--cinza-50); border-color: var(--cinza-400); }

.btn-escuro { background: var(--grafite); color: #fff; }
.btn-escuro:hover { background: #000; }

/* Anel de foco acessivel */
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, button:focus-visible {
  outline: 2px solid var(--vermelho);
  outline-offset: 2px;
}

/* ------------------------------------------------ Toggle OK / AVARIA */
.toggle-resposta {
  border: 1.5px solid var(--cinza-200);
  background: var(--branco);
  transition: all .2s cubic-bezier(.16,1,.3,1);
}
.toggle-resposta:active { transform: scale(.96); }

.toggle-resposta[data-ativo="ok"] {
  background: #ECFDF3; border-color: #16A34A; color: #15803D;
  box-shadow: inset 0 0 0 1px #16A34A;
}
.toggle-resposta[data-ativo="avaria"] {
  background: #FEF2F2; border-color: var(--vermelho); color: var(--vermelho-escuro);
  box-shadow: inset 0 0 0 1px var(--vermelho);
}

/* --------------------------------------------------------- Barra KM */
.barra { height: 8px; border-radius: 99px; background: var(--cinza-200); overflow: hidden; }
.barra > span {
  display: block; height: 100%; border-radius: 99px;
  transition: width .9s cubic-bezier(.16,1,.3,1);
}

/* -------------------------------------------------------- Animacoes */
@keyframes surgir { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.surgir { animation: surgir .5s cubic-bezier(.16,1,.3,1) both; }

@keyframes pulsar-critico {
  0%, 100% { box-shadow: 0 0 0 0 rgba(211, 47, 47, .35); }
  60%      { box-shadow: 0 0 0 10px rgba(211, 47, 47, 0); }
}
.pulsar { animation: pulsar-critico 2.4s ease-out infinite; }

@keyframes brilho {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--cinza-100) 25%, #EDEDF0 37%, var(--cinza-100) 63%);
  background-size: 200% 100%;
  animation: brilho 1.4s linear infinite;
  border-radius: 10px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ------------------------------------------------------- Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #D4D4D8; border-radius: 99px; border: 3px solid var(--cinza-50); }
::-webkit-scrollbar-thumb:hover { background: var(--cinza-400); }

/* ------------------------------------- Input de KM (teclado grande) */
.input-km {
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  caret-color: var(--vermelho);
}
.input-km::-webkit-outer-spin-button,
.input-km::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.input-km[type=number] { -moz-appearance: textfield; }

/* -------------------------------------------------- Tooltip grafico */
.tooltip-grafico {
  position: absolute; pointer-events: none; z-index: 40;
  background: rgba(26, 26, 26, .96);
  color: #fff; font-size: 12px; line-height: 1.35;
  padding: 8px 10px; border-radius: 10px;
  box-shadow: var(--sombra-lg);
  transform: translate(-50%, -120%);
  opacity: 0; transition: opacity .12s ease;
  white-space: nowrap;
}
.tooltip-grafico.visivel { opacity: 1; }

/* --------------------------------------------------- Nav lateral */
.nav-item {
  position: relative;
  transition: background-color .2s ease, color .2s ease;
}
.nav-item::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%) scaleY(0);
  width: 3px; height: 22px; border-radius: 0 3px 3px 0; background: var(--vermelho-claro);
  transition: transform .24s cubic-bezier(.16,1,.3,1);
}
.nav-item.ativo::before { transform: translateY(-50%) scaleY(1); }

/* -------------------------------------- Safe area (iPhone com notch) */
/* Somam-se ao padding base em vez de substitui-lo. */
.safe-bottom { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem); }
.safe-top    { padding-top: calc(env(safe-area-inset-top, 0px) + 1.25rem); }

/* Assinatura */
#assinatura { touch-action: none; background:
  linear-gradient(var(--cinza-200) 1px, transparent 1px) 0 100% / 100% 100% no-repeat; }