:root {
	--dark-red: #8c1c13;
	--bittersweet-shimmer: #bf4342;
	--almond: #e7d7c1;
	--beaver: #a78a7f;
	--liver: #735751;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: 'Inter', sans-serif;
	overflow-x: hidden;
	background: var(--almond);
}

.album-container {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	perspective: 2000px;
	padding: 20px;
}

.background-gradient {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: 
		radial-gradient(circle at 20% 30%, rgba(231, 215, 193, 0.8) 0%, transparent 50%),
		radial-gradient(circle at 80% 70%, rgba(191, 67, 66, 0.1) 0%, transparent 50%),
		radial-gradient(circle at 40% 80%, rgba(167, 138, 127, 0.3) 0%, transparent 40%),
		linear-gradient(135deg, var(--almond) 0%, #f2e6d0 25%, var(--almond) 50%, #ede0c8 75%, var(--almond) 100%);
	z-index: -3;
}

/* Elementos decorativos del fondo */
.background-elements {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: -2;
	overflow: hidden;
}

.bg-element {
	position: absolute;
	opacity: 0.3;
}

.bg-circle-1 {
	top: 10%;
	left: 5%;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: linear-gradient(45deg, var(--bittersweet-shimmer), transparent);
	animation: floatSlow 20s ease-in-out infinite;
}

.bg-circle-2 {
	top: 60%;
	right: 8%;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--beaver), transparent);
	animation: floatSlow 25s ease-in-out infinite reverse;
}

.bg-circle-3 {
	bottom: 15%;
	left: 10%;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: linear-gradient(225deg, var(--liver), transparent);
	animation: floatSlow 18s ease-in-out infinite;
}

.bg-heart-1 {
	top: 25%;
	right: 15%;
	width: 80px;
	height: 80px;
	background: var(--bittersweet-shimmer);
	opacity: 0.15;
	animation: heartFloat 15s ease-in-out infinite;
	transform: rotate(45deg);
}

.bg-heart-1::before,
.bg-heart-1::after {
	content: '';
	position: absolute;
	width: 80px;
	height: 80px;
	background: var(--bittersweet-shimmer);
	border-radius: 50%;
}

.bg-heart-1::before {
	top: -40px;
	left: 0;
}

.bg-heart-1::after {
	top: 0;
	left: -40px;
}

.bg-heart-2 {
	bottom: 30%;
	right: 20%;
	width: 60px;
	height: 60px;
	background: var(--dark-red);
	opacity: 0.1;
	animation: heartFloat 18s ease-in-out infinite reverse;
	transform: rotate(45deg);
}

.bg-heart-2::before,
.bg-heart-2::after {
	content: '';
	position: absolute;
	width: 60px;
	height: 60px;
	background: var(--dark-red);
	border-radius: 50%;
}

.bg-heart-2::before {
	top: -30px;
	left: 0;
}

.bg-heart-2::after {
	top: 0;
	left: -30px;
}

.bg-pattern-1 {
	top: 40%;
	left: 2%;
	width: 120px;
	height: 120px;
	background: repeating-linear-gradient(
		45deg,
		transparent,
		transparent 10px,
		rgba(167, 138, 127, 0.1) 10px,
		rgba(167, 138, 127, 0.1) 20px
	);
	animation: rotatePattern 30s linear infinite;
	border-radius: 15px;
}

.bg-pattern-2 {
	bottom: 20%;
	right: 5%;
	width: 180px;
	height: 180px;
	background: conic-gradient(
		from 0deg,
		transparent 0deg,
		rgba(191, 67, 66, 0.08) 90deg,
		transparent 180deg,
		rgba(140, 28, 19, 0.05) 270deg,
		transparent 360deg
	);
	animation: rotatePattern 40s linear infinite reverse;
	border-radius: 50%;
}

.bg-dots {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: 
		radial-gradient(circle at 25% 25%, rgba(167, 138, 127, 0.15) 2px, transparent 2px),
		radial-gradient(circle at 75% 75%, rgba(191, 67, 66, 0.1) 1px, transparent 1px);
	background-size: 150px 150px, 200px 200px;
	animation: movePattern 60s linear infinite;
}

@keyframes floatSlow {
	0%, 100% { transform: translateY(0px) translateX(0px) scale(1); }
	25% { transform: translateY(-30px) translateX(20px) scale(1.1); }
	50% { transform: translateY(-10px) translateX(-15px) scale(0.9); }
	75% { transform: translateY(-40px) translateX(10px) scale(1.05); }
}

@keyframes heartFloat {
	0%, 100% { transform: rotate(45deg) translateY(0px) scale(1); }
	50% { transform: rotate(45deg) translateY(-20px) scale(1.1); }
}

