/* ════════════════════════════════════════════════════════════════════════
   layout.css — el marco de la página y nada más: la barra de arriba, el
   mecanismo de vistas y el pie.

   Lo de dentro de cada vista está en `vistas/<esa>/`, y las piezas que se
   repiten en varias, en `componentes/<esa>/`. La regla para saber dónde va algo
   nuevo: si lo usan dos vistas, es componente; si solo una, es de esa vista;
   si coloca la página entera, es de aquí.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Barra superior ───────────────────────────────────────────────────── */
.barra{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--line);
}
.barra .wrap{display:flex; align-items:center; gap:1rem; min-height:56px}
.marca{font-weight:700; letter-spacing:-.02em; color:var(--ink); text-decoration:none;
       display:flex; align-items:center; gap:.45rem; white-space:nowrap}
.marca .punto{width:.7rem; height:.7rem; border-radius:50%; background:var(--brand)}

.nav{margin-left:auto; display:flex; gap:.25rem}
.nav button{
  border:0; background:none; color:var(--muted); cursor:pointer;
  font:inherit; font-size:.92rem; padding:.45rem .7rem; border-radius:999px;
}
.nav button:hover{color:var(--ink); background:var(--brand-suave)}
.nav button[aria-current="page"]{color:var(--brand-ink); background:var(--brand)}
/* tu propia foto, dentro del botón de «Mi perfil» */
.nav .yo{
  width:1.3rem; height:1.3rem; border-radius:50%; object-fit:cover;
  margin-right:.35rem; vertical-align:-.25rem;
}

/* el globo (componentes/globo.css) dentro de la barra: separado del texto, y
   con los colores al revés cuando el botón está activo */
.nav .globo{margin-left:.35rem}
.nav button[aria-current="page"] .globo{background:var(--brand-ink); color:var(--brand)}

@media (max-width:44rem){
  .nav button{padding:.45rem .55rem; font-size:.85rem}
}

/* ── Vistas: solo una visible a la vez ────────────────────────────────── */
/* No hay router ni recargas: `router.js`, aquí al lado pone `.activa` en una y la
   quita de las demás. */
.vista{display:none; padding:2rem 0 4rem}
.vista.activa{display:block}

/* ── Pie ──────────────────────────────────────────────────────────────── */
.pie{border-top:1px solid var(--line); padding:1.75rem 0 2.5rem; color:var(--muted); font-size:.88rem}
.pie p{margin:0 0 .5em}

/* Un botón que parece un enlace. Es un <button> y no un <a href="#"> porque no
   navega a ninguna URL: cambia de vista. Un enlace que no lleva a ningún sitio
   confunde a quien navega con lector de pantalla. */
.enlace{
  border:0; background:none; padding:0; font:inherit; color:var(--brand);
  text-decoration:underline; cursor:pointer;
}