/* ============================================================
   DANGOFE OS LIQUID V2 — layout.css
   Contenedor exterior, grid principal, sidebar, topbar, footer
   ============================================================ */

/* ------------------------------------------------------------
   1. CONTENEDOR EXTERIOR REDONDEADO
   ------------------------------------------------------------ */
.app-shell {
  position: fixed;
  /* Márgenes fluidos que respetan las áreas seguras (notch, barras del sistema) */
  top: max(var(--app-margin), env(safe-area-inset-top));
  right: max(var(--app-margin), env(safe-area-inset-right));
  bottom: max(var(--app-margin), env(safe-area-inset-bottom));
  left: max(var(--app-margin), env(safe-area-inset-left));
  z-index: var(--z-shell);
  border-radius: var(--radius-outer);
  border: 1px solid var(--border-app);
  /* Transparente: deja ver el fondo HD/4K (wallpaper-layer) y los efectos
     3D (effects-layer) situados detrás. El marco (borde, radio y sombra)
     conserva la silueta de tarjeta flotante del diseño aprobado. */
  background: transparent;
  box-shadow: var(--shadow-app), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: background var(--t-med), border-color var(--t-med);
}

/* Fase 3D.1 — en claro el armazón no lleva marco blanco: borde neutro
   (var(--border-app)) y solo un reflejo superior ligero. */
[data-theme="light"] .app-shell {
  box-shadow:
    var(--shadow-app),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* Cuerpo: sidebar + área principal */
.app-body {
  flex: 1;
  display: flex;
  min-height: 0;
  position: relative;
}

/* ------------------------------------------------------------
   2. CAPAS VISUALES DE FONDO (arquitectura Fase 3)
   Separa el fondo HD/4K (wallpaper-layer, SIEMPRE visible en todas
   las rutas) de la capa de efectos 3D (effects-layer), que se
   activa/desactiva por configuración y ruta sin afectar al fondo.
   Ambas son capas fijas a pantalla completa, detrás del app-shell.
   ------------------------------------------------------------ */
.wallpaper-layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-wallpaper);
  pointer-events: none;
  overflow: hidden;
}

.effects-layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-effects);
  pointer-events: none;
  overflow: hidden;
}

/* Oculta ÚNICAMENTE los efectos 3D; el fondo permanece siempre visible. */
.effects-layer.effects-hidden {
  display: none;
}

.effects-layer canvas,
.effects-layer .lava-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.effects-layer .lava-fallback {
  object-fit: cover;
  opacity: 0.9;
  display: none;
  /* Tinte armonizable: cuando no hay WebGL, la imagen estática rota
     su tono hacia la paleta adaptada (--fallback-hue/--fallback-sat,
     publicadas por lava-scene.js) para no quedar siempre naranja. */
  filter: hue-rotate(var(--fallback-hue, 0deg)) saturate(var(--fallback-sat, 1));
}

.effects-layer.is-fallback canvas {
  display: none;
}
.effects-layer.is-fallback .lava-fallback {
  display: block;
}

/* Imagen de fondo configurable (wallpaper HD/4K).
   background-manager.js asigna la imagen y la posición. */
.wallpaper-layer .bg-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: var(--bg-pos, center);
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity var(--t-slow);
  /* Ajustes manuales de la imagen (brillo / saturación) */
  filter: brightness(var(--bg-brightness, 1)) saturate(var(--bg-saturation, 1));
}
.wallpaper-layer .bg-image.is-visible {
  opacity: 1;
}
/* Capa de oscurecimiento manual sobre la imagen (0–1) */
.wallpaper-layer .bg-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, var(--bg-darken, 0));
  transition: background var(--t-slow);
}

/* Vistas de módulo: transparentes para dejar ver el fondo detrás
   del contenido, con altura completa para el scroll interno. */
.module-view {
  position: relative;
  background: transparent;
  min-width: 0;
  min-height: 100%;
}

/* Nota Fase 1B.1: en tema claro ya NO se atenúa la capa completa;
   el shader aplica un preset específico (saturación, glow, contraste
   y máscara localizada) para que el volcán conserve presencia. */

/* ------------------------------------------------------------
   3. SIDEBAR
   ------------------------------------------------------------ */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: var(--space-4) var(--space-2);
  gap: var(--space-2);
  background: rgba(var(--glass-rgb), 0.35);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border-right: 1px solid var(--border-soft);
  z-index: var(--z-sidebar);
  transition: width var(--t-med), transform var(--t-med);
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar.is-expanded {
  width: var(--sidebar-w-expanded);
}

/* Logo */
.sidebar__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-2) 0 var(--space-5);
  color: var(--text-primary); /* Fase 3C.1: negro en claro / blanco en oscuro */
}
.sidebar__logo svg {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), 0.30));
}
.sidebar__logo-text {
  display: none;
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--text-primary);
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.sidebar.is-expanded .sidebar__logo {
  justify-content: flex-start;
  padding-left: var(--space-3);
}
.sidebar.is-expanded .sidebar__logo-text {
  display: block;
}

/* Navegación */
.sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
}