@keyframes rotatePattern {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

@keyframes movePattern {
	from { background-position: 0 0, 0 0; }
	to { background-position: 150px 150px, -200px -200px; }
}

/* Álbum principal */
.album-book {
	position: relative;
	width: min(1200px, 95vw);
	height: min(900px, 80vh);
	max-width: 1200px;
	max-height: 900px;
	transform-style: preserve-3d;
	transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	z-index: 10;
}

/* Cubiertas del álbum (divididas por la mitad) */
.cover-left,
.cover-right {
	position: absolute;
	width: 50%;
	height: 100%;
	background: linear-gradient(145deg, var(--dark-red), var(--bittersweet-shimmer));
	border-radius: 15px;
	box-shadow: 
		0 30px 60px rgba(140, 28, 19, 0.4),
		0 10px 30px rgba(0, 0, 0, 0.3),
		inset 0 2px 10px rgba(255, 255, 255, 0.1);
	transition: all 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	z-index: 10;
	cursor: pointer;
}

.cover-left {
	left: 0;
	transform-origin: right center;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	transform: rotateY(0deg);
}

.cover-right {
	right: 0;
	transform-origin: left center;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	transform: rotateY(0deg);
}

/* Estado inicial - libro cerrado */
.album-book .cover-left {
	transform: rotateY(0deg);
	z-index: 8;
}

.album-book .cover-right {
	transform: rotateY(0deg);
	z-index: 9;
}

/* Animación de apertura */
.album-book.opening .cover-left {
	transform: rotateY(-160deg);
}

.album-book.opening .cover-right {
	transform: rotateY(160deg);
}

/* Álbum abierto sin animación (para cuando venimos de categoría) */
.album-book.opened .cover-left {
	transform: rotateY(-160deg);
	transition: none;
}

.album-book.opened .cover-right {
	transform: rotateY(160deg);
	transition: none;
}

/* Control de animaciones basado en variables CSS dinámicas */
.skip-animations .album-book {
	transition: none !important;
}

.skip-animations .album-book .cover-left,
.skip-animations .album-book .cover-right {
	transition: none !important;
}

.skip-animations .album-book .page {
	transition: none !important;
}

/* Estado inicial completado para evitar destellos */
:root[style*="--album-animation-state: completed"] .album-book {
	animation: none !important;
}

:root[style*="--album-animation-state: completed"] .album-book .cover-left {
	transform: rotateY(-160deg);
	transition: none !important;
}

:root[style*="--album-animation-state: completed"] .album-book .cover-right {
	transform: rotateY(160deg);
	transition: none !important;
}

:root[style*="--album-animation-state: completed"] .album-book .page {
	opacity: 1;
	transform: translateX(0);
	transition: none !important;
}

/* Asegurar que los iconos no animen si se salta la animación */
.skip-animations .folder-icon {
	animation: none !important;
}

.skip-animations .destination-icon {
	animation: none !important;
}

.skip-animations .bg-element {
	animation: none !important;
}

.skip-animations .bg-pattern-1,
.skip-animations .bg-pattern-2 {
	animation: none !important;
}

/* Línea central del libro */
.book-spine {
	position: absolute;
	left: 50%;
	top: 0;
	width: 4px;
	height: 100%;
	background: linear-gradient(to bottom, var(--dark-red), var(--bittersweet-shimmer));
	transform: translateX(-50%);
	z-index: 5;
	box-shadow: 0 0 10px rgba(140, 28, 19, 0.5);
}

.cover-decoration {
	padding: 20px;
	text-align: center;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.cover-title {
	font-family: 'Playfair Display', serif;
	font-size: clamp(3rem, 8vw, 6rem);
	font-weight: 800;
	color: var(--almond);
	margin-bottom: 20px;
	text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
	letter-spacing: 3px;
	animation: letterGlow 3s ease-in-out infinite alternate;
}

.cover-heart {
	font-size: clamp(2rem, 5vw, 3rem);
	animation: heartPulse 2s ease-in-out infinite;
}

.full-cover-title {
	font-family: 'Playfair Display', serif;
	font-size: clamp(4rem, 10vw, 8rem);
	font-weight: 800;
	color: var(--almond);
	margin-bottom: 10px;
	text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
	letter-spacing: 2px;
	animation: letterGlow 3s ease-in-out infinite alternate;
}

.cover-subtitle {
	font-family: 'Dancing Script', cursive;
	font-size: clamp(1.2rem, 4vw, 2.5rem);
	font-weight: 600;
	color: var(--almond);
	margin-bottom: 15px;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
	opacity: 0.9;
}

.cover-hearts {
	font-size: clamp(2rem, 5vw, 3.5rem);
	animation: heartPulse 2s ease-in-out infinite;
}

@keyframes letterGlow {
	0% { text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); }
	100% { text-shadow: 0 4px 20px rgba(231, 215, 193, 0.6), 0 4px 8px rgba(0, 0, 0, 0.3); }
}

@keyframes heartPulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.2); }
}

.page {
	position: absolute;
	width: 50%;
	height: 100%;
	background: #fefefe;
	border-radius: 10px;
	box-shadow: 
		0 20px 40px rgba(115, 87, 81, 0.2),
		0 5px 15px rgba(0, 0, 0, 0.1);
	opacity: 0;
	transform: scale(0.95);
	transition: all 2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.album-book.opening .page {
	opacity: 1;
	transform: scale(1);
}

.album-book.opened .page {
	opacity: 1;
	transform: scale(1);
	transition: none;
}

.page-left {
	left: 0;
	transform-origin: right center;
	transition-delay: 1s;
}

.page-right {
	right: 0;
	transform-origin: left center;
	transition-delay: 1.2s;
}

.page-content {
	padding: clamp(20px, 5vw, 60px) clamp(15px, 4vw, 50px);
	height: 100%;
	display: flex;
	flex-direction: column;
}

.page-content h2 {
	font-family: 'Playfair Display', serif;
	font-size: clamp(1.2rem, 4vw, 2.2rem);
	color: var(--dark-red);
	text-align: center;
	margin-bottom: clamp(15px, 3vw, 40px);
	border-bottom: 2px solid var(--bittersweet-shimmer);
	padding-bottom: 15px;
}

/* Grid de carpetas */
.folder-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(8px, 2vw, 15px);
	margin-top: 20px;
}

.folder {
	background: linear-gradient(135deg, #fff 0%, #fafafa 100%);
	border: 2px solid var(--almond);
	border-radius: 12px;
	padding: clamp(8px, 2vw, 15px);
	text-align: center;
	cursor: pointer;
	transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	box-shadow: 0 6px 15px rgba(115, 87, 81, 0.1);
	position: relative;
	overflow: hidden;
}

.folder::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(191, 67, 66, 0.1), transparent);
	transition: left 0.5s ease;
}

.folder:hover::before {
	left: 100%;
}

.folder:hover {
	border-color: var(--bittersweet-shimmer);
	box-shadow: 0 10px 25px rgba(140, 28, 19, 0.2);
}

.folder-icon {
	font-size: clamp(1.2rem, 3vw, 2rem);
	margin-bottom: 8px;
	animation: iconBounce 2s ease-in-out infinite;
}

.folder:nth-child(1) .folder-icon { animation-delay: 0s; }
.folder:nth-child(2) .folder-icon { animation-delay: 0.5s; }
.folder:nth-child(3) .folder-icon { animation-delay: 1s; }

@keyframes iconBounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-5px); }
}

.folder-name {
	font-family: 'Playfair Display', serif;
	font-size: clamp(0.8rem, 2vw, 1.1rem);
	font-weight: 600;
	color: var(--dark-red);
	margin-bottom: 6px;
}

.folder-count {
	font-size: clamp(0.6rem, 1.5vw, 0.8rem);
	color: var(--liver);
	opacity: 0.8;
}

/* Header con botones de navegación */
.album-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	padding: clamp(15px, 3vw, 30px);
	z-index: 100;
	display: flex;
	justify-content: space-between;
	align-items: center;
	pointer-events: none;
}

.back-button-container {
	pointer-events: auto;
}

