/* ═══════════ SELETOR DE PERÍODO (29/10/2026) ═══════════
   Spec: docs/superpowers/specs/2026-10-29-seletor-periodo-design.md.
   Uma porta só — o botão flutuante embaixo à direita — e um painel que é folha de baixo no
   celular e quadro com calendário no computador. Os dois são filhos DIRETOS do <body>: dentro
   do <header>, o backdrop-filter que as peles religam virava o bloco de referência do
   `position:fixed`, e o painel abria fora da tela com a página rolada.
   Vidro só no botão (é o que flutua); o painel e o véu são sólidos — o painel antigo tinha
   fundo 92% e deixava o texto de trás atravessar. Cor só por token, nas duas áreas e nos
   dois temas. Carrega depois das peles. */

/* ── O botão ── */
#fab-periodo.psel-botao{position:fixed;right:24px;bottom:24px;z-index:57;display:flex;align-items:center;gap:10px;
  max-width:260px;min-height:52px;padding:8px 16px 8px 13px;border-radius:16px;text-align:left;cursor:pointer;font:inherit;
  background:color-mix(in srgb,var(--superficie) 72%,transparent);color:var(--texto);
  -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
  border:1px solid color-mix(in srgb,var(--texto) 13%,transparent);
  box-shadow:0 10px 30px color-mix(in srgb,var(--texto) 16%,transparent),0 1px 2px color-mix(in srgb,var(--texto) 10%,transparent);
  transition:transform .15s ease,box-shadow .15s ease}
#fab-periodo.psel-botao:hover{box-shadow:0 14px 36px color-mix(in srgb,var(--texto) 20%,transparent),0 1px 2px color-mix(in srgb,var(--texto) 10%,transparent)}
#fab-periodo.psel-botao:active{transform:scale(.97)}
#fab-periodo.psel-botao:focus-visible{outline:2px solid var(--acento);outline-offset:3px}
#fab-periodo.psel-botao.foco-quieto,#fab-periodo.psel-botao.foco-quieto:focus-visible{outline:none}
#fab-periodo.psel-botao.off,#view-app.hidden ~ #fab-periodo{display:none}
#fab-periodo.psel-botao svg{width:18px;height:18px;flex:none;color:var(--acento-texto)}
.psel-botao-txt{display:flex;flex-direction:column;min-width:0;line-height:1.25}
#fab-periodo-conta{font-size:11.5px;font-weight:600;color:var(--texto-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#fab-periodo-lbl{font-size:14px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
#fab-periodo.psel-botao.on #fab-periodo-lbl{color:var(--acento-texto)}
/* O fim da página ganha o respiro do botão: rolando até o fim, nada fica embaixo dele. */
body.com-periodo #wrap::after{content:'';display:block;flex:none;height:72px}
@media (prefers-reduced-transparency: reduce),(prefers-contrast: more){
  #fab-periodo.psel-botao{background:var(--superficie);-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ── O véu e o painel ── */
.psel-veu{position:fixed;inset:0;z-index:96;background:rgba(9,11,16,.46)}
.psel{position:fixed;z-index:97;display:flex;flex-direction:column;background:var(--superficie);color:var(--texto);
  border:1px solid var(--linha);box-shadow:0 24px 64px rgba(0,0,0,.28);overflow:hidden;font-size:14px}
.psel-veu.hidden,.psel.hidden{display:none}
.psel button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.psel button:focus-visible{outline:2px solid var(--acento);outline-offset:1px}
/* Com a folha aberta a página não puxa para recarregar nem rola por baixo (periodo.js trava). */
html.psel-aberto,html.psel-aberto body{overscroll-behavior:none}
#pmenu:focus,#pmenu:focus-visible{outline:none}   /* a folha recebe o foco no celular (pmFocar); id vence o [tabindex] das peles */
.psel-alca{display:none}
.psel-cab{display:flex;align-items:center;gap:6px}
.psel-cab h2{flex:1;margin:0;font-size:17px;font-weight:700;letter-spacing:-.01em}
.psel .psel-x,.psel .psel-voltar{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--texto-2);flex:none}
.psel .psel-x:hover,.psel .psel-voltar:hover{background:var(--superficie-2)}
.psel-x svg,.psel-voltar svg{width:18px;height:18px}
.psel-corpo{min-height:0;flex:1}

