/* ===== Español de Élite LMS — Frontend Styles ===== */
:root {
    --elite-bg:       #0d1419;
    --elite-card:     #111d27;
    --elite-border:   rgba(78,207,165,.22);
    --elite-green:    #4ecfa5;
    --elite-green2:   #3cb48c;
    --elite-text:     #c8d8e4;
    --elite-muted:    #7a9ab2;
    --elite-white:    #ffffff;
    --elite-radius:   14px;
    --elite-shadow:   0 4px 24px rgba(0,0,0,.4);
}

/* ── Dashboard base ─────────────────────────────────────────────────────── */
.elite-dashboard { font-family:'Segoe UI',system-ui,sans-serif; color:var(--elite-text); max-width:860px; margin:0 auto; padding:0 0 40px; }

.elite-db-header { display:flex; align-items:center; gap:18px; background:var(--elite-card); border:1px solid var(--elite-border); border-radius:var(--elite-radius); padding:24px 28px; margin-bottom:24px; }
.elite-avatar { width:64px; height:64px; border-radius:50%; border:2px solid var(--elite-green); }
.elite-db-hero-text h2 { font-size:20px; color:var(--elite-white); margin:0 0 8px; }
.elite-db-stats { display:flex; flex-wrap:wrap; gap:16px; font-size:13px; color:var(--elite-muted); }
.elite-db-stats strong { color:var(--elite-green); }

