/* Aquí puedes agregar estilos personalizados si lo deseas */

/* Body styles for non-home pages */
body:not(.home-page) {
	min-height: 100vh;
}

body:not(.home-page) .home-hero {
	min-height: calc(100vh - 4.5rem);
}

body.page-theme {
	background-color: #1d4ed8;
	background-image: linear-gradient(180deg, #163a7c 0%, #1f5fb9 35%, #31a7eb 100%);
	min-height: 100vh;
	color: #ffffff;
}

body.page-theme .theme-card {
	/* Reduce el efecto glassmorphism para mejorar contraste de iconos */
	background-color: rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	border: 1px solid rgba(255, 255, 255, 0.16);
	box-shadow: none;
	filter: brightness(0.94);
}

body.page-theme .contact-card {
	/* Reduce aún más efecto glass para las tarjetas de contacto */
	background-color: rgba(255, 255, 255, 0.06);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: none;
	filter: brightness(0.90);
}

/* Dim secondary text to emphasize icons */
body.page-theme .contact-card .theme-muted,
body.page-theme .contact-card a.theme-muted {
    color: rgba(255,255,255,0.60);
}

/* Ensure icons remain sharp and visible */
body.page-theme .contact-card svg {
	opacity: 1;
	filter: drop-shadow(0 1px 0 rgba(0,0,0,0.06));
}

/* Make contact icons stand out more */
.contact-icon {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	background: rgba(255,255,255,0.06);
	box-shadow: 0 8px 18px rgba(2,6,23,0.10);
}
.contact-icon svg {
	width: 24px;
	height: 24px;
	opacity: 1;
	filter: drop-shadow(0 3px 8px rgba(0,0,0,0.16));
}

/* Slightly increase contrast of icons' color when inside contact card */
.contact-card .contact-icon.text-primary svg { stroke: #2563eb; fill: none; }
.contact-card .contact-icon.text-green-500 svg { fill: #22c55e; stroke: none; }
.contact-card .contact-icon.text-blue-500 svg { fill: #229ED9; stroke: none; }
.contact-card .contact-icon.text-accent svg { stroke: #2563eb; fill: none; }

body.page-theme .contact-field {
	background-color: rgba(255, 255, 255, 0.18);
	border-color: rgba(255, 255, 255, 0.28);
	color: #ffffff;
	box-shadow: none;
}

body.page-theme .contact-field::placeholder {
	color: rgba(255, 255, 255, 0.72);
}

/* Mejora visual de inputs: borde suave y foco sutil */
.contact-field {
	transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.contact-field:focus {
	outline: none;
	box-shadow: 0 6px 18px rgba(0,0,0,0.06), 0 0 0 4px rgba(37,99,235,0.06);
	border-color: rgba(255,255,255,0.36);
}

body.page-theme .contact-submit {
	background-color: #ffffff;
	color: #0f172a;
	box-shadow: none;
}

body.page-theme .theme-card-soft {
	background-color: rgba(255, 255, 255, 0.10);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	border: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow: none;
}

body.page-theme .theme-text,
body.page-theme .theme-text p,
body.page-theme .theme-text li,
body.page-theme .theme-text a {
	color: #ffffff;
}

body.page-theme .theme-muted {
	color: rgba(255, 255, 255, 0.82);
}

.project-detail-page {
	background-color: #090b11;
	min-height: 100vh;
	color: #cbd5e1;
}

body.gallery-modal-open {
	overflow: hidden;
}

.project-detail-page .project-detail-card {
	color: #e2e8f0;
}

.project-detail-page .project-detail-card .text-primary,
.project-detail-page .project-detail-card .text-secondary,
.project-detail-page .project-detail-card .text-gray-700,
.project-detail-page .project-detail-card .text-gray-600,
.project-detail-page .project-detail-card .text-gray-400 {
	color: #e2e8f0;
}

.project-detail-page .project-detail-card .text-gray-600,
.project-detail-page .project-detail-card .text-gray-400 {
	opacity: 0.82;
}

.project-detail-page .project-detail-card .bg-gray-200 {
	background-color: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.12);
}

.project-detail-page .project-detail-card a.bg-blue-600,
.project-detail-page .project-detail-card a.bg-purple-500 {
	background-color: #2563eb;
	color: #ffffff;
}

.project-detail-page .project-detail-card a.bg-blue-600:hover,
.project-detail-page .project-detail-card a.bg-purple-500:hover {
	background-color: #1d4ed8;
	color: #ffffff;
}

.project-card {
	background-color: #CFD1D4;
}

/* Asegura que la previsualización y el área alrededor de la imagen
	 tengan el mismo gris que la card para cubrir los espacios blancos */
.aspect-video.rounded-t-xl.overflow-hidden {
	background-color: #CFD1D4;
}
.aspect-video.rounded-t-xl.overflow-hidden img {
	background-color: #CFD1D4;
}

/* Aplicar bordes redondeados completos a las imágenes */
.aspect-video.rounded-t-xl.overflow-hidden img {
	border-radius: 0.75rem; /* coincide con rounded-xl */
	display: block;
	box-sizing: border-box;
}

/* También asegurar que las imágenes dentro de las tarjetas respeten el radio */
.bg-white\/80 img {
	border-radius: 0.75rem;
	display: block;
}

/* Efecto premium para tarjetas de servicio */
.service-card {
	transition: all .25s ease;
	will-change: transform;
}
.service-card:hover {
	transform: translateY(-4px);
}
.service-card .icon {
	opacity: .9;
	transition: transform .25s ease, opacity .25s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.service-card:hover .icon {
	opacity: 1;
	transform: scale(1.05);
}

/* Previsualizador de imágenes en páginas de detalle */
#gallery-modal.hidden {
	display: none !important;
	pointer-events: none !important;
}

#gallery-modal:not(.hidden) {
	display: flex !important;
	pointer-events: auto !important;
}

.gallery-modal-backdrop {
	padding: 0;
	align-items: center;
	justify-content: center;
	overflow: auto;
	display: flex;
}

@media (min-width: 769px) {
	.gallery-modal-backdrop {
		padding: 0;
	}
}

#gallery-modal:focus {
	outline: none !important;
}

.gallery-modal-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 5;
	width: 3.75rem;
	height: 3.75rem;
	border: 0;
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.14);
	color: #ffffff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	cursor: pointer;
	transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
	pointer-events: auto;
}

.gallery-modal-close:hover {
	background: rgba(255, 255, 255, 0.24);
	transform: scale(1.03);
	box-shadow: 0 14px 26px rgba(0, 0, 0, 0.32);
}

.gallery-modal-stage {
	position: relative;
	width: 100%;
	height: auto;
	padding: 0;
	border-radius: 0;
	background: linear-gradient(180deg, rgba(15, 23, 42, 0.86), rgba(15, 23, 42, 0.66));
	border: none;
	box-shadow: none;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	overflow: hidden;
	display: grid;
	grid-template-rows: auto 1fr auto;
	max-width: 100vw;
	max-height: 100vh;
	width: 100vw;
	height: 100vh;
}

@media (min-width: 769px) {
	.gallery-modal-stage {
		padding: 0;
		border-radius: 0;
		max-width: 100vw;
		max-height: 100vh;
		width: 100vw;
		height: 100vh;
	}
}


.gallery-modal-carousel {
	display: grid;
	grid-template-columns: 4rem minmax(0, 1fr) 4rem;
	align-items: center;
	gap: 1rem;
	width: 100%;
	height: 100%;
	min-height: 0;
}

@media (min-width: 769px) {
	.gallery-modal-carousel {
		grid-template-columns: 4rem minmax(0, 1fr) 4rem;
		align-items: center;
		gap: 1.5rem;
		height: calc(100vh - 4rem);
		max-height: calc(100vh - 4rem);
	}

	.gallery-modal-navigation {
		display: none !important;
	}

	/* En desktop, los botones van dentro del carousel */
	#gallery-modal-prev,
	#gallery-modal-next {
		display: flex !important;
	}

	#gallery-modal-prev {
		grid-column: 1;
		grid-row: 1;
	}

	#gallery-modal-next {
		grid-column: 3;
		grid-row: 1;
	}

	.gallery-modal-frame {
		grid-column: 2;
		grid-row: 1;
	}

	#gallery-modal-prev-mobile,
	#gallery-modal-next-mobile {
		display: none !important;
	}
}