.back-button {
	background: linear-gradient(45deg, var(--dark-red), var(--bittersweet-shimmer));
	color: var(--almond);
	text-decoration: none;
	padding: clamp(8px, 2vw, 12px) clamp(15px, 3vw, 25px);
	border-radius: 25px;
	font-weight: 600;
	box-shadow: 0 8px 20px rgba(140, 28, 19, 0.3);
	transition: all 0.3s ease;
	display: inline-block;
	font-size: clamp(0.8rem, 2vw, 1rem);
}

.back-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(140, 28, 19, 0.4);
}

.header-edit-button-container {
	pointer-events: auto;
	display: none;
}

/* Responsive design mejorado */

/* Extra Large Desktop */
@media (min-width: 1400px) {
	.album-book {
		width: 1400px;
		height: 1050px;
	}
}

/* Large Desktop */
@media (max-width: 1400px) and (min-width: 1200px) {
	.album-book {
		width: 1200px;
		height: 900px;
	}
}

/* Medium Desktop */
@media (max-width: 1200px) and (min-width: 992px) {
	.album-book {
		width: 1000px;
		height: 750px;
	}
	
	.cover-decoration {
		padding: 40px 25px;
	}
}

/* Small Desktop / Large Tablet */
@media (max-width: 992px) and (min-width: 768px) {
	.album-book {
		width: 800px;
		height: 600px;
	}
	
	.cover-decoration {
		padding: 30px 20px;
	}
	
	.page-content {
		padding: 40px 30px;
	}
}

/* Medium Tablet */
@media (max-width: 768px) and (min-width: 576px) {
	.album-container {
		padding: 15px;
	}
	
	.album-book {
		width: 90vw;
		height: 70vh;
		min-height: 500px;
		max-width: 700px;
	}
	
	.cover-decoration {
		padding: 25px 15px;
	}
	
	.page-content {
		padding: 30px 20px;
	}
	
	/* Reducir elementos decorativos en tablet */
	.bg-circle-1,
	.bg-circle-2 {
		width: 120px;
		height: 120px;
	}
	
	.bg-circle-3 {
		width: 80px;
		height: 80px;
	}
}

/* Small Mobile */
@media (max-width: 576px) {
	.album-container {
		padding: 10px;
		min-height: 100dvh;
	}
	
	.album-book {
		width: 95vw;
		height: 80vh;
		min-height: 450px;
		max-height: 600px;
	}
	
	.cover-decoration {
		padding: 15px 10px;
	}
	
	.page-content {
		padding: 20px 15px;
	}
	
	.folder {
		padding: 10px 8px;
	}
	
	/* Cambiar posición del botón de edición en móviles */
	.edit-button {
		display: none !important;
	}
	
	.header-edit-button-container {
		display: block !important;
	}
	
	/* Ocultar algunos elementos decorativos en móvil */
	.bg-pattern-1,
	.bg-pattern-2 {
		display: none;
	}
	
	.bg-circle-1,
	.bg-circle-2 {
		width: 80px;
		height: 80px;
	}
	
	.bg-circle-3 {
		display: none;
	}
	
	.bg-heart-1,
	.bg-heart-2 {
		width: 40px;
		height: 40px;
	}
	
	.bg-heart-1::before,
	.bg-heart-1::after {
		width: 40px;
		height: 40px;
	}
	
	.bg-heart-1::before {
		top: -20px;
	}
	
	.bg-heart-1::after {
		left: -20px;
	}
	
	.bg-heart-2::before,
	.bg-heart-2::after {
		width: 40px;
		height: 40px;
	}
	
	.bg-heart-2::before {
		top: -20px;
	}
	
	.bg-heart-2::after {
		left: -20px;
	}
}

/* Extra Small Mobile */
@media (max-width: 400px) {
	.album-container {
		padding: 5px;
	}
	
	.album-book {
		width: 98vw;
		height: 75vh;
		min-height: 400px;
	}
	
	.cover-decoration {
		padding: 10px 8px;
	}
	
	.page-content {
		padding: 15px 10px;
	}
	
	.folder {
		padding: 8px 6px;
	}
	
	/* Simplificar aún más los elementos decorativos */
	.bg-heart-1,
	.bg-heart-2 {
		display: none;
	}
	
	.bg-circle-1,
	.bg-circle-2 {
		width: 60px;
		height: 60px;
	}
}

/* Orientation-specific adjustments */
@media (orientation: landscape) and (max-height: 500px) {
	.album-container {
		padding: 5px;
	}
	
	.album-book {
		height: 90vh;
		width: auto;
		aspect-ratio: 4/3;
	}
	
	.cover-decoration {
		padding: 10px;
	}
	
	.page-content {
		padding: 15px 12px;
	}
	
	/* En landscape mobile, ocultar elementos decorativos */
	.background-elements {
		display: none;
	}
}

/* Estilos para páginas de categoría */
.category-page {
	max-width: min(1200px, 95vw);
	width: 100%;
	padding: clamp(20px, 5vw, 40px);
	background: rgba(255, 255, 255, 0.95);
	border-radius: 20px;
	box-shadow: 
		0 30px 60px rgba(140, 28, 19, 0.15),
		0 10px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(10px);
	opacity: 0;
	transform: translateY(50px) scale(0.95);
	transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	z-index: 10;
	margin: 20px auto;
}

.category-page.loaded {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.category-header {
	text-align: center;
	margin-bottom: clamp(25px, 5vw, 50px);
	padding-bottom: clamp(15px, 3vw, 30px);
	border-bottom: 3px solid var(--bittersweet-shimmer);
	position: relative;
}

.category-title {
	font-family: 'Playfair Display', serif;
	font-size: clamp(1.8rem, 6vw, 3.5rem);
	font-weight: 700;
	color: var(--dark-red);
	margin-bottom: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(10px, 2vw, 20px);
	flex-wrap: wrap;
}

.category-icon {
	font-size: clamp(2rem, 6vw, 4rem);
	animation: iconPulse 3s ease-in-out infinite;
}

@keyframes iconPulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.1); }
}

.category-subtitle {
	font-family: 'Dancing Script', cursive;
	font-size: clamp(1rem, 3vw, 1.8rem);
	color: var(--liver);
	opacity: 0.8;
	margin: 0;
}

.category-content {
	width: 100%;
}

.destinations-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 45vw), 1fr));
	gap: clamp(15px, 3vw, 30px);
	justify-items: center;
}

