/* ══════════════════════════════════════════
   LOGIN SCREEN
   #login-screen es el login de Digital Core (Hub). .auth-screen reutiliza el
   mismo lienzo (rejilla + tarjeta) en las apps: error de arranque de Portfolio
   IA y páginas «en construcción».
══════════════════════════════════════════ */

#login-screen,
.auth-screen {
  position: fixed; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--bg);
  z-index: 1000;
  transition: opacity 0.5s, visibility 0.5s;
}

#login-screen.hidden,
.auth-screen.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.login-bg {
  position: absolute; inset: 0; overflow: hidden;
}

.login-bg::before {
  content: '';
  position: absolute; top: -40%; left: -20%;
  width: 80%; height: 80%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--accent) 15%, transparent) 0%, transparent 70%);
}

.login-bg::after {
  content: '';
  position: absolute; bottom: -30%; right: -10%;
  width: 60%; height: 60%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--green) 8%, transparent) 0%, transparent 70%);
}

.login-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--border) 1px, transparent 1px),
                    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.4;
}

.login-card {
  position: relative; z-index: 1;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-lg);
  padding: 48px 48px 40px;
  width: 420px;
  animation: fadeUp 0.6s ease both;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.login-logo {
  display: flex; align-items: center; gap: 12px; margin-bottom: 40px;
}

.login-logo .logo-mark {
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

.login-logo .logo-mark img { width: 100%; height: 100%; object-fit: cover; }

.login-logo .logo-text {
  font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--text);
  line-height: 1.2;
}

.login-logo .logo-text span { font-size: 11px; font-weight: 400; color: var(--text2); display: block; }

.login-card h1 { font-family: var(--font-display); font-size: 26px; font-weight: 600; margin-bottom: 8px; }

.login-card p  { color: var(--text2); font-size: 14px; margin-bottom: 36px; }

.ms-btn {
  width: 100%; padding: 14px 20px;
  background: var(--accent);
  border: none; border-radius: var(--radius);
  color: var(--on-accent); font-size: 14px; font-weight: 500;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: background-color 160ms ease-out, transform 120ms ease-out;
}

@media (hover: hover) and (pointer: fine) {
  .ms-btn:hover { background: var(--accent2); }
}

.ms-btn:active { transform: scale(0.98); }

.ms-btn svg { width: 20px; height: 20px; flex-shrink: 0; }

.login-footer { margin-top: 24px; text-align: center; font-size: 11px; color: var(--text3); }

/* Acciones dentro de la tarjeta (error de arranque, página «en construcción»):
   mismo ancho y alineación que el botón de login. */
.login-card .btn-primary,
.login-card .btn-secondary { width: 100%; justify-content: center; padding: 12px 20px; font-size: 14px; }

.login-card > .badge { margin-bottom: 14px; }

/* ══════════════════════════════════════════
   APP SHELL
══════════════════════════════════════════ */

#app { display: block; height: 100vh; overflow: hidden; }

#app.hidden { display: none; }

/* Reveal del shell coordinado con la salida del intro. Un único movimiento
   monotónico: zoom-in suave + desenfoque que se aclara, sin overshoots ni
   capas competidoras. Misma curva de easing que el intro para encadenar de
   forma natural. */
#app.app-entering {
  position: relative;
}

#app.app-entering .sidebar,
#app.app-entering .main,
#app.app-entering .content {
  /* Easing común con el intro exit (cubic-bezier(0.4, 0, 0.2, 1)) para que la
     velocidad sea continua entre las dos animaciones. */
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-fill-mode: both;
  backface-visibility: hidden;
}

#app.app-entering .sidebar {
  animation-name: appShellEnter;
  animation-duration: 1.1s;
  will-change: transform, opacity;
}

/* .main solo DESVANECE (opacity): nunca transform ni will-change:transform,
   porque contiene el .topbar fijo y cualquiera de los dos lo convertiría en su
   bloque contenedor, haciendo que la barra se vea corta durante la animación
   (el "salto" al cambiar de entorno). El gesto de escala se aplica al
   contenido, que no contiene la barra. */