.gallery-modal-frame {
	width: 100%;
	height: 100%;
	padding: 0;
	border-radius: 0;
	background: rgba(2, 6, 23, 0.96);
	border: none;
	box-shadow: none;
	position: relative;
	overflow: hidden;
	max-width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.gallery-modal-image {
	width: 100%;
	height: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
	margin: 0 auto;
	border-radius: 0;
	background: rgba(15, 23, 42, 0.96);
	box-shadow: none;
}

.gallery-modal-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 0.1rem 0.25rem 0;
	width: 100%;
	grid-column: 1 / -1;
	grid-row: 2;
}

.gallery-modal-arrow {
	min-width: 3.75rem;
	min-height: 3.75rem;
	border: 0;
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.14);
	color: #ffffff;
	box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
}

.gallery-modal-arrow:hover {
	background: rgba(255, 255, 255, 0.24);
	transform: translateY(-1px) scale(1.03);
	box-shadow: 0 14px 26px rgba(0, 0, 0, 0.32);
}

.gallery-modal-arrow:focus-visible,
.gallery-modal-close:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.85);
	outline-offset: 3px;
}

.gallery-modal-navigation {
	display: none;
	justify-content: center;
	gap: 1rem;
	padding: 0.5rem 0;
	grid-column: 1 / -1;
	grid-row: 3;
}

