/* ═══════════════════════════════════════════════════════════════════════
   FERRAMENTAS DO QUADRO
   ═══════════════════════════════════════════════════════════════════════
   O painel abre com o RETRATO do quadro e só depois oferece as ferramentas.
   É a ordem certa: quem abre uma tela chamada "ferramentas do quadro" está
   olhando para o quadro, não procurando um botão.

   A faixa de números é a única parte com fundo próprio, e é de propósito —
   ela é resposta, e o resto é oferta. Cada cartão abaixo tem ícone com cor
   própria, porque três cartões cinzas empilhados viram uma lista, e lista se
   lê de cima para baixo em vez de se escolher.
   ═══════════════════════════════════════════════════════════════════════ */
.pu-overlay{
  position:fixed;inset:0;z-index:2147482000;display:flex;
  align-items:center;justify-content:center;padding:22px;
  background:rgba(5,18,38,.6);backdrop-filter:blur(8px);
}
.pu-overlay[hidden]{display:none}
.pu-dialog{
  width:min(680px,100%);max-height:min(820px,calc(100vh - 44px));
  display:flex;flex-direction:column;overflow:hidden;
  border:1px solid rgba(148,163,184,.2);border-radius:22px;
  background:#101827;color:#edf5ff;
  box-shadow:0 30px 90px rgba(2,10,24,.5);
  font-family:Inter,Arial,sans-serif;
  animation:cardRise .22s cubic-bezier(.16,1,.3,1) both;
}

/* ── Cabeçalho ───────────────────────────────────────────────────────── */
.pu-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  flex-shrink:0;padding:24px 26px 18px;
  background:linear-gradient(160deg,rgba(45,121,239,.16),transparent 70%);
}
.pu-kicker{
  display:block;margin-bottom:6px;color:#67b6ff;
  font-size:.64rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}
.pu-head h2{
  margin:0;font-family:Syne,Inter,sans-serif;font-size:1.4rem;font-weight:700;
  letter-spacing:-.4px;line-height:1.15;
}
/* O nome do QUADRO, e não uma frase explicando o painel: o título já explica
   o painel, e o que muda entre uma abertura e outra é o quadro. */
