/* taso-inv - pestana de perfil de la barra lateral y avatares. Colores SOLO de tokens.css. */

.avatar { --av: 32px; display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--av); height: var(--av); border-radius: 50%; overflow: hidden;
  background: var(--card-high); color: var(--accent); font-weight: 600; font-size: calc(var(--av) * .42); line-height: 1; user-select: none; }
.avatar svg { display: block; width: 100%; height: 100%; }

.perfil { position: relative; }
.perfil-btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-field);
  background: var(--card); color: var(--text); font: 600 0.875rem var(--font-ui); text-align: left; cursor: pointer; }
.perfil-btn:hover, .perfil-btn[aria-expanded="true"] { background: var(--card-high); border-color: var(--border-accent); }
.perfil-btn[aria-current="page"] { border-color: var(--border-accent); color: var(--accent); }
.perfil-btn:focus-visible, .perfil-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.perfil-nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perfil-chev { display: inline-flex; color: var(--text2); transition: transform .15s; }
.perfil-btn[aria-expanded="true"] .perfil-chev { transform: rotate(180deg); }

.perfil-menu { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 50; min-width: 232px; padding: 6px; background: var(--card);
  border: 1px solid var(--border-accent); border-radius: var(--radius-card); box-shadow: 0 12px 32px rgba(0, 0, 0, .28); animation: in .12s ease-out; }
.perfil-cab { display: flex; align-items: center; gap: 12px; padding: 8px 10px; }
.perfil-quien { display: flex; flex-direction: column; min-width: 0; }
.perfil-quien strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perfil-quien .small { overflow-wrap: anywhere; }
.perfil-sep { height: 1px; margin: 6px 4px; background: var(--border); }
.perfil-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--tap); padding: 0 10px; border: 0; border-radius: 10px; background: transparent;
  color: var(--text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.perfil-item:hover { background: var(--card-high); }

@media (max-width: 899px) {
  .perfil { flex: none; }
  .perfil-btn { width: auto; min-width: var(--tap); min-height: var(--tap); padding: 4px; border-radius: 999px; }
  .perfil-nombre, .perfil-chev { display: none; }
  /* el perfil vive en la cabecera (ver menu-movil.js): el menu se abre hacia abajo, a la derecha, dentro de la pantalla */
  .perfil-menu { top: calc(100% + 6px); bottom: auto; left: auto; right: 0; width: min(280px, calc(100vw - 20px)); }
}