/* =====================================================================
 * Modulo PAINEL DO CLIENTE (B.office): hub, espacos, resumo, ajustes e
 * assinatura. So classes novas; o resto vem do boffice.css.
 * ===================================================================== */

/* ---------------------------------------------------------------- comuns */
.ps-pn-h{ font-size:1.05rem; margin:0 0 1rem; font-weight:600; }
.ps-pn-h3{ font-size:.95rem; margin:0 0 .45rem; font-weight:600; }
.ps-pn-hr{ border:0; border-top:1px solid var(--ps-border); margin:1.3rem 0 1rem; opacity:1; }

/* Aviso em linha: icone + texto (e, como link, um "chamado" a direita). */
.ps-pn-note{
  display:flex; align-items:flex-start; gap:.6rem;
  padding:.75rem .9rem; border-radius:var(--ps-r);
  border:1px solid var(--ps-border); background:var(--ps-surface-2);
  font-size:.88rem; line-height:1.5; color:var(--ps-ink-2);
}
.ps-pn-note svg{ width:18px; height:18px; flex:none; margin-top:.1rem; color:var(--ps-ink-3); }
.ps-pn-note > span{ flex:1; min-width:0; }
.ps-pn-note.is-info{ background:var(--ps-grad-soft); border-color:var(--ps-border-strong); color:var(--ps-ink); }
.ps-pn-note.is-info svg{ color:var(--ps-mid); }
.ps-pn-note.is-warn{ background:rgba(245,158,11,.10); border-color:rgba(245,158,11,.35); color:var(--ps-ink); }
.ps-pn-note.is-warn svg{ color:var(--ps-late); }
.ps-pn-note.is-link{ text-decoration:none; align-items:center; transition:border-color .15s var(--ps-ease); }
.ps-pn-note.is-link:hover{ border-color:var(--ps-border-strong); color:var(--ps-ink); }
.ps-pn-note.is-link b{ flex:none; font-weight:600; font-size:.82rem; color:var(--ps-link); white-space:nowrap; }

/* Precos dos cartoes de plano. */
.ps-pn-plan-name{ font-size:.95rem; }
.ps-pn-tag{ margin:.15rem 0 .4rem; }
.ps-pn-price{ font-size:1.15rem; font-weight:700; margin:.2rem 0 .6rem; font-variant-numeric:tabular-nums; }
.ps-pn-price small{ font-size:.72rem; font-weight:500; color:var(--ps-ink-3); margin-left:.1rem; }
.ps-plan-pick.is-hl, .ps-bl-card.is-hl{ border-color:var(--ps-border-strong); box-shadow:0 10px 26px -18px rgba(79,14,230,.45); }

