/**
 * Mi Entrenamiento - App full-page
 * Estética oscura deportiva, 100% independiente de WoodMart.
 */

:root {
    --me-bg: #0c0d10;
    --me-surface: #15171c;
    --me-surface-2: #1d2027;
    --me-border: #2a2e38;
    --me-text: #f4f5f7;
    --me-text-muted: #9498a4;
    --me-accent: #d4ff3f;
    --me-accent-dark: #a8cc24;
    --me-accent-glow: rgba(212, 255, 63, 0.25);
    --me-locked: #4a4e5a;
    --me-radius: 16px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

.me-app-body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--me-bg);
    color: var(--me-text);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-image:
        radial-gradient(circle at 12% 0%, rgba(212,255,63,0.05), transparent 35%),
        radial-gradient(circle at 88% 100%, rgba(212,255,63,0.035), transparent 35%);
}

a { color: inherit; text-decoration: none; }

.me-app-container { max-width: 1100px; margin: 0 auto; padding: 0 24px; width: 100%; }
.me-app-main { flex: 1; padding: 40px 0 60px; }

/* ===== TOPBAR ===== */
.me-app-topbar {
    background: rgba(12,13,16,0.85);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--me-border);
    position: sticky; top: 0; z-index: 100;
}
.me-app-topbar__inner {
    max-width: 1100px; margin: 0 auto; padding: 0 24px;
    height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.me-app-logo { font-family: 'Archivo'; font-weight: 800; font-size: 20px; letter-spacing: -0.5px; display: flex; align-items: center; }
.me-app-logo img { height: 36px; width: auto; max-width: 200px; object-fit: contain; display: block; }
.me-app-nav { display: flex; gap: 4px; margin-left: auto; }
.me-app-nav__link {
    font-family: 'Archivo'; font-weight: 600; font-size: 14px;
    color: var(--me-text-muted); padding: 8px 16px; border-radius: 8px; transition: all .2s;
}
.me-app-nav__link:hover { color: var(--me-text); background: var(--me-surface-2); }
.me-app-user { display: flex; align-items: center; gap: 14px; }
.me-app-user__name { font-size: 13px; color: var(--me-text-muted); }
.me-app-user__logout {
    font-family: 'Archivo'; font-weight: 600; font-size: 13px;
    color: var(--me-text); padding: 7px 14px; border: 1px solid var(--me-border); border-radius: 8px; transition: all .2s;
}
.me-app-user__logout:hover { border-color: var(--me-accent-dark); color: var(--me-accent); }

/* ===== FOOTER ===== */
.me-app-footer { border-top: 1px solid var(--me-border); padding: 24px 0; }
.me-app-footer__inner {
    max-width: 1100px; margin: 0 auto; padding: 0 24px;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 13px; color: var(--me-text-muted);
}
.me-app-footer__inner a:hover { color: var(--me-accent); }

/* ===== LOGIN ===== */
.me-login-screen {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 40px 20px;
    background-image:
        radial-gradient(circle at 50% 0%, rgba(212,255,63,0.08), transparent 45%);
}
.me-login-card {
    background: var(--me-surface); border: 1px solid var(--me-border);
    border-radius: 20px; padding: 44px 40px; width: 100%; max-width: 420px;
}
.me-login-card__brand { text-align: center; margin-bottom: 28px; }
.me-login-card__brand img { height: 56px; max-width: 240px; width: auto; object-fit: contain; }
.me-login-card__name { font-family: 'Archivo'; font-weight: 800; font-size: 24px; }
.me-login-card__eyebrow {
    font-family: 'Archivo'; font-size: 12px; font-weight: 600; letter-spacing: 2px;
    text-transform: uppercase; color: var(--me-accent); margin-bottom: 6px;
}
.me-login-card__title { font-family: 'Archivo'; font-size: 26px; font-weight: 700; margin-bottom: 24px; }
.me-login-error {
    background: rgba(226,75,74,0.12); border: 1px solid #e24b4a; color: #f09595;
    padding: 12px 16px; border-radius: 10px; font-size: 14px; margin-bottom: 20px;
}
.me-field-label { display: block; font-size: 13px; font-weight: 600; color: var(--me-text-muted); margin: 16px 0 6px; }
.me-input {
    width: 100%; background: var(--me-bg); border: 1px solid var(--me-border);
    color: var(--me-text); padding: 13px 16px; border-radius: 10px; font-size: 15px; font-family: inherit;
    transition: border-color .2s;
}
.me-input:focus { outline: none; border-color: var(--me-accent); }
.me-checkbox { display: flex; align-items: center; gap: 8px; margin: 18px 0; font-size: 14px; color: var(--me-text-muted); cursor: pointer; }
.me-checkbox input { width: 16px; height: 16px; accent-color: var(--me-accent); }
.me-login-links { display: flex; justify-content: space-between; margin-top: 22px; font-size: 13px; }
.me-login-links a { color: var(--me-text-muted); }
.me-login-links a:hover { color: var(--me-accent); }

/* ===== BOTONES ===== */
.me-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    font-family: 'Archivo'; font-weight: 700; font-size: 14px; letter-spacing: 0.3px;
    padding: 13px 22px; border-radius: 10px; border: none; cursor: pointer; transition: all .2s;
}
.me-btn--primary { background: var(--me-accent); color: #0c0d10; }
.me-btn--primary:hover { background: #e2ff6b; box-shadow: 0 0 20px var(--me-accent-glow); }
.me-btn--ghost { background: transparent; color: var(--me-text); border: 1px solid var(--me-border); }
.me-btn--ghost:hover { border-color: var(--me-text-muted); }
.me-btn--block { width: 100%; margin-top: 8px; }
.me-btn--lg { font-size: 16px; padding: 16px 32px; }

/* ===== HEADER DASHBOARD ===== */
.me-dash__header {
    display: flex; align-items: flex-end; justify-content: space-between;
    margin-bottom: 36px; padding-bottom: 24px; border-bottom: 1px solid var(--me-border);
    flex-wrap: wrap; gap: 20px;
}
.me-dash__eyebrow { font-family: 'Archivo'; font-size: 12px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--me-accent); margin-bottom: 8px; }
.me-dash__title { font-family: 'Archivo'; font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -1px; }
.me-dash__title span { color: var(--me-text-muted); }
.me-dash__stats { display: flex; gap: 14px; }
.me-stat-pill { background: var(--me-surface); border: 1px solid var(--me-border); border-radius: var(--me-radius); padding: 14px 22px; text-align: center; min-width: 88px; }
.me-stat-pill__num { font-family: 'Archivo'; font-size: 28px; font-weight: 800; color: var(--me-accent); line-height: 1; }
.me-stat-pill__label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--me-text-muted); margin-top: 6px; }

