/* ==========================================================================
   v6.2 — CONTRATOS E TERMOS DE USO.
   O editor de texto (ed-), os modelos e o contrato no chamado (ct-) e os
   termos de uso (tu-), nos dois painéis. O resto vem do boffice.css
   (cartões, campos, pílulas, abas) e do m-atd.css (filtros).
   ========================================================================== */

/* ---------------------------------------------------------------- editor */
.ed{ border:1px solid var(--ps-border); border-radius:var(--ps-r); background:var(--ps-surface); }
.ed.has-error{ border-color:var(--ps-danger); }
.ed:focus-within{ border-color:var(--ps-border-strong); box-shadow:0 0 0 3px rgba(var(--ps-accent-rgb),.18); }
.ed-tb{
  position:sticky; top:0; z-index:3; display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .5rem;
  padding:.45rem .5rem; border-bottom:1px solid var(--ps-border); background:var(--ps-surface-2);
  border-radius:var(--ps-r) var(--ps-r) 0 0;
}
.ed-grupo{ display:flex; gap:.15rem; padding-right:.5rem; border-right:1px solid var(--ps-border); }
.ed-grupo:last-of-type{ border-right:0; }
.ed-bt{
  display:inline-flex; align-items:center; justify-content:center; gap:.3rem; min-width:2.05rem; height:2.05rem;
  padding:0 .45rem; border:1px solid transparent; border-radius:8px; background:transparent; color:var(--ps-ink-2);
  font-size:.84rem; line-height:1; cursor:pointer; transition:background .12s, border-color .12s, color .12s;
}
.ed-bt svg{ width:16px; height:16px; flex:none; }
.ed-bt:hover{ background:var(--ps-surface); border-color:var(--ps-border); color:var(--ps-ink); }
.ed-bt:focus-visible{ outline:2px solid var(--ps-ring); outline-offset:1px; }
.ed-bt-txt b{ font-weight:700; }
.ed-bt-txt .ed-menor{ font-size:.78rem; }

/* "Inserir campo": um menu que abre por cima do texto. */
.ed-campos{ position:relative; margin-left:auto; }
.ed-campos > summary{ list-style:none; }
.ed-campos > summary::-webkit-details-marker{ display:none; }
.ed-bt-campo{ border-color:var(--ps-border-strong); background:var(--ps-surface); color:var(--ps-ink); font-weight:600; padding:0 .7rem; }
.ed-campos[open] > .ed-bt-campo{ background:var(--ps-ink); color:var(--ps-surface); border-color:var(--ps-ink); }
[data-bs-theme="dark"] .ed-campos[open] > .ed-bt-campo{ background:var(--ps-mid); color:#111117; border-color:var(--ps-mid); }
.ed-campos-menu{
  position:absolute; right:0; top:calc(100% + .35rem); z-index:20; width:min(19rem, 86vw); max-height:min(26rem, 60vh);
  overflow:auto; padding:.4rem; background:var(--ps-surface); border:1px solid var(--ps-border);
  border-radius:var(--ps-r); box-shadow:var(--ps-shadow-lg);
}
.ed-campos-g{ margin:.5rem .5rem .2rem; font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ps-ink-3); }
.ed-campos-g:first-child{ margin-top:.2rem; }
.ed-campos-it{
  display:block; width:100%; text-align:left; padding:.42rem .55rem; border:0; border-radius:8px;
  background:transparent; color:var(--ps-ink); font-size:.86rem; cursor:pointer;
}
.ed-campos-it:hover, .ed-campos-it:focus-visible{ background:var(--ps-surface-2); outline:none; }

.ed-area{
  min-height:22rem; max-height:70vh; overflow:auto; padding:1.1rem 1.3rem 1.4rem; outline:none;
  color:var(--ps-ink); font-size:.93rem; line-height:1.7;
}
.ed-area h2{ margin-top:1.4rem; }
.ed-area > :first-child{ margin-top:0; }
.ed-area hr{ margin:1.2rem 0; }
/* A etiqueta do campo: não se edita por dentro, apaga inteira. */
.ed-campo{
  display:inline-block; padding:0 .4rem; margin:0 .05rem; border-radius:6px; line-height:1.55;
  background:rgba(var(--ps-accent-rgb),.22); border:1px solid rgba(var(--ps-accent-rgb),.55);
  color:var(--ps-ink); font-size:.86em; font-weight:600; white-space:nowrap; cursor:default; user-select:all;
}
.ed-campo.is-bad{ background:rgba(217,45,85,.12); border-color:var(--ps-danger); color:var(--ps-danger); }

