/**
 * ============================================================================
 * CARDS.CSS
 * Componente de Tarjetas (Cards) - Sistema Académico MINERD
 * ============================================================================
 * 
 * Componente reutilizable para tarjetas de contenido.
 * Requiere: sistema-design.css
 * 
 * @author Sistema Académico MINERD
 * @version 2.0.0
 * @date 11 de Enero de 2026
 * ============================================================================
 */

/* ============================================================================
   CARD BASE
   ============================================================================ */

.card {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
    transition: var(--transition-base);
    display: flex;
    flex-direction: column;
}

.card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* ============================================================================
   PARTES DE LA CARD
   ============================================================================ */

/* Header de la card */
.card-header {
    padding: var(--spacing-4) var(--spacing-6);
    border-bottom: 1px solid var(--gray-200);
    margin: calc(-1 * var(--spacing-6)) calc(-1 * var(--spacing-6)) var(--spacing-4);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    background: var(--gray-50);
}

.card-header-primary {
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    color: var(--white);
    border-bottom-color: var(--primary-700);
}

.card-header-success {
    background: linear-gradient(135deg, var(--success-500), var(--success-600));
    color: var(--white);
    border-bottom-color: var(--success-700);
}

/* Título de la card */
.card-title {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--gray-900);
    margin: 0;
    line-height: var(--leading-tight);
}

.card-header-primary .card-title,
.card-header-success .card-title {
    color: var(--white);
}

/* Subtítulo de la card */
.card-subtitle {
    font-size: var(--text-sm);
    color: var(--gray-600);
    margin-top: var(--spacing-1);
    margin-bottom: 0;
}

.card-header-primary .card-subtitle,
.card-header-success .card-subtitle {
    color: var(--white);
    opacity: 0.9;
}

/* Body de la card */
.card-body {
    padding: var(--spacing-4) 0;
    flex: 1;
}

.card-body > *:first-child {
    margin-top: 0;
}

.card-body > *:last-child {
    margin-bottom: 0;
}

/* Footer de la card */
.card-footer {
    padding: var(--spacing-4) var(--spacing-6);
    border-top: 1px solid var(--gray-200);
    margin: var(--spacing-4) calc(-1 * var(--spacing-6)) calc(-1 * var(--spacing-6));
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    background: var(--gray-50);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-4);
}

/* ============================================================================
   VARIANTES DE CARDS
   ============================================================================ */

/* Card con borde de color */
.card-bordered {
    border-width: var(--border-2);
}

.card-bordered-primary {
    border-color: var(--primary-500);
    border-left-width: 4px;
}

.card-bordered-success {
    border-color: var(--success-500);
    border-left-width: 4px;
}

.card-bordered-danger {
    border-color: var(--danger-500);
    border-left-width: 4px;
}

.card-bordered-warning {
    border-color: var(--warning-500);
    border-left-width: 4px;
}

/* Card con fondo de color */
.card-bg-primary {
    background: linear-gradient(135deg, var(--primary-50), var(--primary-100));
    border-color: var(--primary-200);
}

.card-bg-success {
    background: linear-gradient(135deg, var(--success-50), var(--success-100));
    border-color: var(--success-200);
}

.card-bg-danger {
    background: linear-gradient(135deg, var(--danger-50), var(--danger-100));
    border-color: var(--danger-200);
}

.card-bg-warning {
    background: linear-gradient(135deg, var(--warning-50), var(--warning-100));
    border-color: var(--warning-200);
}

/* Card plana (sin sombra) */
.card-flat {
    box-shadow: none;
    border: 1px solid var(--gray-200);
}

.card-flat:hover {
    box-shadow: var(--shadow-sm);
}

/* Card con sombra elevada */
.card-elevated {
    box-shadow: var(--shadow-lg);
}

.card-elevated:hover {
    box-shadow: var(--shadow-xl);
}

/* ============================================================================
   CARDS ESPECIALES
   ============================================================================ */

/* Card de estadística */
.stat-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--gray-200);
    transition: var(--transition-base);
    text-align: center;
}

.stat-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.stat-card-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--spacing-4);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    font-size: var(--text-3xl);
}

.stat-card-icon-primary {
    background: linear-gradient(135deg, var(--primary-100), var(--primary-200));
    color: var(--primary-600);
}

.stat-card-icon-success {
    background: linear-gradient(135deg, var(--success-100), var(--success-200));
    color: var(--success-600);
}

.stat-card-icon-danger {
    background: linear-gradient(135deg, var(--danger-100), var(--danger-200));
    color: var(--danger-600);
}

.stat-card-icon-warning {
    background: linear-gradient(135deg, var(--warning-100), var(--warning-200));
    color: var(--warning-600);
}

.stat-card-value {
    font-size: var(--text-4xl);
    font-weight: var(--font-bold);
    color: var(--gray-900);
    line-height: var(--leading-none);
    margin-bottom: var(--spacing-2);
}

.stat-card-label {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.stat-card-change {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    margin-top: var(--spacing-2);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
}

.stat-card-change-up {
    color: var(--success-600);
}

.stat-card-change-down {
    color: var(--danger-600);
}

/* Card de perfil de usuario */
.profile-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: var(--spacing-8);
    box-shadow: var(--shadow-md);
    text-align: center;
}

.profile-card-avatar {
    width: 120px;
    height: 120px;
    margin: 0 auto var(--spacing-4);
    border-radius: var(--radius-full);
    border: 4px solid var(--primary-100);
    overflow: hidden;
}

