/* ============================================================
   APR/PT — componentes e telas segundo o NWT Design System
   (docs/09-design-system.md). Tokens em tokens.css.
   Não renomear classes usadas no app.js / frota.js / inspecoes.js.
   ============================================================ */

/* Apelidos legados → tokens (usados em estilos inline do JS) */
:root {
    --brand: var(--nwt-brand-primary);
    --muted: var(--nwt-text-muted);
    --line: var(--nwt-border);
    --danger: var(--nwt-danger-fg);
    --ok: var(--nwt-success-fg);
    --warn: var(--nwt-warning-fg);
}

/* ── Base ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--nwt-font);
    font-size: var(--nwt-fs-body);
    line-height: 1.5;
    color: var(--nwt-text);
    background: var(--nwt-bg);
    -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea, label { touch-action: manipulation; }
img { max-width: 100%; }
a { color: var(--nwt-brand-primary); }
h1, h2, h3 { color: var(--nwt-text); margin: 0; }
h1 { font-size: var(--nwt-fs-page); font-weight: 700; line-height: 1.25; }
h2 { font-size: var(--nwt-fs-section); font-weight: 600; line-height: 1.4; }
h3 { font-size: 16px; font-weight: 600; }
p { margin: 0 0 var(--nwt-space-2); }

:focus-visible { outline: 2px solid var(--nwt-brand-primary); outline-offset: 2px; }
.nwt-header :focus-visible { outline-color: var(--nwt-brand-cyan); }
::selection { background: var(--nwt-selected); }

.hidden { display: none !important; }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.muted { color: var(--nwt-text-muted); }
.error { color: var(--nwt-danger-fg); font-weight: 600; }
.req { color: var(--nwt-danger-fg); font-weight: 700; }
.ico { flex: none; vertical-align: middle; }

.skip-link {
    position: absolute; left: var(--nwt-space-4); top: -100px; z-index: var(--nwt-z-toast);
    background: var(--nwt-surface); color: var(--nwt-brand-primary); font-weight: 600;
    padding: var(--nwt-space-3) var(--nwt-space-4); border-radius: var(--nwt-radius-control);
    box-shadow: var(--nwt-shadow-popover);
}
.skip-link:focus { top: var(--nwt-space-2); }

/* ── Carregando / vazio / erro ──────────────────────────── */
.loading {
    display: flex; align-items: center; justify-content: center; gap: var(--nwt-space-2);
    color: var(--nwt-text-muted); font-size: var(--nwt-fs-ui); padding: var(--nwt-space-6) var(--nwt-space-4);
}
.loading::before, .spinner {
    content: ""; display: inline-block; width: 16px; height: 16px; flex: none;
    border: 2px solid var(--nwt-border); border-top-color: var(--nwt-brand-primary);
    border-radius: 50%; animation: spin .8s linear infinite;
}
.spinner { border-color: currentColor; border-top-color: transparent; opacity: .8; }
@keyframes spin { to { transform: rotate(360deg); } }

.skeleton { display: grid; gap: var(--nwt-space-2); }
.skeleton-linha {
    height: 56px; border-radius: var(--nwt-radius-control);
    background: linear-gradient(90deg, var(--nwt-surface-muted) 0%, #f7f9fc 50%, var(--nwt-surface-muted) 100%);
    background-size: 200% 100%; animation: brilho 1.6s ease-in-out infinite;
}
@keyframes brilho { from { background-position: 100% 0; } to { background-position: -100% 0; } }

.empty-state {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--nwt-space-1);
    padding: var(--nwt-space-8) var(--nwt-space-4); color: var(--nwt-text-muted);
    background: var(--nwt-surface); border: 1px dashed var(--nwt-border); border-radius: var(--nwt-radius-card);
}
.empty-state .ico { width: 32px; height: 32px; color: var(--nwt-control-border); }
.empty-titulo { color: var(--nwt-text); font-weight: 600; margin: var(--nwt-space-2) 0 0; }
.empty-acoes { margin-top: var(--nwt-space-3); display: flex; gap: var(--nwt-space-2); flex-wrap: wrap; justify-content: center; }

.alert {
    display: flex; gap: var(--nwt-space-3); align-items: flex-start;
    padding: var(--nwt-space-4); border-radius: var(--nwt-radius-card);
    border: 1px solid; margin-bottom: var(--nwt-space-4);
}
.alert p { margin: var(--nwt-space-1) 0 var(--nwt-space-2); }
.alert--danger { background: var(--nwt-danger-bg); color: var(--nwt-danger-fg); border-color: color-mix(in srgb, var(--nwt-danger-fg) 30%, transparent); }
.alert--warning { background: var(--nwt-warning-bg); color: var(--nwt-warning-fg); border-color: color-mix(in srgb, var(--nwt-warning-fg) 30%, transparent); }
.alert--success { background: var(--nwt-success-bg); color: var(--nwt-success-fg); border-color: color-mix(in srgb, var(--nwt-success-fg) 30%, transparent); }
.alert--info { background: var(--nwt-info-bg); color: var(--nwt-info-fg); border-color: color-mix(in srgb, var(--nwt-info-fg) 25%, transparent); }
.alert strong { color: inherit; }
.lista-alertas { margin: var(--nwt-space-1) 0 0; padding-left: var(--nwt-space-6); }
.lista-alertas li + li { margin-top: var(--nwt-space-1); }

/* ── Marca ──────────────────────────────────────────────── */
.brand-mark {
    display: inline-grid; place-items: center; flex: none;
    background: var(--nwt-surface); border-radius: var(--nwt-radius-control); padding: 6px;
    border: 1px solid var(--nwt-border);
}
.brand-mark img { display: block; max-width: 100%; max-height: 100%; }
.env-badge {
    display: inline-flex; align-items: center; padding: 2px 10px; border-radius: var(--nwt-radius-pill);
    background: var(--nwt-brand-magenta); color: var(--nwt-on-brand);
    font-size: var(--nwt-fs-meta); font-weight: 600; letter-spacing: .02em; vertical-align: middle;
}

