/*
 * Ruta: wp-content/plugins/esoarch-master/assets/css/esm-header.css
 * Header fijo de la landing + botón del alumno.
 */

/* ---------- Header fijo ---------- */
.esm-header {
	position: fixed !important;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	width: auto !important;   /* puede vivir dentro del hero: ignora el ancho del padre */
	max-width: none !important;
	margin: 0 !important;
	z-index: 50 !important; /* Elementor fija z-index en sus contenedores con más especificidad */
	background-color: transparent;
	border-bottom: 1px solid transparent;
	transition: background-color .35s ease, border-color .35s ease, padding .35s ease, backdrop-filter .35s ease;
}
.esm-header.is-scrolled {
	background-color: rgba(22, 19, 15, .9);
	border-bottom-color: rgba(230, 175, 39, .25);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	padding-top: 8px !important;
	padding-bottom: 8px !important;
}
/* Logo algo más pequeño al compactar */
.esm-header .esm-header__logo img { transition: height .35s ease; }
.esm-header.is-scrolled .esm-header__logo img { height: 36px !important; width: auto; }

/* Grupo derecho (botón del alumno): ancho según contenido, alineado a la derecha */
.esm-header .esm-header__actions {
	width: auto !important;
	max-width: none !important;
	flex: 0 0 auto !important;
	margin-left: auto;
}


/* ---------- Botón del alumno ---------- */
.esm-student-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 42px;
	padding: 6px 16px 6px 12px;
	font-family: "Rajdhani", "Arial Narrow", Arial, sans-serif;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	color: #16130F;
	background: #E6AF27;
	border: 1px solid #E6AF27;
	transition: background-color .25s, color .25s, border-color .25s;
}
.esm-student-btn:hover,
.esm-student-btn:focus-visible {
	background: #F7F5F0;
	border-color: #F7F5F0;
	color: #16130F;
}
.esm-student-btn:focus-visible { outline: 2px solid #E6AF27; outline-offset: 3px; }
.esm-student-btn__icon { width: 18px; height: 18px; fill: currentColor; flex: none; }

/* Con sesión: avatar + nombre */
.esm-student-btn--user { padding-left: 6px; }
.esm-student-btn__avatar {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
	border: 1px solid rgba(22, 19, 15, .25);
}
.esm-student-btn__text { display: flex; flex-direction: column; line-height: 1.05; }
.esm-student-btn__name {
	font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
	font-weight: 400;
	font-size: 11px;
	letter-spacing: .04em;
	text-transform: none;
	opacity: .75;
	max-width: 14ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---------- Móvil ---------- */
/* El header y su grupo derecho siempre en una sola fila (Elementor apila en móvil por defecto) */
.esm-header,
.esm-header > .e-con-inner,
.esm-header .esm-header__actions,
.esm-header .esm-header__actions > .e-con-inner {
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
}
.esm-header > .e-con-inner { justify-content: space-between !important; }
.esm-header .esm-header__logo { flex: 0 0 auto !important; width: auto !important; }

@media (max-width: 767px) {
	.esm-header .esm-header__logo img { height: 40px !important; width: auto; }
	.esm-header .esm-header__actions,
	.esm-header .esm-header__actions > .e-con-inner { gap: 10px !important; }
	.esm-header .esm-header__actions { flex: 0 1 auto !important; min-width: 0; }
	.esm-student-btn { font-size: 13px; padding: 5px 12px 5px 10px; min-height: 38px; }
	.esm-student-btn__name { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.esm-header, .esm-header .esm-header__logo img { transition: none; }
}

/* =====================================================================
 * Cabecera ÚNICA ([esm_header] en la landing y páginas de acceso).
 * Mismas medidas en todas las páginas para que no haya saltos al navegar.
 * ===================================================================== */
.esm-site-header {
	--esm-header-pad-y: 16px;
	--esm-header-pad-x: 56px;
	--esm-logo-h: 57px;
	padding: 0 !important; /* el relleno vive en __inner */
}
.esm-site-header.is-scrolled {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
.esm-site-header .esm-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: var(--esm-header-pad-y) var(--esm-header-pad-x);
	transition: padding .35s ease;
}
.esm-site-header.is-scrolled .esm-header__inner {
	padding-top: 8px;
	padding-bottom: 8px;
}
.esm-site-header .esm-header__logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}
.esm-site-header .esm-header__logo img {
	display: block;
	height: var(--esm-logo-h);
	width: auto;
}
.esm-site-header .esm-header__name {
	font-family: "Rajdhani", "Arial Narrow", Arial, sans-serif;
	font-weight: 700;
	font-size: 1.25rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #F7F5F0;
}

/* Fondo tinta desde el principio (páginas de acceso) */
.esm-header--solid {
	background-color: rgba(22, 19, 15, .92);
	border-bottom-color: rgba(230, 175, 39, .25);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

@media (max-width: 767px) {
	.esm-site-header {
		--esm-header-pad-y: 12px;
		--esm-header-pad-x: 16px;
		--esm-logo-h: 40px;
	}
}