/* ISM Veículos — painel de frota. Mobile-first, sem dependências externas. */
:root {
  color-scheme: light;
  --bg: #f2f5fb;
  --surface: #ffffff;
  --ink: #14203d;
  --muted: #5d6b8a;
  --line: #dbe2f0;
  --navy: #1d3f8f;
  --navy-2: #0072bc;
  --amber: #008cd2;
  --indigo: #35207f;
  --ok: #1f8a4c;
  --bad: #c6362c;
  --radius: 12px;
  --shadow: 0 1px 2px rgb(20 25 40 / .06), 0 4px 14px rgb(20 25 40 / .05);
  --font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 var(--font); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .6rem; letter-spacing: -.01em; }
h1 { font-size: 1.6rem; } h2 { font-size: 1.1rem; } h3 { font-size: 1rem; color: var(--muted); }
a { color: var(--navy-2); }
small, .muted { color: var(--muted); font-weight: 400; }
img { max-width: 100%; height: auto; }

/* Topbar */
.topbar { background: var(--surface); color: var(--ink); border-bottom: 3px solid transparent; border-image: linear-gradient(90deg, var(--indigo), var(--navy), var(--amber)) 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: .6rem 1rem; position: sticky; top: 0; z-index: 20; }
.brand { color: var(--ink); text-decoration: none; font-weight: 700; display: inline-flex; align-items: center; gap: .5rem; }
.brand__logo { height: 38px; width: auto; display: block; }
.brand__logo--lg { height: 96px; margin: 0 auto .6rem; }
.brand--lg { display: flex; justify-content: center; }
.topbar__toggle { background: none; border: 0; color: var(--ink); font-size: 1.6rem; padding: .2rem .5rem; cursor: pointer; }
.nav { display: none; width: 100%; flex-direction: column; gap: .15rem; padding: .6rem 0 .3rem; }
.nav.is-open { display: flex; }
.nav__link, .nav__more summary, .nav__logout { color: var(--ink); text-decoration: none; padding: .55rem .7rem; border-radius: 8px; display: block; background: none; border: 0; font: inherit; text-align: left; cursor: pointer; }
.nav__link:hover, .nav__more summary:hover, .nav__logout:hover { background: color-mix(in srgb, var(--navy-2) 12%, transparent); }
.nav__link.is-active { background: color-mix(in srgb, var(--navy-2) 14%, transparent); color: var(--navy); font-weight: 600; box-shadow: inset 3px 0 var(--amber); }
.nav__more { position: relative; }
.nav__more summary { list-style: none; } .nav__more summary::after { content: " ▾"; }
.nav__more > div { display: flex; flex-direction: column; padding-left: .8rem; }
.nav__more > div a { color: var(--ink); text-decoration: none; padding: .45rem .7rem; border-radius: 8px; }
.nav__more > div a:hover { background: color-mix(in srgb, var(--navy-2) 12%, transparent); }
.nav form { margin: 0; }
@media (min-width: 900px) {
  .topbar__toggle { display: none; }
  .nav { display: flex; flex-direction: row; width: auto; align-items: center; padding: 0; gap: .2rem; }
  .nav__more > div { position: absolute; top: 100%; left: 0; min-width: 14rem; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: .4rem; box-shadow: var(--shadow); z-index: 30; }
  .nav__user { margin-left: .8rem; opacity: .85; }
}