/* ── Niveles ────────────────────────────────────────────────────────────── */
.elite-db-levels { display:flex; flex-direction:column; gap:20px; }
.elite-db-level { background:var(--elite-card); border:1px solid var(--elite-border); border-radius:var(--elite-radius); padding:22px 26px; }
.elite-db-level-header { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.elite-level-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.elite-db-level-header h3 { font-size:15px; color:var(--elite-white); margin:0; letter-spacing:.5px; }

/* ── Módulo ─────────────────────────────────────────────────────────────── */
.elite-db-module { border-top:1px solid var(--elite-border); padding-top:16px; margin-top:4px; }
.elite-db-module-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.elite-mod-name { font-size:14px; color:var(--elite-white); }
.elite-mod-pct  { font-size:14px; font-weight:700; }
.elite-mod-meta { display:flex; justify-content:space-between; align-items:center; margin-top:8px; font-size:12px; color:var(--elite-muted); }

/* Barra de progreso */
.elite-progress-bar-wrap { height:7px; background:rgba(255,255,255,.07); border-radius:99px; overflow:hidden; }
.elite-progress-bar-fill { height:100%; background:var(--elite-green); border-radius:99px; transition:width .6s ease; }

/* ── Lecciones mini-grid ────────────────────────────────────────────────── */
.elite-lessons-grid { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.elite-lesson-chip { display:flex; align-items:center; gap:5px; background:rgba(255,255,255,.04); border:1px solid var(--elite-border); border-radius:8px; padding:5px 10px; font-size:12px; }
.elite-lesson-chip.elite-lesson-completed  { border-color:rgba(78,207,165,.4); }
.elite-lesson-chip.elite-lesson-in_progress{ border-color:rgba(255,200,80,.3); }
.elite-lesson-num   { color:var(--elite-muted); min-width:14px; }
.elite-lesson-score { font-weight:600; }

/* ── Botones ────────────────────────────────────────────────────────────── */
.elite-btn-sm { display:inline-block; border:1px solid; border-radius:50px; padding:4px 14px; font-size:12px; text-decoration:none; transition:opacity .2s; }
.elite-btn-sm:hover { opacity:.75; }
.elite-btn-diploma { display:inline-block; background:var(--elite-green); color:#0d1419; font-weight:700; padding:8px 20px; border-radius:50px; font-size:13px; text-decoration:none; margin-top:10px; transition:opacity .2s; }
.elite-btn-diploma:hover { opacity:.85; }

/* ── Diplomas ───────────────────────────────────────────────────────────── */
.elite-db-section { margin-top:28px; }
.elite-db-section-title { font-size:16px; color:var(--elite-white); margin-bottom:14px; }
.elite-diplomas-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
.elite-diploma-card { background:var(--elite-card); border:1px solid; border-radius:var(--elite-radius); padding:18px 20px; }
.elite-diploma-level  { font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; margin-bottom:4px; }
.elite-diploma-mod    { font-size:16px; color:var(--elite-white); font-weight:600; margin-bottom:6px; }
.elite-diploma-score  { font-size:13px; color:var(--elite-muted); }
.elite-diploma-date   { font-size:11px; color:var(--elite-muted); margin-top:4px; }

/* ── Badges ─────────────────────────────────────────────────────────────── */
.elite-badges-grid { display:flex; flex-wrap:wrap; gap:10px; }
.elite-badge-chip  { display:flex; align-items:center; gap:7px; background:rgba(255,255,255,.04); border:1px solid var(--elite-border); border-radius:50px; padding:7px 14px; font-size:13px; }
.elite-badge-icon  { font-size:18px; }
.elite-badge-name  { color:var(--elite-text); }

/* ── Ranking ────────────────────────────────────────────────────────────── */
.elite-ranking-wrap { background:var(--elite-card); border:1px solid var(--elite-border); border-radius:var(--elite-radius); overflow:hidden; max-width:860px; margin:0 auto; }
.elite-ranking-header { display:flex; align-items:center; justify-content:space-between; padding:18px 24px; border-bottom:1px solid var(--elite-border); }
.elite-ranking-header h3 { color:var(--elite-white); margin:0; font-size:16px; }
.elite-ranking-count { color:var(--elite-muted); font-size:13px; }
.elite-ranking-mypos { text-align:center; padding:10px; font-size:13px; color:var(--elite-muted); border-bottom:1px solid var(--elite-border); }
.elite-ranking-mypos strong { color:var(--elite-green); }
.elite-ranking-table-wrap { overflow-x:auto; }
.elite-ranking-table { width:100%; border-collapse:collapse; font-size:14px; }
.elite-ranking-table th { padding:10px 16px; text-align:left; color:var(--elite-muted); font-size:11px; text-transform:uppercase; letter-spacing:1px; border-bottom:1px solid var(--elite-border); }
.elite-ranking-table td { padding:12px 16px; border-bottom:1px solid rgba(255,255,255,.04); }
.elite-ranking-table tr:last-child td { border-bottom:none; }
.elite-ranking-table tr.elite-ranking-me td { background:rgba(78,207,165,.06); }
.elite-pos   { font-size:18px; min-width:40px; }
.elite-score { color:var(--elite-green); font-weight:700; }
.elite-you   { background:var(--elite-green); color:#0d1419; font-size:10px; padding:2px 7px; border-radius:99px; font-weight:700; vertical-align:middle; margin-left:6px; }
.elite-rank-avatar { width:30px; height:30px; border-radius:50%; margin-right:8px; vertical-align:middle; }
.elite-student { display:flex; align-items:center; }
.elite-ranking-empty { padding:30px; text-align:center; color:var(--elite-muted); }

/* ── Modal ──────────────────────────────────────────────────────────────── */
.elite-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.7); display:flex; align-items:center; justify-content:center; z-index:99999; }
.elite-modal-box { background:var(--elite-card); border:1px solid var(--elite-border); border-radius:18px; padding:36px; max-width:420px; width:90%; text-align:center; position:relative; animation:elitePopIn .3s ease; }
.elite-modal-close { position:absolute; top:14px; right:16px; background:none; border:none; color:var(--elite-muted); font-size:18px; cursor:pointer; }
@keyframes elitePopIn { from{transform:scale(.8);opacity:0} to{transform:scale(1);opacity:1} }

/* ── Login notice ───────────────────────────────────────────────────────── */
.elite-login-notice { background:var(--elite-card); border:1px solid var(--elite-border); border-radius:var(--elite-radius); padding:24px; text-align:center; }
.elite-login-notice a { color:var(--elite-green); }

/* ── Mini progress bar (shortcode) ─────────────────────────────────────── */
.elite-progress-mini { display:flex; flex-direction:column; gap:6px; }
.elite-progress-label { font-size:13px; color:var(--elite-muted); }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media(max-width:600px){
    .elite-db-header { flex-direction:column; text-align:center; }
    .elite-db-stats  { justify-content:center; }
    .elite-mod-meta  { flex-direction:column; align-items:flex-start; gap:6px; }
    .elite-ranking-table th:nth-child(4), .elite-ranking-table td:nth-child(4),
    .elite-ranking-table th:nth-child(6), .elite-ranking-table td:nth-child(6) { display:none; }
}