/* Configuración de la Fuente Principal */
body {
    font-family: 'Inter', sans-serif;
}

/* Fondo Animado */
.animated-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /* Colores cálidos y fríos */
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Clases de Vistas */
.view {
    width: 100%;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.view.hidden {
    display: none;
    opacity: 0;
    transform: translateY(20px);
}
.view.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* Estilos de Botones y Formularios */
.panel-button {
    @apply font-semibold py-3 px-6 rounded-lg shadow-md transition-all duration-300 ease-in-out transform hover:scale-105;
}

.form-input {
    @apply w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent;
}

.form-label {
    @apply block text-sm font-medium text-gray-700 mb-1;
}

/* Estilos de Paneles de Acceso */
.access-panel {
    @apply transition-all duration-300 ease-in-out;
}

/* Estilos de Dashboard */
.dashboard-header {
    @apply bg-white/90 backdrop-blur-sm rounded-xl shadow-2xl p-6 mb-6 flex justify-between items-center;
}

.logout-button {
    @apply bg-red-500 hover:bg-red-600 text-white font-semibold py-2 px-4 rounded-lg shadow-md transition-all duration-300;
}

.nav-button {
    @apply py-2 px-4 rounded-lg font-semibold text-gray-600 transition-all duration-300;
}

.nav-button.active {
    @apply bg-white shadow-md text-cyan-700;
}

/* Tarjetas de Estadísticas (Admin) */
.stat-card {
    @apply p-4 rounded-lg shadow border-l-4;
}

/* Tabla de Usuarios (Admin) */
.table-header {
    @apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
}

.table-cell {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-700;
}

.table-cell .role-student { @apply text-green-700; }
.table-cell .role-teacher { @apply text-blue-700; }
.table-cell .role-admin { @apply text-red-7B00; } /* Corregido a un color hexadecimal válido */

.table-action-button {
    @apply p-1.5 rounded-md transition-all duration-200 text-sm;
}
.table-action-button.edit {
    @apply bg-blue-100 text-blue-700 hover:bg-blue-200;
}
.table-action-button.delete {
    @apply bg-red-100 text-red-700 hover:bg-red-200;
}

/* Tarjeta de Módulo de Estudiante */
.module-card {
    @apply bg-white/95 backdrop-blur-sm rounded-xl shadow-lg p-5 transform transition-all duration-300 hover:scale-105;
    border-top: 4px solid;
}

.module-card-preschool { @apply border-t-pink-400 hover:shadow-pink-200/50; }
.module-card-primary { @apply border-t-blue-400 hover:shadow-blue-200/50; }
.module-card-secondary { @apply border-t-green-400 hover:shadow-green-200/50; }
.module-card-media { @apply border-t-indigo-400 hover:shadow-indigo-200/50; }

.module-card h3 {
    @apply text-xl font-bold mb-2 text-gray-800;
}
.module-card p {
    @apply text-sm text-gray-600 mb-4;
}
.module-card .badge {
    @apply inline-block bg-gray-200 text-gray-700 text-xs font-semibold px-2 py-0.5 rounded-full mb-4;
}
.module-card .badge-writing { @apply bg-orange-100 text-orange-700; }
.module-card .badge-listening { @apply bg-blue-100 text-blue-700; }

.module-card-button {
    @apply w-full font-semibold py-2 px-4 rounded-lg shadow-md transition-all duration-300;
}
.module-card-button-writing { @apply bg-orange-500 hover:bg-orange-600 text-white; }
.module-card-button-listening { @apply bg-blue-500 hover:bg-blue-600 text-white; }

/* Estilos de Feedback */
.feedback-success {
    @apply bg-green-100 text-green-800;
}
.feedback-error {
    @apply bg-red-100 text-red-800;
}