/* ----------------------------------------------------------------------------
   ACE NUTRITIONS. — Riel de Aplicacion (navegacion lateral persistente)
   ----------------------------------------------------------------------------
   La barra lateral vivia DENTRO de `#sec-studio`, de modo que solo existia en
   el Estudio: al abrir `/wiki`, `/branding` o `/checkout` desaparecia y la
   plataforma se quedaba sin su navegacion. Ademas participaba en la rejilla
   `.ace-app-shell` (272px de columna), asi que su ancho se lo restaba al
   contenido en todo momento.

   Aqui el riel sale de la vista y se vuelve parte del cascaron: fijo a la
   izquierda, presente en todas las rutas de aplicacion, y FUERA del flujo,
   asi que el contenido ya no cede columna sino un desplazamiento que el
   propio riel controla y que al contraerse devuelve.
   -------------------------------------------------------------------------- */

:root {
  --rail-w: 232px;
  --rail-w-collapsed: 64px;
}

/* Contraido: el ancho vive en una sola variable, de la que dependen tanto el
   riel como el desplazamiento del contenido. No pueden descuadrarse. */
html[data-app-rail='collapsed'] {
  --rail-w: var(--rail-w-collapsed);
}

/* El riel llega hasta ARRIBA del todo. Arrancando bajo la barra superior,
   el rectangulo de la esquina (el ancho del riel por el alto de la barra) no
   era de nadie: ni barra, porque el relleno del cuerpo la empuja a la
   derecha, ni riel. Quedaba un hueco gris pegado a la esquina. Ahora el riel
   ocupa su columna entera y la barra la suya: las dos se tocan sin huecos. */
.ace-app-rail {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 901;
  display: none;
  flex-direction: column;
  width: var(--rail-w);
  padding: 14px 10px;
  gap: 18px;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg-surface);
  border-right: 1px solid var(--border-soft);
  transition: width 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Rutas de aplicacion: el riel acompana al usuario con sesion iniciada. En la
   portada, los precios o el alta no tiene nada que ofrecer. */
html[data-cz-auth-state='authenticated'][data-active-page='studio'] .ace-app-rail,
html[data-cz-auth-state='authenticated'][data-active-page='wiki'] .ace-app-rail,
html[data-cz-auth-state='authenticated'][data-active-page='branding'] .ace-app-rail,
html[data-cz-auth-state='authenticated'][data-active-page='checkout'] .ace-app-rail {
  display: flex;
}

html[data-cz-auth-state='authenticated'][data-active-page='studio'] body,
html[data-cz-auth-state='authenticated'][data-active-page='wiki'] body,
html[data-cz-auth-state='authenticated'][data-active-page='branding'] body,
html[data-cz-auth-state='authenticated'][data-active-page='checkout'] body {
  padding-left: var(--rail-w);
  transition: padding-left 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Navegacion ------------------------------------------------------------ */
.ace-rail-nav {
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1 1 auto;
}

.ace-rail-group { display: flex; flex-direction: column; gap: 2px; }

.ace-rail-group-title {
  padding: 0 8px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.ace-rail-link {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 8px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-secondary);
  text-align: left;
  background: none;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.ace-rail-link:hover { background: var(--bg-subtle); color: var(--ink); }
.ace-rail-link:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

.ace-rail-link.is-active {
  font-weight: 600;
  color: var(--brand);
  background: var(--bg-subtle);
}
.ace-rail-link.is-active::before {
  content: "";
  position: absolute;
  inset: 6px auto 6px -10px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--brand);
}

.ace-rail-icon {
  display: grid;
  place-items: center;
  width: 24px;
  flex: none;
  font-size: 14px;
}

.ace-rail-label { overflow: hidden; text-overflow: ellipsis; }

/* --- Pie ------------------------------------------------------------------
   Solo lo que la barra superior NO muestra. El badge de sesion y el boton de
   cerrar sesion estaban aqui Y arriba: dos veces lo mismo en pantalla.

   El conmutador vuelve aqui. Arriba se llevaba una banda de 70px el solo,
   antes de cualquier contenido; abajo no estorba. Y se queda pegado al borde
   inferior del riel (`sticky`), que era el motivo por el que lo subi: con la
   lista larga desaparecia bajo el pliegue. */
.ace-rail-foot {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  margin-top: auto;
  padding-top: 12px;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-soft);
}

