/* Painel de recarga: cenario + painel fixo (classes .cbp-*), e o menu do cabecalho (.cb-menu).
   Valores vindos dos mockups da spec 2026-10-14-painel-recarga-ux. Carregado depois de cargaboa.css.
   Regras: o cenario e sempre verde-cerrado nos dois temas; o painel segue o tema; alvos >= 44 px;
   prefers-reduced-motion desliga todo movimento decorativo. */

:root {
  --cbp-info-bg: #EAF4FC; --cbp-info-bd: #8CC3EC; --cbp-grab: #C9D3CE; --cbp-link: var(--cerrado);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --cbp-info-bg: #15303B; --cbp-info-bd: #2E6A8A; --cbp-grab: #3A4A44; --cbp-link: var(--cal); }
}
:root[data-theme="dark"] { --cbp-info-bg: #15303B; --cbp-info-bd: #2E6A8A; --cbp-grab: #3A4A44; --cbp-link: var(--cal); }

/* Menu do cabecalho (?): ajuda, tema e conta. Sem JS: <details> nativo; o painel abre sob o botao. */
.cb-menu { position: relative; flex: 0 0 auto; }
.cb-menu > summary { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; list-style: none; }
.cb-menu > summary::-webkit-details-marker { display: none; }
.cb-menu > summary:hover, .cb-menu[open] > summary { background: rgba(243, 245, 239, .16); }
.cb-menu > summary:focus-visible { outline: 3px solid var(--ceu); outline-offset: 2px; }
.cb-menu__ico { display: grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid var(--cal); border-radius: 50%; color: var(--cal); font-size: 13px; font-weight: 800; line-height: 1; }
.cb-menu__panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 10; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; width: min(320px, calc(100vw - 24px)); max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); overflow-y: auto; overscroll-behavior: contain; padding: 14px; background: var(--card); color: var(--fg); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 12px 32px rgba(18, 59, 49, .28); font-size: 14px; font-weight: 500; line-height: 1.45; text-align: left; }
.cb-menu__panel p { margin: 0; }
.cb-menu__ajuda { display: flex; flex-direction: column; gap: 8px; }
.cb-menu__title { font-family: var(--f-display); font-size: 15px; font-weight: 700; color: var(--fg); }
.cb-menu__panel a:not(.btn) { display: flex; align-items: center; min-height: 44px; padding: 0 8px; border-radius: 10px; color: var(--fg); font-weight: 700; text-decoration: none; }
.cb-menu__panel a:not(.btn):hover { background: var(--brand-2); }
.cb-menu__panel form { margin: 0; }
.cb-menu__panel :focus-visible { outline: 3px solid var(--fg); outline-offset: 2px; }

