/* ==========================================================================
   Layout: menú lateral (PC), barra superior + cajón (≤1023 px),
   barra inferior (≤640 px) y área de contenido.
   ========================================================================== */

/* ---------- Marca (logo o sello con inicial + nombre) ---------- */
.marca {
  display: flex; align-items: center; gap: var(--e2); min-width: 0;
  color: #fff; text-decoration: none; font-weight: 700; font-size: var(--t-m);
}
.marca:hover { color: #fff; }
.marca-sello {
  width: 26px; height: 26px; flex: none; border-radius: 6px;
  display: grid; place-items: center;
  background: var(--acento); color: var(--acento-texto);
  font-size: 13px; font-weight: 700;
}
.marca-logo { height: 28px; width: auto; max-width: 44px; object-fit: contain; border-radius: 4px; background: #fff; padding: 2px; }
.marca-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Botón de solo ícono ---------- */
.icono-btn {
  display: inline-grid; place-items: center; flex: none;
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--r);
  background: transparent; color: inherit; cursor: pointer;
}
.icono-btn:hover { background: rgba(255, 255, 255, .08); }

/* ---------- Menú lateral ---------- */
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 40;
  width: var(--ancho-menu);
  display: flex; flex-direction: column;
  padding: var(--e4) var(--e3);
  background: var(--grafito); color: var(--menu-texto);
  overflow-y: auto;
}
.sidebar-cabeza { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); padding: var(--e1) var(--e1) 0; margin-bottom: var(--e5); }
.sidebar-cerrar { display: none; color: var(--menu-texto); }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: var(--e3);
  min-height: 40px; padding: var(--e2) 10px;
  border-radius: var(--r-s); border-left: 3px solid transparent;
  color: var(--menu-texto); text-decoration: none; font-size: 14px; font-weight: 500;
  transition: background-color .15s, color .15s;
}
.nav-item .icono { width: 18px; height: 18px; }
.nav-item:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.nav-item[aria-current="page"] {
  background: var(--grafito-2); color: #fff; font-weight: 600;
  border-left-color: var(--acento-claro);
}
.nav-item[aria-current="page"] .icono { color: var(--acento-claro); }

.sidebar-pie { margin-top: auto; padding-top: var(--e5); display: flex; flex-direction: column; gap: var(--e3); }
.nav-soporte { background: rgba(183, 121, 31, .16); color: #F2C77A; }
.nav-soporte:hover { background: rgba(183, 121, 31, .28); color: #FFE0A6; }

.usuario {
  display: flex; align-items: center; gap: 10px;
  padding: 10px var(--e2) 0; border-top: 1px solid var(--grafito-2);
}
.usuario-avatar {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--grafito-2); color: #fff; font-size: 13px; font-weight: 600;
}
.usuario-datos { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.usuario-nombre { color: #fff; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usuario-rol { font-size: 12px; color: var(--menu-tenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usuario form { margin: 0; }
.usuario .icono-btn { width: 36px; height: 36px; color: var(--menu-texto); }
.usuario .icono-btn:hover { color: #fff; }
.firma { padding: 0 var(--e2); font-size: 11px; color: var(--menu-tenue); letter-spacing: .02em; }

/* ---------- Barra superior (tablet y celular) ---------- */
.topbar {
  display: none;
  position: sticky; top: 0; z-index: 30;
  height: var(--alto-topbar);
  align-items: center; justify-content: space-between; gap: var(--e3);
  padding: 0 var(--e2) 0 var(--e4);
  background: var(--grafito); color: #fff;
}

/* ---------- Barra inferior (celular) ---------- */
.bottom-nav {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  height: calc(var(--alto-bottom) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--superficie); border-top: 1px solid var(--borde);
  box-shadow: 0 -2px 10px rgba(22, 23, 28, .05);
}
.bottom-nav a {
  flex: 1; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--texto-2); text-decoration: none; font-size: 11px; font-weight: 500;
}
.bottom-nav a .icono { width: 22px; height: 22px; }
.bottom-nav a[aria-current="page"] { color: var(--acento-tinta); font-weight: 700; }
.bottom-nav a[aria-current="page"]::before {
  content: ""; position: absolute; top: 0; left: 28%; right: 28%;
  height: 3px; border-radius: 0 0 3px 3px; background: var(--acento);
}

/* Velo detrás del cajón */
.velo { position: fixed; inset: 0; z-index: 35; background: rgba(22, 23, 28, .45); }

/* ---------- Contenido ---------- */
.contenido {
  padding: var(--e5) var(--e6) var(--e6);
  max-width: 1440px;
}
.sidebar ~ .contenido { margin-left: var(--ancho-menu); }

/* ---------- Tablet: menú colapsable ---------- */
@media (max-width: 1023px) {
  .topbar { display: flex; }
  .sidebar {
    width: min(280px, 84vw);
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: var(--sombra-3);
    visibility: hidden;
  }
  .menu-abierto .sidebar { transform: none; visibility: visible; }
  .sidebar-cerrar { display: inline-grid; }
  .sidebar ~ .contenido { margin-left: 0; }
  .contenido { padding: var(--e5) var(--e5) var(--e6); }
  .menu-abierto { overflow: hidden; }
}

/* ---------- Celular: barra inferior ---------- */
@media (max-width: 640px) {
  .bottom-nav { display: flex; }
  .contenido { padding: var(--e4) var(--e4) var(--e5); }
  .bottom-nav ~ .contenido { padding-bottom: calc(var(--alto-bottom) + var(--e5) + env(safe-area-inset-bottom, 0px)); }
  h1 { font-size: var(--t-xl); }
}