/* =============================================================================
   El icono de «Mi cuenta» (Andrés, 17-09-2026: «Mi cuenta quiero que sea un
   icono de user... típico de las páginas»).

   Un círculo con la silueta, arriba a la derecha, en las tres cabeceras de la
   web. Lo mete build/icono-cuenta.js, que también enlaza esta hoja: así el
   estilo no depende de la cascada de cada tipo de página.
   ========================================================================== */
.nav-cuenta {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid #DCD2C4; background: #fff; color: #145961;
  text-decoration: none; transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.nav-cuenta svg { width: 22px; height: 22px; display: block; }
.nav-cuenta:hover { background: #145961; border-color: #145961; color: #fff; }
.nav-cuenta:focus-visible { outline: 3px solid #145961; outline-offset: 2px; }
.nav-cuenta[aria-current="page"] { background: #145961; border-color: #145961; color: #fff; }

/* Cabecera heredada: al lado del botón del menú móvil */
.header__action { display: flex; align-items: center; gap: 12px; }

/* Barra nueva: logo a la izquierda, menú e icono a la derecha. En el móvil el
   menú se esconde (planificador.css) y el icono se queda. */
.barra__fila:has(.nav-cuenta) { justify-content: flex-start; flex-wrap: nowrap; }
.barra__fila:has(.nav-cuenta) .barra__logo { margin-right: auto; }
.barra__fila > .nav-cuenta { margin-left: 8px; }

/* /plato: flotando arriba a la derecha. Su navegación corta se esconde en el
   móvil (modo baraja), así que el icono no puede vivir dentro de ella. */
main.plato:has(> .nav-cuenta--flota) { position: relative; }
.nav-cuenta--flota { position: absolute; top: 10px; right: 16px; z-index: 5; }
main.plato:has(> .nav-cuenta--flota) .plato__cab { padding-right: 56px; }

@media (prefers-reduced-motion: reduce) { .nav-cuenta { transition: none; } }