/* =========================================
   PÁGINA ENTRENADOR - Estilos Específicos
   ========================================= */

/* HEADER */
.header {
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-blue) 100%);
    padding: clamp(16px, 4vw, 20px);
    padding-top: calc(clamp(16px, 4vw, 20px) + env(safe-area-inset-top));
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.logo {
    height: clamp(35px, 8vw, 45px);
    width: auto;
}

.header-title {
    font-size: clamp(18px, 4.5vw, 22px);
    font-weight: 700;
    color: white;
    letter-spacing: 0.5px;
}

.logout-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: all 0.3s ease;
}

.logout-btn:hover {
    background: rgba(239, 68, 68, 0.8);
    transform: scale(1.05);
}

.logout-btn svg {
    width: 20px;
    height: 20px;
}

/* CONTENT */
.content {
    padding: clamp(16px, 4vw, 24px);
    padding-bottom: calc(40px + env(safe-area-inset-bottom));
    max-width: 600px;
    margin: 0 auto;
}

/* WELCOME CARD */
.welcome-card {
    background: white;
    border-radius: clamp(18px, 4.5vw, 24px);
    padding: clamp(20px, 5vw, 28px);
    margin-bottom: clamp(24px, 6vw, 32px);
    box-shadow: 0 8px 30px rgba(74, 123, 167, 0.15);
    display: flex;
    align-items: center;
    gap: clamp(16px, 4vw, 20px);
    animation: slideUp 0.5s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.welcome-icon {
    width: clamp(60px, 15vw, 72px);
    height: clamp(60px, 15vw, 72px);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-blue) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 6px 20px rgba(74, 123, 167, 0.3);
}

.welcome-icon svg {
    width: 50%;
    height: 50%;
    color: white;
}

.welcome-text h2 {
    font-size: clamp(18px, 4.5vw, 22px);
    font-weight: 700;
    color: #333;
    margin-bottom: 4px;
}

.welcome-text p {
    font-size: clamp(13px, 3.2vw, 15px);
    color: #666;
    font-weight: 500;
}

/* SECTION TITLE */
.section-title {
    font-size: clamp(16px, 4vw, 18px);
    font-weight: 700;
    color: white;
    margin-bottom: clamp(14px, 3.5vw, 18px);
    padding-left: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ACTIONS GRID */
.actions-grid {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 3vw, 16px);
    margin-bottom: clamp(24px, 6vw, 32px);
}

/* ACTION CARD */
.action-card {
    background: white;
    border-radius: clamp(14px, 3.5vw, 18px);
    padding: clamp(16px, 4vw, 20px);
    display: flex;
    align-items: center;
    gap: clamp(14px, 3.5vw, 18px);
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(74, 123, 167, 0.12);
    transition: all 0.3s ease;
    animation: slideUp 0.5s ease-out backwards;
}

.action-card:nth-child(1) { animation-delay: 0.05s; }
.action-card:nth-child(2) { animation-delay: 0.1s; }
.action-card:nth-child(3) { animation-delay: 0.15s; }
.action-card:nth-child(4) { animation-delay: 0.2s; }

.action-card:hover {
    transform: translateX(8px);
    box-shadow: 0 8px 25px rgba(74, 123, 167, 0.2);
}

.action-card:active {
    transform: scale(0.98);
}

/* ACTION ICON */
.action-icon {
    width: clamp(48px, 12vw, 56px);
    height: clamp(48px, 12vw, 56px);
    border-radius: clamp(12px, 3vw, 14px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.action-icon svg {
    width: 24px;
    height: 24px;
    color: white;
}

/* Icon Colors */
.action-icon.biblioteca {
    background: linear-gradient(135deg, #4a7ba7 0%, #5b8fb9 100%);
    box-shadow: 0 4px 12px rgba(74, 123, 167, 0.3);
}

.action-icon.fms {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.action-icon.entrenamientos {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.action-icon.inbody {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.action-icon.alumnos {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.action-icon.progreso {
    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
}

.action-icon.reservas {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3);
}

.action-icon.admin {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.action-icon.anamnesis {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}

/* ACTION INFO */
.action-info {
    flex: 1;
    min-width: 0;
}

.action-title {
    font-size: clamp(15px, 3.8vw, 17px);
    font-weight: 700;
    color: #333;
    margin-bottom: 4px;
}

.action-subtitle {
    font-size: clamp(12px, 3vw, 14px);
    color: #666;
    font-weight: 500;
}

/* ACTION ARROW */
.action-arrow {
    width: 20px;
    height: 20px;
    color: #ccc;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.action-card:hover .action-arrow {
    color: var(--primary-blue);
    transform: translateX(4px);
}

/* RESPONSIVE - Pantallas pequeñas */
@media (max-width: 360px) {
    .welcome-card {
        flex-direction: column;
        text-align: center;
    }

    .action-icon {
        width: 44px;
        height: 44px;
    }

    .action-icon svg {
        width: 20px;
        height: 20px;
    }
}

/* RESPONSIVE - Tablet */
@media (min-width: 768px) {
    .content {
        padding: 32px;
    }

    .actions-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .action-card:hover {
        transform: translateY(-4px);
    }
}