/* =========================================================================
   navegacion — Armazón, barra lateral, menú plegable, tooltips, migas y velo.

   Tramo 2 de 8 de la hoja que antes era una sola (1 468 líneas). Los
   tramos son CONTIGUOS y se cargan en este orden: el orden de carga es la
   cascada. Mover una hoja de sitio puede cambiar qué regla gana sin que
   nada falle — se comprueba con `npm run huella`, no razonando.
   ========================================================================= */

/* --------------------------------------------------------------- estructura */

.armazon {
  display: grid;
  grid-template-columns: var(--lateral) minmax(0, 1fr);
  min-height: 100vh;
}

/* ------------------------------------------------------------ barra lateral */

.lateral {
  background: var(--negro);
  position: relative;
  color: #e9e7e8;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 60;
}

/* El grano va en una capa aparte y no en el `background` del elemento: así no
   pelea con el degradado del dial ni se repinta al hacer scroll. */
.lateral::before,
.dial::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grano);
  opacity: .16;
  pointer-events: none;
  z-index: 0;
}
.lateral > *,
.dial > * { position: relative; z-index: 1; }

.marca {
  display: block;
  padding: 1.2rem .9rem 1rem;
  text-decoration: none;
}

/* El logo es un PNG con alfa, en su versión para fondo oscuro: la tinta ya
   viene en blanco desde `procesar-marca.py`. No se recolorea aquí con
   `filter`, que apagaría el rojo del micrófono. */
.marca__logo {
  display: block;
  width: 100%;
  max-width: 14rem;
  height: auto;
  border-radius: .35rem;   /* el JPEG es un rectángulo: se le quita la esquina dura */
}

.nav {
  padding: .5rem .7rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  flex: 1;
  overflow-y: auto;
}

.nav__titulo {
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #9d9091;
  padding: 1.1rem .8rem .4rem;
}

/* ================================================= navegación y migas
   El menú se pliega a una tira de iniciales, con el nombre en tooltip. Y la
   ruta de migas dice dónde estás, que es lo que hace falta cuando se llega a
   una nota desde una búsqueda y no desde la portada.
   ====================================================================== */

.nav__enlace {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .6rem .7rem;
  border-radius: .55rem;
  text-decoration: none;
  color: #fff;
  font-size: .95rem;
  position: relative;
}
.nav__enlace:hover { background: var(--negro-suave); }

/* Una línea entre entradas seguidas — sólo entre ellas, así que no queda
   colgando al final de la lista ni cruzando el salto a «SECCIONES», donde ya
   separa el rótulo. */
.nav__enlace + .nav__enlace { border-top: 1px solid rgba(255, 255, 255, .08); }

/* La sección en la que estás. Tres señales a la vez —barra, cuadro encendido y
   fondo— porque el color solo no basta para quien no lo distingue, y porque el
   texto se queda en blanco por contraste (ver `--brasa`). */
.nav__enlace[aria-current="page"] {
  background: var(--negro-suave);
  color: #fff;
  box-shadow: inset 3px 0 0 var(--brasa);
}

/* El cuadro del icono. Antes llevaba la INICIAL de la sección —A, R, G, E, C,
   T— y eso no navegaba nada: una letra hay que descifrarla, dos secciones que
   empiezan igual la vuelven ambigua, y ningún sitio de noticias se recorre
   así. Ahora lleva un icono, y el NOMBRE va al lado, siempre. */
