/* ---------------------------------------------------------------------------
   multiselect.css — pill chips (.mo / .mb) and Sí/No toggle (.sw / .sb).
--------------------------------------------------------------------------- */

.mo {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

/* El borde va a ink-30 (no al --triage-border de 15%): sobre el papel #FAF8F4 la
   píldora clarita se perdía contra el fondo. */
.mb {
  padding: 7px 14px;
  border: 1.5px solid var(--refi-ink-30);
  border-radius: 999px;
  font-size: 14.5px;
  color: var(--triage-soft);
  cursor: pointer;
  transition: all 0.15s ease;
  background: #fff;
  user-select: none;
}

.mb:hover {
  border-color: var(--triage-moss-l);
  color: var(--triage-moss);
}

.mb.sel {
  background: var(--triage-moss-p);
  border-color: var(--triage-moss);
  color: var(--triage-moss);
  font-weight: 500;
}

/* Required multiselect with no selection at submit time */
.mo.field-error {
  outline: 1.5px solid #c0392b;
  outline-offset: 4px;
  border-radius: 8px;
}

/* Sí/No toggle pair */
.sw {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.sb {
  flex: 1;
  padding: 10px;
  border: 1.5px solid var(--triage-border);
  border-radius: 14px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
  background: #fff;
}

.sb.yes {
  border-color: var(--triage-moss-l);
  background: var(--triage-moss-p);
  color: var(--triage-moss);
}

.sb.no {
  border-color: #FF971A;
  background: #FFF3E0;
  color: #FF971A;
}