/* ── Login ──────────────────────────────────────────────── */
.login-wrap {
    min-height: 100vh; display: grid; place-items: center;
    padding: var(--nwt-space-6) var(--nwt-space-4); background: var(--nwt-brand-deep);
}
.card {
    background: var(--nwt-surface); border-radius: var(--nwt-radius-card);
    padding: var(--nwt-space-6); border: 1px solid var(--nwt-border);
    width: 100%; max-width: 440px; box-shadow: var(--nwt-shadow-popover);
}
.content .card { max-width: none; box-shadow: none; margin-bottom: var(--nwt-space-6); }
.content .card h2 { margin-bottom: var(--nwt-space-4); }
.login-head { display: flex; align-items: center; gap: var(--nwt-space-4); margin-bottom: var(--nwt-space-3); }
.login-head .brand-mark { width: 84px; height: 50px; }
.login-head h1 { font-size: 24px; }
.login-head p { margin: 2px 0 0; font-size: var(--nwt-fs-ui); color: var(--nwt-text-muted); line-height: 1.4; }
.login-sub { margin: 0 0 var(--nwt-space-6); font-size: var(--nwt-fs-ui); color: var(--nwt-text-muted); }
.login-foot {
    margin: var(--nwt-space-6) 0 0; text-align: center; font-size: var(--nwt-fs-meta); color: var(--nwt-text-muted);
    border-top: 1px solid var(--nwt-border); padding-top: var(--nwt-space-4);
}
#login-error:empty { display: none; }
/* Senha com botão de mostrar/ocultar dentro do campo */
.senha-campo { position: relative; }
.senha-campo input { padding-right: 52px; }
.senha-ver {
    position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; min-height: 44px; padding: 0; display: grid; place-items: center;
    background: transparent; border: 0; color: var(--nwt-text-muted); border-radius: var(--nwt-radius-control);
}
.senha-ver:hover:not(:disabled), .senha-ver[aria-pressed="true"] { background: var(--nwt-neutral-bg); color: var(--nwt-brand-primary); }
.aviso-caps { margin: var(--nwt-space-1) 0 0; font-size: var(--nwt-fs-meta); color: var(--nwt-warning-fg); font-weight: 600; }
.login-opcoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nwt-space-2); margin: 0 0 var(--nwt-space-4); }
.login-opcoes label.inline { font-size: var(--nwt-fs-ui); }
/* Fotos anexadas à APR/PT (etapa 4) */
.anexos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--nwt-space-3); margin: var(--nwt-space-3) 0; }
.anexos > p { grid-column: 1 / -1; margin: 0; }
.anexo { margin: 0; display: grid; gap: var(--nwt-space-1); align-content: start; }
.anexo-ver {
    display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; min-height: 0; overflow: hidden;
    border: 1px solid var(--nwt-border); border-radius: var(--nwt-radius-card); background: var(--nwt-neutral-bg); cursor: zoom-in;
}
.anexo-ver img { width: 100%; height: 100%; object-fit: cover; display: block; }
.anexo--pendente .anexo-ver { border-style: dashed; border-color: var(--nwt-warning-fg); }
.anexo figcaption { display: grid; gap: 2px; font-size: var(--nwt-fs-meta); color: var(--nwt-text); overflow-wrap: anywhere; }
.anexo figcaption small { color: var(--nwt-text-muted); }
.anexo figcaption .badge { justify-self: start; }
.anexo .link { justify-self: start; min-height: 32px; padding: 0 var(--nwt-space-2); }
.anexo-add { cursor: pointer; display: inline-flex; align-items: center; gap: var(--nwt-space-2); }
.anexo-add:focus-within { outline: 2px solid var(--nwt-brand-primary); outline-offset: 2px; }
@media (max-width: 639px) { .anexos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Página pública do link da APR/PT (/f/<token>, aberta a partir do IXC) */
.pagina-publica { max-width: 960px; margin: 0 auto; padding: var(--nwt-space-6) var(--nwt-space-4); }
.pagina-publica > .brand-mark { width: 84px; height: 50px; margin-bottom: var(--nwt-space-4); }
.pagina-publica h1 { margin: 0 0 var(--nwt-space-2); font-size: var(--nwt-fs-page); }
.ixc-envios { list-style: none; margin: 0 0 var(--nwt-space-4); padding: 0; display: grid; gap: var(--nwt-space-2); }
.ixc-envios li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nwt-space-2); }
.ixc-envios small { flex-basis: 100%; }
.link-publico { display: flex; gap: var(--nwt-space-2); flex-wrap: wrap; align-items: center; }
.link-publico input { flex: 1 1 260px; min-width: 0; }

/* Aparelhos conectados (Meu perfil) */
.sessoes { list-style: none; margin: 0 0 var(--nwt-space-3); padding: 0; display: grid; gap: var(--nwt-space-2); }
.sessoes li { display: flex; align-items: center; justify-content: space-between; gap: var(--nwt-space-3); padding: var(--nwt-space-3); border: 1px solid var(--nwt-border); border-radius: var(--nwt-radius-card); }
.sessoes li.atual { border-color: var(--nwt-brand-primary); background: var(--nwt-selected); }
.sessoes small { display: block; color: var(--nwt-text-muted); font-size: var(--nwt-fs-meta); }
#login-error { margin-top: var(--nwt-space-3); }

/* ── Cabeçalho e navegação ──────────────────────────────── */
.topbar {
    position: sticky; top: 0; z-index: var(--nwt-z-sticky);
    background: var(--nwt-brand-deep); color: var(--nwt-on-brand);
    box-shadow: inset 0 -1px 0 rgb(255 255 255 / 8%), var(--nwt-shadow-popover);
}
/* Mesmo container do conteúdo: logo e conta alinham com as bordas da página */
.topbar-inner {
    display: flex; align-items: center; gap: var(--nwt-space-4);
    max-width: var(--nwt-container); margin: 0 auto; padding: 0 var(--nwt-space-6); min-height: 64px;
}
.brand {
    display: inline-flex; align-items: center; gap: var(--nwt-space-3);
    color: var(--nwt-on-brand); text-decoration: none; flex: none;
    padding-right: var(--nwt-space-4); border-right: 1px solid rgb(255 255 255 / 16%);
}
.brand-logo { display: inline-flex; background: var(--nwt-surface); border-radius: var(--nwt-radius-control); padding: 6px 10px; }
.brand-nwt { display: block; height: 22px; width: auto; }
.brand-texto { display: grid; line-height: 1.15; }
.brand-nome { font-weight: 700; font-size: 16px; letter-spacing: .01em; }
.brand-sub { font-size: var(--nwt-fs-meta); color: rgb(255 255 255 / 68%); white-space: nowrap; }
/* Abas no estilo do GitHub: cada aba ocupa a altura do cabeçalho; o hover é
   uma pílula por dentro (::before) e a aba atual tem sublinhado na borda (::after). */
.nav { display: flex; align-self: stretch; align-items: stretch; gap: var(--nwt-space-1); flex: 1; min-width: 0; }
/* Divisor entre os módulos e a gestão (some quando não há itens de gestão) */
.nav-sep { flex: none; align-self: center; width: 1px; height: 24px; margin: 0 var(--nwt-space-2); background: rgb(255 255 255 / 16%); }
.nav-sep:has(+ a.hidden) { display: none; }
.nav a {
    position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: var(--nwt-space-2);
    min-height: 44px; padding: 0 var(--nwt-space-3); white-space: nowrap;
    color: rgb(255 255 255 / 78%); text-decoration: none;
    font-size: var(--nwt-fs-ui); font-weight: 500;
    transition: color var(--nwt-transition);
}
.nav a .ico { flex: none; opacity: .85; }
.nav a::before {
    content: ""; position: absolute; z-index: -1; inset: 50% 0 auto; height: 36px; transform: translateY(-50%);
    border-radius: var(--nwt-radius-control); background: transparent;
    transition: background-color var(--nwt-transition);
}
.nav a:hover { color: var(--nwt-on-brand); }
.nav a:hover::before { background: rgb(255 255 255 / 12%); }
.nav a.active, .nav a[aria-current="page"] { color: var(--nwt-on-brand); font-weight: 700; }
.nav a.active .ico, .nav a[aria-current="page"] .ico { opacity: 1; }
.nav a::after {
    content: ""; position: absolute; left: var(--nwt-space-2); right: var(--nwt-space-2); bottom: 0;
    height: 3px; border-radius: 3px 3px 0 0; background: transparent;
}
.nav a.active::after, .nav a[aria-current="page"]::after { background: var(--nwt-brand-cyan); }
.nav-toggle {
    display: none; background: transparent; color: var(--nwt-on-brand);
    border: 1px solid rgb(255 255 255 / 45%);
}
.nav-toggle:hover:not(:disabled) { background: rgb(255 255 255 / 12%); }

