/* app.css: piezas propias de la app sobre components.css. Solo variables de tokens.css. */

html, body { min-height: 100%; }
#app { min-height: 100dvh; }
.boot { display: grid; place-items: center; min-height: 100dvh; }
.noscript { padding: var(--space-4); }
[hidden] { display: none !important; }

/* ---------- Login ---------- */
.login { display: grid; place-items: center; min-height: 100dvh; padding: var(--space-4); background: var(--color-bg); }
.login__card {
  position: relative; overflow: hidden; display: grid; gap: var(--space-4); width: min(400px, 100%);
  padding: var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
}
.login__card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--gradient-brand); }
.login__brand { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-lg-size); line-height: var(--text-lg-line); }
.login__hint { margin: 0; color: var(--color-text-muted); }

/* ---------- Shell ---------- */
.skip-link {
  position: absolute; left: var(--space-2); top: -100px; z-index: var(--z-toast);
  padding: var(--space-2) var(--space-3); background: var(--color-surface); color: var(--color-text); border-radius: var(--radius-sm);
}
.skip-link:focus { top: var(--space-2); }
.main-content { display: flex; flex-direction: column; min-width: 0; outline: none; }
.sidebar__ws-link { color: inherit; text-decoration: none; }
.sidebar__ws-link:hover { color: var(--color-sidebar-text); text-decoration: underline; }
.sidebar__ws-link:focus-visible { outline: 2px solid var(--color-sidebar-indicator); outline-offset: 2px; }
.sidebar__empty { margin: 0; padding: 0 var(--space-3); color: var(--color-sidebar-muted); font-size: var(--text-xs-size); }
.item-link { color: inherit; text-decoration: none; }
.item-link:hover { text-decoration: underline; }
.item-link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.sidebar__tree { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nav-item { min-width: 0; }
.nav-item .icon { flex: none; }
.nav-item__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-backdrop { display: none; }
@media (max-width: 767px) {
  .sidebar-backdrop[data-open="true"] {
    display: block; position: fixed; inset: 0; z-index: calc(var(--z-overlay) - 1); background: var(--overlay);
  }
}
.user-menu { position: relative; }
.user-menu > summary { list-style: none; cursor: pointer; border-radius: 50%; }
.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu > summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.user-menu .menu { position: absolute; right: 0; top: calc(100% + var(--space-1)); z-index: var(--z-dropdown); }
.user-menu__who { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-1); }

/* ---------- Páginas ---------- */
.page { display: grid; gap: var(--space-4); align-content: start; padding: var(--space-4); }
.page__header { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.page__title { flex: 1; min-width: 0; margin: 0; font-size: var(--text-xl-size); line-height: var(--text-xl-line); }
.card-list { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin: 0; padding: 0; list-style: none; }
.card-link {
  display: flex; align-items: center; gap: var(--space-2); min-height: 56px; padding: var(--space-3) var(--space-4);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  color: var(--color-text); text-decoration: none; font-weight: 600;
}
.card-link:hover { background: var(--color-surface-2); }
.card-link .icon { color: var(--color-accent-text); flex: none; }
.card-link span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.section-title { margin: 0; font-size: var(--text-lg-size); line-height: var(--text-lg-line); }

/* ---------- Tablero ---------- */
.cell--name .grip { flex: none; } /* con nombres largos el asa no encoge y el texto queda alineado */
.status-btn { width: 100%; border: 0; cursor: pointer; font-family: inherit; }
.status-btn.label--empty { border: 1px dashed var(--color-border-input); }
.status-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.board-empty { margin: 0 var(--space-4) var(--space-4); padding: var(--space-6) var(--space-4); }
.grid__row--new { animation: row-in var(--motion-slow) var(--ease); }
@keyframes row-in { from { background: var(--color-selected); } to { background: var(--color-surface); } }
@media (prefers-reduced-motion: reduce) { .grid__row--new { animation: none; } }

/* ---------- Diálogos ---------- */
.picker { display: grid; gap: var(--space-2); }
.picker .label { min-height: var(--control-h); font-size: var(--text-sm-size); border: 0; cursor: pointer; font-family: inherit; }
.picker .label[aria-selected="true"] { outline: 2px solid var(--color-text); outline-offset: 2px; }
.picker .label:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.check-list { display: grid; gap: var(--space-1); max-height: 50dvh; overflow-y: auto; margin: 0; padding: 0; list-style: none; }

/* ---------- Dashboard ---------- */
.dash-grid--app { padding: 0 var(--space-4) var(--space-4); }
.widget__empty { margin: 0 0 var(--space-2); color: var(--color-text-muted); }
.dash-connected { margin: 0 0 var(--space-3); overflow-wrap: anywhere; }
.battery-summary { display: flex; align-items: baseline; gap: var(--space-2); margin: 0 0 var(--space-2); }
.battery-summary__pct { font-size: var(--text-xl-size); line-height: var(--text-xl-line); font-variant-numeric: tabular-nums; }