@charset "UTF-8";
/* Selector de acciones disponibles del form de dispositivo (UX-5).
 *
 * Cada acción es una "celda" con el toggle de Bootstrap arriba, la etiqueta
 * legible al lado y la ayuda debajo. Se apoya en el `<input type="checkbox">`
 * real (name="available_actions[]"), así que la serialización del form y el
 * backend no cambian: esto es solo presentación.
 *
 * El objetivo es que se lea de un vistazo qué está activo, que el ícono sea el
 * mismo que el de la pantalla del server, y que en mobile baje a una columna
 * sin que quede una lista de 11 checkboxes pelados.
 */
.device-actions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.5rem;
}

.device-action {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "toggle label" ".      help";
  align-items: center;
  column-gap: 0.6rem;
  row-gap: 0.15rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.5rem;
  background-color: rgba(255, 255, 255, 0.03);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* Estado activo: se resalta la celda entera, no solo el toggle. Es lo que hace
 * legible el "todo viene activado por defecto" de un vistazo. */
.device-action:has(> .form-check-input:checked) {
  border-color: rgba(255, 193, 7, 0.55);
  background-color: rgba(255, 193, 7, 0.08);
}

.device-action:hover {
  border-color: rgba(255, 255, 255, 0.28);
}

.device-action > .form-check-input {
  grid-area: toggle;
  margin: 0;
  flex: 0 0 auto;
  cursor: pointer;
}

.device-action > .form-check-label {
  grid-area: label;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  color: #f8f9fa;
  font-weight: 500;
  cursor: pointer;
}

.device-action__icon {
  width: 1.1rem;
  text-align: center;
  color: #ffc107;
  flex: 0 0 auto;
}

.device-action__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* La ayuda se alinea con la etiqueta (debajo del toggle) para no romper la
 * lectura en grid y no empujar la celda a que el texto quede largo. */
.device-action__help {
  grid-area: help;
  font-size: 0.78rem;
  line-height: 1.25;
  color: rgba(248, 249, 250, 0.6);
}

/* En pantallas chicas el label puede cortarse ("Restart service" con la celda
 * angosta): una sola columna y menos padding. */
@media (max-width: 576px) {
  .device-actions {
    grid-template-columns: 1fr;
  }
  .device-action {
    padding: 0.5rem 0.55rem;
  }
}

/*# sourceMappingURL=device-actions.css.map */