/* LavaCar Gestão — estilos (as cores vêm do cadastro do lavacar via --cor-primaria/--cor-secundaria) */
:root {
  --cor-primaria: #0d6efd;
  --cor-secundaria: #20c997;
  --fundo: #f4f6fa;
  --borda: #e3e7ee;
  --texto-suave: #6b7280;
  --sidebar-w: 248px;
}
body { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--fundo); color: #1f2937; }
a { color: var(--cor-primaria); }

/* Botões e destaques seguem a cor do lavacar */
.btn-primary, .btn-primary:disabled {
  --bs-btn-bg: var(--cor-primaria); --bs-btn-border-color: var(--cor-primaria);
  --bs-btn-hover-bg: color-mix(in srgb, var(--cor-primaria) 85%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--cor-primaria) 85%, #000);
  --bs-btn-active-bg: color-mix(in srgb, var(--cor-primaria) 75%, #000);
  --bs-btn-disabled-bg: var(--cor-primaria); --bs-btn-disabled-border-color: var(--cor-primaria);
}
.btn-outline-primary {
  --bs-btn-color: var(--cor-primaria); --bs-btn-border-color: var(--cor-primaria);
  --bs-btn-hover-bg: var(--cor-primaria); --bs-btn-hover-border-color: var(--cor-primaria);
  --bs-btn-active-bg: var(--cor-primaria);
}
.btn-secundaria { background: var(--cor-secundaria); border-color: var(--cor-secundaria); color: #fff; }
.btn-secundaria:hover { filter: brightness(.92); color: #fff; }
.text-primaria { color: var(--cor-primaria) !important; }
.bg-primaria { background: var(--cor-primaria) !important; color: #fff; }
.bg-primaria-suave { background: color-mix(in srgb, var(--cor-primaria) 10%, #fff) !important; }
.form-check-input:checked { background-color: var(--cor-primaria); border-color: var(--cor-primaria); }
.form-control:focus, .form-select:focus { border-color: var(--cor-primaria); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--cor-primaria) 20%, transparent); }
.nav-pills .nav-link.active { background: var(--cor-primaria); }
.page-link { color: var(--cor-primaria); }
.active > .page-link { background: var(--cor-primaria); border-color: var(--cor-primaria); }

/* ---------- Painel ---------- */
.layout { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-w); background: #111827; color: #cbd5e1; flex-shrink: 0;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar .marca { padding: 1rem 1.1rem; display: flex; align-items: center; gap: .6rem; border-bottom: 1px solid #1f2937; }
.sidebar .marca img { max-height: 40px; max-width: 120px; border-radius: 6px; background: #fff; padding: 2px; }
.sidebar .marca .logo-texto { width: 40px; height: 40px; border-radius: 10px; background: var(--cor-primaria);
  display: grid; place-items: center; color: #fff; font-weight: 700; }
.sidebar .marca strong { color: #fff; font-size: .95rem; line-height: 1.15; }
.sidebar .secao { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: #6b7280; padding: 1rem 1.1rem .3rem; }
.sidebar a.item { display: flex; align-items: center; gap: .7rem; padding: .5rem 1.1rem; color: #cbd5e1; text-decoration: none; font-size: .92rem; border-left: 3px solid transparent; }
.sidebar a.item:hover { background: #1f2937; color: #fff; }
.sidebar a.item.ativo { background: #1f2937; color: #fff; border-left-color: var(--cor-primaria); }
.sidebar a.item i { font-size: 1.05rem; width: 1.2rem; text-align: center; }
.conteudo { flex: 1; min-width: 0; }
.topo { background: #fff; border-bottom: 1px solid var(--borda); padding: .6rem 1.25rem; display: flex; align-items: center; gap: .75rem; position: sticky; top: 0; z-index: 1020; }
.topo h1 { font-size: 1.15rem; margin: 0; font-weight: 600; }
.area { padding: 1.25rem; }
@media (max-width: 991.98px) {
  .sidebar { position: fixed; left: calc(-1 * var(--sidebar-w)); z-index: 1045; transition: left .2s; }
  .sidebar.aberta { left: 0; box-shadow: 0 0 40px rgba(0,0,0,.4); }
  .area { padding: .85rem; }
  .sombra-menu { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 1040; }
  .sombra-menu.aberta { display: block; }
}

.card { border: 1px solid var(--borda); border-radius: 14px; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.card-header { background: #fff; border-bottom: 1px solid var(--borda); font-weight: 600; border-radius: 14px 14px 0 0 !important; }
.kpi { padding: 1rem 1.1rem; }
.kpi .rotulo { font-size: .78rem; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .04em; }
.kpi .valor { font-size: 1.55rem; font-weight: 700; line-height: 1.2; }
.kpi .icone { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1.25rem;
  background: color-mix(in srgb, var(--cor-primaria) 12%, #fff); color: var(--cor-primaria); }
.table > :not(caption) > * > * { padding: .6rem .75rem; }
.table thead th { font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); font-weight: 600; background: #fafbfc; }

/* Pátio (kanban) */
.kanban { display: grid; grid-template-columns: repeat(4, minmax(250px, 1fr)); gap: 1rem; overflow-x: auto; padding-bottom: .5rem; }
@media (max-width: 991.98px) { .kanban { grid-template-columns: repeat(4, 82vw); scroll-snap-type: x mandatory; } .kanban > * { scroll-snap-align: start; } }
.coluna { background: #eef1f6; border-radius: 14px; padding: .75rem; min-height: 200px; }
.coluna h6 { display: flex; justify-content: space-between; align-items: center; font-weight: 600; margin-bottom: .75rem; }
.os-card { background: #fff; border-radius: 12px; padding: .75rem; margin-bottom: .65rem; border: 1px solid var(--borda); border-left: 4px solid var(--cor-primaria); }
.os-card .placa { font-family: ui-monospace, monospace; font-weight: 700; background: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 6px; padding: 0 .4rem; font-size: .85rem; }
.os-card.atrasada { border-left-color: #dc3545; }
.status-aguardando { border-left-color: #6c757d; } .status-lavando { border-left-color: var(--cor-primaria); }
.status-finalizando { border-left-color: #0dcaf0; } .status-concluido { border-left-color: #198754; }

.form-label { font-weight: 500; font-size: .9rem; margin-bottom: .25rem; }
.form-text { font-size: .78rem; }
.errorlist { list-style: none; padding: 0; margin: .25rem 0 0; color: #dc3545; font-size: .82rem; }
.checks-grid ul, .checks-grid > div { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .4rem .75rem; }
.checks-grid > div > div, .checks-grid li { margin: 0; }
.checks-grid label { display: flex; gap: .5rem; align-items: center; cursor: pointer; margin: 0; font-weight: 400; }
.checks-grid input[type=checkbox] { accent-color: var(--cor-primaria); float: none; margin: 0; flex-shrink: 0; width: 1.1em; height: 1.1em; }

/* ---------- Portal ---------- */
.portal-nav { background: #fff; border-bottom: 1px solid var(--borda); }
.hero { background: linear-gradient(135deg, var(--cor-primaria), color-mix(in srgb, var(--cor-secundaria) 70%, var(--cor-primaria))); color: #fff; padding: 3rem 0 4rem; }
.hero h1 { font-weight: 700; letter-spacing: -.02em; }
.busca-box { background: #fff; border-radius: 16px; padding: .6rem; box-shadow: 0 10px 30px rgba(0,0,0,.12); margin-top: -2.2rem; }
.lavacar-card { transition: transform .15s, box-shadow .15s; }
.lavacar-card:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(16,24,40,.08); }
.lavacar-logo { width: 64px; height: 64px; object-fit: contain; border-radius: 12px; background: #fff; border: 1px solid var(--borda); }
.lavacar-logo-texto { width: 64px; height: 64px; border-radius: 12px; display: grid; place-items: center; font-size: 1.6rem; font-weight: 700; color: #fff; }
#mapa { height: 320px; border-radius: 14px; z-index: 0; }
.opcao-radio label { display: block; border: 2px solid var(--borda); border-radius: 12px; padding: .75rem 1rem; cursor: pointer; }
.opcao-radio input { float: none; margin: 0 .5rem 0 0; vertical-align: -.15em; }
.opcao-radio label:has(input:checked) { border-color: var(--cor-primaria); background: color-mix(in srgb, var(--cor-primaria) 7%, #fff); }
.horarios-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: .5rem; }
.horarios-grid button.selecionado { background: var(--cor-primaria); color: #fff; border-color: var(--cor-primaria); }
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline li { position: relative; padding: 0 0 1.2rem 2.2rem; }
.timeline li::before { content: ""; position: absolute; left: .62rem; top: 1.4rem; bottom: 0; width: 2px; background: var(--borda); }
.timeline li:last-child::before { display: none !important; }
.servico-op { display: flex; align-items: center; gap: .5rem; }
.timeline .ponto { position: absolute; left: 0; top: .1rem; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: #e5e7eb; display: grid; place-items: center; color: #fff; font-size: .75rem; }
.timeline li.feito .ponto { background: var(--cor-secundaria); }
.timeline li.atual .ponto { background: var(--cor-primaria); box-shadow: 0 0 0 5px color-mix(in srgb, var(--cor-primaria) 22%, transparent); }
.nav-inferior { display: none !important; }
.servico-op { display: flex; align-items: center; gap: .5rem; }
@media (max-width: 767.98px) {
  .nav-inferior { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid var(--borda); z-index: 1030; padding-bottom: env(safe-area-inset-bottom); }
  .nav-inferior a { flex: 1; text-align: center; padding: .45rem 0; font-size: .72rem; color: #6b7280; text-decoration: none; }
  .nav-inferior a i { display: block; font-size: 1.25rem; }
  .nav-inferior a.ativo { color: var(--cor-primaria); }
  body.portal { padding-bottom: 64px; }
}

/* Impressão */
@media print {
  .sidebar, .topo, .no-print, .nav-inferior, .portal-nav { display: none !important; }
  .area { padding: 0; } body { background: #fff; } .card { border: none; box-shadow: none; }
}

/* filtro inicial de serviços no agendamento (antes do JS) */
#lista-servicos[data-atend=veicular] .servico-op[data-cat=avulso],
#lista-servicos[data-atend=avulso] .servico-op[data-cat=veicular] { display: none !important; }
.servico-op { display: flex; align-items: center; gap: .5rem; }