/* ==========================================================================
   Servicios de la Estación — BEM con design tokens
   ========================================================================== */

.est-srv {
  background: var(--gas-bg-secondary);
  border-radius: var(--gas-radius-md);
  padding: 0;
}

.est-srv__heading {
  margin: 0 0 12px;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--gas-text-primary);
}

/* Grid: 3 cols mobile, 3 cols desktop */
.est-srv__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

/* Individual box */
.est-srv__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 12px 6px 10px;
  border-radius: var(--gas-radius-md);
  background: #fff;
  gap: 6px;
}

/* Icon */
.est-srv__icon { line-height: 0; }
.est-srv__icon svg {
  width: 46px;
  height: 46px;
  fill: var(--gas-gray-500);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.06));
}

/* Name */
.est-srv__name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gas-text-primary);
  line-height: 1.3;
}

/* Status icon (check / question) */
.est-srv__status { line-height: 0; }
.est-srv__status svg { width: 32px; height: 32px; }

.est-srv__status--yes svg { filter: none; }
.est-srv__status--unknown svg { fill: var(--gas-gray-300); opacity: .5; }

/* Vote buttons */
.est-srv__vote {
  display: flex;
  gap: 4px;
  margin-top: 2px;
}

.est-srv__vote-btn {
  padding: 3px 14px;
  border-radius: 14px;
  border: 1.5px solid var(--gas-gray-200);
  background: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--gas-transition-fast);
  color: var(--gas-text-secondary);
  line-height: 1.4;
}
.est-srv__vote-btn:active { transform: scale(.96); }

.est-srv__vote-btn--yes:hover,
.est-srv__vote-btn--yes.is-selected {
  background: var(--gas-green);
  color: #fff;
  border-color: var(--gas-green);
}

.est-srv__vote-btn--no:hover,
.est-srv__vote-btn--no.is-selected {
  background: var(--gas-red);
  color: #fff;
  border-color: var(--gas-red);
}

/* Submit button */
.est-srv__submit {
  display: block;
  margin: 12px auto 0;
  padding: 10px 28px;
  border-radius: 20px;
  background: var(--gas-green);
  color: #fff;
  font-weight: 700;
  font-size: 0.875rem;
  border: none;
  box-shadow: inset 0 -2px 1px var(--gas-green-dark);
  cursor: pointer;
  transition: var(--gas-transition-fast);
}
.est-srv__submit:hover { filter: brightness(.95); }
.est-srv__submit:active { transform: scale(.98); }

/* Voted state */
.est-srv[data-voted="true"] .est-srv__box--votable {
  opacity: .7;
}