/* a lista */
.psel-lista,.psel-cmp-ops{display:flex;flex-direction:column;gap:1px}
.psel-lista>*,.psel-cmp-ops>*{flex:none}   /* a lista rola; os itens não encolhem para caber */
.psel .psel-lista button,.psel .psel-cmp-ops button{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  min-height:34px;padding:7px 12px;border-radius:9px;text-align:left;font-weight:550;color:var(--texto)}
.psel .psel-lista button:hover,.psel .psel-cmp-ops button:hover{background:var(--superficie-2)}
.psel .psel-lista button.on,.psel .psel-cmp-ops button.on{background:var(--fundo-selecao,color-mix(in srgb,var(--acento) 12%,transparent));color:var(--acento-texto);font-weight:650}
.psel-lista button.on::after,.psel-cmp-ops button.on::after{content:'✓';font-weight:700}
.psel-lista button[data-p="custom"]:not(.on)::after{content:'›';font-size:18px;line-height:1;color:var(--texto-3)}
/* "Comparar com" no pé da lista (decisão D2): rótulo pequeno em cima, a comparação vigente embaixo. */
.psel .psel-lista .psel-cmp-linha{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px;row-gap:1px;align-items:center;
  margin-top:6px;padding-top:10px;padding-bottom:9px;border-top:1px solid var(--linha);border-radius:0 0 9px 9px}