.user-box { position: relative; display: flex; align-items: center; margin-left: auto; flex: none; }
.conta-btn {
    display: inline-flex; align-items: center; gap: var(--nwt-space-2);
    background: transparent; color: var(--nwt-on-brand); border: 1px solid transparent;
    padding: var(--nwt-space-1) var(--nwt-space-2) var(--nwt-space-1) var(--nwt-space-1);
    border-radius: var(--nwt-radius-pill); font-weight: 500; min-height: 44px;
}
.conta-btn:hover:not(:disabled), .conta-btn[aria-expanded="true"] { background: rgb(255 255 255 / 12%); }
.conta-btn.active { box-shadow: inset 0 0 0 1px var(--nwt-brand-cyan); }
.conta-texto { display: grid; text-align: left; line-height: 1.2; }
#user-info { white-space: nowrap; font-size: var(--nwt-fs-ui); font-weight: 600; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
#user-papel { font-size: var(--nwt-fs-meta); color: rgb(255 255 255 / 68%); }
.conta-menu a[aria-current="page"] { background: var(--nwt-selected); color: var(--nwt-brand-primary); }
.avatar {
    display: inline-grid; place-items: center; flex: none; overflow: hidden;
    width: 32px; height: 32px; border-radius: var(--nwt-radius-pill);
    background: var(--nwt-brand-primary); color: var(--nwt-on-brand);
    font-size: var(--nwt-fs-meta); font-weight: 700; border: 2px solid var(--nwt-brand-cyan);
}
.conta-menu {
    display: none; position: absolute; right: 0; top: calc(100% + var(--nwt-space-2)); z-index: var(--nwt-z-dropdown);
    min-width: 240px; background: var(--nwt-surface); color: var(--nwt-text);
    border: 1px solid var(--nwt-border); border-radius: var(--nwt-radius-card);
    box-shadow: var(--nwt-shadow-popover); padding: var(--nwt-space-2);
}
.conta-menu.aberto { display: grid; gap: var(--nwt-space-1); }
.conta-menu .conta-id { padding: var(--nwt-space-2) var(--nwt-space-3); font-size: var(--nwt-fs-ui); color: var(--nwt-text-muted); border-bottom: 1px solid var(--nwt-border); margin: 0 0 var(--nwt-space-1); }
.conta-menu .conta-id strong { display: block; color: var(--nwt-text); }
.conta-menu a { display: flex; align-items: center; min-height: 44px; padding: 0 var(--nwt-space-3); border-radius: var(--nwt-radius-control); text-decoration: none; color: var(--nwt-text); font-weight: 600; font-size: var(--nwt-fs-ui); }
.conta-menu a:hover { background: var(--nwt-selected); color: var(--nwt-brand-primary); }
.conta-menu button { width: 100%; }

.content { padding: var(--nwt-space-6); max-width: var(--nwt-container); margin: 0 auto; width: 100%; }
.content:focus { outline: none; }

/* ── Cabeçalho de página / filtros ──────────────────────── */
.page-head {
    display: flex; justify-content: space-between; align-items: center;
    gap: var(--nwt-space-3) var(--nwt-space-4); flex-wrap: wrap; margin-bottom: var(--nwt-space-6);
}
.page-head h1 { font-size: var(--nwt-fs-page); }
.page-head > .muted { font-size: var(--nwt-fs-ui); }
.toolbar { display: flex; gap: var(--nwt-space-2); flex-wrap: wrap; align-items: center; }
.toolbar > input, .toolbar > select { width: auto; flex: 0 1 auto; min-width: 140px; margin: 0; }

.filters {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--nwt-space-4);
    align-items: end; background: var(--nwt-surface); border: 1px solid var(--nwt-border);
    border-radius: var(--nwt-radius-card); padding: var(--nwt-space-4); margin-bottom: var(--nwt-space-6);
}
.filters > input, .filters > select, .filters > button, .filters > .btn-link { margin: 0; width: 100%; }
.filters label { margin: 0; }
.filters label.inline { min-height: 44px; }
.filtro { display: flex; flex-direction: column; gap: var(--nwt-space-2); margin: 0; }
.filtro input, .filtro select { margin: 0; }
.filtro-acoes { display: flex; gap: var(--nwt-space-2); align-items: flex-end; flex-wrap: wrap; }
.contagem { font-size: var(--nwt-fs-ui); color: var(--nwt-text-muted); margin: 0 0 var(--nwt-space-3); }

/* ── Campos ─────────────────────────────────────────────── */
label { display: block; margin-bottom: var(--nwt-space-4); font-size: var(--nwt-fs-ui); font-weight: 600; color: var(--nwt-text); }
label.inline { display: flex; align-items: center; gap: var(--nwt-space-2); font-weight: 500; }
.form-field { margin-bottom: var(--nwt-space-4); }
.form-field label { margin-bottom: var(--nwt-space-2); }