.destination-folder {
	width: min(220px, 45vw);
	height: min(280px, 55vw);
	max-width: 280px;
	max-height: 350px;
	perspective: 1000px;
	cursor: pointer;
	opacity: 0;
	transform: translateY(30px);
	transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.destination-folder.visible {
	opacity: 1;
	transform: translateY(0);
}

.destination-cover {
	width: 100%;
	height: 100%;
	background: linear-gradient(145deg, #ffffff, #f8f8f8);
	border-radius: 15px;
	border: 3px solid var(--almond);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	box-shadow: 
		0 10px 25px rgba(115, 87, 81, 0.15),
		0 5px 15px rgba(0, 0, 0, 0.08);
}

.destination-cover::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(191, 67, 66, 0.1), transparent);
	transition: left 0.6s ease;
}

.destination-folder:hover .destination-cover::before {
	left: 100%;
}

.destination-folder:hover .destination-cover {
	border-color: var(--bittersweet-shimmer);
	box-shadow: 
		0 20px 40px rgba(140, 28, 19, 0.2),
		0 10px 25px rgba(0, 0, 0, 0.15);
}

.destination-icon {
	font-size: clamp(2.5rem, 6vw, 4rem);
	margin-bottom: clamp(10px, 2vw, 20px);
	animation: destinationFloat 4s ease-in-out infinite;
}

.destination-icon .generic-icon {
	font-size: clamp(2.5rem, 6vw, 4rem);
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.destination-icon .flag-icons {
	font-size: clamp(2.5rem, 6vw, 4rem);
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.destination-folder:nth-child(1) .destination-icon { animation-delay: 0s; }
.destination-folder:nth-child(2) .destination-icon { animation-delay: 0.8s; }
.destination-folder:nth-child(3) .destination-icon { animation-delay: 1.6s; }
.destination-folder:nth-child(4) .destination-icon { animation-delay: 2.4s; }
.destination-folder:nth-child(5) .destination-icon { animation-delay: 3.2s; }

@keyframes destinationFloat {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	25% { transform: translateY(-8px) rotate(2deg); }
	50% { transform: translateY(-4px) rotate(-1deg); }
	75% { transform: translateY(-12px) rotate(1deg); }
}

.destination-name {
	font-family: 'Playfair Display', serif;
	font-size: clamp(1rem, 2.5vw, 1.4rem);
	font-weight: 600;
	color: var(--dark-red);
	text-align: center;
	margin-bottom: 15px;
	padding: 0 10px;
}

.destination-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(to top, var(--dark-red), transparent);
	color: white;
	padding: 15px;
	text-align: center;
	transform: translateY(100%);
	transition: transform 0.3s ease;
}

.destination-folder:hover .destination-overlay {
	transform: translateY(0);
}

.view-photos {
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: clamp(0.7rem, 1.5vw, 0.9rem);
	text-transform: uppercase;
	letter-spacing: 1px;
}

/* Responsive para páginas de categoría mejorado */
@media (max-width: 1200px) {
	.destinations-grid {
		grid-template-columns: repeat(auto-fit, minmax(min(200px, 40vw), 1fr));
	}
	
	.destination-folder {
		width: min(200px, 40vw);
		height: min(250px, 50vw);
	}
}

@media (max-width: 768px) {
	.destinations-grid {
		grid-template-columns: repeat(auto-fit, minmax(min(180px, 45vw), 1fr));
		gap: 20px;
	}
	
	.destination-folder {
		width: min(180px, 45vw);
		height: min(220px, 55vw);
	}
	
	.category-title {
		flex-direction: column;
		gap: 10px;
	}
}

@media (max-width: 576px) {
	.destinations-grid {
		grid-template-columns: repeat(auto-fit, minmax(min(160px, 90vw), 1fr));
		gap: 15px;
	}
	
	.destination-folder {
		width: min(200px, 90vw);
		height: min(200px, 70vw);
	}
	
	.category-page {
		margin: 10px;
		border-radius: 15px;
	}
}

@media (max-width: 400px) {
	.destinations-grid {
		grid-template-columns: 1fr;
	}
	
	.destination-folder {
		width: min(250px, 85vw);
		height: min(180px, 60vw);
	}
}

/* Botón para añadir nuevo viaje */
.add-trip-btn {
	position: absolute;
	top: 0;
	right: 0;
	width: clamp(50px, 8vw, 60px);
	height: clamp(50px, 8vw, 60px);
	border-radius: 50%;
	background: linear-gradient(135deg, var(--bittersweet-shimmer), var(--dark-red));
	border: none;
	color: white;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 300;
	box-shadow: 
		0 8px 20px rgba(140, 28, 19, 0.3),
		0 4px 10px rgba(0, 0, 0, 0.1);
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	z-index: 20;
}

.add-trip-btn:hover {
	transform: translateY(-3px) scale(1.1);
	box-shadow: 
		0 12px 30px rgba(140, 28, 19, 0.4),
		0 6px 15px rgba(0, 0, 0, 0.15);
}

.add-trip-btn:active {
	transform: translateY(-1px) scale(1.05);
}

.add-icon {
	line-height: 1;
	transform: translateY(-2px);
}

/* Modal styles mejorados para responsive */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(5px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	padding: 20px;
}

.modal-overlay.active {
	opacity: 1;
	visibility: visible;
}

.modal-content {
	background: white;
	border-radius: 20px;
	padding: clamp(20px, 5vw, 40px);
	max-width: min(500px, 95vw);
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	overflow-x: hidden;
	box-shadow: 
		0 30px 60px rgba(0, 0, 0, 0.3),
		0 10px 30px rgba(140, 28, 19, 0.2);
	transform: scale(0.9) translateY(20px);
	transition: transform 0.3s ease;
}

.modal-overlay.active .modal-content {
	transform: scale(1) translateY(0);
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: clamp(20px, 4vw, 30px);
	padding-bottom: clamp(15px, 3vw, 20px);
	border-bottom: 2px solid var(--almond);
}

.modal-header h2 {
	font-family: 'Playfair Display', serif;
	font-size: clamp(1.3rem, 4vw, 2rem);
	color: var(--dark-red);
	margin: 0;
}

.modal-close {
	background: none;
	border: none;
	font-size: clamp(1.5rem, 4vw, 2rem);
	color: var(--liver);
	cursor: pointer;
	padding: 0;
	width: clamp(35px, 6vw, 40px);
	height: clamp(35px, 6vw, 40px);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: all 0.3s ease;
}

.modal-close:hover {
	background: var(--almond);
	color: var(--dark-red);
}

/* Form styles responsive */
.trip-form {
	width: 100%;
}

.form-group {
	margin-bottom: clamp(15px, 3vw, 25px);
}

.form-group label {
	display: block;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	color: var(--dark-red);
	margin-bottom: 8px;
	font-size: clamp(0.9rem, 2vw, 1rem);
}

.form-group input[type="text"],
.form-group input[type="number"] {
	width: 100%;
	padding: clamp(10px, 2vw, 15px);
	border: 2px solid var(--almond);
	border-radius: 10px;
	font-family: 'Inter', sans-serif;
	font-size: clamp(0.9rem, 2vw, 1rem);
	transition: border-color 0.3s ease;
	background: #fafafa;
}

.form-group input[type="text"]:focus,
.form-group input[type="number"]:focus {
	outline: none;
	border-color: var(--bittersweet-shimmer);
	background: white;
}

/* Flag selector responsive */
.flag-selector {
	position: relative;
	width: 100%;
}

.selected-flag {
	width: 100%;
	padding: clamp(10px, 2vw, 15px);
	border: 2px solid var(--almond);
	border-radius: 10px;
	background: #fafafa;
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	transition: all 0.3s ease;
	font-family: 'Inter', sans-serif;
}

.selected-flag:hover {
	border-color: var(--bittersweet-shimmer);
	background: white;
}

.flag-emoji {
	font-size: clamp(1.2rem, 3vw, 1.5rem);
}

.flag-text {
	flex: 1;
	text-align: left;
	color: var(--liver);
	font-size: clamp(0.9rem, 2vw, 1rem);
}

.flag-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: white;
	border: 2px solid var(--almond);
	border-radius: 10px;
	margin-top: 5px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
	z-index: 100;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: all 0.3s ease;
	max-height: min(300px, 40vh);
	overflow: hidden;
}

