/* Lucidez - Armazon compartido: dock de navegacion inferior, el submenu
   flotante de "Mas", y el header superior con el logo y el acceso a
   cuenta (ver quinta ronda de ajustes, 20 de agosto de 2026). */

#armazon {
  position: relative;
}

.dock-envoltorio {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* Por encima del telon (45): el dock debe poder tocarse siempre, aunque
     el submenu de "Mas" o el menu de cuenta esten abiertos, para pasar de
     un panel a otro de un solo toque en vez de necesitar cerrar primero. */
  z-index: 46;
  display: flex;
  justify-content: center;
  padding: 0 var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));
  pointer-events: none;
}

.dock {
  pointer-events: auto;
  display: flex;
  align-items: stretch;
  gap: var(--space-1);
  width: 100%;
  max-width: 480px;
  padding: var(--space-2);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-superficie) 88%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--color-superficie-borde);
  box-shadow: var(--shadow-elevated);
}

.dock-item {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 52px;
  padding: var(--space-2) var(--space-1);
  border-radius: var(--radius-full);
  color: var(--color-texto-secundario);
  border: 1px solid transparent;
  text-decoration: none;
  transition: color var(--dur-ui) var(--ease-out),
              border-color var(--dur-ui) var(--ease-out),
              transform var(--dur-press) var(--ease-out);
}

.dock-item:active {
  transform: scale(0.96);
}

.dock-item iconify-icon {
  font-size: 20px;
}

.dock-item span {
  font-size: 11px;
  font-weight: 600;
}

.dock-item[data-activo="true"] {
  color: var(--rose);
  border-color: var(--rose);
}

@media (hover: hover) and (pointer: fine) {
  .dock-item:not([data-activo="true"]):hover {
    color: var(--color-texto);
  }
}

/* Submenu flotante de "Mas", centrado sobre el dock completo (ver
   referencia visual autorizada el 20 de agosto de 2026: el panel nace
   centrado, no anclado a una esquina). Entrada tipo pop-in: nunca desde
   scale(0), siempre desde 0.95 + opacidad, ver skill animate. */
.submenu-mas {
  position: fixed;
  left: 50%;
  z-index: 50;
  min-width: 200px;
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-superficie) 96%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--color-superficie-borde);
  box-shadow: var(--shadow-elevated);
  transform-origin: bottom center;
  transform: translateX(-50%) scale(0.95) translateY(6px);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--dur-panel) var(--ease-out), opacity var(--dur-panel) var(--ease-out);
}

.submenu-mas[data-abierto="true"] {
  transform: translateX(-50%) scale(1) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.submenu-mas__opcion {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 48px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-texto);
  font-size: var(--text-body);
  text-align: left;
  text-decoration: none;
  transition: background-color var(--dur-ui) var(--ease-out);
}

.submenu-mas__opcion iconify-icon {
  font-size: 18px;
  color: var(--color-texto-secundario);
  flex-shrink: 0;
}

@media (hover: hover) and (pointer: fine) {
  .submenu-mas__opcion:hover {
    background: var(--color-fondo);
  }
}

.submenu-mas__opcion:active {
  transform: scale(0.98);
}

.telon-submenu {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: transparent;
}

/* Menu de cuenta: acceso rapido a "Tu perfil" y "Tu suscripcion". Vive
   dentro del header (.app-header, ver mas abajo) en vez de flotar
   aparte (quinta ronda de ajustes, 20 de agosto de 2026): en movil y
   tablet se ve como icono dentro del header, en escritorio el header
   oculta este icono y muestra en su lugar los enlaces de texto. El
   origen del panel desplegado es la esquina del boton (apple-design), a
   diferencia del submenu de "Mas" que se centra sobre el dock completo. */
.cuenta-nav {
  position: relative;
}

.cuenta-nav__boton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-superficie) 88%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--color-superficie-borde);
  box-shadow: var(--shadow-card);
  color: var(--color-texto);
  transition: transform var(--dur-press) var(--ease-out);
}

.cuenta-nav__boton iconify-icon {
  font-size: 20px;
}

