/* ===========================================================================
   BARRA SUPERIOR
   =========================================================================== */

.superior{
	position: sticky;
	top: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	gap: 16px;
	height: var(--superior-alto);
	padding: 0 calc(var(--respiro) + 4px);
	flex: 0 0 auto;
	border-bottom: 1px solid var(--linea);
	background: linear-gradient(180deg, rgba(8,12,23,.82), rgba(8,12,23,.60));
	backdrop-filter: blur(22px) saturate(140%);
	box-shadow: 0 1px 0 rgba(255,255,255,.03), 0 12px 32px rgba(0,0,0,.22);
}

.superior-separador{ flex: 1 1 auto; }

.btn-menu{ display:none; }

/* --- Interruptor de tema. --- */
.tema-interruptor{
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 4px;
	gap: 2px;
	border: 1px solid var(--linea);
	border-radius: var(--radio-pil);
	background: var(--superficie-honda);
	box-shadow: inset 0 2px 6px rgba(0,0,0,.3);
}
.tema-interruptor button{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px; height: 34px;
	border-radius: 50%;
	color: var(--texto-tenue);
	transition: all var(--transicion);
}
.tema-interruptor button:hover{ color: var(--texto); }
.tema-interruptor button[aria-pressed="true"]{
	color: var(--texto);
	background:
		linear-gradient(180deg, rgba(255,255,255,.16), transparent),
		var(--superficie-3);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 3px 10px rgba(0,0,0,.3);
}

/* --- Acceso del perfil. --- */
.perfil-boton{
	display: flex;
	align-items: center;
	gap: 11px;
	height: 46px;
	padding: 0 14px 0 8px;
	border: 1px solid var(--linea);
	border-radius: var(--radio-pil);
	background: var(--superficie);
	box-shadow: var(--sombra-interior), var(--sombra-1);
	transition: all var(--transicion);
}
.perfil-boton:hover{
	background: var(--superficie-3);
	border-color: var(--linea-fuerte);
	box-shadow: var(--sombra-interior), var(--sombra-2);
	transform: translateY(-1px);
}
.perfil-boton .usuario-avatar{ width:32px; height:32px; font-size:11.5px; }
.perfil-copia{ text-align: left; line-height: 1.25; }
.perfil-copia b{ display:block; font-size: 13px; font-weight: 700; }
.perfil-copia span{ display:block; font-size: 11px; color: var(--texto-tenue); }