/* Shell de la aplicación (UI-002): topbar, sidebar, área de contenido y footer.

   Se carga entre theme.css y site.css. Todo el color sale de los tokens --zw-* de UI-001: en este
   archivo no hay un solo valor de color literal, así que cambiar la paleta sigue siendo un cambio
   de un único archivo.

   Estructura:
     1. Estructura general (body en columna, shell en fila)
     2. Skip link
     3. Topbar
     4. Sidebar y navegación
     5. Contenido
     6. Footer
     7. Íconos y botones del shell */

/* ============================================================================
   1. ESTRUCTURA GENERAL
   ============================================================================
   El footer queda al final por layout y no por position:absolute (como hacía el scaffold): con
   min-height 100vh y el shell tomando el sobrante, una página corta lo empuja al pie de la ventana
   y una larga lo deja después del contenido, sin necesidad de reservar altura en el body. */

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

.zw-shell {
  display: flex;
  flex: 1 0 auto;
  align-items: stretch;
  /* min-width en el shell y en el contenido: sin esto un descendiente ancho (una tabla, el canvas
     del dashboard) infla la columna flexible y desborda la página horizontalmente. */
  min-width: 0;
}

/* ============================================================================
   2. SKIP LINK
   ============================================================================ */

.zw-skip-link {
  position: absolute;
  top: 0;
  left: -9999px;
  z-index: 1080;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--zw-accent);
  border-radius: var(--bs-border-radius);
  background-color: var(--zw-elevated);
  color: var(--zw-text);
  text-decoration: none;
}

.zw-skip-link:focus {
  top: 0.5rem;
  left: 0.5rem;
}

/* ============================================================================
   3. TOPBAR
   ============================================================================ */

.zw-topbar {
  position: sticky;
  top: 0;
  /* 1030 = el z-index que Bootstrap usa para navbars fijos; queda por debajo del backdrop del
     offcanvas (1040) y de los modales. */
  z-index: 1030;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  height: 56px;
  padding: 0 1rem;
  border-bottom: 1px solid var(--zw-border);
  background-color: var(--zw-surface);
}

/* En un teléfono angosto el padding lateral compite con el email del menú de usuario, que ya se
   recorta con puntos suspensivos: se recuperan 8px para el contenido (UI-004). */
@media (max-width: 575.98px) {
  .zw-topbar {
    padding: 0 0.75rem;
  }
}

.zw-topbar-start,
.zw-topbar-end {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.zw-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--zw-text);
  font-weight: 600;
  text-decoration: none;
}

a.zw-brand:hover {
  color: var(--zw-accent);
}

.zw-brand-mark {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--zw-accent);
}

.zw-brand-text {
  white-space: nowrap;
}

/* ============================================================================
   4. SIDEBAR Y NAVEGACIÓN
   ============================================================================
   El elemento es un .offcanvas-lg de Bootstrap: por debajo de 992px es un panel deslizante y por
   encima un bloque normal, que acá se fija como columna. */

.zw-sidebar {
  /* Variables del propio componente offcanvas: así el panel de mobile toma la paleta del tema sin
     reescribir sus reglas.

     El ancho es un min() y no 260px fijos (UI-004): en un teléfono de 320px el panel dejaba 60px de
     backdrop, y cerrarlo tocando afuera —que es el gesto natural— era casi imposible. */
  --bs-offcanvas-width: min(260px, 82vw);
  --bs-offcanvas-bg: var(--zw-surface);
  --bs-offcanvas-border-color: var(--zw-border);
  --bs-offcanvas-color: var(--zw-text);
  background-color: var(--zw-surface);
}

.zw-sidebar .zw-sidebar-body {
  padding: 1rem 0.75rem;
}

@media (min-width: 992px) {
  .zw-sidebar {
    position: sticky;
    /* Arranca donde termina el topbar y ocupa exactamente el resto de la ventana: la navegación
       queda visible aunque el contenido scrollee. */
    top: 56px;
    flex: 0 0 240px;
    width: 240px;
    height: calc(100vh - 56px);
    overflow-y: auto;
    border-right: 1px solid var(--zw-border);
    /* !important porque a partir de este breakpoint Bootstrap fuerza
       "background-color: transparent !important" sobre .offcanvas-lg y su body: es la única forma
       de recuperar la superficie del sidebar sin dejar de usar el componente. */
    background-color: var(--zw-surface) !important;
  }

  /* Mismo caso: Bootstrap pasa el body del offcanvas a display:flex y padding 0 en desktop, lo que
     acostaría las secciones de la navegación en una fila. */
  .zw-sidebar .zw-sidebar-body {
    display: block;
    padding: 1rem 0.75rem;
    background-color: transparent;
  }
}

