/**
 * Estilos del frontend para el bloque Menú de Usuario
 *
 * @package LYC
 */

/* Variables CSS */
:root {
	--lyc-menu-bg: #ffffff;
	--lyc-menu-text: #1e1e1e;
	--lyc-menu-text-secondary: #666666;
	--lyc-menu-border: #e5e5e5;
	--lyc-menu-hover: #f5f5f5;
	--lyc-menu-primary: #2271b1;
	--lyc-menu-danger: #d63638;
	--lyc-menu-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	--lyc-menu-radius: 12px;
	--lyc-menu-transition: 0.2s ease;
}

/* Contenedor principal */
.lyc-user-menu {
	position: relative;
	display: inline-flex;
	align-items: center;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* Botón trigger */
.lyc-user-menu__trigger {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px;
	background: transparent;
	border: none;
	border-radius: 50px;
	cursor: pointer;
	transition: background var(--lyc-menu-transition);
}

.lyc-user-menu__trigger:hover {
	background: var(--lyc-menu-hover);
}

.lyc-user-menu__trigger:focus {
	outline: 2px solid var(--lyc-menu-primary);
	outline-offset: 2px;
}

/* Avatar */
.lyc-user-menu__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
}

.lyc-user-menu__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.lyc-user-menu__avatar--large {
	width: 60px !important;
	height: 60px !important;
}