.flag-dropdown.open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.flag-search {
	padding: clamp(10px, 2vw, 15px);
	border-bottom: 1px solid var(--almond);
}

.flag-search input {
	width: 100%;
	padding: clamp(8px, 2vw, 10px);
	border: 1px solid var(--almond);
	border-radius: 5px;
	font-family: 'Inter', sans-serif;
	font-size: clamp(0.8rem, 2vw, 1rem);
}

.flag-options {
	max-height: min(200px, 30vh);
	overflow-y: auto;
}

.flag-option {
	padding: clamp(8px, 2vw, 12px) clamp(10px, 2vw, 15px);
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 10px;
	transition: background-color 0.2s ease;
	font-family: 'Inter', sans-serif;
	font-size: clamp(0.8rem, 2vw, 1rem);
}

.flag-option:hover {
	background: var(--almond);
}

/* Form actions responsive */
.form-actions {
	display: flex;
	gap: clamp(10px, 2vw, 15px);
	justify-content: flex-end;
	margin-top: clamp(20px, 4vw, 30px);
	padding-top: clamp(15px, 3vw, 20px);
	border-top: 1px solid var(--almond);
	flex-wrap: wrap;
}

.btn-cancel,
.btn-create {
	padding: clamp(10px, 2vw, 12px) clamp(20px, 4vw, 25px);
	border: none;
	border-radius: 8px;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	font-size: clamp(0.9rem, 2vw, 1rem);
	min-width: 100px;
}

.btn-cancel {
	background: var(--almond);
	color: var(--liver);
}

.btn-cancel:hover {
	background: var(--beaver);
	color: white;
}

.btn-create {
	background: linear-gradient(135deg, var(--bittersweet-shimmer), var(--dark-red));
	color: white;
}

.btn-create:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(140, 28, 19, 0.3);
}

/* Responsive para form actions en móviles */
@media (max-width: 576px) {
	.form-actions {
		flex-direction: column-reverse;
	}
	
	.btn-cancel,
	.btn-create {
		width: 100%;
		justify-content: center;
	}
}

/* Estilos para botones de añadir en el álbum */
.add-section-container {
	margin-top: auto;
	padding-top: clamp(15px, 3vw, 20px);
}

.add-section-btn {
	width: 100%;
	padding: clamp(15px, 3vw, 20px);
	background: linear-gradient(135deg, #fff 0%, #f8f8f8 100%);
	border: 2px dashed var(--bittersweet-shimmer);
	border-radius: 15px;
	cursor: pointer;
	transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(8px, 2vw, 10px);
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	color: var(--bittersweet-shimmer);
	position: relative;
	overflow: hidden;
}

.add-section-btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(191, 67, 66, 0.1), transparent);
	transition: left 0.6s ease;
}

.add-section-btn:hover::before {
	left: 100%;
}

.add-section-btn:hover {
	background: linear-gradient(135deg, var(--bittersweet-shimmer), var(--dark-red));
	color: white;
	border-color: var(--dark-red);
	transform: translateY(-3px);
	box-shadow: 0 15px 30px rgba(140, 28, 19, 0.2);
}

.add-section-icon {
	font-size: clamp(1.2rem, 3vw, 1.8rem);
	font-weight: bold;
	transition: transform 0.3s ease;
}

.add-section-btn:hover .add-section-icon {
	transform: rotate(90deg);
}

.add-section-text {
	font-size: clamp(0.9rem, 2vw, 1.1rem);
}

/* Modal específico para categorías responsive */
.category-form .form-group {
	margin-bottom: clamp(15px, 3vw, 25px);
}

.category-icons {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
	gap: clamp(8px, 2vw, 12px);
	margin-top: 10px;
	max-width: 100%;
	overflow: hidden;
}

.icon-option {
	padding: clamp(8px, 2vw, 12px) clamp(6px, 1vw, 8px);
	border: 2px solid var(--almond);
	border-radius: 10px;
	text-align: center;
	cursor: pointer;
	transition: all 0.3s ease;
	background: #fafafa;
	min-width: 0;
	overflow: hidden;
}

.icon-option:hover {
	border-color: var(--bittersweet-shimmer);
	background: white;
	transform: translateY(-2px);
}

.icon-option.selected {
	border-color: var(--dark-red);
	background: linear-gradient(135deg, var(--bittersweet-shimmer), var(--dark-red));
	color: white;
}