#app.app-entering .main {
  animation-name: appShellFade;
  animation-duration: 1.2s;
  will-change: opacity;
}

#app.app-entering .content {
  animation-name: appShellEnter;
  animation-duration: 1.2s;
  transform-origin: 50% 45%;
  will-change: transform, opacity;
}

/* Animación única, sin keyframes intermedios ni overshoot: el navegador
   interpola linealmente entre 0% y 100% con la curva indicada, eliminando
   cualquier sensación de "tirón" o paso adicional. */
@keyframes appShellEnter {
  0% {
    opacity: 0;
    transform: scale(0.975);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Solo opacidad, para .main (contiene el topbar fijo). */
@keyframes appShellFade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  #app.app-entering .sidebar,
  #app.app-entering .main,
  #app.app-entering .content {
    animation-duration: 0.01s !important;
  }
}

/* SIDEBAR */

.sidebar {
  position: fixed; z-index: 40;
  top: 12px; bottom: 12px; left: 12px;
  width: var(--sidebar-w); flex-shrink: 0;
  background: color-mix(in srgb, var(--bg2) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--border2) 70%, transparent);
  border-radius: 18px;
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--surface-white) 5%, transparent) inset,
    0 0 0 1px color-mix(in srgb, var(--surface-white) 2%, transparent) inset,
    0 18px 48px color-mix(in srgb, var(--shadow-color) 28%, transparent);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  display: flex; flex-direction: column;
  overflow: hidden;
  transform-origin: left center;
  transition: width 0.34s cubic-bezier(0.22,1,0.36,1), box-shadow 0.34s ease, background-color 0.34s ease, border-color 0.34s ease;
  will-change: width;
}

.sidebar.collapsed {
  width: 64px;
  box-shadow: 0 12px 30px color-mix(in srgb, var(--shadow-color) 20%, transparent);
}

.sidebar-header {
  height: var(--header-h); padding: 0 11px;
  display: flex; align-items: center; justify-content: flex-start; gap: 10px;
  border-bottom: 1px solid var(--border);
  transition: gap 0.34s cubic-bezier(0.22,1,0.36,1);
}

.sidebar.collapsed .sidebar-header { padding: 0 11px; justify-content: flex-start; gap: 0; }

.sidebar-logo {
  /* Mismo tamaño y radio que el botón de pliegue (.sidebar-toggle: 40×40). */
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.2s ease, transform 0.24s ease, width 0.34s cubic-bezier(0.22,1,0.36,1);
}

.sidebar-title {
  font-family: var(--font-display); font-size: 14px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.2;
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.18s ease, transform 0.24s ease;
}

.sidebar-title span { font-size: 10px; font-weight: 400; color: var(--text2); display: block; }

.sidebar-toggle {
  order: -1; width: 40px; height: 40px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: transparent; color: var(--text2);
  display: flex; align-items: center; justify-content: center;
  transition: background-color 160ms ease-out, color 160ms ease-out, transform 120ms ease-out;
  flex-shrink: 0;
}

@media (hover: hover) and (pointer: fine) {
  .sidebar-toggle:hover { background: var(--bg3); color: var(--text); }
}

.sidebar-toggle:active { transform: scale(0.92); }

.sidebar-toggle svg { width: 14px; height: 14px; }