@media (max-width: 768px) {
	.gallery-modal-navigation {
		display: flex;
	}
}

@media (max-width: 768px) {
	.gallery-modal-backdrop {
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 100dvh;
		height: 100dvh;
	}

	.gallery-modal-stage {
		padding: 0;
		border-radius: 0;
		max-width: 100vw;
		max-height: 100dvh;
		height: 100dvh;
		width: 100vw;
		display: grid;
		grid-template-rows: 1fr auto;
		grid-template-columns: 1fr;
	}

	.gallery-modal-carousel {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
		gap: 0;
		height: auto;
		max-height: calc(100dvh - 5.5rem);
		width: 100%;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}

	.gallery-modal-frame {
		padding: 0;
		height: auto;
		border-radius: 0;
		grid-column: 1 / -1;
		background: rgba(2, 6, 23, 0.96);
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
		max-width: 100%;
		max-height: calc(100dvh - 5.5rem);
	}

	.gallery-modal-image {
		height: auto;
		max-height: calc(100dvh - 5.5rem);
		width: 100%;
		max-width: 100%;
		object-fit: contain;
		display: block;
	}

	.gallery-modal-arrow {
		min-width: 3.5rem;
		min-height: 3.5rem;
		font-size: 1.5rem;
		background: rgba(255, 255, 255, 0.12);
		flex-shrink: 0;
	}

	.gallery-modal-arrow:active {
		transform: scale(0.96);
	}

	.gallery-modal-close {
		width: 3.5rem;
		height: 3.5rem;
		top: 0.8rem;
		right: 0.8rem;
		background: rgba(255, 255, 255, 0.12);
		z-index: 10;
		flex-shrink: 0;
	}

	.gallery-modal-navigation {
		grid-column: 1 / -1;
		grid-row: 2;
		display: flex;
		padding: 0.8rem 1rem;
		justify-content: center;
		gap: 4rem;
		background: rgba(15, 23, 42, 0.95);
		height: auto;
		min-height: 5rem;
	}

	/* Ocultar botones desktop en móvil */
	#gallery-modal-prev,
	#gallery-modal-next {
		display: none !important;
	}

	#gallery-modal {
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

