/* Città Fleet — identidade visual no padrão do Presentare, sobre o Pico CSS.
   Tema escuro (padrão) e claro, escolhido em /estatico/tema.js. Mobile primeiro.
   Tokens: --cf-* (cores e raios). Os tokens do Pico (--pico-*) são derivados deles. */

/* ---------- Fontes (hospedadas no próprio servidor: a CSP bloqueia fontes externas) ---------- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/estatico/fontes/inter.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/estatico/fontes/outfit.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root {
  --cf-raio: 12px; --cf-raio-g: 16px; --cf-raio-p: 8px;
  /* status: iguais nos dois temas; vermelho e verde vêm do logo da Città */
  --cf-confirmada: #6366f1; --cf-solicitada: #eab308; --cf-uso: #0ea5e9; --cf-aguardando: #f59e0b;
  --cf-finalizada: #71717a; --cf-cancelada: #a1a1aa; --cf-manut: #f97316; --cf-critico: #e8213b; --cf-ok: #3aa655;
  --cf-fonte: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cf-fonte-titulo: "Outfit", "Inter", system-ui, sans-serif;
}
:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --cf-fundo: #09090b; --cf-cartao: #0f0f12; --cf-cartao-2: #17171b; --cf-borda: #242429; --cf-suave: #27272a;
  --cf-texto: #fafafa; --cf-texto-2: #a1a1aa; --cf-vidro: rgba(15, 15, 18, .82);
  --cf-primaria: #7758f3; --cf-primaria-2: #9b6cf6; --cf-primaria-suave: rgba(119, 88, 243, .18);
  --cf-sombra: 0 10px 30px -12px rgba(0, 0, 0, .6);
  --cf-brilho-1: rgba(99, 102, 241, .06); --cf-brilho-2: rgba(168, 85, 247, .06);
}
:root[data-theme="light"] {
  color-scheme: light;
  --cf-fundo: #f5f6f9; --cf-cartao: #ffffff; --cf-cartao-2: #f1f4f9; --cf-borda: #d9e1ec; --cf-suave: #e8edf5;
  --cf-texto: #0f172a; --cf-texto-2: #64748b; --cf-vidro: rgba(255, 255, 255, .86);
  --cf-primaria: #5f3bf0; --cf-primaria-2: #8b5cf6; --cf-primaria-suave: rgba(95, 59, 240, .12);
  --cf-sombra: 0 10px 30px -14px rgba(15, 23, 42, .18);
  --cf-brilho-1: rgba(99, 102, 241, .07); --cf-brilho-2: rgba(168, 85, 247, .07);
}
/* Pico derivado dos tokens (mesma especificidade dos seletores de tema do Pico, declarado depois) */
:root, :root[data-theme="dark"], :root[data-theme="light"] {
  --pico-font-family: var(--cf-fonte);
  --pico-font-size: 95%;
  --pico-border-radius: 10px;
  --pico-background-color: var(--cf-fundo);
  --pico-color: var(--cf-texto);
  --pico-muted-color: var(--cf-texto-2);
  --pico-muted-border-color: var(--cf-borda);
  --pico-h1-color: var(--cf-texto); --pico-h2-color: var(--cf-texto); --pico-h3-color: var(--cf-texto);
  --pico-h4-color: var(--cf-texto); --pico-h5-color: var(--cf-texto); --pico-h6-color: var(--cf-texto);
  --pico-primary: var(--cf-primaria);
  --pico-primary-background: var(--cf-primaria);
  --pico-primary-border: var(--cf-primaria);
  --pico-primary-underline: var(--cf-primaria-suave);
  --pico-primary-hover: var(--cf-primaria-2);
  --pico-primary-hover-background: var(--cf-primaria-2);
  --pico-primary-hover-border: var(--cf-primaria-2);
  --pico-primary-hover-underline: var(--cf-primaria-2);
  --pico-primary-focus: var(--cf-primaria-suave);
  --pico-primary-inverse: #fff;
  --pico-secondary: var(--cf-texto-2);
  --pico-secondary-background: var(--cf-cartao-2);
  --pico-secondary-border: var(--cf-borda);
  --pico-secondary-hover: var(--cf-texto);
  --pico-secondary-hover-background: var(--cf-suave);
  --pico-secondary-hover-border: var(--cf-borda);
  --pico-secondary-focus: var(--cf-primaria-suave);
  --pico-secondary-inverse: var(--cf-texto);
  --pico-card-background-color: var(--cf-cartao);
  --pico-card-sectioning-background-color: var(--cf-cartao-2);
  --pico-card-box-shadow: var(--cf-sombra);
  --pico-dropdown-background-color: var(--cf-cartao);
  --pico-dropdown-border-color: var(--cf-borda);
  --pico-dropdown-hover-background-color: var(--cf-suave);
  --pico-dropdown-color: var(--cf-texto);
  --pico-form-element-background-color: var(--cf-fundo);
  --pico-form-element-selected-background-color: var(--cf-suave);
  --pico-form-element-border-color: var(--cf-borda);
  --pico-form-element-color: var(--cf-texto);
  --pico-form-element-placeholder-color: var(--cf-texto-2);
  --pico-form-element-active-background-color: var(--cf-fundo);
  --pico-form-element-active-border-color: var(--cf-primaria);
  --pico-form-element-focus-color: var(--cf-primaria-suave);
  --pico-table-border-color: var(--cf-borda);
  --pico-table-row-stripped-background-color: var(--cf-cartao-2);
  --pico-modal-overlay-background-color: rgba(9, 9, 11, .7);
  --pico-mark-background-color: var(--cf-primaria-suave);
  --pico-mark-color: var(--cf-texto);
  --pico-code-background-color: var(--cf-cartao-2);
  --pico-switch-color: #fff;
  --pico-accordion-close-summary-color: var(--cf-texto);
  --pico-accordion-open-summary-color: var(--cf-texto-2);
}