.psel-cmp-linha span{grid-column:1;font-size:11.5px;font-weight:600;color:var(--texto-3)}
.psel-cmp-linha b{grid-column:1;font-size:13.5px;font-weight:650;color:var(--texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.psel-cmp-linha::after{content:'›';grid-column:2;grid-row:1 / span 2;font-size:18px;line-height:1;color:var(--texto-3)}

/* datas, calendário e comparação */
.psel-lado{display:flex;flex-direction:column;gap:14px;min-width:0}
.psel-pontas{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.psel-pontas.hidden{display:none}
.psel .psel-ponta{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 12px;border:1px solid var(--linha);border-radius:10px;background:var(--superficie-2);text-align:left}
.psel .psel-ponta.vez{border-color:var(--acento);box-shadow:0 0 0 1px var(--acento)}
.psel-ponta small{font-size:11px;font-weight:600;color:var(--texto-3)}
.psel-ponta span{font-size:14px;font-weight:650;font-variant-numeric:tabular-nums}
.psel-cal{position:relative}
.psel-cal-nav{position:absolute;top:-2px;left:0;right:0;display:flex;justify-content:space-between;pointer-events:none}
.psel .psel-cal-nav button{pointer-events:auto;width:32px;height:32px;border-radius:8px;font-size:20px;line-height:1;color:var(--texto-2)}
.psel .psel-cal-nav button:hover{background:var(--superficie-2)}
.psel .psel-cal-nav button:disabled{opacity:.3;cursor:default;background:none}
.psel-meses{display:grid;grid-template-columns:repeat(auto-fit,minmax(224px,1fr));gap:22px}
.psel-mes-t{height:28px;line-height:28px;text-align:center;font-size:14px;font-weight:650;text-transform:capitalize}
.psel-sem,.psel-linha{display:grid;grid-template-columns:repeat(7,1fr)}
.psel-sem span{padding:4px 0;text-align:center;font-size:11px;font-weight:600;color:var(--texto-3)}
.psel .psel-dia{height:36px;font-size:13.5px;font-variant-numeric:tabular-nums}
.psel .psel-dia.meio{background:color-mix(in srgb,var(--acento) 13%,transparent)}
.psel .psel-dia.ini{border-radius:9px 0 0 9px}
.psel .psel-dia.fim{border-radius:0 9px 9px 0}
.psel .psel-dia.ini.fim{border-radius:9px}
.psel .psel-dia.sel{background:var(--acento);color:var(--sobre-preenchimento,#fff);font-weight:700}
.psel .psel-dia:not(:disabled):not(.sel):not(.meio):hover{background:var(--superficie-2);border-radius:9px}
.psel .psel-dia:disabled{color:var(--texto-4);cursor:default}
.psel-t{margin-bottom:6px;font-size:11px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-3)}
.psel-cmp{display:flex;flex-direction:column;gap:8px}

/* o rodapé */
.psel-acoes{display:flex;align-items:center;gap:8px;border-top:1px solid var(--linha)}
.psel-nota{margin-right:auto;font-size:12.5px;color:var(--texto-3);font-variant-numeric:tabular-nums}
.psel .psel-cancelar{padding:9px 16px;border-radius:10px;border:1px solid var(--linha);font-weight:600}
.psel .psel-cancelar:hover{background:var(--superficie-2)}
.psel .psel-ok{padding:9px 18px;border-radius:10px;background:var(--acento);color:var(--sobre-preenchimento,#fff);font-weight:650}
.psel .psel-ok:hover{filter:brightness(1.07)}

/* ── Computador: quadro no meio, lista à esquerda e calendário à direita ── */
@media(min-width:768px){
  .psel{top:50%;left:50%;transform:translate(-50%,-50%);width:min(780px,calc(100vw - 48px));max-height:min(680px,calc(100vh - 48px));border-radius:18px}
  .psel-cab{padding:14px 14px 10px 22px;border-bottom:1px solid var(--linha)}
  .psel .psel-voltar{display:none}
  .psel-corpo{display:grid;grid-template-columns:214px minmax(0,1fr);overflow:hidden}
  .psel-lista{padding:10px 8px;border-right:1px solid var(--linha);overflow-y:auto}
  .psel-lado{padding:18px 22px;overflow-y:auto}
  .psel:not(.psel-extras) #psel-pontas,.psel:not(.psel-extras) .psel-cmp{display:none}
  .psel-acoes{padding:12px 22px}
}

/* ── Celular: folha de baixo, em dois passos (lista → Personalizado) ── */
@media(max-width:767px){
  #fab-periodo.psel-botao{right:12px;bottom:calc(64px + 14px + env(safe-area-inset-bottom));max-width:62vw;min-height:46px;padding:6px 14px 6px 11px;border-radius:14px}
  body.com-periodo #wrap::after{height:64px}
  .psel{left:0;right:0;bottom:0;max-height:85dvh;border-radius:20px 20px 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom);
    transition:transform .22s cubic-bezier(.2,.8,.2,1);animation:psel-sobe .26s cubic-bezier(.2,.8,.2,1)}
  .psel-alca{display:block;flex:none;width:38px;height:5px;margin:8px auto 2px;border-radius:3px;background:color-mix(in srgb,var(--texto) 22%,transparent)}
  .psel-cab{padding:4px 12px 6px 20px}
  .psel[data-passo="lista"] .psel-voltar{display:none}
  .psel[data-passo="custom"] .psel-cab{padding-left:8px}
  .psel-corpo{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .psel[data-passo="lista"] .psel-lado,.psel[data-passo="custom"] .psel-lista,.psel[data-passo="lista"] .psel-acoes{display:none}
  .psel-lista{padding:2px 8px 14px}
  .psel .psel-lista button,.psel .psel-cmp-ops button{min-height:44px;font-size:15px}
  .psel-lado{padding:2px 16px 14px}
  .psel .psel-dia{height:40px;font-size:15px}
  .psel-acoes{flex-wrap:wrap;padding:10px 16px 12px}
  .psel-nota{flex-basis:100%}
  .psel .psel-cancelar,.psel .psel-ok{flex:1;min-height:44px}
}
@keyframes psel-sobe{from{transform:translateY(100%)}to{transform:none}}
@media(prefers-reduced-motion:reduce){ .psel{animation:none;transition:none} }