.cuenta-nav__boton:active {
  transform: scale(0.94);
}

.cuenta-nav__menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 50;
  min-width: 200px;
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-superficie) 96%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--color-superficie-borde);
  box-shadow: var(--shadow-elevated);
  transform-origin: top right;
  transform: scale(0.95) translateY(-6px);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--dur-panel) var(--ease-out), opacity var(--dur-panel) var(--ease-out);
}

.cuenta-nav__menu[data-abierto="true"] {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.cuenta-nav__opcion {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 48px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-texto);
  font-size: var(--text-body);
  text-align: left;
  text-decoration: none;
  transition: background-color var(--dur-ui) var(--ease-out);
}

.cuenta-nav__opcion iconify-icon {
  font-size: 18px;
  color: var(--color-texto-secundario);
  flex-shrink: 0;
}

@media (hover: hover) and (pointer: fine) {
  .cuenta-nav__opcion:hover {
    background: var(--color-fondo);
  }
}

.cuenta-nav__opcion:active {
  transform: scale(0.98);
}

/* Header real, presente en todas las pantallas y todos los anchos
   (quinta ronda de ajustes, 20 de agosto de 2026): logo de Lucidez
   siempre visible arriba, mas el acceso a cuenta (icono en movil y
   tablet, enlaces de texto en escritorio). Fijo arriba (position:
   sticky) para que la cuenta siga alcanzable aunque se haga scroll,
   igual que antes lo garantizaba el icono flotante.
   Color: un tono del propio fondo de la app, mezclado levemente con el
   color de texto del tema activo, para que el header se distinga del
   resto de la navegacion sin ser un color aparte. Como se deriva de
   --color-fondo y --color-texto (que ya cambian solos con data-tema),
   el header cambia junto con el modo dia/noche automaticamente y sigue
   destacando el logo en los dos modos. */
.app-header {
  position: sticky;
  top: 0;
  /* Mismo motivo que .dock-envoltorio: por encima del telon (45), para
     poder tocar el icono de cuenta en un solo gesto aunque el submenu de
     "Mas" este abierto. */
  z-index: 46;
  padding-top: env(safe-area-inset-top);
  background: color-mix(in srgb, var(--color-fondo) 92%, var(--color-texto) 8%);
  border-bottom: 1px solid var(--color-superficie-borde);
  transition: background-color var(--dur-reveal) var(--ease-in-out);
}

.app-header__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 60px;
}

.app-header__logo {
  display: flex;
  align-items: center;
}

.app-header__logo img {
  height: 22px;
  width: auto;
  display: block;
}

.app-header__nav {
  display: none;
  align-items: center;
  gap: var(--space-6);
}

.app-header__enlace {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-texto-secundario);
  text-decoration: none;
  transition: color var(--dur-ui) var(--ease-out);
}

.app-header__enlace:hover {
  color: var(--color-texto);
}

.app-header__cuenta {
  display: flex;
  align-items: center;
}

@media (min-width: 900px) {
  .app-header__interior {
    gap: var(--space-5);
    min-height: 76px;
  }

  .app-header__logo img {
    height: 28px;
  }

  .app-header__nav {
    display: flex;
  }

  /* En escritorio el header ya muestra "Mi cuenta" / "Mis suscripciones"
     como texto, asi que el icono queda reservado para movil y tablet. */
  .app-header__cuenta {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dock-item, .submenu-mas, .submenu-mas__opcion,
  .cuenta-nav__menu, .cuenta-nav__opcion {
    transition-duration: 1ms !important;
  }
  /* El translateX(-50%) no es parte del efecto de movimiento, es lo que
     centra el panel: se conserva incluso con movimiento reducido. */
  .submenu-mas, .submenu-mas[data-abierto="true"] {
    transform: translateX(-50%);
  }
  .cuenta-nav__menu, .cuenta-nav__menu[data-abierto="true"] {
    transform: none;
  }
}

/* Espacio reservado al final de cada pagina para que el dock flotante
   nunca tape el ultimo contenido. */
.espacio-dock {
  height: calc(128px + env(safe-area-inset-bottom));
}