.nav__marca {
  flex: none;
  width: 1.65rem;
  height: 1.65rem;
  display: grid;
  place-items: center;
  border-radius: .45rem;
  /* Por ENCIMA del fondo, no por debajo. Con el carbón aclarado, el gris que
     tenían antes quedaba más oscuro que la lateral y los chips se leían como
     agujeros en vez de como teclas. */
  background: #584b4c;
  color: #d8d4d4;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.nav__enlace:hover .nav__marca { color: #f3f2f2; }
.nav__enlace[aria-current="page"] .nav__marca {
  background: var(--brasa);
  color: #322b2c;        /* la inicial oscura sobre la brasa: 5.2:1 */
  font-weight: 700;
}

/* El SVG hereda el color del enlace, así que el estado activo lo tiñe solo. */
.nav__marca svg {
  width: 1.05rem;
  height: 1.05rem;
  display: block;
}

.nav__texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* -------------------------------------------------------- botón de plegar */

.plegar {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: .5rem .7rem 0;
  padding: .5rem .7rem;
  border: 0;
  border-radius: .55rem;
  background: transparent;
  color: #9d9091;
  font: inherit;
  font-size: .82rem;
  cursor: pointer;
  position: relative;
}
.plegar:hover { background: var(--negro-suave); color: #cdc7c8; }

.plegar__flecha {
  flex: none;
  width: 1.65rem;
  height: 1.65rem;
  display: grid;
  place-items: center;
}
.plegar__flecha::before {
  content: "";
  width: .5rem; height: .5rem;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.plegado .plegar__flecha::before { transform: rotate(-135deg); }

/* -------------------------------------------------------------- plegado */

.plegado { --lateral: 4.25rem; }

.plegado .nav__texto,
.plegado .lateral__pie { display: none; }

.plegado .marca { padding: 1.1rem .5rem .9rem; }

/* Plegado, el logo se cambia por el icono: el lockup completo a 3 rem sería
   una mancha, y el micrófono solo sigue siendo reconocible. */
.plegado .marca__logo { display: none; }
.plegado .marca::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 auto;
  background: url("/img/erre.png") center / contain no-repeat;
}

/*
 * Plegado, el menú NO puede recortar: el tooltip sale por su borde derecho y
 * `overflow-y: auto` lo cortaba justo donde empieza. Con ocho entradas de 2.6
 * rem la lista cabe de sobra en cualquier pantalla, así que no hace falta que
 * se desplace.
 */
.plegado .nav { overflow: visible; }

/* Una línea separa lo fijo (portada, escuchar) de las secciones. Desplegado lo
 * hace el rótulo «SECCIONES», que plegado no cabe. */
.plegado .nav__titulo + .nav__enlace { margin-top: .5rem; padding-top: .75rem; }
.plegado .nav__titulo {
  display: block;
  padding: 0;
  height: 1px;
  margin: .6rem .35rem;
  background: var(--linea-oscura);
  overflow: hidden;
  text-indent: -999px;
}

.plegado .nav,
.plegado .plegar { padding-left: .5rem; padding-right: .5rem; }
.plegado .nav__enlace,
.plegado .plegar { justify-content: center; gap: 0; padding-left: .4rem; padding-right: .4rem; }

/* ------------------------------------------------------------- tooltips
   Con el menú plegado el nombre desaparece de la vista, así que el tooltip
   deja de ser un adorno y pasa a ser la única etiqueta. Se muestra también con
   `:focus-visible`, porque quien navega con teclado no pasa el ratón. */

.nav__enlace::after,
.plegar::after {
  content: attr(data-nombre);
  position: absolute;
  left: calc(100% + .5rem);
  top: 50%;
  transform: translateY(-50%) translateX(-.25rem);
  z-index: 70;

  background: #f3f2f2;
  color: var(--tinta);
  padding: .3rem .6rem;
  border-radius: .4rem;
  font-size: .78rem;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);

  opacity: 0;
  pointer-events: none;
  transition: opacity .13s ease, transform .13s ease;
}

.plegado .nav__enlace:hover::after,
.plegado .nav__enlace:focus-visible::after,
.plegado .plegar:hover::after,
.plegado .plegar:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Desplegado no hacen falta: el nombre ya está escrito al lado. Un tooltip que
   repite lo que se lee es ruido. */
.nav__enlace::after,
.plegar::after { content: none; }
.plegado .nav__enlace::after,
.plegado .plegar::after { content: attr(data-nombre); }

@media (prefers-reduced-motion: reduce) {
  .nav__enlace::after, .plegar::after, .plegar__flecha::before { transition: none; }
}

/* ---------------------------------------------------------------- migas */

.migas { margin: 0 0 1.5rem; }

.migas__lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .8rem;
  color: var(--tinta-tenue);
}

.migas__paso { display: flex; align-items: center; gap: .5rem; }

/* El separador va en ::before del paso siguiente, no como texto: así el lector
   de pantalla lee «Portada, Ecología, título» y no «Portada mayor que…». */
.migas__paso + .migas__paso::before {
  content: "›";
  color: var(--gris);
}

.migas__paso a { color: var(--tinta-tenue); text-decoration: none; }
.migas__paso a:hover { color: var(--rojo); text-decoration: underline; }

/* El último escalón —donde estás— se distingue sin ser enlace. */
.migas__paso [aria-current="page"] {
  color: var(--tinta);
  font-weight: 600;
  /* Un título largo no puede empujar la fila a tres renglones. */
  max-width: 28rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .migas__paso [aria-current="page"] { max-width: 12rem; }
}

.lateral__pie {
  padding: 1rem 1.2rem 1.4rem;
  font-size: .72rem;
  color: #9d9091;
  border-top: 1px solid var(--linea-oscura);
}
.lateral__pie a { color: #ada5a6; }
.lateral__pie p { margin: .2rem 0; }

/* ------------------------------------------------------- botón y velo del menú
   En escritorio no existen: el cajón ya está abierto y fijo. */

.hamburguesa,
.cerrar-menu,
.velo { display: none; }