/*
  Panel DDI — ajustes de capa que design-system.css no cubre: evitar el
  parpadeo de contenido sin estilo antes de que Alpine inicialice, y el
  layout propio del feed de actividad reciente de Home (donut + tabla lado
  a lado). El shell (sidebar/topbar/main) ya vive en design-system.css.

  Quiebres del panel: 768px (design-system.css, shell — sidebar se vuelve
  drawer) y 900px (home-grid, abajo). 480px es nuevo (2026-07-29, pasada de
  responsive H7): cubre el contenido *dentro* de una sección en un teléfono
  real, que 768px no resuelve por sí solo — filas de filtros, la rejilla de
  Alarma, el topbar. Reglas nuevas documentadas también en el skill
  `panel-visual.md`.
*/

[x-cloak] {
  display: none !important;
}

/*
  Segunda pista en `minmax(0, 1fr)`, no `1fr` a secas: `1fr` es azúcar por
  `minmax(auto, 1fr)`, y una pista con mínimo `auto` no se encoge por
  debajo del ancho intrínseco de su contenido. La tarjeta de "Actividad
  reciente" trae una tabla ancha (6 columnas) — sin el `0` explícito, esa
  pista se estira más allá del viewport y, como `<main>` tiene
  `overflow-x: hidden` (oculta, no permite scroll), el donut de
  dispositivos quedaba parcialmente invisible sin ninguna forma de verlo
  (encontrado por el usuario, 2026-07-29). La primera pista no necesita el
  fix: `minmax(220px, 320px)` ya tiene un mínimo explícito en vez de
  `auto`.
*/
.home-grid {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

@media (max-width: 900px) {
  .home-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.mqtt-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-muted-foreground);
}

.mqtt-indicator .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/*
  Filas de filtros (Dispositivos, Usuarios, Historial): un solo lugar para
  el patrón repetido en las tres — antes vivía como `style` inline idéntico
  en cada sección. `minmax(0, 1fr)`-equivalente vía flex-basis: cada campo
  puede encogerse en vez de forzar overflow horizontal con etiquetas largas.
*/
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
}

.filter-row > .field {
  min-width: 0;
}

.filter-row > .btn {
  margin-left: auto;
}

/*
  Par de campos lado a lado dentro de un modal (Dispositivos, Usuarios):
  Modelo/MAC, Instalación/Garantía, Latitud/Longitud, Correo/Teléfono,
  Rol/Comunidad — antes `style="display: flex; gap: var(--space-3)"` con
  `style="flex: 1"` inline en cada `.field`, repetido 7 veces. Mismo bug
  que `.filter-row`/`.topbar-title`: sin `min-width: 0`, un campo con
  contenido angosto (ej. "MAC") igual se negaba a encogerse por debajo
  del ancho por defecto de su `<input>`, cortándose contra el borde del
  `<dialog>` en un teléfono real (encontrado por el usuario, 2026-07-29).
*/
.field-row {
  display: flex;
  gap: var(--space-3);
}

.field-row > .field,
.field-row > select {
  flex: 1;
  min-width: 0;
}

/*
  Filas dinámicas de más de dos elementos dentro de un modal (contactos y
  emergencias RF de Comunidades: select + varios inputs + botón "Quitar").
  Mismo fix de fondo (`min-width: 0`) más `flex-wrap: wrap` — con 4-5
  elementos, encogerlos a la mitad cada uno en un teléfono real los deja
  ilegibles; se apilan a ancho completo en 480px en vez de solo evitar el
  desborde.
*/
.stack-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.stack-row > * {
  min-width: 0;
}

@media (max-width: 480px) {
  .stack-row {
    flex-direction: column;
    align-items: stretch;
  }

  /* Anula anchos fijos en desktop (`width: 90px`, `width: 20px`…) — en
     una columna, cada elemento debe ocupar el ancho completo. */
  .stack-row > * {
    width: 100% !important;
  }
}

/*
  El título del topbar no tenía protección contra desbordar en una
  pantalla angosta cuando el nombre de sección es largo — `min-width: 0`
  es necesario porque un hijo de flex no se encoge por debajo de su
  contenido por defecto (el motivo real del posible desborde, no el
  texto en sí).
*/
.topbar-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/*
  Tabla como lista de tarjetas en pantallas angostas (2026-07-29) — clase
  opt-in, no aplica a toda tabla del panel: por ahora solo Dispositivos y
  el feed de Home ("Actividad reciente"), a pedido explícito del usuario,
  quien probó las tablas anchas en un teléfono real y encontró que
  deslizar para ver la última columna (el estado del dispositivo) "no es
  funcional". Historial/Usuarios/Comunidades se quedan con el scroll
  horizontal de `.table-scroll` por ahora — extender esta misma clase ahí
  es el siguiente paso natural si el patrón funciona bien.

  Técnica estándar sin JS: se oculta `<thead>`, cada `<td>` se vuelve su
  propio renglón con la etiqueta de columna a la izquierda vía
  `content: attr(data-label)` — por eso cada `<td>` de una tabla con esta
  clase necesita su atributo `data-label` en el HTML, sin excepción.
*/
@media (max-width: 480px) {
  .table-responsive-stack {
    min-width: 0;
  }

  .table-responsive-stack thead {
    display: none;
  }

  .table-responsive-stack, .table-responsive-stack tbody, .table-responsive-stack tr {
    display: block;
    width: 100%;
  }

  .table-responsive-stack tr {
    margin-bottom: var(--space-3);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
  }

  .table-responsive-stack tr:last-child {
    margin-bottom: 0;
  }

  .table-responsive-stack td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border: none;
    text-align: right;
  }

  .table-responsive-stack td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--color-muted-foreground);
    text-align: left;
  }

  .filter-row {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-row > .btn {
    margin-left: 0;
    width: 100%;
  }

  .field-row {
    flex-direction: column;
  }

  /* Deja el punto de estado, oculta el texto — "Broker conectado" no
     cabe junto al ícono de cuenta en un teléfono angosto. */
  .mqtt-indicator span:not(.dot) {
    display: none;
  }
}