/* ---------------------------------------------------------------- hub */
.ps-hub-meta{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; min-width:0; }
.ps-hub-loc{ display:inline-flex; align-items:center; gap:.3rem; min-width:0; max-width:100%; }
.ps-hub-loc svg{ width:14px; height:14px; flex:none; opacity:.75; }
.ps-hub-meta .ps-space-cur{ font-size:.68rem; }
.ps-hub-state{ font-size:.74rem; font-weight:600; color:var(--ps-ink-3); }
.ps-hub-state.is-ok{ color:var(--ps-in); }
.ps-hub-state.is-soon{ color:#b26a00; }
.ps-hub-state.is-overdue{ color:var(--ps-out); }
[data-bs-theme="dark"] .ps-hub-state.is-soon{ color:var(--ps-late); }

/* ---------------------------------------------------------------- espacos */
.ps-pn-space{ display:inline-flex; align-items:center; gap:.55rem; font-weight:600; color:var(--ps-ink); text-decoration:none; }
.ps-pn-space:hover{ color:var(--ps-link); }
.ps-pn-space .ps-space-sq{ width:1.6rem; height:1.6rem; font-size:.78rem; }

/* ---------------------------------------------------------------- resumo */
.ps-ov{ display:flex; flex-direction:column; gap:1rem; }
.ps-ov-avisos{ display:flex; flex-direction:column; gap:.5rem; }

.ps-ov-atalhos{ display:flex; gap:.5rem; flex-wrap:wrap; }
.ps-ov-atalho{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.55rem .85rem; border-radius:999px;
  border:1px solid var(--ps-border); background:var(--ps-surface);
  color:var(--ps-ink); font-size:.86rem; font-weight:500; text-decoration:none;
  transition:border-color .15s var(--ps-ease), transform .15s var(--ps-ease);
}
.ps-ov-atalho svg{ width:17px; height:17px; color:var(--ps-mid); }
.ps-ov-atalho:hover{ border-color:var(--ps-border-strong); color:var(--ps-ink); transform:translateY(-1px); }
.ps-ov-atalho.is-main{ background:var(--ps-btn-bg, var(--ps-ink)); border-color:transparent; color:var(--ps-btn-fg, #fff); }
.ps-ov-atalho.is-main svg{ color:inherit; }
.ps-ov-atalho.is-main:hover{ color:var(--ps-btn-fg, #fff); }

.ps-ov-grid{ display:grid; gap:1rem; grid-template-columns:1fr; }
@media (min-width:768px){ .ps-ov-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:1200px){ .ps-ov-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } }

.ps-ov-card{
  background:var(--ps-surface); border:1px solid var(--ps-border);
  border-radius:var(--ps-r-lg); padding:1.1rem 1.2rem; min-width:0;
}
.ps-ov-card-h{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin:0 0 .45rem; }
.ps-ov-k{ font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ps-ink-3); font-weight:600; }
.ps-ov-more{ font-size:.82rem; font-weight:500; text-decoration:none; color:var(--ps-link); white-space:nowrap; }
.ps-ov-v{ font-size:1.12rem; font-weight:700; margin:0 0 .5rem; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.ps-ov-v .ps-pill{ font-size:.66rem; }
.ps-ov-v.is-txt{ font-size:.95rem; font-weight:600; }
.ps-ov-horas{ margin-top:.6rem; }
.ps-ov-horas .ps-quota-head{ display:flex; justify-content:space-between; gap:.5rem; font-size:.84rem; margin-bottom:.35rem; }
.ps-ov-horas .ps-quota-bar{ height:7px; }

.ps-ov-vazio{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; flex-wrap:wrap;
  padding:.6rem 0 .1rem; }
.ps-ov-vazio p{ margin:0; color:var(--ps-ink-3); font-size:.88rem; }
.ps-ov-itens{ list-style:none; margin:0; padding:0; }
.ps-ov-itens li + li{ border-top:1px solid var(--ps-border); }
.ps-ov-item{
  display:flex; align-items:center; gap:1rem; padding:.7rem 0;
  color:var(--ps-ink); text-decoration:none;
}
.ps-ov-item:hover .ps-ov-oque b{ color:var(--ps-link); }
.ps-ov-quando{ display:flex; flex-direction:column; min-width:7.5rem; font-size:.86rem; }
.ps-ov-quando b{ font-weight:600; }
.ps-ov-quando .ps-num{ color:var(--ps-ink-3); font-size:.8rem; }
.ps-ov-oque{ display:flex; flex-direction:column; flex:1; min-width:0; font-size:.9rem; }
.ps-ov-oque b{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ps-ov-oque .ps-hint{ margin:0; font-size:.78rem; }
.ps-ov-item .ps-pill{ flex:none; font-size:.66rem; }
@media (max-width:575.98px){
  .ps-ov-item{ flex-wrap:wrap; gap:.35rem .8rem; }
  .ps-ov-quando{ min-width:0; flex-direction:row; gap:.5rem; align-items:baseline; width:100%; }
}

/* ---------------------------------------------------------------- ajustes */
.ps-pn-sethead{ text-align:left; padding-top:0; margin-top:0; }
.ps-pn-unitline{ display:flex; align-items:center; gap:.4rem; margin:.4rem 0 .2rem; }
.ps-pn-unitline svg{ width:15px; height:15px; flex:none; }
.ps-pn-unitline a{ margin-left:.3rem; }
.ps-pn-danger{ border-color:rgba(245,71,107,.45); }
.ps-pn-teamhead{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.ps-pn-teamhead .ps-pill{ flex:none; font-variant-numeric:tabular-nums; }
.ps-edit-sum .ps-pill{ font-size:.62rem; margin-left:.35rem; }
.ps-acoes-linha .ps-chip-btn.is-danger svg{ width:15px; height:15px; }
.ps-pn-filtro{ width:100%; }
.ps-pn-filtro-q{ flex:1 1 12rem; min-width:11rem; }
.ps-pn-act-dia{ font-size:.62rem; margin:.9rem 0 .4rem; }
.ps-pn-act-li{ display:flex; gap:.55rem; align-items:center; font-size:.9rem; padding:.25rem 0; }
.ps-pn-act-h{ font-size:.75rem; min-width:2.6rem; }

/* ---------------------------------------------------------------- assinatura */
.ps-bl{ max-width:72rem; margin:0 auto; }
.ps-bl-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; flex-wrap:wrap; }
.ps-bl-plan{ font-size:1.25rem; margin:0 0 .2rem; display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; }
.ps-bl-plan .ps-pill{ font-size:.62rem; }
.ps-bl-price{ text-align:right; }
.ps-bl-price b{ display:block; font-size:1.65rem; font-weight:700; letter-spacing:-.02em; line-height:1.1; }
.ps-bl-price span{ font-size:.78rem; color:var(--ps-ink-3); }
.ps-bl-feats{ margin:1rem 0 0; display:grid; grid-template-columns:1fr; gap:.4rem .9rem; }
@media (min-width:768px){ .ps-bl-feats{ grid-template-columns:1fr 1fr; } }
.ps-bl-acts{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.ps-bl-acts .btn svg{ width:15px; height:15px; vertical-align:-2px; }
.ps-bl-card{ display:flex; flex-direction:column; }
.ps-bl-card .ps-plan-feats{ flex:1; }
.ps-bl-trial{ display:inline-block; margin:-.3rem 0 .6rem; padding:.15rem .55rem; border-radius:999px;
  background:var(--ps-grad-soft); color:var(--ps-ink); font-size:.74rem; font-weight:600; }
.ps-bl-lock{ display:flex; gap:.35rem; align-items:flex-start; margin:0; }
.ps-bl-lock svg{ width:14px; height:14px; flex:none; margin-top:.15rem; }

/* Modal de confirmacao da troca de plano. */
.ps-modal-plan .ps-modal-box{ max-width:26rem; text-align:center; }
.ps-modal-plan .ps-modal-title{ text-align:center; }
.ps-modal-plan .ps-modal-text{ text-align:center; color:var(--ps-ink-2); line-height:1.6; }
.ps-modal-plan .ps-modal-acts{ justify-content:center; }
.ps-plan-illo{ width:4.2rem; height:4.2rem; margin:.2rem auto 1rem; display:grid; place-items:center;
  border-radius:50%; background:var(--ps-surface-2); border:1px solid var(--ps-border); color:var(--ps-mid); }
.ps-plan-illo svg{ width:1.9rem; height:1.9rem; }

/* ---------------------------------------------------------------- barra inferior
   Seis destinos num celular de 390px: "Appointments", "Your calendar" e
   "Atendimentos" nao cabiam e saiam cortados com reticencias. Sem recuo
   lateral e com as letras um pouco mais juntas a linha cabe; rotulo de duas
   palavras quebra em duas linhas; em telas menores a letra diminui. */
@media (max-width:991.98px){
  /* icones alinhados no topo: um rotulo de duas linhas nao empurra o seu */
  .ps-bottomnav .ps-bn-item{ padding-left:0; padding-right:0; justify-content:flex-start; }
  /* min-content: rotulo de duas palavras quebra ("Your / calendar") e deixa
     espaco entre um rotulo e outro; palavra unica fica numa linha so. */
  .ps-bottomnav .ps-bn-item span{
    width:min-content; max-width:100%; white-space:normal; text-overflow:clip;
    text-align:center; line-height:1.05; letter-spacing:-.02em;
  }
}
@media (max-width:430px){
  .ps-bottomnav .ps-bn-item span{ font-size:.6rem; }
}
@media (max-width:375px){
  .ps-bottomnav .ps-bn-item span{ font-size:.55rem; }
}