.profile-card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-card-name {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--gray-900);
    margin-bottom: var(--spacing-1);
}

.profile-card-role {
    font-size: var(--text-base);
    color: var(--gray-600);
    margin-bottom: var(--spacing-4);
}

.profile-card-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-4);
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--gray-200);
}

.profile-card-stat-value {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--gray-900);
}

.profile-card-stat-label {
    font-size: var(--text-xs);
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

/* Card de alerta/notificación */
.alert-card {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-4);
    padding: var(--spacing-4);
    border-radius: var(--radius-lg);
    border-left: 4px solid;
}

.alert-card-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.alert-card-content {
    flex: 1;
}

.alert-card-title {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    margin-bottom: var(--spacing-1);
}

.alert-card-message {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

.alert-card-info {
    background: var(--info-50);
    border-color: var(--info-500);
    color: var(--info-900);
}

.alert-card-success {
    background: var(--success-50);
    border-color: var(--success-500);
    color: var(--success-900);
}

.alert-card-warning {
    background: var(--warning-50);
    border-color: var(--warning-500);
    color: var(--warning-900);
}

.alert-card-danger {
    background: var(--danger-50);
    border-color: var(--danger-500);
    color: var(--danger-900);
}

/* ============================================================================
   GRID DE CARDS
   ============================================================================ */

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-6);
}

.cards-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.cards-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.cards-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* ============================================================================
   CARDS INTERACTIVAS
   ============================================================================ */

/* Card clickable */
.card-clickable {
    cursor: pointer;
    transition: var(--transition-base);
}

.card-clickable:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.card-clickable:active {
    transform: translateY(-2px);
}

/* Card colapsable */
.card-collapsible .card-header {
    cursor: pointer;
    user-select: none;
}

.card-collapsible .card-header::after {
    content: "▼";
    float: right;
    transition: var(--transition-base);
}

.card-collapsible.collapsed .card-header::after {
    transform: rotate(-90deg);
}

.card-collapsible.collapsed .card-body {
    display: none;
}

/* ============================================================================
   TAMAÑOS DE PADDING
   ============================================================================ */

.card-sm {
    padding: var(--spacing-4);
}

.card-lg {
    padding: var(--spacing-8);
}

.card-xl {
    padding: var(--spacing-10);
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 768px) {
    .card {
        padding: var(--spacing-4);
        border-radius: var(--radius-lg);
    }
    
    .card-header,
    .card-footer {
        margin-left: calc(-1 * var(--spacing-4));
        margin-right: calc(-1 * var(--spacing-4));
        padding-left: var(--spacing-4);
        padding-right: var(--spacing-4);
    }
    
    .cards-grid-2,
    .cards-grid-3,
    .cards-grid-4 {
        grid-template-columns: 1fr;
    }
    
    .stat-card {
        padding: var(--spacing-4);
    }
    
    .profile-card {
        padding: var(--spacing-6);
    }
    
    .profile-card-avatar {
        width: 80px;
        height: 80px;
    }
    
    .profile-card-stats {
        grid-template-columns: 1fr;
        gap: var(--spacing-2);
    }
}

/* ============================================================================
   EJEMPLOS DE USO (comentados)
   ============================================================================

<!-- Card básica -->
<div class="card">
    <div class="card-header">
        <h3 class="card-title">Título de la Card</h3>
        <p class="card-subtitle">Subtítulo opcional</p>
    </div>
    <div class="card-body">
        <p>Contenido de la card aquí...</p>
    </div>
    <div class="card-footer">
        <button class="btn btn-primary">Acción</button>
    </div>
</div>

<!-- Card de estadística -->
<div class="stat-card">
    <div class="stat-card-icon stat-card-icon-primary">
        <svg>...</svg>
    </div>
    <div class="stat-card-value">1,234</div>
    <div class="stat-card-label">Total Estudiantes</div>
    <div class="stat-card-change stat-card-change-up">
        ↑ 12% vs mes anterior
    </div>
</div>

<!-- Card de perfil -->
<div class="profile-card">
    <div class="profile-card-avatar">
        <img src="avatar.jpg" alt="Usuario">
    </div>
    <h3 class="profile-card-name">Juan Pérez</h3>
    <p class="profile-card-role">Docente de Matemáticas</p>
    <div class="profile-card-stats">
        <div>
            <div class="profile-card-stat-value">45</div>
            <div class="profile-card-stat-label">Estudiantes</div>
        </div>
        <div>
            <div class="profile-card-stat-value">6</div>
            <div class="profile-card-stat-label">Cursos</div>
        </div>
        <div>
            <div class="profile-card-stat-value">98%</div>
            <div class="profile-card-stat-label">Asistencia</div>
        </div>
    </div>
</div>

<!-- Card de alerta -->
<div class="alert-card alert-card-warning">
    <div class="alert-card-icon">⚠️</div>
    <div class="alert-card-content">
        <div class="alert-card-title">Atención Requerida</div>
        <div class="alert-card-message">
            Hay 5 estudiantes con calificaciones pendientes de revisión.
        </div>
    </div>
</div>

<!-- Grid de cards -->
<div class="cards-grid cards-grid-3">
    <div class="card">...</div>
    <div class="card">...</div>
    <div class="card">...</div>
</div>

   ============================================================================ */