input, textarea, select {
    width: 100%; min-height: var(--nwt-control-h); padding: 10px 12px; margin-top: var(--nwt-space-2);
    border: 1px solid var(--nwt-control-border); border-radius: var(--nwt-radius-control);
    font-size: var(--nwt-fs-body); background: var(--nwt-surface); color: var(--nwt-text);
    transition: border-color var(--nwt-transition), box-shadow var(--nwt-transition);
}
.form-field input, .form-field select, .form-field textarea, .filtro input, .filtro select { margin-top: 0; }
select {
    padding-right: 36px; appearance: none; -webkit-appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5 10 4.5' fill='none' stroke='%23475569' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--nwt-brand-primary); box-shadow: 0 0 0 3px var(--nwt-selected); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--nwt-brand-primary); outline-offset: 1px; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--nwt-danger-fg); }
input:disabled, select:disabled, textarea:disabled {
    background: var(--nwt-surface-muted); color: var(--nwt-text-muted); border-color: var(--nwt-border);
    cursor: not-allowed; -webkit-text-fill-color: var(--nwt-text-muted); opacity: 1;
}
input[readonly] { background: var(--nwt-bg); border-style: dashed; }
input::placeholder, textarea::placeholder { color: var(--nwt-text-muted); opacity: 1; }
label.inline input, label.inline select { width: auto; margin: 0; }
label.inline--texto { align-items: flex-start; line-height: 1.45; }
label.inline--texto input { margin-top: 3px; flex: none; }
/* Botão "Mais filtros" só existe no celular */
.filtros-toggle { display: none; }
input[type="checkbox"], input[type="radio"] {
    width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; flex: none;
    accent-color: var(--nwt-brand-primary); cursor: pointer;
}
input[type="checkbox"]:disabled, input[type="radio"]:disabled { cursor: not-allowed; }
input[type="file"] { min-height: 0; border: 0; padding: 0; }
textarea { min-height: 88px; resize: vertical; }
.ajuda-campo { display: block; font-size: var(--nwt-fs-meta); color: var(--nwt-text-muted); margin-top: var(--nwt-space-1); font-weight: 400; }

/* ── Botões ─────────────────────────────────────────────── */
button, .btn-link {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--nwt-space-2);
    min-height: var(--nwt-control-h); padding: 10px var(--nwt-space-4);
    background: var(--nwt-brand-primary); color: var(--nwt-on-brand);
    border: 1px solid transparent; border-radius: var(--nwt-radius-control);
    font-size: var(--nwt-fs-ui); font-weight: 600; line-height: 1.4; cursor: pointer;
    text-decoration: none; white-space: nowrap;
    transition: background-color var(--nwt-transition), border-color var(--nwt-transition), color var(--nwt-transition);
}
button:hover:not(:disabled), .btn-link:hover { background: var(--nwt-brand-primary-hover); }
button:active:not(:disabled), .btn-link:active { background: var(--nwt-brand-primary-active); }
button:disabled {
    color: var(--nwt-text-muted); background: var(--nwt-surface-muted);
    border-color: var(--nwt-border); cursor: not-allowed;
}
button[aria-busy="true"] { cursor: progress; }
button.secondary, .btn-link.secondary-link, label.btn-arquivo, label.secondary {
    background: var(--nwt-surface); color: var(--nwt-brand-primary); border-color: var(--nwt-control-border);
}
button.secondary:hover:not(:disabled), .btn-link.secondary-link:hover, label.btn-arquivo:hover, label.secondary:hover { background: var(--nwt-selected); }
button.secondary:active:not(:disabled) { background: var(--nwt-selected); border-color: var(--nwt-brand-primary); }
button.danger { background: var(--nwt-danger-fg); }
button.danger:hover:not(:disabled) { background: #7f1d1d; }
button.small { min-height: 36px; padding: 6px 12px; font-size: 13px; }
button.link, a.link {
    min-height: 36px; padding: 6px 8px; background: none; color: var(--nwt-brand-primary);
    border: 0; font-weight: 600; font-size: var(--nwt-fs-ui); text-decoration: none; border-radius: var(--nwt-radius-control);
}
button.link:hover:not(:disabled), a.link:hover { background: var(--nwt-selected); text-decoration: underline; }
button.link.danger, a.link.danger { color: var(--nwt-danger-fg); background: none; }
button.link.danger:hover:not(:disabled) { background: var(--nwt-danger-bg); }
.icon-btn { min-width: 44px; padding: 0; background: none; color: var(--nwt-text-muted); }
.icon-btn:hover:not(:disabled) { background: var(--nwt-surface-muted); color: var(--nwt-text); }
.btn-block { width: 100%; }
#form-login button[type="submit"] { width: 100%; margin-top: var(--nwt-space-2); }

/* ── Badges de status (texto sempre presente) ───────────── */
.badge, .tag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 8px; border-radius: var(--nwt-radius-pill);
    font-size: var(--nwt-fs-meta); font-weight: 500; line-height: 1.4; white-space: nowrap;
    border: 1px solid transparent; background: var(--nwt-neutral-bg); color: var(--nwt-neutral-fg);
}
.badge--info { background: var(--nwt-info-bg); color: var(--nwt-info-fg); }
.badge--success { background: var(--nwt-success-bg); color: var(--nwt-success-fg); }
.badge--warning { background: var(--nwt-warning-bg); color: var(--nwt-warning-fg); }
.badge--danger { background: var(--nwt-danger-bg); color: var(--nwt-danger-fg); }
.badge--neutral { background: var(--nwt-neutral-bg); color: var(--nwt-neutral-fg); }
.badge--closed { background: var(--nwt-closed-bg); color: var(--nwt-closed-fg); }
.badge--brand { background: var(--nwt-brand-primary); color: var(--nwt-on-brand); }
.badge--critico { background: var(--nwt-danger-fg); color: var(--nwt-on-brand); font-weight: 600; }
.badge--vazio { background: transparent; border-color: var(--nwt-border); }
/* Classes antigas de status, mapeadas para os tons semânticos */
.tag-rascunho { background: var(--nwt-neutral-bg); color: var(--nwt-neutral-fg); }
.tag-aguardando_aprovacao, .tag-pendente { background: var(--nwt-warning-bg); color: var(--nwt-warning-fg); }
.tag-liberada, .tag-aprovado { background: var(--nwt-success-bg); color: var(--nwt-success-fg); }
.tag-em_execucao { background: var(--nwt-info-bg); color: var(--nwt-info-fg); }
.tag-encerrada { background: var(--nwt-closed-bg); color: var(--nwt-closed-fg); }
.tag-cancelada, .tag-rejeitado { background: var(--nwt-danger-bg); color: var(--nwt-danger-fg); }
.tag-bloqueado { background: var(--nwt-danger-fg); color: var(--nwt-on-brand); font-weight: 600; }
.tag.role-tecnico { background: var(--nwt-info-bg); color: var(--nwt-info-fg); }
.tag.role-supervisor { background: var(--nwt-closed-bg); color: var(--nwt-closed-fg); }
.tag.role-admin { background: var(--nwt-brand-primary); color: var(--nwt-on-brand); }

/* ── Tabelas ────────────────────────────────────────────── */
.table-wrap, #os-body, #d-body, #u-body, #modelo-body { overflow-x: auto; }
.table-wrap { margin-top: var(--nwt-space-2); }
.grid {
    width: 100%; border-collapse: separate; border-spacing: 0;
    background: var(--nwt-surface); border: 1px solid var(--nwt-border);
    border-radius: var(--nwt-radius-card); overflow: hidden; font-variant-numeric: tabular-nums;
}
.grid th, .grid td {
    text-align: left; padding: var(--nwt-space-3) var(--nwt-space-4); border-bottom: 1px solid var(--nwt-border);
    font-size: var(--nwt-fs-ui); vertical-align: middle; color: var(--nwt-text);
}
.grid th {
    background: var(--nwt-surface-muted); font-size: 13px; font-weight: 600;
    color: var(--nwt-text-muted); white-space: nowrap;
}
.grid tbody tr:last-child td { border-bottom: 0; }
.grid tbody tr:hover td { background: #f8fafd; }
.grid td small { font-size: var(--nwt-fs-meta); color: var(--nwt-text-muted); }
.grid td.acoes, .grid td.c-acao { white-space: nowrap; text-align: right; }
.grid td.num, .grid th.num { text-align: right; }
.grid .linha-grupo td, #d-body .grid tr.linha-grupo td {
    background: var(--nwt-selected); color: var(--nwt-brand-primary); font-weight: 600;
    font-size: 13px; padding: var(--nwt-space-2) var(--nwt-space-4);
}
.grid.compact th, .grid.compact td { padding: var(--nwt-space-2) var(--nwt-space-3); font-size: 13.5px; }
.grid.compact select, .grid.compact input[type="text"], .grid.compact input[type="number"], .grid.compact input[type="search"],
.grid.compact input:not([type]) { margin: 0; min-height: 40px; padding: 6px 10px; font-size: 14px; }
.grid.compact select { padding-right: 30px; }
.grid.compact input[type="checkbox"], .grid.compact input[type="radio"] { margin: 0; }
.grid tr.linha-os td.c-hora { font-weight: 600; color: var(--nwt-brand-primary); }
.grid tr.linha-os { min-height: 64px; }

/* ── Diálogo ────────────────────────────────────────────── */
.modal {
    position: fixed; inset: 0; z-index: var(--nwt-z-dialog);
    background: rgb(23 32 51 / 55%); display: grid; place-items: center; padding: var(--nwt-space-4);
}
.modal-box {
    background: var(--nwt-surface); border-radius: var(--nwt-radius-card);
    width: 100%; max-width: 560px; max-height: calc(100vh - 32px); overflow: auto;
    box-shadow: var(--nwt-shadow-popover);
}
.modal-box--largo { max-width: 800px; }
.modal-box header {
    display: flex; justify-content: space-between; align-items: center; gap: var(--nwt-space-3);
    padding: var(--nwt-space-4) var(--nwt-space-6); border-bottom: 1px solid var(--nwt-border);
    position: sticky; top: 0; background: var(--nwt-surface); z-index: 1;
}
.modal-box header h2 { font-size: 18px; }
.modal-box > div { padding: var(--nwt-space-6); }
body.com-dialogo { overflow: hidden; }
.form-actions { display: flex; justify-content: flex-end; gap: var(--nwt-space-2); margin-top: var(--nwt-space-4); flex-wrap: wrap; }

