/**
 * Adaptabilidad Responsive (Desktop & Tablet)
 * Oculta barra inferior y activa sidebar lateral en pantallas >= 768px.
 */

@media (min-width: 768px) {
  /* Ocultar barra inferior en pantallas grandes */
  .bottom-nav {
    display: none !important;
  }

  /* Mostrar y estructurar layout de escritorio */
  .app-shell {
    flex-direction: row;
  }

  .sidebar {
    display: flex !important;
    flex-direction: column;
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    background-color: var(--bg-surface);
    border-right: 1px solid var(--border-subtle);
    height: 100vh;
    height: 100dvh;
    position: sticky;
    top: 0;
    z-index: 50;
    overflow-y: auto;
  }

  .sidebar-header {
    height: var(--header-height);
    padding: 0 1.25rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border-subtle);
  }

  .sidebar-nav {
    padding: 1.25rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
  }

  .sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius);
    color: var(--text-muted);
    font-size: 0.95rem;
    font-weight: 600;
    min-height: var(--min-touch-target);
    transition: all var(--transition-fast);
    position: relative;
    text-decoration: none;
  }

  .sidebar-link:hover {
    color: var(--text-main);
    background-color: var(--bg-surface-elevated);
    text-decoration: none;
  }

  .sidebar-link.active {
    color: var(--color-brand);
    background-color: var(--bg-surface-active);
    border-left: 3px solid var(--color-brand);
  }

  .sidebar-link.active svg {
    color: var(--color-brand);
  }

  .sidebar-link svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--text-dim);
  }

  .sidebar-badge {
    margin-left: auto;
    font-size: 0.72rem;
    padding: 0.15rem 0.5rem;
    background-color: var(--bg-surface-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius-pill);
    color: var(--text-muted);
  }

  .sidebar-footer {
    padding: 1rem;
    border-top: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: var(--text-dim);
  }

  /* Área principal del contenido */
  .main-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100vh;
  }

  .app-content {
    padding: 1.75rem 2rem;
    padding-bottom: 3rem;
  }

  /* En desktop el header no necesita duplicar la marca si la tiene el sidebar */
  .app-header .brand-wrapper {
    display: none;
  }
}

/* Regla explícita para dispositivos bajo 768px */
@media (max-width: 767.98px) {
  .sidebar {
    display: none !important;
  }

  .bottom-nav {
    display: flex !important;
  }

  .main-wrapper {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Ajustes para pantallas muy pequeñas (<= 360px como iPhone SE o pantallas estrechas) */
@media (max-width: 360px) {
  .app-header {
    padding: 0 0.5rem;
  }

  .brand-icon {
    width: 36px;
    height: 28px;
    padding: 1px 2px;
  }

  .brand-icon svg {
    width: 16px;
    height: 16px;
  }

  .brand-subtitle {
    display: none;
  }

  .brand-title {
    font-size: 0.9rem;
  }

  .header-status {
    padding: 0.25rem 0.45rem;
    font-size: 0.72rem;
    gap: 0.35rem;
  }

  .nav-label {
    font-size: 0.7rem;
  }
}