/* ---------- Base ---------- */
body {
  background-color: var(--cf-fundo);
  background-image: radial-gradient(circle at 15% 50%, var(--cf-brilho-1), transparent 50%),
                    radial-gradient(circle at 85% 30%, var(--cf-brilho-2), transparent 50%);
  background-attachment: fixed;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--cf-fonte-titulo); font-weight: 600; letter-spacing: -.01em; }
svg.i { width: 1.1em; height: 1.1em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -.18em; flex: none; }
article { border: 1px solid var(--cf-borda); border-radius: var(--cf-raio-g); }
article > header, article > footer { border-color: var(--cf-borda); }
article > header { border-radius: var(--cf-raio-g) var(--cf-raio-g) 0 0; }
article > header h3, article > header h4 { margin: 0; font-size: 1.05rem; }
table { --pico-background-color: transparent; }
th { color: var(--cf-texto-2); font-weight: 500; }
thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
tbody tr:hover { background: color-mix(in srgb, var(--cf-cartao-2) 60%, transparent); }
mark { border-radius: 6px; padding: .05rem .4rem; }
.conteudo { max-width: 1440px; padding-top: 1.5rem; padding-bottom: 6rem; }
.inline { display: inline; margin: 0; }
button.pequeno, [role=button].pequeno, .pequeno { padding: .3rem .7rem; font-size: .85rem; width: auto; margin-bottom: 0; }
[role=button], button { font-weight: 600; }
button:not(.secondary):not(.outline):not(.contrast):not(.icone-btn):not(.botao-fantasma):not(.mostrar-senha):not(.vinculo-remover),
[role=button]:not(.secondary):not(.outline):not(.contrast):not(.botao-sec):not(.evento):not(.item-lista) {
  box-shadow: 0 8px 20px -10px var(--cf-primaria);
}
.botao-sec, [role=button].botao-sec { background: var(--cf-cartao-2); border: 1px solid var(--cf-borda); color: var(--cf-texto);
  padding: .4rem .75rem; font-size: .88rem; display: inline-flex; align-items: center; gap: .35rem; }
.botao-sec:hover { background: var(--cf-suave); border-color: var(--cf-borda); color: var(--cf-texto); }
.icone-so { padding: .4rem .5rem; }
.botao-fantasma { background: none; border: 0; color: var(--cf-texto-2); padding: .35rem .5rem; margin: 0; width: auto;
  display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; font-weight: 500; box-shadow: none; }
.botao-fantasma:hover { color: var(--cf-texto); background: var(--cf-suave); }
.icone-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; margin: 0; border: 0; border-radius: var(--cf-raio-p);
  background: transparent; color: var(--cf-texto-2); box-shadow: none; }
.icone-btn:hover { background: var(--cf-suave); color: var(--cf-texto); }
.icone-btn svg.i { width: 18px; height: 18px; }
:root[data-theme="light"] .so-escuro, :root:not([data-theme="light"]) .so-claro { display: none; }

/* Mensagens */
.erro, .ok, .aviso { display: flex; gap: .5rem; align-items: flex-start; padding: .7rem .9rem; border-radius: var(--cf-raio); border: 1px solid; }
.erro  { --c: var(--cf-critico); }
.ok    { --c: var(--cf-ok); }
.aviso { --c: var(--cf-aguardando); font-weight: 600; }
.erro, .ok, .aviso { color: color-mix(in srgb, var(--c) 70%, var(--cf-texto)); border-color: color-mix(in srgb, var(--c) 40%, transparent);
  background: color-mix(in srgb, var(--c) 12%, transparent); }
.erro svg.i, .ok svg.i, .aviso svg.i { color: var(--c); margin-top: .15em; }

/* ---------- Barra superior (vidro) ---------- */
.topo { position: sticky; top: 0; z-index: 30; background: var(--cf-vidro); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--cf-borda); }
.topo-in { max-width: 1440px; margin: 0 auto; display: flex; align-items: center; gap: 1rem; padding: .55rem var(--pico-spacing); }
.marca { display: inline-flex; align-items: center; gap: .6rem; color: var(--cf-texto); font: 700 1.2rem var(--cf-fonte-titulo); text-decoration: none; }
.marca:hover { color: var(--cf-texto); text-decoration: none; }
.marca-logo { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--cf-cartao-2); border: 1px solid var(--cf-borda); }
.marca-logo img { width: 26px; height: 26px; }
.menu { display: none; align-items: center; gap: .15rem; margin-left: 1rem; }
.menu > a, .menu > details > summary { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .75rem; border-radius: var(--cf-raio-p);
  color: var(--cf-texto-2); font-size: .9rem; font-weight: 500; text-decoration: none; }
.menu > a:hover, .menu > details > summary:hover { color: var(--cf-texto); background: var(--cf-suave); }
.menu > a[aria-current=page], .menu > details > summary[aria-current=page] { color: var(--cf-texto); background: var(--cf-primaria-suave); }
.menu > a[aria-current=page] svg.i, .menu > details > summary[aria-current=page] svg.i { color: var(--cf-primaria); }
.menu details.dropdown { margin: 0; }
.menu details.dropdown > summary { height: auto; border: 0; background: none; }
.menu details.dropdown > summary::after { margin-left: .2rem; }
.menu details.dropdown > summary[aria-current=page] { background: var(--cf-primaria-suave); }
.menu details.dropdown > ul { min-width: 220px; border: 1px solid var(--cf-borda); border-radius: var(--cf-raio); padding: .35rem; box-shadow: var(--cf-sombra); }
.menu details.dropdown > ul li { padding: 0; }
.menu details.dropdown > ul li a { border-radius: var(--cf-raio-p); padding: .5rem .7rem; margin: 0; }
.menu details.dropdown > ul li a[aria-current=page] { color: var(--cf-primaria); font-weight: 600; }
.topo-lado { margin-left: auto; display: flex; align-items: center; gap: .35rem; }
.usuario { display: inline-flex; align-items: center; gap: .5rem; padding-left: .6rem; margin-left: .2rem; border-left: 1px solid var(--cf-borda);
  font-weight: 600; font-size: .88rem; }
