/* Auto + — paleta A "Grafite e laranja", TEMA CLARO fixo, topo grafite.
   TODAS as cores ficam nestas variáveis. Contraste conferido contra WCAG AA (tests/test_contraste.py). */
:root, [data-bs-theme="light"] {
  --ap-bg: #F4F5F6;            /* fundo da página */
  --ap-surface: #FFFFFF;       /* cartões */
  --ap-neutral: #ECEEF1;       /* botão secundário, hover */
  --ap-neutral-hover: #E1E4E8;
  --ap-neutral-active: #D5D9DE;
  --ap-border: #E3E6EA;        /* bordas de cartão */
  --ap-field-border: #868E99;  /* borda de campo (3:1) */
  --ap-text: #1E2328;
  --ap-text-2: #5B636E;
  --ap-top: #1E2328;           /* barra do topo (grafite) */
  --ap-on-top: #FFFFFF;
  --ap-on-top-2: #C9CED6;
  --ap-top-hover: #343A41;
  --ap-primary: #C2410C;       /* laranja queimado: botões (texto branco 5,18:1) */
  --ap-primary-hover: #A8380A;
  --ap-primary-active: #8F2F08;
  --ap-on-primary: #FFFFFF;
  --ap-primary-ink: #9A3412;   /* laranja como TEXTO sobre o laranja-claro */
  --ap-primary-soft: #FDEDE4;
  --ap-vivid: #F97316;         /* laranja vivo: só destaque/ícone; texto sobre ele = grafite */
  --ap-focus: #C2410C;
  --ap-focus-rgb: 194, 65, 12;
  --ap-ok: #1F7A3F;     --ap-ok-soft: #E3F3E8;    --ap-ok-hover: #186332;   --ap-ok-active: #124D27;  --ap-on-ok: #FFFFFF;
  --ap-mercosul: #1F4E9C;      /* faixa azul da placa (detalhe) */
  --ap-logo-bg: #FFFFFF;
  --ap-warn: #7A5A00;   --ap-warn-soft: #FFF4CC;  --ap-warn-dot: #B08A00;   /* âmbar-amarelado: ≠ laranja */
  --ap-err: #B42318;    --ap-err-soft: #FDE7E5;   --ap-err-hover: #951D14;  --ap-on-err: #FFFFFF;
  --ap-shadow: 0 1px 2px rgba(30, 35, 40, .06), 0 1px 3px rgba(30, 35, 40, .08);
  --ap-shadow-lg: 0 10px 30px rgba(30, 35, 40, .12);
  --ap-add-shadow: 0 6px 16px rgba(194, 65, 12, .40);

  --bs-body-bg: var(--ap-bg); --bs-body-color: var(--ap-text); --bs-emphasis-color: var(--ap-text);
  --bs-secondary-color: var(--ap-text-2); --bs-tertiary-color: var(--ap-text-2);
  --bs-secondary-bg: var(--ap-neutral); --bs-tertiary-bg: var(--ap-neutral);
  --bs-border-color: var(--ap-border);
  --bs-primary: var(--ap-primary); --bs-primary-rgb: 194, 65, 12;
  --bs-success: var(--ap-ok); --bs-success-rgb: 31, 122, 63;
  --bs-danger: var(--ap-err); --bs-danger-rgb: 180, 35, 24;
  --bs-warning: var(--ap-warn); --bs-warning-rgb: 122, 90, 0;
  --bs-link-color: var(--ap-primary); --bs-link-color-rgb: 194, 65, 12;
  --bs-link-hover-color: var(--ap-primary-active); --bs-link-hover-color-rgb: 143, 47, 8;
  --bs-success-text-emphasis: var(--ap-ok); --bs-success-bg-subtle: var(--ap-ok-soft); --bs-success-border-subtle: #BFE3CB;
  --bs-warning-text-emphasis: var(--ap-warn); --bs-warning-bg-subtle: var(--ap-warn-soft); --bs-warning-border-subtle: #F1DE8E;
  --bs-danger-text-emphasis: var(--ap-err); --bs-danger-bg-subtle: var(--ap-err-soft); --bs-danger-border-subtle: #F4C2BD;
  --bs-info-text-emphasis: var(--ap-text); --bs-info-bg-subtle: var(--ap-neutral); --bs-info-border-subtle: var(--ap-border);
}
/* Tema ESCURO pronto e DESLIGADO (para ativar: data-bs-theme="dark" no <html> de base.html e publico/_layout.html). */
[data-bs-theme="dark"] {
  --ap-bg: #15181B; --ap-surface: #1E2328; --ap-neutral: #2A3036; --ap-neutral-hover: #333A41; --ap-neutral-active: #3D454D;
  --ap-border: #2E353C; --ap-field-border: #6F7883; --ap-text: #EEF0F2; --ap-text-2: #AAB2BC;
  --ap-top: #0E1012; --ap-on-top: #FFFFFF; --ap-on-top-2: #AAB2BC; --ap-top-hover: #23282D;
  --ap-primary: #FB8A3C; --ap-primary-hover: #FC9D5B; --ap-primary-active: #FDB07A; --ap-on-primary: #15181B;
  --ap-primary-ink: #FB8A3C; --ap-primary-soft: #3A2618; --ap-vivid: #FB8A3C; --ap-focus: #FB8A3C; --ap-focus-rgb: 251, 138, 60;
  --ap-ok: #5CC98A; --ap-ok-soft: #1D3326; --ap-ok-hover: #7AD6A0; --ap-ok-active: #98E0B5; --ap-on-ok: #15181B; --ap-mercosul: #3B6FC4; --ap-logo-bg: #FFFFFF; --ap-warn: #E8C55A; --ap-warn-soft: #3A3218; --ap-warn-dot: #E8C55A;
  --ap-err: #F2877D; --ap-err-soft: #3D2321; --ap-err-hover: #F5A098; --ap-on-err: #15181B;
  --ap-shadow: 0 1px 2px rgba(0, 0, 0, .3); --ap-shadow-lg: 0 10px 30px rgba(0, 0, 0, .4); --ap-add-shadow: 0 6px 16px rgba(0, 0, 0, .45);
  --bs-body-bg: var(--ap-bg); --bs-body-color: var(--ap-text); --bs-emphasis-color: var(--ap-text);
  --bs-secondary-color: var(--ap-text-2); --bs-border-color: var(--ap-border);
}

