/* ===========================================================================
   public/css/layout.css
   Esqueleto del dashboard: shell de pagina, sidebar, barra superior y area de contenido.

   Parte 3 de 12 de la hoja de estilos. El orden de carga IMPORTA:
   se enlazan en este mismo orden desde index.html y dashboard.html.
   =========================================================================== */
/* ===== 4. LAYOUT — PAGE SHELL (Dashboard) ===== */
.page-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

.content-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow: hidden;
}

/* ===== 5. SIDEBAR ===== */
.sidebar {
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  width: var(--sidebar-w);
  height: 100vh;
  overflow-y: auto;
  z-index: 100;
  flex-shrink: 0;
  transition: transform var(--transition);
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1.25rem 1rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.sidebar-logo-icon {
  width: auto;
  height: auto;
  max-width: 140px;
  background: transparent;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
  overflow: hidden;
}

.sidebar-logo-img {
  width: auto !important;
  height: auto !important;
  max-width: 140px;
  max-height: 56px;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

.sidebar-logo-fallback {
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.sidebar-logo-text strong {
  display: block;
  font-size: .95rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: .03em;
}

.sidebar-logo-text span {
  font-size: .72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.sidebar-nav {
  flex: 1;
  padding: .75rem 0;
}

.sidebar-section-label {
  padding: .5rem 1rem .25rem;
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .6rem 1rem;
  margin: 1px .5rem;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: none;
  width: calc(100% - 1rem);
  text-align: left;
  transition: background var(--transition), color var(--transition);
  border-left: 3px solid transparent;
}

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

/* EL ENLACE ACTIVO USA EL NARANJA DE LA IDENTIDAD, NO EL VERDE
   Antes el fondo, el texto y el filete eran verdes mientras el ícono ya era
   naranja: dos acentos distintos en un mismo elemento.

   Y el verde no era neutral. En este sistema significa «Aprobada» y
   «Confirmada»: es un color con significado en la máquina de estados. Usarlo
   además para decir «acá estás parado» lo sobrecarga, y hace que una insignia
   verde y una sección activa se lean como si tuvieran algo que ver.

   El naranja no compite con ningún estado y ya es el acento de la casa: el
   filete bajo cada título de tarjeta, y el que el PDF dibuja antes de cada
   sección de la proforma. Que la navegación lo use también hace que la marca
   aparezca en los tres lugares donde uno mira. */
.sidebar-link.active {
  background: var(--badge-bg-orange);
  color: var(--clr-orange-soft);
  border-left-color: var(--clr-orange);
  font-weight: 600;
}

/* El icono de un enlace de la barra. Antes era un emoji dentro de un <span>,
   asi que se dimensionaba con font-size; ahora es un SVG y se dimensiona con
   width/height.

   `currentColor` en el trazo hace que herede el color del enlace, y por eso
   basta con teñir el enlace activo para que el icono lo acompañe. Un icono con
   color propio obligaria a mantener dos versiones o a aceptar que en el estado
   activo se vea apagado. */
.sidebar-link .link-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: .85;
}

/* En el enlace activo el icono toma el naranja de la identidad: es el mismo
   acento que marca las secciones en el PDF y en las tarjetas. */
.sidebar-link.active .link-icon {
  color: var(--clr-orange);
  opacity: 1;
}

.sidebar-link-logout {
  color: var(--clr-red) !important;
  margin-top: .25rem;
}

.sidebar-link-logout:hover {
  background: rgba(239,68,68,.1) !important;
  color: var(--clr-red) !important;
}

.sidebar-footer {
  padding: 1rem;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: .6rem;
  overflow: hidden;
}

.sidebar-avatar {
  width: 32px; height: 32px;
  background: linear-gradient(135deg, var(--clr-blue), var(--clr-blue-deep));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 700; color: var(--clr-white);
  flex-shrink: 0;
}

.sidebar-user-info { overflow: hidden; }
.sidebar-user-info strong { display: block; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-info small  { color: var(--text-muted); font-size: .7rem; }

/* ===== 6. TOP BAR ===== */
.topbar {
  height: var(--topbar-h);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1.5rem;
  position: sticky;
  top: 0;
  z-index: 90;
  flex-shrink: 0;
}

.topbar-menu-btn {
  display: none;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.25rem;
  cursor: pointer;
  padding: .25rem;
  border-radius: var(--radius-sm);
}

.topbar-menu-btn:hover { background: var(--bg-hover); color: var(--text-primary); }

.topbar-title {
  font-size: 1rem;
  font-weight: 600;
  flex: 1;
  color: var(--text-primary);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.topbar-username {
  font-size: .875rem;
  color: var(--text-secondary);
}

/* ===== 7. MAIN PAGE CONTENT ===== */
.page-content {
  flex: 1;
  overflow-y: auto;
  padding: 1.75rem;
  background: var(--bg-deep);
}