/*
  Tradução do design system do AutoVendas (DESIGN.md do autotrack-frontend) para
  CSS puro. Os valores vêm de lá: se mudarem no sistema, mudam aqui também.
*/
@font-face { font-family: "Be Vietnam Pro"; src: url("/fontes/be-vietnam-pro-latin-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Be Vietnam Pro"; src: url("/fontes/be-vietnam-pro-latin-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Be Vietnam Pro"; src: url("/fontes/be-vietnam-pro-latin-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Be Vietnam Pro"; src: url("/fontes/be-vietnam-pro-latin-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/fontes/space-grotesk-latin-var.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }

:root {
  --av-975: #09122a; --av-900: #153b86; --av-700: #114fd4; --av-600: #1767f2; --av-500: #2b87ff; --av-400: #54a6ff; --av-300: #8cc5ff; --av-50: #eef6ff;
  --chao: #f3f4f6; --cartao: #fff; --painel: #fff; --campo: #fff;
  --aro: rgba(0,0,0,.05); --aro-campo: rgba(0,0,0,.08); --fio: rgba(0,0,0,.06);
  --tinta: #111827; --tinta-media: #374151; --apoio: #6b7280; --suave: #f9fafb;
  --trilho: #e5e7eb; --segmento: #fff; --segmento-texto: #111827;
  --ok-bg: #ecfdf5; --ok-tx: #047857; --ok-barra-bg: #d1fae5; --ok-barra-tx: #065f46; --ok: #10b981;
  --at-bg: #fffbeb; --at-tx: #b45309; --at-barra-bg: #fef3c7; --at-barra-tx: #92400e; --at: #f59e0b;
  --cr-bg: #fef2f2; --cr-tx: #b91c1c; --cr-barra-bg: #fee2e2; --cr-barra-tx: #991b1b; --cr: #ef4444;
  --ne-bg: #f1f5f9; --ne-tx: #475569; --ne-barra-bg: #e2e8f0; --ne-barra-tx: #334155; --ne: #94a3b8;
  --vazio: #e5e7eb; --esqueleto: #e5e7eb;
  --aviso-bg: #f8fafc; --aviso-tx: #1e293b; --erro-tx: #7f1d1d;
}
[data-theme=dark] {
  --chao: #0b1322; --cartao: var(--av-975); --painel: #0b1530; --campo: var(--av-975);
  --aro: rgba(255,255,255,.06); --aro-campo: rgba(255,255,255,.09); --fio: rgba(255,255,255,.07);
  --tinta: #f9fafb; --tinta-media: #d1d5db; --apoio: #9ca3af; --suave: rgba(255,255,255,.04);
  --trilho: rgba(255,255,255,.06); --segmento: var(--av-900); --segmento-texto: #fff;
  --ok-bg: rgba(16,185,129,.1); --ok-tx: #6ee7b7; --ok-barra-bg: rgba(16,185,129,.25); --ok-barra-tx: #a7f3d0;
  --at-bg: rgba(245,158,11,.1); --at-tx: #fcd34d; --at-barra-bg: rgba(245,158,11,.25); --at-barra-tx: #fde68a;
  --cr-bg: rgba(239,68,68,.1); --cr-tx: #fca5a5; --cr-barra-bg: rgba(239,68,68,.25); --cr-barra-tx: #fecaca;
  --ne-bg: #1e293b; --ne-tx: #cbd5e1; --ne-barra-bg: rgba(148,163,184,.25); --ne-barra-tx: #e2e8f0;
  --vazio: rgba(255,255,255,.08); --esqueleto: rgba(255,255,255,.07);
  --aviso-bg: rgba(30,41,59,.6); --aviso-tx: #f1f5f9; --erro-tx: #fee2e2;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--chao); color: var(--tinta); font: 400 14px/1.43 "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
svg.ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.num { font-family: "Space Grotesk", "Be Vietnam Pro", ui-sans-serif, sans-serif; font-weight: 600; font-variant-numeric: tabular-nums; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--av-500); outline-offset: 2px; }

/* Barra do admin */
.topo-admin { background: var(--av-975); border-bottom: 1px solid rgba(255,255,255,.08); }
.topo-dentro { max-width: 1400px; margin: 0 auto; height: 64px; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.marca { display: flex; align-items: center; gap: 10px; min-width: 0; }
.marca img { height: 28px; width: auto; display: block; }
.selo { display: inline-flex; align-items: center; border-radius: 9999px; background: rgba(43,135,255,.1); color: var(--av-300); padding: 2px 8px; font-size: 11.5px; font-weight: 600; }
.acoes-topo { display: flex; align-items: center; gap: 4px; }
.acoes-topo form { margin: 0; }
.btn-topo { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 0; border-radius: 9999px; background: transparent; color: #9ca3af; font-size: 12px; font-weight: 500; cursor: pointer; transition: background-color .15s, color .15s; white-space: nowrap; }
.btn-topo:hover { background: rgba(255,255,255,.06); color: #f9fafb; }

/* Página */
main { max-width: 1400px; margin: 0 auto; padding: 32px 32px 64px; }
.rotulo { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--av-600); }
[data-theme=dark] .rotulo { color: var(--av-400); }
h1 { margin: 4px 0 0; font-size: 30px; line-height: 1.2; font-weight: 700; letter-spacing: -.025em; }
.apoio { margin: 4px 0 0; color: var(--apoio); }

.superficie { background: var(--cartao); box-shadow: inset 0 0 0 1px var(--aro); border-radius: 10px; }

/* Barra de proporção */
.barra { display: flex; gap: 2px; height: 44px; margin-top: 24px; border-radius: 10px; overflow: hidden; font-size: 13px; font-weight: 600; }
.barra > div { display: flex; align-items: center; gap: 5px; padding: 0 14px; white-space: nowrap; min-width: max-content; }
.b-normal { background: var(--ok-barra-bg); color: var(--ok-barra-tx); }
.b-instavel { background: var(--at-barra-bg); color: var(--at-barra-tx); }
.b-sem_verificacao { background: var(--ne-barra-bg); color: var(--ne-barra-tx); }
.b-fora { background: var(--cr-barra-bg); color: var(--cr-barra-tx); }

.desatualizado { opacity: .55; }

/* Avisos */
.faixa { margin-top: 12px; border-radius: 10px; padding: 12px 16px; font-size: 13px; }
.faixa-neutra { background: var(--aviso-bg); color: var(--aviso-tx); box-shadow: inset 0 0 0 1px var(--aro); }
.faixa-critica { background: var(--cr-bg); color: var(--erro-tx); box-shadow: inset 0 0 0 1px rgba(239,68,68,.2); font-weight: 600; }

/* Título de seção */
.secao { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.secao h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.secao h2::before { content: ""; width: 3px; height: 16px; border-radius: 9999px; background: var(--av-600); }
.controles { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

/* Busca */
.busca { position: relative; display: flex; align-items: center; }
.busca svg { position: absolute; left: 12px; color: var(--apoio); pointer-events: none; }
.busca input { width: 260px; height: 40px; border: 0; border-radius: 8px; padding: 0 12px 0 36px; font-size: 14px; background: var(--campo); box-shadow: inset 0 0 0 1px var(--aro-campo); }
.busca input::placeholder { color: var(--apoio); }

/* Seletor em trilho */
.trilho { display: flex; gap: 2px; padding: 3px; height: 40px; border-radius: 10px; background: var(--trilho); }
.trilho button { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--apoio); font-size: 13px; font-weight: 600; cursor: pointer; }
.trilho button[aria-pressed=true] { background: var(--segmento); color: var(--segmento-texto); box-shadow: 0 1px 2px rgba(0,0,0,.05); }

/* Chips de segmento */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.filtros button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 0; border-radius: 9999px; background: var(--cartao); box-shadow: inset 0 0 0 1px var(--aro-campo); color: var(--tinta-media); font-size: 13px; font-weight: 600; line-height: 1.35; cursor: pointer; transition: background-color .15s; }
.filtros button:hover { background: var(--suave); }
.filtros button[aria-pressed=true] { background: var(--av-600); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.filtros .num { opacity: .75; }
.filtros button[aria-pressed=true] .num { opacity: 1; }

/* Chip de estado */
.estado { display: inline-flex; align-items: center; gap: 6px; border-radius: 9999px; padding: 2px 8px; font-size: 11.5px; font-weight: 600; line-height: 1.35; white-space: nowrap; }
.estado i, .marcador { width: 6px; height: 6px; border-radius: 50%; flex: none; display: inline-block; }
.e-normal { background: var(--ok-bg); color: var(--ok-tx); } .e-normal i, .m-normal { background: var(--ok); }
.e-instavel { background: var(--at-bg); color: var(--at-tx); } .e-instavel i, .m-instavel { background: var(--at); }
.e-sem_verificacao { background: var(--ne-bg); color: var(--ne-tx); } .e-sem_verificacao i, .m-sem_verificacao { background: var(--ne); }
.e-fora { background: var(--cr-bg); color: var(--cr-tx); } .e-fora i, .m-fora { background: var(--cr); }

/* Cartões */
.grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.func { position: relative; display: flex; flex-direction: column; gap: 8px; width: 100%; min-height: 148px; padding: 20px; border: 0; overflow: hidden; text-align: left; cursor: pointer; background: var(--cartao); box-shadow: inset 0 0 0 1px var(--aro); border-radius: 10px; }
.func:hover { box-shadow: inset 0 0 0 1px var(--aro-campo); }
.func::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: transparent; }
.f-fora::before { background: var(--cr); } .f-instavel::before { background: var(--at); } .f-sem_verificacao::before { background: var(--ne); }
.cabeca { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cabeca h3, .cabeca h4 { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.43; }
.impacto { flex: 1; margin: 0; color: var(--apoio); font-size: 13px; line-height: 1.35; }
.sistemas { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; font-weight: 500; color: var(--tinta-media); }
.sistemas span { display: inline-flex; align-items: center; gap: 6px; }

/* Tabela */
.quadro { grid-column: 1 / -1; overflow-x: auto; background: var(--cartao); box-shadow: inset 0 0 0 1px var(--aro); border-radius: 10px; }
.quadro table { width: 100%; min-width: 980px; border-collapse: collapse; font-size: 13px; }
.quadro th { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--fio); white-space: nowrap; }
.quadro td { padding: 12px 16px; border-bottom: 1px solid var(--fio); vertical-align: middle; }
.quadro tbody tr:last-child td { border-bottom: 0; }
.quadro tbody tr { cursor: pointer; }
.quadro tbody tr:hover td { background: var(--suave); }
.ordenar { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--apoio); font-size: 11.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.ordenar:hover, .ordenar.on { color: var(--tinta); }
.ordenar span { opacity: .5; font-size: 11px; }
.ordenar.on span { opacity: 1; color: var(--av-600); }
.nome { padding: 0; border: 0; background: none; text-align: left; font-size: 13px; font-weight: 600; cursor: pointer; }
.fraco { color: var(--apoio); }
.hist { display: flex; gap: 2px; }
.hist i { flex: 1; height: 24px; border-radius: 2px; background: var(--vazio); }
.hist i.h-normal { background: var(--ok); } .hist i.h-instavel { background: var(--at); } .hist i.h-sem_verificacao { background: var(--ne); } .hist i.h-fora { background: var(--cr); }
.hist.mini { width: 148px; gap: 1px; }
.hist.mini i { height: 16px; border-radius: 1px; }

/* Verificar de novo */
.celula-acao { width: 56px; padding-block: 4px !important; text-align: right; }
.verificar-icone { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--aro-campo); border-radius: 8px; background: transparent; color: var(--tinta-media); cursor: pointer; }
.verificar-icone:hover { background: var(--suave); }
.btn-compacto { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--aro-campo); border-radius: 8px; background: transparent; color: var(--tinta-media); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.btn-compacto:hover { background: var(--suave); }
.btn-compacto:disabled, .verificar-icone:disabled { opacity: .6; cursor: not-allowed; }
.girando svg { animation: giro 1s linear infinite; }
@keyframes giro { to { transform: rotate(360deg); } }
.rodape-sis { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.rodape-sis .verificado { margin-top: 0; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.aviso-acao { position: fixed; left: 50%; bottom: 24px; z-index: 5; width: max-content; max-width: min(480px, calc(100vw - 32px)); padding: 10px 14px; transform: translateX(-50%); border-radius: 8px; background: var(--av-975); color: #fff; font-size: 13px; box-shadow: 0 10px 24px -12px rgba(9,18,42,.45); }
[data-theme=dark] .aviso-acao { background: #1e293b; }

/* Vazio e carregamento */
.vazio { grid-column: 1 / -1; padding: 40px 20px; text-align: center; color: var(--apoio); }
.vazio p { margin: 0 0 12px; }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; }
.btn-primario { border: 0; background: var(--av-600); color: #fff; transition: background-color .15s; }
.btn-primario:hover { background: var(--av-700); }
.btn-secundario { border: 1px solid var(--aro-campo); background: transparent; color: var(--tinta-media); }
.btn-secundario:hover { background: var(--suave); }
.esqueleto { min-height: 148px; border-radius: 10px; background: var(--esqueleto); animation: pulso 1.6s ease-in-out infinite; }
.esqueleto-barra { height: 44px; margin-top: 24px; border-radius: 10px; background: var(--esqueleto); animation: pulso 1.6s ease-in-out infinite; }
@keyframes pulso { 50% { opacity: .55; } }

/* Painel lateral */
.veu { position: fixed; inset: 0; background: rgba(0,0,0,.3); opacity: 0; pointer-events: none; transition: opacity .18s; }
.veu.on { opacity: 1; pointer-events: auto; }
.painel { position: fixed; inset: 0 0 0 auto; width: min(34rem, 100%); display: flex; flex-direction: column; background: var(--painel); box-shadow: -1px 0 0 var(--aro), 0 25px 50px -12px rgba(0,0,0,.25); transform: translateX(100%); visibility: hidden; transition: transform .22s ease, visibility .22s; }
.painel.on { transform: none; visibility: visible; }
.p-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 24px; border-bottom: 1px solid var(--fio); }
.p-topo h2 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.p-topo p { margin: 4px 0 0; color: var(--apoio); font-size: 13px; }
.fechar { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border: 1px solid var(--aro-campo); border-radius: 8px; background: transparent; color: var(--tinta-media); cursor: pointer; }
.fechar:hover { background: var(--suave); }
.p-corpo { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 16px 24px 24px; }
.sis { padding: 16px; background: var(--cartao); box-shadow: inset 0 0 0 1px var(--aro); border-radius: 10px; }
[data-theme=dark] .sis { background: rgba(255,255,255,.03); }
.sinais { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 12px; font-size: 13px; }
.sinais small { display: block; margin-bottom: 2px; color: var(--apoio); font-size: 11.5px; font-weight: 600; }
.hist-bloco { margin-top: 12px; }
.hist-rotulos { display: flex; justify-content: space-between; margin-top: 4px; color: var(--apoio); font-size: 11.5px; }
.fazer { margin-top: 12px; padding: 12px; background: var(--av-50); color: #0f254f; border-radius: 8px; font-size: 13px; }
[data-theme=dark] .fazer { background: rgba(43,135,255,.1); color: #d9ebff; }
.fazer b { font-weight: 600; }
.verificado { margin-top: 10px; color: var(--apoio); font-size: 11.5px; }

@media (max-width: 1024px) { .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .topo-dentro { height: 56px; padding: 0 16px; }
  .marca img { height: 24px; }
  .btn-topo span { display: none; }
  .btn-topo { width: 44px; height: 44px; padding: 0; justify-content: center; }
  main { padding: 20px 16px 48px; }
  h1 { font-size: 20px; }
  .grade { grid-template-columns: minmax(0, 1fr); }
  .func { min-height: 0; }
  .secao { align-items: stretch; flex-direction: column; }
  .controles { width: 100%; }
  .busca { flex: 1 1 100%; }
  .busca input { width: 100%; height: 44px; }
  .trilho { flex: 1; height: 44px; }
  .trilho button { flex: 1; justify-content: center; }
  .filtros { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding-inline: 16px; scrollbar-width: none; }
  .filtros button { flex: none; }
  .barra { font-size: 12px; }
  .barra > div { padding: 0 10px; }
  .sinais { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .p-topo { padding: 16px; }
  .p-corpo { padding: 12px 16px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .veu, .painel { transition: none; }
  .girando svg { animation: none; }
  .esqueleto, .esqueleto-barra { animation: none; }
}

/* Login */
.entrada { min-height: 100dvh; }
/* A capa fica navy nos dois temas: é a marca, não a superfície da página. */
.capa { position: relative; overflow: hidden; height: 46vh; min-height: 340px; padding: 32px 40px; background: linear-gradient(170deg, var(--av-975) 35%, #132b5e); color: #fff; text-align: center; }
.capa img { display: block; height: 32px; width: auto; margin: 0 auto 40px; }
.capa h1 { margin: 0 0 8px; }
.capa p { margin: 0; color: #cbd5e1; text-wrap: balance; }
.regua { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); }
.regua svg { display: block; flex: none; }
.entrada main { position: relative; max-width: none; width: min(452px, 100%); margin: -96px auto 0; padding: 0 16px 32px; }
.entrada-form form { display: flex; flex-direction: column; gap: 20px; padding: 32px; background: var(--cartao); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--aro), 0 28px 56px -32px rgba(9,18,42,.45); }
.entrada-form h2 { margin: 0 0 4px; font-size: 24px; line-height: 1.33; font-weight: 600; letter-spacing: -.015em; }
.entrada-form .btn { width: 100%; height: 44px; margin-top: 4px; font-size: 14px; }
.entrada-form .btn:disabled { opacity: .5; cursor: not-allowed; }
.campo { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 600; }
.campo input { width: 100%; height: 44px; border: 0; border-radius: 8px; padding: 10px 12px; font-size: 14px; font-weight: 400; background: var(--campo); box-shadow: inset 0 0 0 1px var(--aro-campo); }
.campo input:-webkit-autofill { -webkit-text-fill-color: var(--tinta); box-shadow: inset 0 0 0 100px var(--campo), inset 0 0 0 1px var(--aro-campo); }
.campo-senha { position: relative; display: block; }
.campo-senha input { padding-right: 44px; }
.ver-senha { position: absolute; top: 2px; right: 2px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--apoio); cursor: pointer; }
.ver-senha:hover { color: var(--tinta); }
.ver-senha[aria-pressed=true] { color: var(--av-600); }
[data-theme=dark] .ver-senha[aria-pressed=true] { color: var(--av-400); }
.erro-login { background: var(--cr-bg); color: var(--erro-tx); box-shadow: inset 0 0 0 1px rgba(239,68,68,.2); border-radius: 10px; padding: 12px 16px; font-size: 13px; }
@media (max-width: 760px) {
  .capa { height: 300px; min-height: 0; padding: 24px 16px; }
  .capa img { margin-bottom: 24px; }
  .capa h1 { font-size: 24px; }
  .regua { display: none; }
  .entrada main { margin-top: -72px; }
  .entrada-form form { padding: 24px 20px; }
}