html, body { background: var(--ap-bg); }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; -webkit-font-smoothing: antialiased; color: var(--ap-text); }
.min-w-0 { min-width: 0; }
.text-2 { color: var(--ap-text-2); }
.narrow { max-width: 640px; margin-left: auto; margin-right: auto; }

/* ---------- estrutura: topo grafite + conteúdo + barra de baixo ---------- */
.topbar { position: sticky; top: 0; z-index: 1020; background: var(--ap-top); color: var(--ap-on-top);
  display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); }
.topbar .marca { display: flex; align-items: center; gap: 10px; color: var(--ap-on-top); text-decoration: none; min-width: 0; flex: 1; }
.topbar .marca img { height: 34px; max-width: 150px; object-fit: contain; background: var(--ap-logo-bg); border-radius: 6px; padding: 2px; }
.topbar .marca .nome { font-weight: 700; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .marca .app { color: var(--ap-on-top-2); font-size: .75rem; }
.topbar .btn-icon { color: var(--ap-on-top); }
.topbar .btn-icon:hover { background: var(--ap-top-hover); }
.logo-ap { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--ap-primary); color: var(--ap-on-primary); font-weight: 800; flex-shrink: 0; }
.main { padding: 16px 12px calc(100px + env(safe-area-inset-bottom)); max-width: 960px; margin: 0 auto; }

.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; display: grid; grid-template-columns: repeat(5, 1fr);
  align-items: center; background: var(--ap-surface); border-top: 1px solid var(--ap-border); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
.bottom-nav a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--ap-text-2); text-decoration: none; font-size: .7rem; padding: 4px 0; }
.bottom-nav a i { font-size: 1.35rem; }
.bottom-nav a.active { color: var(--ap-primary); font-weight: 600; }
.bottom-nav a .n { position: absolute; top: 0; left: calc(50% + 8px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--ap-neutral-active); color: var(--ap-text); font-size: .68rem; font-weight: 700; display: grid; place-items: center; }
.bottom-nav a.active .n { background: var(--ap-primary); color: var(--ap-on-primary); }
.bottom-nav .add-btn { justify-self: center; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; margin-top: -22px;
  background: var(--ap-primary); color: var(--ap-on-primary); font-size: 1.7rem; box-shadow: var(--ap-add-shadow); text-decoration: none; }
