/* ══════════════════════════════════════════
   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;
}

/* Fondo plano: sin orbes ni retícula decorativa (auditoría antislop 27-28).
   Los elementos .login-bg/.login-grid pueden seguir en el HTML sin pintar nada. */
.login-grid { display: none; }

.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: min(420px, calc(100% - 32px));
  max-width: 100%;
  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
══════════════════════════════════════════ */

/* 100dvh: en el móvil 100vh incluye la barra del navegador y la última tarjeta
   (p. ej. «Historial») quedaba cortada al final del scroll. */
#app { display: block; height: 100vh; height: 100dvh; 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(--logo-gradient-start), var(--logo-gradient-end));
  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;
  height: 100dvh;
  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%);
  /* El último sombreado es del color de la página: el contenido que pasa por debajo al hacer
     scroll se difumina contra el borde inferior de la barra (en todas las vistas). */
  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),
    0 14px 16px -6px var(--bg);
  transition: left 0.34s cubic-bezier(0.22,1,0.36,1), background-color 0.34s ease, border-color 0.34s ease;
}

/* La barra flota a 12 px del borde: la franja de encima y los lados se tapan con el
   fondo de la página, para que el contenido que pasa por detrás al hacer scroll no asome.
   El marco es la sombra (spread) de una caja transparente con la misma forma que la barra:
   sigue sus esquinas redondeadas (también las de abajo, que antes quedaban con un corte
   recto a media altura) y llega hasta su borde inferior, sin tapar nada por debajo. Por
   dentro de la barra no pinta nada: su color (también el naranja de Test) y su cristal se
   ven enteros. */
.topbar::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  --tb-x: 25px; --tb-y: 13px;
  inset: -1px; border-radius: inherit; background: transparent;
  box-shadow: 0 0 0 48px var(--bg);
  clip-path: inset(calc(-1 * var(--tb-y)) -13px 0 calc(-1 * var(--tb-x)));
}

/* 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));
}

/* Modo mantenimiento (solo lo ve el Administrador dentro de la app): barra superior en
   rojo pastel, mismo patrón que la naranja de Test (manda sobre ella).
   shared/js/core/mantenimiento.js (dcMarcarMantenimiento). */
body[data-mantenimiento="1"] .topbar,
body[data-mantenimiento="1"][data-detail="1"] .topbar,
body[data-mantenimiento="1"][data-cosmos-env="test"] .topbar,
body[data-mantenimiento="1"] .hub-topbar {
  background: color-mix(in srgb, var(--mantenimiento-bar) 92%, transparent);
  border-color: color-mix(in srgb, var(--mantenimiento-bar) 60%, var(--border2));
}

/* Vista global de mantenimiento (dcVistaMantenimiento): centrada, tema activo. */
body.dc-mantenimiento-cuerpo { background: var(--bg); color: var(--text); min-height: 100vh; margin: 0; }
.dc-mantenimiento { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 16px; box-sizing: border-box; }
.dc-mantenimiento-centro { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; max-width: 560px; }
.dc-mantenimiento-icono { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: var(--mantenimiento-bar); color: var(--red); }
.dc-mantenimiento-icono svg { width: 34px; height: 34px; }
.dc-mantenimiento-titulo { margin: 8px 0 0; font-family: var(--font-display); font-size: clamp(24px, 4vw, 32px); font-weight: 600; }
.dc-mantenimiento-sub { margin: 0; color: var(--text2); font-size: 16px; }
.dc-mantenimiento-pie { max-width: 640px; text-align: center; font-size: 13px; color: var(--text3); line-height: 1.6; }
.dc-mantenimiento-pie a { color: var(--accent); }

.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). */
/* Distintivo de entorno («Datos de prueba», «Entorno Test»): cede espacio antes
   que los botones de la derecha (se recorta) y en móvil se oculta: el color de la
   barra ya indica el entorno Test. */
.env-badge { margin-left: 10px; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-right { flex-shrink: 0; }
@media (max-width: 640px) { .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; }
/* ID del registro en la barra superior (p. ej. IAX-108): protagonista, en el azul de acento. */
.topbar-breadcrumb .topbar-id { color: var(--accent); font-size: 14px; font-weight: 700; margin: 0; letter-spacing: .02em; }

.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; }
/* Ajustes de Portfolio IA con un filtro Impulsor IA activo: engranaje, borde y fondo en el color del filtro (azul GP-UAX, violeta Impulsores). */
#settings-toggle.is-filtro-uax { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 20%, transparent); }
#settings-toggle.is-filtro-imp { color: var(--pink); border-color: var(--pink); background: color-mix(in srgb, var(--pink) 20%, transparent); }

.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 */

/* scrollbar-gutter: stable reserva siempre el hueco de la barra de scroll: las
   pestañas largas (con scroll) y las cortas (sin él) tienen el mismo ancho. */
.content { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 28px; scrollbar-gutter: stable; }

.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: 768px) {
  .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;
  }

  /* Las cabeceras parten entre palabras, nunca letra a letra: el motor mide la
     palabra más larga con esta tipografía (tables.js · headerLongestWordPx). Sin
     el asa de redimensionar, el padding derecho se reduce. */
  .table-responsive table.resizable-cols th {
    width: auto;
    min-width: 0;
    white-space: normal;
    overflow-wrap: break-word;
    padding-right: 10px;
    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; }
  /* Pestañas: si no caben, la barra se desplaza en horizontal (nunca se recorta el texto). */
  .tabs-bar { width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .tabs-bar::-webkit-scrollbar { display: none; }
  .tab-btn { flex: 1 0 auto; white-space: nowrap; }
  .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;
  }
  .topbar::before { --tb-x: 13px; }

  /* 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; }
}

/* Botón común «Formulario» de la barra superior (dc-boton-formulario, shared/platform/shell/dc-shell.js):
   desplegable con «Abrir formulario» y «Copiar enlace» (solo icono). */
/* Con el menú abierto no se muestra el tooltip del botón (se solaparía). */
.dc-formulario:has(> .topbar-btn[aria-expanded="true"]) > .tooltip { display: none; }
/* Panel del botón «Formulario»: el mismo de Ajustes (overlays.css) con enlace + copiar y Abrir. */
.dc-formulario-enlace { display: flex; gap: 8px; align-items: center; }
.dc-formulario-enlace .form-input { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--text2); }
.dc-formulario-abrir { width: 100%; justify-content: center; }
.dc-formulario-abrir svg { width: 15px; height: 15px; }