/* Aba 📝 Contratos — complementa styles.css, usando as mesmas variáveis de tema. */

#ctListaBox h3, .ct-form h3 { gap: 10px; flex-wrap: wrap }
.ct-barra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px }
.ct-barra .f { flex: 1 1 220px; min-width: 180px }
.chip-btn.ativo, .chip-btn.ct-destaque { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text) }
.chip-btn b { font-weight: 700; margin-left: 2px }
.ct-vazio { padding: 18px 4px }

.ct-lista td { vertical-align: top }
.ct-acoes { min-width: 230px }
.ct-acoes .chip-btn { margin: 0 2px 5px 0; display: inline-block; text-decoration: none }
.ct-sub, .ct-pgto { font-size: 11.5px; line-height: 1.45 }
.ct-pgto { display: inline-block; max-width: 260px }
tr.ct-novo > td { background: var(--accent-soft) }

.ct-st { display: inline-block; border-radius: 999px; padding: 3px 9px; font-size: 11.5px; font-weight: 600; white-space: nowrap; border: 1px solid var(--border); color: var(--muted) }
.ct-st.enviado { color: var(--accent-text); border-color: var(--accent); background: var(--accent-soft) }
.ct-st.visto { color: var(--amber); border-color: currentColor }
.ct-st.expirado { color: var(--red, #c0392b); border-color: currentColor }
.ct-st.assinado { color: var(--green); border-color: currentColor }
.ct-st.cancelado { text-decoration: line-through }
.ct-alerta { color: var(--amber) }

.ct-hist > td { background: var(--surface-2) }
.ct-linha-tempo { margin: 4px 0; padding-left: 18px; font-size: 12.5px; line-height: 1.5 }
.ct-linha-tempo li { margin-bottom: 6px }

.ct-form { margin-bottom: 16px }
.ct-secao { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; margin: 16px 0 8px }
.ct-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px }
.ct-grade .field, .ct-form .field { margin: 0 }
.ct-grade .ct-largo { grid-column: span 2 }
.ct-form .field > span { display: block; font-size: 11.5px; font-weight: 700; color: var(--muted); margin-bottom: 5px }
.ct-form .field > span small { font-weight: 500; color: var(--muted-2); margin-left: 4px }
.ct-form .ct-texto { margin-top: 10px }
.ct-ancora { font-size: 12px; margin: -2px 0 10px }
.ct-lead { position: relative; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.ct-lead .field { flex: 1 1 320px }
.ct-sugestoes { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; display: flex; flex-direction: column; background: var(--surface); border-radius: 10px; box-shadow: var(--shadow) }
.ct-sugestoes:empty { display: none }
.ct-sugestoes > span { padding: 10px 12px }
.ct-sug { text-align: left; border: 0; border-bottom: 1px solid var(--border); background: transparent; padding: 9px 12px; cursor: pointer; color: var(--text); font: inherit; font-size: 13px }
.ct-sug:hover { background: var(--surface-2) }

.ct-previa { background: var(--surface-2); border: 1px dashed var(--border); border-radius: 10px; padding: 12px 14px; margin: 16px 0 12px; font-size: 12.5px; line-height: 1.55 }
.ct-previa p { margin: 6px 0 }
.ct-previa-rot { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .3px }
.ct-falta { color: var(--amber); font-weight: 600; margin-top: 6px }
.ct-pronto { color: var(--green); font-weight: 600; margin-top: 6px }
.ct-botoes { display: flex; gap: 10px; align-items: center }

@media (max-width: 640px) {
  .ct-grade .ct-largo { grid-column: auto }
  .ct-acoes { min-width: 0 }
}