.ace-rail-collapse {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 6px 8px;
  font: inherit;
  font-size: 12.5px;
  color: var(--ink-muted);
  background: none;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.ace-rail-collapse:hover { background: var(--bg-subtle); color: var(--ink); }

.ace-rail-collapse-icon {
  display: grid;
  place-items: center;
  width: 20px;
  flex: none;
  font-size: 18px;
  transition: transform 0.2s ease;
}

/* --- Contraido: solo iconos -----------------------------------------------
   El texto se oculta pero el boton conserva su nombre accesible gracias a
   `data-rail-title`, que `ui-shell` copia a `aria-label` y a `title`: un riel
   de iconos sin nombres es un acertijo. */
html[data-app-rail='collapsed'] .ace-rail-label,
html[data-app-rail='collapsed'] .ace-rail-group-title,
html[data-app-rail='collapsed'] #badgeCredits,
html[data-app-rail='collapsed'] #btnResetDemoSeed {
  display: none;
}

html[data-app-rail='collapsed'] .ace-app-rail { padding: 14px 8px; }
html[data-app-rail='collapsed'] .ace-rail-link,
html[data-app-rail='collapsed'] .ace-rail-collapse { justify-content: center; padding-inline: 0; }
html[data-app-rail='collapsed'] .ace-rail-link.is-active::before { inset: 6px auto 6px -8px; }
html[data-app-rail='collapsed'] .ace-rail-collapse-icon { transform: rotate(180deg); }

/* --- Movil -----------------------------------------------------------------
   Por debajo de 900px el riel cederia la mitad de la pantalla: ahi manda el
   cajon de navegacion que ya existe en la barra superior. */
@media (max-width: 900px) {
  /* Mismos selectores compuestos que arriba, no una version corta: una regla
     menos especifica dentro de una media query NO gana a la de fuera, y el
     riel seguia ocupando 232px de una pantalla de 390. */
  html[data-cz-auth-state='authenticated'][data-active-page='studio'] .ace-app-rail,
  html[data-cz-auth-state='authenticated'][data-active-page='wiki'] .ace-app-rail,
  html[data-cz-auth-state='authenticated'][data-active-page='branding'] .ace-app-rail,
  html[data-cz-auth-state='authenticated'][data-active-page='checkout'] .ace-app-rail {
    display: none;
  }

  html[data-cz-auth-state='authenticated'][data-active-page='studio'] body,
  html[data-cz-auth-state='authenticated'][data-active-page='wiki'] body,
  html[data-cz-auth-state='authenticated'][data-active-page='branding'] body,
  html[data-cz-auth-state='authenticated'][data-active-page='checkout'] body {
    padding-left: 0;
  }
}

/* El Estudio ya no hospeda la barra lateral, asi que su rejilla de dos
   columnas (272px + contenido) se queda sin su primera columna: una sola
   columna evita los 272px de hueco vacio que dejaria. */