.bottom-nav .add-btn:hover { background: var(--ap-primary-hover); color: var(--ap-on-primary); }
.bottom-nav .add-btn:active { background: var(--ap-primary-active); }

/* ---------- componentes ---------- */
.btn { border-radius: 12px; font-weight: 600; }
.btn-lg { padding: .8rem 1.2rem; }
.btn-icon { width: 40px; height: 40px; display: inline-grid; place-items: center; padding: 0; border-radius: 10px; border: 0; background: transparent; color: var(--ap-text); font-size: 1.15rem; }
.btn-icon:hover { background: var(--ap-neutral); }
.form-control, .form-select { border-radius: 12px; border-color: var(--ap-field-border); background-color: var(--ap-surface); color: var(--ap-text); padding: .7rem .85rem; font-size: 1rem; }
.form-select { padding-right: 2.4rem; background-position: right .85rem center; }
.form-control::placeholder { color: var(--ap-text-2); opacity: 1; }
.form-label { font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }
.form-text { color: var(--ap-text-2); }
.input-big { font-size: 1.35rem; font-weight: 700; letter-spacing: .5px; padding: .75rem .9rem; }
.placa-input { text-transform: uppercase; font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: 2px; }

.page-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.page-header > .min-w-0 { flex: 1 1 auto; }
.page-header h1 { font-size: 1.35rem; font-weight: 800; margin: 0; }
.page-actions { display: flex; gap: 8px; flex-shrink: 0; }

.card-x { background: var(--ap-surface); border: 1px solid var(--ap-border); border-radius: 16px; box-shadow: var(--ap-shadow); }
.card-x > .hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--ap-border); }
.card-x > .hd h2 { font-size: 1rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 8px; }
.card-x > .bd { padding: 16px; }
.section-title { font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ap-text-2); font-weight: 700; margin: 20px 0 8px; }

.list { display: flex; flex-direction: column; }
.list-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: var(--ap-text); text-decoration: none; border-top: 1px solid var(--ap-border); min-width: 0; }
.list-row:first-child { border-top: 0; }
a.list-row:hover { background: var(--ap-neutral); }
a.list-row:active { background: var(--ap-neutral-hover); }
.meta { color: var(--ap-text-2); font-size: .84rem; }

/* cartão de atendimento */
.at-card { display: block; text-decoration: none; color: var(--ap-text); background: var(--ap-surface); border: 1px solid var(--ap-border);
  border-radius: 16px; padding: 12px 14px; box-shadow: var(--ap-shadow); border-left: 5px solid var(--ap-neutral-active); }
.at-card + .at-card { margin-top: 10px; }
.at-card:active { transform: scale(.985); }
.at-card.s-rascunho { border-left-color: var(--ap-neutral-active); }
.at-card.s-enviado { border-left-color: var(--ap-vivid); }
.at-card.s-andamento { border-left-color: var(--ap-primary); }
.at-card.s-concluido { border-left-color: var(--ap-ok); }
.at-card.s-cancelado { border-left-color: var(--ap-err); }
.at-card.parado { box-shadow: 0 0 0 2px var(--ap-warn-dot) inset, var(--ap-shadow); }
.placa { display: inline-flex; align-items: center; font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 800; letter-spacing: 1.5px;
  border: 2px solid var(--ap-text); border-radius: 6px; padding: 1px 8px; font-size: .95rem; background: var(--ap-surface); position: relative; }
.placa::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--ap-mercosul); border-radius: 3px 3px 0 0; }
.placa.lg { font-size: 1.4rem; padding: 4px 14px 2px; }
.placa.sem { border-style: dashed; color: var(--ap-text-2); }
.placa.sem::before { display: none; }

.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 12px; scrollbar-width: none; }
.chip { flex-shrink: 0; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--ap-field-border); background: var(--ap-surface); color: var(--ap-text); text-decoration: none; font-size: .88rem; }
.chip.active { background: var(--ap-top); border-color: var(--ap-top); color: var(--ap-on-top); }

