/* CÓPIA GÊMEA: este arquivo existe igual, byte a byte, em central/public/css/controles.css e em
   area-do-cliente/public/css/controles.css. Mudou um, copie por cima do outro; nunca edite só um. */
/* Central Pepper — controles.css (Task 3, 27/09/2026)
 * Estilo dos componentes próprios: seletor.js (.psel-*), janelas.js (.pjanela-*)
 * e calendario-campo.js (.pcal-*). Porta a gramática visual de
 * extensao-whatsapp/painel.css (.sel-*, .dlg) pro design system da Central.
 *
 * Tokens com fallback (var(--x, valor)) porque este arquivo também precisa
 * funcionar sozinho em demo-controles.html, sem o <style> gigante do
 * index.html por perto. Nos dois temas da Central, quem manda é o token —
 * o fallback só cobre a demo. html[data-tema="claro"] troca os valores no
 * próprio index.html; aqui só reagimos com var(--x, escuro-como-fallback).
 */

/* ── seletor (psel) ───────────────────────────────────────────────────── */
.psel { position: relative; display: inline-block; width: 100%; }
.psel-select-oculto,
.psel select { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.psel-botao {
  width: 100%; display: flex; align-items: center; gap: 10px;
  background: var(--bg4, #1b1b1e); border: 1px solid var(--borda, rgba(255,255,255,.08));
  border-radius: var(--raio, 12px); padding: 10px 12px; cursor: pointer; text-align: left;
  font: inherit; color: var(--texto, #fff);
  transition: border-color .15s, background .15s;
}
/* select que era miúdo no nativo (font-size no style=""): botão mais baixo, mesma cara */
.psel-compacto .psel-botao { padding: 5px 10px; font-size: .82rem; gap: 8px; border-radius: 9px; }
.psel-compacto .psel-txt { font-weight: 600; }
.psel-botao:hover { border-color: var(--borda2, rgba(255,255,255,.15)); }
.psel-botao:disabled { opacity: .55; cursor: default; }
.psel.psel-aberto .psel-botao {
  border-color: var(--verm, #df1c30); box-shadow: 0 0 0 3px rgba(223,28,48,.18);
  background: var(--bg3, #141416);
}
.psel-txt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.psel-txt:empty::before { content: "\00a0"; } /* select sem opção e sem placeholder: botão mantém a altura */
.psel-ico { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--dim, rgba(255,255,255,.56)); transition: transform .2s var(--saida, cubic-bezier(.16,1,.3,1)); }
.psel.psel-aberto .psel-botao > .psel-ico { transform: rotate(180deg); color: var(--texto, #fff); }
.psel-bolinha { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--c, var(--dim, rgba(255,255,255,.56))); }

/* lista portada pro <body>: position fixed, coordenada calculada em JS (posicionar()) */
.psel-lista {
  position: fixed; z-index: 1000; margin: 0; padding: 6px; list-style: none;
  background: var(--bg3, #141416); border: 1px solid var(--borda2, rgba(255,255,255,.15));
  border-radius: 14px; box-shadow: 0 18px 42px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.4);
  overflow-y: auto; max-height: 320px;
  opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top center;
  pointer-events: none; visibility: hidden;
  transition: opacity .14s ease-in, transform .14s ease-in, visibility 0s linear .14s;
}
.psel-lista.psel-aberta {
  opacity: 1; transform: none; pointer-events: auto; visibility: visible;
  transition: opacity .2s var(--saida, cubic-bezier(.16,1,.3,1)), transform .24s var(--saida, cubic-bezier(.16,1,.3,1)), visibility 0s;
}
.psel-lista.psel-para-cima { transform-origin: bottom center; }
.psel-lista:focus { outline: none; }
.psel-op { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; cursor: pointer; color: var(--suave, rgba(255,255,255,.78)); font-size: .9rem; }
.psel-op.psel-ativo { background: var(--bg5, #232327); color: var(--texto, #fff); }
.psel-op[aria-selected="true"] { color: var(--texto, #fff); font-weight: 700; }
.psel-op-desabilitada { opacity: .45; cursor: default; }
.psel-op .psel-ok { margin-left: auto; color: var(--verm, #df1c30); opacity: 0; }
.psel-op[aria-selected="true"] .psel-ok { opacity: 1; }
.psel-grupo { font: 400 .72rem/1 var(--rotulo, "Unbounded", system-ui, sans-serif); letter-spacing: .09em; text-transform: uppercase; color: var(--dim, rgba(255,255,255,.56)); padding: 10px 10px 6px; }

/* ── janelas (pjanela): avisar / confirmar / perguntar ───────────────── */
dialog.pepper-modal.pjanela {
  border: 1px solid var(--borda2, rgba(255,255,255,.15));
  border-radius: 14px; background: var(--bg2, #0f0f10); color: var(--texto, #fff);
  box-shadow: 0 18px 50px rgba(0,0,0,.6);
  padding: 0; width: min(92vw, 420px);
  font: 400 14px/1.5 var(--corpo, "Manrope", system-ui, sans-serif);
  /* centro da tela mesmo em página com reset de margem (* { margin: 0 }), que tira o
     margin: auto que o navegador dá ao dialog modal */
  position: fixed; inset: 0; margin: auto; height: fit-content; max-height: calc(100vh - 32px); overflow: auto;
}
dialog.pepper-modal.pjanela::backdrop { background: rgba(0,0,0,.62); }
dialog.pepper-modal.pjanela[open] { animation: pjanela-chegar .22s var(--saida, cubic-bezier(.16,1,.3,1)); } /* sem fill-mode "both": transform vivo no dialog quebra o position: fixed lá dentro */
@keyframes pjanela-chegar { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
.pjanela-corpo { padding: 20px; }
.pjanela-msg { margin: 0 0 16px; font-size: .95rem; color: var(--texto, #fff); white-space: pre-line; }
.pjanela-corpo .psel { margin-bottom: 16px; }
.pjanela-campo {
  width: 100%; background: var(--bg4, #1b1b1e); border: 1px solid var(--borda, rgba(255,255,255,.08));
  border-radius: var(--raio, 12px); padding: 9px 12px; color: var(--texto, #fff); font: inherit;
  margin-bottom: 16px;
}
.pjanela-campo:focus { outline: none; border-color: var(--verm, #df1c30); box-shadow: 0 0 0 3px rgba(223,28,48,.18); }
.pjanela-acoes { display: flex; justify-content: flex-end; gap: 8px; }
/* botões da janela em página que não tem o .btn da Central (painéis avulsos, Área do Cliente,
   proposta): :where() deixa a especificidade no chão, então onde existe .btn ele vence. */
:where(.pjanela-acoes) > button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 0; background: var(--verm, #df1c30); color: #fff; font: inherit; font-weight: 700; font-size: .88rem;
  border-radius: var(--raio, 12px); padding: 9px 14px; cursor: pointer;
}
:where(.pjanela-acoes) > button:where(.leve) { background: var(--bg4, #1b1b1e); border: 1px solid var(--borda, rgba(255,255,255,.08)); color: var(--texto, #fff); }
:where(.pjanela-acoes) > button:where(.perigo) { background: transparent; border: 1px solid rgba(255,90,105,.45); color: var(--coral, #ff5a69); }
:where(.pjanela-acoes) > button:focus-visible { outline: 2px solid var(--verm, #df1c30); outline-offset: 2px; }
.pjanela-perigo .pjanela-msg { color: var(--coral, #ff5a69); }
body.pjanela-corpo-travado { overflow: hidden; }

/* toast (avisar): mesma casca do #aviso da extensão, sem bloquear nada */
.pjanela-aviso {
  position: fixed; left: 12px; right: 12px; max-width: 420px; margin: 0 auto; bottom: 12px; z-index: 1000;
  background: var(--bg5, #232327); border: 1px solid var(--borda2, rgba(255,255,255,.15));
  border-radius: var(--raio, 12px); padding: 11px 14px; font-size: .86rem; color: var(--texto, #fff);
  box-shadow: 0 14px 34px rgba(0,0,0,.55); opacity: 0; transform: translateY(10px);
  transition: opacity .16s ease-in, transform .16s ease-in, bottom .2s var(--saida, cubic-bezier(.16,1,.3,1));
  cursor: pointer;
}
.pjanela-aviso.pjanela-aviso-on { opacity: 1; transform: none; transition: opacity .22s var(--saida, cubic-bezier(.16,1,.3,1)), transform .3s var(--saida, cubic-bezier(.16,1,.3,1)); }

/* ── calendário e relógio (pcal) ──────────────────────────────────────── */
.pcal { position: relative; display: inline-block; width: 100%; }
.pcal-input-oculto,
.pcal input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pcal-botao {
  width: 100%; display: flex; align-items: center; gap: 10px;
  background: var(--bg4, #1b1b1e); border: 1px solid var(--borda, rgba(255,255,255,.08));
  border-radius: var(--raio, 12px); padding: 10px 12px; cursor: pointer; text-align: left;
  font: inherit; color: var(--texto, #fff);
  transition: border-color .15s, background .15s;
}
.pcal-botao:hover { border-color: var(--borda2, rgba(255,255,255,.15)); }
.pcal.pcal-aberto .pcal-botao {
  border-color: var(--verm, #df1c30); box-shadow: 0 0 0 3px rgba(223,28,48,.18);
  background: var(--bg3, #141416);
}
.pcal-txt { flex: 1; min-width: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.pcal-ico { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--dim, rgba(255,255,255,.56)); }

.pcal-painel {
  position: fixed; z-index: 1000; background: var(--bg3, #141416);
  border: 1px solid var(--borda2, rgba(255,255,255,.15)); border-radius: 14px;
  box-shadow: 0 18px 42px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.4);
  padding: 10px; width: 280px; max-width: 92vw;
  animation: pjanela-chegar .16s var(--saida, cubic-bezier(.16,1,.3,1)) both;
}
.pcal-painel:focus { outline: none; }
.pcal-cab { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 8px; }
.pcal-titulo { font: 400 .84rem/1.2 var(--rotulo, "Unbounded", system-ui, sans-serif); color: var(--texto, #fff); text-transform: capitalize; }
.pcal-nav {
  width: 30px; height: 30px; display: inline-grid; place-items: center; border: 1px solid transparent;
  background: transparent; border-radius: 10px; color: var(--dim, rgba(255,255,255,.56)); cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}
.pcal-nav:hover { color: var(--texto, #fff); background: var(--bg4, #1b1b1e); border-color: var(--borda, rgba(255,255,255,.08)); }
.pcal-nav svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pcal-semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.pcal-semana span { text-align: center; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--dim, rgba(255,255,255,.56)); padding: 4px 0; }
.pcal-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.pcal-dia {
  aspect-ratio: 1; display: grid; place-items: center; border: 1px solid transparent; background: transparent;
  border-radius: 9px; color: var(--suave, rgba(255,255,255,.78)); font-size: .84rem; cursor: pointer;
  font-variant-numeric: tabular-nums; transition: background .15s, border-color .15s, color .15s;
}
.pcal-dia:hover { background: var(--bg4, #1b1b1e); }
.pcal-dia:focus-visible { outline: 2px solid var(--verm, #df1c30); outline-offset: 1px; }
.pcal-dia-sel { background: var(--verm, #df1c30); color: #fff; font-weight: 700; }
.pcal-dia-vazio { visibility: hidden; cursor: default; }

.pcal-horas { list-style: none; margin: 0; padding: 4px; max-height: 260px; overflow-y: auto; }
.pcal-hora {
  padding: 8px 12px; border-radius: 9px; color: var(--suave, rgba(255,255,255,.78)); font-size: .88rem;
  cursor: pointer; font-variant-numeric: tabular-nums; transition: background .15s, color .15s;
}
.pcal-hora:hover { background: var(--bg4, #1b1b1e); }
.pcal-hora:focus-visible { outline: 2px solid var(--verm, #df1c30); outline-offset: -2px; }
.pcal-hora-sel { background: var(--verm-suave, rgba(223,28,48,.14)); color: var(--texto, #fff); font-weight: 700; }

/* ── acessibilidade: menos movimento ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .psel-lista, .psel-lista.psel-aberta, dialog.pepper-modal.pjanela[open], .pjanela-aviso, .pjanela-aviso.pjanela-aviso-on, .pcal-painel {
    animation: none !important; transform: none !important;
  }
}