/* --------------------------------------------------------- modelos */
.ct-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(17rem, 1fr)); gap:.8rem; }
.ct-card{ display:flex; flex-direction:column; gap:.75rem; margin:0; }
.ct-card-h{ display:flex; gap:.7rem; align-items:flex-start; }
.ct-card-ic, .ct-painel-ic, .tu-gate-ic{
  width:2.4rem; height:2.4rem; flex:none; border-radius:11px; display:grid; place-items:center;
  background:var(--ps-grad-soft); color:var(--ps-mid); border:1px solid var(--ps-border);
}
.ct-card-ic svg, .ct-painel-ic svg, .tu-gate-ic svg{ width:19px; height:19px; }
.ct-card-txt{ min-width:0; }
.ct-card-name{ font-size:.98rem; font-weight:650; margin:0 0 .15rem; }
.ct-card-name a{ color:var(--ps-ink); text-decoration:none; }
.ct-card-name a:hover{ text-decoration:underline; }
.ct-card-plans{ display:flex; flex-wrap:wrap; gap:.3rem; }
.ct-card-acts{ display:flex; flex-wrap:wrap; gap:.35rem; margin-top:auto; padding-top:.6rem; border-top:1px solid var(--ps-border); }
.ct-cov{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.4rem; font-size:.9rem; }
.ct-cov li{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem .5rem; padding:.45rem 0; border-bottom:1px dashed var(--ps-border); }
.ct-cov li:last-child{ border-bottom:0; }
.ct-cov-arrow{ color:var(--ps-ink-3); }
.ct-planos{ display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; margin-bottom:.4rem; }
.ct-form-acts{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.1rem; }
.ct-form-acts .btn svg{ width:16px; height:16px; vertical-align:-3px; }

/* ------------------------------------------------- o contrato no chamado */
/* Ícone solto no texto (link do validador, "PDF gerado"): do tamanho da letra. */
.ct-painel svg, .ct-cli svg, .tu-status svg, .tu-form svg, .ct-form svg{ width:16px; height:16px; vertical-align:-3px; flex:none; }
.ps-hint > svg{ width:14px; height:14px; vertical-align:-2px; }
.ct-painel, .ct-cli{ border-left:3px solid var(--ps-accent); }
.ct-painel-h{ display:flex; align-items:center; gap:.75rem; margin-bottom:.8rem; }
.ct-painel-tit{ flex:1; min-width:0; }
.ct-painel-h > .ps-pill{ white-space:nowrap; }
.ct-passo{ font-size:.9rem; color:var(--ps-ink-2); }
.ct-passo a{ white-space:nowrap; }
.ct-passo svg, .ct-aviso svg{ width:16px; height:16px; vertical-align:-3px; }
.ct-passo.is-ok{ color:var(--ps-in); font-weight:600; }
.ct-sub{ font-size:.8rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ps-ink-3); margin:1rem 0 .5rem; }
.ct-gerar{ max-width:46rem; }
.ct-gerar .btn svg{ width:16px; height:16px; vertical-align:-3px; }
.ct-anexos{ list-style:none; padding:0; margin:0 0 .8rem; display:flex; flex-direction:column; gap:.6rem; }
.ct-anexo{ padding:.8rem .9rem; border:1px solid var(--ps-border); border-radius:var(--ps-r); background:var(--ps-surface-2); }
.ct-anexo.is-last{ border-color:var(--ps-border-strong); background:var(--ps-surface); }
.ct-anexo-h{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:.2rem .8rem; margin-bottom:.45rem; font-size:.9rem; }
.ct-anexo-h a{ font-weight:600; }
.ct-anexo-h svg{ width:15px; height:15px; vertical-align:-2px; }
.ct-aviso{ margin:0 0 .35rem; font-size:.86rem; }
.ct-aviso.is-ok{ color:var(--ps-in); }
.ct-aviso.is-warn{ color:var(--ps-late); }
.ct-aviso.is-bad{ color:var(--ps-danger); font-weight:600; }
.ct-assinaturas{ list-style:none; padding:0; margin:.2rem 0 .6rem; display:flex; flex-direction:column; gap:.35rem; }
.ct-assinaturas li{ display:flex; flex-wrap:wrap; align-items:center; gap:.2rem .55rem; font-size:.88rem; }
.ct-assinaturas li > svg{ width:16px; height:16px; color:var(--ps-ink-3); flex:none; }
.ct-assinaturas .ps-muted{ font-size:.8rem; }
.ct-confirmar{ margin-top:.4rem; }
.ct-confirmar .btn svg{ width:15px; height:15px; vertical-align:-2px; }