.badge-st { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: .74rem; font-weight: 700; background: var(--ap-neutral); color: var(--ap-text); }
.badge-st.enviado { background: var(--ap-primary-soft); color: var(--ap-primary-ink); }
.badge-st.andamento { background: var(--ap-primary); color: var(--ap-on-primary); }
.badge-st.concluido, .badge-st.ok { background: var(--ap-ok-soft); color: var(--ap-ok); }
.badge-st.cancelado, .badge-st.err { background: var(--ap-err-soft); color: var(--ap-err); }
.badge-st.warn { background: var(--ap-warn-soft); color: var(--ap-warn); }

.searchbar { position: relative; margin-bottom: 12px; }
.searchbar i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ap-text-2); }
.searchbar input { padding-left: 40px; }

.empty { text-align: center; padding: 44px 16px; color: var(--ap-text-2); }
.empty > i { font-size: 2.6rem; color: var(--ap-vivid); }
.empty h2 { font-size: 1.1rem; color: var(--ap-text); margin: 12px 0 4px; font-weight: 700; }

.toast-stack .alert { border-radius: 12px; }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { position: relative; padding: 0 0 14px 22px; }
.timeline li::before { content: ""; position: absolute; left: 5px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--ap-primary); }
.timeline li::after { content: ""; position: absolute; left: 9px; top: 18px; bottom: 0; width: 2px; background: var(--ap-border); }
.timeline li:last-child::after { display: none; }

.dl-grid { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; }
.dl-grid dt { color: var(--ap-text-2); font-weight: 400; }
.dl-grid dd { margin: 0; overflow-wrap: anywhere; }
.achado { border-radius: 12px; padding: 10px 12px; background: var(--ap-ok-soft); color: var(--ap-ok); font-weight: 600; }
.achado.novo { background: var(--ap-neutral); color: var(--ap-text); font-weight: 500; }
.achado[hidden] { display: none; }
.wa-btn, .btn-success { --bs-btn-color: var(--ap-on-ok); --bs-btn-bg: var(--ap-ok); --bs-btn-border-color: var(--ap-ok); --bs-btn-hover-color: var(--ap-on-ok); --bs-btn-hover-bg: var(--ap-ok-hover); --bs-btn-hover-border-color: var(--ap-ok-hover); --bs-btn-active-bg: var(--ap-ok-active); --bs-btn-active-color: var(--ap-on-ok); }
.offline-bar { position: fixed; left: 12px; right: 12px; top: calc(66px + env(safe-area-inset-top)); z-index: 1040; pointer-events: none; border-radius: 12px; padding: 10px 14px;
  background: var(--ap-warn-soft); color: var(--ap-warn); font-weight: 600; box-shadow: var(--ap-shadow-lg); }
.offline-bar[hidden] { display: none; }

/* ---------- páginas públicas / entrar ---------- */
.public-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.public-card { width: 100%; max-width: 420px; background: var(--ap-surface); border: 1px solid var(--ap-border); border-radius: 20px; padding: 28px 24px; text-align: center; box-shadow: var(--ap-shadow-lg); }
.public-foot { margin-top: 18px; font-size: .8rem; color: var(--ap-text-2); }
.btn-google { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: .8rem; background: var(--ap-surface); color: var(--ap-text); border: 1px solid var(--ap-field-border); font-weight: 700; }
.btn-google:hover { background: var(--ap-neutral); color: var(--ap-text); }
.termos { text-align: left; max-height: 55vh; overflow: auto; font-size: .92rem; }

/* ---------- Bootstrap na paleta ---------- */
.btn-primary { --bs-btn-color: var(--ap-on-primary); --bs-btn-bg: var(--ap-primary); --bs-btn-border-color: var(--ap-primary);
  --bs-btn-hover-color: var(--ap-on-primary); --bs-btn-hover-bg: var(--ap-primary-hover); --bs-btn-hover-border-color: var(--ap-primary-hover);
  --bs-btn-active-color: var(--ap-on-primary); --bs-btn-active-bg: var(--ap-primary-active); --bs-btn-active-border-color: var(--ap-primary-active);
  --bs-btn-disabled-color: var(--ap-on-primary); --bs-btn-disabled-bg: var(--ap-primary); --bs-btn-disabled-border-color: var(--ap-primary);
  --bs-btn-focus-shadow-rgb: var(--ap-focus-rgb); }
