/*
 * Cabecera, íconos, pestañas y menú lateral.
 * Agrupa la parte superior fija de la página y el panel que la sustituye cuando la cabecera se retira durante la lectura.
 * El menú lateral viene de componentes.css: es navegación y no una sección, de modo que vive junto a las pestañas a las que reenvía cada clic.
 */

/* ============================================================
   Cabecera
   ============================================================ */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--superficie) 82%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--borde);
  transition: transform 0.35s var(--paso);
}
/* Retirada durante la lectura: El menú lateral aparta la cabecera con una transformación
   y no con display, porque así la animación es suave y reversible al volver arriba. */
.cabecera.retirada { transform: translateY(-100%); }
.cabecera-superior {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0.85rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.marca { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: inherit; }
.marca-icono {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--marca-grad);
  border-radius: 13px;
  box-shadow: var(--sombra-marca);
}
.marca-icono .ico-logo { width: 24px; height: 24px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Íconos SVG ---------- */
.ico {
  width: 1.15em; height: 1.15em;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  flex: none; vertical-align: -0.22em;
}
.marca-texto { display: flex; flex-direction: column; justify-content: center; line-height: 1.2; }
.marca-texto strong { font-size: clamp(0.95rem, 3.4vw, 1.1rem); font-weight: 700; letter-spacing: -0.015em; white-space: nowrap; }
.marca-texto small { font-size: 0.74rem; color: var(--tinta-3); font-weight: 500; white-space: nowrap; }

.boton-tema {
  border: 1px solid var(--borde);
  background: var(--superficie-2);
  width: 42px; height: 42px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 1.1rem;
  display: grid; place-items: center;
  transition: transform 0.2s var(--paso), border-color 0.2s, background 0.2s;
  position: relative;
}
.boton-tema:hover { transform: translateY(-1px) rotate(-8deg); border-color: var(--marca-400); color: var(--marca-tinta); }
.boton-tema:active { transform: translateY(0) scale(0.94); }
.boton-tema .ico { width: 20px; height: 20px; }
.boton-tema .icono-luna { display: none; }
/* El ícono refleja el tema en pantalla por las dos vías del tema oscuro: la
   preferencia del sistema cuando no hay data-tema y la elección manual cuando
   lo hay. El :where deja ganar a data-tema="claro". */
:root[data-tema="oscuro"] .boton-tema .icono-sol { display: none; }
:root[data-tema="oscuro"] .boton-tema .icono-luna { display: block; }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-tema="claro"])) .boton-tema .icono-sol { display: none; }
  :root:where(:not([data-tema="claro"])) .boton-tema .icono-luna { display: block; }
}
.pestana .ico { width: 17px; height: 17px; }

/* Navegación en pestañas */
.pestanas {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 0.75rem 0.5rem;
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.pestanas::-webkit-scrollbar { display: none; }
.pestana {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  color: var(--tinta-2);
  border: none;
  padding: 0.55rem 0.95rem;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  transition: color 0.2s, background 0.2s;
}
.pestana-icono { font-size: 1rem; }
.pestana:hover { color: var(--tinta); background: var(--superficie-2); }
.pestana:active { background: color-mix(in srgb, var(--marca-500) 16%, transparent); }
.pestana.activa { color: var(--marca-tinta); background: color-mix(in srgb, var(--marca-500) 12%, transparent); }
.pestana.activa::after {
  content: "";
  position: absolute;
  left: 22%; right: 22%; bottom: -0.5rem;
  height: 3px; border-radius: 3px 3px 0 0;
  background: var(--marca-grad);
}

/* ============================================================
   Menú lateral
   ============================================================ */
/* Botón flotante y panel que sustituyen a la cabecera cuando esta se retira durante la
   lectura. El botón vive en el borde izquierdo a media altura para no chocar con el botón
   de volver arriba, que ocupa la esquina inferior derecha, ni con la barra de progreso,
   que corre pegada al borde superior. La regla global de menos movimiento vuelve
   instantáneas estas transiciones, de modo que con esa preferencia no hay animación. */
.boton-menu-lateral {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translate(-110%, -50%);
  z-index: 110;
  min-width: 46px;
  min-height: 46px;
  border: 1px solid var(--borde);
  border-left: none;
  border-radius: 0 12px 12px 0;
  background: var(--superficie);
  color: var(--marca-tinta);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: var(--sombra-md);
  visibility: hidden;
  transition: transform 0.3s var(--paso), visibility 0.3s, background 0.2s, color 0.2s;
}
.boton-menu-lateral.visible { visibility: visible; transform: translate(0, -50%); }
.boton-menu-lateral:hover { background: var(--marca-grad); color: #fff; border-color: transparent; }
.boton-menu-lateral .ico { width: 20px; height: 20px; }

/* El fondo atenuado recoge el clic fuera del panel, para que cerrar no active por
   accidente lo que quede debajo. */
.menu-lateral-fondo {
  position: fixed;
  inset: 0;
  z-index: 115;
  background: color-mix(in srgb, var(--tinta) 25%, transparent);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.menu-lateral-fondo.abierto { opacity: 1; visibility: visible; }

/* El ancho del panel se limita para que en escritorio nunca cubra todo el contenido,
   mientras que en pantallas estrechas puede tomar casi todo el ancho. */
.menu-lateral {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 120;
  width: min(320px, 86vw);
  background: var(--superficie);
  border-right: 1px solid var(--borde);
  box-shadow: var(--sombra-lg);
  padding: 1rem 0.85rem 1.25rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  transform: translateX(-105%);
  visibility: hidden;
  transition: transform 0.3s var(--paso), visibility 0.3s;
}
.menu-lateral.abierto { transform: none; visibility: visible; }

.menu-lateral-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0 0.35rem 0.6rem;
  border-bottom: 1px solid var(--borde);
  margin-bottom: 0.5rem;
}
.menu-lateral-titulo {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tinta-3);
}
.menu-lateral-cerrar {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--borde);
  background: var(--superficie-2);
  color: var(--tinta-2);
  border-radius: 12px;
  font-size: 1rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color 0.2s, color 0.2s;
}
.menu-lateral-cerrar:hover { border-color: var(--marca-400); color: var(--marca-tinta); }
.menu-lateral-cerrar:active { transform: scale(0.94); }

.menu-lateral-lista { display: flex; flex-direction: column; gap: 0.25rem; }
/* Las opciones repiten el lenguaje visual de las pestañas y garantizan un blanco táctil
   de al menos 44 píxeles de alto. */
.menu-lateral-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.55rem 0.8rem;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--tinta-2);
  font-size: 0.95rem;
  font-weight: 600;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}
.menu-lateral-item .ico { width: 18px; height: 18px; }
.menu-lateral-item:hover { color: var(--tinta); background: var(--superficie-2); }
.menu-lateral-item:active { background: color-mix(in srgb, var(--marca-500) 16%, transparent); }
.menu-lateral-item.activa { color: var(--marca-tinta); background: color-mix(in srgb, var(--marca-500) 12%, transparent); }