.sidebar.collapsed .sidebar-title,
.sidebar.collapsed .user-card > div:not(.user-avatar) {
  display: block;
  opacity: 0;
  transform: translateX(-6px);
  pointer-events: none;
  width: 0;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.sidebar.collapsed .sidebar-logo {
  width: 0;
  opacity: 0;
  transform: scale(0.85);
  overflow: hidden;
  pointer-events: none;
}

.sidebar.collapsed .sidebar-toggle { margin: 0; }

.sidebar-nav { flex: 1; padding: 12px 8px; overflow-y: auto; overflow-x: hidden; }

.nav-section {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 0;
}
.sidebar.collapsed .nav-section {
  gap: 3px;
  margin-bottom: 0;
}

.sidebar-divider {
  width: calc(100% - 20px);
  height: 1px;
  margin: 14px 10px;
  background: var(--border2);
  transition: width 0.34s cubic-bezier(0.22,1,0.36,1);
}

.sidebar.collapsed .sidebar-divider {
  width: 22px;
  margin: 14px auto;
  background: var(--border2);
}

.nav-label { display: none !important; }

.nav-item {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  /* Mismo padding horizontal (14px) desplegada y plegada: el icono queda en la
     misma x en ambos estados (centrado en los 64px de la barra plegada) y no se
     desplaza durante la animación; solo el texto aparece/desaparece. */
  padding: 0 14px; border-radius: var(--radius-sm);
  cursor: pointer;
  height: 38px; min-height: 38px;
  box-sizing: border-box;
  font-size: 13px; color: var(--text2); border: none; background: none;
  width: 100%; text-align: left;
  white-space: nowrap;
  transform: scale(1);
  transform-origin: center center;
  transition:
    padding 0.34s cubic-bezier(0.22,1,0.36,1),
    gap 0.34s cubic-bezier(0.22,1,0.36,1),
    background-color 160ms ease-out,
    color 160ms ease-out,
    transform 180ms cubic-bezier(0.22,1,0.36,1);
  will-change: transform;
}

/* Colapsado: altura idéntica (38px) y padding horizontal simétrico (14px)
   para que el icono quede perfectamente centrado (46px - 18px)/2 = 14px */
.sidebar.collapsed .nav-item {
  padding: 0 14px;
  gap: 0;
  height: 38px;
  min-height: 38px;
}

.nav-item .nav-icon {
  width: 18px; height: 18px; min-width: 18px; flex: 0 0 18px;
  opacity: 0.7;
  color: currentColor;
  transform: scale(1);
  transform-origin: center center;
  transition:
    transform 180ms cubic-bezier(0.22,1,0.36,1),
    opacity 160ms ease-out,
    color 160ms ease-out;
}
.sidebar.collapsed .nav-item .nav-icon {
  width: 18px; height: 18px; min-width: 18px; flex: 0 0 18px;
}
.nav-item.active .nav-icon {
  opacity: 1;
  color: var(--accent);
}

.nav-item .nav-text {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 1;
  transform: translateX(0);
  max-width: 160px;
  transition:
    opacity 0.2s ease,
    transform 0.24s ease,
    color 160ms ease-out,
    max-width 0.34s cubic-bezier(0.22,1,0.36,1);
}

.sidebar.collapsed .nav-item .nav-text {
  opacity: 0;
  max-width: 0;
  transform: translateX(-6px);
  pointer-events: none;
}

.nav-badge {
  margin-left: auto; font-size: 10px; font-weight: 500;
  background: var(--bg4); color: var(--text2);
  padding: 2px 6px; border-radius: 10px;
  opacity: 1; transform: translateX(0);
  max-width: 32px; overflow: hidden; white-space: nowrap;
  transition:
    opacity 0.2s ease,
    transform 0.24s ease,
    background-color 160ms ease-out,
    color 160ms ease-out,
    max-width 0.34s cubic-bezier(0.22,1,0.36,1),
    padding 0.34s cubic-bezier(0.22,1,0.36,1),
    margin 0.34s cubic-bezier(0.22,1,0.36,1);
}

.sidebar.collapsed .nav-badge {
  opacity: 0;
  max-width: 0;
  padding: 0;
  margin: 0;
  transform: translateX(-6px);
  pointer-events: none;
}

/* Efecto hover estilo Apple: texto e icono azul acento de la app,
   fondo suave y mini zoom (scale 1.02 / icono 1.08) por GPU sin alterar el layout */
@media (hover: hover) and (pointer: fine) {
  .nav-item:hover {
    background: var(--accent-soft);
    color: var(--accent);
    transform: scale(1.02);
    z-index: 2;
  }
  .nav-item:hover .nav-icon {
    opacity: 1;
    color: var(--accent);
    transform: scale(1.08);
  }
  .nav-item:hover .nav-text {
    color: var(--accent);
  }
  .nav-item:hover .nav-badge {
    background: var(--accent-soft);
    color: var(--accent);
  }
}

.nav-item:active { transform: scale(0.98) !important; }

.nav-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav-item.active .nav-icon { opacity: 1; color: var(--accent); }
.nav-item.active .nav-badge { background: var(--accent-soft); color: var(--accent); }

.sidebar-footer {
  padding: 16px 8px 10px; border-top: 1px solid var(--border);
}

.sidebar-logo img { width: 100%; height: 100%; object-fit: cover; }

.sidebar-create-initiative {
  width: 100%;
  max-width: 240px;
  height: 42px;
  min-height: 42px;
  margin: 0 auto 8px;
  padding: 0 14px 0 12px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--favicon-gradient);
  color: var(--on-accent);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  box-sizing: border-box;
  transition:
    max-width 0.34s cubic-bezier(0.22,1,0.36,1),
    min-width 0.34s cubic-bezier(0.22,1,0.36,1),
    padding 0.34s cubic-bezier(0.22,1,0.36,1),
    gap 0.34s cubic-bezier(0.22,1,0.36,1),
    background 160ms ease-out,
    border-color 160ms ease-out,
    transform 120ms ease-out,
    box-shadow 160ms ease-out;
}

