/* Trilha das versões: a mesma no site (janela do comparativo) e no app (O projeto). Linha fina com pontos pequenos;
   no celular desce, no computador faz zigue-zague em linhas de 4. A linha é um SVG desenhado por assets/js/versions.js. */
.tl { position: relative; padding: 6px 0 2px; }
.tl ol { position: relative; z-index: 1; display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.tl-line { position: absolute; inset: 0; z-index: 0; overflow: visible; pointer-events: none; }
.tl-line path { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tl-line .is-done { stroke: color-mix(in srgb, var(--c-accent) 30%, var(--n-200)); }
.tl-line .is-next { stroke: var(--n-300); stroke-dasharray: 1 6; }
.tl-step { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; }
.tl-dot { justify-self: center; margin-top: 16px; width: 10px; height: 10px; border-radius: 50%; background: var(--c-accent); box-shadow: 0 0 0 4px var(--n-50); }
.tl-dot svg { display: none; }
.tl-step.is-next .tl-dot { background: var(--n-50); box-shadow: inset 0 0 0 2px var(--n-300), 0 0 0 4px var(--n-50); }
.tl-step.is-now .tl-dot { width: 14px; height: 14px; margin-top: 14px; background: var(--c-accent); box-shadow: 0 0 0 4px var(--n-50), 0 0 0 8px color-mix(in srgb, var(--c-accent) 22%, transparent); }
.tl-step > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 12px 14px; border-radius: 14px; background: var(--n-0); border: 1px solid var(--n-150); box-shadow: 0 8px 20px -16px color-mix(in srgb, var(--c-deep-900) 45%, transparent); }
.tl-step b { padding: 2px 7px; border-radius: 6px; font-size: 12px; font-weight: 800; background: color-mix(in srgb, var(--c-accent) 12%, transparent); color: var(--c-accent); }
.tl-step small { font-size: 12px; color: var(--n-500); font-weight: 600; }
.tl-step p { flex-basis: 100%; margin: 2px 0 0; font-size: 14px; font-weight: 600; color: var(--n-800); line-height: 1.35; }
.tl-step em { flex-basis: auto; margin-top: 4px; font-style: normal; font-size: 11.5px; font-weight: 800; color: var(--c-accent); letter-spacing: .02em; }
.tl-step.is-now > div { border-color: color-mix(in srgb, var(--c-accent) 45%, var(--n-150)); background: color-mix(in srgb, var(--c-accent) 6%, var(--n-0)); box-shadow: 0 12px 26px -16px color-mix(in srgb, var(--c-accent) 55%, transparent); }
.tl-step.is-next b { background: none; padding: 0; color: var(--n-500); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.tl-step.is-next p { color: var(--n-600); font-weight: 500; }
.tl-step.is-next > div { background: var(--n-50); border-style: dashed; box-shadow: none; }
@media (min-width: 760px) {
  .tl ol { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 34px; column-gap: 18px; }
  .tl-step { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 12px; }
  .tl-step > div { justify-content: center; width: 100%; }
  .tl-dot { margin-top: 0; } .tl-step.is-now .tl-dot { margin-top: 0; }
  .tl-r1 { grid-row: 1; } .tl-r2 { grid-row: 2; } .tl-r3 { grid-row: 3; } .tl-r4 { grid-row: 4; } .tl-r5 { grid-row: 5; } .tl-r6 { grid-row: 6; } .tl-r7 { grid-row: 7; } .tl-r8 { grid-row: 8; }
  .tl-c1 { grid-column: 1; } .tl-c2 { grid-column: 2; } .tl-c3 { grid-column: 3; } .tl-c4 { grid-column: 4; }
}

/* Melhorias e correções (docs/AJUSTES.md), no app (O projeto), no modal e na página principal do site. Retorno de Darlan
 * (25/10/2026): cada lista com cabeçalho fixo e contagem, rolagem só nos itens, a data como divisória e um ícone por item. */
.adj { display: grid; gap: 14px; }
@media (min-width: 900px) { .adj { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.adj-group { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: 18px; background: var(--n-0); box-shadow: inset 0 0 0 1px var(--n-150); }
.adj-head { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--n-150); background: var(--n-50); }
.adj-group.is-improve .adj-head { background: color-mix(in srgb, var(--c-accent) 8%, var(--n-0)); border-bottom-color: color-mix(in srgb, var(--c-accent) 18%, var(--n-150)); }
.adj-group.is-fix .adj-head { background: color-mix(in srgb, var(--c-success, var(--n-500)) 8%, var(--n-0)); border-bottom-color: color-mix(in srgb, var(--c-success, var(--n-500)) 18%, var(--n-150)); }
.adj-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; }
.is-improve .adj-icon { background: color-mix(in srgb, var(--c-accent) 16%, transparent); color: var(--c-accent); }
.is-fix .adj-icon { background: color-mix(in srgb, var(--c-success, var(--n-500)) 16%, transparent); color: var(--c-success, var(--n-600)); }
.adj-icon svg { width: 20px; height: 20px; }
.adj-head strong { display: flex; align-items: center; gap: 8px; font-size: 15.5px; color: var(--n-900); }
.adj-count { padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 800; background: var(--n-0); color: var(--n-600); box-shadow: inset 0 0 0 1px var(--n-200); }
.adj-head p { margin: 2px 0 0; font-size: 13px; color: var(--n-500); }
.adj-list { max-height: 240px; margin: 0; padding: 4px 14px 14px; overflow-y: auto; list-style: none; overscroll-behavior: contain; }
.adj-day { position: sticky; top: 0; z-index: 1; padding: 10px 0 6px; background: var(--n-0); }
.adj-day time { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; background: var(--n-100); color: var(--n-600); }
.adj-item { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; padding: 9px 0; border-top: 1px solid var(--n-150); font-size: 14px; line-height: 1.45; color: var(--n-800); }
.adj-day + .adj-item { border-top: 0; }
.adj-bullet { display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; }
.adj-bullet svg { width: 12px; height: 12px; stroke-width: 3; }
.is-improve .adj-bullet { background: color-mix(in srgb, var(--c-accent) 14%, transparent); color: var(--c-accent); }
.is-fix .adj-bullet { background: color-mix(in srgb, var(--c-success, var(--n-500)) 14%, transparent); color: var(--c-success, var(--n-600)); }
.adj-list:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }

/* Trilha compacta (página principal do site): faixa de lado, com a linha passando pelos pontos. */
.tlc-track { display: flex; gap: 12px; margin: 0; padding: 4px 2px 14px; overflow-x: auto; list-style: none; scroll-snap-type: x proximity; scrollbar-width: thin; }
.tlc-step { position: relative; flex: 0 0 156px; display: flex; flex-direction: column; gap: 2px; padding: 26px 14px 14px; border-radius: 14px; background: var(--n-0); border: 1px solid var(--n-150); scroll-snap-align: start; }
.tlc-step::before { content: ''; position: absolute; top: 14px; left: -13px; right: -1px; height: 2px; background: color-mix(in srgb, var(--c-accent) 30%, var(--n-200)); }
.tlc-step:first-child::before { left: 14px; }
.tlc-step.is-next::before { background: none; border-top: 2px dotted var(--n-300); height: 0; }
.tlc-dot { position: absolute; top: 10px; left: 14px; width: 10px; height: 10px; border-radius: 50%; background: var(--c-accent); box-shadow: 0 0 0 3px var(--n-0); }
.tlc-step b { font-size: 13px; font-weight: 800; color: var(--c-accent); }
.tlc-step small { font-size: 12px; color: var(--n-500); font-weight: 600; }
.tlc-step p { margin: 4px 0 0; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--n-800); }
.tlc-step em { margin-top: 6px; font-style: normal; font-size: 11.5px; font-weight: 800; color: var(--c-accent); }
.tlc-step.is-now { border-color: color-mix(in srgb, var(--c-accent) 45%, var(--n-150)); background: color-mix(in srgb, var(--c-accent) 6%, var(--n-0)); }
.tlc-step.is-now .tlc-dot { width: 14px; height: 14px; top: 8px; box-shadow: 0 0 0 3px var(--n-0), 0 0 0 7px color-mix(in srgb, var(--c-accent) 22%, transparent); }
.tlc-step.is-next { background: var(--n-50); border-style: dashed; }
.tlc-step.is-next .tlc-dot { background: var(--n-50); box-shadow: inset 0 0 0 2px var(--n-300), 0 0 0 3px var(--n-50); }
.tlc-step.is-next b { color: var(--n-500); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.tlc-step.is-next p { color: var(--n-600); font-weight: 500; }
.tlc-track:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 4px; border-radius: 14px; }
/* Caminhos possíveis (retorno de Darlan, 23/10/2026): depois de "Você está aqui", os próximos lado a lado, sem ordem. */
.tl-paths { margin-top: 18px; padding: 16px; border-radius: 18px; border: 1px dashed var(--n-300); background: color-mix(in srgb, var(--n-50) 70%, transparent); } /* antes c-on-color: ficava branco no escuro */
.tl-paths-title { margin: 0 0 12px; font-size: 13px; font-weight: 800; color: var(--n-600); }
.tl-paths ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.tl-paths li { padding: 12px 14px; border-radius: 14px; background: var(--n-0); border: 1px solid var(--n-150); }
.tl-paths li b { display: block; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--c-accent); }
.tl-paths li p { margin: 4px 0 0; font-size: 14px; color: var(--n-800); }
@media (min-width: 900px) { .adj-list { max-height: 320px; } .tlc-step { flex-basis: 180px; } }
/* Balão da versão (assets/js/versions.js): os pontos principais da Entrega, por cima da página. */
.tlc-step.has-detail { cursor: help; }
.tlc-step.has-detail:focus-visible { outline: 3px solid var(--c-ring, rgba(37, 99, 235, .3)); outline-offset: 2px; }
.tlc-pop { position: fixed; z-index: 120; padding: 14px 16px; border-radius: 18px; background: linear-gradient(40deg, #0b1220, #1f2a44 62%, #1d3f99); color: #fff; box-shadow: 0 24px 50px -18px rgba(11, 18, 32, .7); opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .18s, transform .2s; }
.tlc-pop.is-on { opacity: 1; transform: none; }
.tlc-pop b { display: block; margin-bottom: 6px; font-size: 14px; }
.tlc-pop ul { margin: 0; padding-left: 16px; display: grid; gap: 6px; }
.tlc-pop li { font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, .88); }
.tl-step.has-detail { cursor: help; } .tl-step.has-detail:focus-visible > div { outline: 3px solid color-mix(in srgb, var(--c-accent) 30%, transparent); outline-offset: 2px; }
.tl-step > .tlc-detail { display: none; }
.tlc-pop { z-index: 2147480000; } /* acima da janela do comparativo do site */