/* ================================================================
   layout.css — Shell responsivo: navbar, sidebar colapsable, content
   ================================================================ */

/* ----------------------------------------------------------------
   VARIABLES DE LAYOUT
   ---------------------------------------------------------------- */
:root {
  --sidebar-w-expanded:  240px;
  --sidebar-w-collapsed: 56px;
  --sidebar-w:           var(--sidebar-w-expanded);
  --nav-h:               52px;
}

/* ----------------------------------------------------------------
   ESTRUCTURA PRINCIPAL
   ---------------------------------------------------------------- */
#app {
  display: flex;
  flex-direction: column;
  height: 100dvh;        /* dvh respeta la barra del navegador móvil */
  overflow: hidden;
}

#body-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  position: relative;
}

#content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* scroll suave en iOS */
  -webkit-overflow-scrolling: touch;
}

/* ----------------------------------------------------------------
   NAVBAR SUPERIOR
   ---------------------------------------------------------------- */
#navbar {
  height: var(--nav-h);
  background: var(--bg-nav);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 2px;
  flex-shrink: 0;
  z-index: var(--z-navbar);
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

/* Botón hamburguesa (solo visible en mobile) */
.nav-hamburger {
  display: none;
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  color: var(--text-on-brand-dim);
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast);
  margin-right: 4px;
}
.nav-hamburger:hover { background: rgba(255,255,255,0.12); color: #fff; }

/* Módulo activo + selector de módulos.
   Ocupa el lugar donde antes iba el nombre del laboratorio (que se movió al
   menú del usuario). En mobile es la única vía para cambiar de módulo, así que
   nunca se oculta. */
.nav-module {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-on-brand);
  font-weight: 600;
  letter-spacing: -0.3px;
  padding: 5px 10px 5px 6px;
  border-radius: var(--radius-md);
  cursor: pointer;
  flex-shrink: 0;
  min-width: 0;
  max-width: 55vw;
  transition: background var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}
.nav-module:hover,
.nav-module:active { background: rgba(255,255,255,0.14); }

.nav-module-icon {
  width: 28px; height: 28px;
  background: rgba(255,255,255,0.15);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.nav-module-name {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-module-caret {
  font-size: 10px;
  opacity: 0.75;
  flex-shrink: 0;
}

/* El Dropdown envuelve su trigger en un .dropdown (inline-block). Dentro de la
   barra eso es un flex item, y sin min-width:0 no puede encogerse: el nombre
   largo de un módulo empujaría el avatar fuera de pantalla en mobile. */
#navbar .dropdown { min-width: 0; }

/* Menú de módulos — desktop */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 1px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 4px;
}
.nav-menu::-webkit-scrollbar { display: none; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: var(--radius-md);
  color: var(--text-on-brand-dim);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  user-select: none;
}
.nav-item:hover  { background: rgba(255,255,255,0.10); color: #fff; }
.nav-item.active { background: rgba(255,255,255,0.16); color: #fff; }
.nav-item.active::after {
  content: '';
  position: absolute;
  bottom: -8px; left: 50%;
  transform: translateX(-50%);
  width: 18px; height: 3px;
  background: rgba(255,255,255,0.7);
  border-radius: 2px;
}
.nav-item-icon { font-size: 14px; }

/* Controles derecha */
.nav-right {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  flex-shrink: 0;
  padding-left: 6px;
}
.nav-icon-btn {
  width: 34px; height: 34px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-on-brand-dim);
  font-size: 15px;
  cursor: pointer;
  transition: background var(--transition-fast);
  position: relative;
  flex-shrink: 0;
}
.nav-icon-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
.nav-notif-dot {
  position: absolute;
  top: 7px; right: 7px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #fbbf24;
  border: 2px solid var(--bg-nav);
}

.nav-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 4px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.nav-user:hover { background: rgba(255,255,255,0.10); }
.nav-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.3);
  flex-shrink: 0;
}
.nav-user-info   { line-height: 1.2; }
.nav-user-name   { font-size: 12.5px; font-weight: 500; color: #fff; }
.nav-user-role   { font-size: 10.5px; color: var(--text-on-brand-dim); }
.nav-user-caret  { color: var(--text-on-brand-dim); font-size: 9px; }

/* ----------------------------------------------------------------
   SIDEBAR COLAPSABLE
   ---------------------------------------------------------------- */
#sidebar {
  width: var(--sidebar-w-expanded);
  min-width: var(--sidebar-w-expanded);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow: hidden;
  z-index: var(--z-sidebar);
  transition: width var(--transition-base), min-width var(--transition-base);
}