.sidebar-create-initiative .create-initiative-mark {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  min-width: 18px;
}

.sidebar-create-initiative > span {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  max-width: 180px;
  opacity: 1;
  transform: translateX(0);
  transition:
    opacity 0.2s ease,
    transform 0.24s ease,
    max-width 0.34s cubic-bezier(0.22,1,0.36,1);
}

@media (hover: hover) and (pointer: fine) {
  .sidebar-create-initiative:hover {
    background: var(--favicon-gradient-hover);
    box-shadow: 0 4px 14px var(--favicon-glow);
  }
}

.sidebar-create-initiative:active { transform: scale(0.98); }

.sidebar.collapsed .sidebar-create-initiative {
  max-width: 42px;
  min-width: 42px;
  padding: 0 0 0 12px;
  margin: 0 auto 8px;
  gap: 0;
}

.sidebar.collapsed .sidebar-create-initiative > span {
  max-width: 0;
  opacity: 0;
  transform: translateX(-6px);
  pointer-events: none;
}

.sidebar.collapsed .user-card {
  justify-content: flex-start;
  padding: 4px 2px;
  gap: 0;
  width: 100%;
}

/* Plegada: el nombre/rol vuelven a una sola línea. El contenedor de texto se
   colapsa a width:0; si el texto pudiera envolver (white-space:normal, usado en
   expandido) se partiría a un carácter por línea y dispararía la altura de la
   tarjeta, empujando la foto hacia abajo y desalineándola del botón "+". */
.sidebar.collapsed .user-name,
.sidebar.collapsed .user-role { white-space: nowrap; }

/* Plegada: la foto de perfil crece a la misma dimensión que el CTA de crear
   iniciativa. La forma (cuadrado redondeado) ya viene del estilo base. */
.sidebar.collapsed .user-avatar {
  width: 42px; height: 42px;
  min-width: 42px;
  font-size: 15px;
}

.user-card {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 4px 2px;
  border-radius: var(--radius-sm);
  min-height: 42px;
  height: 50px;
  transition: gap 0.34s cubic-bezier(0.22,1,0.36,1), background var(--transition);
}

/* El nombre y el rol ocupan el resto del ancho y truncan con puntos
   suspensivos para no desbordar el recuadro. */
.user-card > .flex-grow-1 { flex: 1 1 auto; min-width: 0; }

.user-card > div:not(.user-avatar) {
  min-width: 0;
  transition: opacity 0.18s ease, transform 0.24s ease, max-width 0.24s ease;
}

