/* Pequeña animación para que la burbuja llame la atención suavemente */
@keyframes latido {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* ========================
   UTILIDADES DE LAYOUT
   ======================== */
.is-hidden {
    display: none !important;
}

.flex-1 {
    flex: 1 !important;
}

.flex-row {
    display: flex;
    gap: 10px;
}

.flex-center {
    display: flex;
    align-items: center;
}

.gap-10 {
    gap: 10px;
}

.overflow-auto {
    overflow-x: auto;
}

.form-column {
    flex: 1;
    min-width: 0;
}

.hero-divider {
    margin: 30px 0 25px;
    border-top: 1px solid rgba(255,255,255,0.1);
    position: relative;
}

.hero-divider__text {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #0f172a;
    padding: 0 15px;
    color: #64748b;
    font-size: 0.85em;
    white-space: nowrap;
}

.card-panel {
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid #eee;
}

.card-panel--light {
    background: #f9f9f9;
}

.card-panel--white {
    background: white;
}

.card-panel--accent {
    border-left: 4px solid #ffaa00;
}

.card-panel--bubble {
    border-left: 5px solid #0066cc;
}

.dash-card {
    min-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0;
}

.coach-card {
    background: #e6f2ff;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    border-left: 5px solid #0066cc;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.coach-buzon {
    margin-bottom: 20px;
    border-left: 4px solid #ffaa00;
}

.dash-card-wide {
    flex: 2;
    min-width: 350px;
    margin-bottom: 0;
}

.dash-card-narrow {
    flex: 1;
    min-width: 350px;
    margin-bottom: 0;
}

.dash-card-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.card-column {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.control-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fffafa;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid #ffcccc;
}

.numeric-input {
    width: 50px;
    padding: 4px;
    border-radius: 4px;
    border: 1px solid #ffcccc;
    color: #cc0000;
    font-weight: bold;
    text-align: center;
    outline: none;
}

.control-label {
    font-size: 0.9em;
    color: #cc0000;
    font-weight: bold;
    margin: 0;
}

.dropdown-trigger {
    background: #005ce6;
    border: none;
    color: white;
    min-width: 260px;
    max-width: 260px;
    padding: 8px 15px;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    border-radius: 6px;
    font-size: 0.9em;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0,92,230,0.2);
}

.dropdown-holder {
    position: relative;
}

.dropdown-panel {
    position: absolute;
    top: 110%;
    right: 0;
    width: 100%;
    min-width: 260px;
    max-height: 350px;
    overflow-y: auto;
    background: white;
    border: 1px solid #005ce6;
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    z-index: 1000;
}

.section-heading--strong {
    color: #005ce6;
    border-bottom: 1px solid #cce0ff;
    padding-bottom: 10px;
}

.section-heading--link {
    cursor: pointer;
}

.stat-label {
    font-size: 0.8em;
    color: #666;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0;
}

.stat-value {
    font-size: 0.9em;
    color: #666;
}

.stat-unit {
    font-size: 0.4em;
    color: #999;
}

.tag-hint {
    color: #aaa;
    font-size: 0.8em;
    margin-left: 4px;
}

.flex-gap-10 {
    display: flex;
    gap: 10px;
}

.m-0 {
    margin: 0;
}

.chip-panel {
    cursor: pointer;
    background: #f9f9f9;
    padding: 8px;
    border-radius: 5px;
    border: 1px solid #eee;
    font-size: 0.9em;
    flex: 1;
}

.chip-panel.alt {
    background: #e6f2ff;
    border: 1px solid #cce0ff;
}

.bg-transparent {
    background: transparent;
}

.font-small {
    font-size: 0.95em;
}