.me-landing-intro { color: var(--me-text-muted); font-size: 16px; margin-bottom: 28px; }

/* ===== GRID PLANES ===== */
.me-planes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; }
.me-plan-card { background: var(--me-surface); border: 1px solid var(--me-border); border-radius: var(--me-radius); overflow: hidden; transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s; opacity: 0; animation: me-rise .6s forwards; }
.me-plan-card:hover { transform: translateY(-6px); border-color: var(--me-accent-dark); }
@keyframes me-rise { from { opacity:0; transform: translateY(24px);} to {opacity:1; transform: translateY(0);} }
.me-plan-card:nth-child(1){animation-delay:.05s} .me-plan-card:nth-child(2){animation-delay:.12s} .me-plan-card:nth-child(3){animation-delay:.19s} .me-plan-card:nth-child(4){animation-delay:.26s}
.me-plan-card__cover { display: block; height: 150px; background-size: cover; background-position: center; position: relative; }
.me-plan-card__cover::after { content:''; position:absolute; inset:0; background: linear-gradient(to top, var(--me-surface) 5%, transparent 70%); }
.me-plan-card__cover--fallback.me-plan-card__cover--0 { background: linear-gradient(135deg,#2b1a47,#6b3fa0); }
.me-plan-card__cover--fallback.me-plan-card__cover--1 { background: linear-gradient(135deg,#1a2747,#2f6ba0); }
.me-plan-card__cover--fallback.me-plan-card__cover--2 { background: linear-gradient(135deg,#47321a,#a06b2f); }
.me-plan-card__cover--fallback.me-plan-card__cover--3 { background: linear-gradient(135deg,#1a472f,#2fa06b); }
.me-plan-card__badge { position:absolute; top:14px; left:14px; background: rgba(12,13,16,0.7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border:1px solid var(--me-border); font-size:11px; font-weight:600; letter-spacing:1px; text-transform:uppercase; padding:6px 12px; border-radius:100px; z-index:2; }
.me-plan-card__body { padding: 22px 24px 26px; }
.me-plan-card__title { font-family:'Archivo'; font-size:22px; font-weight:700; margin-bottom:4px; letter-spacing:-0.5px; }
.me-plan-card__sub { font-size:13px; color:var(--me-text-muted); margin-bottom:20px; }

.me-progress-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.me-progress-head__lvl { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:1px; }
.me-progress-head__pct { font-family:'Archivo'; font-size:13px; font-weight:700; color:var(--me-accent); }
.me-progress-track { height:8px; background:var(--me-surface-2); border-radius:100px; overflow:hidden; }
.me-progress-fill { height:100%; background:linear-gradient(90deg,var(--me-accent-dark),var(--me-accent)); border-radius:100px; box-shadow:0 0 12px var(--me-accent-glow); width:0; transition:width 1.2s cubic-bezier(.2,.8,.2,1); }

.me-niveles-track { display:flex; gap:6px; margin:20px 0 22px; }
.me-nivel-dot { flex:1; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-family:'Archivo'; font-size:13px; font-weight:700; position:relative; transition:transform .2s; }
.me-nivel-dot:hover { transform:scale(1.08); }
.me-nivel-dot--done { background:var(--me-accent); color:#0c0d10; }
.me-nivel-dot--current { background:var(--me-surface-2); color:var(--me-accent); border:2px solid var(--me-accent); }
.me-nivel-dot--locked { background:var(--me-surface-2); color:var(--me-locked); border:1px dashed var(--me-locked); pointer-events:none; }
.me-nivel-dot--locked::after { content:'🔒'; font-size:10px; position:absolute; top:-6px; right:-4px; }
.me-plan-actions { display:flex; gap:10px; }
.me-plan-actions .me-btn { flex:1; }

/* ===== HERO DEL PLAN ===== */
.me-plan-hero { min-height: 280px; background-size: cover; background-position: center; display: flex; align-items: flex-end; }
.me-plan-hero--fallback { background: linear-gradient(135deg, #1d2027, #2b1a47); }
.me-plan-hero__overlay { width: 100%; background: linear-gradient(to top, var(--me-bg) 5%, rgba(12,13,16,0.4) 60%, transparent); padding: 60px 0 28px; }
.me-back-link { display: inline-block; color: var(--me-text-muted); font-size: 14px; margin-bottom: 14px; transition: color .2s; }
.me-back-link:hover { color: var(--me-accent); }
.me-plan-hero__title { font-family:'Archivo'; font-size: 42px; font-weight: 800; letter-spacing: -1px; line-height: 1.05; }
.me-plan-hero__meta { display: flex; gap: 10px; color: var(--me-text-muted); font-size: 14px; margin-top: 10px; }
.me-plan-desc { color: var(--me-text-muted); font-size: 16px; line-height: 1.7; margin: 28px 0; }
.me-section-title { font-family:'Archivo'; font-size: 24px; font-weight: 700; margin: 32px 0 18px; }

/* ===== LISTA DE NIVELES ===== */
.me-niveles-list { display: flex; flex-direction: column; gap: 12px; }
.me-nivel-row { display: flex; align-items: center; gap: 18px; background: var(--me-surface); border: 1px solid var(--me-border); border-radius: 14px; padding: 18px 22px; transition: border-color .2s; }
.me-nivel-row--unlocked:hover { border-color: var(--me-accent-dark); }
.me-nivel-row--locked { opacity: 0.6; }
.me-nivel-row__num { font-family:'Archivo'; font-size: 24px; font-weight: 800; color: var(--me-accent); min-width: 36px; text-align: center; }
.me-nivel-row--locked .me-nivel-row__num { color: var(--me-locked); }
.me-nivel-row__info { flex: 1; }
.me-nivel-row__title { font-family:'Archivo'; font-size: 17px; font-weight: 600; }
.me-nivel-row__meta { display: flex; gap: 14px; margin-top: 4px; font-size: 12px; color: var(--me-text-muted); }
.me-nivel-row__locked-label { font-size: 13px; color: var(--me-text-muted); }

/* ===== VISTA NIVEL ===== */
.me-nivel-view { padding-top: 20px; }
.me-nivel-view__title { font-family:'Archivo'; font-size: 36px; font-weight: 800; letter-spacing: -1px; margin: 12px 0 24px; }
.me-video-wrapper { position: relative; padding-bottom: 56.25%; height: 0; margin: 0 0 28px; background:#000; border-radius: 14px; overflow: hidden; }
.me-video-wrapper iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.me-nivel-view__desc { color: var(--me-text-muted); font-size: 16px; line-height: 1.7; margin-bottom: 20px; }
.me-ejercicios-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.me-ejercicio-card { background: var(--me-surface); border: 1px solid var(--me-border); border-radius: 14px; overflow: hidden; }
.me-ejercicio-card img { width:100%; height:auto; display:block; }
.me-ejercicio-card__body { padding: 16px 18px; }
.me-ejercicio-card__body h3 { font-family:'Archivo'; font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.me-ejercicio-card__stats { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--me-text-muted); margin-bottom: 8px; }
.me-ejercicio-card__stats strong { color: var(--me-accent); }
.me-ejercicio-card__content { font-size: 13px; color: var(--me-text-muted); line-height: 1.5; }
.me-pdf-download { margin-top: 32px; text-align: center; }

/* ===== PAYWALL ===== */
.me-paywall-screen { text-align: center; padding: 80px 20px; max-width: 480px; margin: 0 auto; }
.me-paywall-screen__icon { font-size: 56px; margin-bottom: 16px; }
.me-paywall-screen__title { font-family:'Archivo'; font-size: 28px; font-weight: 700; margin-bottom: 12px; }
.me-paywall-screen__msg { color: var(--me-text-muted); font-size: 16px; margin-bottom: 28px; }
.me-paywall-screen__back { display: block; margin-top: 18px; color: var(--me-text-muted); font-size: 14px; }
.me-paywall-screen__back:hover { color: var(--me-accent); }

/* ===== PERFIL ===== */
.me-perfil-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; }
.me-perfil-card { background: var(--me-surface); border: 1px solid var(--me-border); border-radius: var(--me-radius); padding: 28px; }
.me-perfil-card__title { font-family:'Archivo'; font-size: 18px; font-weight: 700; margin-bottom: 18px; }
.me-perfil-data { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; margin-bottom: 20px; font-size: 14px; }
.me-perfil-data dt { color: var(--me-text-muted); }
.me-perfil-data dd { text-align: right; }
.me-orders-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.me-order-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--me-border); font-size: 14px; }
.me-order-item__id { font-family:'Archivo'; font-weight: 600; }
.me-order-item__date { color: var(--me-text-muted); }
.me-perfil-empty { color: var(--me-text-muted); font-size: 14px; }

/* ===== ESTADO VACÍO ===== */
.me-empty { text-align: center; padding: 70px 20px; background: var(--me-surface); border: 1px dashed var(--me-border); border-radius: var(--me-radius); }
.me-empty__icon { font-size: 48px; margin-bottom: 16px; }
.me-empty h3 { font-family:'Archivo'; font-size: 22px; margin-bottom: 8px; }
.me-empty p { color: var(--me-text-muted); margin-bottom: 24px; }

/* ===== RESPONSIVE ===== */
@media (max-width: 600px) {
    .me-dash__title { font-size: 30px; }
    .me-plan-hero__title { font-size: 30px; }
    .me-app-nav { display: none; }
    .me-planes-grid { grid-template-columns: 1fr; }
    .me-nivel-row { flex-wrap: wrap; }
}