/* ==========================================
   SISTEMA DE TEMAS - GYM TRAINER MEJORADO
   ========================================== */

/* ==========================================
   TEMA OSCURO (Por defecto)
   ========================================== */
body.theme-dark {
    background: linear-gradient(135deg, #1a1a1a, #2d2d2d);
    color: #ffffff;
}

.theme-dark .section {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}

.theme-dark .menu-card {
    background: linear-gradient(135deg, #ff6b35, #f7931e);
}

.theme-dark .btn {
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    color: #ffffff;
}

.theme-dark .form-group input,
.theme-dark .form-group select,
.theme-dark .form-group textarea {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

.theme-dark .form-group input::placeholder,
.theme-dark .form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.theme-dark .table {
    background: rgba(255, 255, 255, 0.05);
}

.theme-dark .table th {
    background: rgba(255, 107, 53, 0.3);
    color: #ff6b35;
}

.theme-dark .table td {
    color: #ffffff;
}

.theme-dark .stat-card {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
}

.theme-dark .stat-number {
    color: #ff6b35;
}

.theme-dark .stat-label {
    color: #ffffff;
}

.theme-dark .calendar-day {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.theme-dark .calendar-header {
    background: rgba(255, 107, 53, 0.3);
    color: #ff6b35;
}

.theme-dark .session-item {
    background: rgba(255, 107, 53, 0.2);
    border-left-color: #ff6b35;
    color: #ffffff;
}

.theme-dark h2,
.theme-dark h3 {
    color: #ff6b35;
}

.theme-dark .form-group label {
    color: #ff6b35;
}

/* ==========================================
   TEMA CLARO MEJORADO
   ========================================== */
body.theme-light {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    color: #1a1a1a;
}

.theme-light header {
    background: linear-gradient(135deg, #ff6b35, #f7931e);
}

.theme-light .section {
    background: #ffffff;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    color: #1a1a1a;
}

.theme-light .menu-card {
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    color: #fff;
}

.theme-light .menu-card p {
    color: rgba(255, 255, 255, 0.95);
}

.theme-light .btn {
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    color: #fff;
}

.theme-light .form-group input,
.theme-light .form-group select,
.theme-light .form-group textarea {
    background: #ffffff;
    border: 2px solid #e0e0e0;
    color: #1a1a1a;
}

.theme-light .form-group input:focus,
.theme-light .form-group select:focus,
.theme-light .form-group textarea:focus {
    border-color: #ff6b35;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
}

.theme-light .form-group input::placeholder,
.theme-light .form-group textarea::placeholder {
    color: #999;
}

.theme-light .table {
    background: #ffffff;
}

.theme-light .table th {
    background: rgba(255, 107, 53, 0.15);
    color: #ff6b35;
}

.theme-light .table td {
    color: #1a1a1a;
    border-bottom-color: #e0e0e0;
}

.theme-light .table tbody tr:hover {
    background: rgba(255, 107, 53, 0.05);
}

.theme-light .stat-card {
    background: #ffffff;
    border: 2px solid #e0e0e0;
}

.theme-light .stat-card:hover {
    border-color: #ff6b35;
}

.theme-light .stat-number {
    color: #ff6b35;
}

.theme-light .stat-label {
    color: #666;
}

.theme-light .calendar-day {
    background: #ffffff;
    border: 2px solid #e0e0e0;
    color: #1a1a1a;
}

.theme-light .calendar-day:hover {
    background: #fafafa;
    border-color: #ff6b35;
}

.theme-light .calendar-header {
    background: rgba(255, 107, 53, 0.15);
    color: #ff6b35;
}

.theme-light .session-item {
    background: rgba(255, 107, 53, 0.1);
    border-left-color: #ff6b35;
    color: #1a1a1a;
}

.theme-light .session-item:hover {
    background: rgba(255, 107, 53, 0.15);
}

.theme-light h2,
.theme-light h3 {
    color: #ff6b35;
}

.theme-light .form-group label {
    color: #ff6b35;
}

.theme-light .empty-state {
    color: #999;
}

/* ==========================================
   TEMA AZUL ELEGANTE
   ========================================== */
body.theme-blue {
    background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
    color: #ffffff;
}

.theme-blue header {
    background: linear-gradient(135deg, #1e3c72, #2a5298);
}

.theme-blue .logo {
    color: #ffffff;
}

.theme-blue .nav-menu a {
    color: #ffffff;
}

.theme-blue .section {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}

.theme-blue .menu-card {
    background: linear-gradient(135deg, #1e3c72, #2a5298);
}

.theme-blue .btn {
    background: linear-gradient(135deg, #1e3c72, #2a5298);
    color: #ffffff;
}

.theme-blue .btn:hover {
    box-shadow: 0 5px 15px rgba(30, 60, 114, 0.4);
}

.theme-blue .form-group input,
.theme-blue .form-group select,
.theme-blue .form-group textarea {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

.theme-blue .form-group input::placeholder,
.theme-blue .form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.theme-blue .form-group input:focus,
.theme-blue .form-group select:focus,
.theme-blue .form-group textarea:focus {
    border-color: #2a5298;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 0 0 3px rgba(42, 82, 152, 0.1);
}

.theme-blue .table {
    background: rgba(255, 255, 255, 0.05);
}

.theme-blue .table th {
    background: rgba(30, 60, 114, 0.3);
    color: #5a9fd4;
}

.theme-blue .table td {
    color: #ffffff;
}

.theme-blue .stat-card {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
}

.theme-blue .stat-card:hover {
    border-color: rgba(42, 82, 152, 0.5);
    box-shadow: 0 10px 25px rgba(30, 60, 114, 0.3);
}

.theme-blue .stat-number {
    color: #5a9fd4;
}

.theme-blue .stat-label {
    color: #ffffff;
}

.theme-blue .calendar-day {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.theme-blue .calendar-day:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(42, 82, 152, 0.5);
}

.theme-blue .calendar-header {
    background: rgba(30, 60, 114, 0.3);
    color: #5a9fd4;
}

.theme-blue .session-item {
    background: rgba(30, 60, 114, 0.2);
    border-left-color: #2a5298;
    color: #ffffff;
}

.theme-blue .session-item:hover {
    background: rgba(30, 60, 114, 0.3);
}

.theme-blue h2,
.theme-blue h3 {
    color: #5a9fd4;
}

.theme-blue .form-group label {
    color: #5a9fd4;
}

/* ==========================================
   TEMA VERDE BOSQUE
   ========================================== */
body.theme-green {
    background: linear-gradient(135deg, #1b3a2a, #2d5a45, #1f4f3a);
    color: #ffffff;
}

.theme-green header {
    background: linear-gradient(135deg, #2d7d4f, #3ba867);
}

.theme-green .logo {
    color: #ffffff;
}

.theme-green .nav-menu a {
    color: #ffffff;
}

.theme-green .section {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}

.theme-green .menu-card {
    background: linear-gradient(135deg, #2d7d4f, #3ba867);
}

.theme-green .btn {
    background: linear-gradient(135deg, #2d7d4f, #3ba867);
    color: #ffffff;
}

.theme-green .form-group input,
.theme-green .form-group select,
.theme-green .form-group textarea {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

.theme-green .form-group input::placeholder,
.theme-green .form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.theme-green .form-group label {
    color: #4cdb8f;
}

.theme-green .table th {
    background: rgba(45, 125, 79, 0.3);
    color: #4cdb8f;
}

.theme-green .table td {
    color: #ffffff;
}

.theme-green .stat-number {
    color: #4cdb8f;
}

.theme-green .stat-label {
    color: #ffffff;
}

.theme-green .calendar-header {
    background: rgba(45, 125, 79, 0.3);
    color: #4cdb8f;
}

.theme-green .session-item {
    background: rgba(45, 125, 79, 0.2);
    border-left-color: #3ba867;
    color: #ffffff;
}

.theme-green h2,
.theme-green h3 {
    color: #4cdb8f;
}

/* ==========================================
   TEMA PÚRPURA VIBRANTE
   ========================================== */
body.theme-purple {
    background: linear-gradient(135deg, #2a1a4a, #3d2667, #2a1a4a);
    color: #ffffff;
}

.theme-purple header {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
}

.theme-purple .logo {
    color: #ffffff;
}

.theme-purple .nav-menu a {
    color: #ffffff;
}

.theme-purple .section {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}

.theme-purple .menu-card {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
}

.theme-purple .btn {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #ffffff;
}

.theme-purple .form-group input,
.theme-purple .form-group select,
.theme-purple .form-group textarea {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

.theme-purple .form-group input::placeholder,
.theme-purple .form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.theme-purple .form-group label {
    color: #e9d5ff;
}

.theme-purple .table th {
    background: rgba(124, 58, 237, 0.3);
    color: #e9d5ff;
}

.theme-purple .table td {
    color: #ffffff;
}

.theme-purple .stat-number {
    color: #e9d5ff;
}

.theme-purple .stat-label {
    color: #ffffff;
}

.theme-purple .calendar-header {
    background: rgba(124, 58, 237, 0.3);
    color: #e9d5ff;
}

.theme-purple .session-item {
    background: rgba(124, 58, 237, 0.2);
    border-left-color: #a855f7;
    color: #ffffff;
}

.theme-purple h2,
.theme-purple h3 {
    color: #e9d5ff;
}

/* ==========================================
   TEMA ROJO MODERNO
   ========================================== */
body.theme-red {
    background: linear-gradient(135deg, #2a1a1a, #3d2a2a, #2a1a1a);
    color: #ffffff;
}

.theme-red header {
    background: linear-gradient(135deg, #dc2626, #ef4444);
}

.theme-red .logo {
    color: #ffffff;
}

.theme-red .nav-menu a {
    color: #ffffff;
}

.theme-red .section {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}

.theme-red .menu-card {
    background: linear-gradient(135deg, #dc2626, #ef4444);
}

.theme-red .btn {
    background: linear-gradient(135deg, #dc2626, #ef4444);
    color: #ffffff;
}

.theme-red .form-group input,
.theme-red .form-group select,
.theme-red .form-group textarea {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

.theme-red .form-group input::placeholder,
.theme-red .form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.theme-red .form-group label {
    color: #fca5a5;
}

.theme-red .table th {
    background: rgba(220, 38, 38, 0.3);
    color: #fca5a5;
}

.theme-red .table td {
    color: #ffffff;
}

.theme-red .stat-number {
    color: #fca5a5;
}

.theme-red .stat-label {
    color: #ffffff;
}

.theme-red .calendar-header {
    background: rgba(220, 38, 38, 0.3);
    color: #fca5a5;
}

.theme-red .session-item {
    background: rgba(220, 38, 38, 0.2);
    border-left-color: #ef4444;
    color: #ffffff;
}

.theme-red h2,
.theme-red h3 {
    color: #fca5a5;
}

/* ==========================================
   TEMA CIAN FUTURISTA
   ========================================== */
body.theme-cyan {
    background: linear-gradient(135deg, #0a1428, #0f172a, #1a2332);
    color: #ffffff;
}

.theme-cyan header {
    background: linear-gradient(135deg, #0891b2, #06b6d4);
}

.theme-cyan .logo {
    color: #ffffff;
}

.theme-cyan .nav-menu a {
    color: #ffffff;
}

.theme-cyan .section {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}

.theme-cyan .menu-card {
    background: linear-gradient(135deg, #0891b2, #06b6d4);
}

.theme-cyan .btn {
    background: linear-gradient(135deg, #0891b2, #06b6d4);
    color: #ffffff;
}

.theme-cyan .form-group input,
.theme-cyan .form-group select,
.theme-cyan .form-group textarea {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

.theme-cyan .form-group input::placeholder,
.theme-cyan .form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.theme-cyan .form-group label {
    color: #67e8f9;
}

.theme-cyan .table th {
    background: rgba(8, 145, 178, 0.3);
    color: #67e8f9;
}

.theme-cyan .table td {
    color: #ffffff;
}

.theme-cyan .stat-number {
    color: #67e8f9;
}

.theme-cyan .stat-label {
    color: #ffffff;
}

.theme-cyan .calendar-header {
    background: rgba(8, 145, 178, 0.3);
    color: #67e8f9;
}

.theme-cyan .session-item {
    background: rgba(8, 145, 178, 0.2);
    border-left-color: #06b6d4;
    color: #ffffff;
}

.theme-cyan h2,
.theme-cyan h3 {
    color: #67e8f9;
}

/* ==========================================
   TEMA ORO ELEGANTE
   ========================================== */
body.theme-gold {
    background: linear-gradient(135deg, #291a1a, #3d3025, #2a2420);
    color: #ffffff;
}

.theme-gold header {
    background: linear-gradient(135deg, #b8860b, #daa520);
}

.theme-gold .logo {
    color: #ffffff;
}

.theme-gold .nav-menu a {
    color: #ffffff;
}

.theme-gold .section {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}

.theme-gold .menu-card {
    background: linear-gradient(135deg, #b8860b, #daa520);
}

.theme-gold .btn {
    background: linear-gradient(135deg, #b8860b, #daa520);
    color: #ffffff;
}

.theme-gold .form-group input,
.theme-gold .form-group select,
.theme-gold .form-group textarea {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

.theme-gold .form-group input::placeholder,
.theme-gold .form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.theme-gold .form-group label {
    color: #ffd700;
}

.theme-gold .table th {
    background: rgba(184, 134, 11, 0.3);
    color: #ffd700;
}

.theme-gold .table td {
    color: #ffffff;
}

.theme-gold .stat-number {
    color: #ffd700;
}

.theme-gold .stat-label {
    color: #ffffff;
}

.theme-gold .calendar-header {
    background: rgba(184, 134, 11, 0.3);
    color: #ffd700;
}

.theme-gold .session-item {
    background: rgba(184, 134, 11, 0.2);
    border-left-color: #daa520;
    color: #ffffff;
}

.theme-gold h2,
.theme-gold h3 {
    color: #ffd700;
}

/* ==========================================
   ESTILOS COMUNES PARA PERFIL Y TEMAS
   ========================================== */
.profile-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 20px;
}

.profile-info,
.theme-selector,
.profile-actions {
    background: rgba(255, 255, 255, 0.05);
    padding: 25px;
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.info-item {
    padding: 10px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
}

.info-item label {
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
    opacity: 0.7;
}

.info-item span {
    display: block;
    font-size: 16px;
}

.theme-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.theme-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    color: inherit;
    font-size: 14px;
    font-weight: 600;
}

.theme-btn:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.3);
}

.theme-btn.active {
    border-color: #ff6b35;
    background: rgba(255, 107, 53, 0.1);
    box-shadow: 0 0 15px rgba(255, 107, 53, 0.3);
}

.theme-preview {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.3);
}

.dark-preview {
    background: linear-gradient(135deg, #1a1a1a, #ff6b35);
}

.light-preview {
    background: linear-gradient(135deg, #f5f5f5, #ff6b35);
}

.blue-preview {
    background: linear-gradient(135deg, #0f2027, #2a5298);
}

.green-preview {
    background: linear-gradient(135deg, #1b3a2a, #3ba867);
}

.purple-preview {
    background: linear-gradient(135deg, #2a1a4a, #a855f7);
}

.red-preview {
    background: linear-gradient(135deg, #2a1a1a, #ef4444);
}

.cyan-preview {
    background: linear-gradient(135deg, #0a1428, #06b6d4);
}

.gold-preview {
    background: linear-gradient(135deg, #291a1a, #daa520);
}

.profile-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.welcome-banner {
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    border-left: 4px solid #ff6b35;
}

.welcome-banner h2 {
    margin-bottom: 10px;
}

.welcome-banner p {
    opacity: 0.8;
}

.nav-divider {
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    margin: 10px 0;
}

.logout-btn {
    color: #ff6b6b !important;
}

.logout-btn:hover {
    background: rgba(255, 107, 107, 0.2) !important;
}

/* Tema claro - Perfil */
.theme-light .profile-info,
.theme-light .theme-selector,
.theme-light .profile-actions {
    background: #ffffff;
    border-color: #e0e0e0;
}

.theme-light .info-item {
    background: #f5f5f5;
}

.theme-light .theme-btn {
    background: #f5f5f5;
    border-color: #e0e0e0;
    color: #1a1a1a;
}

.theme-light .theme-btn:hover {
    border-color: #ff6b35;
}

.theme-light .theme-btn.active {
    background: rgba(255, 107, 53, 0.1);
    border-color: #ff6b35;
}

.theme-light .welcome-banner {
    background: #ffffff;
    border-left-color: #ff6b35;
}

.theme-light .welcome-banner p,
.theme-light .welcome-banner h2 {
    color: #1a1a1a;
}

/* Responsive */
@media (max-width: 768px) {
    .theme-options {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .info-grid {
        grid-template-columns: 1fr;
    }
    
    .modal-content {
        max-height: 95vh;
    }
}
/* ==========================================
   SELECTS POR TEMA - MEJORADOS
   ========================================== */

/* TEMA OSCURO */
.theme-dark .form-group select {
    background-color: #1a1a1a;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.1);
}

.theme-dark .form-group select option {
    background: #2d2d2d;
    color: #ffffff;
}

.theme-dark .form-group select option:checked {
    background: #ff6b35;
    color: #ffffff;
}

/* TEMA CLARO */
.theme-light .form-group select {
    background-color: #ffffff;
    color: #1a1a1a;
    border-color: #e0e0e0;
}

.theme-light .form-group select option {
    background: #ffffff;
    color: #1a1a1a;
}

.theme-light .form-group select option:checked {
    background: #ff6b35;
    color: #ffffff;
}

/* TEMA AZUL */
.theme-blue .form-group select {
    background-color: #0f2027;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.1);
}

.theme-blue .form-group select option {
    background: #203a43;
    color: #ffffff;
}

.theme-blue .form-group select option:checked {
    background: #2a5298;
    color: #ffffff;
}

/* TEMA VERDE */
.theme-green .form-group select {
    background-color: #1b3a2a;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.1);
}

.theme-green .form-group select option {
    background: #2d5a45;
    color: #ffffff;
}

.theme-green .form-group select option:checked {
    background: #3ba867;
    color: #ffffff;
}

/* TEMA PÚRPURA */
.theme-purple .form-group select {
    background-color: #2a1a4a;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.1);
}

.theme-purple .form-group select option {
    background: #3d2667;
    color: #ffffff;
}

.theme-purple .form-group select option:checked {
    background: #a855f7;
    color: #ffffff;
}

/* TEMA ROJO */
.theme-red .form-group select {
    background-color: #2a1a1a;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.1);
}

.theme-red .form-group select option {
    background: #3d2a2a;
    color: #ffffff;
}

.theme-red .form-group select option:checked {
    background: #ef4444;
    color: #ffffff;
}

/* TEMA CIAN */
.theme-cyan .form-group select {
    background-color: #0a1428;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.1);
}

.theme-cyan .form-group select option {
    background: #0f172a;
    color: #ffffff;
}

.theme-cyan .form-group select option:checked {
    background: #06b6d4;
    color: #ffffff;
}

/* TEMA ORO */
.theme-gold .form-group select {
    background-color: #291a1a;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.1);
}

.theme-gold .form-group select option {
    background: #3d3025;
    color: #ffffff;
}

.theme-gold .form-group select option:checked {
    background: #daa520;
    color: #ffffff;
}