.analytics-row {
    height: 300px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.canvas-wrapper {
    position: relative;
    width: 45%;
    height: 100%;
}

.legend-panel {
    width: 55%;
    max-height: 100%;
    overflow-y: auto;
    padding-right: 5px;
}

.text-accent {
    color: #005ce6;
}

.card-panel--bordered {
    border: 1px solid #cce0ff;
    border-radius: 8px;
    padding: 15px;
    background: white;
    text-align: center;
}

.flex-min-300 {
    flex: 1;
    min-width: 300px;
}

.card-panel--data {
    flex: 1;
    background: white;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid #eee;
}

.btn-stretch {
    flex: 1;
    border: none;
}

.btn-success {
    background: linear-gradient(90deg, #10b981, #059669);
    color: white;
}

.btn-ghost {
    background: transparent;
    color: #94a3b8;
    border: 1px solid rgba(255,255,255,0.2);
}

.btn-secondary--flat {
    border: none;
    color: white;
    background-color: #607d8b;
}

.btn-select {
    flex: 1.5;
    background-color: #8e44ad;
    color: white;
    border: none;
    cursor: pointer;
    outline: none;
    text-align: center;
    appearance: none;
    -webkit-appearance: none;
}

.input-flex {
    flex: 1;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.mt-0 {
    margin-top: 0;
}

.hero-title {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 4.8em;
    margin-bottom: 10px;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.logo-landing {
    width: 68px;
    height: 68px;
    object-fit: contain;
    flex-shrink: 0;
}

.hero-divider-standalone {
    display: flex;
    width: 100%;
    justify-content: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

.hero-divider-standalone span {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #0f172a;
    padding: 0 15px;
    color: #64748b;
    font-size: 0.85em;
    white-space: nowrap;
}
\n+.grid-responsive {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    align-items: stretch;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}\n*** End Patch"""

.modal-card {
    padding: 15px;
    background: #f9fff9;
    border-radius: 8px;
    border: 1px solid #cce0ff;
}

.form-input-group {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.text-muted {
    font-size: 0.85em;
    color: #94a3b8;
}

#notificacion-flotante {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #ff3333;
    color: white;
    padding: 12px 20px;
    border-radius: 50px;
    box-shadow: 0 5px 15px rgba(255,51,51,0.4);
    z-index: 9999;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s;
    animation: latido 2s infinite;
}

#banner-supervision {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(90deg, #ff8c00 0%, #ff4500 100%);
    color: white;
    text-align: center;
    padding: 12px;
    font-weight: bold;
    z-index: 10000;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

.supervision-context-bar {
    margin: 18px 24px 0;
    padding: 14px 18px;
    border-radius: 18px;
    border: 1px solid rgba(180, 134, 39, 0.22);
    background: linear-gradient(135deg, rgba(255, 248, 229, 0.98), rgba(255, 255, 255, 0.98));
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.supervision-context-bar__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(183, 134, 11, 0.12);
    color: #8a5a00;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.supervision-context-bar__body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.supervision-context-bar__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #334155;
}

.supervision-context-bar__text strong {
    color: #0f172a;
    font-size: 1rem;
}

.supervision-context-bar__text span {
    font-size: 0.9rem;
    color: #64748b;
}

.supervision-context-bar__exit {
    border: none;
    border-radius: 999px;
    background: #0f172a;
    color: #fff;
    padding: 10px 16px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.supervision-context-bar__exit:hover {
    background: #1e293b;
}

        /* ==========================================
           MARKETING: SECCIÓN DE CARACTERÍSTICAS
           ========================================== */
        .features-section {
            width: 100%;
            max-width: 1400px;
            margin: 0 auto;
            padding: 80px 40px;
            box-sizing: border-box;
            text-align: center;
        }

        .features-title {
            font-size: 2.8em;
            color: white;
            margin-bottom: 20px;
            font-weight: 900;
        }

        .features-subtitle {
            font-size: 1.2em;
            color: #94a3b8;
            max-width: 800px;
            margin: 0 auto 60px auto;
            line-height: 1.6;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }

        .feature-card {
            background: rgba(15, 23, 42, 0.6);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 16px;
            padding: 40px 30px;
            text-align: left;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
            position: relative;
            overflow: hidden;
        }

        .feature-card:hover {
            transform: translateY(-10px);
            border-color: rgba(0, 242, 254, 0.4);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 242, 254, 0.1);
        }

        .feature-icon {
            font-size: 2.5em;
            margin-bottom: 20px;
            display: inline-block;
            background: -webkit-linear-gradient(45deg, #00f2fe, #4facfe);
            background: linear-gradient(45deg, #00f2fe, #4facfe);
            -webkit-background-clip: text;
            background-clip: text; /* <- Esto quita el error de VS Code */
            -webkit-text-fill-color: transparent;
            color: transparent; /* <- Esto también es buena práctica */
        }

        .feature-card h3 {
            color: white;
            font-size: 1.4em;
            margin-top: 0;
            margin-bottom: 15px;
        }

        .feature-card p {
            color: #94a3b8;
            font-size: 1em;
            line-height: 1.6;
            margin: 0;
        }

        /* Línea brillante superior para dar efecto premium */
        .feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, transparent, #00f2fe, transparent);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .feature-card:hover::before {
            opacity: 1;
        }

        /* ==========================================
           MARKETING: SHOWCASE (PANTALLAS APP Y GRÁFICOS)
           ========================================== */
        .showcase-section { width: 100%; max-width: 1200px; margin: 0 auto; padding: 80px 40px; box-sizing: border-box; }
        .showcase-row { display: flex; align-items: center; gap: 60px; margin-bottom: 100px; }
        .showcase-row.reverse { flex-direction: row-reverse; }

        .showcase-text { flex: 1; text-align: left; }
        .showcase-text h3 { font-size: 2.2em; color: white; margin-bottom: 15px; font-weight: 800; }
        .showcase-text p { font-size: 1.1em; color: #94a3b8; line-height: 1.6; margin-bottom: 20px; }

        .showcase-image { flex: 1.2; position: relative; }

        /* Efecto ventana de software (Mac OS style) */
        .mockup-window { background: rgba(15, 23, 42, 0.8); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5), 0 0 30px rgba(0, 242, 254, 0.1); transition: transform 0.4s ease; }
        .mockup-window:hover { transform: scale(1.02) translateY(-10px); box-shadow: 0 30px 60px -12px rgba(0,0,0,0.6), 0 0 40px rgba(0, 242, 254, 0.2); }

        .mockup-header { background: rgba(255,255,255,0.05); padding: 10px 15px; display: flex; gap: 8px; border-bottom: 1px solid rgba(255,255,255,0.05); }
        .mockup-dot { width: 10px; height: 10px; border-radius: 50%; }
        .mockup-dot.red { background: #ff5f56; } .mockup-dot.yellow { background: #ffbd2e; } .mockup-dot.green { background: #27c93f; }

        @media(max-width: 900px) {
            .showcase-row, .showcase-row.reverse { flex-direction: column; text-align: center; gap: 40px; margin-bottom: 60px; }
            .showcase-text { text-align: center; }
        }

        /* TUS ESTILOS GENERALES ORIGINALES */
        :root { --z1: #81D4FA; --z2: #4FC3F7; --z3: #29B6F6; --z4: #039BE5; --z5: #0277BD; --z6: #FBC02D; --z7: #F57F17; --z8: #D84315; }
        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; display: flex; height: 100vh; background-color: #f4f7f6; overflow: hidden; }

	/* TABLA ZONAS FC */
        .fc-table { width: 100%; border-collapse: collapse; font-size: 0.9em; background: white; margin-top: 5px; }
        .fc-table th, .fc-table td { border: 1px solid #ffcccc; padding: 6px; text-align: center; }
        .fc-input-pct { width: 45px; padding: 4px; text-align: center; border: 1px solid #cc0000; border-radius: 4px; font-weight: bold; color: #cc0000; background: #fffafa; }
        .fc-input-pct:focus { outline: none; background: white; box-shadow: 0 0 3px #cc0000; }

        /* SISTEMA DE ROLES */
        body.is-athlete .coach-ui { display: none !important; }
        body.is-coach .athlete-ui { display: none !important; }
        /* LOGIN - HIGH PERFORMANCE DARK MODE */
        #login-container { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 1000; background-color: #0b0f19; background-image: radial-gradient(circle at top right, rgba(0, 136, 204, 0.2), #0b0f19 55%); display: flex; flex-direction: column; overflow-y: auto; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

        /* 💻 ESCRITORIO: Cabecera con Logo Horizontal y 2 Columnas */
        /* 💻 ESCRITORIO: Cabecera centrada a pantalla completa (100vh) */
        .hero-section { display: flex; flex-direction: column; width: 100%; max-width: 1400px; min-height: 100vh; margin: 0 auto; align-items: center; justify-content: center; padding: 40px 60px; box-sizing: border-box; text-align: left; }

        /* Juntamos las 2 columnas en el centro y reducimos el hueco (gap) */
        .hero-content-wrapper { display: flex; flex-direction: row; width: 100%; align-items: center; justify-content: center; gap: 50px; }

        /* Hacemos los textos base un poco más grandes */
        .hero-text { flex: 1; color: white; display: flex; flex-direction: column; align-items: flex-start; max-width: 650px; }
        .hero-text p.subtitle { font-size: 1.5em; color: #94a3b8; margin: 10px 0 25px 0; line-height: 1.5; font-weight: 300; max-width: 600px; }

        .hero-features { list-style: none; padding: 0; margin: 0 0 30px 0; text-align: left; }
        .hero-features li { display: flex; align-items: center; gap: 12px; font-size: 1.3em; color: #cbd5e1; margin-bottom: 15px; }
        .hero-features li::before { content: '✓'; color: #00f2fe; font-weight: bold; background: rgba(0, 242, 254, 0.1); border-radius: 50%; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.1em; }

        /* Hacemos la caja de login un poco más ancha para compensar el tamaño */
        .login-wrapper { flex-basis: 460px; max-width: 460px; position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; }
        .hero-text { flex: 1; color: white; display: flex; flex-direction: column; align-items: flex-start; }
        .hero-text p.subtitle { font-size: 1.3em; color: #94a3b8; margin: 10px 0 25px 0; line-height: 1.5; font-weight: 300; max-width: 600px; }

        .hero-features { list-style: none; padding: 0; margin: 0 0 30px 0; text-align: left; }
        .hero-features li { display: flex; align-items: center; gap: 12px; font-size: 1.15em; color: #cbd5e1; margin-bottom: 15px; }
        .hero-features li::before { content: '✓'; color: #00f2fe; font-weight: bold; background: rgba(0, 242, 254, 0.1); border-radius: 50%; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

        .login-wrapper { flex-basis: 420px; max-width: 420px; position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; }

        /* 📱 MÓVIL Y TABLETS: 1 Columna (Apilado) */
        @media (max-width: 900px) {
            .hero-section { padding: 40px 20px; gap: 30px; justify-content: flex-start; }
            .main-logo-header { justify-content: center; text-align: center; }
            .main-logo-header h1 { font-size: 3em; justify-content: center; }
            .logo-drops-container { justify-content: center; }
            .logo-drop-icon { height: 50px; }
            .hero-content-wrapper { flex-direction: column; align-items: center; gap: 30px; }
            .hero-text { align-items: center; text-align: center; }
            .hero-features { display: inline-block; }
            .login-wrapper { flex-basis: auto; width: 100%; max-width: 450px; margin: 0 auto; }
        }
        .login-box { background: rgba(15, 23, 42, 0.7); padding: 40px; border-radius: 20px; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); text-align: center; width: 100%; border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(20px); }
        .login-box h3 { color: #f8fafc !important; font-size: 1.8em; margin-top: 0; }
        .login-box p { color: #94a3b8 !important; }
        .login-btn { display: block; width: 100%; padding: 15px; margin: 12px 0; font-size: 1.05em; font-weight: bold; border: none; border-radius: 8px; cursor: pointer; transition: all 0.3s; text-transform: uppercase; letter-spacing: 1px; }
        .btn-coach { background: linear-gradient(90deg, #0088cc, #00f2fe); color: white; box-shadow: 0 4px 15px rgba(0,136,204,0.4); } .btn-coach:hover { background: linear-gradient(90deg, #006699, #00d2ff); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,242,254,0.4); }
        .btn-athlete { background: transparent; color: #00f2fe; border: 2px solid #00f2fe; } .btn-athlete:hover { background: rgba(0,242,254,0.1); transform: translateY(-2px); }
        .btn-register { background-color: transparent; border: none; color: #94a3b8; text-transform: none; text-decoration: underline; padding: 5px; margin: 10px 0 0 0; } .btn-register:hover { color: white; background: transparent; transform: none; }
        .login-input { width: 100%; padding: 14px; margin: 10px 0 25px 0; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; text-align: center; font-size: 1.1em; box-sizing: border-box; background: rgba(0,0,0,0.3) !important; color: white !important; transition: all 0.3s; }
        .login-input:focus { outline: none; border-color: #00f2fe; background: rgba(0,0,0,0.5) !important; box-shadow: 0 0 15px rgba(0,242,254,0.2); }
        .login-input::placeholder { color: #64748b; }

        @media(max-width: 900px) { .hero-section { flex-direction: column; justify-content: center; text-align: center; padding: 20px; } .hero-text h1 { justify-content: center; font-size: 3.5em; } .hero-features li { justify-content: center; } .login-wrapper { width: 100%; flex: 1; } }

        /* --- LANDING PAGE: SECCIONES EXTRA --- */
        .landing-section { padding: 80px 40px; max-width: 1200px; margin: 0 auto; color: white; border-top: 1px solid rgba(255,255,255,0.05); }
        .section-title { font-size: 2.5em; text-align: center; margin-bottom: 15px; font-weight: 800; background: -webkit-linear-gradient(45deg, #00f2fe, #4facfe); background: linear-gradient(45deg, #00f2fe, #4facfe); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
        .section-subtitle { text-align: center; color: #94a3b8; font-size: 1.2em; margin-bottom: 60px; max-width: 700px; margin-left: auto; margin-right: auto; }

        /* FEATURES (Cajas de Funcionalidades) */
        .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; }
        .feature-card { background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(255,255,255,0.1); padding: 30px; border-radius: 15px; text-align: left; transition: transform 0.3s; backdrop-filter: blur(10px); }
        .feature-card:hover { transform: translateY(-5px); border-color: #00f2fe; box-shadow: 0 10px 20px rgba(0,242,254,0.1); }
        .feature-icon { font-size: 2.5em; margin-bottom: 15px; display: inline-block; }
        .feature-card h3 { color: #f8fafc; font-size: 1.4em; margin-top: 0; }
        .feature-card p { color: #94a3b8; line-height: 1.6; }

        /* TESTIMONIALS (Testimonios) */
        .testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 30px; }
        .testimonial-card { background: linear-gradient(145deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.7)); padding: 30px; border-radius: 15px; border-left: 4px solid #00f2fe; font-style: italic; color: #cbd5e1; line-height: 1.6; box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
        .testimonial-author { margin-top: 20px; font-weight: bold; color: #00f2fe; font-style: normal; display: flex; align-items: center; gap: 10px; }

        /* PRICING (Precios) */
        .pricing-billing-toggle { display: inline-flex; gap: 8px; padding: 6px; margin-top: 20px; background: rgba(15, 23, 42, 0.75); border: 1px solid rgba(255,255,255,0.08); border-radius: 999px; }
        .pricing-billing-toggle__btn { border: 0; background: transparent; color: #cbd5e1; padding: 10px 18px; border-radius: 999px; cursor: pointer; font-weight: 600; transition: all 0.2s ease; }
        .pricing-billing-toggle__btn.is-active { background: linear-gradient(135deg, #00f2fe, #0088cc); color: #04111f; box-shadow: 0 8px 20px rgba(0, 136, 204, 0.25); }
        .pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(260px, 1fr)); gap: 30px; align-items: stretch; margin-top: 40px; }
        @media (max-width: 960px) {
            .pricing-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
        }
        .pricing-card { background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(255,255,255,0.1); padding: 40px 30px; border-radius: 15px; text-align: center; position: relative; }
        .pricing-card.destacado { border-color: #00f2fe; background: rgba(15, 23, 42, 0.95); transform: scale(1.05); box-shadow: 0 0 30px rgba(0, 242, 254, 0.15); z-index: 2; }
        @media(max-width: 900px) { .pricing-card.destacado { transform: scale(1); } }
        .badge-pro { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: #00f2fe; color: #0b0f19; font-weight: bold; padding: 5px 15px; border-radius: 20px; font-size: 0.8em; text-transform: uppercase; letter-spacing: 1px; }
        .price { font-size: 3em; font-weight: bold; color: white; margin: 20px 0; }
        .price span { font-size: 0.4em; color: #94a3b8; font-weight: normal; }
        .price > span:first-child { font-size: 1em; color: white; font-weight: bold; }
        .pricing-meta { min-height: 40px; margin: -8px 0 22px; color: #94a3b8; font-size: 0.95em; line-height: 1.4; }
        .pricing-features { list-style: none; padding: 0; text-align: left; margin-bottom: 30px; color: #cbd5e1; }
        .pricing-features li { margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
        .pricing-features li::before { content: '✓'; color: #00f2fe; font-weight: bold; }

        /* FOOTER */
        .landing-footer { text-align: center; padding: 80px 20px; background: #070a11; background-image: radial-gradient(circle at bottom, rgba(0, 136, 204, 0.15), transparent 60%); color: #64748b; margin-top: 50px; border-top: 1px solid rgba(255,255,255,0.05); }
        .legal-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9rem; color: #94a3b8; line-height: 1.5; margin: 12px 0 18px; text-align: left; }
        .legal-consent input { margin-top: 4px; }
        .legal-consent a { color: #7dd3fc; text-decoration: underline; }
        .legal-consent--required span::after { content: " *"; color: #fda4af; }

        #app-container { display: none; width: 100%; height: 100%; }

        /* SIDEBAR COLLAPSABLE Y MENÚ MINI */
        .sidebar { width: 250px; background-color: #003366; color: white; padding: 20px; display: flex; flex-direction: column; overflow-y: auto; transition: width 0.3s ease, padding 0.3s ease; white-space: nowrap; flex-shrink: 0; overflow-x: hidden; }

        /* En móvil se oculta del todo, en PC se queda pequeña (80px) */
        @media (max-width: 768px) { .sidebar.collapsed { width: 0 !important; padding: 0 !important; border: none !important; } }
        @media (min-width: 769px) { 
            .sidebar.collapsed { width: 80px !important; padding: 20px 10px !important; align-items: center; } 
            .sidebar.collapsed .menu-text { display: none !important; }
            .sidebar.collapsed a { text-align: center; padding: 10px 0; width: 100%; display: flex; justify-content: center; font-size: 1.4em; }
            .sidebar.collapsed h2 span { display: none; }
            .sidebar.collapsed h2 { border-bottom: none; padding-bottom: 0; justify-content: center; margin-bottom: 20px; }
            .sidebar.collapsed .logo-sidebar { margin-right: 0; width: 40px; height: 40px; }
            .sidebar.collapsed #sidebar-athlete-info, .sidebar.collapsed #sidebar-coach-info { border-bottom: none; padding-bottom: 0; margin-bottom: 20px; }
            .sidebar.collapsed #sidebar-athlete-name, .sidebar.collapsed #sidebar-coach-name, .sidebar.collapsed #sidebar-athlete-group, .sidebar.collapsed #sidebar-coach-title { display: none; }
            .sidebar.collapsed #sidebar-athlete-avatar, .sidebar.collapsed #sidebar-coach-avatar { width: 50px; height: 50px; font-size: 1.5em; border-width: 2px; }
            .sidebar.collapsed .version-text, .sidebar.collapsed .btn-logout-text { display: none; }
        }

        .sidebar h2 { margin-top: 0; border-bottom: 1px solid #4d79ff; padding-bottom: 15px; display: flex; align-items: center; font-size: 1.6em; transition: all 0.3s; }
        .logo-sidebar { width: 35px; height: 35px; margin-right: 10px; transition: all 0.3s; flex-shrink: 0; object-fit: contain; }
        .sidebar a { display: flex; align-items: center; color: #cce0ff; text-decoration: none; margin-bottom: 15px; font-size: 1.1em; padding: 10px; border-radius: 5px; cursor: pointer; transition: all 0.2s; }
        .sidebar a:hover, .sidebar a.activo { background-color: #005ce6; color: white; font-weight: bold; }
        .menu-text { margin-left: 10px; }

        #sidebar-athlete-info { text-align: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #4d79ff; transition: all 0.3s; width: 100%; box-sizing: border-box; }
        #sidebar-athlete-avatar { width: 80px; height: 80px; border-radius: 50%; background: #cce0ff; margin: 0 auto 10px auto; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #003366; font-size: 2.2em; font-weight: bold; border: 3px solid #0088cc; transition: all 0.3s; flex-shrink: 0; }
        #sidebar-athlete-name { margin: 0 0 5px 0; font-size: 1.2em; color: white; }
        #sidebar-athlete-group { background: #ffaa00; color: #fff; padding: 3px 8px; border-radius: 12px; font-size: 0.8em; font-weight: bold; }

        /* COACH SIDEBAR INFO */
        #sidebar-coach-info { text-align: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #4d79ff; transition: all 0.3s; width: 100%; box-sizing: border-box; }
        #sidebar-coach-avatar { width: 80px; height: 80px; border-radius: 50%; background: #fff8e6; margin: 0 auto 10px auto; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #cc8800; font-size: 2.2em; font-weight: bold; border: 3px solid #ffaa00; transition: all 0.3s; flex-shrink: 0; }
        #sidebar-coach-name { margin: 0 0 5px 0; font-size: 1.2em; color: white; }
        #sidebar-coach-title { background: #ffaa00; color: #fff; padding: 3px 8px; border-radius: 12px; font-size: 0.8em; font-weight: bold; }

        /* MAIN CONTENT */
        .main-content { flex: 1; padding: 30px; overflow-y: auto; height: 100%; box-sizing: border-box; position: relative; }
        .vista { display: none; animation: fadeIn 0.3s ease-in; }
        .vista.activa { display: block; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

        .btn-menu-toggle { display: inline-flex; align-items: center; justify-content: center; background: #003366; color: white; border: none; padding: 6px 10px; border-radius: 5px; font-size: 0.95em; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.2); margin-right: 10px; transition: background 0.2s; }
        .btn-menu-toggle:hover { background: #005ce6; }
        .mobile-profile-nav { display: none; gap: 10px; margin: -2px 0 14px 0; position: sticky; top: 10px; z-index: 25; }
        .mobile-profile-nav .btn-menu-toggle { margin-right: 0; background: rgba(0, 51, 102, 0.94); }
        @media (max-width: 768px) {
            .mobile-profile-nav { display: flex; }
            #vista-perfil-atleta .header { align-items: flex-start; gap: 12px; flex-direction: column; }
            #vista-perfil-atleta .header h1 { width: 100%; }
        }

        .kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 15px; }
        .kpi-card { background: white; padding: 10px 15px; border-radius: 8px; border-left: 4px solid #0088cc; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
        .kpi-value { font-size: 1.8em; font-weight: bold; color: #003366; margin-bottom: 2px; line-height: 1; }
        .kpi-label { color: #666; font-size: 0.75em; text-transform: uppercase; font-weight: bold; }

        .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; border-bottom: 2px solid #0088cc; padding-bottom: 10px; }
        .header h1 { margin: 0; color: #333; display: flex; align-items: center; gap: 10px; font-size: 1.35em; }
        .flex-header-controls { display: flex; gap: 15px; align-items: center; }

        .btn-primary { padding: 10px 20px; background-color: #0088cc; color: white; border: none; border-radius: 5px; font-weight: bold; cursor: pointer; } .btn-primary:hover { background-color: #006699; }
        .btn-secondary { padding: 8px 15px; background-color: #e0e0e0; color: #333; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; } .btn-secondary:hover { background-color: #ccc; }
        .btn-icon { padding: 5px 8px; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 0.9em; display: flex; align-items: center; }
        .btn-icon.danger { background-color: #ff4d4d; } .btn-icon.danger:hover { background-color: #cc0000; }
        .btn-icon.edit { background-color: #ffaa00; } .btn-icon.edit:hover { background-color: #cc8800; }
        .btn-icon.copy { background-color: #28a745; } .btn-icon.copy:hover { background-color: #218838; }
        .btn-icon.pdf { background-color: #17a2b8; } .btn-icon.pdf:hover { background-color: #117a8b; }
        .btn-icon.feedback { background-color: #9933cc; } .btn-icon.feedback:hover { background-color: #7a29a3; }
        .acciones-card { display: flex; gap: 5px; }

        .card { background-color: white; padding: 20px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); margin-bottom: 20px; }
        .card h3 { margin-top: 0; color: #003366; border-bottom: 1px solid #eee; padding-bottom: 10px; }
        .tools-hero { display: flex; justify-content: space-between; gap: 20px; align-items: center; background: linear-gradient(135deg, #003366 0%, #005ea3 55%, #00a8cc 100%); color: white; border-radius: 16px; padding: 24px; margin-bottom: 20px; box-shadow: 0 14px 30px rgba(0, 51, 102, 0.18); }
        .tools-hero h3 { margin: 0 0 8px 0; color: white; border: none; padding: 0; }
        .tools-hero p { margin: 0; color: rgba(255,255,255,0.88); max-width: 620px; }
        .tools-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
        .tools-chip { display: inline-flex; align-items: center; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.16); font-size: 0.85em; font-weight: bold; }
        .tools-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; margin-bottom: 20px; }
        .tool-card { overflow: hidden; }
        .tool-display { font-size: clamp(2.3rem, 6vw, 4rem); font-weight: 800; letter-spacing: 0.06em; color: #003366; text-align: center; margin: 18px 0 20px 0; font-variant-numeric: tabular-nums; }
        .tool-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
        .tools-mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
        .tool-mini-card { background: #f8fbff; border: 1px solid #dbeafe; border-radius: 12px; padding: 14px; }
        .tool-mini-card__title { font-weight: bold; color: #005ea3; margin-bottom: 8px; }
        .tool-mini-card p { margin: 0 0 12px 0; color: #5b6779; font-size: 0.92em; line-height: 1.45; }
        .tool-result { font-weight: bold; color: #003366; font-size: 1.02em; margin-top: 8px; }
        .tool-result--info { background: #eef7ff; border: 1px solid #d6ebff; border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; }
        .tool-result--success { background: #ecfdf3; border: 1px solid #b7ebc7; border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; color: #166534; }
        .tool-result--warning { background: #fff7ed; border: 1px solid #f5d48d; border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; color: #9a3412; }
        .tool-subresult { margin-top: 4px; color: #64748b; font-size: 0.9em; }
        .tool-countdown-inputs { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
        .tool-countdown-inputs input { width: 78px; text-align: center; font-size: 1.05em; font-weight: bold; }
        .tool-laps { border-top: 1px solid #e5edf6; padding-top: 16px; }
        .tool-laps__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-weight: bold; color: #003366; }
        .tool-laps__list { display: grid; gap: 10px; max-height: 240px; overflow-y: auto; }
        .tool-laps__rowhead {
            display: grid;
            grid-template-columns: 36px minmax(0, 1fr) minmax(0, 1fr);
            gap: 10px;
            align-items: center;
            padding: 0 12px 4px;
            font-size: 0.72rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: #64748b;
        }
        .tool-lap-item {
            display: grid;
            grid-template-columns: 36px minmax(0, 1fr) minmax(0, 1fr);
            gap: 10px;
            align-items: center;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            padding: 10px 12px;
        }
        .tool-lap-item__n { color: #005ea3; font-size: 0.95em; }
        .tool-lap-item__tramo, .tool-lap-item__acum { font-variant-numeric: tabular-nums; font-weight: 600; color: #0f172a; text-align: right; }
        .tool-lap-item__tramo { color: #0c4a6e; }
        .tool-lap-item__acum { color: #334155; }
        .tool-empty { color: #888; text-align: center; margin: 0; padding: 18px 0; }
        .tools-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
        .pace-targets { display: flex; flex-wrap: wrap; gap: 10px; }
        .pace-target-option { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: #f8fbff; border: 1px solid #dbeafe; font-size: 0.92em; }
        .pace-results { display: grid; gap: 10px; }
        .pace-result-item { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 12px; background: linear-gradient(180deg, #f8fcff 0%, #eef7ff 100%); border: 1px solid rgba(0, 94, 163, 0.12); }
        .pace-result-item strong, .pace-result-item span { font-variant-numeric: tabular-nums; }
        .tool-intro { color: #5b6779; margin-top: 0; }
        .test-analysis-layout { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; align-items: start; }
        .test-analysis-form, .test-analysis-results { min-width: 0; }
        .test-analysis-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
        .test-analysis-table-wrapper { overflow-x: auto; border: 1px solid #dbeafe; border-radius: 12px; background: #f8fbff; margin-bottom: 14px; }
        .test-analysis-table { width: 100%; border-collapse: collapse; min-width: 860px; }
        .test-analysis-table th, .test-analysis-table td { padding: 10px 12px; border-bottom: 1px solid #e2e8f0; text-align: left; vertical-align: middle; }
        .test-analysis-table th { background: #eef7ff; color: #003366; font-size: 0.82em; text-transform: uppercase; letter-spacing: 0.04em; }
        .test-analysis-table td { color: #334155; }
        .test-analysis-table input, .test-analysis-table select { width: 100%; min-width: 82px; box-sizing: border-box; }
        .test-analysis-row-label { display: flex; flex-direction: column; gap: 4px; }
        .test-analysis-row-label strong { color: #003366; }
        .test-analysis-row-label small { color: #64748b; }
        .test-analysis-sample { display: flex; flex-direction: column; gap: 4px; }
        .test-analysis-sample strong { color: #0f172a; font-variant-numeric: tabular-nums; }
        .test-analysis-sample span { color: #64748b; font-size: 0.88em; line-height: 1.35; }
        .chart-container--tool { height: 280px; min-height: 260px; margin-bottom: 0; background: #f8fbff; border: 1px solid #dbeafe; border-radius: 12px; padding: 12px; box-sizing: border-box; }
        .test-metrics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
        .test-metric-card { background: #f8fbff; border: 1px solid #dbeafe; border-radius: 12px; padding: 14px; }
        .test-metric-card__label { color: #64748b; font-size: 0.82em; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
        .test-metric-card__value { color: #003366; font-size: 1.25em; font-weight: 800; font-variant-numeric: tabular-nums; }
        .test-metric-card__note { color: #475569; font-size: 0.9em; margin-top: 4px; }
        .test-analysis-breakdown { display: grid; gap: 10px; margin-bottom: 14px; }
        .test-comparison-card { background: linear-gradient(180deg, #fffdf6 0%, #fff7e6 100%); border: 1px solid #f5d48d; border-radius: 12px; padding: 14px; }
        .test-comparison-card h4 { margin: 0 0 8px 0; color: #8a5a00; }
        .test-comparison-card p { margin: 0; color: #6b7280; line-height: 1.5; }
        .test-insights-grid { display: grid; gap: 12px; }
        .test-insight-card { border-radius: 12px; padding: 14px; border: 1px solid #e2e8f0; background: #f8fafc; }
        .test-insight-card h4 { margin: 0 0 8px 0; color: #003366; }
        .test-insight-card p { margin: 0; color: #475569; line-height: 1.5; }
        .saved-test-item { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px; }
        .saved-test-item strong { color: #003366; }
        .saved-test-item small { color: #64748b; display: block; margin-top: 4px; }
        .saved-test-actions { display: flex; gap: 8px; flex-wrap: wrap; }
        .lactate-tool-layout { display: grid; grid-template-columns: 1.2fr 0.95fr; gap: 20px; align-items: start; }
        .lactate-table-wrapper { overflow-x: auto; border: 1px solid #dbeafe; border-radius: 12px; background: #f8fbff; }
        .lactate-table { width: 100%; border-collapse: collapse; min-width: 720px; }
        .lactate-table th, .lactate-table td { padding: 10px 12px; border-bottom: 1px solid #e2e8f0; text-align: left; }
        .lactate-table th { background: #eef7ff; color: #003366; font-size: 0.82em; text-transform: uppercase; letter-spacing: 0.04em; }
        .lactate-table td { color: #334155; vertical-align: middle; }
        .lactate-table td strong, .lactate-table td span { font-variant-numeric: tabular-nums; }
        .lactate-table input { width: 100%; min-width: 86px; box-sizing: border-box; }
        .lactate-stage-meta { display: flex; flex-direction: column; gap: 3px; }
        .lactate-stage-meta small { color: #64748b; }
        .lactate-prescription-card { border-radius: 12px; padding: 14px; border: 1px solid #dbeafe; background: linear-gradient(180deg, #f8fcff 0%, #eef7ff 100%); }
        .lactate-prescription-card h4 { margin: 0 0 8px 0; color: #003366; }
        .lactate-prescription-card p { margin: 0; color: #475569; line-height: 1.5; }
        .lactate-prescription-list { display: grid; gap: 10px; margin-top: 12px; }
        .lactate-prescription-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-radius: 10px; background: rgba(255,255,255,0.75); border: 1px solid rgba(0, 94, 163, 0.12); padding: 10px 12px; }
        .lactate-prescription-item strong, .lactate-prescription-item span { font-variant-numeric: tabular-nums; }
        .proposal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
        .proposal-card { background: #f8fbff; border: 1px solid #dbeafe; border-radius: 14px; padding: 16px; }
        .proposal-card h4 { margin: 0 0 10px 0; color: #003366; }
        .proposal-card p { margin: 0 0 10px 0; color: #475569; line-height: 1.5; font-size: 0.95em; }
        .proposal-card ul { margin: 0; padding-left: 18px; color: #334155; }
        .proposal-card li { margin-bottom: 6px; }
        @media (max-width: 1100px) { .tools-grid, .proposal-grid, .tools-mini-grid, .test-analysis-layout, .lactate-tool-layout, .test-analysis-charts { grid-template-columns: 1fr; } .tools-hero { flex-direction: column; align-items: flex-start; } .tools-hero__chips { justify-content: flex-start; } }
        @media (max-width: 760px) { .tools-form-grid { grid-template-columns: 1fr; } .tool-display { letter-spacing: 0.03em; } }

        /* LISTA ENTRENAMIENTOS */
        .entrenamiento-item { border-left: 4px solid #0088cc; padding-left: 15px; margin-bottom: 15px; background: #fafafa; padding-top: 10px; padding-bottom: 10px; border-radius: 0 5px 5px 0; }
        .entrenamiento-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
        .volumen-badge { background-color: #e6ffe6; color: #006600; padding: 2px 8px; border-radius: 12px; font-size: 0.85em; font-weight: bold; margin-left: 10px; border: 1px solid #b3ffb3; }
        .carga-badge { background-color: #f3e6ff; color: #6600cc; padding: 2px 8px; border-radius: 12px; font-size: 0.85em; font-weight: bold; margin-left: 5px; border: 1px solid #d9b3ff; }
        .serie-item { color: #555; font-size: 0.95em; margin: 5px 0 0 0; white-space: pre-wrap; }
        .zona-badge { background-color: #e6f2ff; color: #005ce6; padding: 2px 6px; border-radius: 4px; font-size: 0.8em; font-weight: bold; }
        .tipo-badge { background-color: #fff0f5; color: #99004d; padding: 2px 6px; border-radius: 4px; font-size: 0.8em; font-weight: bold; }
        .obj-badge { background-color: #fff8e6; color: #cc8800; padding: 2px 6px; border-radius: 4px; font-size: 0.8em; font-weight: bold; border: 1px solid #ffe6b3; margin-left: 5px; }
        .header-agrupacion { background-color: #e6f2ff; color: #003366; padding: 10px 15px; border-radius: 5px; font-weight: bold; margin: 25px 0 10px 0; border-left: 4px solid #005ce6; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
        .header-agrupacion:hover { background-color: #cce0ff; }
        .grupo-wrapper { display: block; }

        /* CALENDARIO */
        .calendario-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; background: white; padding: 6px 15px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
        .select-rango { padding: 6px 12px; border-radius: 4px; border: 1px solid #ccc; font-weight: bold; color: #333; background-color: white; font-size: 0.85em; cursor: pointer; outline: none; }
        .btn-vista { padding: 6px 12px; background-color: #e0e0e0; color: #333; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 0.85em; } .btn-vista.activa { background-color: #0088cc; color: white; }
        .select-fecha-rapida { padding: 3px 6px; border-radius: 4px; border: 1px solid #ccc; font-size: 0.8em; color: #003366; cursor: pointer; background: white; }

        .calendario-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
        .dia-columna { background: #fdfdfd; border: 1px solid #e0e0e0; border-radius: 6px; display: flex; flex-direction: column; overflow: hidden; }
        .dia-columna.drag-over { background-color: #e6f2ff !important; border: 2px dashed #0088cc !important; }
        .dia-header { background: #f0f4f8; color: #003366; text-align: center; padding: 6px; font-size: 0.8em; font-weight: bold; border-bottom: 1px solid #e0e0e0; }
        .dia-header.hoy { background: #0088cc; color: white; } .dia-header.mes-otro { opacity: 0.5; }
        .dia-body { padding: 6px; flex: 1; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }

        .ent-mini { position: relative; background: white; border-left: 4px solid #0088cc; padding: 8px; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); font-size: 0.85em; cursor: grab; transition: transform 0.1s; }
        .ent-mini.is-missed { opacity: 0.5; filter: grayscale(100%); border-left-color: #cc0000; }
        .ent-mini:active { cursor: grabbing; opacity: 0.8; } .ent-mini:hover { transform: scale(1.02); }
        .ent-mini.is-indiv { border-left-color: #e67300; }
        .ent-mini-titulo { font-weight: bold; color: #333; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 20px; }
        .ent-mini-datos { color: #666; font-size: 0.85em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .btn-copy-mini { position: absolute; top: 5px; right: 5px; display: none; background: #f4f7f6; border: 1px solid #ccc; border-radius: 3px; cursor: pointer; font-size: 0.9em; padding: 2px 4px; z-index: 2; }
        .btn-copy-mini:hover { background: #e0e0e0; } .ent-mini:hover .btn-copy-mini { display: block; }
        .btn-crear-dia { width: 100%; padding: 6px; background: transparent; color: #0088cc; border: 1px dashed #0088cc; border-radius: 4px; cursor: pointer; margin-top: auto; font-size: 0.85em; font-weight: bold; }
        .btn-pegar-dia { width: 100%; padding: 6px; background: #fff8e6; color: #cc8800; border: 1px dashed #ffaa00; border-radius: 4px; cursor: pointer; margin-top: 5px; font-size: 0.85em; font-weight: bold; }
        .portapapeles-activo-bar { background: #ffaa00; color: white; padding: 8px 15px; border-radius: 5px; font-size: 0.9em; display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; font-weight: bold; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }

        /* STATS PANEL */
        .stats-panel { background: #003366; color: white; padding: 8px 15px; border-radius: 6px; margin-bottom: 12px; display: flex; gap: 15px; align-items: stretch; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
        .stats-box { flex: 1; display: flex; flex-direction: column; justify-content: center; }
        .stats-title { font-size: 0.7em; color: #cce0ff; text-transform: uppercase; font-weight: bold; margin-bottom: 3px; }
        .stats-bar-container { background: rgba(255,255,255,0.2); height: 6px; border-radius: 3px; overflow: hidden; display: flex; margin-bottom: 3px; }
        .stats-legend { font-size: 0.7em; color: #cce0ff; display: flex; flex-wrap: wrap; gap: 6px; }
        .legend-item { display: flex; align-items: center; gap: 3px; } .legend-color { width: 8px; height: 8px; border-radius: 50%; }
        .acwr-badge { display: inline-block; padding: 3px 8px; border-radius: 12px; font-weight: bold; font-size: 0.9em; margin-top: 4px; }
        .acwr-low { background-color: #81D4FA; color: #01579B; } .acwr-optimal { background-color: #4CAF50; color: white; } .acwr-caution { background-color: #FF9800; color: white; } .acwr-danger { background-color: #F44336; color: white; }

        /* ATP GRÁFICO HORIZONTAL */
        .atp-grafico-wrapper { width: 100%; overflow-x: auto; background: white; border-radius: 8px; border: 1px solid #e0e0e0; margin-bottom: 25px; }
        .atp-grafico-table { border-collapse: collapse; min-width: 100%; table-layout: fixed; text-align: center; }
        .atp-grafico-table th, .atp-grafico-table td { border: 1px solid #eee; padding: 5px; min-width: 45px; }
        .atp-grafico-table td { padding-bottom: 15px; } 
        .atp-grafico-header { background: #003366 !important; color: white; position: sticky; left: 0; z-index: 5; text-align: right !important; padding-right: 15px !important; width: 130px; font-size: 0.9em; font-weight: bold; }
        .grafico-bar-container { height: 60px; width: 100%; display: flex; align-items: flex-end; justify-content: space-evenly; position: relative; border-bottom: 1px solid #ccc; }
        .grafico-bar-obj { width: 40%; border-radius: 2px 2px 0 0; background: #cce0ff; border: 1px solid #005ce6; border-bottom: none; }
        .grafico-bar-real { width: 40%; border-radius: 2px 2px 0 0; background: #0088cc; }
        .grafico-bar-text { position: absolute; font-size: 0.7em; font-weight: bold; width: 100%; text-align: center; bottom: -16px; color: #555; white-space: nowrap; }

        /* TABLA ATP EDITABLE */
        .tabla-atp-container { width: 100%; overflow-x: auto; background: white; border-radius: 8px; border: 1px solid #e0e0e0; }
        .tabla-atp { width: 100%; border-collapse: collapse; min-width: 1450px; text-align: center; font-size: 0.85em; }
        .tabla-atp th { background-color: #003366; color: white; padding: 10px; border: 1px solid #005ce6; }
        .tabla-atp td { padding: 4px; border: 1px solid #e0e0e0; vertical-align: middle; }
        .tabla-atp tfoot th { background-color: #002244; color: white; padding: 10px; border: 1px solid #0044b3; font-size: 1.1em; }
        tr.drag-over-row td { border-top: 3px dashed #0088cc !important; background-color: #e6f2ff !important; }
        .atp-select, .atp-input { width: 100%; padding: 6px; border: none; background: transparent; font-family: inherit; font-size: 1em; text-align: center; outline: none; box-sizing: border-box; font-weight: bold; cursor: pointer; }
        .atp-select:hover, .atp-input:hover { background: rgba(255,255,255,0.3); border-radius: 4px; }
        .atp-select:disabled, .atp-input:disabled { cursor: not-allowed; color: #333; opacity: 1; -webkit-appearance: none; }

        .zona-toggle { display: inline-block; width: 20px; height: 20px; line-height: 20px; text-align: center; border-radius: 4px; font-size: 0.7em; margin: 1px; cursor: pointer; background: #eee; color: #aaa; font-weight: bold; border: 1px solid #ddd; }
        .zona-toggle.activa-1 { background: var(--z1); color: #003366; border-color: #4FC3F7; } .zona-toggle.activa-2 { background: var(--z2); color: #003366; border-color: #29B6F6; } .zona-toggle.activa-3 { background: var(--z3); color: #003366; border-color: #039BE5; } .zona-toggle.activa-4 { background: var(--z4); color: white; border-color: #0277BD; } .zona-toggle.activa-5 { background: var(--z5); color: white; border-color: #01579B; } .zona-toggle.activa-6 { background: var(--z6); color: #003366; border-color: #F9A825; } .zona-toggle.activa-7 { background: var(--z7); color: white; border-color: #E65100; } .zona-toggle.activa-8 { background: var(--z8); color: white; border-color: #BF360C; }
        .meso-prep { background-color: #e6f2ff; color: #003366; } .meso-esp { background-color: #fff3e6; color: #cc7a00; } .meso-comp { background-color: #ffe6e6; color: #cc0000; } .meso-trans { background-color: #e6ffe6; color: #006600; } 
        .micro-carga { background-color: #f9f9f9; color: #333; } .micro-choque { background-color: #fff0f5; color: #99004d; } .micro-recup { background-color: #f0fff0; color: #006600; } .micro-taper { background-color: #fffde6; color: #b38f00; } .micro-comp { background-color: #ffcccc; color: #cc0000; }

	    /* BARRA DE AVATARES (FILTROS) */
        .avatar-filter-bar { display: flex; gap: 15px; overflow-x: auto; padding: 15px 5px 10px 5px; margin-bottom: 20px; border-bottom: 1px solid #cce0ff; scrollbar-width: thin; }
        .avatar-filter-bar::-webkit-scrollbar { height: 6px; }
        .avatar-filter-bar::-webkit-scrollbar-thumb { background-color: #0088cc; border-radius: 4px; }
        .avatar-filter-item { display: flex; flex-direction: column; align-items: center; cursor: pointer; opacity: 0.5; transition: all 0.2s; min-width: 65px; }
        .avatar-filter-item:hover { opacity: 0.8; transform: translateY(-3px); }
        .avatar-filter-item.activo { opacity: 1; font-weight: bold; transform: scale(1.08); }

        /* Círculos más grandes para los avatares */
        .avatar-filter-item .avatar-circle { 
            width: 52px; 
            height: 52px; 
            border-radius: 50%; 
            background: #ccc; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            font-size: 1.3em; 
            color: white; 
            border: 3px solid transparent; 
            overflow: hidden; 
            box-shadow: 0 3px 6px rgba(0,0,0,0.15); 
        }
        .avatar-filter-item.activo .avatar-circle { border-color: #0088cc; box-shadow: 0 0 12px rgba(0, 136, 204, 0.6); }
        .avatar-filter-item span { font-size: 0.8em; margin-top: 6px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 75px; color: #333; }

        /* MODALES Y GRAFICOS */
        .chart-container { position: relative; height: 360px; min-height: 320px; width: 100%; margin-bottom: 20px; }
        .modal { display: none; position: fixed; z-index: 10; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); overflow-y: auto; }
        .modal-content { background-color: #fefefe; margin: 3% auto; padding: 25px; border-radius: 10px; width: 580px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
        .form-group { margin-bottom: 10px; } .form-group label { display: block; margin-bottom: 3px; font-weight: bold; color: #333; font-size: 0.85em; }
        .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-family: inherit; }
        .modal-actions { text-align: right; margin-top: 20px; padding-top: 15px; border-top: 1px solid #eee; }
        .constructor-caja { background-color: #f0f8ff; border: 1px dashed #0088cc; padding: 15px; border-radius: 8px; margin-bottom: 15px; }
        .fila-serie { display: flex; gap: 5px; align-items: center; margin-bottom: 10px; } .fila-serie input, .fila-serie select { padding: 6px; font-size: 0.9em; box-sizing: border-box; }
        .lista-temporal { padding-left: 0; margin-top: 15px; margin-bottom: 0; font-size: 0.9em; color: #003366; list-style-type: none; }
        .lista-temporal li { display: flex; justify-content: space-between; margin-bottom: 6px; background: white; padding: 6px 10px; border-radius: 4px; border: 1px solid #e0e0e0; align-items: center; }
        .btn-borrar-item { background: #ff4d4d; color: white; border: none; border-radius: 3px; cursor: pointer; padding: 2px 6px; font-size: 0.8em; }

        .device-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 25px; }
        .device-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15); border-radius: 18px; padding: 20px; box-shadow: 0 12px 25px rgba(0,0,0,0.35); display: flex; flex-direction: column; min-height: 200px; transition: transform 0.3s ease, border-color 0.3s ease; }
        .device-card:hover { transform: translateY(-6px); border-color: rgba(0,242,254,0.55); }
        .device-icon { font-size: 2.5rem; line-height: 1; margin-bottom: 10px; }
        .device-card h3 { margin: 0; font-size: 1.2em; color: #e4ecff; }
        .device-card p { flex: 1; margin: 8px 0 15px 0; color: #adb8d8; font-size: 0.95em; }
        .device-card small { color: #7f8ebb; display: block; margin-bottom: 5px; }
        .device-card .btn-primary, .device-card .btn-secondary { width: fit-content; align-self: flex-start; }
        .device-cta { display: flex; flex-wrap: wrap; gap: 15px; justify-content: flex-start; margin-top: 35px; }
        .device-cta span { font-size: 0.95em; color: #9ec4ff; display: inline-flex; align-items: center; gap: 6px; }

        .modal-novedades {
            width: min(680px, calc(100% - 30px));
            border: 1px solid rgba(0, 136, 204, 0.18);
            box-shadow: 0 20px 60px rgba(15, 23, 42, 0.22);
        }
        .modal-novedades__badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 12px;
            padding: 6px 12px;
            border-radius: 999px;
            background: rgba(0, 136, 204, 0.12);
            color: #005ea3;
            font-size: 0.78em;
            font-weight: 800;
            letter-spacing: 0.08em;
        }
        .lista-novedades-app {
            display: grid;
            gap: 12px;
            margin-top: 20px;
        }
        .novedad-app-item {
            padding: 14px 16px;
            border-radius: 12px;
            background: linear-gradient(180deg, #f8fcff 0%, #eef7ff 100%);
            border: 1px solid rgba(0, 94, 163, 0.12);
        }
        .novedad-app-item h4 {
            margin: 0 0 6px 0;
            color: #003366;
            font-size: 1em;
        }
        .novedad-app-item p {
            margin: 0;
            color: #4b5563;
            line-height: 1.5;
            font-size: 0.95em;
        }

        @media (prefers-color-scheme: light) {
            .device-card { background: rgba(255,255,255,0.92); border-color: rgba(8,25,53,0.12); box-shadow: 0 10px 30px rgba(15,23,42,0.15); }
            .device-card h3 { color: #0f1b2c; }
            .device-card small, .device-card p { color: #27415d; }
            .device-card .btn-primary { background: linear-gradient(90deg, #005ea3, #0088ff); color: white; }
            .device-card .btn-secondary { border-color: rgba(0,92,230,0.4); color: #005ea3; }
        }

        .rpe-container { text-align: center; margin: 15px 0; background: #fafafa; padding: 15px; border-radius: 8px; border: 1px solid #eee; }
        #rpeEmoji { font-size: 3em; margin-bottom: 10px; display: block; }
        input[type=range] { -webkit-appearance: none; width: 100%; background: transparent; }
        input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 20px; width: 20px; border-radius: 50%; background: #0088cc; cursor: pointer; margin-top: -8px; }
        input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 6px; cursor: pointer; background: #ddd; border-radius: 3px; }

        /* TARJETAS NADADORES Y GRUPOS */
        .nadador-card{display:flex;gap:20px;border:1px solid #e0e0e0;padding:15px;border-radius:8px;margin-bottom:15px;align-items:flex-start}
        .nadador-avatar{width:60px;height:60px;background:#003366;color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:1.5em;flex-shrink:0; overflow:hidden;}
        .nadador-info{flex:1}.nadador-info h4{margin:0 0 5px 0;color:#003366;font-size:1.2em;display:flex;justify-content:space-between}
        .nadador-stats{font-size:0.85em;color:#666;margin-bottom:10px;display:flex;gap:15px;flex-wrap:wrap; align-items:center;}.ritmo-box{background:#f0f8ff;padding:8px;border-radius:5px;font-size:0.85em;border:1px dashed #0088cc;display:inline-block;margin-right:10px;margin-bottom:5px}.pb-list{font-size:0.85em;margin:5px 0 0 0;padding-left:15px;color:#444}

        .grupo-card{border:1px solid #e0e0e0;padding:15px;border-radius:8px;margin-bottom:15px;background:#fafafa; display:flex; flex-direction: column; gap:10px;}
        .grupo-avatar {width:60px;height:60px;background:#cce0ff;color:#003366;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:2em;flex-shrink:0; overflow:hidden; border:2px solid #0088cc;}
        .grupo-info {flex:1; padding-left:15px;}
        .grupo-info h4{margin:0 0 5px 0;color:#003366;font-size:1.2em}.grupo-stats{background:#e6f2ff;color:#005ce6;padding:5px 10px;border-radius:15px;font-weight:bold;font-size:0.85em}

        .foto-preview-box { width: 80px; height: 80px; border-radius: 8px; border: 1px dashed #ccc; display: flex; justify-content: center; align-items: center; background: #f9f9f9; overflow: hidden; margin-top: 5px; }
        .foto-preview-box img { width: 100%; height: 100%; object-fit: cover; }

        #archivoBackup { display: none; }
        .label-archivo { display: inline-block; padding: 10px 20px; background-color: #ffaa00; color: white; border-radius: 5px; font-weight: bold; cursor: pointer; }
        .codigo-acceso-badge { background-color: #fff8e6; color: #cc8800; padding: 4px 8px; border-radius: 4px; font-family: monospace; font-size: 1.1em; font-weight: bold; border: 1px dashed #ffaa00; }
        .nacion-badge { background-color: #e6f2ff; color: #005ce6; padding: 3px 8px; border-radius: 6px; font-size: 1.2em; border: 1px solid #cce0ff; display: inline-flex; align-items: center; }
	.kpi-card.enlace { cursor: pointer; transition: all 0.2s ease; }
        .kpi-card.enlace:hover { transform: translateY(-4px); box-shadow: 0 8px 15px rgba(0,0,0,0.1); border-left-width: 8px; }
	/* CONTEXT MENU (Clic Derecho) */
        .custom-context-menu { display: none; position: fixed; z-index: 10000; background: white; border: 1px solid #ccc; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); padding: 5px 0; min-width: 220px; margin: 0; }
        .custom-context-menu li { list-style: none; padding: 10px 20px; cursor: pointer; font-size: 0.9em; color: #333; transition: background 0.2s; display: flex; align-items: center; gap: 8px; }
        .custom-context-menu li:hover { background-color: #f0f8ff; color: #005ce6; font-weight: bold; }
        .custom-context-menu li.disabled { color: #ccc; cursor: not-allowed; }
        .custom-context-menu li.disabled:hover { background-color: transparent; color: #ccc; font-weight: normal; }
        .custom-context-menu li.danger:hover { background-color: #ffe6e6; color: #cc0000; }
        .custom-context-menu hr { border: 0; border-top: 1px solid #eee; margin: 5px 0; }
	/* --- APEXSWIM: DARK MODE INTERIOR --- */
        body.dark-theme { background-color: #0b0f19; color: #cbd5e1; }
        body.dark-theme .sidebar { background-color: #070a11; border-right: 1px solid rgba(255,255,255,0.05); }
        body.dark-theme .sidebar h2 { border-bottom-color: rgba(255,255,255,0.1); }
        body.dark-theme .sidebar a { color: #94a3b8; }
        body.dark-theme .sidebar a:hover, body.dark-theme .sidebar a.activo { background-color: rgba(0, 242, 254, 0.1); color: #00f2fe; border-left: 3px solid #00f2fe; font-weight: bold; }
        body.dark-theme #sidebar-athlete-info, body.dark-theme #sidebar-coach-info { border-bottom-color: rgba(255,255,255,0.1); }
        body.dark-theme #sidebar-athlete-name, body.dark-theme #sidebar-coach-name { color: #f8fafc !important; }

        body.dark-theme .header h1 { color: #f8fafc; }
        body.dark-theme .card { background: rgba(15, 23, 42, 0.6) !important; border: 1px solid rgba(255,255,255,0.05) !important; color: #cbd5e1; box-shadow: 0 4px 15px rgba(0,0,0,0.3); backdrop-filter: blur(10px); }
        body.dark-theme .card h3 { color: #00f2fe !important; border-bottom-color: rgba(255,255,255,0.1) !important; }
        body.dark-theme .tools-hero { background: linear-gradient(135deg, #020617 0%, #0f172a 50%, #0c4a6e 100%); box-shadow: 0 16px 36px rgba(2, 6, 23, 0.55); }
        body.dark-theme .tool-display { color: #f8fafc; }
        body.dark-theme .tool-mini-card, body.dark-theme .pace-target-option, body.dark-theme .pace-result-item, body.dark-theme .proposal-card { background: rgba(15, 23, 42, 0.75); border-color: rgba(148, 163, 184, 0.16); }
        body.dark-theme .tool-mini-card__title, body.dark-theme .proposal-card h4 { color: #67e8f9; }
        body.dark-theme .tool-mini-card p, body.dark-theme .tool-subresult, body.dark-theme .tool-intro, body.dark-theme .proposal-card p, body.dark-theme .proposal-card ul { color: #cbd5e1; }
        body.dark-theme .tool-result { color: #f8fafc; }
        body.dark-theme .tool-result--info { background: rgba(8, 47, 73, 0.45); border-color: rgba(103, 232, 249, 0.18); }
        body.dark-theme .tool-result--success { background: rgba(20, 83, 45, 0.38); border-color: rgba(134, 239, 172, 0.24); color: #dcfce7; }
        body.dark-theme .tool-result--warning { background: rgba(124, 45, 18, 0.35); border-color: rgba(253, 186, 116, 0.25); color: #ffedd5; }
        body.dark-theme .tool-laps { border-top-color: rgba(255,255,255,0.08); }
        body.dark-theme .tool-laps__header { color: #67e8f9; }
        body.dark-theme .tool-laps__rowhead { color: #94a3b8; }
        body.dark-theme .tool-lap-item { background: rgba(15, 23, 42, 0.78); border-color: rgba(148, 163, 184, 0.14); }
        body.dark-theme .tool-lap-item__n { color: #38bdf8; }
        body.dark-theme .tool-lap-item__tramo { color: #7dd3fc; }
        body.dark-theme .tool-lap-item__acum { color: #cbd5e1; }
        body.dark-theme .test-metric-card, body.dark-theme .test-insight-card { background: rgba(15, 23, 42, 0.75); border-color: rgba(148, 163, 184, 0.16); }
        body.dark-theme .chart-container--tool { background: rgba(15, 23, 42, 0.72); border-color: rgba(148, 163, 184, 0.16); }
        body.dark-theme .lactate-table-wrapper { background: rgba(15, 23, 42, 0.55); border-color: rgba(148, 163, 184, 0.22); }
        body.dark-theme .lactate-table th { background: rgba(15, 23, 42, 0.85); color: #e2e8f0; }
        body.dark-theme .lactate-table td { color: #cbd5e1; border-bottom-color: rgba(148, 163, 184, 0.18); }
        body.dark-theme .lactate-stage-meta small { color: #94a3b8; }
        body.dark-theme .lactate-prescription-card { background: linear-gradient(180deg, rgba(15, 23, 42, 0.85) 0%, rgba(15, 23, 42, 0.65) 100%); border-color: rgba(59, 130, 246, 0.24); }
        body.dark-theme .lactate-prescription-card p { color: #cbd5e1; }
        body.dark-theme .lactate-prescription-item { background: rgba(15, 23, 42, 0.7); border-color: rgba(148, 163, 184, 0.18); }
        body.dark-theme .test-metric-card__label { color: #94a3b8; }
        body.dark-theme .test-metric-card__value, body.dark-theme .test-insight-card h4 { color: #f8fafc; }
        body.dark-theme .test-metric-card__note, body.dark-theme .test-insight-card p { color: #cbd5e1; }
        body.dark-theme .saved-test-item { background: rgba(15, 23, 42, 0.78); border-color: rgba(148, 163, 184, 0.14); }
        body.dark-theme .saved-test-item strong { color: #f8fafc; }
        body.dark-theme .saved-test-item small { color: #94a3b8; }

        body.dark-theme .kpi-card { background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(255,255,255,0.05); border-left: 5px solid #00f2fe; box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
        body.dark-theme .kpi-value { color: #f8fafc; }
        body.dark-theme .kpi-label { color: #94a3b8; }
        body.dark-theme #kpiHoy { color: #ffaa00 !important; }

        body.dark-theme .btn-menu-toggle { background: #1e293b; border: 1px solid rgba(255,255,255,0.1); }
        body.dark-theme .btn-menu-toggle:hover { background: #334155; }
        body.dark-theme .mobile-profile-nav .btn-menu-toggle { background: rgba(30, 41, 59, 0.96); }
        body.dark-theme .btn-primary { background: linear-gradient(90deg, #0088cc, #00f2fe) !important; color: #0b0f19 !important; box-shadow: 0 2px 10px rgba(0,242,254,0.3); border:none; }
        body.dark-theme .btn-primary:hover { background: linear-gradient(90deg, #006699, #00d2ff) !important; transform: translateY(-1px); }
        body.dark-theme .btn-secondary { background: #1e293b !important; color: #cbd5e1 !important; border: 1px solid rgba(255,255,255,0.1) !important; }
        body.dark-theme .btn-secondary:hover { background: #334155 !important; color: white !important; }

        body.dark-theme .entrenamiento-item { background: rgba(30, 41, 59, 0.5); border-left-color: #00f2fe; color: #cbd5e1; }
        body.dark-theme .ent-mini { background: #1e293b; border-left-color: #00f2fe; color: #cbd5e1; border: 1px solid rgba(255,255,255,0.05); }
        body.dark-theme .ent-mini-titulo { color: #f8fafc !important; }
        body.dark-theme .ent-mini-datos { color: #94a3b8; }
        body.dark-theme .dia-columna { background: rgba(15, 23, 42, 0.4); border-color: rgba(255,255,255,0.05); }
        body.dark-theme .dia-header { background: #0f172a; color: #94a3b8; border-bottom-color: rgba(255,255,255,0.05); }
        body.dark-theme .dia-header.hoy { background: rgba(0, 242, 254, 0.1); color: #00f2fe; border: 1px solid #00f2fe; }
        body.dark-theme .calendario-nav { background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(255,255,255,0.05); }
        body.dark-theme #textoRangoSemana { color: #00f2fe !important; }
        body.dark-theme .btn-vista { background: #1e293b; color: #cbd5e1; border: 1px solid rgba(255,255,255,0.1); }
        body.dark-theme .btn-vista.activa { background: #0088cc; color: white; border-color: #0088cc; }

        body.dark-theme .select-rango, body.dark-theme .select-fecha-rapida, body.dark-theme .login-input, body.dark-theme select, body.dark-theme input[type="text"], body.dark-theme input[type="number"], body.dark-theme input[type="date"], body.dark-theme input[type="time"], body.dark-theme textarea { 
            background: #0f172a !important; color: #f8fafc !important; border: 1px solid rgba(255,255,255,0.2) !important; 
        }

        body.dark-theme .modal-content { background: #0f172a; border: 1px solid rgba(255,255,255,0.1); color: #cbd5e1; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
        body.dark-theme .modal-content h2, body.dark-theme .modal-content h3 { color: #00f2fe !important; border-bottom-color: rgba(255,255,255,0.1) !important; }
        body.dark-theme .form-group label { color: #94a3b8; }
        body.dark-theme .constructor-caja { background: rgba(30, 41, 59, 0.5) !important; border-color: rgba(255,255,255,0.1) !important; }
        body.dark-theme .constructor-caja label { color: #00f2fe !important; }
        body.dark-theme .lista-temporal li { background: #1e293b !important; border-color: rgba(255,255,255,0.05) !important; color: #cbd5e1 !important; }
        body.dark-theme .modal-actions { border-top-color: rgba(255,255,255,0.1); }
        body.dark-theme .modal-novedades { border-color: rgba(0, 242, 254, 0.14); box-shadow: 0 24px 60px rgba(2, 6, 23, 0.65); }
        body.dark-theme .modal-novedades__badge { background: rgba(0, 242, 254, 0.12); color: #67e8f9; }
        body.dark-theme .novedad-app-item { background: linear-gradient(180deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.95) 100%); border-color: rgba(148, 163, 184, 0.18); }
        body.dark-theme .novedad-app-item h4 { color: #f8fafc; }
        body.dark-theme .novedad-app-item p { color: #cbd5e1; }

        body.dark-theme .tabla-atp-container { background: transparent; border-color: rgba(255,255,255,0.05); }
        body.dark-theme .tabla-atp th { background: #070a11; border-color: rgba(255,255,255,0.1); color: #94a3b8; }
        body.dark-theme .tabla-atp td { border-color: rgba(255,255,255,0.05); }
        body.dark-theme .tabla-atp tfoot th { background: #070a11; border-color: rgba(255,255,255,0.1); }
        body.dark-theme .atp-grafico-wrapper { background: transparent; border-color: rgba(255,255,255,0.05); }
        body.dark-theme .atp-grafico-table th, body.dark-theme .atp-grafico-table td { border-color: rgba(255,255,255,0.05); }
        body.dark-theme .atp-grafico-header { background: #0f172a !important; color: #94a3b8; }
        body.dark-theme .grafico-bar-text { color: #cbd5e1; }

        body.dark-theme .avatar-filter-bar { border-bottom-color: rgba(255,255,255,0.05); }
        body.dark-theme .avatar-filter-item span { color: #94a3b8; }
        body.dark-theme .avatar-filter-item.activo span { color: #00f2fe; }

        body.dark-theme .nadador-card, body.dark-theme .grupo-card { background: rgba(15, 23, 42, 0.4); border-color: rgba(255,255,255,0.05); }
        body.dark-theme .nadador-info h4, body.dark-theme .grupo-info h4 { color: #00f2fe; }
        body.dark-theme .ritmo-box { background: rgba(30, 41, 59, 0.5); border-color: rgba(255,255,255,0.1); color: #cbd5e1; }
        body.dark-theme .grupo-stats { background: rgba(0, 242, 254, 0.1); color: #00f2fe; }
        body.dark-theme .pb-list { color: #94a3b8; }

        body.dark-theme .header-agrupacion { background-color: rgba(30, 41, 59, 0.8) !important; color: #00f2fe !important; border-left-color: #00f2fe !important; }
        body.dark-theme .header-agrupacion:hover { background-color: rgba(30, 41, 59, 1) !important; }
        body.dark-theme .serie-item strong { color: #00f2fe !important; }
        body.dark-theme .stats-panel { background: rgba(15, 23, 42, 0.8); border: 1px solid rgba(255,255,255,0.05); }
        body.dark-theme #resumenSeriesContenedor label { color: #00f2fe !important; }
        body.dark-theme #listaEntrenosHoy > div { background: rgba(30, 41, 59, 0.5) !important; border-color: rgba(255,255,255,0.05) !important; color: #cbd5e1 !important; }
        body.dark-theme #listaEntrenosHoy strong { color: #00f2fe !important; }
        body.dark-theme #listaEntrenosHoy span { color: #cbd5e1 !important; }
        body.dark-theme #dashCardChartZonas .card, body.dark-theme #dashCardChartContenidos .card { background: transparent !important; border:none !important; box-shadow:none !important; padding:0 !important; margin:0 !important;}
    /* --- BARRA LATERAL COMPACTA (MINI) --- */
        .sidebar {
            transition: width 0.3s ease, transform 0.3s ease !important;
            overflow-x: hidden !important;
            white-space: nowrap !important;
        }

        /* En pantallas grandes, se encoge a 60px en lugar de desaparecer */
        @media (min-width: 769px) {
            .sidebar.collapsed {
                width: 60px !important;
                transform: translateX(0) !important;
                position: relative !important;
            }

            /* Ajustes visuales para cuando está colapsada */
            .sidebar.collapsed .menu-item {
                padding-left: 18px !important; 
                color: transparent; 
                text-shadow: 0 0 0 white; 
            }

            /* Mantener el color del emoji correcto en modo oscuro si lo hay */
            body.dark-theme .sidebar.collapsed .menu-item {
                text-shadow: 0 0 0 #e0e0e0;
            }

            /* Ocultar textos de la cabecera y versión cuando está colapsada */
            .sidebar.collapsed h2, 
            .sidebar.collapsed .modo-entrenador-atleta,
            .sidebar.collapsed .version {
                opacity: 0 !important;
                pointer-events: none;
            }
        }
        /* Estilos para el Selector de Material */
        .btn-material {
            padding: 6px 12px; 
            border: 1px solid #ccc; 
            border-radius: 15px;
            background: white; 
            cursor: pointer; 
            transition: all 0.2s ease;
            font-size: 0.9em;
        }
        .btn-material.activo {
            background: #0088cc; /* Usa tu color azul principal */
            color: white; 
            border-color: #0088cc;
        }
        .contenedor-material { 
            display: none; /* Oculto por defecto */
            gap: 8px; 
            margin-top: 10px; 
            margin-bottom: 10px; 
            flex-wrap: wrap; 
        }
        /* ESCUDO DE AUDITORÍA: Oculta todos los botones de edición */
        body.modo-auditoria button[onclick*="guardar"],
        body.modo-auditoria button[onclick*="borrar"],
        body.modo-auditoria button[onclick*="eliminar"],
        body.modo-auditoria button[onclick*="abrirModal"],
        body.modo-auditoria .btn-nuevo,
        body.modo-auditoria .acciones-edicion {
            display: none !important;
            pointer-events: none;
        }
        /* ========================================== */
        /* ADAPTACIÓN MÓVIL PARA MACROCICLOS (ATP)    */
        /* ========================================== */

        /* 1. Hacemos que cualquier contenedor de tabla se pueda desplazar con el dedo */
        .table-responsive, 
        #contenedor-atp, 
        #tabla-atp-container,
        .contenedor-tabla {
            width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch; /* Hace que el deslizamiento en iPhone sea suave */
            margin-bottom: 15px;
        }

        /* 2. Evitamos que el texto de las celdas del ATP se parta en varias líneas y quede feo */
        #contenedor-atp table th, 
        #contenedor-atp table td {
            white-space: nowrap;
        }

        /* 3. Ajustamos el gráfico para que no se desborde */
        .chart-container,
        #graficoATP {
            max-width: 100%;
            height: auto !important;
            overflow-x: auto;
        }

        /* 4. Reglas específicas para pantallas de móviles (menos de 768px) */
        @media (max-width: 768px) {
            #vista-atp .card {
                padding: 10px !important; /* Aprovechamos más los bordes de la pantalla */
            }

            /* Hacemos los textos del ATP un pelín más pequeños para que quepa más info */
            #contenedor-atp table {
                font-size: 0.85em; 
            }
        }
        /* Estilo visual para toda la pantalla cuando espiamos a otro */
        body.modo-fantasma {
            background-color: #fffcf3 !important;
        }

        body.modo-fantasma .sidebar {
            border-right: 3px solid #d4a017;
        }

        /* ==========================================
           ARQUITECTURA MÓVIL DEFINITIVA (SIN SOLAPAMIENTOS)
           ========================================== */

        /* CONTENEDOR MAESTRO: Actúa como una página normal (sin 'flex' que aplaste cosas) */
        #login-container {
            position: absolute !important;
            top: 0; left: 0;
            width: 100% !important;
            height: 100% !important;
            overflow-y: auto !important; 
            overflow-x: hidden !important;
            display: block; /* 🔥 SIN !important para que JS pueda ocultar la pantalla al entrar */
            background: #0f172a; 
            z-index: 1000; 
        }

        /* ZONA SUPERIOR (Ocupa al menos la pantalla, pero crece si es necesario) */
        .hero-section {
            position: relative !important;
            width: 100% !important;
            height: auto !important; 
            min-height: 100vh !important;
            display: flex !important;
            flex-direction: column !important;
            justify-content: center !important;
            padding: 40px 20px !important;
            box-sizing: border-box !important;
        }

        .hero-content-wrapper {
            position: relative !important;
            width: 100% !important;
            max-width: 1200px !important;
            margin: 0 auto !important;
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
        }

        /* === REGLAS ESTRICTAS PARA MÓVIL (VERTICAL Y HORIZONTAL) === */
        @media (max-width: 950px), (max-height: 600px) and (orientation: landscape) {

            .hero-section {
                justify-content: flex-start !important;
                padding: 50px 20px 20px 20px !important;
            }

            .hero-content-wrapper {
                flex-direction: column !important;
                justify-content: flex-start !important;
                gap: 50px !important; /* 🔥 Separación estricta entre Textos y Login */
            }

            /* BLOQUE 1: LOGO Y TEXTOS */
            .hero-text {
                text-align: center !important;
                width: 100% !important;
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
            }

            .hero-text h1 { 
                font-size: 2.8em !important; 
                display: flex !important;
                flex-direction: row !important; /* Mantiene las gotas al lado del texto */
                justify-content: center !important;
                align-items: center !important;
                flex-wrap: wrap !important;
                gap: 12px !important;
                margin-bottom: 15px !important;
            }

            .logo-landing { width: 55px !important; height: 55px !important; }

            .hero-text p.subtitle { 
                text-align: center !important; 
                margin: 0 auto 25px auto !important; 
            }

            .hero-features {
                display: inline-block !important;
                text-align: left !important;
                margin: 0 auto !important;
            }

            /* BLOQUE 2: CAJA DE LOGIN */
            .login-wrapper { 
                position: relative !important;
                width: 100% !important; 
                max-width: 400px !important; 
                margin: 0 auto 60px auto !important; /* 🔥 Gran margen debajo de la caja para que nada se acerque */
                padding: 0 !important;
                height: auto !important;
                flex-shrink: 0 !important; /* Prohíbe que el navegador aplaste la caja */
            }

            .login-box { 
                box-sizing: border-box !important;
                padding: 30px 20px !important; 
                border-radius: 15px !important; 
            }

            /* BLOQUE 3: RESTO DEL CONTENIDO ("Diseñado para la Élite...") */
            .features-section {
                position: relative !important;
                display: block !important; 
                width: 100% !important;
                height: auto !important;
                margin-top: 450px !important; /* 🔥 LA SOLUCIÓN: Empuja el bloque 3 físicamente hacia abajo */
                padding-top: 40px !important;
                clear: both !important;
            }

            /* Tamaños de letra más elegantes para móvil */
            .features-title { font-size: 1.8em !important; line-height: 1.2; }
            .showcase-text h3 { font-size: 1.5em !important; line-height: 1.3; }
            .section-title { font-size: 1.8em !important; line-height: 1.2; }
        }


.checkbox-label {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
    box-sizing: border-box;
}

.checkbox-label--light {
    background: #f9f9f9;
}

.checkbox-label--ghost {
    background: rgba(128, 128, 128, 0.1);
}

.checkbox-label--small {
    font-size: 0.9em;
}

.checkbox-label input[type="checkbox"] {
    margin-right: 8px;
}

.login-box--hidden {
    display: none;
}

.btn-secondary--ghost {
    width: 100%;
    background: transparent;
    color: #94a3b8;
    border: 1px solid rgba(255,255,255,0.2);
    margin-top: 10px;
}

.u-mb-10 {
    margin-bottom: 10px !important;
}

.u-mb-20 {
    margin-bottom: 20px !important;
}

.u-uppercase {
    text-transform: uppercase;
}

.login-alert {
    display: none;
    font-size: 0.85em;
    font-weight: bold;
    margin-bottom: 10px;
}

.login-alert--error {
    color: #ff4d4d;
    margin-top: -10px;
}

.login-alert--success {
    color: #00f2fe;
}

.checkout-activation-status {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px;
    margin-bottom: 14px;
    border-radius: 16px;
    border: 1px solid rgba(0, 242, 254, 0.28);
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.12), rgba(15, 23, 42, 0.92));
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.24);
}

.checkout-activation-status.login-box--hidden {
    display: none;
}

.checkout-activation-status__spinner {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.15);
    border-top-color: #00f2fe;
    flex: 0 0 auto;
    animation: checkoutActivationSpin 1s linear infinite;
}

.checkout-activation-status__content {
    flex: 1;
}

.checkout-activation-status__title {
    margin: 0 0 6px 0;
    color: #e2e8f0;
    font-size: 0.98rem;
    font-weight: 700;
}

.checkout-activation-status__description {
    margin: 0;
    color: #cbd5e1;
    font-size: 0.9rem;
    line-height: 1.45;
}

.checkout-activation-status__actions {
    margin-top: 12px;
}

.checkout-activation-status--success {
    border-color: rgba(0, 255, 136, 0.32);
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.15), rgba(15, 23, 42, 0.92));
}

.checkout-activation-status--success .checkout-activation-status__spinner {
    border-top-color: #00ff88;
}

.checkout-activation-status--warning {
    border-color: rgba(255, 184, 0, 0.34);
    background: linear-gradient(135deg, rgba(255, 184, 0, 0.14), rgba(15, 23, 42, 0.92));
}

.checkout-activation-status--warning .checkout-activation-status__spinner {
    border-top-color: #ffb800;
}

@keyframes checkoutActivationSpin {
    to {
        transform: rotate(360deg);
    }
}

.text-gradient {
    color: #00f2fe;
}

.checkout-link {
    display: none;
}

.checkout-link a {
    text-decoration: none;
    display: block;
    margin-bottom: 10px;
}

.checkout-link--highlight a {
    background: linear-gradient(90deg, #ff8c00, #ffaa00);
}

.modal-description {
    line-height: 1.4;
}

.login-divider {
    margin: 30px 0 25px 0;
    border-top: 1px solid rgba(255,255,255,0.1);
    position: relative;
}

.login-divider__text {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #0f172a;
    padding: 0 15px;
    color: #64748b;
    font-size: 0.85em;
    white-space: nowrap;
}

.text-highlight {
    color: #ffaa00;
}

.hero-features--dense {
    font-size: 0.95em;
}

.text-muted {
    font-size: 0.85em;
    color: #94a3b8;
}
.flex-gap-wrap {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 15px;
}


/* Inline styles moved from index.html */
.inlined-001 {
    text-decoration: underline;
    font-size: 1.1em;
}
.inlined-002 {
    margin-left: 20px;
    padding: 6px 15px;
    background: white;
    color: #ff4500;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.inlined-003 {
    width: 85px;
    height: 85px;
}
.inlined-004 {
    background: -webkit-linear-gradient(45deg, #00f2fe, #4facfe);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.inlined-005 {
    margin-bottom:25px;
}
.inlined-006 {
    font-size:0.95em;
}
.inlined-007 {
    background: #0f172a;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-height: 350px;
}
.inlined-008 {
    display: flex;
    gap: 10px;
    justify-content: space-between;
}
.inlined-009 {
    background: rgba(255,255,255,0.05);
    padding: 10px;
    border-radius: 8px;
    flex: 1;
    text-align: left;
}
.inlined-010 {
    font-size: 0.7em;
    color: #94a3b8;
}
.inlined-011 {
    color: #00f2fe;
    font-size: 1.2em;
}
.inlined-012 {
    font-size: 0.7em;
    color: #27c93f;
}
.inlined-013 {
    color: #ffbd2e;
    font-size: 1.2em;
}
.inlined-014 {
    flex: 1;
    position: relative;
    width: 100%;
}
.inlined-015 {
    background: #0f172a;
    padding: 20px;
    display: flex;
    flex-direction: column;
    min-height: 350px;
}
.inlined-016 {
    text-align: left;
    margin-bottom: 10px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.inlined-017 {
    color: white;
    font-weight: bold;
}
.inlined-018 {
    background: #4facfe;
    color: #0f172a;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7em;
    font-weight:bold;
}
.inlined-019 {
    padding: 0;
    background: transparent;
}
.inlined-020 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}
.inlined-021 {
    display: flex;
    justify-content: center;
}
.inlined-022 {
    width: 280px;
    height: 500px;
    border-radius: 35px;
    background: #0b0f19;
    border: 8px solid #1e293b;
    position: relative;
    padding: 0;
}
.inlined-023 {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 25px;
    background: #1e293b;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    z-index: 10;
}
.inlined-024 {
    padding: 50px 20px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    text-align: left;
    height: 100%;
    box-sizing: border-box;
    overflow-y: hidden;
}
.inlined-025 {
    color: white;
    margin: 0;
    font-size: 1.3em;
}
.inlined-026 {
    background: linear-gradient(135deg, #00f2fe, #4facfe);
    border-radius: 16px;
    padding: 15px;
    color: #0b0f19;
    box-shadow: 0 4px 15px rgba(0,242,254,0.3);
}
.inlined-027 {
    font-size: 0.85em;
    font-weight: bold;
    opacity:0.8;
}
.inlined-028 {
    font-size: 1.2em;
}
.inlined-029 {
    font-size: 0.9em;
}
.inlined-030 {
    background: rgba(255,255,255,0.05);
    border-radius: 16px;
    padding: 15px;
    border: 1px solid rgba(255,255,255,0.1);
}
.inlined-031 {
    color: #cbd5e1;
    font-size: 0.85em;
    font-weight:bold;
}
.inlined-032 {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}
.inlined-033 {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #27c93f;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9em;
    font-weight:bold;
    color:#0b0f19;
}
.inlined-034 {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #ffbd2e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9em;
    font-weight:bold;
    color:#0b0f19;
}
.inlined-035 {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #ff5f56;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9em;
    font-weight:bold;
    color:#0b0f19;
}
.inlined-036 {
    background: rgba(255,255,255,0.05);
    border-radius: 16px;
    padding: 15px;
    border: 1px solid rgba(255,255,255,0.1);
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.inlined-037 {
    color: white;
    font-size: 1.2em;
}
.inlined-038 {
    background: rgba(39, 201, 63, 0.2);
    color: #27c93f;
    padding: 4px 8px;
    border-radius: 8px;
    font-size:0.8em;
    font-weight:bold;
}
.inlined-039 {
    background: rgba(15, 23, 42, 0.4);
}
.inlined-040 {
    font-size:1.5em;
}
.inlined-041 {
    display: flex;
    flex-direction: column;
}
.inlined-042 {
    color:#94a3b8;
    font-size:0.9em;
}
.inlined-043 {
    flex-grow: 1;
}
.inlined-044 {
    background:transparent;
    border:1px solid #94a3b8;
    color:white;
    width: 100%;
    margin-top: auto;
}
.inlined-045 {
    width: 100%;
    margin-top: auto;
}
.inlined-046 {
    color:white;
    font-size:2em;
    margin-bottom:10px;
}
.inlined-047 {
    font-size:1.1em;
    margin-bottom:30px;
}
.inlined-048 {
    max-width:300px;
    margin: 0 auto;
}
.inlined-049 {
    margin-top:60px;
    font-size:0.9em;
    border-top:1px solid rgba(255,255,255,0.05);
    padding-top:20px;
}
.inlined-050 {
    color:#00f2fe;
    text-decoration:none;
    margin: 0 10px;
}
.inlined-051 {
    display:block;
}
.inlined-052 {
    margin-top: 20px;
    border-top: 1px solid #4d79ff;
    padding-top: 15px;
}
.inlined-053 {
    display: none;
    color: #ffd700;
    border-left: 3px solid #ffd700;
    background: rgba(255, 215, 0, 0.1);
    margin-top: 10px;
}
.inlined-054 {
    margin-top: auto;
    border: 1px solid rgba(255,255,255,0.2);
}
.inlined-055 {
    background:#cc0000;
    color:white;
    border-radius:50%;
    padding:2px 6px;
    font-size:0.8em;
    margin-left:5px;
    display:none;
    box-shadow:0 0 5px rgba(204,0,0,0.5);
}
.inlined-056 {
    border: 1px solid rgba(255,255,255,0.2);
    margin-top: 10px;
    cursor: pointer;
}
.inlined-057 {
    border: 1px solid rgba(255,255,255,0.2);
    margin-top: 10px;
}
.inlined-058 {
    margin-bottom: 15px;
    border: 1px solid rgba(255,255,255,0.2);
    margin-top: 10px;
}
.inlined-059 {
    background-color: #ff4d4d;
    color: white;
    border: none;
    width: 100%;
    margin-bottom: 10px;
}
.inlined-060 {
    margin-top: 10px;
    font-size: 0.8em;
    color: #6699cc;
    text-align: center;
}
.inlined-061 {
    display:flex;
    align-items:center;
    gap:5px;
    background:#003366;
    color:white;
}
.inlined-062 {
    margin:0 0 5px 0;
    color:#004c99;
}
.inlined-063 {
    margin:0;
    color:#333;
}
.inlined-064 {
    background:#0066cc;
    color:white;
    border:none;
    padding:8px 15px;
    border-radius:5px;
    cursor:pointer;
}
.inlined-065 {
    margin-top: 0;
    color:#cc8800;
    border-bottom: 1px solid #ffe6b3;
    padding-bottom: 10px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.inlined-066 {
    font-size:0.8em;
    background:#fff8e6;
    color:#cc8800;
}
.inlined-067 {
    max-height: 250px;
    overflow-y: auto;
    padding-right: 10px;
}
.inlined-068 {
    color:#888;
    text-align:center;
}
.inlined-069 {
    cursor:pointer;
}
.inlined-070 {
    border-left-color: #ffaa00;
    cursor:pointer;
}
.inlined-071 {
    color:#cc8800;
}
.inlined-072 {
    margin-top: 20px;
    border-left: 4px solid #28a745;
}
.inlined-073 {
    margin-top: 0;
    color:#003366;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.inlined-074 {
    font-size:0.8em;
    background:#f0f8ff;
    color:#005ce6;
}
.inlined-075 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px;
    margin-top: 15px;
}
.inlined-076 {
    color:#888;
    text-align:center;
    width:100%;
    grid-column: 1 / -1;
}
.inlined-077 {
    display:none;
}
.inlined-078 {
    display:none;
    overflow-x:auto;
}
.inlined-079 {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.inlined-080 {
    display:none;
    flex: 2;
    min-width: 350px;
}
.inlined-081 {
    display:none;
    flex: 1;
    min-width: 300px;
}
.inlined-082 {
    height: 300px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.inlined-083 {
    position: relative;
    width: 45%;
    height: 100%;
}
.inlined-084 {
    width: 55%;
    max-height: 100%;
    overflow-y: auto;
    padding-right: 5px;
}
.inlined-085 {
    display:none;
    margin-top: 20px;
}
.inlined-086 {
    width: 220px;
    padding: 8px;
    margin: 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.9em;
    text-align: left;
}
.inlined-087 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 15px;
    flex-wrap: wrap;
    gap: 10px;
}
.inlined-088 {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 130px;
}
.inlined-089 {
    padding: 4px 10px;
}
.inlined-090 {
    flex: 2;
    text-align: center;
    min-width: 250px;
}
.inlined-091 {
    margin: 0;
    color: #003366;
    font-size: 1.1em;
    white-space: nowrap;
}
.inlined-092 {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 280px;
}
.inlined-093 {
    display: flex;
    gap: 5px;
}
.inlined-094 {
    display: flex;
    gap: 5px;
    border-left: 2px solid #e0e0e0;
    padding-left: 15px;
}
.inlined-095 {
    text-align: center;
    padding-right: 20px;
    border-right: 1px solid rgba(255,255,255,0.2);
}
.inlined-096 {
    font-size: 1.6em;
    font-weight: bold;
    color: #fff;
}
.inlined-097 {
    font-size: 1.6em;
    font-weight: bold;
    color: #d9b3ff;
}
.inlined-098 {
    color: #fff;
}
.inlined-099 {
    padding-left: 10px;
}
.inlined-100 {
    gap: 15px;
}
.inlined-101 {
    flex: 1;
    max-width: 300px;
}
.inlined-102 {
    display: flex;
    gap: 10px;
    margin-left: auto;
}
.inlined-103 {
    position: relative;
}
.inlined-104 {
    cursor: pointer;
    padding: 6px 15px;
    border-radius: 6px;
    list-style: none;
}
.inlined-105 {
    position: absolute;
    top: 110%;
    right: 0;
    background: white;
    border: 1px solid #0088cc;
    border-radius: 6px;
    padding: 12px;
    z-index: 100;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    width: max-content;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.inlined-106 {
    position: absolute;
    top: 110%;
    right: 0;
    background: white;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 10px;
    z-index: 100;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    width: 210px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.inlined-107 {
    width:100%;
    text-align:left;
    border:none;
    background:#f4f7f6;
}
.inlined-108 {
    width:100%;
    text-align:left;
    border:none;
    background:#fff0f0;
    color:#cc0000;
}
.inlined-109 {
    width:100%;
    text-align:left;
}
.inlined-110 {
    margin-bottom:10px;
    font-size:0.85em;
    display:flex;
    align-items:center;
    gap:5px;
    background: transparent;
    border: 1px solid #0088cc;
    color: #0088cc;
}
.inlined-111 {
    display: none;
    gap: 15px;
    align-items: flex-end;
    background: #e6f2ff;
    border: 1px solid #b3d9ff;
    transition: all 0.3s;
}
.inlined-112 {
    width: 100%;
}
.inlined-113 {
    background-color: #ff4d4d;
    color: white;
}
.inlined-114 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.inlined-115 {
    cursor: pointer;
    font-size: 1.2em;
    filter: grayscale(100%);
    transition: 0.2s;
}
.inlined-116 {
    padding: 10px;
}
.inlined-117 {
    font-size:0.7em;
    font-weight:normal;
    color:#666;
    margin-left: 10px;
}
.inlined-118 {
    width: 40px;
}
.inlined-119 {
    width: 130px;
}
.inlined-120 {
    width: 190px;
}
.inlined-121 {
    width: 120px;
}
.inlined-122 {
    width: 90px;
}
.inlined-123 {
    padding: 15px;
    text-align: center;
    background: #f9f9f9;
}
.inlined-124 {
    align-items: flex-start;
    flex-direction: column;
    gap: 15px;
    border-bottom: none;
    padding-bottom: 0;
}
.inlined-125 {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    border-bottom: 2px solid #0088cc;
    padding-bottom: 10px;
}
.inlined-126 {
    margin: 0;
}
.inlined-127 {
    background:#f0f8ff;
    color:#005ce6;
    border:1px solid #cce0ff;
    display:flex;
    align-items:center;
    gap:8px;
}
.inlined-128 {
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    background: white;
    padding: 12px 15px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    border: 1px solid #e0e0e0;
    box-sizing: border-box;
}
.inlined-129 {
    display:flex;
    align-items:center;
    gap:15px;
    flex-wrap:wrap;
}
.inlined-130 {
    font-weight:bold;
    color:#003366;
    display:flex;
    align-items:center;
    gap:5px;
}
.inlined-131 {
    padding:6px 10px;
    border-radius:6px;
    border:1px solid #ccc;
    font-size:0.9em;
    background-color: #f9f9f9;
    cursor: pointer;
    outline: none;
}
.inlined-132 {
    padding:6px 10px;
    border-radius:6px;
    border:1px solid #ccc;
    font-size:0.9em;
    background:#f0f8ff;
    color:#005ce6;
    font-weight:bold;
    cursor: pointer;
    outline: none;
}
.inlined-133 {
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}
.inlined-134 {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.inlined-135 {
    font-size:0.8em;
    margin-left:10px;
}
.inlined-136 {
    margin-bottom: 12px;
    grid-template-columns: repeat(3, 1fr);
}
.inlined-137 {
    border-left-color: #fbc02d;
}
.inlined-138 {
    border-left-color: #0277bd;
}
.inlined-139 {
    border-left-color: #00f2fe;
    transition: all 0.3s;
}
.inlined-140 {
    color: #00f2fe;
}
.inlined-141 {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}
.inlined-142 {
    width: 100%;
    max-width: 300px;
    height: 300px;
    margin: auto;
    position: relative;
}
.inlined-143 {
    margin-top: 20px;
    border-left: 4px solid #9933cc;
}
.inlined-144 {
    color:#7a29a3;
    border-bottom:1px solid #e6ccff;
    padding-bottom:10px;
    display:flex;
    justify-content:space-between;
}
.inlined-145 {
    font-size:0.8em;
    background:#f0f0f0;
    color:#666;
    padding:4px 8px;
    border-radius:4px;
}
.inlined-146 {
    font-size:2em;
    color:#005ce6;
    font-weight:bold;
}
.inlined-147 {
    font-size:2em;
    color:#cc0000;
    font-weight:bold;
}
.inlined-148 {
    font-size:2em;
    color:#9933cc;
    font-weight:bold;
}
.inlined-149 {
    border-left: 4px solid #005ce6;
    background-color: #e6f2ff;
}
.inlined-150 {
    color: #003366;
}
.inlined-151 {
    font-size: 0.9em;
    color: #555;
}
.inlined-152 {
    background-color: #005ce6;
    margin-top: 10px;
    width: 100%;
}
.inlined-153 {
    border-left: 4px solid #28a745;
}
.inlined-154 {
    color: #28a745;
}
.inlined-155 {
    background-color: #28a745;
}
.inlined-156 {
    border-left: 4px solid #ffaa00;
}
.inlined-157 {
    color: #cc8800;
}
.inlined-158 {
    border-left: 4px solid #ff4d4d;
    margin-top: 40px;
    background-color: #fff0f0;
}
.inlined-159 {
    color: #cc0000;
}
.inlined-160 {
    padding: 10px 20px;
    font-weight: bold;
    border-radius: 5px;
}
.inlined-161 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.inlined-162 {
    color: #666;
}
.inlined-163 {
    display:none;
    margin-bottom:20px;
    padding:15px;
    border:2px solid #8000ff;
    border-radius:8px;
    background:#f2e6ff;
}
.inlined-164 {
    margin-top:0;
    color:#4d0099;
}
.inlined-165 {
    font-size:0.85em;
    color:#555;
    margin-bottom:10px;
}
.inlined-166 {
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}
.inlined-167 {
    flex:2;
    min-width:250px;
    padding:8px;
}
.inlined-168 {
    background:#8000ff;
    border:none;
}
.inlined-169 {
    background:#666;
    color:white;
    border:none;
}
.inlined-170 {
    padding: 0;
    overflow: hidden;
}
.inlined-171 {
    margin: 20px 20px 10px 20px;
    color:#003366;
    border:none;
}
.inlined-172 {
    width: 100%;
    border-collapse: collapse;
}
.inlined-173 {
    background: #f4f7f6;
    text-align: left;
}
.inlined-174 {
    padding: 12px 20px;
    border-bottom: 2px solid #ddd;
}
.inlined-175 {
    padding: 20px;
    text-align: center;
    color: #999;
}
.inlined-176 {
    margin-top: 20px;
}
.inlined-177 {
    margin-top: 0;
    color:#003366;
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-bottom: 2px solid #0088cc;
    padding-bottom: 10px;
}
.inlined-178 {
    font-size:0.8em;
}
.inlined-179 {
    background: #ff4444;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.8em;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.inlined-180 {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 10px;
    margin-top: 15px;
}
.inlined-181 {
    margin-top: 30px;
    border-top: 4px solid #003366;
}
.inlined-182 {
    color:#003366;
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:0;
}
.inlined-183 {
    cursor: pointer;
    font-size: 1.2em;
    filter: grayscale(100%);
    transition: 0.2s;
    margin-right: 15px;
}
.inlined-184 {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    margin-top: 15px;
    margin-bottom: 15px;
    display: flex;
    gap: 15px;
    align-items: center;
    border: 1px solid #e0e0e0;
    flex-wrap: wrap;
}
.inlined-185 {
    font-weight: bold;
    color: #003366;
}
.inlined-186 {
    padding: 8px;
    border-radius: 5px;
    border: 1px solid #ccc;
    outline: none;
    flex-grow: 1;
    max-width: 180px;
}
.inlined-187 {
    padding: 8px;
    border-radius: 5px;
    border: 1px solid #ccc;
    outline: none;
    flex-grow: 1;
    max-width: 250px;
}
.inlined-188 {
    overflow-x: auto;
}
.inlined-189 {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    white-space: nowrap;
}
.inlined-190 {
    background-color: #f0f4f8;
    text-align: left;
    font-size: 0.9em;
    user-select: none;
}
.inlined-191 {
    padding: 12px;
    border-bottom: 2px solid #ccc;
    color:#333;
    cursor:pointer;
}
.inlined-192 {
    padding: 12px;
    border-bottom: 2px solid #ccc;
    color:#0055aa;
    cursor:pointer;
}
.inlined-193 {
    padding: 12px;
    border-bottom: 2px solid #ccc;
    color:#0088cc;
    cursor:pointer;
}
.inlined-194 {
    padding: 12px;
    border-bottom: 2px solid #ccc;
    color:#228b22;
    cursor:pointer;
}
.inlined-195 {
    padding: 12px;
    border-bottom: 2px solid #ccc;
    color:#cc0000;
}
.inlined-196 {
    display:flex;
    gap:20px;
    flex-wrap:wrap;
    align-items: flex-start;
}
.inlined-197 {
    width:130px;
    text-align:center;
}
.inlined-198 {
    border-radius: 50%;
    width:110px;
    height:110px;
    margin:0 auto 10px auto;
    border: 2px solid #ffaa00;
    background: #fff8e6;
}
.inlined-199 {
    font-size: 3em;
    color: #cc8800;
}
.inlined-200 {
    display:block;
    background:#e0e0e0;
    padding:5px;
    border-radius:4px;
    cursor:pointer;
    font-size:0.8em;
    font-weight:bold;
}
.inlined-201 {
    width:100%;
    padding:8px;
    border-radius:4px;
    border:1px solid #ccc;
    font-size:0.95em;
}
.inlined-202 {
    display:none;
    background:#f9f9f9;
    padding:15px;
    border-radius:5px;
    border:1px solid #eee;
    margin-top:10px;
}
.inlined-203 {
    font-weight:bold;
    color:#cc8800;
}
.inlined-204 {
    width:60px;
    padding:4px;
    margin-left:10px;
}
.inlined-205 {
    margin-top:10px;
    display:flex;
    flex-direction:column;
    gap:8px;
}
.inlined-206 {
    border-radius: 50%;
    width:110px;
    height:110px;
    margin:0 auto 10px auto;
    border: 2px solid #0088cc;
}
.inlined-207 {
    font-size: 3em;
    color: #ccc;
}
.inlined-208 {
    background:#f4f7f6;
}
.inlined-209 {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1.1em;
    font-family: inherit;
}
.inlined-210 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
}
.inlined-211 {
    margin-bottom: 0;
}
.inlined-212 {
    color:#cc0000;
    margin-top:0;
    border-bottom: 1px solid #ffcccc;
    padding-bottom: 10px;
}
.inlined-213 {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:15px;
    background:#fffafa;
    padding:15px;
    border-radius:5px;
    border:1px solid #ffcccc;
}
.inlined-214 {
    font-weight:bold;
    color:#cc0000;
    font-size:1.1em;
    margin:0;
}
.inlined-215 {
    display:flex;
    gap:10px;
    align-items:center;
}
.inlined-216 {
    width:80px;
    padding:6px;
    font-weight:bold;
    font-size:1.1em;
    color:#cc0000;
    border:1px solid #ffcccc;
    border-radius:4px;
    text-align:center;
}
.inlined-217 {
    font-size:0.85em;
    padding:6px 10px;
}
.inlined-218 {
    font-size:0.8em;
    color:#888;
    text-align:center;
    margin-top:10px;
}
.inlined-219 {
    margin-top:0;
    border-bottom: 1px solid #cce0ff;
    padding-bottom: 10px;
    color:#005ce6;
}
.inlined-220 {
    display: flex;
    gap: 10px;
    background: #e6f2ff;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 15px;
    border: 1px solid #cce0ff;
}
.inlined-221 {
    color:#005ce6;
}
.inlined-222 {
    margin-bottom:0;
}
.inlined-223 {
    font-weight: bold;
    color: #003366;
    margin-bottom: 10px;
    display: block;
}
.inlined-224 {
    width: 25%;
}
.inlined-225 {
    width: 40%;
}
.inlined-226 {
    width: 35%;
}
.inlined-227 {
    width: 100%;
    border: 1px solid #ccc;
    background: white;
}
.inlined-228 {
    background:#003366;
    color:white;
}
.inlined-229 {
    color:#666;
    font-size:1.1em;
    margin-bottom:20px;
}
.inlined-230 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}
.inlined-231 {
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    position:relative;
    border-top:4px solid #000;
}
.inlined-232 {
    width:70px;
    height:70px;
    border-radius:50%;
    background:#f0f0f0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:2em;
    margin-bottom:15px;
    box-shadow:0 4px 6px rgba(0,0,0,0.1);
}
.inlined-233 {
    margin:0 0 10px 0;
    border:none;
    padding:0;
    color:#000;
}
.inlined-234 {
    width:100%;
    background:#000;
    margin-top:15px;
}
.inlined-235 {
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    position:relative;
    border-top:4px solid #333333;
}
.inlined-236 {
    margin:0 0 10px 0;
    border:none;
    padding:0;
    color:#333;
}
.inlined-237 {
    width:100%;
    background:#333333;
    margin-top:15px;
}
.inlined-238 {
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    position:relative;
    border-top:4px solid #cc0000;
}
.inlined-239 {
    width:70px;
    height:70px;
    border-radius:50%;
    background:#ffe6e6;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:2em;
    margin-bottom:15px;
    box-shadow:0 4px 6px rgba(0,0,0,0.1);
}
.inlined-240 {
    margin:0 0 10px 0;
    border:none;
    padding:0;
    color:#cc0000;
}
.inlined-241 {
    width:100%;
    background:#cc0000;
    margin-top:15px;
}
.inlined-242 {
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    position:relative;
    border-top:4px solid #e0e0e0;
}
.inlined-243 {
    width:70px;
    height:70px;
    border-radius:50%;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:2em;
    margin-bottom:15px;
    box-shadow:0 4px 6px rgba(0,0,0,0.1);
    border:1px solid #eee;
}
.inlined-244 {
    width:100%;
    background:#fff;
    border:1px solid #ccc;
    color:#333;
    margin-top:15px;
    font-weight:bold;
}
.inlined-245 {
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    position:relative;
    border-top:4px solid #1a1a1a;
}
.inlined-246 {
    width:70px;
    height:70px;
    border-radius:50%;
    background:#f8f9fa;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:2em;
    margin-bottom:15px;
    box-shadow:0 4px 6px rgba(0,0,0,0.1);
    border: 2px solid #1a1a1a;
}
.inlined-247 {
    margin:0 0 10px 0;
    border:none;
    padding:0;
    color:#1a1a1a;
}
.inlined-248 {
    width:100%;
    background:#1a1a1a;
    margin-top:15px;
}
.inlined-249 {
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    position:relative;
    border-top:4px solid #ff3300;
}
.inlined-250 {
    width:70px;
    height:70px;
    border-radius:50%;
    background:#fff0eb;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:2em;
    margin-bottom:15px;
    box-shadow:0 4px 6px rgba(0,0,0,0.1);
}
.inlined-251 {
    margin:0 0 10px 0;
    border:none;
    padding:0;
    color:#ff3300;
}
.inlined-252 {
    width:100%;
    background:#ff3300;
    margin-top:15px;
    border-color:#ff3300;
}
.inlined-253 {
    background:#e6f2ff;
    border-left:5px solid #005ce6;
    margin-bottom:0;
}
.inlined-254 {
    color:#003366;
    margin-top:0;
}
.inlined-255 {
    display:flex;
    gap:15px;
    flex-wrap:wrap;
    margin-top:15px;
}
.inlined-256 {
    flex:1;
    background:white;
    padding:15px;
    border-radius:8px;
    text-align:center;
    border:1px solid #cce0ff;
}
.inlined-257 {
    font-size:2em;
    color:#28a745;
    font-weight:bold;
}
.inlined-258 {
    width: 550px;
    max-width: 95%;
}
.inlined-259 {
    margin-top: 0;
    color: #003366;
    border-bottom: 2px solid #0088cc;
    padding-bottom: 10px;
}
.inlined-260 {
    font-size: 0.9em;
    color: #666;
    margin-bottom: 15px;
}
.inlined-261 {
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:15px;
    margin-bottom:20px;
}
.inlined-262 {
    display:flex;
    flex-direction:column;
    gap:8px;
}
.inlined-263 {
    color:#005ce6;
    font-size:0.9em;
}
.inlined-264 {
    color:#cc8800;
    font-size:0.9em;
}
.inlined-265 {
    cursor:pointer;
    background:#fff8e6;
    padding:8px;
    border-radius:5px;
    border:1px solid #ffe6b3;
    font-size:0.9em;
}
.inlined-266 {
    margin-top: 0;
}
.inlined-267 {
    background: transparent;
}
.inlined-268 {
    margin-top:0;
    color:#003366;
    border-bottom: 2px solid #0088cc;
    padding-bottom: 5px;
}
.inlined-269 {
    color: #666;
    font-size: 0.95em;
    margin-bottom: 20px;
}
.inlined-270 {
    background: #f0f8ff;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #cce0ff;
    margin-bottom: 20px;
}
.inlined-271 {
    margin-top: 0;
    color: #005ce6;
}
.inlined-272 {
    padding-left: 20px;
    margin-bottom: 0;
    font-size: 1.1em;
    line-height: 1.6;
}
.inlined-273 {
    background:transparent;
}
.inlined-274 {
    background:#28a745;
    border:none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.inlined-275 {
    background:#17a2b8;
    border:none;
}
.inlined-276 {
    background:#9933cc;
    border:none;
}
.inlined-277 {
    width: 95%;
    max-width: 1100px;
    padding: 25px;
}
.inlined-278 {
    margin-top:0;
    color:#003366;
    border-bottom: 2px solid #0088cc;
    padding-bottom: 10px;
    margin-bottom: 20px;
}
.inlined-279 {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.inlined-280 {
    flex: 1;
    min-width: 350px;
}
.inlined-281 {
    flex:2;
}
.inlined-282 {
    font-weight:bold;
    color:#005ce6;
}
.inlined-283 {
    width:100%;
    box-sizing:border-box;
    padding:8px;
    border:1px solid #ccc;
    border-radius:4px;
}
.inlined-284 {
    margin-bottom: 15px;
}
.inlined-285 {
    background: linear-gradient(90deg, #10b981, #059669);
    color:white;
    border:none;
    font-weight:bold;
    width:100%;
    padding:10px;
    border-radius:8px;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}
.inlined-286 {
    display:none;
    margin-top:10px;
    background:#0f172a;
    padding:15px;
    border-radius:8px;
    border:1px dashed #10b981;
}
.inlined-287 {
    font-size:0.85em;
    color:#94a3b8;
    margin-top:0;
}
.inlined-288 {
    width:100%;
    padding:10px;
    border:1px solid rgba(255,255,255,0.1);
    border-radius:4px;
    font-family:monospace;
    font-size:0.9em;
    background: rgba(0,0,0,0.3);
    color: #cbd5e1;
}
.inlined-289 {
    display:flex;
    gap:10px;
    margin-top:10px;
}
.inlined-290 {
    background:transparent;
    color:#cbd5e1;
}
.inlined-291 {
    flex: 1.5;
    min-width: 450px;
    display: flex;
    flex-direction: column;
}
.inlined-292 {
    margin-bottom: 10px;
}
.inlined-293 {
    margin-bottom:10px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.inlined-294 {
    font-weight:bold;
    color:#003366;
    margin:0;
}
.inlined-295 {
    display:flex;
    gap:5px;
    margin-bottom: 15px;
    padding: 10px;
    background: #fffbe6;
    border-radius: 5px;
    border: 1px dashed #ffc107;
}
.inlined-296 {
    flex: 3;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #ccc;
    font-size: 0.85em;
    cursor:pointer;
}
.inlined-297 {
    flex: 0.5;
    background: #28a745;
    color: white;
    border: none;
    font-weight: bold;
}
.inlined-298 {
    flex: 1;
    background: #ffc107;
    color: #000;
    border: none;
    font-weight: bold;
}
.inlined-299 {
    flex: 0.5;
    background: #dc3545;
    color: white;
    border: none;
}
.inlined-300 {
    width:14%;
}
.inlined-301 {
    width:18%;
}
.inlined-302 {
    width:25%;
    display:inline-block;
}
.inlined-303 {
    width:100%;
}
.inlined-304 {
    width:22%;
}
.inlined-305 {
    display:flex;
    gap:5px;
    margin-bottom:10px;
    align-items:stretch;
}
.inlined-306 {
    flex:2.5;
    padding:6px;
    font-size:0.85em;
    margin:0;
    box-sizing:border-box;
}
.inlined-307 {
    flex:3;
    padding:6px;
    font-size:0.85em;
    margin:0;
    box-sizing:border-box;
}
.inlined-308 {
    flex:2;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fffafa;
    border:1px solid #ffcccc;
    border-radius:4px;
    margin:0;
    font-size:0.85em;
    font-weight:bold;
    color:#cc0000;
    cursor:pointer;
    box-sizing:border-box;
}
.inlined-309 {
    margin-right:4px;
    cursor:pointer;
}
.inlined-310 {
    flex:2.5;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f0f8ff;
    border:1px solid #cce0ff;
    border-radius:4px;
    margin:0;
    font-size:0.85em;
    font-weight:bold;
    color:#005ce6;
    cursor:pointer;
    box-sizing:border-box;
}
.inlined-311 {
    margin-bottom: 5px;
}
.inlined-312 {
    font-size:0.85em;
}
.inlined-313 {
    cursor: pointer;
    font-size: 0.85em;
    color: #666;
    display: flex;
    align-items: center;
    gap: 5px;
}
.inlined-314 {
    width:100%;
    padding:8px;
    border-radius:5px;
    border:1px solid #ccc;
    font-size:0.9em;
    background-color:#f9f9f9;
    cursor:pointer;
}
.inlined-315 {
    display:flex;
    gap:5px;
    margin-bottom:10px;
}
.inlined-316 {
    flex:2;
    border:1px solid #ccc;
    background:white;
}
.inlined-317 {
    flex:2;
    border:1px dashed #0088cc;
    color:#0088cc;
    background:#e6f2ff;
}
.inlined-318 {
    display:none;
    background:#ffaa00;
    color:white;
    padding:8px;
    border-radius:4px;
    margin-bottom:10px;
    font-weight:bold;
    justify-content:space-between;
    align-items:center;
}
.inlined-319 {
    background:white;
    color:#cc8800;
    padding:2px 8px;
    border:none;
    font-size:0.85em;
}
.inlined-320 {
    display:none;
    background:#f9fff9;
    border-color:#28a745;
}
.inlined-321 {
    display:flex;
    gap:5px;
    margin-bottom:10px;
    align-items:center;
}
.inlined-322 {
    flex:3;
    padding:8px;
    border:1px solid #ccc;
    border-radius:4px;
}
.inlined-323 {
    font-weight:bold;
    color:#555;
}
.inlined-324 {
    flex:1.5;
    padding:8px;
    border:1px solid #ccc;
    border-radius:4px;
}
.inlined-325 {
    width:100%;
    border:1px solid #28a745;
    color:#28a745;
    background:white;
}
.inlined-326 {
    display:none;
    background-color: #f9f9f9;
    border-color: #aaa;
}
.inlined-327 {
    font-weight:bold;
    color:#333;
    display:block;
    margin-bottom:10px;
}
.inlined-328 {
    width:100%;
    padding:10px;
    border-radius:4px;
    border:1px solid #ccc;
    margin-bottom:10px;
}
.inlined-329 {
    width:120px;
    padding:6px;
    border-radius:4px;
    border:1px solid #ccc;
}
.inlined-330 {
    font-size:0.8em;
    color:#666;
}
.inlined-331 {
    background: #f4f7f6;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.inlined-332 {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:10px;
}
.inlined-333 {
    font-weight:bold;
    color:#003366;
    margin:0;
}
.inlined-334 {
    font-size:1em;
    font-weight:bold;
    color:#006600;
    background:#e6ffe6;
    padding:4px 8px;
    border-radius:4px;
    border:1px solid #b3ffb3;
}
.inlined-335 {
    margin-top:0;
    margin-bottom:0;
    flex: 1;
    max-height: 280px;
    overflow-y: auto;
    padding-right: 5px;
}
.inlined-336 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}
.inlined-337 {
    background:transparent;
    padding: 10px 20px;
}
.inlined-338 {
    background:#28a745;
    border:none;
    display:none;
    padding: 10px 20px;
}
.inlined-339 {
    padding: 10px 30px;
    font-size: 1.1em;
}
.inlined-340 {
    width: 450px;
}
.inlined-341 {
    margin-top:0;
    color:#003366;
}
.inlined-342 {
    width: 350px;
}
.inlined-343 {
    margin-top: 0;
    color: #cc8800;
}
.inlined-344 {
    background:#ffaa00;
}
.inlined-345 {
    width:400px;
}
.inlined-346 {
    color:#005ce6;
    font-size:0.9em;
    margin-bottom:15px;
    background:#e6f2ff;
    padding:8px;
    border-radius:4px;
    border:1px solid #cce0ff;
}
.inlined-347 {
    color:#cc0000;
}
.inlined-348 {
    font-weight:bold;
    font-size:1.1em;
    background:#fff8e6;
    border:1px solid #cc8800;
}
.inlined-349 {
    font-weight:bold;
    color:#333;
}
.inlined-350 {
    font-size:1.2em;
    font-weight:bold;
    color:#0088cc;
    display:block;
    margin-bottom:10px;
}
.inlined-351 {
    background:#f0f8ff;
    border-color:#0088cc;
}
.inlined-352 {
    background:#9933cc;
}
.inlined-353 {
    width: 850px;
    max-width: 95%;
}
.inlined-354 {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}
.inlined-355 {
    width: 100px;
}
.inlined-356 {
    font-size: 0.7em;
    padding: 2px;
}
.inlined-357 {
    border-radius: 50%;
}
.inlined-358 {
    font-size: 2em;
    color: #ccc;
}
.inlined-359 {
    flex: 1;
}
.inlined-360 {
    font-size:1.1em;
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: inherit;
}
.inlined-361 {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}
.inlined-362 {
    flex: 2;
}
.inlined-363 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}
.inlined-364 {
    margin: 0;
    background-color: #fffafa;
    border-color: #ffcccc;
}
.inlined-365 {
    font-weight:bold;
    color:#cc0000;
    margin:0;
}
.inlined-366 {
    display:flex;
    gap:5px;
    align-items:center;
}
.inlined-367 {
    width:70px;
    padding:4px;
    font-weight:bold;
    color:#cc0000;
    border:1px solid #ffcccc;
    border-radius:4px;
    text-align:center;
}
.inlined-368 {
    font-size:0.75em;
    padding:4px 8px;
}
.inlined-369 {
    display: flex;
    gap: 10px;
    background: #e6f2ff;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
    border: 1px solid #cce0ff;
}
.inlined-370 {
    font-weight: bold;
    color: #003366;
    margin-bottom: 5px;
    display: block;
}
.inlined-371 {
    width: 480px;
}
.inlined-372 {
    margin-top:0;
    color:#003366;
    border-bottom:2px solid #0088cc;
    padding-bottom:5px;
}
.inlined-373 {
    margin-top: 15px;
}
.inlined-374 {
    font-weight:bold;
    font-size:0.9em;
    display:block;
    margin-bottom:5px;
}
.inlined-375 {
    max-height: 200px;
    overflow-y: auto;
    background: rgba(0,0,0,0.02);
    border: 1px solid rgba(128,128,128,0.2);
    padding: 10px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.inlined-376 {
    width: 450px;
    max-width: 95%;
}
.inlined-377 {
    margin-top:0;
    color:#003366;
    border-bottom:2px solid #0088cc;
    padding-bottom:10px;
}
.inlined-378 {
    max-height: 400px;
    overflow-y: auto;
    margin-bottom: 15px;
}
.inlined-379 {
    margin-bottom: 20px;
}
.inlined-380 {
    color:#0088cc;
    margin-bottom:10px;
}
.inlined-381 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.wellness-card {
    margin-top: 20px;
}

.wellness-card__header,
.wellness-card__summary,
.wellness-card__detail,
.wellness-analytics-layout {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.wellness-card__header {
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.wellness-card__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.wellness-card__summary {
    margin-bottom: 16px;
}

.wellness-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.wellness-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #dbeafe;
    background: linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%);
}

.wellness-item span {
    font-weight: 600;
    color: #0f172a;
}

.wellness-item select {
    width: 100%;
}

.wellness-item input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #0f172a;
}

.wellness-item small {
    color: #64748b;
    line-height: 1.4;
}

.wellness-grid--biomarkers {
    margin-top: -4px;
}

.wellness-card__detail {
    align-items: stretch;
    margin-bottom: 16px;
}

.wellness-card__chart {
    margin-bottom: 16px;
}

.wellness-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.95em;
}

.wellness-status-badge--green {
    background: #dcfce7;
    color: #166534;
}

.wellness-status-badge--yellow {
    background: #fef3c7;
    color: #92400e;
}

.wellness-status-badge--red {
    background: #fee2e2;
    color: #b91c1c;
}

.wellness-status-badge--neutral {
    background: #e2e8f0;
    color: #475569;
}

.wellness-score-value {
    font-size: 1.8em;
    font-weight: 800;
    color: #005ce6;
}

.wellness-meta-value {
    font-weight: 600;
    color: #334155;
}

.wellness-analytics-side {
    flex: 1;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wellness-breakdown {
    display: grid;
    gap: 10px;
}

.wellness-breakdown-item {
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}

.wellness-breakdown-item strong {
    display: block;
    margin-bottom: 4px;
    color: #0f172a;
}

body.dark-theme .wellness-item {
    border-color: rgba(148, 163, 184, 0.35);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.9) 100%);
}

body.dark-theme .wellness-item span,
body.dark-theme .wellness-breakdown-item strong,
body.dark-theme .wellness-meta-value {
    color: #e2e8f0;
}

body.dark-theme .wellness-item input {
    background: rgba(15, 23, 42, 0.85);
    border-color: rgba(148, 163, 184, 0.35);
    color: #e2e8f0;
}

body.dark-theme .wellness-item small {
    color: #94a3b8;
}

body.dark-theme .wellness-breakdown-item {
    background: rgba(15, 23, 42, 0.75);
    border-color: rgba(148, 163, 184, 0.25);
}

@media (max-width: 768px) {
    .wellness-card__actions {
        width: 100%;
    }

    .wellness-card__actions input,
    .wellness-card__actions button {
        width: 100%;
    }
}