.icon-option .icon {
	font-size: clamp(1.5rem, 4vw, 2rem);
	margin-bottom: 5px;
	display: block;
}

.icon-option .label {
	font-size: clamp(0.6rem, 1.5vw, 0.75rem);
	font-weight: 600;
	line-height: 1.2;
	word-wrap: break-word;
}

/* Responsive para iconos en móviles pequeños */
@media (max-width: 576px) {
	.category-icons {
		grid-template-columns: repeat(3, 1fr);
		gap: 8px;
	}
	
	.icon-option {
		padding: 8px 4px;
	}
	
	.icon-option .icon {
		font-size: 1.5rem;
	}
	
	.icon-option .label {
		font-size: 0.6rem;
	}
}

@media (max-width: 400px) {
	.category-icons {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Modal específico para años */
.year-form .form-group {
	margin-bottom: clamp(15px, 3vw, 25px);
}

.year-preset-buttons {
	display: flex;
	gap: clamp(8px, 2vw, 10px);
	margin-top: 10px;
	flex-wrap: wrap;
}

.year-preset-btn {
	padding: clamp(8px, 2vw, 10px) clamp(12px, 3vw, 15px);
	border: 2px solid var(--almond);
	border-radius: 8px;
	background: #fafafa;
	cursor: pointer;
	transition: all 0.3s ease;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	color: var(--liver);
	font-size: clamp(0.8rem, 2vw, 1rem);
}

.year-preset-btn:hover {
	border-color: var(--bittersweet-shimmer);
	background: white;
}

.year-preset-btn.selected {
	border-color: var(--dark-red);
	background: linear-gradient(135deg, var(--bittersweet-shimmer), var(--dark-red));
	color: white;
}

/* Botón de edición responsive */
.edit-button {
	position: absolute;
	top: clamp(15px, 2vw, 20px);
	right: clamp(15px, 2vw, 20px);
	background: linear-gradient(135deg, var(--bittersweet-shimmer), var(--dark-red));
	border: none;
	border-radius: 50%;
	width: clamp(50px, 8vw, 60px);
	height: clamp(50px, 8vw, 60px);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
	z-index: 20;
	box-shadow: 0 10px 25px rgba(140, 28, 19, 0.3);
	opacity: 0;
	transform: scale(0.3) rotate(-180deg);
	pointer-events: none;
}

.edit-button.visible {
	opacity: 1;
	transform: scale(1) rotate(0deg);
	pointer-events: auto;
	transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
	animation: editButtonPulse 2s ease-in-out 1s 3;
}

.edit-button.visible:hover {
	transform: translateY(-3px) scale(1.05);
	box-shadow: 0 15px 35px rgba(140, 28, 19, 0.4);
}

.edit-button.visible.active {
	background: linear-gradient(135deg, var(--dark-red), #5a0f0a);
	transform: rotate(180deg);
}

.edit-button.visible.active:hover {
	transform: translateY(-3px) scale(1.05) rotate(180deg);
}

/* Botón de edición en el header para móviles */
.header-edit-button {
	background: linear-gradient(135deg, var(--bittersweet-shimmer), var(--dark-red));
	border: none;
	border-radius: 50%;
	width: clamp(40px, 8vw, 50px);
	height: clamp(40px, 8vw, 50px);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 8px 20px rgba(140, 28, 19, 0.3);
	opacity: 0;
	transform: scale(0.3) rotate(-180deg);
	pointer-events: none;
}

.header-edit-button.visible {
	opacity: 1;
	transform: scale(1) rotate(0deg);
	pointer-events: auto;
	transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.header-edit-button.visible:hover {
	transform: translateY(-2px) scale(1.05);
	box-shadow: 0 12px 25px rgba(140, 28, 19, 0.4);
}

.header-edit-button.visible.active {
	background: linear-gradient(135deg, var(--dark-red), #5a0f0a);
	transform: rotate(180deg);
}

.header-edit-button.visible.active:hover {
	transform: translateY(-2px) scale(1.05) rotate(180deg);
}

.edit-icon {
	font-size: clamp(1.2rem, 2.5vw, 1.5rem);
	color: white;
	transition: transform 0.3s ease;
}

.header-edit-button .edit-icon {
	font-size: clamp(1rem, 2vw, 1.2rem);
}

.edit-button.active .edit-icon,
.header-edit-button.active .edit-icon {
	transform: rotate(-180deg);
}

/* Modo de edición para carpetas */
.edit-mode .folder {
	position: relative;
	animation: shake 0.5s ease-in-out infinite;
}

@keyframes shake {
	0%, 100% { transform: translateX(0) translateY(0); }
	25% { transform: translateX(-2px) translateY(-1px); }
	50% { transform: translateX(2px) translateY(1px); }
	75% { transform: translateX(-1px) translateY(2px); }
}

/* Controles de edición para cada carpeta responsive */
.folder-controls {
	position: absolute;
	top: clamp(3px, 1vw, 5px);
	right: clamp(8px, 2vw, 10px);
	left: clamp(8px, 2vw, 10px);
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	opacity: 0;
	transform: scale(0.5);
	transition: all 0.3s ease;
	pointer-events: none;
	z-index: 25;
}

/* En modo de edición, mostrar todos los controles */
.edit-mode .folder-controls {
	opacity: 1;
	transform: scale(1);
	pointer-events: auto;
}

/* Mostrar solo el botón de eliminar cuando no estamos en modo de edición */
.folder:hover .folder-controls .delete-controls {
	opacity: 1;
	transform: scale(1);
	pointer-events: auto;
}

/* Asegurar que el contenido de la carpeta sea clickeable */
.folder-content {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

/* Ocultar controles de movimiento cuando no estamos en modo de edición */
.folder-controls .move-controls {
	opacity: 0;
	transform: scale(0.5);
	pointer-events: none;
	transition: all 0.3s ease;
}

.edit-mode .folder-controls .move-controls {
	opacity: 1;
	transform: scale(1);
	pointer-events: auto;
}

/* Ocultar todos los controles para invitados */
.guest-mode .folder-controls {
	display: none !important;
}

.guest-mode .folder:hover .folder-controls {
	display: none !important;
}

/* Contenedores para agrupar botones */
.move-controls {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.delete-controls {
	display: flex;
}

.control-btn {
	width: clamp(26px, 5vw, 32px);
	height: clamp(26px, 5vw, 32px);
	border: none;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: clamp(0.7rem, 1.5vw, 0.9rem);
	font-weight: bold;
	transition: all 0.2s ease;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.delete-btn {
	background: linear-gradient(135deg, #ff4757, #ff3838);
	color: white;
}

.delete-btn:hover {
	background: linear-gradient(135deg, #ff3838, #ff2f2f);
	transform: scale(1.1);
}

.move-up-btn,
.move-down-btn {
	background: linear-gradient(135deg, var(--beaver), var(--liver));
	color: white;
}

.move-up-btn:hover,
.move-down-btn:hover {
	background: linear-gradient(135deg, var(--liver), #5a453f);
	transform: scale(1.1);
}

.move-up-btn {
	font-size: clamp(0.6rem, 1.2vw, 0.8rem);
}

.move-down-btn {
	font-size: clamp(0.6rem, 1.2vw, 0.8rem);
}

/* Animación de eliminación */
.folder.removing {
	animation: fadeOut 0.5s ease-out forwards;
}

@keyframes fadeOut {
	0% {
		opacity: 1;
		transform: scale(1);
	}
	100% {
		opacity: 0;
		transform: scale(0.3);
		height: 0;
		margin: 0;
		padding: 0;
	}
}

/* Animación de pulso para el botón de edición */
@keyframes editButtonPulse {
	0%, 100% {
		box-shadow: 0 10px 25px rgba(140, 28, 19, 0.3);
		transform: scale(1);
	}
	50% {
		box-shadow: 0 15px 35px rgba(140, 28, 19, 0.5), 0 0 20px rgba(140, 28, 19, 0.3);
		transform: scale(1.05);
	}
}

/* Responsive para el botón de edición */
@media (max-width: 1200px) {
	.edit-button {
		width: 55px;
		height: 55px;
		top: 15px;
		right: 15px;
	}
	
	.edit-icon {
		font-size: 1.3rem;
	}
}

@media (max-width: 768px) {
	.edit-button {
		width: 50px;
		height: 50px;
		top: 10px;
		right: 10px;
	}
	
	.edit-icon {
		font-size: 1.2rem;
	}
	
	.control-btn {
		width: 28px;
		height: 28px;
		font-size: 0.8rem;
	}
	
	.folder-controls {
		top: 3px;
		right: 8px;
		left: 8px;
	}
}

/* Estilos específicos para el modal de eliminación responsive */
.delete-modal {
	max-width: min(450px, 90vw);
	text-align: center;
}

.delete-modal-body {
	padding: clamp(15px, 3vw, 20px) 0;
}

.delete-icon {
	font-size: clamp(3rem, 8vw, 4rem);
	margin-bottom: clamp(15px, 3vw, 20px);
	animation: deleteShake 0.5s ease-in-out;
	filter: drop-shadow(0 4px 8px rgba(255, 0, 0, 0.2));
}

.delete-message {
	font-family: 'Inter', sans-serif;
	font-size: clamp(1rem, 3vw, 1.2rem);
	color: var(--dark-red);
	margin-bottom: clamp(20px, 4vw, 25px);
	font-weight: 600;
}

.delete-item-preview {
	background: linear-gradient(135deg, #fff8f8, #ffeaea);
	border: 2px solid var(--almond);
	border-radius: 15px;
	padding: clamp(15px, 3vw, 20px);
	margin: clamp(15px, 3vw, 20px) 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(10px, 2vw, 15px);
	box-shadow: 
		0 4px 15px rgba(0, 0, 0, 0.1),
		inset 0 1px 3px rgba(255, 255, 255, 0.8);
}

.delete-item-icon {
	font-size: clamp(2rem, 5vw, 2.5rem);
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.delete-item-name {
	font-family: 'Inter', sans-serif;
	font-size: clamp(1.1rem, 3vw, 1.3rem);
	font-weight: 700;
	color: var(--dark-red);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.delete-warning {
	font-family: 'Inter', sans-serif;
	font-size: clamp(0.8rem, 2vw, 0.95rem);
	color: var(--liver);
	margin-bottom: clamp(20px, 4vw, 25px);
	font-style: italic;
	opacity: 0.8;
}

.btn-delete {
	padding: clamp(10px, 2vw, 12px) clamp(20px, 4vw, 25px);
	border: none;
	border-radius: 8px;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	font-size: clamp(0.9rem, 2vw, 1rem);
	background: linear-gradient(135deg, #dc3545, #c82333);
	color: white;
	position: relative;
	overflow: hidden;
}

.btn-delete::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
	transition: left 0.6s ease;
}

.btn-delete:hover::before {
	left: 100%;
}

.btn-delete:hover {
	background: linear-gradient(135deg, #c82333, #a71e2a);
	transform: translateY(-2px);
	box-shadow: 
		0 8px 20px rgba(220, 53, 69, 0.4),
		0 4px 10px rgba(0, 0, 0, 0.2);
}

.btn-delete:active {
	transform: translateY(0);
	box-shadow: 0 4px 10px rgba(220, 53, 69, 0.3);
}

/* Animación específica para el modal de eliminación */
@keyframes deleteShake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-5px); }
	75% { transform: translateX(5px); }
}

/* Estilos para el modo de edición en viajes */
.action-buttons {
	display: flex;
	gap: clamp(10px, 2vw, 15px);
	margin-top: clamp(15px, 3vw, 20px);
	flex-wrap: wrap;
	justify-content: center;
}

.edit-mode-btn {
	position: relative;
	background: linear-gradient(135deg, var(--dark-red), var(--bittersweet-shimmer));
	border: none;
	border-radius: 50%;
	width: clamp(50px, 8vw, 60px);
	height: clamp(50px, 8vw, 60px);
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 
		0 4px 15px rgba(140, 28, 19, 0.3),
		0 0 20px rgba(140, 28, 19, 0.1);
}

.edit-mode-btn:hover {
	transform: translateY(-3px) scale(1.1);
	box-shadow: 
		0 8px 25px rgba(140, 28, 19, 0.4),
		0 0 30px rgba(140, 28, 19, 0.2);
}

.edit-mode-btn.active {
	background: linear-gradient(135deg, var(--bittersweet-shimmer), var(--dark-red));
	animation: editPulse 2s ease-in-out infinite;
}

.edit-icon {
	font-size: clamp(20px, 4vw, 24px);
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

@keyframes editPulse {
	0%, 100% { 
		transform: scale(1);
		box-shadow: 
			0 4px 15px rgba(140, 28, 19, 0.3),
			0 0 20px rgba(140, 28, 19, 0.1);
	}
	50% { 
		transform: scale(1.05);
		box-shadow: 
			0 8px 25px rgba(140, 28, 19, 0.5),
			0 0 35px rgba(140, 28, 19, 0.3);
	}
}

/* Animación de temblor para las cards en modo edición */
.destination-folder.shake {
	animation: destinationShake 0.5s ease-in-out infinite;
}

@keyframes destinationShake {
	0%, 100% { transform: translateX(0) translateY(0); }
	25% { transform: translateX(-2px) translateY(-1px); }
	50% { transform: translateX(2px) translateY(1px); }
	75% { transform: translateX(-1px) translateY(2px); }
}

/* Estilos para el modo de arrastrar */
.destination-folder.dragging {
	opacity: 0.5;
	transform: scale(1.05) !important;
	z-index: 1000;
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.destinations-grid.edit-mode .destination-folder {
	cursor: grab;
}

.destinations-grid.edit-mode .destination-folder:active {
	cursor: grabbing;
}

/* Botón de eliminar para cada card responsive */
.delete-btn {
	position: absolute;
	top: clamp(8px, 2vw, 10px);
	right: clamp(8px, 2vw, 10px);
	background: rgba(220, 53, 69, 0.9);
	border: none;
	border-radius: 50%;
	width: clamp(30px, 6vw, 35px);
	height: clamp(30px, 6vw, 35px);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	z-index: 10;
	backdrop-filter: blur(10px);
	box-shadow: 0 2px 10px rgba(220, 53, 69, 0.3);
}

.delete-btn:hover {
	background: rgba(220, 53, 69, 1);
	transform: scale(1.1);
	box-shadow: 0 4px 15px rgba(220, 53, 69, 0.5);
}

.delete-icon {
	font-size: clamp(14px, 3vw, 16px);
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* Ajustar la posición relativa de la destination-cover */
.destination-cover {
	position: relative;
}

/* Estilos para el modal de eliminación responsive */
.delete-modal-content {
	max-width: min(450px, 90vw);
	border: 2px solid var(--bittersweet-shimmer);
}

.delete-modal-header {
	border-bottom: 1px solid rgba(167, 138, 127, 0.2);
}

.delete-modal-header h2 {
	color: var(--dark-red);
	font-weight: 600;
}

.delete-modal-body {
	text-align: center;
	padding: clamp(20px, 4vw, 30px) clamp(15px, 3vw, 25px);
}

.delete-icon-container {
	margin-bottom: clamp(15px, 3vw, 20px);
}

.delete-warning-icon {
	font-size: clamp(40px, 8vw, 48px);
	filter: drop-shadow(0 2px 8px rgba(255, 193, 7, 0.3));
	animation: warningPulse 2s ease-in-out infinite;
}

@keyframes warningPulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.1); }
}

.delete-message {
	font-size: clamp(16px, 3vw, 18px);
	color: var(--liver);
	margin-bottom: clamp(20px, 4vw, 25px);
	font-weight: 500;
}

.delete-trip-preview {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(10px, 2vw, 15px);
	background: rgba(167, 138, 127, 0.1);
	border: 2px solid rgba(167, 138, 127, 0.2);
	border-radius: 12px;
	padding: clamp(15px, 3vw, 20px);
	margin: clamp(15px, 3vw, 20px) 0;
}

.trip-preview-icon {
	font-size: clamp(28px, 5vw, 32px);
	display: flex;
	align-items: center;
	justify-content: center;
}

.trip-preview-name {
	font-size: clamp(18px, 3vw, 20px);
	font-weight: 600;
	color: var(--dark-red);
}

.delete-warning {
	font-size: clamp(12px, 2vw, 14px);
	color: rgba(220, 53, 69, 0.8);
	font-style: italic;
	margin-top: clamp(12px, 2vw, 15px);
}

.delete-actions {
	padding-top: clamp(15px, 3vw, 20px);
	border-top: 1px solid rgba(167, 138, 127, 0.2);
}

/* Estilos para la funcionalidad de visibilidad responsive */
.visibility-indicator {
	position: absolute;
	top: clamp(6px, 1vw, 8px);
	right: clamp(6px, 1vw, 8px);
	z-index: 10;
}

.visibility-toggle {
	background: rgba(255, 255, 255, 0.9);
	border: none;
	border-radius: 50%;
	width: clamp(28px, 5vw, 32px);
	height: clamp(28px, 5vw, 32px);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
	backdrop-filter: blur(10px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.visibility-toggle:hover {
	background: rgba(255, 255, 255, 1);
	transform: scale(1.1);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.visibility-icon {
	font-size: clamp(12px, 2vw, 14px);
}

/* Overlay para invitados cuando el contenido no es visible */
.guest-hidden-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(5px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: white;
	text-align: center;
	border-radius: 15px;
	z-index: 5;
}

.hidden-icon {
	font-size: clamp(1.5rem, 4vw, 2rem);
	margin-bottom: 0.5rem;
	opacity: 0.8;
}

.hidden-text {
	font-size: clamp(0.7rem, 2vw, 0.9rem);
	font-weight: 500;
	opacity: 0.9;
}

/* Estado de subcategoría no visible para invitados */
.destination-folder[data-visible-invitado="false"] .destination-cover {
	filter: grayscale(20%);
}

.destination-folder[data-visible-invitado="false"]:hover .destination-cover {
	filter: grayscale(10%);
}

/* Cursor para invitados en subcategorías privadas */
.destination-folder[data-visible-invitado="false"] {
	cursor: not-allowed;
}

.destination-folder[data-visible-invitado="false"] .destination-cover:hover {
	transform: none !important;
}

/* Ocultar elementos para usuarios específicos */
.admin-only {
	display: none;
}

.guest-only {
	display: none;
}

/* Ajustes finales para pantallas muy pequeñas */
@media (max-width: 320px) {
	.album-container {
		padding: 5px;
	}
	
	.album-book {
		width: 98vw;
		height: 70vh;
		min-height: 350px;
	}
	
	.cover-decoration {
		padding: 8px 5px;
	}
	
	.page-content {
		padding: 12px 8px;
	}
	
	.folder {
		padding: 6px 4px;
	}
	
	.modal-content {
		padding: 15px;
	}
	
	.category-icons {
		grid-template-columns: 1fr 1fr;
		gap: 6px;
	}
}