.user-avatar {
  /* Misma altura que el CTA "Crear iniciativa" (42px) para que ambos
     recuadros queden alineados y a la misma escala en la barra lateral. */
  width: 42px; height: 42px; min-width: 42px; border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--accent2), var(--teal));
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 600; color: var(--on-accent); flex-shrink: 0;
  /* Recorta la foto contra el recuadro redondeado: evita que el degradado del
     fondo asome como un borde raro en el lado derecho de la imagen. */
  overflow: hidden;
}

/* La foto llena el recuadro sin dejar huecos (el radio lo aporta el contenedor
   vía overflow:hidden; display:block elimina la línea base inline del <img>). */
.user-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }

/* Nombre y rol en una sola línea con puntos suspensivos. Antes envolvían a
   varias líneas (white-space:normal + overflow-wrap:anywhere): al desplegar la
   barra, mientras es estrecha el texto se partía en muchas líneas y disparaba la
   altura de la tarjeta de usuario, lo que empujaba hacia arriba el botón "Crear
   iniciativa" y este "bajaba" al asentarse. En una sola línea la tarjeta mide
   siempre lo mismo (la foto, 42px) y el botón no se mueve durante el desplegado. */
.user-name { font-size: 12px; font-weight: 500; color: var(--text); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.user-role { font-size: 11px; color: var(--text2); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── USER DROPDOWN ── */

.sidebar-footer { position: relative; }

.user-card { cursor: pointer; transition: background var(--transition); }

.user-card:hover { background: var(--bg3); }

.user-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }

/* MAIN */

.main {
  height: 100vh;
  margin-left: calc(var(--sidebar-w) + 24px);
  padding-top: calc(var(--header-h) + 24px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: margin-left 0.34s cubic-bezier(0.22,1,0.36,1);
  will-change: margin-left;
}

/* Reajuste del main cuando la sidebar está colapsada */
.sidebar.collapsed ~ .main {
  margin-left: calc(64px + 24px);
}

.sidebar.collapsed ~ .main .topbar {
  left: calc(64px + 24px);
}

.topbar {
  position: fixed;
  top: 12px;
  left: calc(var(--sidebar-w) + 24px);
  right: 12px;
  z-index: 35;
  height: var(--header-h); padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
  border: 1px solid color-mix(in srgb, var(--border2) 55%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--bg2) 48%, transparent);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--surface-white) 6%, transparent) inset,
    0 4px 14px color-mix(in srgb, var(--shadow-color) 8%, transparent);
  transition: left 0.34s cubic-bezier(0.22,1,0.36,1), background-color 0.34s ease, border-color 0.34s ease;
}

/* Entorno de datos Test (Cosmos): barra superior en naranja pastel para
   diferenciarla claramente de Producción. El segundo selector gana en
   especificidad al override de la barra en modo detalle. */
body[data-cosmos-env="test"] .topbar,
body[data-cosmos-env="test"][data-detail="1"] .topbar {
  background: color-mix(in srgb, var(--cosmos-test-bar) 88%, transparent);
  border-color: color-mix(in srgb, var(--cosmos-test-bar) 65%, var(--border2));
}

.topbar-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }

/* Insignia de entorno junto al título (Entorno Test / Datos de prueba). */
.env-badge { margin-left: 10px; }
@media (max-width: 480px) { .env-badge { display: none; } }