/* ── Toast ──────────────────────────────────────────────── */
.toast-area {
    /* No topo, abaixo do cabeçalho: nunca cobre a barra de ações fixa (Salvar/Assinar) */
    position: fixed; right: var(--nwt-space-4); top: calc(64px + var(--nwt-space-3)); z-index: var(--nwt-z-toast);
    display: grid; gap: var(--nwt-space-2); width: min(420px, calc(100vw - 32px)); pointer-events: none;
}
.toast {
    pointer-events: auto; display: flex; align-items: flex-start; gap: var(--nwt-space-3);
    padding: var(--nwt-space-3) var(--nwt-space-3) var(--nwt-space-3) var(--nwt-space-4);
    background: var(--nwt-surface); color: var(--nwt-text); border: 1px solid var(--nwt-border);
    border-left: 4px solid var(--nwt-success-fg); border-radius: var(--nwt-radius-card);
    box-shadow: var(--nwt-shadow-popover); font-size: var(--nwt-fs-ui);
}
.toast > .ico { margin-top: 2px; color: var(--nwt-success-fg); }
.toast--erro { border-left-color: var(--nwt-danger-fg); }
.toast--erro > .ico { color: var(--nwt-danger-fg); }
.toast--info { border-left-color: var(--nwt-info-fg); }
.toast--info > .ico { color: var(--nwt-info-fg); }
.toast-msg { flex: 1; padding-top: 1px; }
.toast-fechar { min-height: 32px; min-width: 32px; padding: 0; background: none; color: var(--nwt-text-muted); margin: -4px -2px 0 0; }
.toast-fechar:hover:not(:disabled) { background: var(--nwt-surface-muted); color: var(--nwt-text); }

/* ── Avisos fixos (APK / offline) ───────────────────────── */
.apk-banner, .offline-bar {
    display: flex; align-items: center; justify-content: space-between; gap: var(--nwt-space-3); flex-wrap: wrap;
    border-radius: var(--nwt-radius-card); padding: var(--nwt-space-3) var(--nwt-space-4);
    margin-bottom: var(--nwt-space-4); font-size: var(--nwt-fs-ui); border: 1px solid;
}
.apk-banner { background: var(--nwt-info-bg); color: var(--nwt-info-fg); border-color: color-mix(in srgb, var(--nwt-info-fg) 25%, transparent); }
.apk-banner-txt { display: flex; flex-direction: column; gap: 2px; }
.apk-banner-txt strong { font-weight: 600; }
.apk-banner-acoes { display: flex; gap: var(--nwt-space-2); align-items: center; flex-wrap: wrap; }
.offline-bar { background: var(--nwt-warning-bg); color: var(--nwt-warning-fg); border-color: color-mix(in srgb, var(--nwt-warning-fg) 30%, transparent); }

/* ── Estados nos containers de lista ────────────────────── */
#os-body > p:not(.contagem), #d-body > p:not(.contagem), #u-body > p:not(.contagem), #modelo-body > p:not(.contagem), #content > p.loading, #content > p.error { text-align: center; padding: var(--nwt-space-6) var(--nwt-space-4); }

/* ── Painéis e documento APR/PT ─────────────────────────── */
.panel {
    background: var(--nwt-surface); border: 1px solid var(--nwt-border);
    border-radius: var(--nwt-radius-card); padding: var(--nwt-space-6); margin-bottom: var(--nwt-space-6);
}
.panel h2 {
    display: flex; align-items: center; gap: var(--nwt-space-3); flex-wrap: wrap;
    font-size: var(--nwt-fs-section); margin: 0 0 var(--nwt-space-4);
    border-bottom: 1px solid var(--nwt-border); padding-bottom: var(--nwt-space-3);
}
.step {
    display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px;
    border-radius: var(--nwt-radius-control); background: var(--nwt-brand-primary);
    color: var(--nwt-on-brand); font-size: var(--nwt-fs-ui); font-weight: 700;
}
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nwt-space-4) var(--nwt-space-6); }
.grid2 > label { margin-bottom: 0; }
.grid2 .label { display: block; margin-bottom: var(--nwt-space-1); }
.grid2 > div > div { font-size: 15px; line-height: 1.5; word-break: break-word; }
.grid2 > div > div img { max-height: 56px; background: var(--nwt-surface); padding: 3px 6px; border: 1px solid var(--nwt-border); border-radius: var(--nwt-radius-control); }
.label { font-size: 13px; font-weight: 600; color: var(--nwt-text-muted); }
label > .label { display: block; }
.field { margin: var(--nwt-space-4) 0 0; }
.chips, .checks { display: flex; flex-wrap: wrap; gap: var(--nwt-space-2); margin-top: var(--nwt-space-2); }
.chip {
    display: inline-flex; align-items: center; gap: var(--nwt-space-2); margin: 0; min-height: 40px;
    border: 1px solid var(--nwt-control-border); border-radius: var(--nwt-radius-pill);
    padding: 6px 14px; font-size: var(--nwt-fs-ui); background: var(--nwt-surface); color: var(--nwt-text);
    font-weight: 500; cursor: pointer; user-select: none;
    transition: background-color var(--nwt-transition), border-color var(--nwt-transition), color var(--nwt-transition);
}
.chip:hover { border-color: var(--nwt-brand-primary); background: var(--nwt-selected); }
.chip:focus-within { outline: 2px solid var(--nwt-brand-primary); outline-offset: 2px; }
.chip:has(input:checked) { background: var(--nwt-selected); border-color: var(--nwt-brand-primary); color: var(--nwt-brand-primary); font-weight: 600; }
.chip:has(input:disabled) { cursor: not-allowed; }
.chip:has(input:disabled:not(:checked)) { color: var(--nwt-text-muted); border-color: var(--nwt-border); }
.chip:has(input[value="AUTORIZADA"]:checked), .chip:has(input[value="CONCLUIDO"]:checked), .chip:has(input[value="sim"]:checked) {
    background: var(--nwt-success-bg); border-color: var(--nwt-success-fg); color: var(--nwt-success-fg);
}
.chip:has(input[value="NAO_AUTORIZADA"]:checked), .chip:has(input[value="nao"]:checked) {
    background: var(--nwt-danger-bg); border-color: var(--nwt-danger-fg); color: var(--nwt-danger-fg);
}
.chip:has(input[value="SUSPENSO"]:checked) { background: var(--nwt-warning-bg); border-color: var(--nwt-warning-fg); color: var(--nwt-warning-fg); }
.chip:has(input[value="na"]:checked) { background: var(--nwt-neutral-bg); border-color: var(--nwt-neutral-fg); color: var(--nwt-neutral-fg); }

.check-item {
    display: flex; justify-content: space-between; gap: var(--nwt-space-3); align-items: center;
    padding: var(--nwt-space-3) 0; border-bottom: 1px solid var(--nwt-border); flex-wrap: wrap; font-size: 15px;
}
.check-item:last-child { border-bottom: 0; }
.check-item .chips { margin: 0; }

.termo {
    background: var(--nwt-info-bg); border-left: 4px solid var(--nwt-brand-primary);
    padding: var(--nwt-space-3) var(--nwt-space-4); font-size: var(--nwt-fs-ui); color: var(--nwt-text);
    margin-top: var(--nwt-space-4); border-radius: 0 var(--nwt-radius-control) var(--nwt-radius-control) 0;
}
.termo strong { color: var(--nwt-brand-primary); }

.sticky-actions {
    position: sticky; bottom: 0; z-index: var(--nwt-z-sticky);
    background: var(--nwt-surface); padding: var(--nwt-space-3) var(--nwt-space-4) calc(var(--nwt-space-3) + env(safe-area-inset-bottom, 0px));
    margin: var(--nwt-space-2) 0 0; display: flex; gap: var(--nwt-space-2); justify-content: flex-end; flex-wrap: wrap;
    border: 1px solid var(--nwt-border); border-radius: var(--nwt-radius-card);
    box-shadow: var(--nwt-shadow-popover);
}
.assinatura { display: flex; align-items: center; gap: var(--nwt-space-3); margin-top: var(--nwt-space-3); }
.assinatura img { height: 70px; background: var(--nwt-surface); border: 1px solid var(--nwt-border); border-radius: var(--nwt-radius-control); }
.sig-canvas {
    width: 100%; height: 200px; border: 2px dashed var(--nwt-control-border);
    border-radius: var(--nwt-radius-card); touch-action: none; display: block; background: var(--nwt-surface);
}
.sig-canvas:hover, .sig-canvas:focus-visible { border-color: var(--nwt-brand-primary); }

