/* ============================================================
   jair_developer: Spec 05 — capa premium de UI/UX global.
   Se carga DESPUÉS del theme CSS y sobrevive al style-switcher
   (que solo reemplaza el link #theme-style).
   Regla: animaciones solo con transform/opacity.
   ============================================================ */

/* --- Accesibilidad: foco visible consistente en todo el sitio --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.btn:focus-visible {
	outline: 2px solid #629feb !important;
	outline-offset: 2px;
}

/* --- Links sociales (top bar) --- */
.social-list a {
	transition: transform 0.2s ease-out, background-color 0.2s ease-out, color 0.2s ease-out;
	will-change: transform;
}
.social-list a:hover,
.social-list a:focus-visible {
	transform: translateY(-3px);
}

/* --- Botones: micro-feedback al presionar --- */
.btn {
	transition: transform 0.15s ease-out, background-color 0.2s ease-out;
}
.btn:active {
	transform: scale(0.97);
}

/* --- Cards de proyectos (projects.php / demos.php) --- */
.projects-section .project-item-inner {
	padding: 1rem;
	margin: -1rem;
	border-radius: 0.75rem;
	transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.projects-section .project-item-inner:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}
.light-mode .projects-section .project-item-inner:hover {
	box-shadow: 0 10px 28px rgba(30, 39, 56, 0.12);
}

/* --- Featured cards (index) --- */
.featured-project-list .card {
	transition: transform 0.2s ease-out;
}
.featured-project-list .card:hover {
	transform: translateY(-4px);
}
.featured-project-list .card-img-top {
	border-radius: 0.5rem;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* --- Skills: lift sutil en iconos --- */
.tech-list .icon-item img {
	transition: transform 0.2s ease-out;
}
.tech-list .icon-item:hover img {
	transform: translateY(-4px) scale(1.06);
}

/* --- Formulario de contacto: estados visibles --- */
.contact-form .form-control.is-invalid {
	border-color: #d9603c;
}
.contact-form .form-control.is-valid {
	border-color: #54b689;
}
.contact-form .jd-field-error {
	display: none;
	color: #e8836a;
	font-size: 0.8rem;
	margin-top: 0.35rem;
}
.light-mode .contact-form .jd-field-error {
	color: #c94f2c;
}
.contact-form .form-control.is-invalid ~ .jd-field-error {
	display: block;
}
.jd-char-counter {
	font-size: 0.75rem;
	text-align: right;
	margin-top: 0.25rem;
	opacity: 0.7;
	font-variant-numeric: tabular-nums;
}
.jd-char-counter.over {
	color: #e8836a;
	opacity: 1;
}

/* Botón de envío con spinner */
.jd-btn-spinner {
	display: none;
	width: 1rem;
	height: 1rem;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
	margin-right: 0.5rem;
	vertical-align: -0.15em;
	animation: jd-spin 0.7s linear infinite;
}
.jd-loading .jd-btn-spinner {
	display: inline-block;
}
@keyframes jd-spin {
	to { transform: rotate(360deg); }
}

/* Alertas del formulario: entrada animada + icono */
.contact-form-wrapper .alert {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	border: none;
	border-left: 4px solid;
	animation: jd-slide-in 0.25s ease-out;
}
.contact-form-wrapper .alert-success {
	background: rgba(84, 182, 137, 0.15);
	border-color: #54b689;
	color: #7ed6ab;
}
.light-mode .contact-form-wrapper .alert-success {
	color: #1d6f47;
}
.contact-form-wrapper .alert-danger {
	background: rgba(217, 96, 60, 0.15);
	border-color: #d9603c;
	color: #e8967d;
}
.light-mode .contact-form-wrapper .alert-danger {
	color: #a8431f;
}
@keyframes jd-slide-in {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: translateY(0); }
}

/* --- Currículum: impresión limpia --- */
.jd-print-btn { gap: 0.4rem; }
@media print {
	body {
		background: #fff !important;
		color: #1a1a1a !important;
		padding: 0 !important;
	}
	.side-panel,
	.top-bar,
	.footer,
	.config-panel,
	.jd-print-btn,
	.section-cta {
		display: none !important;
	}
	.main-content-wrapper,
	.resume-wrapper {
		margin: 0 !important;
		max-width: 100% !important;
		box-shadow: none !important;
		background: #fff !important;
	}
	.resume-wrapper * {
		color: #1a1a1a !important;
	}
	.resume-name,
	.resume-section-heading,
	.resume-position-title {
		color: #000 !important;
	}
	a {
		text-decoration: none !important;
	}
}

/* --- Respeto total a reduced motion --- */
@media (prefers-reduced-motion: reduce) {
	.social-list a,
	.btn,
	.projects-section .project-item-inner,
	.featured-project-list .card,
	.tech-list .icon-item img {
		transition: none !important;
	}
	.social-list a:hover,
	.btn:active,
	.projects-section .project-item-inner:hover,
	.featured-project-list .card:hover,
	.tech-list .icon-item:hover img {
		transform: none !important;
	}
	.contact-form-wrapper .alert {
		animation: none;
	}
	.jd-btn-spinner {
		animation-duration: 1.5s;
	}
}