/* --- ESTILOS GENERALES Y DE DISEÑO (TRADUCCIÓN DE TAILWIND) --- */

/* Reseteo básico y fuente (imitando la configuración original) */
html {
	box-sizing: border-box;
}
*,
*:before,
*:after {
	box-sizing: inherit;
}

body {
	/* Fuente 'Inter' (si no está cargada, usará sans-serif) */
	font-family: "Inter", sans-serif;
	background-color: #f7f7f7;
	margin: 0;
}

/* Contenedor principal */
.container {
	max-width: 72rem; /* Equivalente a max-w-6xl */
	margin-left: auto;
	margin-right: auto;
    padding-bottom: 2rem;
}

/* Título de la página */
.page-title {
	/* text-3xl font-extrabold text-gray-800 mb-8 text-center */
	font-size: 1.875rem; /* 30px */
	line-height: 2.25rem; /* 36px */
	font-weight: 800;
	color: #1f2937; /* text-gray-800 */
	margin-bottom: 2rem; /* mb-8 */
	text-align: center;
}

/* Contenedor de las tarjetas (Grid) */
.card-grid {
	/* grid grid-cols-1 gap-6 */
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 1.5rem; /* gap-6 */
}

/* --- ESTILOS ESPECÍFICOS DE LAS TARJETAS (LO QUE PEDISTE) --- */

.file-card {
	/* bg-white rounded-xl shadow-lg p-6 flex flex-col items-center text-center border-t-4 */
	background-color: #ffffff;
	border-radius: 0.75rem; /* rounded-xl */
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
		0 4px 6px -4px rgba(0, 0, 0, 0.1); /* shadow-lg */
	padding: 1.5rem; /* p-6 */
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	border-top-width: 4px;

	/* transition-all duration-300 transform */
	transition-property: all;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 300ms;
}

/* Efecto Hover de la tarjeta */
.file-card:hover {
	/* hover:shadow-xl hover:scale-[1.02] */
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
		0 8px 10px -6px rgba(0, 0, 0, 0.1); /* shadow-xl */
	transform: scale(1.02);
}

/* Icono principal de la tarjeta */
.card-icon {
	/* text-6xl mb-4 */
	font-size: 3.75rem; /* 60px */
	line-height: 1;
	margin-bottom: 1rem; /* mb-4 */
}

/* Título de la tarjeta */
.card-title {
	/* text-xl font-bold text-gray-800 mb-2 */
	font-size: 1.25rem; /* 20px */
	line-height: 1.75rem; /* 28px */
	font-weight: 700;
	color: #1f2937; /* text-gray-800 */
	margin: 0 0 0.5rem 0; /* mb-2 */
}

/* Descripción de la tarjeta */
.card-description {
	/* text-secondary-gray mb-4 text-sm */
	color: #4b5563; /* Color 'secondary-gray' del config de Tailwind */
	margin: 0 0 1rem 0; /* mb-4 */
	font-size: 0.875rem; /* 14px */
	line-height: 1.25rem; /* 20px */
}

/* Botón de descarga de la tarjeta */
.card-button {
	/* mt-auto w-full py-2 px-4 text-white font-semibold rounded-lg shadow-md */
	margin-top: auto; /* Empuja el botón al fondo */
	width: 100%;
	padding: 0.5rem 1rem; /* py-2 px-4 */
	color: #ffffff;
	font-weight: 600; /* font-semibold */
	border-radius: 0.5rem; /* rounded-lg */
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
		0 2px 4px -2px rgba(0, 0, 0, 0.1); /* shadow-md */

	/* transition duration-150 */
	transition-property: background-color;
	transition-duration: 150ms;

	/* flex items-center justify-center space-x-2 */
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none; /* Añadido para quitar el subrayado del enlace */
}

/* Icono dentro del botón */
.card-button i {
	margin-right: 0.5rem; /* Equivalente a space-x-2 en el padre */
}

/* --- MODIFICADORES DE COLOR (POR TARJETA) --- */

/* Card 1: Borde Azul, Icono Rojo, Botón Azul */
.file-card.border-blue {
	border-top-color: #1e40af; /* border-primary-blue */
}
.file-card.border-blue .card-icon {
	color: #dc2626; /* text-red-600 */
}
.file-card.border-blue .card-button {
	background-color: #1e40af; /* bg-primary-blue */
}
.file-card.border-blue .card-button:hover {
	background-color: #1e3a8a; /* hover:bg-blue-800 */
}

/* Card 2: Borde Amarillo, Icono Amarillo, Botón Amarillo */
.file-card.border-yellow {
	border-top-color: #d97706; /* border-yellow-600 */
}
.file-card.border-yellow .card-icon {
	color: #d97706; /* text-yellow-600 */
}
.file-card.border-yellow .card-button {
	background-color: #d97706; /* bg-yellow-600 */
}
.file-card.border-yellow .card-button:hover {
	background-color: #b45309; /* hover:bg-yellow-700 */
}

/* Card 3: Borde Verde, Icono Verde, Botón Verde */
.file-card.border-green {
	border-top-color: #16a34a; /* border-green-600 */
}
.file-card.border-green .card-icon {
	color: #16a34a; /* text-green-600 */
}
.file-card.border-green .card-button {
	background-color: #16a34a; /* bg-green-600 */
}
.file-card.border-green .card-button:hover {
	background-color: #15803d; /* hover:bg-green-700 */
}

/* --- REGLAS RESPONSIVE (Media Queries) --- */

/* sm: (min-width: 640px) */
@media (min-width: 640px) {
	.page-title {
		text-align: left; /* sm:text-left */
	}
}

/* md: (min-width: 768px) */
@media (min-width: 768px) {
	.card-grid {
		/* md:grid-cols-3 */
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* lg: (min-width: 1024px) */
@media (min-width: 1024px) {
	.card-grid {
		gap: 2rem; /* lg:gap-8 */
	}
}