/* Layout */
.page { max-width: 1100px; margin: 0 auto; padding: 1.2rem 1rem 4rem; }
.guest { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.page__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: 1.1rem; }
.page__head h1 { margin: 0; }
.head-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem; box-shadow: var(--shadow); margin-bottom: 1rem; }
.card--form { max-width: 760px; }
.grid-2 { display: grid; gap: 1rem; } @media (min-width: 800px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.login { width: 100%; max-width: 380px; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; display: flex; flex-direction: column; box-shadow: var(--shadow); border-top: 3px solid var(--amber); }
.stat__n { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; }
.stat span:last-child { color: var(--muted); font-size: .85rem; }

/* Flash */
.flash { border-radius: 10px; padding: .7rem 1rem; margin: 0 0 1rem; }
.flash--ok { background: #e3f4ea; color: #14532d; border: 1px solid #b9e2c9; }
.flash--err { background: #fdeceb; color: #7a1c15; border: 1px solid #f3c1bd; }
.flash ul { margin: .3rem 0 0; padding-left: 1.2rem; }

/* Buttons */
.btn, input[type=submit], button.btn { display: inline-block; font: inherit; font-weight: 600; padding: .6rem 1.1rem; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; cursor: pointer; min-height: 44px; }
.btn:hover { border-color: var(--navy-2); }
.btn--primary, input[type=submit].btn--primary { background: linear-gradient(135deg, var(--indigo), var(--navy) 55%, var(--navy-2)); color: #fff; border-color: var(--navy); }
.btn--primary:hover { filter: brightness(1.1); }
.btn--block { width: 100%; }
.btn--sm { min-height: 34px; padding: .25rem .7rem; font-size: .9rem; }
.link-danger { background: none; border: 0; color: var(--bad); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; }

/* Forms */
.form { display: block; }
.field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .9rem; flex: 1; }
.field label, label.lbl { font-weight: 600; font-size: .9rem; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=tel], input[type=datetime-local], select, textarea {
  width: 100%; font: inherit; padding: .65rem .75rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); min-height: 44px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--amber); outline-offset: 1px; border-color: var(--amber); }
.field--error input, .field--error select, .field--error textarea { border-color: var(--bad); }
.error { color: var(--bad); } .hint { color: var(--muted); }
.row { display: flex; flex-direction: column; gap: 0 1rem; } @media (min-width: 640px) { .row { flex-direction: row; } }
.form__actions { display: flex; gap: .6rem; margin-top: 1rem; }
.form__actions--sticky { position: sticky; bottom: 0; background: linear-gradient(transparent, var(--bg) 35%); padding: 1.2rem 0 .8rem; }
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .8rem; }
/* Miniaturas: no máximo 110 px de altura, largura pela proporção (nunca esticada). align-self evita que o item flex (.field)
   estique a imagem na horizontal; width/height auto + max-* mantêm a proporção também quando a coluna é estreita. */