.topbar-title {
  font-family: var(--font-display); font-size: 16px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

body[data-detail="1"] .topbar-title { font-size: 15px; }

.topbar-breadcrumb { font-size: 12px; color: var(--text2); flex-shrink: 0; }

.topbar-breadcrumb span { color: var(--text3); margin: 0 6px; }

.topbar-right { display: flex; align-items: center; gap: 8px; }

.topbar-btn {
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  background: transparent; border: 1px solid var(--border);
  color: var(--text2); display: flex; align-items: center; justify-content: center;
  transition: background-color 160ms ease-out, color 160ms ease-out, border-color 160ms ease-out, transform 120ms ease-out;
}

@media (hover: hover) and (pointer: fine) {
  .topbar-btn:hover { background: var(--bg3); color: var(--text); border-color: var(--border2); }
}

.topbar-btn:active { transform: scale(0.92); }

.topbar-btn svg { width: 16px; height: 16px; }

.topbar-btn.active { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }

.topbar-btn.add-init-btn { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-size: 18px; font-weight: 600; }

.topbar-btn.add-init-btn:hover { background: var(--accent2); border-color: var(--accent2); color: var(--on-accent); }

/* CONTENT AREA */

.content { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 28px; }

.page { display: none; }

.page.active { display: block; animation: fadeIn 0.25s ease both; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 720px) {
  .step-wrapper { width: 58px; }
  .step-label { font-size: 9px; max-width: 58px; }
  .step-circle { width: 26px; height: 26px; font-size: 10px; }
  .step-connector { margin-top: 12px; }
  .initiative-card .card-taxonomy-row { grid-template-columns: 1fr; gap: 3px; }
}

/* ── Topbar back button ── */

/* El botón "atrás" siempre está en el DOM. Cuando la vista no es de detalle
   se colapsa a ancho 0 con opacity 0 y se desplaza ligeramente hacia el
   logo; al entrar en detalle se expande a 40px y recupera su sitio. Así el
   topbar deja de pegar saltos cuando cambia el contexto. */
.topbar-back {
  display: flex; align-items: center; justify-content: center;
  width: 0; height: 40px; flex-shrink: 0;
  padding: 0;
  border: 0 solid var(--border); background: transparent;
  border-radius: var(--radius-sm); color: var(--text3);
  cursor: pointer;
  opacity: 0;
  transform: translateX(-6px);
  pointer-events: none;
  overflow: hidden;
  margin-right: 0;
  transition:
    width 220ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 160ms ease-out,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    border-width 220ms ease-out,
    background-color 160ms ease-out,
    color 160ms ease-out;
}

body[data-detail="1"] .topbar-back {
  width: 40px;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  border-width: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .topbar-back { transition-duration: 0.01s; }
}

@media (hover: hover) and (pointer: fine) {
  .topbar-back:hover { background: var(--bg3); color: var(--text); border-color: var(--border2); }
}

.topbar-back:active { transform: scale(0.92); }

.topbar-back svg { width: 14px; height: 14px; }

@media (max-width: 980px) { .desc-top-grid { grid-template-columns: 1fr; } .desc-kv { grid-template-columns: 1fr; } }

@media (max-width: 900px) { .costes-cards { grid-template-columns: repeat(3,1fr); } }

@media (max-width: 600px) { .costes-cards { grid-template-columns: 1fr 1fr; } }

@media (max-width: 480px) { .costes-cards { grid-template-columns: 1fr; } }

@media (max-width: 900px) { .impactos-cards, .tec-cards { grid-template-columns: repeat(2,1fr); } }

@media (max-width: 600px) { .impactos-cards, .tec-cards { grid-template-columns: 1fr 1fr; } }

@media (max-width: 767px) {
  .table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-wrap { overflow-x: auto; }
  .detail-pane .table-responsive,
  .detail-pane .table-wrap { overflow-x: auto; }

  /* El motor común conserva los mínimos por tipo de columna. El wrapper
     absorbe únicamente el exceso necesario, sin anchos fijos por vista. */
  table.resizable-cols {
    table-layout: fixed;
  }

  .table-responsive table.resizable-cols th {
    width: auto;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: max(12px, 0.8rem);
    vertical-align: middle;
  }
  .table-responsive table.resizable-cols th .th-label {
    display: block;
    min-width: 0;
    white-space: normal;
  }
  table.resizable-cols th.th-sort { white-space: normal; }

  table.resizable-cols td {
    min-width: 0;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
  }

  table.resizable-cols td.col-date,
  table.resizable-cols td.col-datetime,
  table.resizable-cols td.col-number,
  table.resizable-cols td.col-status,
  table.resizable-cols td.col-actions,
  table.resizable-cols td.col-bool {
    white-space: nowrap;
    overflow-wrap: normal;
  }
  table.resizable-cols td.col-number {
    text-align: right;
  }
  table.resizable-cols td.col-bool { text-align: center; }
  .col-resizer { display: none; }
}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */

@media (max-width: 1200px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-summary-grid { grid-template-columns: 1fr; }
  .dashboard-grid, .dashboard-grid.equal, .dashboard-grid.three { grid-template-columns: 1fr; }
  .filter-panel { grid-template-columns: repeat(2, minmax(160px, 1fr)); }
  .wiki-steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .initiatives-grid { grid-template-columns: 1fr; }
  .detail-grid-3 { grid-template-columns: 1fr; }
  .detail-grid-2 { grid-template-columns: 1fr; }
  .metric-strip, .heatmap-grid, .wiki-checklist { grid-template-columns: 1fr 1fr; }
  .detail-summary-metrics, .detail-summary-metrics.cols-4, .detail-overview-grid, .person-list, .status-card-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .content { padding: 18px; }
  .stat-grid, .metric-strip, .heatmap-grid, .filter-panel, .wiki-checklist, .wiki-steps, .detail-summary-metrics, .detail-overview-grid, .status-card-grid, .dashboard-tech-tiles { grid-template-columns: 1fr !important; }
  .form-row { grid-template-columns: 1fr; }
  .wiki-mini-table { grid-template-columns: 1fr; }
  .tabs-bar { width: 100%; }
  .tab-btn { flex: 1; }
  .section-header { gap: 10px; flex-wrap: wrap; }
  .data-model-toolbar { align-items: flex-start; flex-direction: column; }
  .data-model-shell { height: calc(100vh - var(--header-h) - 36px); min-height: 560px; }
}

/* Todos los hijos de grid/flex visuales deben poder encogerse; sin esto,
   texto, filtros o canvas pueden fijar un ancho mayor que el viewport. */
.stat-grid > *,
.dashboard-grid > *,
.detail-grid > *,
.detail-grid-2 > *,
.detail-grid-3 > *,
.desc-top-grid > *,
.detail-summary-grid > *,
.detail-summary-metrics > *,
.detail-overview-grid > *,
.costes-cards > *,
.impactos-cards > *,
.tec-cards > *,
.kpis-cards > *,
.heatmap-grid > *,
.dashboard-tech-tiles > *,
.card-header > *,
.card-body > * {
  min-width: 0;
}

/* ══════════════════════════════════════════
   SIDEBAR BACKDROP (móvil)
══════════════════════════════════════════ */

.sidebar-backdrop {
  position: fixed; inset: 0; z-index: 39;
  background: color-mix(in srgb, var(--shadow-color) 55%, transparent);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.sidebar-backdrop.visible {
  opacity: 1; pointer-events: auto;
}

/* Botón hamburguesa en topbar para móvil */
.topbar-mobile-toggle {
  display: none;
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  background: transparent; border: 1px solid var(--border);
  color: var(--text2); align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background-color 160ms ease-out, color 160ms ease-out, border-color 160ms ease-out, transform 120ms ease-out;
}

@media (hover: hover) and (pointer: fine) {
  .topbar-mobile-toggle:hover { background: var(--bg3); color: var(--text); border-color: var(--border2); }
}

.topbar-mobile-toggle:active { transform: scale(0.92); }
.topbar-mobile-toggle svg { width: 16px; height: 16px; }

/* ══════════════════════════════════════════
   RESPONSIVE TABLET/MÓVIL (≤ 768px)
   Sidebar pasa a overlay deslizante
══════════════════════════════════════════ */

@media (max-width: 768px) {
  /* En móvil la sidebar es overlay: la animación de entrada del shell
     no debe aplicarse porque su transform: scale() pisa el translateX
     que la mantiene fuera de pantalla. */
  #app.app-entering .sidebar {
    animation: none !important;
  }

  /* Sidebar como overlay: oculta off-screen por defecto */
  .sidebar,
  .sidebar.collapsed {
    width: var(--sidebar-w) !important;
    transform: translateX(calc(-100% - 24px));
    transition: transform 0.34s cubic-bezier(0.22,1,0.36,1),
                box-shadow 0.34s ease,
                background-color 0.34s ease,
                border-color 0.34s ease;
    z-index: 50;
  }

  .sidebar.mobile-open {
    transform: translateX(0) !important;
    box-shadow: 0 16px 48px color-mix(in srgb, var(--shadow-color) 50%, transparent);
  }

  /* Revertir todos los efectos visuales de .collapsed en móvil */
  .sidebar .sidebar-title,
  .sidebar .nav-label,
  .sidebar .nav-item > span:not(.nav-badge),
  .sidebar .nav-badge,
  .sidebar .user-card > div:not(.user-avatar) {
    display: block !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    width: auto !important;
    max-width: none !important;
    overflow: visible !important;
  }

  .sidebar .sidebar-logo {
    width: 40px !important;
    opacity: 1 !important;
    transform: none !important;
    overflow: visible !important;
  }

  .sidebar .sidebar-toggle { margin: 0 !important; }

  .sidebar .nav-item {
    justify-content: flex-start !important;
    padding: 8px 10px !important;
    gap: 10px !important;
    font-size: 13px !important;
    min-height: auto !important;
  }

  .sidebar .nav-item .nav-icon {
    width: 18px !important; height: 18px !important; min-width: 18px !important;
  }

  .sidebar .nav-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin-bottom: 0 !important;
  }

  .sidebar .nav-badge {
    margin-left: auto !important; padding: 2px 6px !important;
  }

  .sidebar .nav-label { display: none !important; }

  .sidebar .sidebar-divider {
    width: calc(100% - 20px) !important; margin: 14px 10px !important;
    background: var(--border2) !important;
  }

  .sidebar .user-card {
    justify-content: flex-start !important; padding: 8px 13px !important;
    gap: 10px !important; width: 100% !important;
  }

  /* En móvil la foto de perfil mantiene el mismo formato y tamaño que en
     escritorio/tablet (42px, cuadrado redondeado). */
  .sidebar .user-avatar {
    width: 42px !important; height: 42px !important;
    min-width: 42px !important;
    font-size: 15px !important;
  }

  .sidebar .sidebar-create-initiative {
    width: 100% !important;
    min-width: 0 !important;
    padding: 10px 12px !important;
    gap: 8px !important;
    margin: 0 0 10px !important;
  }

  .sidebar .sidebar-create-initiative > span {
    width: auto !important;
    max-width: none !important;
    overflow: visible !important;
    opacity: 1 !important;
  }

  .sidebar-header {
    padding: 0 14px !important; justify-content: flex-start !important; gap: 10px !important;
  }

  /* El main ocupa todo el ancho */
  .main,
  .sidebar.collapsed ~ .main {
    margin-left: 0 !important;
    transition: none;
  }

  /* Mostrar botón hamburguesa en topbar */
  .topbar-mobile-toggle { display: flex; }

  /* Topbar ajuste en móvil: ancho completo flotante */
  .topbar,
  .sidebar.collapsed ~ .main .topbar {
    left: 12px;
    right: 12px;
    padding: 0 16px;
  }

  /* Reducir gap en topbar-right */
  .topbar-right { gap: 6px; }

  /* En detalle: ocultar nombre e ID de la iniciativa para evitar solapamiento */
  body[data-detail="1"] .topbar-title,
  body[data-detail="1"] .topbar-breadcrumb { display: none; }
}

/* ══════════════════════════════════════════
   RESPONSIVE MÓVIL PEQUEÑO (≤ 480px)
══════════════════════════════════════════ */

@media (max-width: 480px) {
  .topbar { padding: 0 14px; }
  .topbar-right { gap: 4px; }

  .content { padding: 14px; }
}