/* components/shell/shell.css */
.shell { display: flex; height: 100vh; }

.shell-sidebar {
  width: 12.375rem; flex-shrink: 0;
  height: 100vh; max-height: 100vh;
  background: var(--surface); border-right: 0.5px solid var(--border);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: width .18s ease;
}

/* Sidebar colapsable — modo solo-íconos (Fase E épica 2). El ancho
   y el padding de cada zona se ajustan; las etiquetas de texto se
   ocultan pero los íconos y el orden de tabulación se mantienen. */
.shell-sidebar.collapsed { width: 4rem; }
.shell-sidebar.collapsed .shell-brand-text,
.shell-sidebar.collapsed .shell-nav-item span,
.shell-sidebar.collapsed .shell-user-name,
.shell-sidebar.collapsed .shell-user-empresa,
.shell-sidebar.collapsed .shell-logout-text {
  display: none;
}
.shell-sidebar.collapsed .shell-brand { display: flex; justify-content: center; padding: 1.25rem 0 1rem; }
.shell-sidebar.collapsed .shell-nav-item { justify-content: center; padding: 0.5625rem; }
/* Footer colapsado: mismo padding horizontal que .shell-nav para que el
   avatar y el botón de logout queden centrados en el MISMO eje que los
   íconos de navegación. El gap se anula (los textos van ocultos) para que
   el ícono/avatar no se desplace del centro. La meta (nombre/empresa) se
   oculta por completo — antes seguía ocupando el gap del flex y empujaba
   el avatar a la izquierda. */
.shell-sidebar.collapsed .shell-footer { flex-direction: column; gap: 0.5rem; align-items: center; padding: 0.5rem 0.625rem; }
.shell-sidebar.collapsed .shell-user { justify-content: center; flex: none; width: 100%; gap: 0; }
.shell-sidebar.collapsed .shell-user-meta { display: none; }
.shell-sidebar.collapsed .shell-logout { padding: 0.5625rem; justify-content: center; width: 100%; gap: 0; }

/* Grupos colapsables del menú (Catálogos, Administración). En modo
   solo-íconos el chevron se oculta (no hay espacio) pero el grupo
   sigue siendo clickeable para expandir/contraer sus hijos. */
.shell-sidebar.collapsed .shell-nav-chevron { display: none; }
.shell-sidebar.collapsed .shell-nav-subitem { padding-left: 0.5625rem; }

.shell-brand {
  padding: 1.25rem 1.125rem 1rem; flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
}
.shell-brand-text { font-size: 0.9375rem; font-weight: 600; letter-spacing: .04em; color: var(--text); }
.shell-brand-accent { color: var(--orange, #FF6B1A); }

/* Botón de colapsar/expandir sidebar: compacto, alineado a la derecha del
   logo "CRM SIDUR" dentro de la misma fila de marca. Al colapsar, el texto
   del logo se oculta y solo queda este botón, centrado, para re-expandir. */
.shell-nav-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 1.625rem; height: 1.625rem; flex-shrink: 0;
  background: none; border: none; border-radius: 0.375rem;
  color: var(--muted); cursor: pointer;
  transition: background .15s, color .15s, transform .05s;
}
.shell-nav-toggle i { font-size: 0.9375rem; }
.shell-nav-toggle:hover { background: var(--bg); color: var(--text); }
.shell-nav-toggle:active { transform: scale(.92); }

.shell-nav { flex: 1; min-height: 0; overflow-y: auto; padding: 0.5rem 0.625rem; display: flex; flex-direction: column; gap: 0.125rem; }
.shell-nav-item {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.5625rem 0.75rem; font-size: 0.8125rem; color: var(--muted);
  background: none; border: none; border-radius: 0.5rem;
  cursor: pointer; text-align: left; transition: background .15s, color .15s, transform .05s;
}
.shell-nav-item i { font-size: 1.0625rem; flex-shrink: 0; }
.shell-nav-item:hover { background: var(--bg); color: var(--text); }
.shell-nav-item:active { transform: scale(.98); }
.shell-nav-item.active { background: var(--accent-bg); color: var(--accent); font-weight: 500; }

/* Grupos colapsables (Catálogos, Administración) */
.shell-nav-group.active-parent { color: var(--accent); }
.shell-nav-chevron {
  margin-left: auto; display: flex; align-items: center; flex-shrink: 0;
  transition: transform .15s ease;
}
.shell-nav-chevron i { font-size: 0.875rem; }
.shell-nav-chevron.expanded { transform: rotate(90deg); }

.shell-nav-children {
  max-height: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: 0.125rem;
  transition: max-height .18s ease;
}
.shell-nav-children.expanded { max-height: 15rem; }
.shell-nav-subitem { padding-left: 2.25rem; font-size: 0.78125rem; }

.shell-footer {
  padding: 0.875rem; border-top: 0.5px solid var(--border);
  display: flex; align-items: center; gap: 0.625rem;
  flex-shrink: 0;
}
.shell-user { display: flex; align-items: center; gap: 0.625rem; flex: 1; overflow: hidden; }
.shell-user-avatar {
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--accent-bg); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 500; flex-shrink: 0;
}
.shell-user-name { font-size: 0.75rem; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shell-user-empresa { font-size: 0.6875rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shell-logout {
  background: none; border: none; cursor: pointer; color: var(--muted);
  padding: 0.375rem 0.625rem; border-radius: 0.375rem; flex-shrink: 0;
  display: flex; align-items: center; gap: 0.3125rem; font-size: 0.75rem;
  transition: background-color .1s, color .1s, transform .05s;
}
.shell-logout-text { font-size: 0.75rem; }
.shell-logout:hover { background: var(--danger-bg); color: var(--danger); }
.shell-logout:active { transform: scale(.96); }

/* Columna derecha: top bar + contenido */
.shell-main { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100vh; }

.shell-topbar {
  height: 3rem; flex-shrink: 0;
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0 1rem;
  background: var(--surface); border-bottom: 0.5px solid var(--border);
}
.shell-topbar-empresa {
  font-size: 0.8125rem; font-weight: 500; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 18.75rem;
}
.shell-topbar-spacer { flex: 1; }
.shell-icon-btn {
  background: none; border: none; cursor: pointer; color: var(--muted);
  width: 2rem; height: 2rem; border-radius: 0.5rem;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, transform .05s;
}
.shell-icon-btn i { font-size: 1.0625rem; }
.shell-icon-btn:hover { background: var(--bg); color: var(--text); }
.shell-icon-btn:active { transform: scale(.9); }

.shell-content { flex: 1; overflow-y: auto; background: var(--bg); }

.shell-logout-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; padding: 1.25rem;
}
.shell-logout-modal {
  background: var(--surface); border-radius: 0.75rem;
  padding: 1.25rem; width: 100%; max-width: 20rem;
}
.shell-logout-title { font-size: 0.875rem; font-weight: 500; color: var(--text); margin-bottom: 0.25rem; }
.shell-logout-sub { font-size: 0.75rem; color: var(--muted); margin-bottom: 1rem; }
.shell-logout-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }
.shell-logout-cancel {
  font-size: 0.75rem; padding: 0.4375rem 0.875rem; border-radius: 0.4375rem;
  background: none; border: 0.5px solid var(--border-md); color: var(--text); cursor: pointer;
}
.shell-logout-confirm {
  font-size: 0.75rem; padding: 0.4375rem 0.875rem; border-radius: 0.4375rem;
  background: var(--danger); color: #fff; border: none; cursor: pointer;
}
.shell-logout-confirm:hover { opacity: .88; }