.avatar { width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; font-size: .72rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--cf-primaria), var(--cf-primaria-2)); }
.contador { display: inline-block; min-width: 1.4em; padding: 0 .4em; border-radius: 99px; background: var(--cf-critico); color: #fff;
  font-size: .7rem; font-weight: 700; text-align: center; line-height: 1.5; }
.tema-solto { position: fixed; top: .8rem; right: .8rem; z-index: 30; }
.so-largo { display: none; }

/* Menu inferior do celular */
.menu-celular { position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; display: flex; justify-content: space-around;
  background: var(--cf-vidro); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-top: 1px solid var(--cf-borda);
  padding: .4rem .2rem calc(.45rem + env(safe-area-inset-bottom)); }
.menu-celular a { position: relative; display: grid; justify-items: center; gap: 2px; padding: .25rem .5rem; font-size: .68rem; color: var(--cf-texto-2); text-decoration: none; }
.menu-celular a svg.i { width: 22px; height: 22px; }
.menu-celular a[aria-current=page] { color: var(--cf-primaria); }
.menu-celular .contador { position: absolute; top: -2px; right: 2px; }

@media (min-width: 1024px) {
  .menu { display: flex; }
  .menu-celular { display: none; }
  .so-largo { display: inline; }
  .conteudo { padding-bottom: 3rem; }
}

/* ---------- Cabeçalhos de página e abas ---------- */
.cabeca { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.cabeca h2 { margin: 0; font-size: 1.5rem; }
.cabeca-icone { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--cf-primaria-suave); color: var(--cf-primaria); }
.cabeca-icone svg.i { width: 20px; height: 20px; }
.abas { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; padding: 3px; margin-bottom: 1.25rem;
  background: var(--cf-cartao-2); border: 1px solid var(--cf-borda); border-radius: var(--cf-raio); width: fit-content; max-width: 100%; }