/* Cenario e painel. O cabecalho tem 56 px; o cenario ocupa o resto da tela e o painel fica colado embaixo. */
.cbp { background: var(--bg); }
.cbp-stage { display: flex; flex-direction: column; min-height: calc(100vh - 56px); min-height: calc(100dvh - 56px); }
.cbp-scene {
  --sc-bg: var(--cerrado); --sc-fg: var(--cal); --sc-mut: rgba(243, 245, 239, .78); --sc-line: rgba(243, 245, 239, .42);
  --sc-tile-bg: rgba(255, 255, 255, .09); --sc-tile-bd: rgba(243, 245, 239, .24);
  --sc-st-bg: var(--cal); --sc-st-fg: var(--cerrado); --sc-link: var(--cal);
  flex: 1 0 auto; display: flex; flex-direction: column; gap: 12px;
  padding: 14px max(14px, calc(50% - 320px)) 0;   /* conteudo com no maximo 640 px, centrado em telas largas */
  background: var(--sc-bg); color: var(--sc-fg);
}
.cbp-scene--center { justify-content: center; align-items: center; text-align: center; padding-bottom: 14px; }
.cbp-h1 { margin: 0; font-family: var(--f-display); font-size: 17px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; color: var(--sc-fg, var(--fg)); }
.cbp-mut { margin: 0; font-size: 13px; color: var(--muted); }
.cbp-scene .cbp-mut { color: var(--sc-mut); }
.cbp-scene .muted { color: var(--sc-mut); }
.cbp-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Chips de status e de especificacao */
.cbp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--cerrado); color: #fff; font-size: 12px; font-weight: 800; line-height: 1.4; }
.cbp-chip--line { padding: 2px 9px; background: transparent; border: 1px solid var(--line); color: var(--fg); font-weight: 700; }
.cbp-chip--st { background: var(--sc-st-bg, var(--cerrado)); color: var(--sc-st-fg, #fff); }
.cbp-dot { display: inline-block; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: #7CE0A0; }
.cbp-scene .cbp-chip--line { border-color: var(--sc-line); color: var(--sc-fg); }
.cbp-scene .cbp-chip--st .cbp-dot { background: #2FA866; }

/* Cartoes de preco (tiles) */
.cbp-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cbp-tile { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 14px; background: var(--sc-tile-bg, var(--bg)); border: 1px solid var(--sc-tile-bd, var(--line)); }
.cbp-tile small { font-size: 12px; font-weight: 700; color: var(--sc-mut, var(--muted)); }
.cbp-tile b { font-family: var(--f-display); font-size: 17px; line-height: 1.25; color: var(--sc-fg, var(--fg)); }
.cbp-tile b em { font: 700 12px var(--f-body); font-style: normal; color: var(--sc-mut, var(--muted)); margin-left: 2px; }
.cbp-tile span { font-size: 12px; font-weight: 600; color: var(--sc-mut, var(--muted)); }
.cbp-tile::after { content: "\203A"; position: absolute; right: 10px; top: 6px; font-size: 20px; line-height: 1; color: var(--sc-mut, var(--muted)); }

/* Links: alvo de 44 px sem mudar a altura da linha (padding compensado por margem negativa) */
.cbp-link { color: var(--cbp-link); font-size: 13px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; padding: 12px 4px; margin: -12px -4px; }
.cbp-scene .cbp-link { color: var(--sc-link); }
.cbp-lbl { font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.cbp-note { margin: 0; font-size: 11.5px; color: var(--muted); text-align: center; }
.cbp-info { padding: 8px 10px; border: 1.5px solid var(--cbp-info-bd); border-radius: 12px; background: var(--cbp-info-bg); color: var(--fg); font-size: 12.5px; line-height: 1.35; }

/* "Saiba mais" inline: <details class="cbp-more">, no painel ou no cenario (cor: --sc-link no cenario, --cbp-link no painel) */
.cbp-more { font-size: 12.5px; line-height: 1.4; }
.cbp-more > summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--sc-link, var(--cbp-link)); font-size: 13px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; list-style: none; }
.cbp-more > summary::-webkit-details-marker { display: none; }
.cbp-more > :not(summary) { margin: 4px 0 0; }

/* Painel fixo: branco ou escuro conforme o tema, colado no fim da tela */
.cbp-dock {
  position: sticky; bottom: 0; z-index: 2; flex: 0 0 auto;
  width: 100%; max-width: 640px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 10px;
  padding: 8px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--card); color: var(--fg);
  border-radius: 20px 20px 0 0; box-shadow: 0 -6px 24px rgba(18, 59, 49, .16);
}
.cbp-grab { width: 40px; height: 4px; border-radius: 2px; background: var(--cbp-grab); margin: 0 auto; }

/* Botoes: primario (ipe, so para a acao), secundario e de perigo. Todos com 44 px ou mais. */
.cbp-btn { display: block; width: 100%; min-height: 48px; padding: 14px 16px; border: 0; border-radius: 12px; background: var(--ipe); color: var(--cerrado); font: 800 16px/1.2 var(--f-body); text-align: center; text-decoration: none; cursor: pointer; }
.cbp-btn--sec { background: var(--brand-2); color: var(--fg); font-size: 14px; padding: 12px 16px; }
.cbp-btn--danger { background: var(--danger); color: #fff; }

/* Foco visivel: no painel usa o texto do tema; no cenario (verde-cerrado) usa o ceu */
.cbp-dock :focus-visible { outline: 3px solid var(--fg); outline-offset: 2px; }
.cbp-scene :focus-visible { outline: 3px solid var(--ceu); outline-offset: 2px; }

/* Rede de seguranca sem :has(): botoes por metodo (data-for) aparecem empilhados. "body" sobe a especificidade
   para (0,2,1): o CSS da pagina (bloco head, carregado depois deste arquivo) pode ter .cbp-btn[data-for] (0,2,0)
   para esconder, e perderia por ordem. Por isso o que esconde [data-for] na pagina tem especificidade (0,2,0)
   ou menos. */
@supports not selector(:has(*)) {
  body .cbp-btn[data-for] { display: block; margin-top: 8px; }
}

/* Texto só para leitor de tela (mesmo padrão de input.cbp-sr): anúncio de região aria-live, título oculto */
.cbp-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Reduzir movimento: nada anima nem transita */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}