/* ============================================
   LAYOUT - Sidebar, topbar, main
   ============================================ */

.app { display: flex; min-height: 100vh; }

/* ===== SIDEBAR ===== */
.sidebar {
  width: 240px;
  background: var(--negro);
  color: var(--nude);
  position: fixed;
  height: 100vh;
  overflow-y: auto;
  z-index: 100;
}

.sidebar-logo {
  padding: 28px 18px 22px;
  border-bottom: 1px solid rgba(180, 159, 139, 0.2);
  text-align: center;
}

.sidebar-logo-img {
  max-width: 180px;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.nav-menu { padding: 14px 0; }

.nav-item {
  padding: 13px 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: all 0.2s;
  border-left: 3px solid transparent;
  font-size: 13px;
  color: var(--nude);
}

.nav-item:hover { background: rgba(180, 159, 139, 0.08); color: var(--tierra); }

.nav-item.active {
  background: rgba(180, 159, 139, 0.12);
  border-left-color: var(--tierra);
  color: var(--tierra);
}

.nav-icon { font-size: 15px; width: 20px; text-align: center; }

/* ===== MAIN ===== */
.main {
  margin-left: 240px;
  flex: 1;
  /* min-width:0 es CRÍTICO: sin esto, un flex item no se achica por debajo
     de su contenido intrínseco y se desborda a la derecha. */
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Defensa adicional: asegurar que body/html no permiten scroll horizontal
   inducido por algún contenido suelto. La tabla y otras zonas con scroll
   propio (table-wrap, overflow:auto) siguen funcionando normalmente. */
html, body { overflow-x: hidden; }

.topbar {
  background: var(--blanco);
  padding: 16px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: var(--sombra);
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--borde);
}

.topbar-title {
  font-size: 20px;
  color: var(--marron);
  font-weight: 400;
}

.topbar-right {
  display: flex;
  gap: 16px;
  align-items: center;
}

.user-chip {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 6px 14px;
  background: var(--nude-light);
  border-radius: 20px;
  cursor: pointer;
}

.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--tierra);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
}

.notif-btn {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  position: relative;
  color: var(--marron);
}

.notif-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--error);
  color: white;
  font-size: 9px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  padding: 26px 30px;
  flex: 1;
  /* El scroll horizontal lo hace cada .table-wrap individualmente
     (mantenemos la página sin scroll horizontal global, más limpio) */
  min-width: 0;
}

/* ===== USER MENU DROPDOWN ===== */
.user-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: white;
  border: 1px solid var(--borde);
  border-radius: var(--radio-md);
  box-shadow: var(--sombra-fuerte);
  min-width: 220px;
  z-index: 60;
  overflow: hidden;
}

.user-menu-item {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 13px;
  color: var(--marron);
  border-bottom: 1px solid var(--borde);
  transition: background 0.2s;
}

.user-menu-item:last-child { border-bottom: none; }
.user-menu-item:hover { background: var(--nude-light); }
.user-menu-item.danger { color: var(--error); }

/* Botón ☰ en la topbar — solo visible en móvil cuando la sidebar está cerrada */
.menu-toggle {
  display: none;   /* oculto en escritorio (el botón de la sidebar lo sustituye) */
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--marron);
  padding: 6px 10px;
  border-radius: var(--radio-sm);
  transition: background 0.15s;
}
.menu-toggle:hover { background: var(--nude-light); }

/* ===== Botón ☰ dentro de la sidebar (negro) ===== */
.sidebar-toggle {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  background: rgba(180, 159, 139, 0.15);
  border: 1px solid rgba(180, 159, 139, 0.3);
  color: var(--tierra);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  z-index: 5;
  transition: all 0.2s;
}
.sidebar-toggle:hover {
  background: var(--tierra);
  color: var(--negro);
  transform: scale(1.05);
}
.sidebar-toggle-icon { display: inline-block; line-height: 1; }

/* En modo colapsado, el botón se centra y queda accesible */
.app.sidebar-collapsed .sidebar-toggle {
  top: 14px;
  right: 50%;
  transform: translateX(50%);
}
.app.sidebar-collapsed .sidebar-toggle:hover {
  transform: translateX(50%) scale(1.05);
}

/* ===== SIDEBAR COLAPSADO (icons-only, escritorio) ===== */
.sidebar { transition: width 0.25s ease, transform 0.25s ease; }
.main    { transition: margin-left 0.25s ease; }

.app.sidebar-collapsed .sidebar {
  width: 64px;
}
.app.sidebar-collapsed .sidebar-logo {
  padding: 14px 6px;
}
.app.sidebar-collapsed .sidebar-logo-img {
  max-width: 44px;
}
.app.sidebar-collapsed .nav-item {
  padding: 13px 0;
  justify-content: center;
  font-size: 0;          /* oculta el texto */
  gap: 0;
}
.app.sidebar-collapsed .nav-item .nav-icon {
  font-size: 18px;        /* el icono sigue visible */
  width: auto;
}
.app.sidebar-collapsed .main {
  margin-left: 64px;
}

/* ===== RESPONSIVE (móvil/tablet < 768px) ===== */
@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
  }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0; }
  /* En móvil ignoramos el modo colapsado (siempre oculto y desplegable) */
  .app.sidebar-collapsed .sidebar { width: 240px; }
  .app.sidebar-collapsed .main { margin-left: 0; }
  /* En móvil, cuando la sidebar está oculta, mostramos el ☰ en la topbar */
  .menu-toggle { display: inline-flex; }
  /* Reducir padding de content en móvil */
  .content { padding: 18px 16px; }
}