*, *::before, *::after { min-width: 0; }
html, body { max-width: 100%; overflow-x: hidden; }
.shell, .card, .dashboard-section, .device, .device-head, .command-status { max-width: 100%; }
.command-status, .device-meta, .field-help, p, small, strong { overflow-wrap: anywhere; }
.map-button, button { white-space: normal; }
.location-accuracy-note { display: block; margin-top: 8px; color: #a8afa5; line-height: 1.45; text-align: left; }
.feature-status { display: inline-flex; align-items: center; border: 1px solid #3b423a; border-radius: 999px; padding: 10px 14px; color: #a8afa5; background: #111411; font-size: .82rem; }
.feature-status-block { display: grid; gap: 6px; border: 1px dashed #485046; border-radius: 14px; padding: 14px; background: #0d100d; }
.feature-status-block strong { color: #cbd0c8; }
.feature-status-block small { margin: 0; text-align: left; }

@media (max-width: 760px) {
  .shell { padding-left: 14px; padding-right: 14px; }
  .device { padding: 18px; }
  .device-head { align-items: flex-start; }
  .dashboard-tools, .evidence-actions { width: 100%; }
  .dashboard-tools > *, .evidence-actions > *, .map-button { flex: 1 1 100%; width: 100%; }
  .access-separator span { width: calc(100% - 24px); text-align: center; }
}

/* Un casillero de tildar no es un campo de texto, pero la regla global
   `input{width:100%;padding:17px}` —pensada para los campos de escribir—
   también le pegaba: el casillero se estiraba a todo el ancho y empujaba su
   propia etiqueta fuera de la pantalla. Pasaba en todas las pantallas que
   tienen opciones para tildar, no en una sola. */
input[type="checkbox"],
input[type="radio"] {
  width: auto;
  min-width: 0;
  flex: none;
  padding: 0;
  /* Apenas abajo para quedar a la altura de la primera línea del texto. */
  margin: 2px 0 0;
  border-radius: 4px;
  accent-color: var(--lime);
}

/* `label{display:grid}` apila el casillero arriba y el texto abajo. Una
   opción para tildar se lee de una sola forma: el cuadradito y, al lado, lo
   que significa. */
label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]) {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 600;
  line-height: 1.4;
}