/* Nombre de usuario */
.lyc-user-menu__name {
	font-size: 14px;
	font-weight: 500;
	color: var(--lyc-menu-text);
	max-width: 120px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Flecha */
.lyc-user-menu__arrow {
	color: var(--lyc-menu-text-secondary);
	transition: transform var(--lyc-menu-transition);
	flex-shrink: 0;
}

.lyc-user-menu.is-open .lyc-user-menu__arrow {
	transform: rotate(180deg);
}

/* Dropdown */
.lyc-user-menu__dropdown {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 280px;
	background: var(--lyc-menu-bg);
	border-radius: var(--lyc-menu-radius);
	box-shadow: var(--lyc-menu-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: opacity var(--lyc-menu-transition),
		transform var(--lyc-menu-transition), visibility var(--lyc-menu-transition);
	z-index: 99999;
	overflow: hidden;
}

/* Posiciones del menú */
.lyc-user-menu[data-position="bottom-left"] .lyc-user-menu__dropdown {
	right: auto;
	left: 0;
}

.lyc-user-menu[data-position="top-right"] .lyc-user-menu__dropdown {
	top: auto;
	bottom: calc(100% + 8px);
}

.lyc-user-menu[data-position="top-left"] .lyc-user-menu__dropdown {
	top: auto;
	bottom: calc(100% + 8px);
	right: auto;
	left: 0;
}

.lyc-user-menu.is-open .lyc-user-menu__dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Header del dropdown */
.lyc-user-menu__header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px;
	background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

.lyc-user-menu__user-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.lyc-user-menu__display-name {
	font-size: 15px;
	font-weight: 600;
	color: var(--lyc-menu-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lyc-user-menu__email {
	font-size: 13px;
	color: var(--lyc-menu-text-secondary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Divisor */
.lyc-user-menu__divider {
	height: 1px;
	background: var(--lyc-menu-border);
	margin: 0;
}

/* Navegación */
.lyc-user-menu__nav {
	padding: 8px 0;
}

/* Items del menú */
.lyc-user-menu__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	color: var(--lyc-menu-text);
	text-decoration: none;
	transition: background var(--lyc-menu-transition),
		color var(--lyc-menu-transition);
	font-size: 14px;
	font-weight: 500;
}

.lyc-user-menu__item:hover {
	background: var(--lyc-menu-hover);
	color: var(--lyc-menu-primary);
	text-decoration: none;
}

.lyc-user-menu__item:focus {
	outline: none;
	background: var(--lyc-menu-hover);
}

.lyc-user-menu__item--logout {
	color: var(--lyc-menu-danger);
	margin-top: 4px;
	margin-bottom: 4px;
}

.lyc-user-menu__item--logout:hover {
	background: #fef2f2;
	color: var(--lyc-menu-danger);
}

/* Iconos */
.lyc-user-menu__icon {
	flex-shrink: 0;
	color: currentColor;
}

/* Botón de login para usuarios no logueados */
.lyc-user-menu__login-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	background: var(--lyc-menu-primary);
	color: #ffffff;
	text-decoration: none;
	border-radius: 50px;
	font-size: 14px;
	font-weight: 500;
	transition: background var(--lyc-menu-transition),
		transform var(--lyc-menu-transition);
}

.lyc-user-menu__login-btn:hover {
	background: #135e96;
	color: #ffffff;
	text-decoration: none;
	transform: translateY(-1px);
}

.lyc-user-menu__login-btn:focus {
	outline: 2px solid var(--lyc-menu-primary);
	outline-offset: 2px;
}

.lyc-user-menu__login-btn .lyc-user-menu__icon {
	color: #ffffff;
}

/* Overlay para móvil */
.lyc-user-menu__overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 99998;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--lyc-menu-transition),
		visibility var(--lyc-menu-transition);
}

/* ==========================================
   ESTILOS RESPONSIVE - MÓVIL
   ========================================== */

@media (max-width: 768px) {
	/* Ocultar nombre en móvil para ahorrar espacio */
	.lyc-user-menu__name {
		display: none;
	}

	/* Overlay visible en móvil cuando está abierto */
	.lyc-user-menu__overlay {
		display: block;
	}

	.lyc-user-menu.is-open .lyc-user-menu__overlay {
		opacity: 1;
		visibility: visible;
	}

	/* Dropdown como modal en móvil */
	.lyc-user-menu__dropdown {
		position: fixed;
		top: auto !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		width: 100%;
		max-width: 100%;
		min-width: 100%;
		border-radius: var(--lyc-menu-radius) var(--lyc-menu-radius) 0 0;
		transform: translateY(100%);
		max-height: 80vh;
		overflow-y: auto;
	}

	.lyc-user-menu.is-open .lyc-user-menu__dropdown {
		transform: translateY(0);
	}

	/* Header más grande en móvil */
	.lyc-user-menu__header {
		padding: 20px;
	}

	/* Items más grandes para touch */
	.lyc-user-menu__item {
		padding: 16px 20px;
		font-size: 16px;
	}

	/* Safe area para dispositivos con notch */
	.lyc-user-menu__dropdown::after {
		content: "";
		display: block;
		height: env(safe-area-inset-bottom, 0);
	}

	/* Indicador de arrastre en móvil */
	.lyc-user-menu__dropdown::before {
		content: "";
		display: block;
		width: 40px;
		height: 4px;
		background: var(--lyc-menu-border);
		border-radius: 2px;
		margin: 12px auto 8px;
	}

	/* Botón de login más pequeño en móvil */
	.lyc-user-menu__login-btn {
		padding: 8px 16px;
	}

	.lyc-user-menu__login-btn span {
		display: none;
	}

	.lyc-user-menu__login-btn .lyc-user-menu__icon {
		width: 24px;
		height: 24px;
	}
}

/* ==========================================
   COMPATIBILIDAD CON MENÚS MODALES
   ========================================== */

/* Cuando está dentro de un menú modal de navegación */
.modal-menu .lyc-user-menu,
.mobile-menu .lyc-user-menu,
.nav-modal .lyc-user-menu,
[class*="mobile-nav"] .lyc-user-menu,
[class*="menu-modal"] .lyc-user-menu {
	width: 100%;
}

.modal-menu .lyc-user-menu__trigger,
.mobile-menu .lyc-user-menu__trigger,
.nav-modal .lyc-user-menu__trigger,
[class*="mobile-nav"] .lyc-user-menu__trigger,
[class*="menu-modal"] .lyc-user-menu__trigger {
	width: 100%;
	justify-content: flex-start;
	padding: 12px 16px;
	border-radius: 8px;
}

.modal-menu .lyc-user-menu__name,
.mobile-menu .lyc-user-menu__name,
.nav-modal .lyc-user-menu__name,
[class*="mobile-nav"] .lyc-user-menu__name,
[class*="menu-modal"] .lyc-user-menu__name {
	display: block;
}

.modal-menu .lyc-user-menu__dropdown,
.mobile-menu .lyc-user-menu__dropdown,
.nav-modal .lyc-user-menu__dropdown,
[class*="mobile-nav"] .lyc-user-menu__dropdown,
[class*="menu-modal"] .lyc-user-menu__dropdown {
	position: relative;
	top: 0 !important;
	bottom: auto !important;
	left: 0 !important;
	right: auto !important;
	width: 100%;
	box-shadow: none;
	border: 1px solid var(--lyc-menu-border);
	margin-top: 8px;
	transform: none;
	max-height: none;
	overflow: visible;
}

.modal-menu .lyc-user-menu__dropdown::before,
.mobile-menu .lyc-user-menu__dropdown::before,
.nav-modal .lyc-user-menu__dropdown::before,
[class*="mobile-nav"] .lyc-user-menu__dropdown::before,
[class*="menu-modal"] .lyc-user-menu__dropdown::before {
	display: none;
}

.modal-menu .lyc-user-menu.is-open .lyc-user-menu__dropdown,
.mobile-menu .lyc-user-menu.is-open .lyc-user-menu__dropdown,
.nav-modal .lyc-user-menu.is-open .lyc-user-menu__dropdown,
[class*="mobile-nav"] .lyc-user-menu.is-open .lyc-user-menu__dropdown,
[class*="menu-modal"] .lyc-user-menu.is-open .lyc-user-menu__dropdown {
	transform: none;
}

.modal-menu .lyc-user-menu__overlay,
.mobile-menu .lyc-user-menu__overlay,
.nav-modal .lyc-user-menu__overlay,
[class*="mobile-nav"] .lyc-user-menu__overlay,
[class*="menu-modal"] .lyc-user-menu__overlay {
	display: none !important;
}

/* ==========================================
   ACCESIBILIDAD
   ========================================== */

/* Modo de alto contraste */
@media (prefers-contrast: high) {
	.lyc-user-menu__dropdown {
		border: 2px solid var(--lyc-menu-text);
	}

	.lyc-user-menu__item:focus {
		outline: 3px solid var(--lyc-menu-text);
		outline-offset: -3px;
	}
}

/* Reducir movimiento */
@media (prefers-reduced-motion: reduce) {
	.lyc-user-menu__dropdown,
	.lyc-user-menu__arrow,
	.lyc-user-menu__overlay,
	.lyc-user-menu__item,
	.lyc-user-menu__trigger,
	.lyc-user-menu__login-btn {
		transition: none;
	}
}