/* FASE 2 (19/10/2026) — carrega só com saber_f2_on() (inc/busca-unica.php; prévia ?sb_f2=1).
   1. Sugestões da busca única (painel que abre sob qualquer caixa de busca do site).
   2. Página de resultados agrupada (search.php → saber_bu_pagina; fundo escuro de body.sb-lista).
   3. Página Notebook em 5 abas (tpl-aparelho-abas.php) e a lista de fichas em linhas.
   Cores FIXAS em tudo que é novo (não herdam o .sb-tom nem a página clara/escura em volta): texto claro sobre fundo escuro e
   texto escuro sobre o amarelo. Lição de 19/10: o tom escuro sobrescreve cor de parágrafo — por isso os seletores levam body. */

/* ===== 1. Sugestões ===== */
.sb-bu-drop {
	position: fixed; z-index: 70; display: none; box-sizing: border-box;
	max-height: 70vh; overflow-y: auto; overscroll-behavior: contain;
	background: #17181c; color: #e9edf2; border: 1px solid rgba(255, 214, 10, .55); border-radius: 12px;
	box-shadow: 0 18px 44px rgba(0, 0, 0, .55); padding: 6px 0 4px; font: 400 14px/1.35 var(--sans, system-ui, sans-serif); text-align: left;
}
.sb-bu-drop.is-on { display: block; }
body .sb-bu-drop .sb-bu-drop__g { margin: 0; padding: 8px 14px 2px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #ffd60a; display: flex; justify-content: space-between; gap: 8px; }
body .sb-bu-drop .sb-bu-drop__g span { color: #9fb0c0; letter-spacing: .04em; }
body .sb-bu-drop a { display: block; padding: 7px 14px; color: #f2f4f7; text-decoration: none; border-left: 3px solid transparent; }
body .sb-bu-drop a b { display: block; font-weight: 700; color: #fff; font-size: 14px; line-height: 1.3; }
body .sb-bu-drop a b i { font-style: normal; color: #ffd60a; font-weight: 800; margin-right: 6px; }
body .sb-bu-drop a small { display: block; color: #b9c6d4; font-size: 12.5px; margin-top: 1px; overflow-wrap: anywhere; }
body .sb-bu-drop a:hover, body .sb-bu-drop a.is-sel { background: rgba(255, 214, 10, .12); border-left-color: #ffd60a; text-decoration: none; }
body .sb-bu-drop a.sb-bu-drop__mais { padding: 4px 14px 8px; font-size: 13px; font-weight: 700; color: #ffd60a; }
body .sb-bu-drop a.sb-bu-drop__tudo { margin: 6px 8px 4px; padding: 10px 12px; border-radius: 9px; border: 0; background: #ffd60a; color: #171200; font-weight: 800; text-align: center; }
body .sb-bu-drop a.sb-bu-drop__tudo:hover, body .sb-bu-drop a.sb-bu-drop__tudo.is-sel { background: #ffdf3d; color: #171200; }
body .sb-bu-drop p { margin: 0; padding: 10px 14px; color: #c9d3de; }
.sb-bu-drop hr { border: 0; border-top: 1px solid rgba(255, 255, 255, .08); margin: 4px 0; }

/* ===== 2. Página de resultados ===== */
.sb-bu-band .sb-bu-resumo { margin: 6px 0 0; }
body .sb-bu-band p.sb-bu-resumo, body .sb-bu-band p.sb-bu-resumo a { color: #dfe6ee; }
body .sb-bu-band p.sb-bu-resumo a { font-weight: 700; text-decoration: underline; text-decoration-color: rgba(255, 214, 10, .6); text-underline-offset: 3px; }
.sb-bu-form { display: flex; gap: 8px; max-width: 680px; margin: 18px 0 0; }
body .sb-bu-form input[type=search] {
	flex: 1; min-width: 0; padding: 13px 16px; font-size: 16px; color: #fff; background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .22); border-radius: 11px; outline: none;
}
body .sb-bu-form input[type=search]::placeholder { color: #a9b5c2; }
body .sb-bu-form input[type=search]:focus { border-color: #ffd60a; box-shadow: 0 0 0 3px rgba(255, 214, 10, .2); }
.sb-bu-form .btn { flex: none; }
.sb-bu-grupo { margin: 0 0 34px; scroll-margin-top: calc(var(--sb-hdr, 90px) + 14px); }
body .sb-bu-grupo > h2 { color: #fff; font-size: 1.3rem; margin: 0 0 12px; display: flex; align-items: center; gap: 10px; }
body .sb-bu-grupo > h2 span { font-size: 13px; font-weight: 800; color: #171200; background: #ffd60a; border-radius: 99px; padding: 2px 10px; }
.sb-bu-lista { list-style: none; margin: 0; padding: 0; border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, .03); }
.sb-bu-linha { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 11px 14px; margin: 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.sb-bu-linha:first-child { border-top: 0; }
body .sb-bu-linha .sb-bu-k { font-size: 13px; font-weight: 800; color: #ffd60a; letter-spacing: .02em; overflow-wrap: anywhere; }
body .sb-bu-linha .sb-bu-k--placa { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
body .sb-bu-linha a.sb-bu-t { color: #fff; font-weight: 700; font-size: 15px; line-height: 1.35; text-decoration: none; overflow-wrap: anywhere; }
body .sb-bu-linha a.sb-bu-t:hover { color: #ffd60a; }
body .sb-bu-linha a.sb-bu-t small { display: block; font-weight: 500; font-size: 13px; color: #b9c6d4; margin-top: 2px; }
body .sb-bu-linha .sb-bu-pdf, body .sb-bu-linha a.sb-bu-pdf {
	display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 13px; font-weight: 800; padding: 7px 12px;
	border-radius: 99px; color: #ffd60a; background: rgba(255, 214, 10, .08); border: 1px solid rgba(255, 214, 10, .55); text-decoration: none;
}
body .sb-bu-linha a.sb-bu-pdf:hover { background: #ffd60a; color: #171200; }
.sb-bu-linha .sb-porta { grid-column: 1 / -1; }
body .sb-bu-mais { margin: 10px 0 0; }
body .sb-bu-mais a { color: #ffd60a; font-weight: 700; }
body .sb-bu-vazio p { color: #c9d3de; }
body .sb-bu-vazio a { color: #ffd60a; }
@media (max-width: 640px) {
	.sb-bu-form { flex-direction: column; }
	.sb-bu-linha { grid-template-columns: minmax(0, 1fr) auto; }
	.sb-bu-linha .sb-bu-k { grid-column: 1 / -1; }
}

/* ===== 3. Página Notebook em abas ===== */
/* Só com JS (fase2.js põe .is-js): uma aba à vista. Sem JS, tudo empilhado. */
.sb-f2-abas.is-js > .sb-f2-aba:not(.is-on) { display: none; }
.sb-f2-aba { margin: 0 0 30px; scroll-margin-top: calc(var(--sb-hdr, 90px) + var(--sb-apnav, 58px) + 10px); }
.sb-f2-abas.is-js > .sb-f2-aba { margin-bottom: 0; }
.sb-f2-corpo { padding-top: 22px; }
.sb-f2-ap .mb-hero { padding-bottom: 26px; }
.sb-f2-ap .mb-hero h1 { margin-bottom: 6px; }
body .sb-f2-ap .mb-hero p.sub { margin: 0; }
body .sb-f2-ap h2.sb-f2-h2 { color: #fff; font-size: 1.35rem; margin: 0 0 8px; }
body .sb-f2-ap h3.sb-f2-sub, body .sb-f2-ap .sb-f2-cartao h3 { color: #fff; font-size: 1.1rem; margin: 18px 0 10px; }
body .sb-f2-ap .sb-f2-cartao h3 { margin-top: 0; }
.sb-f2-ap .sb-ap-acervo, .sb-f2-ap .mb-bloco { margin-bottom: 14px; }
.sb-f2-ap .sb-f2-acervo, .sb-f2-ap .sb-f2-aba > .mb-bloco--acervo { overflow: visible; } /* a capa que abre ao passar o mouse não pode ser cortada */

/* Blocos dobráveis (guias, programas de boardview, vídeos, tutoriais) */
.sb-f2-dobra { margin: 0 0 14px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; background: rgba(255, 255, 255, .035); }
.sb-f2-dobra > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; padding: 15px 18px; border-radius: 14px; }
.sb-f2-dobra > summary::-webkit-details-marker { display: none; }
.sb-f2-dobra > summary::after { content: "+"; grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 30px; height: 30px; border-radius: 99px; display: grid; place-items: center; font: 800 18px/1 var(--sans, system-ui); color: #171200; background: #ffd60a; }
.sb-f2-dobra[open] > summary::after { content: "–"; }
body .sb-f2-dobra > summary b { color: #fff; font-size: 16px; grid-column: 1; }
body .sb-f2-dobra > summary span { color: #b9c6d4; font-size: 14px; grid-column: 1; }
.sb-f2-dobra > summary:hover { background: rgba(255, 214, 10, .07); }
.sb-f2-dobra > summary:focus-visible { outline: 2px solid #ffd60a; outline-offset: 2px; }
.sb-f2-dobra > .mb-bloco, .sb-f2-dobra > .sb-ap-acervo, .sb-f2-dobra > div { margin: 0 12px 12px; }
body .sb-f2-dobra .sb-ap-videos h3 { color: #fff; font-size: 1.05rem; margin: 4px 0 10px; }
.sb-f2-mais-marcas { margin: -6px 0 14px; }
body .sb-f2-mais-marcas > summary { cursor: pointer; color: #ffd60a; font-weight: 700; font-size: 14px; margin-bottom: 8px; }

/* Fórum */
.sb-f2-forum__portas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 6px 0 4px; }
body .sb-f2-ap a.sb-f2-forum__porta { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); color: #e6ebf1; text-decoration: none; }
body .sb-f2-ap a.sb-f2-forum__porta:hover { border-color: #ffd60a; }
body .sb-f2-ap .sb-f2-forum__porta b { color: #fff; font-size: 15.5px; }
body .sb-f2-ap .sb-f2-forum__porta span { color: #c3cdd8; font-size: 13.5px; line-height: 1.45; }
body .sb-f2-ap .sb-f2-forum__porta i { font-style: normal; font-weight: 800; color: #ffd60a; font-size: 14px; margin-top: auto; }
.sb-f2-forum .sb-bu-lista { margin-bottom: 14px; }
@media (max-width: 760px) { .sb-f2-forum__portas { grid-template-columns: 1fr; } }

/* ===== Lista de fichas em LINHAS (aba Fichas) ===== */
body .mb-bloco--acervo #mb-lista-fichas.mb-lista--linhas { display: block; padding: 0; border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; background: rgba(0, 0, 0, .18); }
body .mb-bloco--acervo #mb-lista-fichas.mb-lista--linhas .mb-pdf {
	position: relative; display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; align-items: center; gap: 2px 12px;
	min-height: 0; margin: 0; padding: 10px 14px; border: 0; border-top: 1px solid rgba(255, 255, 255, .08); border-radius: 0;
	background: transparent; box-shadow: none; transform: none; transition: background .12s ease;
}
body .mb-bloco--acervo #mb-lista-fichas.mb-lista--linhas .mb-pdf:first-child { border-top: 0; }
body .mb-bloco--acervo #mb-lista-fichas.mb-lista--linhas .mb-pdf::before { display: none; }
body .mb-bloco--acervo #mb-lista-fichas.mb-lista--linhas .mb-pdf:hover,
body .mb-bloco--acervo #mb-lista-fichas.mb-lista--linhas .mb-pdf:focus-visible { background: rgba(255, 214, 10, .08); transform: none; box-shadow: none; text-decoration: none; }
body .mb-bloco--acervo .mb-lista--linhas .mb-pdf__n { align-self: center; background: none; box-shadow: none; padding: 0; color: #ffd60a; font-size: 13px; letter-spacing: .02em; text-transform: none; }
.mb-lista--linhas .mb-pdf__corpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body .mb-bloco--acervo .mb-lista--linhas .mb-pdf__t { font-family: inherit; color: #fff; font-size: 15px; font-weight: 700; line-height: 1.32; letter-spacing: 0; }
body .mb-bloco--acervo .mb-lista--linhas .mb-pdf__placa { color: #b9c6d4; font-size: 12.5px; }
body .mb-bloco--acervo .mb-lista--linhas .mb-pdf__placa b { color: #fff; }
body .mb-bloco--acervo .mb-lista--linhas .mb-pdf__dl {
	width: auto; height: auto; gap: 4px; padding: 6px 11px; border-radius: 99px; font-size: 12.5px; font-weight: 800;
	color: #ffd60a; background: rgba(255, 214, 10, .08); border: 1px solid rgba(255, 214, 10, .55);
}
body .mb-bloco--acervo #mb-lista-fichas.mb-lista--linhas .mb-pdf:hover .mb-pdf__dl { background: #ffd60a; color: #171200; box-shadow: none; }
.mb-lista--linhas .mb-pdf__capa { display: none; }
@media (min-width: 900px) {
	.mb-lista--linhas .mb-pdf__capa {
		position: absolute; z-index: 5; right: 96px; top: 50%; width: 220px; height: auto; transform: translateY(-50%);
		border-radius: 8px; border: 2px solid #ffd60a; background: #f6f1e2; box-shadow: 0 16px 34px rgba(0, 0, 0, .55); pointer-events: none;
	}
	.mb-lista--linhas .mb-pdf:hover .mb-pdf__capa[src], .mb-lista--linhas .mb-pdf:focus-visible .mb-pdf__capa[src] { display: block; }
}
.mb-lista--linhas .sb-porta { grid-column: 1 / -1; }
@media (max-width: 560px) {
	body .mb-bloco--acervo #mb-lista-fichas.mb-lista--linhas .mb-pdf { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 2px 8px; padding: 10px 10px; }
	body .mb-bloco--acervo .mb-lista--linhas .mb-pdf__t { font-size: 14.5px; }
	body .mb-bloco--acervo .mb-lista--linhas .mb-pdf__dl { padding: 6px 9px; }
}
/* chips de marca numa linha rolável no celular (12 chips em 1 linha em vez de 4) */
@media (max-width: 720px) {
	.sb-f2-ap .mb-bloco--acervo .mb-cats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -14px; padding-right: 14px; }
	.sb-f2-ap .mb-bloco--acervo .mb-cats::-webkit-scrollbar { display: none; }
	.sb-f2-ap .sb-ap-marcas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.sb-f2-ap .sb-ap-marcas a { flex: none; }
	.sb-f2-ap .mb-hero { padding-top: 26px; padding-bottom: 20px; }
}