.abas a { flex: none; padding: .4rem .85rem; border-radius: var(--cf-raio-p); color: var(--cf-texto-2); font-size: .88rem; font-weight: 500; text-decoration: none; }
.abas a:hover { color: var(--cf-texto); }
.abas a[aria-current=page] { background: var(--cf-primaria); color: #fff; }
h3.secao { display: flex; align-items: center; gap: .5rem; margin: 2.2rem 0 1rem; font-size: 1.15rem; }

.formulario { max-width: 640px; margin: 0 auto; }
.barra { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; }
.barra h2 { margin: 0; }
.acoes { display: flex; flex-wrap: wrap; gap: .4rem; }
.acoes [role=button] { padding: .35rem .8rem; }
.filtro { max-width: 320px; margin: 0; }
.filtro select { margin: 0; padding-top: .45rem; padding-bottom: .45rem; }
.grade2 { display: grid; grid-template-columns: 1fr; gap: 0 .8rem; }
@media (min-width: 640px) { .grade2 { grid-template-columns: 1fr 1fr; } }
.grade-admin { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 1100px) { .grade-admin { grid-template-columns: 1fr 1fr; } }
.bolinha { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .4rem; vertical-align: middle; }
.lista { list-style: none; padding: 0; }
.lista li { list-style: none; padding: .3rem 0; }
details.senha { margin: 0; }
details.senha summary { font-size: .85rem; }
details.senha form input { margin-bottom: .4rem; }
label.marcar { align-self: center; }

/* ---------- Selos de status ---------- */
.selo, .prio, .sit { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; font-weight: 600; padding: .1rem .6rem;
  border-radius: 99px; white-space: nowrap; border: 1px solid color-mix(in srgb, var(--c, var(--cf-finalizada)) 40%, transparent);
  background: color-mix(in srgb, var(--c, var(--cf-finalizada)) 14%, transparent); color: color-mix(in srgb, var(--c, var(--cf-finalizada)) 72%, var(--cf-texto)); }
.selo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c, var(--cf-finalizada)); }
.st-confirmada { --c: var(--cf-confirmada); }
.st-solicitada { --c: var(--cf-solicitada); }
.st-em_uso { --c: var(--cf-uso); }
.st-aguardando_devolucao { --c: var(--cf-aguardando); }
.st-finalizada { --c: var(--cf-finalizada); }
.st-cancelada, .st-rejeitada { --c: var(--cf-cancelada); text-decoration: line-through; }
.st-manutencao, .st-veiculo-manutencao { --c: var(--cf-manut); }
.st-veiculo-indisponivel { --c: var(--cf-critico); }
.st-veiculo-baixado { --c: var(--cf-finalizada); }
.prio-baixa { --c: var(--cf-finalizada); } .prio-media { --c: var(--cf-confirmada); }
.prio-alta { --c: var(--cf-manut); } .prio-urgente { --c: var(--cf-critico); }
.os-aberta { --c: var(--cf-confirmada); } .os-agendada { --c: var(--cf-solicitada); } .os-em_execucao { --c: var(--cf-manut); }
.os-concluida { --c: var(--cf-ok); } .os-cancelada { --c: var(--cf-cancelada); text-decoration: line-through; }
.sit-em_dia { --c: var(--cf-ok); } .sit-vencendo { --c: var(--cf-aguardando); } .sit-vencida { --c: var(--cf-critico); }
.critico { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .04em; padding: .05rem .45rem; border-radius: 99px;
  background: var(--cf-critico); color: #fff; vertical-align: middle; }

/* ---------- Agenda ---------- */
.cartao { background: var(--cf-cartao); border: 1px solid var(--cf-borda); border-radius: var(--cf-raio-g); box-shadow: var(--cf-sombra); }
.agenda-cartao { overflow: hidden; }
.agenda-barra { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .9rem 1rem; border-bottom: 1px solid var(--cf-borda); }
.agenda-nav { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.agenda-nav [role=button] { margin: 0; }
.agenda-titulo { margin: 0 .5rem; font-size: 1.1rem; }
.legenda { display: flex; flex-wrap: wrap; gap: .35rem; margin-left: auto; }
.botao-nova { display: inline-flex; align-items: center; gap: .4rem; margin: 0; }
.agenda-rolagem { overflow-x: auto; }
table.agenda { min-width: 960px; table-layout: fixed; margin: 0; border-collapse: collapse; }
table.agenda th, table.agenda td { border: 0; border-right: 1px solid var(--cf-borda); border-bottom: 1px solid var(--cf-borda); background: transparent; }
table.agenda tr > :last-child { border-right: 0; }
table.agenda tbody tr:last-child > * { border-bottom: 0; }
table.agenda tbody tr:hover { background: transparent; }
table.agenda .col-veiculo { width: 210px; text-align: left; }
table.agenda thead th { text-align: center; font-size: .75rem; padding: .7rem .4rem; }
table.agenda thead th.dia b { display: block; margin: .15rem auto 0; font: 600 1.25rem var(--cf-fonte-titulo); color: var(--cf-texto); }
table.agenda thead th.dia.hoje b { width: 2.1rem; height: 2.1rem; line-height: 2.1rem; border-radius: 50%; background: var(--cf-primaria); color: #fff; }
table.agenda td { vertical-align: top; padding: .4rem; }
table.agenda td.hoje { background: color-mix(in srgb, var(--cf-primaria) 5%, transparent); }
th.veiculo { vertical-align: top; padding: .65rem .75rem .65rem 1rem; color: var(--cf-texto); position: relative; font-weight: 400; }
th.veiculo::before { content: ""; position: absolute; left: .45rem; top: .7rem; bottom: .7rem; width: 4px; border-radius: 4px; background: var(--setor, var(--cf-borda)); }
th.veiculo .nome-veiculo { display: block; font-weight: 600; color: var(--cf-texto); text-decoration: none; }
th.veiculo .nome-veiculo:hover { color: var(--cf-primaria); }
th.veiculo > small { display: block; font-size: .75rem; color: var(--cf-texto-2); }
th.veiculo .selo { margin-top: .35rem; }
th.veiculo.alerta-vencendo { background: color-mix(in srgb, var(--cf-aguardando) 8%, transparent); }
th.veiculo.alerta-vencida { background: color-mix(in srgb, var(--cf-critico) 9%, transparent); }
.selo-manut { display: flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 700; margin-top: .3rem; color: var(--cf-aguardando); }
.alerta-vencida .selo-manut { color: var(--cf-critico); }
.texto-manut { display: block; font-size: .68rem; line-height: 1.25; color: var(--cf-texto-2); }

.evento { --c: var(--cf-confirmada); display: block; font-size: .75rem; line-height: 1.3; border-radius: var(--cf-raio-p); padding: .35rem .5rem; margin-bottom: .35rem;
  border-left: 3px solid var(--c); background: color-mix(in srgb, var(--c) 16%, var(--cf-cartao)); color: var(--cf-texto); }
.evento strong { display: block; font-weight: 600; }
.evento span, .evento small { display: block; color: var(--cf-texto-2); }
.evento small { font-size: .7rem; }
.evento.st-cancelada, .evento.st-rejeitada { text-decoration: none; opacity: .6; }
.evento.st-cancelada strong, .evento.st-rejeitada strong { text-decoration: line-through; }
.evento[role=button] { cursor: pointer; transition: background .15s, transform .15s; }
.evento[role=button]:hover { background: color-mix(in srgb, var(--c) 28%, var(--cf-cartao)); }
.evento[role=button]:focus-visible { outline: 2px solid var(--cf-primaria); outline-offset: 1px; }
/* Reserva que atravessa dias: borda tracejada indica continuação */
.evento.continua { border-right: 2px dashed var(--c); }
/* Conflito de horário (alarme: a regra do sistema impede, mas destaca dados inconsistentes) */
.evento.conflito, .item-lista.conflito { --c: var(--cf-critico); outline: 2px solid var(--cf-critico); animation: pulsar 1.2s ease-in-out infinite alternate; }
.alerta-conflito { display: flex; align-items: center; gap: .25rem; font-weight: 700; color: var(--cf-critico); }
@keyframes pulsar { from { outline-color: var(--cf-critico); } to { outline-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .evento.conflito, .item-lista.conflito { animation: none; } }
a.bloco-manut { --c: var(--cf-manut); display: block; font-size: .75rem; line-height: 1.3; padding: .35rem .5rem; margin-bottom: .35rem; border-radius: var(--cf-raio-p);
  text-decoration: none; color: var(--cf-texto); border-left: 3px solid var(--c);
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 16%, var(--cf-cartao)) 0 8px, color-mix(in srgb, var(--c) 7%, var(--cf-cartao)) 8px 16px); }
a.bloco-manut strong { display: flex; align-items: center; gap: .3rem; }
a.bloco-manut small { display: block; color: var(--cf-texto-2); }

/* Agenda em lista (celular) */
.agenda-lista { padding: .8rem .8rem 1rem; }
.dias-chips { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; margin-bottom: .8rem; }
.dias-chips a { text-align: center; padding: .35rem 0 .3rem; border-radius: var(--cf-raio); border: 1px solid var(--cf-borda); background: var(--cf-cartao-2);
  color: var(--cf-texto-2); font-size: .64rem; font-weight: 500; text-decoration: none; }
.dias-chips a b { display: block; font: 600 1.05rem var(--cf-fonte-titulo); color: var(--cf-texto); }
.dias-chips a i { display: block; width: 5px; height: 5px; margin: 2px auto 0; border-radius: 50%; background: var(--cf-primaria); }
.dias-chips a:not(:has(i))::after { content: ""; display: block; height: 7px; }
.dias-chips a.hoje { background: var(--cf-primaria); border-color: var(--cf-primaria); color: #fff; }
.dias-chips a.hoje b { color: #fff; } .dias-chips a.hoje i { background: #fff; }
.dia-lista { scroll-margin-top: 80px; margin-top: 1rem; }
.dia-lista h3 { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--cf-texto-2); margin: 0 0 .5rem; font-family: var(--cf-fonte); font-weight: 600; }
.dia-lista.hoje h3 { color: var(--cf-texto); }
.dia-lista .vazio { font-size: .8rem; color: var(--cf-texto-2); margin: 0 0 .3rem; padding-left: .2rem; }
.item-lista { --c: var(--cf-confirmada); display: flex; gap: .7rem; align-items: stretch; padding: .7rem .75rem; margin-bottom: .5rem; border-radius: var(--cf-raio);
  background: var(--cf-cartao-2); border: 1px solid var(--cf-borda); color: var(--cf-texto); text-decoration: none; cursor: pointer; }
a.item-lista:hover, .item-lista:hover { color: var(--cf-texto); border-color: color-mix(in srgb, var(--c) 50%, var(--cf-borda)); }
.item-lista b { display: block; font-size: .86rem; }
.item-lista small { display: block; font-size: .75rem; color: var(--cf-texto-2); }
.item-lista .selo { margin-top: .35rem; }
.item-lista.alerta-vencendo { --c: var(--cf-aguardando); } .item-lista.alerta-vencida { --c: var(--cf-critico); }
.item-hora { width: 4.4rem; flex: none; font: 600 .8rem var(--cf-fonte-titulo); color: var(--cf-texto); }
.item-hora small { font: 400 .72rem var(--cf-fonte); }
.item-linha { width: 3px; flex: none; border-radius: 3px; background: var(--c); }
.botao-flutuante { position: fixed; right: 1rem; bottom: calc(4.6rem + env(safe-area-inset-bottom)); z-index: 25; width: 54px; height: 54px; border-radius: 16px;
  display: grid; place-items: center; background: var(--cf-primaria); color: #fff; box-shadow: 0 12px 26px -8px var(--cf-primaria); }
.botao-flutuante:hover { color: #fff; }
.botao-flutuante svg.i { width: 24px; height: 24px; }
.so-computador { display: none !important; }
@media (min-width: 768px) {
  .so-computador { display: revert !important; }
  .legenda.so-computador, .botao-nova.so-computador { display: flex !important; }
  .so-celular { display: none !important; }
}

/* ---------- Janelas de detalhe/edição ---------- */
dialog article.janela { width: min(640px, 100%); max-height: 90vh; overflow-y: auto; }
.janela header { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; gap: .5rem; }
.janela header h3 { margin: 0; }
.fechar button { margin: 0; }
dl.detalhes { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; }
dl.detalhes dt { font-weight: 600; color: var(--cf-texto-2); }
dl.detalhes dd { margin: 0; }
.acoes-janela { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-start; }
.acoes-janela button, .acoes-janela [role=button] { width: auto; }
details.cancelar { margin: 0; }
details.cancelar summary { width: auto; }

/* ---------- Login e espera ---------- */
.login { max-width: 400px; margin: 8vh auto; border: 1px solid var(--cf-borda); }
.login-marca { text-align: center; background: transparent !important; border: 0 !important; }
.login-marca img { display: block; width: 64px; height: 64px; margin: 0 auto .9rem; padding: 10px; border-radius: 18px;
  background: var(--cf-cartao-2); border: 1px solid var(--cf-borda); box-shadow: 0 10px 30px -10px var(--cf-primaria); }
.login-marca h2 { margin-bottom: .2rem; font-size: 1.6rem; }
.login-marca p { color: var(--cf-texto-2); margin: 0; }
.login form button { width: 100%; }
.login-rodape { margin: .8rem 0 0; text-align: center; color: var(--cf-texto-2); }
.pendentes { border-left: 4px solid var(--cf-aguardando); }
.pendentes .inline-form select { width: auto; margin: 0; }
.pendentes .inline-form .marcar, .pendentes .inline-form button { margin: 0; }

/* ===== Retirada, devolução, comprovante, pendências (mobile primeiro) ===== */
.registro .placa { margin: 0; color: var(--cf-texto-2); }
input.grande, button.grande { font-size: 1.15rem; padding: .8rem 1rem; }
button.grande { width: 100%; margin-top: 1rem; }
fieldset.lembretes label.marcavel { display: flex; gap: .6rem; align-items: center; padding: .55rem .2rem; font-size: 1.02rem; }
fieldset.lembretes input[type=checkbox] { width: 1.5rem; height: 1.5rem; margin: 0; }

/* Opções em "pílulas" grandes para o dedo */
.opcoes { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0; }
label.opcao { flex: 1 1 30%; min-width: 6.5rem; margin: 0; cursor: pointer; }
label.opcao input { position: absolute; opacity: 0; width: 1px; height: 1px; }
label.opcao span { display: block; text-align: center; padding: .7rem .4rem; border: 1px solid var(--cf-borda); border-radius: var(--cf-raio);
  background: var(--cf-cartao-2); font-weight: 600; user-select: none; transition: background .15s, border-color .15s; }
label.opcao span:hover { border-color: var(--cf-primaria); }
label.opcao input:focus-visible + span { outline: 3px solid var(--cf-primaria-suave); }
label.opcao input:checked + span { border-color: var(--cf-primaria); background: var(--cf-primaria); color: #fff; }
label.opcao.op-c input:checked + span { background: var(--cf-ok); border-color: var(--cf-ok); color: #fff; }
label.opcao.op-nc input:checked + span { background: var(--cf-critico); border-color: var(--cf-critico); color: #fff; }
label.opcao.op-na input:checked + span { background: var(--cf-finalizada); border-color: var(--cf-finalizada); color: #fff; }

/* Checklist: o detalhe do "Não conforme" só aparece quando marcado (sem JavaScript) */
fieldset.item { border: 1px solid var(--cf-borda); border-radius: var(--cf-raio); padding: .8rem .9rem .4rem; margin-bottom: .8rem; background: var(--cf-cartao); }
fieldset.item legend { font-weight: 700; padding: 0 .3rem; }
fieldset.item .ajuda { display: block; color: var(--cf-texto-2); }
fieldset.item .detalhe-nc { display: none; border-left: 3px solid var(--cf-critico); padding-left: .7rem; margin-top: .4rem; }
fieldset.item:has(input[value=NC]:checked) { border-color: var(--cf-critico); }
fieldset.item:has(input[value=NC]:checked) .detalhe-nc { display: block; }

/* Comprovante */
.comprovante section { margin-top: 1.2rem; }
table.checklist tr.r-NC td { background: color-mix(in srgb, var(--cf-critico) 12%, transparent); color: color-mix(in srgb, var(--cf-critico) 70%, var(--cf-texto)); }
.fotos { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0; }
.fotos img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--cf-raio-p); border: 1px solid var(--cf-borda); }
@media print {
  :root { --cf-fundo: #fff; --cf-cartao: #fff; --cf-cartao-2: #f4f4f5; --cf-texto: #000; --cf-texto-2: #444; --cf-borda: #ccc; }
  .topo, .menu-celular, .botao-flutuante, .tema-solto, .nao-imprimir, #modal { display: none !important; }
  body { background: #fff; color: #000; }
  article { box-shadow: none; }
}

/* Pendências */
article.pendencia.critica { border-left: 4px solid var(--cf-critico); }
article.pendencia header { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.acoes-linha { display: flex; flex-wrap: wrap; gap: .3rem; }

/* Devolução em etapas */
.etapa { margin-top: 1rem; }
.etapa h3 { display: flex; align-items: center; gap: .5rem; }
.passo { display: inline-flex; align-items: center; justify-content: center; width: 1.8rem; height: 1.8rem; border-radius: 50%;
  background: var(--cf-primaria); color: #fff; font: 600 .95rem var(--cf-fonte-titulo); }
.etapa.concluida { border-left: 3px solid var(--cf-ok); padding-left: .8rem; }
.etapa.concluida .passo { background: var(--cf-ok); }
/* Combustível na reserva: botão em vermelho e aviso imediato */
label.opcao.op-reserva span { border-color: var(--cf-critico); color: var(--cf-critico); }
label.opcao.op-reserva input:checked + span { background: var(--cf-critico); border-color: var(--cf-critico); color: #fff; }
.aviso-reserva { display: none; margin-top: .5rem; }
fieldset.combustivel:has(input[value=reserva]:checked) .aviso-reserva { display: flex; }
mark.combustivel-reserva { background: var(--cf-critico); color: #fff; }
/* Alertas em uma única bandeira */
.bandeira { --c: var(--cf-aguardando); padding: .7rem .9rem; border-radius: var(--cf-raio); margin-bottom: .8rem; border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
  background: color-mix(in srgb, var(--c) 11%, transparent); color: color-mix(in srgb, var(--c) 65%, var(--cf-texto)); }
.bandeira ul { margin: .2rem 0 0; padding-left: 1.1rem; }
.bandeira li { margin: 0; list-style: disc; color: inherit; }
.bandeira strong { display: inline-flex; align-items: center; gap: .35rem; color: inherit; }
.bandeira strong svg.i { color: var(--c); }
.bandeira-problema { --c: var(--cf-critico); }
/* Botões finais da etapa 2: com algum problema marcado, "Confirmar" fica desabilitado */
.botoes-finais { display: grid; grid-template-columns: 1fr; gap: .5rem; margin-top: 1rem; }
@media (min-width: 640px) { .botoes-finais { grid-template-columns: 1fr 1fr; } }
.botoes-finais > * { width: 100%; margin: 0; text-align: center; }
.dica-problema { display: none; color: var(--cf-critico); font-weight: 600; }
form:has(#etapa2sec input[value=NC]:checked) .dica-problema { display: block; }
form:has(#etapa2sec input[value=NC]:checked) .botoes-finais .confirmar { opacity: .45; pointer-events: none; filter: grayscale(1); }
/* Etapa 3: itens com problema em vermelho */
fieldset.item.problema { border: 1px solid var(--cf-critico); background: color-mix(in srgb, var(--cf-critico) 6%, var(--cf-cartao)); }
.resposta-problema { display: inline-block; background: var(--cf-critico); color: #fff; border-radius: 99px; padding: 0 .5rem; font-size: .78rem; }
.texto-problema { color: var(--cf-critico); }

/* ===== Manutenção ===== */
.filtro-linha { display: flex; flex-wrap: wrap; gap: .5rem; }
.filtro-linha select { width: auto; flex: 1 1 14rem; }
.acao-os { border-top: 1px solid var(--cf-borda); padding-top: .8rem; margin-top: .8rem; }
.acao-os h4 { display: flex; align-items: center; gap: .4rem; }
.inline-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.inline-form input[type=file] { flex: 1 1 14rem; margin: 0; }
a.documento { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .7rem; border: 1px solid var(--cf-borda); border-radius: var(--cf-raio-p);
  background: var(--cf-cartao-2); text-decoration: none; }

/* Blocos clicáveis da agenda usam role=button (HTMX): anula o estilo de botão do Pico */
.evento[role=button], .item-lista[role=button] { width: auto; margin-top: 0; text-align: left; font-weight: 400; box-shadow: none;
  border-top: 0; border-right: 0; border-bottom: 0; outline-offset: 1px; }
.item-lista[role=button] { border: 1px solid var(--cf-borda); padding: .7rem .75rem; margin-bottom: .5rem; font-size: inherit; line-height: inherit; }
.evento.continua[role=button] { border-right: 2px dashed var(--c); }
.evento[role=button]:hover, .item-lista[role=button]:hover { color: var(--cf-texto); }
.item-lista[role=button]:hover { background: var(--cf-cartao-2); }

/* Dias passados sem reservas não ocupam espaço na lista do celular */
.dia-lista.passado-vazio { display: none; }
/* Tabelas que viram cartões no celular (sem rolagem lateral) */
.tabela-cartao { padding: 0; overflow: hidden; }
.tabela-cartao table { margin: 0; }
@media (max-width: 767px) {
  .tabela-cartao { background: none; border: 0; box-shadow: none; overflow: visible; }
  table.cartoes-celular thead { display: none; }
  table.cartoes-celular, table.cartoes-celular tbody, table.cartoes-celular tr, table.cartoes-celular td { display: block; width: 100%; }
  table.cartoes-celular tr { background: var(--cf-cartao); border: 1px solid var(--cf-borda); border-radius: var(--cf-raio); padding: .5rem .8rem; margin-bottom: .6rem; }
  table.cartoes-celular td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .3rem 0; text-align: right; }
  table.cartoes-celular td::before { content: attr(data-rotulo); color: var(--cf-texto-2); font-size: .8rem; text-align: left; }
  table.cartoes-celular td.acoes-linha { justify-content: flex-start; padding-top: .5rem; }
  table.cartoes-celular td.acoes-linha::before { content: none; }
  table.cartoes-celular td[data-rotulo="#"] { display: none; }
}

/* Login: ícone de carro e logo horizontal da Città abaixo do botão (como no Presentare) */
.login-marca img.logo-carro { width: 76px; height: 76px; padding: 0; object-fit: cover; background: #000; border-radius: 20px; }
article.login > footer.login-citta { background: none; border: 0; margin-top: 0; padding-top: .4rem; text-align: center; }
.login-citta img { width: 170px; height: auto; opacity: .95; }

/* ---------- Agenda: seletor de visão (Dia | Semana | Mês) ---------- */
.segmentado { display: inline-flex; background: var(--cf-cartao-2); border: 1px solid var(--cf-borda); border-radius: 10px; padding: 3px; }
.segmentado a { padding: .3rem .8rem; border-radius: 7px; color: var(--cf-texto-2); font-size: .85rem; font-weight: 500; text-decoration: none; }
.segmentado a:hover { color: var(--cf-texto); }
.segmentado a[aria-current=page] { background: var(--cf-primaria); color: #fff; }
table.agenda thead th.dia a { color: inherit; text-decoration: none; display: block; }
table.agenda thead th.dia a:hover b { color: var(--cf-primaria); }
table.agenda thead th.dia.hoje a:hover b { color: #fff; }

/* ---------- Visão diária: colunas por veículo ao longo das horas ---------- */
.grade-dia { --hora: 56px; overflow-x: auto; }
.gd-cab, .gd-corpo { display: grid; grid-template-columns: 64px repeat(var(--colunas), minmax(170px, 1fr)); min-width: calc(64px + var(--colunas) * 170px); }
.gd-cab { border-bottom: 1px solid var(--cf-borda); }
.gd-veiculo { position: relative; padding: .65rem .75rem .65rem 1rem; border-left: 1px solid var(--cf-borda); }
.gd-veiculo::before { content: ""; position: absolute; left: .45rem; top: .7rem; bottom: .7rem; width: 4px; border-radius: 4px; background: var(--setor, var(--cf-borda)); }
.gd-veiculo .nome-veiculo { display: block; font-weight: 600; color: var(--cf-texto); text-decoration: none; }
.gd-veiculo small { display: block; font-size: .75rem; color: var(--cf-texto-2); }
.gd-veiculo .selo { margin-top: .3rem; }
.gd-veiculo.alerta-vencendo { background: color-mix(in srgb, var(--cf-aguardando) 8%, transparent); }
.gd-veiculo.alerta-vencida { background: color-mix(in srgb, var(--cf-critico) 9%, transparent); }
.gd-corpo { position: relative; height: calc(var(--horas) * var(--hora)); }
.gd-horas span { display: block; height: var(--hora); padding: .15rem .5rem 0 0; text-align: right; font-size: .72rem; color: var(--cf-texto-2);
  border-top: 1px solid var(--cf-borda); }
.gd-coluna { position: relative; border-left: 1px solid var(--cf-borda);
  background: repeating-linear-gradient(to bottom, var(--cf-borda) 0 1px, transparent 1px var(--hora)); }
.gd-bloco { position: absolute; left: 5px; right: 5px; margin: 0; overflow: hidden; z-index: 1; }
.gd-bloco:hover { z-index: 2; }
.gd-agora { position: absolute; left: 64px; right: 0; height: 2px; background: var(--cf-critico); z-index: 3; pointer-events: none; }
.gd-agora::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--cf-critico); }
.vazio-grande { padding: 2rem; text-align: center; color: var(--cf-texto-2); }

/* ---------- Visão mensal ---------- */
.grade-mes { padding: .5rem; }
.gm-cab, .gm-semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.gm-cab span { text-align: center; font-size: .7rem; font-weight: 600; color: var(--cf-texto-2); padding: .35rem 0; }
.gm-semana { margin-bottom: 4px; }
.gm-dia { display: flex; flex-direction: column; gap: .2rem; min-height: 64px; padding: .35rem; border-radius: var(--cf-raio-p); border: 1px solid var(--cf-borda);
  background: var(--cf-cartao-2); color: var(--cf-texto); text-decoration: none; overflow: hidden; transition: border-color .15s; }
.gm-dia:hover { border-color: var(--cf-primaria); color: var(--cf-texto); }
.gm-dia.fora { opacity: .45; }
.gm-num { font: 600 .9rem var(--cf-fonte-titulo); width: 1.8rem; height: 1.8rem; line-height: 1.8rem; text-align: center; border-radius: 50%; }
.gm-dia.hoje { border-color: var(--cf-primaria); }
.gm-dia.hoje .gm-num { background: var(--cf-primaria); color: #fff; }
.gm-itens { display: none; }
.gm-item { --c: var(--cf-confirmada); display: block; font-size: .7rem; line-height: 1.3; padding: .1rem .35rem; border-radius: 5px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; border-left: 3px solid var(--c); background: color-mix(in srgb, var(--c) 16%, var(--cf-cartao)); }
.gm-item b { font-weight: 600; }
.gm-item.st-cancelada, .gm-item.st-rejeitada { text-decoration: line-through; opacity: .6; }
.gm-mais { font-size: .68rem; color: var(--cf-texto-2); padding-left: .35rem; }
.gm-pontos { display: flex; gap: 3px; justify-content: center; margin-top: auto; }
.gm-pontos i { --c: var(--cf-confirmada); width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
@media (min-width: 768px) {
  .grade-mes { padding: .75rem; }
  .gm-dia { min-height: 118px; padding: .4rem; }
  .gm-cab span { font-size: .75rem; }
  .gm-itens { display: flex; flex-direction: column; gap: 3px; }
  .gm-pontos { display: none; }
}
@media (max-width: 767px) {
  .agenda-barra .segmentado { order: 3; }
}
/* Login simplificado: CPF sem rótulo (só o exemplo no campo) e mais espaço antes da logo da Città */
article.login form { margin-top: 2.4rem; }
article.login > footer.login-citta { padding-top: 2.6rem; }

/* Permissões: negar acesso de conta pendente (confirmação em dois cliques, sem JavaScript) */
details.negar { display: inline-block; margin: .3rem 0 0; }
details.negar > summary { list-style: none; cursor: pointer; display: inline-block; padding: .3rem .7rem; border-radius: var(--cf-raio-p); font-size: .85rem;
  font-weight: 600; color: var(--cf-critico); border: 1px solid color-mix(in srgb, var(--cf-critico) 50%, transparent); }
details.negar > summary::-webkit-details-marker { display: none; }
details.negar > summary::after { display: none; }
details.negar[open] > summary { background: color-mix(in srgb, var(--cf-critico) 12%, transparent); }
details.negar form { display: block; margin-top: .4rem; }
button.botao-perigo { background: var(--cf-critico); border-color: var(--cf-critico); color: #fff; box-shadow: 0 8px 20px -10px var(--cf-critico); }

/* Permissões: uma linha por pessoa (mesmo layout da aprovação) */
article.pessoas table td { vertical-align: middle; }
article.pessoas .inline-form select { width: auto; margin: 0; }
article.pessoas .inline-form .marcar, article.pessoas .inline-form button { margin: 0; }
.contador-neutro { background: var(--cf-suave); color: var(--cf-texto-2); }
.vinculos { display: flex; flex-wrap: wrap; gap: .35rem; }
form.vinculo { display: inline-flex; align-items: center; gap: .3rem; margin: 0; padding: .15rem .25rem .15rem .6rem; border-radius: 99px; font-size: .78rem;
  border: 1px solid var(--cf-borda); background: var(--cf-cartao-2); white-space: nowrap; }
form.vinculo-admin { border-color: color-mix(in srgb, var(--cf-primaria) 50%, transparent); background: var(--cf-primaria-suave); }
form.vinculo-admin svg.i { color: var(--cf-primaria); }
button.vinculo-remover { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; margin: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--cf-texto-2); box-shadow: none; }
button.vinculo-remover:hover { background: color-mix(in srgb, var(--cf-critico) 18%, transparent); color: var(--cf-critico); }
button.vinculo-remover svg.i { width: 13px; height: 13px; }

/* Login: descrição dentro dos campos e botão de mostrar a senha dentro do campo (como no Presentare) */
.campo-senha { position: relative; margin-bottom: var(--pico-spacing); }
.campo-senha input { margin-bottom: 0; padding-right: 3rem; }
.login form button.mostrar-senha, button.mostrar-senha { position: absolute; right: .4rem; left: auto; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; margin: 0; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: var(--cf-raio-p); background: transparent; color: var(--cf-texto-2); box-shadow: none; }
button.mostrar-senha[hidden] { display: none; }
button.mostrar-senha:hover { color: var(--cf-texto); background: var(--cf-suave); }
button.mostrar-senha svg.i { width: 18px; height: 18px; }
button.mostrar-senha[aria-pressed="false"] svg.i:last-child, button.mostrar-senha[aria-pressed="true"] svg.i:first-child { display: none; }