/* Navbar mobile menu styles */
#mobileMenu {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	background-color: #000000 !important;
	opacity: 0.92 !important;
	backdrop-filter: blur(10px) !important;
	-webkit-backdrop-filter: blur(10px) !important;
	z-index: 9999 !important;
	display: none !important;
	flex-direction: column !important;
	justify-content: flex-start !important;
	align-items: flex-end !important;
	padding-top: 80px !important;
	padding-right: 24px !important;
	width: 100vw !important;
	height: 100vh !important;
}

#mobileMenu.show {
	display: flex !important;
}

/* === Dark Software Engineering Aesthetic (Premium) === */
.dark-theme {
	background-color: #090b11;
	min-height: 100vh;
	color: #cbd5e1;
}

.dark-theme .dark-card {
	background-color: #161a23;
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: 1rem;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	transition: all 0.25s ease;
}

.dark-theme .dark-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 32px 64px -12px rgba(0, 0, 0, 0.30);
}

.dark-theme .dark-muted {
	color: #94a3b8;
}

.dark-theme .dark-text {
	color: #e2e8f0;
}

.dark-theme .dark-tag {
	background-color: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 9999px;
	color: #cbd5e1;
	font-weight: 500;
	transition: background-color 0.2s ease;
}

.dark-theme .dark-tag:hover {
	background-color: rgba(255, 255, 255, 0.12);
}

/* Dark theme contact cards */
.dark-theme .contact-card-dark {
	background-color: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 1rem;
	transition: all 0.2s ease;
}

.dark-theme .contact-icon-dark {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.06);
	box-shadow: 0 8px 18px rgba(2, 6, 23, 0.10);
}

.dark-theme .contact-icon-dark svg {
	width: 24px;
	height: 24px;
	opacity: 1;
	filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.16));
}

/* Dark theme for contact form */
.dark-theme .contact-field-dark {
	background-color: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: #e2e8f0;
	border-radius: 1rem;
	padding: 0.75rem 1.5rem;
	transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.dark-theme .contact-field-dark:focus {
	outline: none;
	border-color: rgba(255, 255, 255, 0.20);
	box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
}

.dark-theme .contact-submit-dark {
	background-color: #ffffff;
	color: #090b11;
	border-radius: 0.75rem;
	font-weight: 500;
	transition: background-color 0.2s ease, transform 0.1s ease;
}

.dark-theme .contact-submit-dark:hover {
	background-color: #e2e8f0;
}

.dark-theme .social-icon-dark {
	background: rgba(255, 255, 255, 0.06);
	border-radius: 9999px;
	transition: background-color 0.2s ease;
}

.dark-theme .social-icon-dark:hover {
	background: rgba(255, 255, 255, 0.10);
}

/* Focus ring for contact form inputs - cian glow */
.contact-field-dark:focus,
.contact-field:focus {
	outline: none;
	border-color: #38bdf8 !important;
	box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.35) !important;
}

/* Project thumbnail unified styling - subtle browser mockup */
.project-thumb-container {
	background: linear-gradient(135deg, #1e293b 0%, #161a23 100%);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 0.75rem;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
	overflow: hidden;
}

.project-thumb-container img {
	background: #0f172a;
	transition: transform 0.2s ease;
}

.project-thumb-container img:hover {
	transform: scale(1.03);
}

/* Dark card focus states for interactive elements */
.dark-card:focus-within {
	border-color: rgba(56, 189, 248, 0.4);
	box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
}


/* Line clamp utility for project descriptions */
.line-clamp-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Flash modal animation */
@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
.animate-fadeIn {
    animation: fadeIn 0.2s ease-out forwards;
}