/* Módulo activo — header del sidebar */
.sb-module-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sb-module-icon {
  font-size: 18px;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}
.sb-module-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  opacity: 1;
  transition: opacity var(--transition-fast);
}

/* Botón toggle del sidebar */
.sb-toggle {
  margin-left: auto;
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 13px;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-base);
}
.sb-toggle:hover { background: var(--bg-hover); color: var(--text-primary); }

/* Scroll del sidebar */
.sb-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 0 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* Secciones */
.sb-section { margin-bottom: 2px; }
.sb-section-title {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 12px 16px 4px;
  white-space: nowrap;
  opacity: 1;
  transition: opacity var(--transition-fast);
}

/* Ítems del sidebar */
.sb-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  border-left: 3px solid transparent;
  user-select: none;
  position: relative;
  white-space: nowrap;
}
.sb-item:hover  { background: var(--bg-hover); color: var(--text-primary); }
.sb-item.active {
  background: var(--bg-selected);
  color: var(--brand-primary);
  font-weight: 600;
  border-left-color: var(--brand-accent);
}
.sb-item-icon {
  font-size: 16px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}
.sb-item-label {
  flex: 1;
  opacity: 1;
  transition: opacity var(--transition-fast);
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-item-end {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 1;
  transition: opacity var(--transition-fast);
}
.sb-item-badge {
  background: var(--brand-accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: var(--radius-full);
  padding: 1px 7px;
  min-width: 20px;
  text-align: center;
}
.sb-divider { border-top: 1px solid var(--border); margin: 6px 10px; }

/* Tooltip para modo colapsado */
.sb-item-tooltip {
  position: fixed;
  left: calc(var(--sidebar-w-collapsed) + 8px);
  background: var(--text-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  z-index: calc(var(--z-sidebar) + 10);
  box-shadow: var(--shadow-sm);
  transition: opacity 0.1s;
}
.sb-item-tooltip::before {
  content: '';
  position: absolute;
  left: -5px; top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: var(--text-primary);
  border-left: 0;
}

/* ----------------------------------------------------------------
   SIDEBAR COLAPSADO (solo íconos)
   ---------------------------------------------------------------- */
#sidebar.collapsed {
  width: var(--sidebar-w-collapsed);
  min-width: var(--sidebar-w-collapsed);
}
#sidebar.collapsed .sb-module-title,
#sidebar.collapsed .sb-section-title,
#sidebar.collapsed .sb-item-label,
#sidebar.collapsed .sb-item-end { opacity: 0; pointer-events: none; }

#sidebar.collapsed .sb-item {
  padding: 10px 0;
  justify-content: center;
  border-left-color: transparent;
}
#sidebar.collapsed .sb-item.active {
  background: var(--bg-selected);
  border-left-color: transparent;
  border-radius: var(--radius-sm);
  margin: 0 6px;
  width: calc(100% - 12px);
}
#sidebar.collapsed .sb-module-header {
  justify-content: center;
  padding: 14px 0 12px;
}
#sidebar.collapsed .sb-toggle { transform: rotate(180deg); }
#sidebar.collapsed .sb-divider { margin: 6px 8px; }
#sidebar.collapsed .sb-section-title { padding: 10px 0 2px; text-align: center; }

/* ----------------------------------------------------------------
   MOBILE: OVERLAY + DRAWER
   ---------------------------------------------------------------- */
#sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: calc(var(--z-sidebar) - 1);
  backdrop-filter: blur(1px);
  animation: fadeIn var(--transition-fast) both;
}
#sidebar-overlay.open { display: block; }

/* ----------------------------------------------------------------
   CONTENT — sin section-header de los módulos
   ---------------------------------------------------------------- */
/* El título vive en el sidebar, no en el contenido */
.section-header  { display: none !important; }
.section-title   { display: none !important; }
.section-subtitle{ display: none !important; }

/* Ajuste: el primer card ya no necesita margen superior extra */
#content > .card:first-child,
#content > .stats-row:first-child,
#content > .table-wrap:first-child { margin-top: 0; }

/* ----------------------------------------------------------------
   RESPONSIVE — BREAKPOINTS
   ---------------------------------------------------------------- */

/* Tablet: sidebar colapsado por defecto, menú nav más compacto */
@media (max-width: 1024px) {
  .nav-user-info { display: none; }
  .nav-user-caret { display: none; }
  .nav-item { padding: 6px 10px; font-size: 12.5px; }
}

/* Mobile: drawer lateral, nav sin módulos */
@media (max-width: 768px) {
  :root { --nav-h: 50px; }

  /* Navbar: solo hamburguesa + logo + avatar */
  .nav-hamburger { display: flex; }
  .nav-menu      { display: none; }
  .nav-icon-btn.hide-mobile { display: none; }

  /* Sidebar: fuera de pantalla por defecto, se desliza al abrir */
  #sidebar {
    position: fixed;
    top: 0; left: 0;
    height: 100dvh;
    width: var(--sidebar-w-expanded) !important;
    min-width: var(--sidebar-w-expanded) !important;
    transform: translateX(-100%);
    transition: transform var(--transition-base);
    z-index: calc(var(--z-navbar) + 10);
    box-shadow: var(--shadow-lg);
    /* Quitar colapsado en mobile */
    overflow-y: auto;
  }
  #sidebar.mobile-open {
    transform: translateX(0);
  }
  /* Resetear estado colapsado en mobile */
  #sidebar.collapsed .sb-module-title,
  #sidebar.collapsed .sb-section-title,
  #sidebar.collapsed .sb-item-label,
  #sidebar.collapsed .sb-item-end { opacity: 1; pointer-events: auto; }
  #sidebar.collapsed .sb-item {
    padding: 8px 16px;
    justify-content: flex-start;
    margin: 0; width: 100%;
    border-left: 3px solid transparent;
  }
  #sidebar.collapsed .sb-item.active { border-left-color: var(--brand-accent); }
  #sidebar.collapsed .sb-module-header {
    justify-content: flex-start;
    padding: 14px 16px 12px;
  }
  #sidebar.collapsed .sb-toggle { transform: none; }

  /* Content ocupa todo el ancho */
  #content { padding: 14px 16px; gap: 14px; }

  /* Stats: 2 columnas en mobile */
  .stats-row { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat-value { font-size: 20px; }

  /* Tablas con scroll horizontal */
  .table-wrap { border-radius: var(--radius-md); }
  td, th { padding: 9px 10px; font-size: 12.5px; }

  /* Cards */
  .card-header { padding: 12px 14px; }
  .card-body   { padding: 14px; }

  /* Formularios: 1 columna */
  .form-col-2,
  .form-col-3 { grid-template-columns: 1fr !important; }
  .form-full  { grid-column: 1 !important; }

  /* Modal: fullscreen en mobile */
  .modal-backdrop { align-items: flex-end; }
  .modal {
    border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
    max-height: 92dvh;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Toolbar compacta */
  .toolbar { gap: 8px; }
  .toolbar-search { max-width: none; }
}

/* Mobile pequeño */
@media (max-width: 380px) {
  #content { padding: 12px; }
  .stats-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat-card { padding: 12px 14px; }
  .stat-value { font-size: 18px; }
}