/* 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 { display: none; }
}