/**
 * Digital Invite Calendar — Estilos del Menú Frontend
 *
 * - CSS custom properties para theming fácil
 * - Dark mode automático (prefers-color-scheme)
 * - Animaciones suaves respetando prefers-reduced-motion
 * - Completamente aislado: no afecta ningún estilo externo
 * - BEM-like naming para evitar conflictos
 *
 * @package DIC
 */

/* ── Variables de tema ──────────────────────────────────────────────────────── */
:root {
	--dic-bg:              #ffffff;
	--dic-bg-overlay:      rgba(0, 0, 0, 0);
	--dic-surface:         rgba(255, 255, 255, 0.95);
	--dic-border:          rgba(0, 0, 0, 0.08);
	--dic-shadow-color:    rgba(0, 0, 0, 0.12);
	--dic-shadow:          0 4px 6px -1px rgba(0, 0, 0, 0.1),
	                       0 12px 40px -4px rgba(0, 0, 0, 0.14),
	                       0 0 0 1px rgba(0, 0, 0, 0.04);
	--dic-radius:          16px;
	--dic-radius-item:     10px;
	--dic-accent:          #6366f1;
	--dic-accent-light:    rgba(99, 102, 241, 0.08);
	--dic-text:            #111827;
	--dic-text-secondary:  #6b7280;
	--dic-hover-bg:        rgba(0, 0, 0, 0.04);
	--dic-active-bg:       rgba(0, 0, 0, 0.08);
	--dic-divider:         rgba(0, 0, 0, 0.06);
	--dic-font:            -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	                       "Helvetica Neue", Arial, sans-serif;
	--dic-font-size:       13.5px;
	--dic-line-height:     1.4;
	--dic-transition:      200ms cubic-bezier(0.4, 0, 0.2, 1);
	--dic-transition-slow: 280ms cubic-bezier(0.4, 0, 0.2, 1);
	--dic-z-index:         999999;
}

/* ── Dark mode automático ───────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
	:root {
		--dic-bg:             #1c1c1e;
		--dic-surface:        rgba(28, 28, 30, 0.96);
		--dic-border:         rgba(255, 255, 255, 0.1);
		--dic-shadow:         0 4px 6px -1px rgba(0, 0, 0, 0.4),
		                      0 12px 40px -4px rgba(0, 0, 0, 0.5),
		                      0 0 0 1px rgba(255, 255, 255, 0.06);
		--dic-text:           #f5f5f7;
		--dic-text-secondary: #98989d;
		--dic-hover-bg:       rgba(255, 255, 255, 0.06);
		--dic-active-bg:      rgba(255, 255, 255, 0.1);
		--dic-divider:        rgba(255, 255, 255, 0.08);
		--dic-accent-light:   rgba(99, 102, 241, 0.15);
	}
}

/* ── Menú contenedor ────────────────────────────────────────────────────────── */
.dic-menu {
	/* Posicionamiento */
	position:  fixed;
	z-index:   var(--dic-z-index);

	/* Aspecto */
	background:    var(--dic-surface);
	border-radius: var(--dic-radius);
	box-shadow:    var(--dic-shadow);
	border:        1px solid var(--dic-border);

	/* Dimensiones */
	min-width:  210px;
	max-width:  260px;
	padding:    8px;

	/* Tipografía */
	font-family:  var(--dic-font);
	font-size:    var(--dic-font-size);
	line-height:  var(--dic-line-height);
	color:        var(--dic-text);

	/* Reset */
	margin:  0;
	list-style: none;
	box-sizing: border-box;

	/* Layout interno */
	display:        flex;
	flex-direction: column;
	gap:            2px;

	/* Animación inicial (cerrado) */
	opacity:          0;
	transform:        translateY(-8px) scale(0.96);
	transform-origin: top left;
	pointer-events:   none;
	transition:
		opacity   var(--dic-transition),
		transform var(--dic-transition);

	/* Backface para GPU compositing */
	will-change: opacity, transform;
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter:          blur(20px);
}

/* Estado abierto */
.dic-menu--open {
	opacity:        1;
	transform:      translateY(0) scale(1);
	pointer-events: auto;
}

/* ── Título del menú ────────────────────────────────────────────────────────── */
.dic-menu__title {
	font-size:      10.5px;
	font-weight:    600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color:          var(--dic-text-secondary);
	padding:        5px 10px 7px;
	margin:         0;
	user-select:    none;
}

/* ── Divisor ────────────────────────────────────────────────────────────────── */
.dic-menu__divider {
	height:           1px;
	background-color: var(--dic-divider);
	margin:           0 0 4px;
	border:           none;
}

/* ── Items del menú ─────────────────────────────────────────────────────────── */
.dic-menu__item {
	/* Reset de botón */
	display:    flex;
	align-items: center;
	gap:         10px;
	width:       100%;
	padding:     9px 12px;
	background:  transparent;
	border:      none;
	border-radius: var(--dic-radius-item);
	cursor:      pointer;

	/* Tipografía */
	font-family: var(--dic-font);
	font-size:   var(--dic-font-size);
	font-weight: 450;
	color:       var(--dic-text);
	text-align:  left;
	white-space: nowrap;
	line-height: 1;

	/* Animación */
	transition:
		background-color var(--dic-transition),
		transform        120ms cubic-bezier(0.4, 0, 0.2, 1);

	/* Accesibilidad táctil */
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	box-sizing: border-box;
}

.dic-menu__item:hover {
	background-color: var(--dic-hover-bg);
}

.dic-menu__item:active {
	background-color: var(--dic-active-bg);
	transform:        scale(0.975);
}

/* Focus visible solo en navegación por teclado */
.dic-menu__item:focus {
	outline: none;
}
.dic-menu__item:focus-visible {
	outline:        2px solid var(--dic-accent);
	outline-offset: 0;
	background-color: var(--dic-accent-light);
}

/* ── Icono ──────────────────────────────────────────────────────────────────── */
.dic-menu__icon {
	display:      flex;
	align-items:  center;
	justify-content: center;
	flex-shrink:  0;
	width:        20px;
	height:       20px;
	color:        var(--dic-text-secondary);
	transition:   color var(--dic-transition);
}

.dic-menu__item:hover .dic-menu__icon {
	color: var(--dic-text);
}

/* ── Label ──────────────────────────────────────────────────────────────────── */
.dic-menu__label {
	flex:        1;
	overflow:    hidden;
	text-overflow: ellipsis;
}

/* ── Responsive mobile ──────────────────────────────────────────────────────── */
@media (max-width: 480px) {
	.dic-menu {
		min-width: 190px;
		--dic-radius: 14px;
		--dic-font-size: 13px;
	}

	.dic-menu__item {
		padding: 10px 12px;
	}
}

/* ── Respeto a prefers-reduced-motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.dic-menu {
		transition: opacity 100ms linear;
		transform:  none !important;
	}

	.dic-menu__item {
		transition: background-color 100ms linear;
	}

	.dic-menu__item:active {
		transform: none;
	}
}