.pu-quadro{margin:6px 0 0;color:#8fa6bd;font-size:.8rem;font-weight:500}
.pu-close{
  width:34px;height:34px;flex:0 0 auto;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(148,163,184,.2);border-radius:10px;
  background:rgba(255,255,255,.05);color:inherit;font-size:.85rem;
  transition:background .14s,color .14s;
}
.pu-close:hover{background:rgba(255,255,255,.12)}

/* ── O retrato ───────────────────────────────────────────────────────── */
.pu-stats{
  display:flex;gap:1px;flex-shrink:0;margin:0 26px 20px;
  border-radius:14px;overflow:hidden;background:rgba(148,163,184,.16);
}
.pu-stat{flex:1;min-width:0;padding:13px 10px;text-align:center;background:#141d2f}
.pu-stat b{
  display:block;font-family:Syne,Inter,sans-serif;font-size:1.35rem;font-weight:700;
  letter-spacing:-.5px;color:#eaf3ff;font-variant-numeric:tabular-nums;
}
.pu-stat span{
  display:block;margin-top:2px;font-size:.66rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:#7c93ab;
}

/* ── Os cartões ──────────────────────────────────────────────────────── */
.pu-body{
  flex:1;min-height:0;overflow-y:auto;padding:0 26px 26px;
  display:flex;flex-direction:column;gap:13px;
}
.pu-card{
  padding:18px;border:1px solid rgba(148,163,184,.15);border-radius:17px;
  background:rgba(255,255,255,.03);
}
.pu-card-top{display:flex;align-items:flex-start;gap:13px}
.pu-brand{
  width:40px;height:40px;display:grid;place-items:center;flex:0 0 auto;border-radius:12px;
  background:linear-gradient(145deg,#2d79ef,#6f56ec);color:#fff;
}
.pu-brand-doc{background:linear-gradient(145deg,#0ea5e9,#2563eb)}
.pu-brand-lim{background:linear-gradient(145deg,#f59e0b,#ea580c)}
.pu-brand svg{width:21px;height:21px}
.pu-card h3{margin:0;font-size:.97rem;font-weight:600}
.pu-card p{margin:4px 0 0;color:#93a7bc;font-size:.77rem;line-height:1.55}

.pu-acao{
  width:100%;margin-top:12px;height:38px;border-radius:11px;cursor:pointer;
  font:600 .8rem Inter,Arial,sans-serif;
  background:rgba(56,189,248,.14);border:1px solid rgba(56,189,248,.3);color:#7dd3fc;
  transition:background .14s,color .14s;
}
.pu-acao:hover{background:rgba(56,189,248,.24);color:#bae6fd}

/* A prévia do leia-me: três linhas e reticências. Ele tem tela própria para
   ser lido inteiro; aqui só se responde "há alguma coisa escrita?". */
.pu-leiame{
  margin-top:13px;padding:11px 13px;border-radius:11px;
  background:rgba(0,0,0,.22);border:1px solid rgba(148,163,184,.12);
  font-size:.79rem;line-height:1.6;color:#c6d6e6;
  white-space:pre-wrap;word-break:break-word;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.pu-leiame-vazio{color:#7c93ab;font-style:italic}

.pu-formats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:16px}
.pu-format{
  min-height:62px;padding:9px 6px;cursor:pointer;
  border:1px solid rgba(125,165,211,.24);border-radius:11px;
  background:#17243a;color:#dcecff;font:700 .72rem Inter,Arial,sans-serif;
  transition:background .14s,border-color .14s,transform .14s;
}
.pu-format:hover,.pu-format:focus-visible{border-color:#60a5fa;background:#1c3150;transform:translateY(-1px)}
.pu-format span{display:block;margin-top:4px;color:#83a4c6;font-size:.61rem;font-weight:500}
.pu-note{margin-top:12px!important;font-size:.7rem!important;color:#7c93ab!important}

/* ── Os limites, um por linha ────────────────────────────────────────── */
.pu-limites{margin-top:14px;display:flex;flex-direction:column;gap:7px}
.pu-lim{display:flex;align-items:center;gap:10px}
.pu-lim-nome{
  flex:0 1 32%;min-width:0;font-size:.8rem;color:#cfdcea;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pu-lim-barra{
  flex:1;min-width:40px;height:6px;border-radius:3px;overflow:hidden;
  background:rgba(148,163,184,.18);
}
.pu-lim-barra i{display:block;height:100%;border-radius:3px;background:#38bdf8;transition:width .3s}
.pu-lim-cheia .pu-lim-barra i{background:#f59e0b}
.pu-lim-estourou .pu-lim-barra i{background:#ef4444}
.pu-lim-num{
  flex:0 0 auto;min-width:52px;text-align:right;
  font-size:.73rem;font-weight:600;color:#8fa6bd;font-variant-numeric:tabular-nums;
}
.pu-lim-cheia .pu-lim-num{color:#fbbf24}
.pu-lim-estourou .pu-lim-num{color:#fca5a5}
.pu-lim-inp{
  flex:0 0 62px;padding:6px 8px;text-align:center;
  border:1px solid rgba(125,165,211,.24);border-radius:9px;
  background:#17243a;color:#dcecff;font:600 .75rem Inter,Arial,sans-serif;outline:none;
}
.pu-lim-inp:focus{border-color:#60a5fa}
.pu-lim-inp::placeholder{color:#5f7793}
.pu-vazio{margin:14px 0 0!important;font-size:.78rem!important;color:#7c93ab!important}

/* ═══════════════════════════════════════════════════════════════════════
   TEMA CLARO
   ═══════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .pu-overlay{background:rgba(25,55,88,.32)}
html[data-theme="light"] .pu-dialog{
  background:#fff;color:#102a47;border-color:#ccdbeb;box-shadow:0 30px 84px rgba(34,72,108,.24);
}
html[data-theme="light"] .pu-head{background:linear-gradient(160deg,#e8f2ff,transparent 72%)}
html[data-theme="light"] .pu-kicker{color:#1d6ae5}
html[data-theme="light"] .pu-quadro{color:#607a94}
html[data-theme="light"] .pu-close{background:#f5f9fe;border-color:#d7e4f1;color:#3f6079}
html[data-theme="light"] .pu-close:hover{background:#e5eefa;color:#12509f}
html[data-theme="light"] .pu-stats{background:#dce8f5}
html[data-theme="light"] .pu-stat{background:#f7fbff}
html[data-theme="light"] .pu-stat b{color:#12263f}
html[data-theme="light"] .pu-stat span{color:#6b8299}
html[data-theme="light"] .pu-card{background:#f7faff;border-color:#dbe7f3}
html[data-theme="light"] .pu-card p{color:#607a94}
html[data-theme="light"] .pu-acao{background:#e6f4fe;border-color:#bfe1f8;color:#0369a1}
html[data-theme="light"] .pu-acao:hover{background:#d5ecfd;color:#025480}
html[data-theme="light"] .pu-leiame{background:#fff;border-color:#dbe7f3;color:#31506e}
html[data-theme="light"] .pu-leiame-vazio{color:#8299ae}
html[data-theme="light"] .pu-format{background:#fff;color:#164b82;border-color:#cbddef}
html[data-theme="light"] .pu-format:hover{background:#eef6ff;border-color:#5a9ced}
html[data-theme="light"] .pu-format span{color:#6b8299}
html[data-theme="light"] .pu-note{color:#7c92a8!important}
html[data-theme="light"] .pu-lim-nome{color:#31506e}
html[data-theme="light"] .pu-lim-barra{background:#dce8f5}
html[data-theme="light"] .pu-lim-num{color:#607a94}
html[data-theme="light"] .pu-lim-cheia .pu-lim-num{color:#a35d06}
html[data-theme="light"] .pu-lim-estourou .pu-lim-num{color:#c2334a}
html[data-theme="light"] .pu-lim-inp{background:#fff;color:#12263f;border-color:#cbddef}
html[data-theme="light"] .pu-lim-inp:focus{border-color:#2b6fe0}
html[data-theme="light"] .pu-lim-inp::placeholder{color:#96a9bc}
html[data-theme="light"] .pu-vazio{color:#7c92a8!important}

@media(max-width:620px){
  .pu-overlay{padding:0;align-items:flex-end}
  .pu-dialog{width:100%;max-height:93dvh;border-radius:20px 20px 0 0}
  .pu-head,.pu-body{padding-left:18px;padding-right:18px}
  .pu-stats{margin-left:18px;margin-right:18px}
  .pu-formats{grid-template-columns:repeat(2,1fr)}
  .pu-format:last-child{grid-column:1/-1}
  .pu-lim-nome{flex-basis:40%}
  .pu-lim-barra{display:none}
}