/* Bento grid e linguagem de aeroporto (placa, painel, etiqueta, crachá, carimbo, pasta, quiosque).
   Camada de visual: vale para a tela inicial, os cartões de todas as abas e a barra inferior.
   Não mexe na logo, nas fontes nem nas paletas (tokens.css). */
:root { --on: #000; --tabbar-h: 88px; }
[data-theme="dark"] { --on: #fff; }
svg.i.f { fill: currentColor; stroke: none; }

/* ===== Tela inicial: grade bento ===== */
.bento { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(104px, auto); gap: 10px; }
.tile {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-width: 0;
  padding: 14px; border-radius: 26px; background: var(--surface); border: 1px solid var(--line);
  color: inherit; text-decoration: none; text-align: left; overflow: hidden;
}
a.tile:active { transform: scale(.98); }
.tile h3 { font-weight: 800; font-size: 1.05rem; line-height: 1.1; }
.tile small { display: block; margin-top: 3px; color: var(--text-muted); font-size: .8rem; line-height: 1.3; }
.tile.w2 { grid-column: span 2; } .tile.r2 { grid-row: span 2; }
.tile .ic { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--c, var(--primary)) 15%, var(--surface)); color: color-mix(in srgb, var(--c, var(--primary)) 75%, var(--on)); }
.t1 { --c: var(--tom-1-fg, var(--primary)); } .t2 { --c: var(--tom-2-fg, var(--primary)); }
.t3 { --c: var(--tom-3-fg, var(--primary)); } .t4 { --c: var(--tom-4-fg, var(--primary)); }

/* Placa de orientação (amarelo de sinalização). Seta no canto de cima, texto embaixo: nunca se sobrepõem. */
.tile.sign { display: flex; background: #FFC400; color: #141A30; border: 0; box-shadow: inset 0 0 0 3px #141A30; font-family: var(--font-ui); letter-spacing: 0; text-transform: none; font-size: inherit; padding: 16px; }
.tile.sign .ic { background: #141A30; color: #FFC400; border-radius: 10px; }
.tile.sign h3 { font-size: 1.3rem; }
.tile.sign small { color: #3d3000; }
.tile.sign .seta { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; fill: none; stroke: #141A30; stroke-width: 3.2; stroke-linecap: square; stroke-linejoin: miter; }

/* Painel de partidas */
.tile.brd { background: #0C1C33; color: #fff; border: 0; gap: 6px; justify-content: center; padding: 12px 14px; }
.tile.brd b { font-weight: 800; font-size: .95rem; line-height: 1.1; }
.tile.brd small { color: #9fb4d3; margin: 0; }
.tile.brd .fl { display: inline-flex; gap: 2px; font-family: var(--font-mono); font-weight: 700; font-size: .68rem; }
.tile.brd .fl i { font-style: normal; background: #16294A; border-radius: 4px; width: 1.25em; text-align: center; padding: 4px 0; position: relative; box-shadow: inset 0 -1px 0 rgb(0 0 0 / .5); }
.tile.brd .fl i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid rgb(0 0 0 / .55); }
.tile.brd.late .fl { color: #F5A524; } .tile.brd.cut .fl { color: #FF7B7B; }

/* Etiqueta de mala */
.tile.etq { border: 0; background: color-mix(in srgb, var(--tom-1-fg, var(--primary)) 16%, var(--surface)); clip-path: polygon(16% 0, 84% 0, 100% 16%, 100% 100%, 0 100%, 0 16%); padding-top: 34px; }
.tile.etq .hole { position: absolute; top: 9px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tom-1-fg, var(--primary)) 55%, transparent); }
.tile.etq .bars { height: 14px; border-radius: 2px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--tom-1-fg, var(--primary)) 80%, var(--on)) 0 2px, transparent 2px 4px, color-mix(in srgb, var(--tom-1-fg, var(--primary)) 80%, var(--on)) 4px 5px, transparent 5px 8px); }

/* Crachá */
.tile.badge { padding-top: 28px; }
.tile.badge .slot { position: absolute; top: 9px; left: 50%; width: 34px; height: 7px; margin-left: -17px; border-radius: 9px; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--line); }
.tile.badge .idrow { display: flex; gap: 10px; align-items: center; }
.tile.badge .photo { width: 38px; height: 46px; border-radius: 9px; flex: none;
  background: radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--tom-2-fg, var(--primary)) 70%, var(--surface)) 0 22%, transparent 23%), radial-gradient(ellipse at 50% 112%, color-mix(in srgb, var(--tom-2-fg, var(--primary)) 70%, var(--surface)) 0 48%, transparent 49%), color-mix(in srgb, var(--tom-2-fg, var(--primary)) 16%, var(--surface)); }