.ace-app-shell,
.ace-app-shell.is-collapsed {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

/* El contenedor medía `96vw`, del viewport entero: con el riel ocupando su
   franja izquierda, ese ancho se salía por la derecha y recortaba el rail
   de la wiki. Que no pase del espacio que de verdad le queda. */
html[data-cz-auth-state='authenticated'][data-active-page='studio'] .ace-container,
html[data-cz-auth-state='authenticated'][data-active-page='wiki'] .ace-container,
html[data-cz-auth-state='authenticated'][data-active-page='branding'] .ace-container,
html[data-cz-auth-state='authenticated'][data-active-page='checkout'] .ace-container {
  width: min(1440px, 100%);
}


/* --- Barra superior en rutas de aplicacion ---------------------------------
   Dos barras con la MISMA identidad y los MISMOS destinos competian en la
   misma pantalla: "ACE NUTRITIONS." arriba y en el riel, "Estudio 3D / Panel
   Clinico / Identidad e IMPI" arriba y en el riel, y la sesion de Marky en
   los dos sitios. Con el riel delante, la barra superior se queda con lo que
   es suyo y de nadie mas: la identidad y la sesion. */
html[data-cz-auth-state='authenticated'][data-active-page='studio'] .ace-topbar,
html[data-cz-auth-state='authenticated'][data-active-page='wiki'] .ace-topbar,
html[data-cz-auth-state='authenticated'][data-active-page='branding'] .ace-topbar,
html[data-cz-auth-state='authenticated'][data-active-page='checkout'] .ace-topbar {
  /* El tope de 1440px se media sobre el ancho YA recortado por el riel, de
     modo que la barra se quedaba corta y la sesion salia cortada a la
     derecha. Que ocupe lo que le queda. */
  max-width: none;
  margin-bottom: 0;
  border-left: 0;
  border-right: 0;
  border-radius: 0;
}

html[data-cz-auth-state='authenticated'][data-active-page='studio'] .ace-topbar .ace-main-nav,
html[data-cz-auth-state='authenticated'][data-active-page='wiki'] .ace-topbar .ace-main-nav,
html[data-cz-auth-state='authenticated'][data-active-page='branding'] .ace-topbar .ace-main-nav,
html[data-cz-auth-state='authenticated'][data-active-page='checkout'] .ace-topbar .ace-main-nav {
  display: none;
}

/* El boton flotante del recorrido esta anclado a `left: 20px`, que con el
   riel delante cae ENCIMA de sus ultimos botones. Se corre lo que ocupa el
   riel, y se mueve con el al contraerse porque depende de la misma variable. */
html[data-cz-auth-state='authenticated'][data-active-page='studio'] .ace-floating-demo,
html[data-cz-auth-state='authenticated'][data-active-page='wiki'] .ace-floating-demo,
html[data-cz-auth-state='authenticated'][data-active-page='branding'] .ace-floating-demo,
html[data-cz-auth-state='authenticated'][data-active-page='checkout'] .ace-floating-demo {
  left: calc(var(--rail-w) + 20px);
  transition: left 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 900px) {
  html[data-cz-auth-state='authenticated'][data-active-page='studio'] .ace-floating-demo,
  html[data-cz-auth-state='authenticated'][data-active-page='wiki'] .ace-floating-demo,
  html[data-cz-auth-state='authenticated'][data-active-page='branding'] .ace-floating-demo,
  html[data-cz-auth-state='authenticated'][data-active-page='checkout'] .ace-floating-demo {
    left: 12px;
  }
}

/* En la wiki el riel hospeda además el árbol del espacio, así que necesita
   algo más de ancho; y no abre contraído, porque ahí el riel ES la
   navegación de la wiki. */
html[data-active-page='wiki'] { --rail-w: 272px; }
html[data-active-page='wiki'][data-app-rail='collapsed'] { --rail-w: var(--rail-w-collapsed); }

/* En la wiki, el árbol del espacio es la navegación PRINCIPAL, así que va
   primero: estando al final quedaba bajo el pliegue, y había que recorrer
   todo el menú global para llegar a las páginas que se vienen a leer. */
html[data-active-page='wiki'] .ace-rail-nav { display: flex; flex-direction: column; }
html[data-active-page='wiki'] .cf-space-block {
  order: -1;
  padding-top: 0;
  margin-top: 0;
  margin-bottom: 4px;
  padding-bottom: 16px;
  border-top: 0;
  border-bottom: 1px solid var(--border-soft);
}


/* --- Móvil en la wiki ------------------------------------------------------
   Al mudar el árbol del espacio dentro del riel, ocultar el riel por debajo
   de 900px dejaba las páginas de la wiki SIN forma de alcanzarse: el cajón
   móvil lleva la navegación global, no el árbol. Ahí el riel vuelve al flujo
   como una tira estática que solo trae el árbol; lo global ya está en el
   cajón. */
@media (max-width: 900px) {
  html[data-cz-auth-state='authenticated'][data-active-page='wiki'] .ace-app-rail {
    display: flex;
    position: static;
    width: auto;
    max-height: none;
    padding: 12px 16px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--border-soft);
  }

  html[data-cz-auth-state='authenticated'][data-active-page='wiki'] .ace-rail-group,
  html[data-cz-auth-state='authenticated'][data-active-page='wiki'] .ace-rail-foot {
    display: none;
  }

  html[data-cz-auth-state='authenticated'][data-active-page='wiki'] .cf-space-block {
    padding-bottom: 0;
    border-bottom: 0;
  }
}

/* --- Enlace compartido invalido -------------------------------------------
   Un `/r/<token>` que no existe mostraba el expediente que el navegador ya
   tuviera cargado, sin decir nada. Ahora muestra esto y nada mas. */
.ace-share-invalid {
  max-width: 560px;
  margin: 48px auto;
  padding: 32px;
  text-align: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
}

.ace-share-invalid-title {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
}

.ace-share-invalid-body {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-secondary);
}

/* Enlace compartido invalido: no queda NADA del expediente en pantalla, ni
   el nombre del paciente en el selector ni el plan de la clinica. Se oculta
   por bandera en `<html>` y no elemento a elemento, porque lo segundo se
   olvida uno. */
html[data-share-invalid] .ace-protected-workspace-bar,
html[data-share-invalid] .ace-content-header,
html[data-share-invalid] .ace-chevron-flow-bar,
html[data-share-invalid] .ace-tabs-nav,
html[data-share-invalid] .ace-app-rail,
html[data-share-invalid] .ace-floating-demo {
  display: none !important;
}

html[data-share-invalid] body {
  padding-left: 0;
}