/* O passo a passo do cliente. */
.ct-passos{ margin:0; padding:0; list-style:none; counter-reset:ct; display:flex; flex-direction:column; gap:.75rem; }
.ct-passos li{
  counter-increment:ct; position:relative; padding-left:2.4rem; display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .7rem;
}
.ct-passos li::before{
  content:counter(ct); position:absolute; left:0; top:-.05rem; width:1.7rem; height:1.7rem; border-radius:50%;
  display:grid; place-items:center; font-size:.82rem; font-weight:700; background:var(--ps-ink); color:var(--ps-surface);
}
[data-bs-theme="dark"] .ct-passos li::before{ background:var(--ps-mid); color:#111117; }
.ct-passos li > b{ flex:1 1 100%; font-weight:600; }
.ct-passos li > .ps-hint{ flex:1 1 100%; margin:-.2rem 0 0; }
.ct-passos .btn svg{ width:15px; height:15px; vertical-align:-2px; }
.ct-table td .ps-tx-meta{ font-size:.78rem; }

/* ---------------------------------------------------------- termos de uso */
.tu-nums{ display:flex; flex-wrap:wrap; gap:1rem 2.2rem; }
.tu-nums > div{ display:flex; flex-direction:column; }
.tu-num{ font-family:var(--ps-font-display); font-size:1.55rem; font-weight:700; line-height:1.1; color:var(--ps-ink); }
.tu-num.is-warn{ color:var(--ps-late); }
.tu-versoes{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; }
.tu-versoes li{ display:flex; flex-wrap:wrap; align-items:center; gap:.25rem .7rem; padding:.6rem 0; border-bottom:1px solid var(--ps-border); font-size:.9rem; }
.tu-versoes li:last-child{ border-bottom:0; }
.tu-v-resumo{ flex:1 1 100%; color:var(--ps-ink-2); font-size:.85rem; }
.tu-texto{ max-width:46rem; }
.tu-texto > :first-child{ margin-top:0; }

/* A tela de aceite do titular. */
.tu-gate{ max-width:52rem; margin:0 auto; }
.tu-gate-h{ display:flex; gap:.9rem; align-items:flex-start; margin:0 0 1rem; }
.tu-gate-t{ font-size:1.35rem; font-weight:700; margin:0 0 .25rem; letter-spacing:-.01em; }
.tu-gate-card{ padding:0; overflow:hidden; }
.tu-gate-meta{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.3rem 1rem; padding:.75rem 1.25rem;
  border-bottom:1px solid var(--ps-border); background:var(--ps-surface-2); font-size:.85rem; color:var(--ps-ink-3);
}
.tu-gate-meta a svg{ width:15px; height:15px; vertical-align:-2px; }
.tu-gate-texto{ max-width:none; max-height:min(52vh, 34rem); overflow:auto; padding:1.2rem 1.4rem; }
.tu-gate-texto:focus-visible{ outline:2px solid var(--ps-ring); outline-offset:-2px; }
.tu-gate-form{ padding:1rem 1.25rem 1.2rem; border-top:1px solid var(--ps-border); }
.tu-gate-acts{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.8rem; }
.tu-gate-acts .btn svg{ width:16px; height:16px; vertical-align:-3px; }

@media (max-width:575.98px){
  .ed-tb{ gap:.2rem .3rem; }
  .ed-grupo{ padding-right:.3rem; }
  .ed-campos{ margin-left:0; flex:1 1 100%; }
  .ed-bt-campo{ width:100%; }
  .ed-campos-menu{ left:0; right:auto; width:100%; }
  .ed-area{ padding:.9rem 1rem 1.2rem; min-height:18rem; }
  .ct-painel-h{ flex-wrap:wrap; }
  .tu-gate-texto{ padding:1rem; }
}