.zw-nav-section {
  margin: 0 0 0.375rem;
  padding: 0 0.625rem;
  color: var(--zw-text-dim);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.zw-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

.zw-nav:last-child {
  margin-bottom: 0;
}

.zw-nav-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  /* El borde transparente está también en el estado normal para que marcar el ítem activo no
     corra el texto dos píxeles. */
  border-left: 2px solid transparent;
  border-radius: var(--bs-border-radius);
  color: var(--zw-text-muted);
  font-size: 0.8125rem;
  line-height: 1.25rem;
  text-decoration: none;
}

.zw-nav-link:hover {
  background-color: var(--zw-hover);
  color: var(--zw-text);
}

.zw-nav-link.active {
  border-left-color: var(--zw-accent);
  background-color: var(--zw-accent-bg);
  color: var(--zw-accent);
}

/* Por debajo de 992px la navegación vive en el panel deslizante y se toca con el dedo, no con el
   mouse. Con el root en 14px (ver site.css) el ítem mide 36px de alto y los once entradas quedan
   pegadas una a otra (UI-004). */
@media (max-width: 991.98px) {
  .zw-nav-link {
    min-height: 44px;
  }
}

/* ============================================================================
   5. CONTENIDO
   ============================================================================ */

.zw-content {
  flex: 1 1 auto;
  min-width: 0;
  padding: 1.25rem 1rem;
  /* El skip link enfoca #zw-main, que es tabindex="-1": sin margen de scroll el topbar sticky
     taparía el arranque del contenido justo después del salto. */
  scroll-margin-top: 56px;
}

/* El foco de #zw-main viene siempre de ese salto programático, nunca de tabular: dibujar el anillo
   ahí marcaría media pantalla sin aportar nada. */
.zw-content:focus {
  outline: none;
}

/* Escalón intermedio (UI-004): entre el teléfono y el desktop hay un tramo de 768 a 991px —tablet en
   portrait, ventana a media pantalla— donde 1rem deja el contenido pegado al borde y 2rem le come
   demasiado ancho a las tablas, que son lo que más sufre en ese rango. */
@media (min-width: 768px) {
  .zw-content {
    padding: 1.5rem;
  }
}

@media (min-width: 992px) {
  .zw-content {
    padding: 1.75rem 2rem;
  }
}

/* ============================================================================
   6. FOOTER
   ============================================================================ */

.zw-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  padding: 0.875rem 1rem;
  border-top: 1px solid var(--zw-border);
  background-color: var(--zw-surface);
  color: var(--zw-text-muted);
  font-size: 0.75rem;
}

.zw-footer a {
  color: var(--zw-text-muted);
  text-decoration: none;
}

.zw-footer a:hover {
  color: var(--zw-accent);
  text-decoration: underline;
}

/* ============================================================================
   7. ÍCONOS Y BOTONES DEL SHELL
   ============================================================================ */

/* El sprite de _Icons.cshtml: define los símbolos, no dibuja nada. */
.zw-icon-sprite {
  display: none;
}

.zw-icon {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
}

/* Botón cuadrado solo con ícono (el ☰ del topbar). */
.zw-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--bs-border-radius);
  background-color: transparent;
  color: var(--zw-text-muted);
}

.zw-icon-button:hover {
  background-color: var(--zw-hover);
  color: var(--zw-text);
}

/* El ☰ solo existe por debajo de 992px, y ahí es el único acceso a la navegación entera: 36px es
   chico para el dedo (UI-004). No se toca el ícono, solo el área que lo rodea. */
@media (max-width: 991.98px) {
  .zw-icon-button {
    width: 44px;
    height: 44px;
  }
}

.zw-user-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 260px;
  padding: 0.375rem 0.625rem;
  border: 1px solid transparent;
  border-radius: var(--bs-border-radius);
  background-color: transparent;
  color: var(--zw-text-muted);
  font-size: 0.8125rem;
}

.zw-user-button:hover {
  border-color: var(--zw-border);
  background-color: var(--zw-hover);
  color: var(--zw-text);
}

/* Un email largo no puede empujar el topbar: se recorta con puntos suspensivos. */
.zw-user-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.zw-user-caption {
  color: var(--zw-text-muted);
  font-size: 0.8125rem;
}

.zw-user-logout {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}