/* ---------------------------------------------------------------------------
   indicator-table.css — repeating row tables used in the indicadores block.
   Two variants: 4-col (current indicators) and 3-col (future indicators).
--------------------------------------------------------------------------- */

.ind-table {
  width: 100%;
  border: 1.5px solid var(--triage-border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 8px;
}

.ind-header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 32px;
  gap: 0;
  background: var(--refi-paper);
  border-bottom: 1px solid var(--triage-border);
  padding: 7px 10px;
  font-size: 10px;
  font-weight: 600;
  color: var(--triage-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ind-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 32px;
  gap: 0;
  border-bottom: 0.5px solid var(--triage-border);
  align-items: center;
}

.ind-row:last-child {
  border: none;
}

.ind-row input {
  border: none;
  border-right: 0.5px solid var(--triage-border);
  border-radius: 0;
  padding: 9px 10px;
  font-size: 13px;
  background: #fff;
}

.ind-row input:last-of-type {
  border-right: none;
}

.ind-row input:focus {
  border-color: var(--triage-moss-l);
  z-index: 1;
  position: relative;
}

.ind-row .del-btn {
  background: none;
  border: none;
  color: var(--triage-muted);
  cursor: pointer;
  font-size: 16px;
  padding: 0 8px;
  line-height: 1;
  transition: color 0.15s ease;
}

.ind-row .del-btn:hover {
  color: #c0392b;
}

/* Future indicators (3-col variant) */
.ind-header-fut {
  display: grid;
  grid-template-columns: 1fr 1fr 32px;
  gap: 0;
  background: var(--refi-paper);
  border-bottom: 1px solid var(--triage-border);
  padding: 7px 10px;
  font-size: 10px;
  font-weight: 600;
  color: var(--triage-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ind-row-fut {
  display: grid;
  grid-template-columns: 1fr 1fr 32px;
  gap: 0;
  border-bottom: 0.5px solid var(--triage-border);
  align-items: center;
}

.ind-row-fut:last-child {
  border: none;
}

.ind-row-fut input {
  border: none;
  border-right: 0.5px solid var(--triage-border);
  border-radius: 0;
  padding: 9px 10px;
  font-size: 13px;
  background: #fff;
}

.ind-row-fut .del-btn {
  background: none;
  border: none;
  color: var(--triage-muted);
  cursor: pointer;
  font-size: 16px;
  padding: 0 8px;
  line-height: 1;
  transition: color 0.15s ease;
}

.ind-row-fut .del-btn:hover {
  color: #c0392b;
}

/* Geografía (1 columna + borrar): cada fila es un <select> de lugar LATAM */
.ind-header-geo {
  display: grid;
  grid-template-columns: 1fr 32px;
  gap: 0;
  background: var(--refi-paper);
  border-bottom: 1px solid var(--triage-border);
  padding: 7px 10px;
  font-size: 10px;
  font-weight: 600;
  color: var(--triage-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ind-row-geo {
  display: grid;
  grid-template-columns: 1fr 32px;
  gap: 0;
  border-bottom: 0.5px solid var(--triage-border);
  align-items: center;
}

.ind-row-geo:last-child {
  border: none;
}

.ind-row-geo select {
  border: none;
  border-radius: 0;
  padding: 9px 10px;
  font-size: 13px;
  background: #fff;
  width: 100%;
}

.ind-row-geo .del-btn {
  background: none;
  border: none;
  color: var(--triage-muted);
  cursor: pointer;
  font-size: 16px;
  padding: 0 8px;
  line-height: 1;
  transition: color 0.15s ease;
}

.ind-row-geo .del-btn:hover {
  color: #c0392b;
}

.add-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--triage-moss);
  background: var(--triage-moss-p);
  border: 1.5px solid var(--triage-moss-l);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-top: 2px;
}

.add-btn:hover {
  background: var(--triage-moss);
  color: #fff;
}

.add-btn:disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

.ind-counter {
  font-size: 11px;
  color: var(--triage-muted);
  margin-top: 5px;
}

/* ─── Campos estandarizados (método multi-select · frecuencia select) ────────── */
/* La fila "actual" ahora tiene 1 input (indicador) + 2 widgets: hay que reponer el
   divisor del indicador (el :last-of-type se lo quitaba al ser el único input) y
   poner divisor a la derecha del método (columna intermedia). */
.ind-row input[data-field="texto"] { border-right: 0.5px solid var(--triage-border); }
.ind-row .ms-cell { border-right: 0.5px solid var(--triage-border); }

/* Frecuencia: <select> + campo "Otro" apilado */
.freq-cell { display: flex; flex-direction: column; justify-content: center; background: #fff; }
.freq-cell select { border: none; border-radius: 0; padding: 9px 10px; font-size: 13px; background: #fff; width: 100%; }
.freq-otro-input { border: 1px solid var(--triage-border); border-radius: 6px; padding: 7px 9px; font-size: 13px; margin: 0 8px 8px; }

/* Multi-select en celda: botón compacto + popover flotante */
.ms-cell { position: relative; background: #fff; }
.ms-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 6px;
  border: none; background: #fff; padding: 9px 10px; font-size: 13px; color: var(--triage-muted);
  text-align: left; cursor: pointer; }
.ms-cell.has-sel .ms-btn { color: var(--refi-ink); }
.ms-btn-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-chev { flex-shrink: 0; color: var(--triage-muted); font-size: 11px; }
.ms-panel { display: none; position: fixed; z-index: 200; max-height: 300px; overflow-y: auto;
  background: #fff; border: 1px solid var(--triage-border); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: 6px; min-width: 240px; }
.ms-cell.open .ms-panel { display: block; }
.ms-opt { display: flex; align-items: center; gap: 8px; padding: 7px 8px; font-size: 13px;
  color: var(--refi-ink); cursor: pointer; border-radius: 6px; line-height: 1.35; }
.ms-opt:hover { background: var(--refi-paper); }
.ms-opt input { width: 15px; height: 15px; flex-shrink: 0; margin: 0; cursor: pointer; }
.ms-otro-input { display: block; width: calc(100% - 16px); margin: 4px 8px 6px;
  border: 1px solid var(--triage-border); border-radius: 6px; padding: 7px 9px; font-size: 13px; }

/* ─── RESPONSIVE ─────────────────────────────────────────────────────────── */
/* En móvil las tablas de indicadores (3–4 columnas de inputs) no caben: se
   permite scroll horizontal dentro de la tabla con un ancho mínimo legible. */
@media (max-width: 600px) {
  .ind-table { overflow-x: auto; }
  .ind-header, .ind-row { min-width: 440px; }
  .ind-header-fut, .ind-row-fut { min-width: 330px; }
}