.btn-light { --bs-btn-color: var(--ap-text); --bs-btn-bg: var(--ap-neutral); --bs-btn-border-color: var(--ap-neutral);
  --bs-btn-hover-color: var(--ap-text); --bs-btn-hover-bg: var(--ap-neutral-hover); --bs-btn-hover-border-color: var(--ap-neutral-hover);
  --bs-btn-active-color: var(--ap-text); --bs-btn-active-bg: var(--ap-neutral-active); --bs-btn-active-border-color: var(--ap-neutral-active);
  --bs-btn-focus-shadow-rgb: var(--ap-focus-rgb); }
.btn-dark { --bs-btn-bg: var(--ap-top); --bs-btn-border-color: var(--ap-top); --bs-btn-color: var(--ap-on-top); }
.btn-danger { --bs-btn-color: var(--ap-on-err); --bs-btn-bg: var(--ap-err); --bs-btn-border-color: var(--ap-err);
  --bs-btn-hover-color: var(--ap-on-err); --bs-btn-hover-bg: var(--ap-err-hover); --bs-btn-hover-border-color: var(--ap-err-hover); --bs-btn-active-bg: var(--ap-err-hover); }
.btn-outline-danger { --bs-btn-color: var(--ap-err); --bs-btn-border-color: var(--ap-err); --bs-btn-hover-color: var(--ap-on-err); --bs-btn-hover-bg: var(--ap-err);
  --bs-btn-hover-border-color: var(--ap-err); --bs-btn-active-bg: var(--ap-err-hover); --bs-btn-active-color: var(--ap-on-err); }
.btn:active, .btn-icon:active, .chip:active, .bottom-nav a:active, .bottom-nav .add-btn:active, a.list-row:active { transform: scale(.97); }
.btn, .btn-icon, .chip, .bottom-nav a, .add-btn, .at-card { transition: transform .08s ease, background-color .15s ease; }
:focus-visible { outline: 3px solid var(--ap-focus); outline-offset: 2px; }
.btn:focus-visible, .btn-icon:focus-visible, .chip:focus-visible, .at-card:focus-visible, .list-row:focus-visible { outline: 3px solid var(--ap-focus); outline-offset: 2px; box-shadow: none; }
.topbar :focus-visible { outline-color: var(--ap-vivid); }
.form-control:focus, .form-select:focus { border-color: var(--ap-focus); box-shadow: 0 0 0 .2rem rgba(var(--ap-focus-rgb), .28); }
.form-check-input { border-color: var(--ap-field-border); }
.form-check-input:checked { background-color: var(--ap-primary); border-color: var(--ap-primary); }
.form-check-input:focus { border-color: var(--ap-focus); box-shadow: 0 0 0 .2rem rgba(var(--ap-focus-rgb), .28); }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--ap-neutral-active); --bs-dropdown-link-active-color: var(--ap-text); --bs-dropdown-link-hover-bg: var(--ap-neutral); }
.text-danger { color: var(--ap-err) !important; }
.modal { --bs-modal-bg: var(--ap-surface); --bs-modal-border-radius: 18px; }
.confirm-icon { width: 56px; height: 56px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; background: var(--ap-err-soft); color: var(--ap-err); font-size: 1.6rem; }
.prewrap, [data-msg] { white-space: pre-line; }
.grade-fotos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 576px) { .grade-fotos { grid-template-columns: repeat(3, 1fr); } }
.foto-item { margin: 0; }
.foto-item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; border: 1px solid var(--ap-border); display: block; background: var(--ap-neutral); }
.foto-item figcaption { margin-top: 6px; display: grid; gap: 4px; overflow-wrap: anywhere; }
.foto-mini { display: block; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; border: 1px solid var(--ap-border); }
.foto-mini img { width: 100%; height: 100%; object-fit: cover; }
.timeline ul { list-style: disc; padding-left: 1.1rem; }
.timeline ul li { padding: 0 0 2px; }
.timeline ul li::before, .timeline ul li::after { display: none; }