/* controlplus.css — lo propio de «Contratos Control+»; el resto reusa las clases de Clientes (cl-*). */
.cp-letras { font-size: 12.5px; color: #5b6b80; margin: -4px 0 4px; line-height: 1.45; overflow-wrap: anywhere; }
.cp-letras i { font-style: normal; color: #33415a; }
.cp-total { display: flex; flex-direction: column; gap: 2px; border: 1px solid #cfe0f1; background: #f4f9fe; border-radius: 10px; padding: 12px 14px; margin-top: 4px; }
.cp-total span { font-size: 12px; font-weight: 600; color: #4a5a70; text-transform: uppercase; letter-spacing: .04em; }
.cp-total b { font-size: 22px; color: var(--azul); }
.cp-total small { font-size: 12.5px; color: #5b6b80; line-height: 1.4; overflow-wrap: anywhere; }
.cp-meses button { min-height: 46px; }
.cp-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
/* Los botones que llevan el nombre del cliente pueden ser largos: que partan en dos renglones
   antes que desbordar la tarjeta en el celular. */
.cp-botones .btn { min-height: 44px; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.cp-botones.sm { margin-top: 8px; }
.cp-botones.sm .btn { min-height: 38px; }
@media (max-width: 600px) {
  .cp-botones > .btn { flex: 1 1 100%; }
  .cp-botones.sm > .btn { flex: 1 1 45%; }
}

/* ── Pantalla del ⚙ «Modelo del contrato» ─────────────────────────────────── */
.cl-estado-guardado.pend { color: #a05a00; font-weight: 600; }

.cp-marcadores { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 10px; }
.cp-marcadores > span { font-size: 12.5px; color: #5b6b80; margin-right: 2px; }
.cp-marcador { min-height: 34px; padding: 4px 10px; border: 1px solid #cfe0f1; background: #f4f9fe; color: #33415a;
  border-radius: 999px; font: inherit; font-size: 12px; cursor: pointer; }
.cp-marcador:hover { background: #e7f1fb; }
.cp-marcador:disabled { opacity: .5; cursor: default; }

.cp-ayuda { margin-bottom: 8px; }
.cp-ayuda-t { min-height: 38px; padding: 6px 12px; border: 1px solid #d9dfe7; background: #fff; border-radius: 9px;
  font: inherit; font-size: 13px; color: #33415a; cursor: pointer; }
.cp-ayuda-t::after { content: ' ▾'; }
.cp-ayuda.abierta .cp-ayuda-t::after { content: ' ▴'; }
.cp-ayuda-c { display: none; border: 1px solid #e1e6ee; border-radius: 10px; background: #fbfcfe; padding: 10px 12px; margin-top: 8px; }
.cp-ayuda.abierta .cp-ayuda-c { display: block; }
.cp-ayuda-c ul { margin: 0 0 0 18px; font-size: 13px; line-height: 1.6; color: #44546b; }
.cp-ayuda-c b { color: #1d2b3c; }

/* `.content textarea.cp-texto`: ds.css gana por especificidad a un `.cp-texto` pelado y dejaría
   el contrato en una caja de 2 renglones con la fuente de los demás campos. */
.content textarea.cp-texto { width: 100%; min-height: 55vh; resize: vertical; border: 1px solid #d9dfe7; border-radius: 10px;
  padding: 12px; background: #fff; color: #1d2b3c;
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.6;
  white-space: pre-wrap; overflow-wrap: anywhere; }
.content textarea.cp-texto:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(27,58,92,.08); }
.content textarea.cp-texto:disabled { background: #f6f8fa; color: #5b6b80; }

@media (max-width: 600px) {
  .content textarea.cp-texto { min-height: 60vh; font-size: 12.5px; padding: 10px; }
  .cp-marcador { font-size: 11.5px; }
}