.empresa { border-bottom: 1px solid var(--nwt-border); padding-bottom: var(--nwt-space-3); margin-bottom: var(--nwt-space-4); }
.empresa strong { display: block; font-size: 16px; color: var(--nwt-brand-primary); }
.empresa small { display: block; color: var(--nwt-text-muted); font-size: 13px; }
.grupo-risco {
    margin-top: var(--nwt-space-6); font-weight: 600; color: var(--nwt-brand-primary); font-size: 13px;
    display: flex; align-items: center; gap: var(--nwt-space-2);
}
.grupo-risco::after { content: ""; flex: 1; height: 1px; background: var(--nwt-border); }
.rk-nivel { font-size: 13px; font-weight: 600; text-align: center; white-space: nowrap; }
.rk-nivel.lvl-none { color: var(--nwt-text-muted); }
.rk-nivel.lvl-baixo { color: var(--nwt-success-fg); }
.rk-nivel.lvl-medio { color: var(--nwt-warning-fg); }
.rk-nivel.lvl-alto { color: #9a3412; }
.rk-nivel.lvl-critico { color: var(--nwt-danger-fg); }

/* ── Resumo por status (botões de filtro) ───────────────── */
.resumo { display: flex; gap: var(--nwt-space-2); flex-wrap: wrap; margin-bottom: var(--nwt-space-4); }
.stat {
    display: inline-flex; align-items: center; gap: 6px; min-height: 36px;
    border-radius: var(--nwt-radius-pill); padding: 6px 14px; font-size: 13px; font-weight: 500;
    border: 1px solid transparent; background: var(--nwt-neutral-bg); color: var(--nwt-neutral-fg);
}
button.stat:hover:not(:disabled) { filter: brightness(.96); background: inherit; }
button.stat.tag-aguardando_aprovacao:hover { background: var(--nwt-warning-bg); }
button.stat.tag-rascunho:hover { background: var(--nwt-neutral-bg); }
button.stat.tag-liberada:hover { background: var(--nwt-success-bg); }
button.stat.tag-encerrada:hover { background: var(--nwt-closed-bg); }
button.stat.tag-cancelada:hover { background: var(--nwt-danger-bg); }
.stat strong { font-weight: 700; }
.stat.tag-rascunho { background: var(--nwt-neutral-bg); color: var(--nwt-neutral-fg); }
.stat.tag-aguardando_aprovacao, .stat.tag-pendente { background: var(--nwt-warning-bg); color: var(--nwt-warning-fg); }
.stat.tag-liberada, .stat.tag-aprovado { background: var(--nwt-success-bg); color: var(--nwt-success-fg); }
.stat.tag-em_execucao { background: var(--nwt-info-bg); color: var(--nwt-info-fg); }
.stat.tag-encerrada { background: var(--nwt-closed-bg); color: var(--nwt-closed-fg); }
.stat.tag-cancelada, .stat.tag-rejeitado { background: var(--nwt-danger-bg); color: var(--nwt-danger-fg); }
.stat.tag-bloqueado { background: var(--nwt-danger-fg); color: var(--nwt-on-brand); }
.stat.total { background: var(--nwt-brand-primary); color: var(--nwt-on-brand); }

/* ── Abas ───────────────────────────────────────────────── */
.tabs {
    display: flex; gap: var(--nwt-space-1); flex-wrap: wrap; margin-bottom: var(--nwt-space-6);
    border-bottom: 1px solid var(--nwt-border);
}
.tab, a.tab {
    display: inline-flex; align-items: center; min-height: 44px; margin-bottom: -1px;
    background: none; color: var(--nwt-text-muted); text-decoration: none;
    border: 0; border-bottom: 3px solid transparent; border-radius: var(--nwt-radius-control) var(--nwt-radius-control) 0 0;
    padding: 0 var(--nwt-space-4); font-size: var(--nwt-fs-ui); font-weight: 600;
}
.tab:hover:not(:disabled), a.tab:hover { background: var(--nwt-selected); color: var(--nwt-brand-primary); }
.tab.active, .tab[aria-current="page"], .tab[aria-selected="true"] { color: var(--nwt-brand-primary); border-bottom-color: var(--nwt-brand-primary); background: none; }

.pt-status { margin-top: var(--nwt-space-4); }
.pt-status .chips { margin-top: var(--nwt-space-2); }

/* ============================================================
   Frota (frota.js) e Inspeção de Campo (inspecoes.js)
   ============================================================ */
.vi-item > div:first-child, .in-item > div:first-child { flex: 1 1 320px; min-width: 0; }
.vi-item .vi-obs, .in-item .in-parecer { margin-top: var(--nwt-space-2); width: 100%; }
.vi-critico { border-left: 3px solid var(--nwt-danger-fg); padding-left: var(--nwt-space-3); }
.alerta-bloqueio {
    display: flex; gap: var(--nwt-space-3); align-items: flex-start;
    border: 1px solid var(--nwt-danger-fg); border-left-width: 6px; background: var(--nwt-danger-bg); color: var(--nwt-danger-fg);
    border-radius: var(--nwt-radius-card); padding: var(--nwt-space-4); margin-bottom: var(--nwt-space-4);
}
.alerta-bloqueio > div { flex: 1; }
.alerta-bloqueio button { margin-top: var(--nwt-space-2); }
.ok-msg { display: flex; gap: var(--nwt-space-2); align-items: center; background: var(--nwt-success-bg); color: var(--nwt-success-fg); border-radius: var(--nwt-radius-card); padding: var(--nwt-space-3) var(--nwt-space-4); }

.danos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: var(--nwt-space-2); margin: var(--nwt-space-2) 0 var(--nwt-space-3); }
.dano-tile {
    flex-direction: column; min-height: 96px; padding: var(--nwt-space-3) var(--nwt-space-2);
    background: var(--nwt-surface); color: var(--nwt-text-muted); border: 2px solid var(--nwt-border);
}
.dano-tile:hover:not(:disabled) { background: var(--nwt-selected); color: var(--nwt-brand-primary); }
.dano-tile.on, .dano-tile.on:hover { border-color: var(--nwt-danger-fg); background: var(--nwt-danger-bg); color: var(--nwt-danger-fg); }
.dano-tile span { font-size: 13px; }
.plano-item { border-bottom: 1px solid var(--nwt-border); padding: var(--nwt-space-3) 0; }
.plano-item:last-child { border-bottom: 0; }

.foto-acoes { display: flex; gap: var(--nwt-space-2); flex-wrap: wrap; align-items: center; margin: var(--nwt-space-2) 0; }
.btn-arquivo {
    position: relative; display: inline-flex; align-items: center; min-height: var(--nwt-control-h); margin: 0;
    cursor: pointer; padding: 10px var(--nwt-space-4); border-radius: var(--nwt-radius-control); border: 1px solid; font-weight: 600;
}
.btn-arquivo:focus-within { outline: 2px solid var(--nwt-brand-primary); outline-offset: 2px; }
.btn-arquivo input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.fotos-prev { display: flex; gap: var(--nwt-space-3); flex-wrap: wrap; margin: var(--nwt-space-2) 0; }
.fotos-prev figure { margin: 0; width: 140px; display: flex; flex-direction: column; gap: var(--nwt-space-1); }
.fotos-prev img { width: 140px; height: 105px; object-fit: cover; border-radius: var(--nwt-radius-control); border: 1px solid var(--nwt-border); background: var(--nwt-surface); }
.fotos-prev figcaption { font-size: var(--nwt-fs-meta); color: var(--nwt-text-muted); }
.fotos-prev input { font-size: 14px; min-height: 36px; padding: 4px 8px; margin: 0; }

