/* contratos.css — Módulo Contratos (Resumen, Sostenimiento, Suministro). Reusa cl-* (Clientes) y cp-* (Control+).
   Celular primero: toques de 44-48 px, nada de tablas anchas, todo con min-width:0 para no desbordar. */

/* ── Resumen ─────────────────────────────────────────────────────────────── */
.ct-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.ct-cifras > div { min-width: 0; background: #fff; border: 1px solid #e1e6ee; border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.ct-cifras b { font-size: 22px; color: var(--azul, #1B3A5C); overflow-wrap: anywhere; }
.ct-cifras span { font-size: 12.5px; color: #5b6b80; line-height: 1.35; }
.ct-cifras .alerta { border-color: #f1c48a; background: #fff8ee; }
.ct-cifras .alerta b { color: #a05a00; }

.ct-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 12px; margin-bottom: 16px; }
.ct-tipo { min-width: 0; background: #fff; border: 1px solid #e1e6ee; border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; border-top: 4px solid #9aa7b4; }
.ct-tipo.sostenimiento { border-top-color: #2e7d5b; }
.ct-tipo.controlplus { border-top-color: #1B3A5C; }
.ct-tipo.suministro { border-top-color: #b26a00; }
.ct-tipo header { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ct-tipo header h3 { margin: 0; font-size: 17px; flex: 1 1 auto; min-width: 0; color: #1d2b3c; }
.ct-tipo-i { font-size: 20px; }
.ct-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 6px; }
.ct-tile { min-width: 0; min-height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border: 1px solid #e1e6ee; background: #f8fafc; border-radius: 10px; cursor: pointer; font: inherit; padding: 6px 4px; }
.ct-tile:hover { background: #eef4fa; }
.ct-tile b { font-size: 20px; color: #1d2b3c; }
.ct-tile span { font-size: 11.5px; color: #5b6b80; }
.ct-tile.fuerte { background: #eef6f1; border-color: #cfe5d8; }
.ct-tile.fuerte b { color: #1e7e34; }
.ct-plata { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; background: #f4f9fe; border: 1px solid #cfe0f1; border-radius: 10px; padding: 10px 12px; }
.ct-plata span { font-size: 12px; color: #4a5a70; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; flex: 1 1 100%; }
.ct-plata b { font-size: 20px; color: var(--azul, #1B3A5C); }
.ct-plata small { font-size: 12.5px; color: #5b6b80; }
.ct-mini { margin: 0; padding: 8px 10px; font-size: 13px; }
.ct-falta { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ct-falta li { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 8px; font-size: 13.5px; background: #f8fafc; min-width: 0; }
.ct-falta li span { min-width: 0; overflow-wrap: anywhere; color: #33415a; }
.ct-falta li b { flex: 0 0 auto; font-size: 12.5px; }
.ct-falta li.ok b { color: #1e7e34; }
.ct-falta li.mal { background: #fff4f2; }
.ct-falta li.mal b { color: #b3261e; }
.ct-falta li.gris b { color: #8a96a8; font-weight: 500; }
.ct-rojo { color: #b3261e; }

/* ── Sostenimiento: alcance ──────────────────────────────────────────────── */
.ct-fichas { display: flex; flex-wrap: wrap; gap: 8px; }
.ct-ficha-t { min-height: 44px; padding: 8px 14px; border: 1px solid #d9dfe7; background: #fff; border-radius: 999px; font: inherit; font-size: 14px;
  color: #33415a; cursor: pointer; max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: left; }
.ct-ficha-t.on { background: #e9f4ee; border-color: #8cc5a4; color: #1e5e3a; font-weight: 600; }
.ct-ficha-t:disabled { cursor: default; opacity: .85; }
.ct-otro { display: flex; gap: 8px; margin-top: 10px; min-width: 0; }
.ct-otro input { flex: 1 1 auto; min-width: 0; min-height: 44px; font-size: 16px; padding: 8px 12px; border: 1px solid #d9dfe7; border-radius: 10px; }
.ct-otro .btn { flex: 0 0 auto; min-height: 44px; }
.cl-sec.ct-falta-sec { border-left: 3px solid #f1c48a; }

.ct-eqs { display: flex; flex-direction: column; gap: 8px; }
.ct-eq { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; min-width: 0; }
.ct-eq > input { min-width: 0; width: 100%; min-height: 46px; font-size: 16px; padding: 8px 12px; border: 1px solid #d9dfe7; border-radius: 10px; background: #fff; }
.ct-eq-x { width: 44px; height: 44px; border: 1px solid #e6c9c6; background: #fff; color: #b3261e; border-radius: 10px; font-size: 16px; cursor: pointer; }

.ct-conts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.ct-cont-f { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ct-cont-f > span { font-size: 13.5px; color: #33415a; font-weight: 600; }
.ct-cont-f > span small { font-weight: 400; color: #5b6b80; }
.ct-cont-f.falta .ct-cont { border-color: #f1c48a; }
.ct-cont-f .ct-cont { align-self: flex-start; }   /* en columna flex se estiraba a todo el ancho */
.ct-cont { display: inline-grid; grid-template-columns: 48px minmax(52px, 72px) 48px; border: 1px solid #d9dfe7; border-radius: 12px; overflow: hidden; background: #fff; max-width: 100%; }
.ct-cont button { border: 0; background: #f4f8fc; font-size: 22px; color: var(--azul, #1B3A5C); cursor: pointer; min-height: 48px; }
.ct-cont button:active { background: #dde9f5; }
.ct-cont button:disabled { color: #b7c0cc; cursor: default; }
.ct-cont input { border: 0; border-left: 1px solid #e1e6ee; border-right: 1px solid #e1e6ee; text-align: center; font-size: 17px; font-weight: 600; min-width: 0; width: 100%; background: #fff; }
.ct-cont.sm { grid-template-columns: 44px 56px 44px; }
.ct-cont.sm button { min-height: 44px; font-size: 20px; }

/* 5 pasos: en el celular los pasos se vuelven compactos (solo número + título). */
@media (max-width: 600px) {
  .ct-cifras { grid-template-columns: minmax(0, 1fr); }
  .ct-cifras > div { flex-direction: row; align-items: baseline; gap: 8px; }
  .ct-cifras b { font-size: 19px; }
  .ct-kpis { grid-template-columns: minmax(0, 1fr); }
  .ct-eq { grid-template-columns: minmax(0, 1fr) auto; }
  .ct-eq .ct-eq-x { grid-column: 2; grid-row: 1; }
  .ct-eq .ct-cont { grid-column: 1 / -1; justify-self: start; }
  .ct-pasos5 .cl-paso-t small, .ct-pasos6 .cl-paso-t small { display: none; }
}

/* ── Pasos con «Anexos» al final: Sostenimiento 6 (3+3), Control+ 5 (5 en pantalla ancha, 3+2 si no) ── */
@media (min-width: 901px) {
  .cl-pasos.ct-pasos6, .cl-pasos.ct-pasos5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .cl-pasos.ct-pasos5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ── Anexos y adjuntos de un contrato (los tres tipos) ─────────────────────── */
.cta-subir { background: #f8fafc; border: 1px solid #e1e6ee; border-radius: 12px; padding: 12px; margin-bottom: 12px; min-width: 0; }
.cta-cats { flex-wrap: wrap; margin-bottom: 8px; }
.cta-cats button { flex: 1 1 auto; white-space: nowrap; min-height: 44px; }   /* base auto: en el celular se reparten en filas */
.cta-lista { display: flex; flex-direction: column; gap: 8px; }
.cta-fila { display: flex; align-items: flex-start; gap: 10px; background: #fff; border: 1px solid #e1e6ee; border-radius: 12px; padding: 10px 12px; min-width: 0; }
.cta-fila.editando { flex-direction: column; align-items: stretch; background: #f8fafc; }
.cta-ic { font-size: 22px; line-height: 1; padding-top: 2px; }
.cta-txt { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cta-txt b { color: #1d2b3c; font-size: 14.5px; overflow-wrap: anywhere; }
.cta-txt small { color: #5b6b80; font-size: 12px; overflow-wrap: anywhere; }
.cta-txt p { margin: 4px 0 2px; font-size: 13px; color: #34445a; white-space: pre-wrap; overflow-wrap: anywhere; }
.cta-txt .cta-quien { color: #8391a5; }
.cta-acc { display: flex; gap: 6px; flex: 0 0 auto; }
.cta-acc .btn { min-width: 40px; min-height: 40px; }
@media (max-width: 600px) {
  .cta-fila:not(.editando) { flex-wrap: wrap; }
  .cta-acc { flex-basis: 100%; justify-content: flex-end; }
}