.tile.badge .lines { flex: 1; display: grid; gap: 6px; } .tile.badge .lines i { height: 5px; border-radius: 3px; background: var(--line); }
.tile.badge .lines i:first-child { width: 80%; background: color-mix(in srgb, var(--tom-2-fg, var(--primary)) 45%, var(--surface)); } .tile.badge .lines i:last-child { width: 55%; }

/* Carimbo (reclamar) */
.tile.cta { flex-direction: row; align-items: center; gap: 14px; min-height: 104px; background: var(--primary-fill); background-origin: border-box; color: var(--on-primary-fill); border-color: transparent; }
.tile.cta small { color: rgb(255 255 255 / .92); } .tile.cta h3 { font-size: 1.2rem; color: #fff; }
.tile.cta .txt { flex: 1; position: relative; z-index: 1; }
.tile.cta .stamp { flex: none; width: 78px; height: 78px; border-radius: 50%; border: 3px double rgb(255 255 255 / .85); display: grid; place-items: center; align-content: center; transform: rotate(-12deg); color: #fff; position: relative; z-index: 1; }
.tile.cta .stamp svg { width: 26px; height: 26px; stroke-width: 3; } .tile.cta .stamp b { font-size: .54rem; letter-spacing: .03em; text-transform: uppercase; }
.tile.cta::after { content: ""; position: absolute; right: -30px; top: -40px; width: 150px; height: 150px; border-radius: 50%; background: rgb(255 255 255 / .12); }

/* Checklist */
.tile.todo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.tile.todo li { display: flex; align-items: center; gap: 8px; }
.tile.todo li::before { content: ""; width: 14px; height: 14px; border-radius: 5px; border: 2px solid var(--line); flex: none; }
.tile.todo li::after { content: ""; height: 5px; border-radius: 3px; background: var(--line); width: 60%; order: 2; }
.tile.todo li:nth-child(2)::after { width: 78%; } .tile.todo li:nth-child(3)::after { width: 45%; }
.tile.todo li:first-child::before { border-color: var(--primary); background: var(--primary); }

/* Pasta de contrato */
.tile.folder { margin-top: 12px; border-radius: 0 26px 26px 26px; overflow: visible; padding-top: 24px; }
.tile.folder .ftab { position: absolute; left: -1px; top: -24px; height: 25px; padding: 0 14px; border-radius: 12px 12px 0 0; background: var(--primary-fill); background-origin: border-box; color: var(--on-primary-fill); font-weight: 800; font-size: .8rem; display: flex; align-items: center; }

/* Quiosque de busca */
.tile.kiosk { flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; min-height: 64px; padding: 8px 10px 8px 8px; border-radius: 999px; }
.tile.kiosk .lens { width: 46px; height: 46px; border-radius: 50%; background: var(--primary-fill); background-origin: border-box; color: #fff; display: grid; place-items: center; flex: none; }
.tile.kiosk .ph { font-weight: 700; color: var(--text-muted); display: flex; align-items: center; gap: 3px; flex: none; }
.tile.kiosk .caret { width: 2px; height: 1.1em; background: var(--primary); animation: ec-blink 1.1s steps(1) infinite; }
@keyframes ec-blink { 50% { opacity: 0; } }
.tile.kiosk .sg { display: flex; gap: 6px; margin-left: auto; overflow: hidden; }
.tile.kiosk .sg i { font-style: normal; font-size: .74rem; font-weight: 700; padding: 5px 10px; border-radius: 99px; background: color-mix(in srgb, var(--primary) 10%, var(--surface)); color: var(--primary); white-space: nowrap; }
@media (max-width: 380px) { .tile.kiosk .sg i:nth-child(3) { display: none; } }
@media (prefers-reduced-motion: reduce) { .tile.kiosk .caret { animation: none; } }

/* ===== Todas as abas: cartões com ritmo de bento e recortes de bilhete ===== */
.grid { gap: 10px; }
.card { border-radius: 24px; }
.card .ico { border-radius: 14px; }
/* A cada cinco temas, um cartão largo (ícone ao lado do texto) com os recortes de bilhete. */
.grid > :nth-child(5n+1):not(.cap):not(.destaque) { grid-column: 1 / -1; }
.grid > :nth-child(5n+1):not(.cap):not(.destaque) .card, .grid > .card:nth-child(5n+1):not(.destaque) { min-height: 96px; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; }
.grid > :nth-child(5n+1):not(.cap):not(.destaque) .card .ico, .grid > .card:nth-child(5n+1):not(.destaque) .ico { grid-row: 1 / 4; }
.grid > :nth-child(5n+1):not(.cap):not(.destaque) .card::before, .grid > :nth-child(5n+1):not(.cap):not(.destaque) .card::after,
.grid > .card:nth-child(5n+1):not(.destaque)::before, .grid > .card:nth-child(5n+1):not(.destaque)::after { content: ""; position: absolute; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line); }
.grid > :nth-child(5n+1):not(.cap):not(.destaque) .card::before, .grid > .card:nth-child(5n+1):not(.destaque)::before { left: -10px; }
.grid > :nth-child(5n+1):not(.cap):not(.destaque) .card::after, .grid > .card:nth-child(5n+1):not(.destaque)::after { right: -10px; }
/* Cabeçalho (painel) das abas: recortes de bilhete nas laterais */
.board::before, .board::after { content: ""; position: absolute; top: 62%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: var(--bg); z-index: 1; }
.board::before { left: -11px; } .board::after { right: -11px; }
.board.board-compacto::before, .board.board-compacto::after { top: 58%; }

/* ===== Barra inferior: blocos separados ===== */
.tabbar, .tabbar::before { background: none !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.tabbar::before { display: none; }
.tabbar { width: min(calc(100% - 20px), 480px); padding: 0; border-radius: 0; }
.tabbar-in { display: flex; gap: 7px; }
.tabbar-pill, .lente { display: none !important; }
.tabbar a {
  flex: 1 1 0; min-width: 0; min-height: 64px; padding: 0 2px; gap: 3px; border-radius: 22px; font-weight: 800; font-size: .66rem;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 86%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
  box-shadow: 0 8px 20px rgb(11 31 58 / .14); transition: flex-grow .38s var(--ease), background .3s, color .3s;
}
.tabbar a svg { width: 32px; height: 32px; padding: 6px; border-radius: 11px; color: color-mix(in srgb, var(--c) 75%, var(--on)); background: color-mix(in srgb, var(--c) 15%, var(--surface)); }
.tabbar a[data-tab="prevoo"] { --c: var(--tom-3-fg, var(--primary)); } .tabbar a[data-tab="durante"] { --c: var(--tom-4-fg, var(--primary)); }
.tabbar a[data-tab="posvoo"] { --c: var(--tom-1-fg, var(--primary)); } .tabbar a[data-tab="normas"] { --c: var(--tom-2-fg, var(--primary)); }
.tabbar a[data-tab="listas"] { --c: var(--tom-3-fg, var(--primary)); }
.tabbar a[aria-current="page"] { flex-grow: 1.55; background: var(--primary-fill); background-origin: border-box; border-color: transparent; color: var(--on-primary-fill); }
.tabbar a[aria-current="page"] svg, [data-cia="todas"] .tabbar a[aria-current="page"] svg { background: rgb(255 255 255 / .24); color: #fff; }