.sig-img { height: 70px; max-width: 240px; background: var(--nwt-surface); border: 1px solid var(--nwt-border); border-radius: var(--nwt-radius-control); }
.assinaturas-lado { display: flex; gap: var(--nwt-space-8); flex-wrap: wrap; }
.fila-item { display: flex; justify-content: space-between; align-items: center; gap: var(--nwt-space-3); padding: var(--nwt-space-2) 0; border-bottom: 1px solid var(--nwt-border); }
.frota-dados { margin: var(--nwt-space-3) 0; border: 1px solid var(--nwt-border); border-radius: var(--nwt-radius-control); padding: var(--nwt-space-3) var(--nwt-space-4); }
.frota-dados summary { cursor: pointer; font-weight: 600; color: var(--nwt-brand-primary); min-height: 32px; }
.caixa-texto { border: 1px solid var(--nwt-border); border-radius: var(--nwt-radius-control); padding: var(--nwt-space-2) var(--nwt-space-3); margin: var(--nwt-space-1) 0 var(--nwt-space-3); white-space: pre-wrap; background: var(--nwt-bg); }
.vc-foto { width: 56px; height: 40px; object-fit: cover; border-radius: 6px; }
.decl { display: flex; gap: var(--nwt-space-2); align-items: flex-start; margin: var(--nwt-space-1) 0; }
.decl .ico { margin-top: 2px; }
.decl--ok { color: var(--nwt-success-fg); }
.decl--nao { color: var(--nwt-danger-fg); }

/* Calendário por veículo */
.cal-legenda { display: flex; gap: var(--nwt-space-4); flex-wrap: wrap; font-size: 13px; color: var(--nwt-text-muted); margin: var(--nwt-space-1) 0 var(--nwt-space-3); }
.cal-legenda i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: var(--nwt-space-1); border: 1px solid; }
.cal-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--nwt-space-1); }
.cal-cab { text-align: center; font-size: var(--nwt-fs-meta); font-weight: 600; color: var(--nwt-text-muted); padding: var(--nwt-space-1); }
.cal-dia {
    position: relative; min-height: 64px; flex-direction: column; align-items: flex-start; justify-content: flex-start;
    padding: 6px var(--nwt-space-2); border-radius: var(--nwt-radius-control); color: var(--nwt-text);
    border: 1px solid; font-size: 13px; font-weight: 600; background: var(--nwt-surface); white-space: normal;
}
.cal-dia small { font-size: 11.5px; font-weight: 500; }
.cal-dia em { position: absolute; top: 4px; right: 6px; font-style: normal; font-size: 11px; font-weight: 600; }
.cal-dia:disabled { cursor: default; color: var(--nwt-text); }
.cal-ok { background: var(--nwt-success-bg); border-color: var(--nwt-success-fg); color: var(--nwt-success-fg); }
.cal-pend { background: var(--nwt-warning-bg); border-color: var(--nwt-warning-fg); color: var(--nwt-warning-fg); }
.cal-rej { background: var(--nwt-danger-bg); border-color: var(--nwt-danger-fg); color: var(--nwt-danger-fg); }
.cal-falta { background: var(--nwt-surface); border-color: var(--nwt-danger-fg); border-style: dashed; color: var(--nwt-danger-fg); }
.cal-futuro { background: var(--nwt-bg); border-color: var(--nwt-border); }
button.cal-dia.cal-ok:hover:not(:disabled) { background: var(--nwt-success-bg); filter: brightness(.96); }
button.cal-dia.cal-pend:hover:not(:disabled) { background: var(--nwt-warning-bg); filter: brightness(.96); }
button.cal-dia.cal-rej:hover:not(:disabled) { background: var(--nwt-danger-bg); filter: brightness(.96); }
button.cal-dia.cal-falta:disabled, button.cal-dia.cal-futuro:disabled { opacity: 1; }
.cal-dia.cal-falta:disabled { color: var(--nwt-danger-fg); background: var(--nwt-surface); border-color: var(--nwt-danger-fg); }
.cal-dia.cal-futuro:disabled { color: var(--nwt-text-muted); background: var(--nwt-bg); border-color: var(--nwt-border); }

/* Rastreamento */
.rt-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--nwt-space-4); }
.rt-mapa { height: 580px; border-radius: var(--nwt-radius-card); border: 1px solid var(--nwt-border); overflow: hidden; background: var(--nwt-surface-muted); }
.rt-painel { margin: 0; max-height: 580px; overflow: auto; padding: var(--nwt-space-4); }
.rt-painel h2 { font-size: 16px; }
.rt-item {
    display: flex; gap: var(--nwt-space-3); align-items: flex-start; width: 100%; text-align: left;
    padding: var(--nwt-space-2) var(--nwt-space-3); border-radius: var(--nwt-radius-control); cursor: pointer;
    background: none; color: var(--nwt-text); border: 1px solid transparent; font-weight: 400; white-space: normal;
}
.rt-item:hover:not(:disabled) { background: var(--nwt-selected); }
.rt-item.ativo { background: var(--nwt-selected); border-color: var(--nwt-brand-primary); }
.rt-item > i { width: 12px; height: 12px; border-radius: 50%; margin-top: 6px; flex: none; }
.rt-marker { background: none; border: 0; }
.rt-pin { width: 30px; height: 30px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); margin: 0 auto; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgb(23 32 51 / 30%); }
.rt-pin svg { transform: rotate(45deg); }
.rt-placa { margin: 3px auto 0; width: max-content; background: var(--nwt-surface); border: 2px solid; border-radius: 6px; padding: 0 5px; font-size: 11px; font-weight: 700; color: var(--nwt-text); }
.rt-status { white-space: pre-wrap; font-size: 13px; background: var(--nwt-bg); border: 1px solid var(--nwt-border); border-radius: var(--nwt-radius-control); padding: var(--nwt-space-3); margin-top: var(--nwt-space-3); font-family: inherit; }

/* ============================================================
   Responsivo — <640 coluna única; 640–1023 filtros em 2 col.;
   navegação recolhe em menu abaixo de 1180px.
   ============================================================ */