.sidebar__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 46px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  transition: background var(--t-fast), color var(--t-fast);
  white-space: nowrap;
}
.sidebar__item svg {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
}
.sidebar__item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.sidebar__label {
  display: none;
  font-size: var(--fs-sm);
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar.is-expanded .sidebar__item {
  justify-content: flex-start;
  padding-left: var(--space-4);
}
.sidebar.is-expanded .sidebar__label {
  display: block;
}

/* Insignia de conteo (p. ej. novedades no leídas) — Fase 3B.
   Colapsado: pequeña burbuja sobre el icono. Expandido: alineada a la derecha. */
.sidebar__badge {
  position: absolute;
  top: 6px;
  right: 8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--color-danger);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--bg-app);
}
.sidebar.is-expanded .sidebar__badge {
  position: static;
  margin-left: auto;
  box-shadow: none;
}

/* Ítem activo: glow con la paleta adaptable + barra indicadora */
/* Fase 3C.1: activo con el acento del tema (negro en claro / blanco en
   oscuro; se tiñe solo si el usuario activa la paleta adaptable) */
.sidebar__item.is-active {
  color: rgb(var(--accent-rgb));
  background: rgba(var(--accent-rgb), 0.10);
  box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.12),
    inset 0 0 10px rgba(var(--accent-rgb), 0.05);
}
.sidebar__item.is-active::after {
  content: '';
  position: absolute;
  right: -9px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 22px;
  border-radius: 3px;
  background: rgb(var(--accent-rgb));
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.55);
}

/* Sección inferior */
.sidebar__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-soft);
}

.sidebar__avatar {
  width: 38px;
  height: 38px;
  margin: var(--space-2) auto 0;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  /* Fase 3C.1: neutro por tema (claro: negro/blanco · oscuro: blanco/negro) */
  background: var(--action-primary-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--action-primary-text);
  font-weight: 700;
  font-size: var(--fs-sm);
  flex-shrink: 0;
}
.sidebar.is-expanded .sidebar__avatar {
  margin-left: var(--space-4);
}

.sidebar__status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--space-2) 0;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.sidebar__status .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-success);
  box-shadow: 0 0 8px var(--color-success);
}
.sidebar__status-text {
  display: none;
}
.sidebar.is-expanded .sidebar__status-text {
  display: inline;
}

/* Botón colapsar/expandir */
.sidebar__toggle {
  margin-top: var(--space-1);
}

/* Backdrop del drawer móvil */
.sidebar-backdrop {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: var(--z-drawer-backdrop);
  opacity: 0;
  transition: opacity var(--t-med);
}
.sidebar-backdrop.is-visible {
  opacity: 1;
}

/* ------------------------------------------------------------
   4. ÁREA PRINCIPAL
   ------------------------------------------------------------ */
.main-area {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: var(--z-content);
}

/* ------------------------------------------------------------
   5. TOPBAR
   ------------------------------------------------------------ */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  flex-shrink: 0;
}

.topbar__title {
  font-size: var(--fs-xl);
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Protección de legibilidad automática: con una imagen de fondo
   oscura activa, el título del topbar pasa a claro (lo controla
   background-manager.js según la luminancia del fondo). */
.has-dark-bg .topbar__title {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Grupo de botones de tema (sol / luna / auto) */
.theme-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-pill);
}
.theme-switch__btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: background var(--t-fast), color var(--t-fast);
}
.theme-switch__btn svg {
  width: 17px;
  height: 17px;
}
.theme-switch__btn:hover {
  color: var(--text-primary);
}
.theme-switch__btn.is-active {
  background: var(--bg-hover);
  color: var(--accent);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.2);
}

/* Selector de sucursal */
.branch-select {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.branch-select svg {
  width: 15px;
  height: 15px;
}
.branch-select.is-hidden {
  display: none;
}

/* ------------------------------------------------------------
   6. CONTENIDO DE VISTA (scroll)
   ------------------------------------------------------------ */
.view-container {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 var(--space-6) var(--space-5);
}

/* Placeholder de módulos pendientes */
.module-placeholder {
  max-width: 520px;
  margin: 10vh auto 0;
  padding: var(--space-8);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.module-placeholder svg {
  width: 54px;
  height: 54px;
  color: var(--accent);
  filter: drop-shadow(0 0 14px var(--accent-soft));
}
.module-placeholder h2 {
  font-size: var(--fs-xl);
  font-weight: 600;
}
.module-placeholder p {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
}

/* ------------------------------------------------------------
   7. FOOTER
   ------------------------------------------------------------ */
.footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-6);
  border-top: 1px solid var(--border-soft);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  background: rgba(var(--glass-rgb), 0.3);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  position: relative;
  z-index: var(--z-content);
}

.footer__status {
  display: flex;
  align-items: center;
  gap: 6px;
}
.footer__status .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-success);
  box-shadow: 0 0 8px var(--color-success);
  animation: pulse-dot 2.5s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  color: var(--text-secondary);
}

.footer__clock {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.footer__clock svg {
  width: 13px;
  height: 13px;
}
.footer__clock span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}