/* ============================================================================
   shell.css — TWEAKEO Dashboard v3 — Layout, Header, Nav, Footer
   ----------------------------------------------------------------------------
   v3 (2026-07-19) — Rediseño integral:
     - Header con layout refinado, logo con gradiente sutil.
     - Nav tabs con sliding highlight (transición del indicador activo).
     - Mejor espaciado vertical (14px base → más aire).
     - Footer más limpio.
     - Atajos de teclado visibles en tabs.
   v2 (2026-07-17) — Layout inicial.

   AUDIT-CODE: Excepciones de tokenización documentadas.
     - Dimensiones de logo (40px), botón icono (32px), índices numéricos
       (16px, 14px): definen la forma del componente, no espaciado.
     - Breakpoints (780px, 480px): CSS no permite var() en @media.
     - font-size del logo (20px): tamaño semántico del componente,
       consistente con la escala tipográfica.
   ========================================================================== */

/* ── Shell container ─────────────────────────────────────────────────────── */
.ds-shell {
  max-width: 80rem;             /* ↑ desde 72rem — más espacio para datos */
  margin: 0 auto;
  padding: var(--ds-space-5) var(--ds-space-5) var(--ds-space-7);
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.ds-header {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--ds-space-4);
  margin-bottom: var(--ds-space-5);
  padding-bottom: var(--ds-space-4);
  border-bottom: 1px solid var(--ds-border);
}

.ds-header-brand {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
}

.ds-logo {
  width: 40px;
  height: 40px;
  border-radius: var(--ds-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--ds-shadow-glow);
}
.ds-logo svg {
  display: block;
  width: 40px;
  height: 40px;
}

.ds-header-title {
  font-size: var(--ds-font-size-xl);
  font-weight: var(--ds-font-weight-semibold);
  letter-spacing: -0.01em;
  color: var(--ds-heading);
  line-height: var(--ds-leading-tight);
}

.ds-header-sub {
  font-size: var(--ds-font-size-xs);
  color: var(--ds-text-muted);
  margin-top: 2px;
}

.ds-header-status {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  font-size: var(--ds-font-size-xs);
  color: var(--ds-text-muted);
}

/* ── Dot de estado ───────────────────────────────────────────────────────── */
.ds-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--ds-radius-full);
  flex-shrink: 0;
  display: inline-block;
}
.ds-dot--ok      { background: var(--ds-ok); }
.ds-dot--warn    { background: var(--ds-warn); }
.ds-dot--danger  { background: var(--ds-danger); }
.ds-dot--idle    { background: var(--ds-text-subtle); }
.ds-dot--info    { background: var(--ds-info); }
.ds-dot--pulse   { animation: ds-pulse-glow 1.6s ease-in-out infinite; }

/* ── Botón icono ─────────────────────────────────────────────────────────── */
.ds-btn-icon {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  color: var(--ds-text-muted);
  width: 32px;
  height: 32px;
  border-radius: var(--ds-radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--ds-duration-fast) var(--ds-easing-standard);
  padding: 0;
}
.ds-btn-icon:hover {
  color: var(--ds-text);
  border-color: var(--ds-border-visible);
  background: var(--ds-surface-raised);
}
.ds-btn-icon:active {
  background: var(--ds-surface-overlay);
  transform: scale(0.95);
}

/* ── Nav tabs ────────────────────────────────────────────────────────────── */
.ds-nav {
  margin-bottom: var(--ds-space-5);
  display: flex;
  justify-content: center;
}

.ds-nav-row {
  display: flex;
  gap: var(--ds-space-1);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  padding: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  max-width: 100%;
}
.ds-nav-row::-webkit-scrollbar { display: none; }

.ds-nav-tab {
  position: relative;
  background: none;
  border: 0;
  color: var(--ds-text-muted);
  font-family: var(--ds-font);
  font-size: var(--ds-font-size-sm);
  padding: 10px 22px;
  border-radius: var(--ds-radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--ds-duration-fast) var(--ds-easing-standard);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  user-select: none;
}
.ds-nav-tab:hover {
  color: var(--ds-text);
  background: var(--ds-surface-raised);
}
.ds-nav-tab:active {
  background: var(--ds-surface-overlay);
  transform: scale(0.97);
}
.ds-nav-tab.active,
.ds-nav-tab[aria-current="page"] {
  background: var(--ds-surface-overlay);
  color: var(--ds-heading);
  font-weight: var(--ds-font-weight-semibold);
}

/* Sliding highlight border-bottom en vez de solo fondo */
.ds-nav-tab.active::after,
.ds-nav-tab[aria-current="page"]::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 16px;
  right: 16px;
  height: 2px;
  background: var(--ds-brand);
  border-radius: 1px;
}

/* Badge en tab (contador de alertas) */
.ds-nav-tab .ds-badge {
  font-size: 9px;
  padding: 1px 5px;
}

/* Índices de teclado en tabs (1-9) — ocultos, solo accesibilidad */
.ds-nav-tab::before {
  display: none;
}
/* Ocultar número cuando hay icono SVG (para tabs con icono) */
.ds-nav-tab.ds-nav-tab--icon::before { display: none; }

/* ── Main viewport ───────────────────────────────────────────────────────── */
.ds-main {
  min-height: 50vh;
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--ds-duration-normal) var(--ds-easing-decelerate),
              transform var(--ds-duration-normal) var(--ds-easing-decelerate);
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.ds-footer {
  margin-top: var(--ds-space-6);
  padding-top: var(--ds-space-4);
  border-top: 1px solid var(--ds-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--ds-space-3);
}
.ds-footer-nav {
  display: flex;
  align-items: center;
  gap: var(--ds-space-1);
}
.ds-footer-sep { color: var(--ds-border-visible); }
.ds-footer-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ds-text-subtle);
  text-decoration: none;
  font-size: var(--ds-font-size-xs);
  padding: 4px 10px;
  border-radius: var(--ds-radius-sm);
  transition: all var(--ds-duration-fast) var(--ds-easing-standard);
}
.ds-footer-link:hover {
  color: var(--ds-text);
  background: var(--ds-surface-raised);
}
#ds-updated {
  font-size: var(--ds-font-size-xs);
  color: var(--ds-text-subtle);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 780px) {
  .ds-shell { padding: var(--ds-space-3) var(--ds-space-3) var(--ds-space-5); }
  .ds-header { flex-direction: column; align-items: flex-start; }
  .ds-header-title { font-size: var(--ds-font-size-lg); }
  .ds-nav-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ds-nav-tab { padding: 6px 10px; font-size: var(--ds-font-size-xs); }
}

@media (max-width: 480px) {
  .ds-shell { padding: var(--ds-space-2) var(--ds-space-2) var(--ds-space-4); }
  .ds-header-title { font-size: var(--ds-font-size-md); }
  .ds-nav-tab { font-size: 0.625rem; padding: 5px 8px; }
  .ds-nav-tab::before { width: 14px; height: 14px; font-size: 0.5rem; }
}