@media (max-width: 1179px) {
    .topbar-inner { flex-wrap: wrap; padding-top: var(--nwt-space-2); padding-bottom: var(--nwt-space-2); }
    .brand { border-right: 0; padding-right: 0; }
    .nav-toggle { display: inline-flex; }
    .nav {
        display: none; order: 10; flex: 1 1 100%; flex-direction: column;
        padding: var(--nwt-space-2) 0 var(--nwt-space-1);
        border-top: 1px solid rgb(255 255 255 / 18%);
    }
    .nav.aberto { display: flex; }
    .nav a { min-height: 48px; padding: 0 var(--nwt-space-3); }
    .nav a::after { left: 0; right: auto; top: 10px; bottom: 10px; width: 3px; height: auto; border-radius: 0 3px 3px 0; }
    .nav a::before { inset: 0; height: auto; transform: none; }
    .nav a.active::before, .nav a[aria-current="page"]::before { background: rgb(255 255 255 / 12%); }
    .nav-sep { width: auto; height: 1px; margin: var(--nwt-space-1) var(--nwt-space-3); align-self: stretch; }
    .user-box { order: 2; }
    .nav-toggle { order: 3; }
}
@media (min-width: 640px) and (max-width: 1023px) {
    .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
    h1, .page-head h1 { font-size: var(--nwt-fs-page-mobile); }
    .content { padding: var(--nwt-space-4); }
    .topbar-inner { padding: var(--nwt-space-2) var(--nwt-space-4); gap: var(--nwt-space-2); }
    .brand-texto { display: none; }
    .conta-texto { display: none; }
    .panel, .card, .content .card { padding: var(--nwt-space-4); }
    .grid2 { grid-template-columns: 1fr; }
    .filters { grid-template-columns: 1fr; padding: var(--nwt-space-4); }
    .page-head .toolbar { width: 100%; }
    .page-head .toolbar > * { flex: 1 1 auto; }
    .sticky-actions { padding: var(--nwt-space-3); }
    .sticky-actions > * { flex: 1 1 auto; }
    .modal { padding: var(--nwt-space-2); align-items: end; }
    .modal-box > div, .modal-box header { padding-left: var(--nwt-space-4); padding-right: var(--nwt-space-4); }
    .sig-canvas { height: 170px; }
    .rt-layout { grid-template-columns: 1fr; }
    .rt-mapa { height: 420px; }
    .cal-dia { min-height: 48px; padding: var(--nwt-space-1); }
    .cal-dia small { display: none; }
    .toast-area { right: var(--nwt-space-2); left: var(--nwt-space-2); width: auto; top: calc(64px + var(--nwt-space-2)); }
    /* Abas roláveis: esmaecem na borda direita para indicar que há mais */
    .tabs {
        flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-right: var(--nwt-space-6);
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
    }
    .tabs::-webkit-scrollbar { display: none; }
    .tab, a.tab { flex: none; }

    /* Filtros: só o 1º campo à vista; o resto em "Mais filtros" */
    .filters--recolhivel:not(.aberto) > :not(:first-child):not(.filtros-toggle) { display: none; }
    .filtros-toggle { display: inline-flex; justify-self: start; }

    /* Selos não esticam na célula do cartão */
    .grid.cards-mobile td > .badge, .grid.cards-mobile td > .tag { justify-self: start; align-self: center; }

    /* Riscos da APR: cada risco vira um cartão; sem marcar, só a caixa */
    .grid.riscos { border: 0; background: none; border-radius: 0; overflow: visible; }
    .grid.riscos thead { display: none; }
    .grid.riscos tbody { display: grid; gap: var(--nwt-space-2); }
    .grid.riscos tbody tr {
        display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--nwt-space-2) var(--nwt-space-3);
        padding: var(--nwt-space-3); background: var(--nwt-surface);
        border: 1px solid var(--nwt-border); border-radius: var(--nwt-radius-card);
    }
    .grid.riscos tbody tr:has(.rk-check:checked) { border-color: var(--nwt-brand-primary); }
    .grid.riscos tbody tr:hover td { background: none; }
    .grid.riscos td { display: block; padding: 0; border: 0; white-space: normal; text-align: left; }
    .grid.riscos td:first-child, .grid.riscos td:last-child { grid-column: 1 / -1; }
    .grid.riscos td:not(:first-child)[data-label]::before {
        content: attr(data-label); display: block; margin-bottom: 2px;
        font-size: var(--nwt-fs-meta); font-weight: 600; color: var(--nwt-text-muted);
    }
    .grid.riscos td.rk-nivel { align-self: end; padding-bottom: var(--nwt-space-2); }
    .grid.riscos tr:not(:has(.rk-check:checked)) td:not(:first-child) { display: none; }
    .grid.riscos label.inline { min-height: 32px; }

    /* Tabelas de lista viram cards (cada célula com o rótulo da coluna) */
    .grid.cards-mobile { border: 0; background: none; border-radius: 0; overflow: visible; }
    .grid.cards-mobile thead { display: none; }
    .grid.cards-mobile tbody { display: grid; gap: var(--nwt-space-3); }
    .grid.cards-mobile tbody tr {
        display: grid; gap: var(--nwt-space-2); padding: var(--nwt-space-4);
        background: var(--nwt-surface); border: 1px solid var(--nwt-border); border-radius: var(--nwt-radius-card);
    }
    .grid.cards-mobile tbody tr:hover td { background: none; }
    .grid.cards-mobile td { display: grid; grid-template-columns: 38% 1fr; gap: var(--nwt-space-2); border: 0; padding: 0; text-align: left; white-space: normal; }
    .grid.cards-mobile td[data-label]::before { content: attr(data-label); font-size: var(--nwt-fs-meta); font-weight: 600; color: var(--nwt-text-muted); }
    .grid.cards-mobile td[data-label=""]::before, .grid.cards-mobile td.c-acao::before, .grid.cards-mobile td.acoes::before { content: none; }
    .grid.cards-mobile td.c-acao, .grid.cards-mobile td.acoes {
        display: flex; flex-wrap: wrap; gap: var(--nwt-space-2); justify-content: flex-start;
        border-top: 1px solid var(--nwt-border); padding-top: var(--nwt-space-3); margin-top: var(--nwt-space-1);
    }
    .grid.cards-mobile td.c-acao .link, .grid.cards-mobile td.acoes .link { min-height: 44px; padding: 0 var(--nwt-space-3); border: 1px solid var(--nwt-control-border); }
    .grid.cards-mobile tr.linha-grupo { background: none; border: 0; padding: var(--nwt-space-2) 0 0; }
    .grid.cards-mobile tr.linha-grupo td { display: block; background: none; padding: 0; }
    .grid.cards-mobile tr.linha-grupo td::before { content: none; }

    /* Card da OS: horário e status no topo; cliente; assunto e técnico; APR/PT; ações */
    #os-body .grid.cards-mobile tr.linha-os { grid-template-columns: auto 1fr; }
    #os-body .grid.cards-mobile td { grid-template-columns: 1fr; }
    #os-body .grid.cards-mobile td::before { content: none; }
    #os-body .grid.cards-mobile td.c-hora { grid-column: 1; grid-row: 1; font-size: 18px; }
    #os-body .grid.cards-mobile td.c-status { grid-column: 2; grid-row: 1; justify-self: end; align-self: center; }
    #os-body td.c-cliente, #os-body td.c-assunto, #os-body td.c-tec, #os-body td.c-doc, #os-body td.c-acao { grid-column: 1 / -1; }
    #os-body td.c-cliente { font-weight: 600; font-size: 16px; }
    #os-body td.c-assunto, #os-body td.c-tec { color: var(--nwt-text-muted); font-size: var(--nwt-fs-ui); }
    #os-body .grid.cards-mobile td.c-doc::before { content: "APR/PT"; font-size: var(--nwt-fs-meta); font-weight: 600; color: var(--nwt-text-muted); margin-right: var(--nwt-space-2); }
    #os-body .grid.cards-mobile td.c-doc { display: flex; align-items: center; }
}
@media (max-width: 420px) {
    .card { padding: var(--nwt-space-4); }
}

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

/* Barras de rolagem das regiões de tabela */
.table-wrap::-webkit-scrollbar, #os-body::-webkit-scrollbar, #d-body::-webkit-scrollbar, #u-body::-webkit-scrollbar { height: 10px; }
.table-wrap::-webkit-scrollbar-thumb, #os-body::-webkit-scrollbar-thumb, #d-body::-webkit-scrollbar-thumb, #u-body::-webkit-scrollbar-thumb {
    background: var(--nwt-border); border-radius: var(--nwt-radius-pill); border: 2px solid var(--nwt-bg);
}