.thumb { width: auto; height: auto; max-height: 110px; max-width: 100%; align-self: flex-start; border-radius: 8px; display: block; margin: .3rem 0; background: #fff; }
.thumb--lg { max-height: 200px; margin-top: .5rem; }
.checks { display: grid; gap: .1rem .8rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin-bottom: 1rem; }
.check { display: flex; gap: .5rem; align-items: center; padding: .35rem 0; }
.check input { width: 1.2rem; height: 1.2rem; }

/* Table */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.table th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: .7rem .9rem; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 92%, var(--navy)); }
.table td { padding: .7rem .9rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.actions { display: flex; gap: .9rem; justify-content: flex-end; white-space: nowrap; } .actions form { margin: 0; }
@media (max-width: 640px) {
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; }
  .table tr { border-bottom: 1px solid var(--line); padding: .5rem 0; }
  .table td { border: 0; padding: .2rem .9rem; display: flex; justify-content: space-between; gap: 1rem; }
  .table td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: .85rem; }
  .table td.actions { justify-content: flex-end; gap: 1.4rem; } /* no cartão do celular, alinhadas à direita como os valores */
}
.empty { text-align: center; color: var(--muted); padding: 2.5rem 1rem; background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); }
.list { list-style: none; padding: 0; margin: 0; } .list li { padding: .5rem 0; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .2rem .6rem; align-items: center; } .list li:last-child { border: 0; }
.list--cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); column-gap: 1.2rem; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .8rem; margin: 0 0 .6rem; }
.facts dt { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } .facts dd { margin: 0; font-weight: 600; }
.gallery { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1rem; align-items: stretch; }
.gallery figure { display: flex; flex-direction: column; margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem; text-align: center; }
.gallery img { background: #fff; border-radius: 6px; display: block; margin: auto; object-fit: contain; max-width: 100%; }
/* Telas estreitas: altura fixa; o teto tem a largura da lateral (mesma proporção) */
@media (max-width: 899px) {
  .gallery img { height: 110px; width: auto; }
  .gallery .gallery__roof img { width: calc(110px * var(--ratio, 3)); height: auto; }
}
/* Telas grandes: uma única linha; cada figura ocupa largura proporcional à sua proporção => mesma altura em todas */
@media (min-width: 900px) {
  .gallery { flex-wrap: nowrap; }
  .gallery figure { flex: var(--ratio, 1) 1 0; min-width: 0; }
  .gallery img { width: 100%; height: auto; }
}
.gallery figcaption { font-size: .8rem; color: var(--muted); }

/* Status chips (legenda do checklist) */
.status { display: inline-grid; place-items: center; min-width: 1.8rem; height: 1.8rem; padding: 0 .3rem; border-radius: 7px; font-weight: 800; font-size: .85rem; color: #fff; background: var(--ok); }
.status--nao_conforme { background: var(--bad); } .status--faltando { background: #4a5568; }
.legend { font-size: .9rem; margin: 0 0 1rem; }
.legend__title { display: block; margin-bottom: .4rem; }
/* grade: todas as células com a mesma largura; chip fixo + nome alinhados à esquerda */
.legend__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem .8rem; }
.legend__item { display: grid; grid-template-columns: 2.2rem 1fr; align-items: center; gap: .5rem; }
.legend__item .status { width: 2.2rem; height: 2.2rem; }
@media (min-width: 560px) { .legend__grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) { .legend__grid { grid-template-columns: repeat(7, 1fr); } }

/* Fuel */
.fuelpick { display: flex; flex-wrap: wrap; gap: .4rem; }
.fuelpick__opt { position: relative; }
.fuelpick__opt input { position: absolute; opacity: 0; inset: 0; }
.fuelpick__opt span { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 .8rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-weight: 700; cursor: pointer; }
.fuelpick__opt input:checked + span { background: var(--navy); color: #fff; border-color: var(--navy); }
.fuelpick__opt input:focus-visible + span { outline: 2px solid var(--amber); outline-offset: 2px; }

/* Inspection item rows */
.item { padding: .7rem 0; border-bottom: 1px solid var(--line); display: grid; gap: .5rem; }
.item:last-child { border: 0; }
.item--bad { background: color-mix(in srgb, var(--bad) 7%, transparent); margin: 0 -.5rem; padding-left: .5rem; padding-right: .5rem; border-radius: 8px; }
.item__name { font-weight: 600; font-size: .95rem; }
.item__status { display: flex; flex-wrap: wrap; gap: .35rem; }
.pill { position: relative; }
.pill input { position: absolute; opacity: 0; inset: 0; }
.pill span { display: grid; place-items: center; min-width: 44px; padding: 0 .9rem; white-space: nowrap; height: 40px; border-radius: 9px; border: 2px solid var(--line); font-weight: 800; background: var(--surface); cursor: pointer; }
.pill input:checked + span { color: #fff; border-color: transparent; background: var(--ok); }
.pill--nao_conforme input:checked + span { background: var(--bad); } .pill--faltando input:checked + span { background: #4a5568; }
/* urgência: Crítica (vermelho) · Alta (laranja) · Baixa (azul); o nome aparece no próprio botão */
.pill--urg-critica input:checked + span { background: var(--bad); } .pill--urg-alta input:checked + span { background: #d9760f; } .pill--urg-baixa input:checked + span { background: #1d6fb8; }
.urgency { border: 0; padding: 0; margin: 0 0 .6rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.urgency legend { font-weight: 700; font-size: .9rem; padding: 0; margin-bottom: .3rem; float: left; width: 100%; }
.item__details { display: grid; gap: .5rem; grid-column: 1 / -1; }
.item__details[hidden] { display: none; }
.pill input:focus-visible + span { outline: 2px solid var(--amber); outline-offset: 2px; }
.item__photo input[type=file] { width: 100%; }
@media (min-width: 760px) { .item { grid-template-columns: 1fr auto; align-items: center; } .item__photo { grid-column: 1 / -1; } }
.bad-list { display: grid; gap: .8rem; } .bad { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }


.stat--link { text-decoration: none; color: inherit; } .stat--link:hover { border-top-color: var(--navy); }
.tag { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 700; vertical-align: middle; }
.tag--pendente { background: #fff1d6; color: #8a5a00; } .tag--vistoriado { background: #dcf3e6; color: #14663a; }
.filters { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.filters a { padding: .35rem .8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); text-decoration: none; font-size: .9rem; color: var(--ink); }
.filters a.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }

/* Mostrador de combustível: 3 estilos (horizontal, vertical, circular) com as mesmas labels/rádios; só o CSS muda de lugar. */
.gauge { border: 0; padding: 0; margin: 0 0 .9rem; min-width: 0; }
.gauge__title { font-weight: 600; font-size: .9rem; padding: 0; margin-bottom: .4rem; }
.gauge__panel { display: flex; align-items: center; gap: .8rem; max-width: 560px; padding: .55rem .8rem; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.gauge__pump { flex: none; width: 26px; height: 26px; color: var(--navy-2); }
.gauge__scale { flex: 1; min-width: 0; display: flex; align-items: center; gap: .5rem; }
.gauge__bars { order: 1; flex: 1; min-width: 0; display: flex; flex-direction: row-reverse; gap: 4px; } /* no HTML vêm de N a 1: invertido, 1 (E) fica à esquerda */
.gauge__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gauge__bar { flex: 1; min-width: 0; height: 40px; border-radius: 6px; cursor: pointer; font-size: 0; color: transparent; /* o número fica só no aria-label/title */ transition: background-color .12s, transform .12s; }
.gauge__bar--low { background: #fbe1df; } .gauge__bar--warn { background: #fdecc8; } .gauge__bar--ok { background: #dcf1e3; }
.gauge__bar--low.is-on { background: #e5322d; } .gauge__bar--warn.is-on { background: #f5a300; } .gauge__bar--ok.is-on { background: #2fa84f; }
.gauge__bar:hover { transform: translateY(-1px); filter: brightness(.96); }
.gauge__input:focus-visible + .gauge__bar, .gauge__input:focus-visible + .gauge__label { outline: 2px solid var(--amber); outline-offset: 2px; }
.gauge__label { flex: none; width: 1.6rem; text-align: center; font-weight: 800; font-size: .95rem; line-height: 1; cursor: pointer; padding: .5rem 0; color: var(--muted); }
.gauge__label--empty { order: 0; color: #c6362c; }
.gauge__label--full { order: 2; color: #1f8a4c; cursor: default; }
@media (max-width: 460px) { .gauge--horizontal .gauge__pump { display: none; } .gauge--horizontal .gauge__bar { height: 44px; } }
.gauge__needle { display: none; }

/* vertical: E embaixo, F no alto (no HTML as barras vêm de N a 1, então a de cima é a cheia) */
.gauge--vertical .gauge__panel { display: inline-flex; max-width: none; gap: 1.1rem; padding: .8rem 1.1rem; }
.gauge--vertical .gauge__scale { flex: none; flex-direction: column; gap: .35rem; }
.gauge--vertical .gauge__bars { order: 1; flex: none; flex-direction: column; width: 120px; gap: 4px; }
.gauge--vertical .gauge__bar { flex: none; height: 24px; }
.gauge--vertical .gauge__label--full { order: 0; } .gauge--vertical .gauge__label--empty { order: 2; }
.gauge--vertical .gauge__label { padding: .15rem 0; }

/* circular: mostrador analógico claro; as marcas (labels) ficam num arco de 210° e o ponteiro aponta para o nível */
.gauge--circular .gauge__panel { position: relative; display: block; width: 270px; max-width: 100%; height: 190px; padding: 0; border-radius: 16px; }
.gauge--circular .gauge__scale, .gauge--circular .gauge__bars { display: contents; }
.gauge--circular .gauge__pump { position: absolute; left: 50%; top: 74%; width: 24px; height: 24px; margin-left: -12px; }
.gauge--circular .gauge__bar { position: absolute; left: 50%; top: 62%; flex: none; width: 15px; height: 30px; margin: -15px 0 0 -7.5px; border-radius: 4px;
  transform: rotate(var(--a)) translateY(-82px); }
.gauge--circular .gauge__bar:hover { transform: rotate(var(--a)) translateY(-85px); }
.gauge--circular .gauge__bar::after { content: ""; position: absolute; inset: -7px -6px; } /* área de toque maior que a marca */
.gauge--circular .gauge__label { position: absolute; left: 50%; top: 62%; width: 1.6rem; margin: -.5rem 0 0 -.8rem; padding: 0; }
.gauge--circular .gauge__label--empty { transform: rotate(-128deg) translateY(-104px) rotate(128deg); }
.gauge--circular .gauge__label--full { transform: rotate(128deg) translateY(-104px) rotate(-128deg); }
.gauge--circular .gauge__needle { display: block; position: absolute; left: 50%; top: 62%; width: 4px; height: 66px; margin: -66px 0 0 -2px; background: var(--ink);
  border-radius: 2px 2px 0 0; transform-origin: 50% 100%; transform: rotate(var(--needle, -130deg)); transition: transform .3s cubic-bezier(.3, 1.35, .5, 1); pointer-events: none; }
.gauge--circular .gauge__needle::after { content: ""; position: absolute; bottom: -8px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--ink); }
@media (prefers-reduced-motion: reduce) { .gauge--circular .gauge__needle, .gauge__bar { transition: none; } }

/* somente leitura / pré-visualização */
.gauge--static .gauge__bar, .gauge--static .gauge__label { cursor: default; }
.gauge--static .gauge__bar:hover { transform: none; filter: none; }
.gauge--circular.gauge--static .gauge__bar:hover { transform: rotate(var(--a)) translateY(-82px); }
.gauge--compact { margin: 0; display: inline-block; vertical-align: middle; }
.gauge--compact .gauge__panel { zoom: .62; }
.gauge-choices { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin: .3rem 0 1rem; }
.gauge-choice { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: .7rem .5rem; border: 2px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; font-weight: 600; }
.gauge-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gauge-choice:has(input:checked) { border-color: var(--navy-2); background: color-mix(in srgb, var(--navy-2) 8%, var(--surface)); }
.gauge-choice:has(input:focus-visible) { outline: 2px solid var(--amber); outline-offset: 2px; }
.gauge-choice .gauge { pointer-events: none; }
.gauge__read { margin: .5rem 0 .2rem; font-weight: 700; }

.vehicle-photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .8rem; margin: .4rem 0 1rem; }
.vehicle-photos figure { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem; text-align: center; }
.vehicle-photos img { height: 150px; width: 100%; object-fit: contain; }
.vehicle-photos figcaption { font-size: .8rem; color: var(--muted); }

.vehicle-pick { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .4rem; }
.vehicle-pick[hidden], .vehicle-pick li[hidden], .empty[hidden] { display: none; }
.vehicle-pick a { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; padding: .7rem .9rem; min-height: 48px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); text-decoration: none; }
.vehicle-pick a:hover, .vehicle-pick a:focus-visible { border-color: var(--navy-2); background: color-mix(in srgb, var(--navy-2) 6%, var(--surface)); }
.vehicle-pick__plate { font-weight: 800; letter-spacing: .04em; }
.vehicle-pick__model { color: var(--muted); flex: 1; min-width: 8rem; }
input[type=search] { width: 100%; font: inherit; padding: .65rem .75rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); min-height: 44px; }

.thumbs { display: inline-flex; flex-wrap: nowrap; gap: .3rem; align-items: center; min-height: 44px; }
.thumbs img { flex: none; height: 44px; width: 72px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 2px; }

.brand__title { font-size: 1.05rem; font-weight: 700; color: var(--navy); letter-spacing: -.01em; padding-left: .7rem; border-left: 2px solid var(--line); line-height: 1.1; }
@media (max-width: 420px) { .brand__title { font-size: .9rem; } }

.item__chosen { align-self: center; margin-left: .3rem; padding: .15rem .7rem; border-radius: 999px; font-weight: 700; font-size: .85rem; color: #fff; background: var(--ok); }

/* Foto ampliada (lightbox com zoom) */
.thumb-button { background: none; border: 0; padding: 0; cursor: zoom-in; border-radius: 8px; }
.thumb-button:hover .thumb, .thumb-button:focus-visible .thumb { outline: 3px solid var(--amber); outline-offset: 2px; }
.lightbox { border: 0; padding: 0; border-radius: 14px; width: min(96vw, 1200px); height: min(92vh, 900px); max-width: none; background: var(--surface); box-shadow: 0 20px 60px rgb(0 0 0 / .45); }
.lightbox[open] { display: flex; flex-direction: column; }
.lightbox::backdrop { background: rgb(8 14 30 / .78); }
.lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .6rem .9rem; border-bottom: 1px solid var(--line); }
.lightbox__caption { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lightbox__tools { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }
.lightbox__tools button { font: inherit; font-weight: 700; min-width: 44px; min-height: 44px; padding: 0 .7rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); cursor: pointer; }
.lightbox__tools output { min-width: 3.4rem; text-align: center; font-variant-numeric: tabular-nums; }
.lightbox__stage { flex: 1; overflow: auto; background: #0e1424; display: flex; touch-action: pan-x pan-y pinch-zoom; }
.lightbox__stage img { display: block; margin: auto; width: 100%; max-width: 100%; height: auto; max-height: none; object-fit: contain; background: #fff; }
.lightbox__hint { margin: 0; padding: .4rem .9rem; font-size: .8rem; color: var(--muted); border-top: 1px solid var(--line); }
@media (max-width: 560px) { .lightbox__hint { display: none; } .lightbox__caption { font-size: .85rem; } }

/* Agendamento de manutenção */
.tag--vencida { background: #fde2e0; color: #8f1d15; } .tag--em_breve { background: #fff1d6; color: #8a5a00; }
.tag--em_dia { background: #dcf3e6; color: #14663a; } .tag--cumprida { background: #e6e9f0; color: #4a5568; }
.stat--alert { border-top-color: var(--bad); }
.schedule-group { border: 1px dashed var(--line); border-radius: var(--radius); padding: .8rem 1rem .2rem; margin: 0 0 1rem; min-width: 0; }
.schedule-group[hidden] { display: none; }
.schedule-group legend { font-weight: 700; font-size: .9rem; padding: 0 .4rem; }

/* Relatórios */
.report-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.report-card { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: .5rem; margin: 0; }
a.report-card:hover { border-color: var(--navy-2); }
.report-card .btn { align-self: flex-start; margin-top: auto; }
.report-filters { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-end; }
.report-filters .field { flex: 1 1 150px; margin-bottom: 0; }
.report-filters__go { flex: 0 0 auto !important; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.report-totals { margin-top: 1rem; }

.cycle-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; font-size: .9rem; }
.cycle-form select { width: auto; min-height: 36px; padding: .3rem .6rem; }
.inline-form { display: inline; margin: 0; }
.flash--warn { background: #fff4d6; color: #7a5200; border: 1px solid #f1d58a; }

.audit-changes { list-style: none; margin: 0; padding: 0; font-size: .85rem; } .audit-changes li { padding: .1rem 0; }
.tag--audit-create { background: #dcf3e6; color: #14663a; } .tag--audit-update { background: #e3ecfb; color: #1d3f8f; } .tag--audit-destroy { background: #fde2e0; color: #8f1d15; }
.pager { display: flex; gap: 1rem; align-items: center; justify-content: center; margin-top: 1rem; }

/* Manual de uso */
.manual { max-width: 860px; }
.manual__title { font-size: 1.5rem; margin-bottom: .2rem; }
.manual .card h3 { color: var(--navy); font-size: 1.15rem; margin-bottom: .7rem; padding-bottom: .4rem; border-bottom: 2px solid var(--line); }
.manual h4 { margin: 1rem 0 .4rem; font-size: 1rem; }
.manual ol, .manual ul { padding-left: 1.3rem; } .manual li { margin: .35rem 0; }
.manual__toc ol { columns: 2; column-gap: 2rem; margin: .4rem 0 0; } .manual__toc li { break-inside: avoid; }
@media (max-width: 560px) { .manual__toc ol { columns: 1; } }
.manual__note { background: #fff4d6; border-left: 4px solid #f1b84a; padding: .5rem .8rem; border-radius: 6px; list-style-position: inside; }
.manual__tip { background: #e8f1fb; border-left: 4px solid var(--navy-2); padding: .5rem .8rem; border-radius: 6px; }
.manual__legend { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .3rem .8rem; padding-left: 0; margin: .5rem 0; }
.manual__legend li { display: flex; align-items: center; gap: .5rem; }
.manual__faq dt { font-weight: 700; margin-top: .8rem; } .manual__faq dd { margin: .2rem 0 0; color: var(--ink); }
.manual__table th, .manual__table td { font-size: .9rem; }
.manual kbd { border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 0 .35rem; font-size: .85em; background: var(--surface); }
.manual code { background: #eef2fa; border-radius: 4px; padding: 0 .3rem; }
.manual a[href^="#"] { scroll-margin-top: 4.5rem; } .manual section[id] { scroll-margin-top: 4.5rem; }
@media print {
  .topbar, .no-print, .flash { display: none !important; }
  body { background: #fff; } .page { padding: 0; max-width: none; }
  .manual .card { box-shadow: none; break-inside: avoid-page; border-color: #ccc; }
}

.search-form { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; align-items: center; }
.search-form input[type=search] { flex: 1 1 260px; max-width: 460px; }

/* Painel: filtros, indicadores e gráficos */
.dash-filters { display: flex; flex-wrap: wrap; gap: .6rem 1rem; margin-bottom: 1rem; }
.dash-filters .field { margin-bottom: 0; flex: 0 1 190px; }
.stats--kpi { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.stat--hero { grid-column: span 2; border-top-color: var(--navy); }
.stat__n--hero { font-size: 3.2rem; line-height: 1; letter-spacing: -.03em; color: var(--navy); }
@media (max-width: 460px) { .stat--hero { grid-column: 1 / -1; } }

.chart { margin: 0; position: relative; }
.chart figcaption { display: flex; flex-direction: column; margin-bottom: .8rem; } .chart figcaption small { font-size: .8rem; }
.chart__plot { position: relative; height: 170px; margin-left: 2.8rem; border-bottom: 1px solid var(--line); }
.chart__grid { position: absolute; inset: 0; }
.chart__tick { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line); height: 0; }
.chart__tick span { position: absolute; right: calc(100% + .4rem); top: -.55em; font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.chart__cols { position: absolute; inset: 0; display: flex; gap: 6px; }
.chart__col { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; display: flex; align-items: flex-end; justify-content: center; position: relative; cursor: default; border-radius: 6px; }
.chart__bar { display: block; width: min(100%, 24px); height: var(--h); background: var(--navy-2); border-radius: 4px 4px 0 0; transition: filter .12s; }
.chart__col:hover .chart__bar, .chart__col:focus-visible .chart__bar { filter: brightness(1.25); }
.chart__col:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.chart__col:hover { background: color-mix(in srgb, var(--navy-2) 7%, transparent); }
.chart__cap { position: absolute; left: 50%; bottom: calc(var(--h) + 4px); transform: translateX(-50%); font-size: .75rem; font-weight: 700; color: var(--ink); white-space: nowrap; }
.chart__xaxis { display: flex; gap: 6px; margin: .35rem 0 0 2.8rem; font-size: .72rem; color: var(--muted); }
.chart__xaxis span { flex: 1; min-width: 0; text-align: center; overflow: hidden; text-overflow: clip; white-space: nowrap; }
.chart__tip { position: absolute; z-index: 5; pointer-events: none; background: var(--ink); color: #fff; border-radius: 8px; padding: .3rem .6rem; font-size: .8rem; display: flex; flex-direction: column; align-items: center; white-space: nowrap; box-shadow: var(--shadow); }
.chart__tip[hidden] { display: none; } .chart__tip strong { font-size: .95rem; } .chart__tip span { opacity: .8; }
.chart__table { margin-top: .8rem; font-size: .85rem; } .chart__table summary { cursor: pointer; color: var(--muted); }
.table--compact td, .table--compact th { padding: .3rem .6rem; font-size: .85rem; }

.hbars { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.hbars__row { display: grid; grid-template-columns: minmax(7rem, 38%) 1fr 2.4rem; align-items: center; gap: .6rem; border-radius: 6px; padding: .1rem .2rem; }
.hbars__row:hover, .hbars__row:focus-visible { background: color-mix(in srgb, var(--navy-2) 7%, transparent); outline: none; }
.hbars__label { font-size: .88rem; overflow-wrap: anywhere; }
.hbars__track { display: block; height: 16px; }
.hbars__bar { display: block; height: 16px; background: var(--navy-2); border-radius: 0 4px 4px 0; max-width: 100%; }
.hbars__value { font-weight: 700; font-size: .85rem; text-align: right; font-variant-numeric: tabular-nums; }

.segmented { position: relative; }
.segmented__bar { display: flex; gap: 2px; height: 28px; }
.segmented__part { display: flex; align-items: center; padding-left: .6rem; border-radius: 4px; font-weight: 700; font-size: .8rem; min-width: 2px; }
.segmented__part:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.segmented__part--done { background: var(--navy); color: #fff; } .segmented__part--pending { background: #cfd6e4; color: #1b2438; }
.segmented__legend { list-style: none; display: flex; gap: 1.2rem; margin: .6rem 0 0; padding: 0; font-size: .85rem; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .4rem; }
.sw--done { background: var(--navy); } .sw--pending { background: #cfd6e4; }
.manual__figure { margin: 1rem 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); box-shadow: var(--shadow); }
.manual__figure img { display: block; width: 100%; height: auto; }
.manual__figure figcaption { padding: .45rem .8rem; font-size: .82rem; color: var(--muted); border-top: 1px solid var(--line); }
.manual__figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 300px)); gap: 1rem; align-items: start; }
.manual__figures .manual__figure { margin: 0; }
li > .manual__figure { margin-top: .6rem; }
@media print { .manual__figure { break-inside: avoid; box-shadow: none; } }

.fuel-types { border: 0; padding: 0; margin: 0 0 .9rem; min-width: 0; }
.fuel-types legend { font-weight: 600; font-size: .9rem; padding: 0; margin-bottom: .3rem; }
.fuel-types .checks { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.sources { font-size: .82rem; line-height: 1.5; } .sources a { white-space: nowrap; }

/* células de ações como células de tabela (display:flex quebrava a altura das linhas e cortava os botões) */
@media (min-width: 641px) {
  td.actions { display: table-cell; text-align: right; white-space: nowrap; }
  td.actions > * { display: inline-block; margin: 0 0 0 .9rem; vertical-align: middle; }
}
/* horizontal somente leitura: largura própria (sem formulário em volta, as barras colapsariam) */
.gauge--horizontal.gauge--static .gauge__panel { width: 300px; max-width: none; }
.gauge--horizontal.gauge--static .gauge__bar { height: 34px; }
.fuel-read { font-weight: 700; margin-left: .3rem; vertical-align: middle; }

/* Não conformidades "Outros" */
.tag--outros { background: #e6e9f6; color: #2c3a8c; }
.item--custom { background: color-mix(in srgb, var(--navy-2) 4%, transparent); border-radius: 8px; padding: .7rem; margin: .4rem 0; border: 1px dashed var(--line); }
.item__customhead { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.item__customhead input[type=text] { flex: 1 1 240px; }
.item--custom textarea { width: 100%; }
.item__chosen--none { background: #cfd6e4; color: #1b2438; }
.item.item--custom { grid-template-columns: minmax(0, 1fr); align-items: stretch; } /* "Outros": uma coluna (descrição, detalhes, tipo, foto) */

/* Reparos: etiquetas de status, ordens de serviço */
.tag--repair-aberta { background: #fde2e0; color: #8f1d15; } .tag--repair-em_orcamento { background: #e6e9f6; color: #2c3a8c; }
.tag--repair-aguardando_aprovacao { background: #fff1d6; color: #8a5a00; } .tag--repair-em_reparo { background: #dbeafe; color: #1d4e9e; }
.tag--repair-resolvida { background: #dcf3e6; color: #14663a; }
.tag--repair-nao_efetivo { background: #f8d7c7; color: #8a3a12; } .tag--repair-dispensada { background: #e6e9f0; color: #4a5568; }
.tag--os-em_orcamento { background: #e6e9f6; color: #2c3a8c; } .tag--os-orcamento_recebido { background: #fff1d6; color: #8a5a00; }
.tag--os-autorizada { background: #dbeafe; color: #1d4e9e; } .tag--os-encerrada { background: #dcf3e6; color: #14663a; }
.tag--os-cancelada { background: #e6e9f0; color: #4a5568; text-decoration: line-through; }
.thumb--sm { max-height: 56px; margin: 0; }
.selection-bar { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin: 0 0 1rem; }
.dispense summary { cursor: pointer; color: var(--navy-2); font-size: .9rem; } .dispense__form { display: grid; gap: .4rem; margin-top: .4rem; min-width: 210px; }
.dispense__form textarea { width: 100%; }

/* Ordens de serviço */
.stepper { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 0 0 1rem; }
.stepper li { padding: .35rem .8rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted, #667); font-size: .9rem; background: var(--surface); }
.stepper li.is-done { border-color: var(--navy); color: var(--navy); }
.stepper li.is-current { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }
.details { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .6rem 1.2rem; margin: 0 0 1rem; }
.details dt { font-size: .8rem; color: var(--muted, #667); }
.details dd { margin: 0; font-weight: 600; }
/* .actions global é a coluna de ações das tabelas; as ações da OS usam .os-actions */
.os-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .6rem; }
.os-actions h2 { flex-basis: 100%; margin: 0 0 .2rem; }
.os-actions form { margin: 0; }
.os-actions details { margin: 0; }
.os-actions details[open] { flex-basis: 100%; }
.os-details summary { list-style: none; } /* o <summary class="btn"> usa o mesmo visual dos demais botões */
.os-details summary::-webkit-details-marker { display: none; }
.os-actions details > form { margin-top: .6rem; max-width: 520px; }
.so-items__vehicle { margin: .6rem 0; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: var(--radius); }
.so-items__vehicle .check { display: block; margin: .3rem 0 0 .3rem; }
.so-items { border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem; }
.flash--info { background: #e6f0fb; color: #1d3f8f; border: 1px solid #b7cdee; }
.item--reverify { outline: 2px solid #f1d58a; outline-offset: -2px; background: #fffaf0; }

/* Urgência da não conformidade */
.tag--urg-critica { background: #fbd5d1; color: #8f1d15; border: 1px solid #e9a39d; font-weight: 800; }
.tag--urg-alta { background: #fde6c8; color: #8a4a00; border: 1px solid #efc58d; font-weight: 700; }
.tag--urg-baixa { background: #dbeafe; color: #1d4e9e; border: 1px solid #b5cff2; }
.obs { display: block; }

/* Estado do veículo */
.tag--op-em_operacao { background: #dcf3e6; color: #14663a; }
.tag--op-em_manutencao { background: #dbeafe; color: #1d4e9e; }
.tag--op-parado { background: #fbd5d1; color: #8f1d15; font-weight: 800; }