/* ============================================================
   CURSO INTERACTIVO DE PHP — Stylesheet
   ============================================================ */

/* Variables */
:root {
    --primary:      #6366F1;
    --primary-dark: #4F46E5;
    --success:      #10B981;
    --warning:      #F59E0B;
    --danger:       #EF4444;
    --bg:           #F8FAFC;
    --surface:      #FFFFFF;
    --surface-2:    #F1F5F9;
    --border:       #E2E8F0;
    --text:         #0F172A;
    --text-2:       #475569;
    --text-3:       #94A3B8;
    --sidebar-bg:   #1E293B;
    --sidebar-text: #CBD5E1;
    --radius:       12px;
    --radius-sm:    8px;
    --shadow:       0 1px 3px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.06);
    --shadow-lg:    0 8px 30px rgba(0,0,0,.12);
    --transition:   .2s ease;
    --font:         'Inter', -apple-system, sans-serif;
    --font-mono:    'Fira Code', 'Consolas', monospace;
}

/* Reset & base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
code, pre { font-family: var(--font-mono); }

/* ============================================================
   TOP NAV
   ============================================================ */
.topnav {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.5rem;
    height: 60px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 0 var(--border);
}

.topnav__brand { flex-shrink: 0; }
.brand-link {
    display: flex;
    align-items: center;
    gap: 0;
    text-decoration: none;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1;
}
.brand-link:hover { text-decoration: none; }
.brand-formando {
    color: var(--text);
    transition: color .2s;
}
.brand-dev {
    background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 60%, #A78BFA 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 900;
}
.brand-link:hover .brand-formando { color: #6366F1; }

.topnav__progress {
    flex: 1;
    display: flex;
    align-items: center;
    gap: .75rem;
    max-width: 400px;
}
.progress-bar-slim {
    flex: 1;
    height: 6px;
    background: var(--surface-2);
    border-radius: 99px;
    overflow: hidden;
}
.progress-bar-slim__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #8B5CF6);
    border-radius: 99px;
    transition: width .6s ease;
}
.progress-label { font-size: .8rem; color: var(--text-2); white-space: nowrap; }

.topnav__user {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .75rem;
}
.topnav__ws-link {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--text-2);
    opacity: .85;
    transition: opacity var(--transition), color var(--transition);
    white-space: nowrap;
    padding: .3rem .5rem;
    border-radius: 7px;
}
.topnav__ws-link:hover { opacity: 1; color: var(--primary); text-decoration: none; }
.topnav__nav-icon  { font-size: 1rem; line-height: 1; }
.topnav__nav-label { line-height: 1; }
.user-menu {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--text);
    text-decoration: none;
    font-weight: 500;
    font-size: .9rem;
}
.user-menu:hover { color: var(--primary); }
.avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
}
.avatar--placeholder {
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .9rem;
}
.user-name { color: var(--text); font-weight: 600; }
.btn-logout {
    color: var(--text-3);
    padding: .25rem;
    border-radius: 6px;
    transition: color var(--transition);
    display: flex;
}
.btn-logout:hover { color: var(--danger); text-decoration: none; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-3);
    font-size: .85rem;
    border-top: 1px solid var(--border);
    margin-top: 4rem;
}
.site-footer__brand {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -.03em;
    margin-bottom: .35rem;
    line-height: 1;
}
.footer-formando { color: var(--text-2); }
.footer-dev {
    background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 60%, #A78BFA 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 900;
}
.site-footer__copy { font-size: .78rem; color: var(--text-3); }

/* ============================================================
   LOGIN PAGE
   ============================================================ */
body.page-login { background: #0F172A; }

.login-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
}
@media (max-width: 768px) {
    .login-split { grid-template-columns: 1fr; }
    .login-info   { display: none; }
}

.login-info {
    background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
}
.login-info__inner { max-width: 440px; }

.login-logo {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.5rem;
}
.login-logo__icon { font-size: 3rem; }
.login-logo__name {
    font-size: 2.5rem;
    font-weight: 800;
    color: #F1F5F9;
}
.login-logo__name strong { color: var(--primary); }

.login-tagline {
    font-size: 1.6rem;
    font-weight: 700;
    color: #F1F5F9;
    margin-bottom: .75rem;
    line-height: 1.3;
}
.login-subtitle {
    color: #94A3B8;
    font-size: 1rem;
    margin-bottom: 2rem;
}

.login-features { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; }
.feature-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    color: #CBD5E1;
}
.feature-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: .1rem; }
.feature-item strong { display: block; color: #F1F5F9; font-size: .95rem; }
.feature-item span   { font-size: .85rem; color: #94A3B8; }

.module-preview {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.module-chip {
    padding: .3rem .75rem;
    border-radius: 99px;
    font-size: .8rem;
    font-weight: 600;
    background: color-mix(in srgb, var(--chip-color) 15%, transparent);
    color: var(--chip-color);
    border: 1px solid color-mix(in srgb, var(--chip-color) 30%, transparent);
}

.login-form-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: var(--bg);
}
.login-card {
    width: 100%;
    max-width: 400px;
    background: var(--surface);
    border-radius: var(--radius);
    padding: 2.5rem;
    box-shadow: var(--shadow-lg);
}
.login-card__title    { font-size: 1.75rem; font-weight: 800; margin-bottom: .5rem; }
.login-card__subtitle { color: var(--text-2); margin-bottom: 1.5rem; }

.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    width: 100%;
    padding: .85rem 1.5rem;
    background: #fff;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
    box-shadow: var(--shadow);
}
.btn-google:hover {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
    text-decoration: none;
}

.login-disclaimer {
    margin-top: 1rem;
    font-size: .78rem;
    color: var(--text-3);
    text-align: center;
}

.alert {
    padding: .75rem 1rem;
    border-radius: var(--radius-sm);
    font-size: .9rem;
    margin-bottom: 1rem;
}
.alert--error   { background: #FEF2F2; color: #DC2626; border: 1px solid #FCA5A5; }
.alert--success { background: #ECFDF5; color: #065F46; border: 1px solid #6EE7B7; }

/* ============================================================
   DASHBOARD
   ============================================================ */
.dashboard { max-width: 1100px; margin: 0 auto; padding: 2rem 1.5rem; }

.dashboard-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.5rem 2rem;
    box-shadow: var(--shadow);
    margin-bottom: 2rem;
    flex-wrap: wrap;
}
.hero-left { display: flex; align-items: center; gap: 1rem; }
.hero-avatar {
    width: 56px; height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--primary);
}
.hero-avatar--placeholder {
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 700;
}
.hero-greeting { font-size: 1.4rem; font-weight: 700; }
.hero-subtitle  { color: var(--text-2); font-size: .95rem; }

.hero-stats {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.stat-card {
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    padding: .75rem 1.25rem;
    text-align: center;
    min-width: 80px;
}
.stat-value { display: block; font-size: 1.4rem; font-weight: 800; color: var(--primary); }
.stat-label { display: block; font-size: .75rem; color: var(--text-2); }

/* Secciones */
.section { margin-bottom: 2.5rem; }
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.section-header h2 { font-size: 1.2rem; font-weight: 700; }
.link-subtle { color: var(--text-2); font-size: .9rem; }
.link-subtle:hover { color: var(--primary); }

/* Global progress bar */
.global-progress-bar {
    height: 14px;
    background: var(--surface-2);
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: .5rem;
    border: 1px solid var(--border);
}
.global-progress-bar__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #8B5CF6);
    border-radius: 99px;
    transition: width .8s cubic-bezier(.4,0,.2,1);
}
.progress-text { font-size: .85rem; color: var(--text-2); }

/* Continue card */
.continue-card {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.25rem 1.75rem;
    border: 2px solid var(--mod-color, var(--primary));
    box-shadow: var(--shadow);
    text-decoration: none;
    transition: transform var(--transition), box-shadow var(--transition);
    color: var(--text);
}
.continue-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); text-decoration: none; }
.continue-card__label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--mod-color, var(--primary));
    white-space: nowrap;
}
.continue-card__lesson { flex: 1; }
.continue-card__lesson h3 { font-size: 1.05rem; font-weight: 700; margin: .1rem 0; }
.lesson-num { font-size: .8rem; color: var(--text-2); }
.continue-card__module { font-size: .8rem; color: var(--text-3); }
.continue-card__arrow { font-size: 1.4rem; color: var(--mod-color, var(--primary)); }

/* Modules grid */
.modules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}
.module-card {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.25rem;
    border: 2px solid transparent;
    box-shadow: var(--shadow);
    text-decoration: none;
    color: var(--text);
    transition: all var(--transition);
    position: relative;
    overflow: hidden;
}
.module-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--mod-color);
}
.module-card:hover { border-color: var(--mod-color); transform: translateY(-3px); box-shadow: var(--shadow-lg); text-decoration: none; }
.module-card--done { background: color-mix(in srgb, var(--mod-color) 6%, white); }
.module-card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.module-card__icon   { font-size: 1.8rem; }
.badge-done { font-size: .7rem; background: var(--success); color: #fff; padding: .2rem .5rem; border-radius: 99px; font-weight: 700; }
.module-card__title  { font-size: .95rem; font-weight: 700; margin-bottom: .5rem; line-height: 1.3; }
.module-card__meta   { font-size: .8rem; color: var(--text-2); margin-bottom: .5rem; }
.module-progress-bar { height: 5px; background: var(--surface-2); border-radius: 99px; overflow: hidden; margin-bottom: .25rem; }
.module-progress-bar__fill { height: 100%; background: var(--mod-color); border-radius: 99px; }
.module-percent { font-size: .75rem; color: var(--text-3); }

/* Badges row */
.badges-row { display: flex; flex-direction: column; gap: .75rem; }
.badge-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .75rem 1rem;
    background: var(--surface);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
}
.badge-item--earned { border-left: 4px solid var(--warning); }
.badge-item__icon { font-size: 1.5rem; flex-shrink: 0; }
.badge-item strong { display: block; font-size: .95rem; }
.badge-item span   { font-size: .82rem; color: var(--text-2); }

/* ============================================================
   MODULE PAGE
   ============================================================ */
.module-page { }

.module-page__hero {
    background: linear-gradient(135deg, var(--mod-color, var(--primary)) 0%, color-mix(in srgb, var(--mod-color, var(--primary)) 70%, #000) 100%);
    color: #fff;
    padding: 2.5rem 0;
}
.module-hero-inner { max-width: 900px; margin: 0 auto; padding: 0 1.5rem; }
.breadcrumb-link { color: rgba(255,255,255,.75); font-size: .9rem; display: inline-block; margin-bottom: 1rem; }
.breadcrumb-link:hover { color: #fff; text-decoration: none; }

.module-hero-title { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
.module-big-icon   { font-size: 3rem; flex-shrink: 0; }
.module-number     { font-size: .85rem; opacity: .8; margin-bottom: .25rem; }
.module-hero-title h1 { font-size: 1.8rem; font-weight: 800; line-height: 1.2; }
.module-description   { opacity: .85; margin-top: .5rem; font-size: .95rem; }

.mhp-bar { height: 8px; background: rgba(255,255,255,.25); border-radius: 99px; overflow: hidden; margin-bottom: .5rem; flex: 1; }
.mhp-bar__fill { height: 100%; background: #fff; border-radius: 99px; transition: width .6s ease; }
.module-hero-progress { display: flex; align-items: center; gap: 1rem; color: rgba(255,255,255,.9); font-size: .9rem; }

.module-page__content { max-width: 900px; margin: 0 auto; padding: 2rem 1.5rem; }

.lessons-list { display: flex; flex-direction: column; gap: .5rem; }
.lesson-item {
    display: grid;
    grid-template-columns: 48px 1fr auto auto;
    align-items: center;
    gap: 1rem;
    background: var(--surface);
    border-radius: var(--radius-sm);
    padding: .9rem 1.25rem;
    border: 1px solid var(--border);
    text-decoration: none;
    color: var(--text);
    transition: all var(--transition);
}
.lesson-item:hover { border-color: var(--primary); box-shadow: var(--shadow); transform: translateX(4px); text-decoration: none; }
.lesson-item--done    { background: #F0FDF4; border-color: #BBF7D0; }
.lesson-item--current { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 15%, transparent); }

.lesson-item__num {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .9rem;
    color: var(--text-2);
    flex-shrink: 0;
}
.lesson-item--done .lesson-item__num { background: var(--success); color: #fff; }
.lesson-item--current .lesson-item__num { background: var(--primary); color: #fff; }
.lesson-check { font-size: 1rem; }

.lesson-item__body h3 { font-size: .95rem; font-weight: 600; margin-bottom: .15rem; }
.lesson-item__meta { display: flex; gap: .75rem; font-size: .78rem; color: var(--text-3); }
.steps-progress { color: var(--warning); font-weight: 600; }

.lesson-item__steps { display: flex; gap: 4px; align-items: center; }
.step-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); }
.step-dot--done { background: var(--success); }
.lesson-item__arrow { color: var(--text-3); font-size: 1.1rem; }

.module-nav {
    display: flex;
    justify-content: space-between;
    padding: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}
.module-nav__btn {
    padding: .6rem 1.25rem;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    font-weight: 600;
    font-size: .9rem;
    transition: all var(--transition);
    text-decoration: none;
}
.module-nav__btn:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }

/* ============================================================
   LESSON PAGE
   ============================================================ */
.lesson-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    min-height: calc(100vh - var(--nav-h));
}

/* Sidebar oculto en móvil — se muestra como overlay al pulsar ☰ */
@media (max-width: 900px) {
    .lesson-layout {
        display: flex;
        flex-direction: column;
    }
    #lesson-sidebar {
        display: none !important;
        position: fixed !important;
        top: var(--nav-h) !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 280px !important;
        height: auto !important;
        z-index: 200 !important;
        overflow-y: auto !important;
    }
    #lesson-sidebar.sidebar--open {
        display: flex !important;
        flex-direction: column !important;
        box-shadow: 4px 0 24px rgba(0,0,0,.6) !important;
    }
    #lesson-main {
        width: 100% !important;
        overflow-y: visible !important;
        min-height: calc(100vh - var(--nav-h)) !important;
    }
    .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.55);
        z-index: 199;
    }
    .sidebar-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
}

/* Sidebar */
.lesson-sidebar {
    background: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: var(--nav-h);
    height: calc(100vh - var(--nav-h));
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #334155 transparent;
}
.sidebar-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #334155;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.sidebar-close {
    display: none;
    background: none;
    border: 1px solid #334155;
    color: #94a3b8;
    border-radius: 6px;
    padding: .25rem .5rem;
    font-size: .9rem;
    cursor: pointer;
    flex-shrink: 0;
    line-height: 1;
}
.sidebar-close:hover { background: #334155; color: #fff; }
@media (max-width: 900px) { .sidebar-close { display: block; } }

.sidebar-back {
    color: var(--sidebar-text);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    display: block;
}
.sidebar-back:hover { color: #fff; text-decoration: none; }

.sidebar-lessons { padding: .75rem 0; }
.sidebar-lesson {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem 1.25rem;
    color: var(--sidebar-text);
    text-decoration: none;
    font-size: .85rem;
    transition: background var(--transition);
}
.sidebar-lesson:hover { background: #334155; color: #fff; text-decoration: none; }
.sidebar-lesson--active { background: color-mix(in srgb, var(--primary) 25%, transparent); color: #fff; }
.sidebar-lesson--done .sl-num { color: var(--success); }

.sl-num { width: 22px; text-align: center; font-weight: 700; font-size: .8rem; color: #64748B; flex-shrink: 0; }
.sl-title { flex: 1; line-height: 1.3; }

/* Main content */
.lesson-main {
    flex: 1;
    overflow-y: auto;       /* scroll interno solo en escritorio (grid) */
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.lesson-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 1.25rem 1.75rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 10;
}
.sidebar-toggle {
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: .4rem .6rem;
    cursor: pointer;
    font-size: 1rem;
    color: var(--text-2);
    display: none;
}
@media (max-width: 900px) { .sidebar-toggle { display: block; } }

.lesson-badge {
    display: inline-block;
    padding: .2rem .7rem;
    border-radius: 99px;
    font-size: .75rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: .25rem;
}
.lesson-header__info h1 { font-size: 1.3rem; font-weight: 800; margin-bottom: .25rem; line-height: 1.3; }
.lesson-meta { display: flex; gap: 1rem; font-size: .82rem; color: var(--text-2); flex-wrap: wrap; }
.completed-badge { color: var(--success); font-weight: 600; }

/* Steps bar */
.lesson-steps-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 1rem 1.75rem;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.step-btn {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1rem;
    border-radius: var(--radius-sm);
    border: 2px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    font-family: var(--font);
    font-size: .85rem;
    font-weight: 600;
    color: var(--text-2);
    transition: all var(--transition);
}
.step-btn:hover { border-color: var(--primary); color: var(--primary); }
.step-btn--done { border-color: var(--success); background: #ECFDF5; color: var(--success); }
.step-btn__icon { font-size: 1rem; }
.step-arrow { color: var(--text-3); font-size: .9rem; }

/* Lesson content area */
.lesson-content { padding: 2rem 1.75rem; flex: 1; max-width: 820px; }

.lesson-body { margin-bottom: 2rem; }
.lesson-body h1, .lesson-body h2, .lesson-body h3 { margin: 1.5rem 0 .75rem; color: var(--text); }
.lesson-body p  { margin-bottom: 1rem; color: var(--text); line-height: 1.75; }
.lesson-body ul, .lesson-body ol { margin: .75rem 0 1rem 1.5rem; }
.lesson-body li { margin-bottom: .35rem; }
.lesson-body pre { background: #1e293b; color: #e2e8f0; padding: 1.25rem; border-radius: var(--radius-sm); overflow-x: auto; margin: 1rem 0; }
.lesson-body code { background: var(--surface-2); padding: .15em .4em; border-radius: 4px; font-size: .9em; color: var(--primary-dark); }
.lesson-body pre code { background: none; padding: 0; color: inherit; }
.lesson-body table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.lesson-body th, .lesson-body td { border: 1px solid var(--border); padding: .5rem .75rem; text-align: left; }
.lesson-body th { background: var(--surface-2); font-weight: 700; }

.lesson-pending {
    text-align: center;
    padding: 3rem 2rem;
    background: var(--surface-2);
    border-radius: var(--radius);
    border: 2px dashed var(--border);
    color: var(--text-2);
}
.pending-icon { font-size: 3rem; margin-bottom: 1rem; }

/* Code block */
.lesson-code-block {
    background: #1e293b;
    border-radius: var(--radius);
    overflow: hidden;
    margin: 1.5rem 0;
}
.code-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6rem 1rem;
    background: #0F172A;
    color: #94A3B8;
    font-size: .82rem;
    font-weight: 600;
}
.btn-copy {
    background: none;
    border: 1px solid #334155;
    color: #94A3B8;
    padding: .25rem .6rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: .78rem;
    transition: all var(--transition);
}
.btn-copy:hover { background: #334155; color: #fff; }
.lesson-code-block pre { margin: 0; padding: 1.25rem; border-radius: 0; }

/* Exercise */
.lesson-exercise {
    background: #FFFBEB;
    border: 2px solid #FDE68A;
    border-radius: var(--radius);
    padding: 1.5rem;
    margin: 1.5rem 0;
}
.lesson-exercise h3 { font-size: 1rem; font-weight: 700; margin-bottom: .75rem; color: #92400E; }
.exercise-content { color: var(--text); line-height: 1.7; }

.exercise-solution {
    margin-top: 1.25rem;
    border: 1px solid #FDE68A;
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.exercise-solution summary {
    padding: .6rem 1rem;
    background: #FEF9C3;
    cursor: pointer;
    font-size: .88rem;
    font-weight: 600;
    color: #92400E;
    user-select: none;
}
.exercise-solution summary:hover { background: #FEF08A; }
.solution-code { padding: 0; }
.solution-code pre { margin: 0; border-radius: 0; }

/* Lesson navigation */
.lesson-navigation {
    display: flex;
    justify-content: space-between;
    padding: 1.5rem 1.75rem;
    border-top: 1px solid var(--border);
    gap: 1rem;
    flex-wrap: wrap;
}
.lesson-nav-btn {
    padding: .7rem 1.25rem;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    font-weight: 600;
    font-size: .9rem;
    max-width: 45%;
    transition: all var(--transition);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lesson-nav-btn:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }
.lesson-nav-btn--next { margin-left: auto; }

/* ============================================================
   QUIZ
   ============================================================ */
.lesson-quiz {
    border-top: 2px solid var(--border);
    padding: 2rem 1.75rem;
    background: var(--surface-2);
}
.quiz-header { margin-bottom: 1.5rem; }
.quiz-header h2 { font-size: 1.15rem; font-weight: 800; margin-bottom: .25rem; }
.quiz-header p   { color: var(--text-2); font-size: .9rem; }

.quiz-question {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}
.quiz-question--answered { border-color: #BBF7D0; background: #F0FDF4; }
.quiz-q-num  { font-size: .75rem; font-weight: 700; color: var(--text-3); margin-bottom: .4rem; text-transform: uppercase; letter-spacing: .05em; }
.quiz-q-text { font-size: 1rem; font-weight: 600; margin-bottom: 1rem; }

.quiz-options { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .75rem; }
.quiz-opt {
    text-align: left;
    padding: .7rem 1rem;
    border-radius: var(--radius-sm);
    border: 2px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    font-family: var(--font);
    font-size: .9rem;
    color: var(--text);
    transition: all var(--transition);
}
.quiz-opt:hover:not(:disabled) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 5%, white); }
.quiz-opt:disabled  { cursor: not-allowed; }
.quiz-opt--locked   { opacity: .7; }
.quiz-opt--correct  { border-color: var(--success) !important; background: #ECFDF5 !important; color: #065F46 !important; font-weight: 700; }
.quiz-opt--wrong    { border-color: var(--danger)  !important; background: #FEF2F2 !important; color: #991B1B !important; }
.quiz-opt--reveal   { border-color: var(--success); background: #F0FDF4; }

.quiz-feedback {
    padding: .7rem 1rem;
    border-radius: var(--radius-sm);
    font-size: .88rem;
    margin-top: .5rem;
}
.quiz-feedback--correct { background: #ECFDF5; color: #065F46; border: 1px solid #BBF7D0; }
.quiz-feedback--wrong   { background: #FEF2F2; color: #991B1B; border: 1px solid #FCA5A5; }

/* ============================================================
   PROFILE PAGE
   ============================================================ */
.profile-page    { max-width: 900px; margin: 0 auto; padding: 2rem 1.5rem; }
.profile-container { display: flex; flex-direction: column; gap: 2rem; }

.profile-card {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow);
    text-align: center;
}
.profile-avatar-wrap { margin-bottom: 1rem; }
.profile-avatar {
    width: 80px; height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--primary);
    margin: 0 auto;
}
.profile-avatar--placeholder {
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    margin: 0 auto;
}
.profile-name  { font-size: 1.4rem; font-weight: 800; margin-bottom: .25rem; }
.profile-email { color: var(--text-2); font-size: .9rem; margin-bottom: 1rem; }

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}
.stat-box {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.25rem;
    box-shadow: var(--shadow);
    text-align: center;
}
.stat-box__value { display: block; font-size: 1.8rem; font-weight: 800; color: var(--primary); margin-bottom: .25rem; }
.stat-box__label { font-size: .82rem; font-weight: 600; color: var(--text-2); }
.stat-box__sub   { font-size: .75rem; color: var(--text-3); margin-top: .25rem; }
.stat-box--highlight .stat-box__value { color: var(--primary); }
.stat-box__bar {
    height: 6px;
    background: var(--surface-2);
    border-radius: 99px;
    overflow: hidden;
    margin-top: .75rem;
}
.stat-box__bar div {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #8B5CF6);
    border-radius: 99px;
}

.module-progress-list { display: flex; flex-direction: column; gap: .75rem; }
.mp-item__header { display: flex; justify-content: space-between; font-size: .88rem; margin-bottom: .35rem; font-weight: 600; }
.mp-item__pct { color: var(--text-3); font-weight: 400; }
.mp-item__bar { height: 8px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.mp-item__bar-fill { height: 100%; border-radius: 99px; transition: width .6s ease; }

.badges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}
.badge-card {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.25rem;
    text-align: center;
    box-shadow: var(--shadow);
    border: 2px solid transparent;
}
.badge-card--earned  { border-color: var(--warning); }
.badge-card--locked  { opacity: .5; }
.badge-card__icon    { font-size: 2.2rem; display: block; margin-bottom: .5rem; }
.badge-card__name    { display: block; font-size: .95rem; font-weight: 700; margin-bottom: .35rem; }
.badge-card__desc    { font-size: .8rem; color: var(--text-2); line-height: 1.4; }
.badge-card__date    { display: block; font-size: .75rem; color: var(--success); margin-top: .5rem; font-weight: 600; }
.badge-card__locked  { display: block; font-size: .75rem; color: var(--text-3); margin-top: .5rem; }

.history-list { display: flex; flex-direction: column; gap: .5rem; }
.history-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    background: var(--surface);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    font-size: .88rem;
}
.history-dot    { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.history-item > div { flex: 1; }
.history-item strong { display: block; }
.history-module { color: var(--text-3); font-size: .78rem; }
.history-date   { color: var(--text-3); font-size: .78rem; white-space: nowrap; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .65rem 1.25rem;
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition);
    border: 2px solid transparent;
}
.btn--primary { background: var(--primary); color: #fff; }
.btn--primary:hover { background: var(--primary-dark); text-decoration: none; }
.btn--outline { background: transparent; border-color: var(--border); color: var(--text); }
.btn--outline:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }

/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */
#toast-container {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    pointer-events: none;
}
.toast {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    box-shadow: var(--shadow-lg);
    border-left: 4px solid var(--primary);
    min-width: 260px;
    max-width: 340px;
    animation: slideIn .3s ease forwards;
    pointer-events: all;
}
.toast--success { border-color: var(--success); }
.toast--badge   { border-color: var(--warning); }
.toast__icon { font-size: 1.3rem; margin-bottom: .25rem; display: block; }
.toast__title  { font-weight: 700; font-size: .95rem; }
.toast__body   { font-size: .82rem; color: var(--text-2); margin-top: .15rem; }

@keyframes slideIn {
    from { transform: translateX(110%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}
@keyframes slideOut {
    from { transform: translateX(0);    opacity: 1; }
    to   { transform: translateX(110%); opacity: 0; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .dashboard-hero { flex-direction: column; align-items: flex-start; }
    .hero-stats { width: 100%; }
    .modules-grid { grid-template-columns: 1fr 1fr; }
    .continue-card { flex-wrap: wrap; }
    .lesson-nav-btn { max-width: 100%; }

    /* Lesson header compacto */
    .lesson-header {
        padding: .75rem 1rem;
        gap: .65rem;
        align-items: center;
    }
    .lesson-header__info h1 { font-size: 1.05rem; }
    .lesson-meta { gap: .5rem; font-size: .78rem; }
    .lesson-badge { font-size: .7rem; padding: .15rem .55rem; }

    /* Pasos en fila horizontal con scroll */
    .lesson-steps-bar {
        padding: .6rem 1rem;
        gap: .4rem;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .lesson-steps-bar::-webkit-scrollbar { display: none; }
    .step-btn { white-space: nowrap; padding: .45rem .75rem; font-size: .8rem; flex-shrink: 0; }
    .step-arrow { flex-shrink: 0; }

    /* Contenido con menos padding */
    .lesson-content { padding: 1rem .9rem; }

    /* Admin toolbar en una sola fila compacta */
    .admin-toolbar {
        padding: .4rem .75rem;
        gap: .4rem;
        border-radius: 6px;
    }
    .admin-toolbar__label { font-size: .7rem; }
    .admin-btn { padding: .3rem .6rem; font-size: .78rem; }

    /* Navegación prev/next apilada */
    .lesson-navigation { flex-direction: column; gap: .5rem; padding: 1rem; }
    .lesson-nav-btn { text-align: center; }
}

@media (max-width: 480px) {
    .modules-grid { grid-template-columns: 1fr; }
    .stats-grid   { grid-template-columns: 1fr 1fr; }
    .badges-grid  { grid-template-columns: 1fr 1fr; }

    /* En pantallas muy pequeñas, ocultar las flechas entre pasos */
    .step-arrow { display: none; }

    /* Sidebar ocupa casi todo el ancho */
    #lesson-sidebar,
    #lesson-sidebar.sidebar--open {
        width: 88vw !important;
        max-width: 320px !important;
    }
}

/* ============================================================
   AUTH BÁSICO — Tabs, formularios, registro
   ============================================================ */

/* Tabs de login */
.auth-tabs {
    display: flex;
    border-bottom: 2px solid var(--border);
    margin-bottom: 1.5rem;
    gap: 0;
}
.auth-tab {
    flex: 1;
    background: none;
    border: none;
    padding: .7rem .5rem;
    font-family: var(--font);
    font-size: .88rem;
    font-weight: 600;
    color: var(--text-3);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all var(--transition);
    white-space: nowrap;
}
.auth-tab:hover { color: var(--primary); }
.auth-tab--active { color: var(--primary); border-bottom-color: var(--primary); }

/* Paneles de contenido */
.auth-panel { display: none; }
.auth-panel--active { display: block; }

/* Formularios */
.auth-form { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1rem; }

.form-group { display: flex; flex-direction: column; gap: .35rem; }
.form-group label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: baseline;
    gap: .5rem;
}
.field-hint { font-size: .75rem; font-weight: 400; color: var(--text-3); }

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"] {
    width: 100%;
    padding: .65rem .9rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: .95rem;
    color: var(--text);
    background: var(--surface);
    transition: border-color var(--transition), box-shadow var(--transition);
    outline: none;
}
.form-group input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}
.form-group input::placeholder { color: var(--text-3); }

/* Input con prefijo @ */
.input-prefix {
    display: flex;
    align-items: stretch;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.input-prefix:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}
.input-prefix > span {
    padding: .65rem .75rem;
    background: var(--surface-2);
    color: var(--text-3);
    font-weight: 700;
    font-size: .95rem;
    border-right: 2px solid var(--border);
    display: flex;
    align-items: center;
}
.input-prefix input {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    flex: 1;
}

/* Input contraseña con toggle */
.input-password {
    position: relative;
    display: flex;
    align-items: center;
}
.input-password input { padding-right: 2.75rem !important; width: 100%; }
.toggle-password {
    position: absolute;
    right: .6rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: var(--text-3);
    padding: .2rem;
    line-height: 1;
    transition: color var(--transition);
}
.toggle-password:hover { color: var(--text); }

/* Botón full width */
.btn--full { width: 100%; justify-content: center; padding: .75rem; font-size: 1rem; }

/* Divider */
.auth-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.25rem 0;
    color: var(--text-3);
    font-size: .82rem;
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* Switch link */
.auth-switch {
    text-align: center;
    font-size: .85rem;
    color: var(--text-2);
    margin-top: 1rem;
}
.auth-switch a { font-weight: 600; }

/* ============================================================
   PLAYGROUND — Editor de código interactivo
   ============================================================ */
.playground {
    background: #0F172A;
    border-radius: var(--radius);
    overflow: hidden;
    margin: 1.5rem 0;
    border: 1px solid #1E293B;
    box-shadow: var(--shadow-lg);
}

.playground__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6rem 1rem;
    background: #020817;
    border-bottom: 1px solid #1E293B;
    flex-wrap: wrap;
    gap: .5rem;
}

.playground__title {
    font-size: .82rem;
    font-weight: 700;
    color: #94A3B8;
    letter-spacing: .04em;
}

.playground__actions {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.playground__hint {
    font-size: .72rem;
    color: #475569;
}

.pg-btn {
    padding: .3rem .75rem;
    border-radius: 5px;
    border: 1px solid #334155;
    background: #1E293B;
    color: #94A3B8;
    font-family: var(--font);
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
}
.pg-btn:hover { background: #334155; color: #fff; }

.pg-btn--run {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.pg-btn--run:hover   { background: var(--primary-dark); border-color: var(--primary-dark); }
.pg-btn--run:disabled {
    opacity: .6;
    cursor: not-allowed;
    background: #334155;
    border-color: #334155;
}

.playground__editor-wrap { position: relative; }

.playground__editor {
    display: block;
    width: 100%;
    min-height: 180px;
    max-height: 500px;
    padding: 1.1rem 1.25rem;
    background: #0F172A;
    color: #E2E8F0;
    font-family: var(--font-mono);
    font-size: .9rem;
    line-height: 1.65;
    border: none;
    outline: none;
    resize: vertical;
    tab-size: 4;
    white-space: pre;
    overflow-x: auto;
    overflow-y: auto;
    caret-color: #6366F1;
}
.playground__editor::placeholder { color: #334155; }
.playground__editor:focus { background: #0B1120; }

/* Panel de salida */
.playground__output {
    border-top: 1px solid #1E293B;
}

.playground__output-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .45rem 1rem;
    background: #020817;
    font-size: .75rem;
    font-weight: 700;
    color: #64748B;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.playground__time {
    color: #10B981;
    font-weight: 600;
}

.playground__result {
    padding: .9rem 1.25rem;
    margin: 0;
    font-family: var(--font-mono);
    font-size: .88rem;
    line-height: 1.65;
    color: #E2E8F0;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 400px;
    overflow-y: auto;
    background: #0F172A;
}

.playground__result--error { color: #FCA5A5; }

/* Botón workspace en playground */
.pg-btn--workspace {
    background: #064e3b;
    color: #6ee7b7;
    border-color: #065f46;
}
.pg-btn--workspace:hover { background: #065f46; }

/* Barra de link guardado bajo el header del playground */
.workspace-link {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem 1rem;
    background: #022c22;
    border-bottom: 1px solid #065f46;
    font-size: .82rem;
    color: #6ee7b7;
    flex-wrap: wrap;
}
.workspace-link a {
    color: #34d399;
    word-break: break-all;
    text-decoration: underline;
}
.workspace-link a:hover { color: #6ee7b7; }
.workspace-link a + a::before { content: '·'; margin-right: .3rem; color: #065f46; text-decoration: none; }

/* ============================================================
   WORKSPACE PAGE
   ============================================================ */
.workspace-page { max-width: 960px; margin: 0 auto; padding: 2rem 1.5rem; }
.workspace-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}
.workspace-header h1 { font-size: 1.6rem; font-weight: 800; margin-bottom: .25rem; }
.workspace-header p  { color: var(--text-2); font-size: .92rem; }

.workspace-empty {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--surface);
    border-radius: var(--radius);
    border: 2px dashed var(--border);
}
.workspace-empty__icon { font-size: 3.5rem; margin-bottom: 1rem; }
.workspace-empty h3 { margin-bottom: .5rem; }
.workspace-empty p  { color: var(--text-2); margin-bottom: 1.5rem; }

.workspace-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
}
.workspace-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    transition: border-color var(--transition);
}
.workspace-card:hover { border-color: var(--primary); }
.workspace-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .75rem;
}
.workspace-card__lesson {
    background: var(--primary);
    color: #fff;
    padding: .15rem .55rem;
    border-radius: 99px;
    font-weight: 700;
}
.workspace-card__date  { color: var(--text-3); }
.workspace-card__title { font-weight: 700; font-size: .95rem; line-height: 1.35; }
.workspace-card__file  { font-size: .8rem; color: var(--text-2); font-family: var(--font-mono); }
.workspace-card__actions { display: flex; gap: .5rem; margin-top: .25rem; flex-wrap: wrap; }

.btn--sm { padding: .35rem .75rem !important; font-size: .8rem !important; }
.btn--secondary {
    background: var(--surface-2);
    color: var(--text-2);
    border: 1px solid var(--border);
    padding: .5rem 1rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: .88rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    transition: all var(--transition);
}
.btn--secondary:hover { background: var(--border); color: var(--text); text-decoration: none; }

/* ============================================================
   ADMIN EDITOR
   ============================================================ */
.admin-toolbar {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: #1e1b4b;
    border: 1px solid #4338ca;
    border-radius: 8px;
    padding: .5rem .9rem;
    margin-bottom: 1.2rem;
    flex-wrap: wrap;
}
.admin-toolbar__label {
    font-size: .75rem;
    font-weight: 700;
    color: #a5b4fc;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-right: .4rem;
}
.admin-btn {
    background: #3730a3;
    color: #e0e7ff;
    border: none;
    border-radius: 6px;
    padding: .35rem .8rem;
    font-size: .82rem;
    cursor: pointer;
    transition: background .15s;
}
.admin-btn:hover { background: #4338ca; }
.admin-btn--save   { background: #065f46; color: #d1fae5; }
.admin-btn--save:hover { background: #047857; }
.admin-btn--cancel { background: #4b1111; color: #fca5a5; }
.admin-btn--cancel:hover { background: #7f1d1d; }

.admin-editor-wrap {
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}
.admin-editor-wrap .ql-toolbar { background: #1e293b; border-color: #334155; border-radius: 6px 6px 0 0; }
.admin-editor-wrap .ql-container { background: #fff; border-color: #334155; border-radius: 0 0 6px 6px; min-height: 300px; font-size: 1rem; }
.admin-editor-actions {
    display: flex;
    gap: .6rem;
    margin-top: .8rem;
}
.admin-textarea {
    width: 100%;
    background: #1e293b;
    color: #e2e8f0;
    border: 1px solid #334155;
    border-radius: 6px;
    padding: .75rem;
    font-size: .95rem;
    font-family: inherit;
    resize: vertical;
    margin-bottom: .6rem;
    box-sizing: border-box;
}
.admin-textarea--code {
    font-family: 'Courier New', monospace;
    font-size: .88rem;
    background: #0d1117;
}
.admin-label {
    display: block;
    font-size: .8rem;
    color: #94a3b8;
    margin-bottom: .3rem;
}

/* ---------------------------------------------------------------
   EDITOR TABS (pagina1.php / pagina2.php)
--------------------------------------------------------------- */
.pg-tabs {
    display: flex;
    gap: 2px;
    padding: 0 12px;
    background: #1a2035;
    border-bottom: 1px solid #2d3748;
}
.pg-tab {
    padding: 6px 14px;
    font-size: .78rem;
    font-family: 'Fira Code', monospace;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: #64748b;
    cursor: pointer;
    transition: color .15s, border-color .15s;
    white-space: nowrap;
}
.pg-tab:hover { color: #e2e8f0; }
.pg-tab--active {
    color: #38bdf8;
    border-bottom-color: #38bdf8;
}
.playground__result--empty { color: #475569; font-style: italic; }

/* ---------------------------------------------------------------
   WORKSPACE — info de BD
--------------------------------------------------------------- */
.workspace-db-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #0f2d1f;
    border: 1px solid #166534;
    border-radius: 10px;
    padding: .85rem 1.2rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.workspace-db-info__icon { font-size: 1.5rem; }
.workspace-db-info code { background: #052e16; padding: 2px 8px; border-radius: 4px; font-size: .9rem; color: #86efac; }
.workspace-db-info__hint { color: #86efac; font-size: .82rem; margin-left: .5rem; opacity: .8; }

/* ---------------------------------------------------------------
   TERMINAL MySQL
--------------------------------------------------------------- */
.sql-terminal-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}
.sql-terminal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.sql-terminal-header h1 { margin: 0 0 .3rem; font-size: 1.6rem; }
.sql-terminal-header p  { margin: 0; color: #94a3b8; font-size: .95rem; }
.sql-terminal-header__actions { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }

.sql-db-badge {
    display: flex;
    flex-direction: column;
    background: #0f2d1f;
    border: 1px solid #166534;
    border-radius: 8px;
    padding: .5rem .9rem;
}
.sql-db-badge__label { font-size: .72rem; color: #86efac; text-transform: uppercase; letter-spacing: .05em; }
.sql-db-badge__name  { font-family: 'Fira Code', monospace; font-size: .95rem; color: #4ade80; }

.sql-chips {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.sql-chips__label { font-size: .8rem; color: #64748b; white-space: nowrap; }
.sql-chip {
    padding: 4px 12px;
    font-size: .78rem;
    font-family: 'Fira Code', monospace;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 20px;
    color: #94a3b8;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.sql-chip:hover { background: #334155; color: #e2e8f0; }

.sql-editor-wrap {
    position: relative;
    background: #0d1117;
    border: 1px solid #334155;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: .8rem;
}
.sql-editor-label {
    position: absolute;
    top: 8px; right: 12px;
    font-size: .7rem;
    color: #475569;
    font-family: 'Fira Code', monospace;
    text-transform: uppercase;
    letter-spacing: .1em;
}
.sql-editor {
    display: block;
    width: 100%;
    min-height: 140px;
    max-height: 400px;
    padding: 1rem;
    background: transparent;
    color: #e2e8f0;
    border: none;
    font-family: 'Fira Code', monospace;
    font-size: .92rem;
    line-height: 1.6;
    resize: vertical;
    box-sizing: border-box;
    outline: none;
}

.sql-actions {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1.5rem;
}
.sql-time { font-size: .8rem; color: #64748b; margin-left: auto; }

.sql-output { display: flex; flex-direction: column; gap: 1rem; }
.sql-loading { color: #64748b; font-style: italic; padding: .5rem 0; }

.sql-result {
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 8px;
    overflow: hidden;
}
.sql-result--ok    { border-color: #166534; }
.sql-result--error { border-color: #7f1d1d; }
.sql-result--ok    > div:last-child { padding: .7rem 1rem; color: #86efac; font-size: .9rem; }
.sql-result--error > div:last-child { padding: .7rem 1rem; color: #fca5a5; font-size: .9rem; }

.sql-result__stmt {
    padding: .5rem 1rem;
    background: #1e293b;
    font-family: 'Fira Code', monospace;
    font-size: .8rem;
    color: #64748b;
    white-space: pre-wrap;
    word-break: break-all;
    border-bottom: 1px solid #334155;
}
.sql-empty  { padding: .7rem 1rem; color: #64748b; font-style: italic; font-size: .9rem; }
.sql-count  { padding: .4rem 1rem; font-size: .78rem; color: #64748b; border-top: 1px solid #1e293b; }

.sql-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
    overflow-x: auto;
    display: block;
}
.sql-table th {
    padding: .5rem .8rem;
    text-align: left;
    background: #1e293b;
    color: #94a3b8;
    font-weight: 600;
    border-bottom: 1px solid #334155;
    white-space: nowrap;
}
.sql-table td {
    padding: .45rem .8rem;
    border-bottom: 1px solid #1e293b;
    color: #e2e8f0;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sql-table tr:last-child td { border-bottom: none; }
.sql-table tr:hover td { background: #1e293b; }
.sql-null { color: #475569 !important; font-style: italic; }

@media (max-width: 600px) {
    .sql-terminal-header { flex-direction: column; }
    .sql-terminal-header__actions { width: 100%; }
    .sql-chips { gap: .35rem; }
}

/* ---------------------------------------------------------------
   LESSON — aviso de base de datos personal
--------------------------------------------------------------- */
.lesson-db-note {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    background: #0f2d1f;
    border: 1px solid #166534;
    border-radius: 10px;
    padding: .9rem 1.2rem;
    margin: 1.2rem 0;
    font-size: .88rem;
    color: #bbf7d0;
    flex-wrap: wrap;
}
.lesson-db-note__icon { font-size: 1.4rem; flex-shrink: 0; }
.lesson-db-note__body { flex: 1; min-width: 200px; }
.lesson-db-note__body strong { color: #4ade80; }
.lesson-db-note__body code {
    background: #052e16;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: .87rem;
    color: #86efac;
}
.lesson-db-note__body a { color: #4ade80; text-decoration: underline; font-size: .85rem; }

/* ---------------------------------------------------------------
   TOUR — botón navbar
--------------------------------------------------------------- */
.topnav__tour-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid #334155;
    background: #1e293b;
    color: #94a3b8;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
    flex-shrink: 0;
}
.topnav__tour-btn:hover { background: #334155; color: #e2e8f0; }

/* ---------------------------------------------------------------
   TOUR — backdrop + modal
--------------------------------------------------------------- */
.tour-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.65);
    z-index: 9000;
}
.tour-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(560px, 94vw);
    max-height: 90vh;
    overflow-y: auto;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 16px;
    padding: 2rem 2rem 1.4rem;
    z-index: 9001;
    box-shadow: 0 24px 60px rgba(0,0,0,.6);
}

/* dots */
.tour-progress-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 1.6rem;
}
.tour-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #334155;
    cursor: pointer;
    transition: background .2s, transform .2s;
}
.tour-dot--active {
    background: #38bdf8;
    transform: scale(1.25);
}

/* step content */
.tour-step__icon {
    font-size: 2.4rem;
    text-align: center;
    margin-bottom: .6rem;
}
.tour-step__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #f1f5f9;
    text-align: center;
    margin: 0 0 .9rem;
    line-height: 1.3;
}
.tour-step__body {
    color: #94a3b8;
    font-size: .93rem;
    line-height: 1.65;
    margin: 0 0 .7rem;
}
.tour-step__hint {
    font-size: .82rem;
    color: #64748b;
    text-align: center;
    margin-top: .6rem;
}
.tour-step__hint kbd,
.tour-step__body kbd {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 4px;
    padding: 1px 6px;
    font-family: 'Fira Code', monospace;
    font-size: .82rem;
    color: #94a3b8;
}
.tour-step__tip {
    background: #0c1a2e;
    border-left: 3px solid #38bdf8;
    border-radius: 0 6px 6px 0;
    padding: .6rem .9rem;
    font-size: .84rem;
    color: #7dd3fc;
    line-height: 1.55;
    margin-top: .5rem;
}
.tour-step__tip code {
    background: #0f2a44;
    padding: 1px 5px;
    border-radius: 3px;
}

/* DB badge in tour */
.tour-db-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: #052e16;
    border: 1px solid #166534;
    border-radius: 8px;
    padding: .45rem .9rem;
    font-size: .9rem;
    color: #86efac;
    margin: .5rem 0;
}
.tour-db-badge code {
    font-family: 'Fira Code', monospace;
    color: #4ade80;
    font-size: .92rem;
}

/* summary list */
.tour-summary {
    list-style: none;
    padding: 0;
    margin: .5rem 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.tour-summary li {
    font-size: .9rem;
    color: #94a3b8;
    line-height: 1.4;
}
.tour-summary li strong { color: #e2e8f0; }
.tour-summary li code {
    background: #1e293b;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: .85rem;
    color: #86efac;
}

/* footer nav */
.tour-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.6rem;
    padding-top: 1rem;
    border-top: 1px solid #1e293b;
    gap: .5rem;
    flex-wrap: wrap;
}
.tour-skip {
    background: none;
    border: none;
    color: #475569;
    font-size: .82rem;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}
.tour-skip:hover { color: #64748b; }
.tour-nav { display: flex; gap: .5rem; }
.tour-btn {
    padding: 7px 18px;
    border-radius: 8px;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background .15s;
}
.tour-btn--secondary {
    background: #1e293b;
    color: #94a3b8;
}
.tour-btn--secondary:hover { background: #334155; }
.tour-btn--primary {
    background: #0ea5e9;
    color: #fff;
}
.tour-btn--primary:hover { background: #0284c7; }

/* ---------------------------------------------------------------
   ROADMAP VISUAL
--------------------------------------------------------------- */
.roadmap {
    display: flex;
    flex-direction: column;
    gap: .8rem;
}
.roadmap-module {
    background: #0f172a;
    border: 1px solid #1e293b;
    border-left: 4px solid var(--mod-color, #38bdf8);
    border-radius: 12px;
    overflow: hidden;
}
.roadmap-module__header {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem 1rem;
    border-bottom: 1px solid #1e293b;
}
.roadmap-module__icon { font-size: 1rem; flex-shrink: 0; }
.roadmap-module__title {
    flex: 1;
    font-size: .88rem;
    font-weight: 600;
    color: #e2e8f0;
}
.roadmap-module__count {
    font-size: .75rem;
    color: #64748b;
    background: #1e293b;
    padding: 2px 9px;
    border-radius: 10px;
    white-space: nowrap;
}
.roadmap-lessons {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: .65rem 1rem;
}
.roadmap-lesson {
    width: 34px;
    height: 34px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 700;
    background: #1e293b;
    color: #64748b;
    border: 1px solid #334155;
    text-decoration: none;
    transition: background .12s, color .12s, transform .1s;
    position: relative;
}
.roadmap-lesson:hover {
    background: #334155;
    color: #e2e8f0;
    transform: scale(1.12);
    z-index: 1;
}
.roadmap-lesson--done {
    background: #052e16;
    color: #4ade80;
    border-color: #166534;
}
.roadmap-lesson--done:hover { background: #14532d; }

/* ---------------------------------------------------------------
   CODEMIRROR — overrides inside .playground
--------------------------------------------------------------- */
.playground .CodeMirror {
    display: block;
    width: 100%;
    height: auto;
    min-height: 180px;
    font-family: 'Fira Code', monospace;
    font-size: .9rem;
    line-height: 1.65;
    border-radius: 0;
    background: #0F172A;
}
.playground .CodeMirror-scroll {
    min-height: 180px;
    max-height: 500px;
    overflow-y: auto !important;
    overflow-x: auto !important;
}
.playground .CodeMirror-lines    { padding: .8rem 0; }
.playground .CodeMirror-gutters  { border-right: 1px solid #2d3748; background: #0d1526; }
.playground .CodeMirror-linenumber { color: #4a5568; }

/* ---------------------------------------------------------------
   PLAYGROUND — hint box (friendly error explanation)
--------------------------------------------------------------- */
.playground__hint-box {
    margin: 0 .8rem .7rem;
    padding: .6rem .9rem;
    background: #1a1500;
    border-left: 3px solid #f59e0b;
    border-radius: 0 6px 6px 0;
    font-size: .84rem;
    color: #fcd34d;
    line-height: 1.6;
}
.playground__hint-box code {
    background: #292000;
    padding: 1px 5px;
    border-radius: 3px;
    color: #93c5fd;
    font-family: 'Fira Code', monospace;
}
.playground__hint-box strong { color: #fbbf24; }

/* ============================================================
   PROYECTOS — Lista de proyectos
   ============================================================ */
.proj-list-page {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}

/* Premium gate */
.proj-gate {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 2rem;
}
.proj-gate__card {
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 16px;
    padding: 2.5rem 2rem;
    max-width: 580px;
    width: 100%;
    text-align: center;
}
.proj-gate__icon { font-size: 3rem; margin-bottom: .8rem; }
.proj-gate__title { font-size: 1.5rem; font-weight: 700; color: #f1f5f9; margin-bottom: .7rem; }
.proj-gate__body  { color: #94a3b8; font-size: .95rem; line-height: 1.6; margin-bottom: 1.5rem; }
.proj-gate__progress { margin-bottom: 1.5rem; }
.proj-gate__bar {
    height: 8px;
    background: #1e293b;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: .5rem;
}
.proj-gate__bar-fill { height: 100%; background: #6366f1; border-radius: 4px; transition: width .5s; }
.proj-gate__bar-label { font-size: .83rem; color: #64748b; }
.proj-gate__preview { margin-top: 2rem; }
.proj-gate__preview-label { font-size: .82rem; color: #64748b; margin-bottom: .8rem; }
.proj-gate__templates { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }

/* Header área premium */
.proj-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}
.proj-header__title { font-size: 1.6rem; font-weight: 700; color: #f1f5f9; margin-bottom: .2rem; }
.proj-header__sub   { color: #64748b; font-size: .9rem; }

/* Empty state */
.proj-empty {
    text-align: center;
    padding: 4rem 2rem;
    background: #0f172a;
    border: 1px dashed #334155;
    border-radius: 14px;
}
.proj-empty__icon { font-size: 3rem; margin-bottom: 1rem; }
.proj-empty h2    { color: #e2e8f0; font-size: 1.3rem; margin-bottom: .5rem; }
.proj-empty p     { color: #64748b; margin-bottom: 1.5rem; }

/* Grid de proyectos */
.proj-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}
.proj-card {
    display: block;
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 12px;
    padding: 1.2rem;
    text-decoration: none;
    transition: border-color .15s, transform .1s;
}
.proj-card:hover { border-color: #6366f1; transform: translateY(-2px); }
.proj-card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .7rem; }
.proj-card__icon   { font-size: 1.6rem; }
.proj-card__badge  { font-size: .75rem; color: #64748b; background: #1e293b; padding: 2px 8px; border-radius: 10px; }
.proj-card__name   { font-size: 1rem; font-weight: 700; color: #e2e8f0; margin-bottom: .3rem; }
.proj-card__meta   { font-size: .78rem; color: #64748b; }

/* Template picker */
.proj-tpl-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
    margin-top: .4rem;
}
.proj-tpl-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .2rem;
    background: #1e293b;
    border: 2px solid #334155;
    border-radius: 10px;
    padding: .8rem 1rem;
    cursor: pointer;
    text-align: left;
    transition: border-color .15s;
}
.proj-tpl-card:hover          { border-color: #6366f1; }
.proj-tpl-card--selected      { border-color: #6366f1; background: #1e1b4b; }
.proj-tpl-card--locked        { opacity: .55; cursor: default; }
.proj-tpl-card__icon          { font-size: 1.3rem; }
.proj-tpl-card__name          { font-size: .88rem; font-weight: 700; color: #e2e8f0; }
.proj-tpl-card__desc          { font-size: .77rem; color: #64748b; line-height: 1.4; }

/* Modal */
.modal-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 8000;
}
.modal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: min(560px, 94vw);
    max-height: 90vh;
    overflow-y: auto;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 14px;
    z-index: 8001;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.modal__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid #1e293b;
}
.modal__header h2 { font-size: 1.1rem; font-weight: 700; color: #f1f5f9; }
.modal__close  { background: none; border: none; color: #64748b; font-size: 1.1rem; cursor: pointer; }
.modal__body   { padding: 1.2rem 1.5rem; }
.modal__footer {
    display: flex; justify-content: flex-end; gap: .7rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #1e293b;
}
.modal__label { font-size: .85rem; font-weight: 600; color: #94a3b8; margin-bottom: .3rem; display: block; }
.modal__input {
    display: block; width: 100%;
    padding: 9px 12px;
    background: #1e293b; border: 1px solid #334155; border-radius: 8px;
    color: #e2e8f0; font-size: .95rem; outline: none;
}
.modal__input:focus { border-color: #6366f1; }
.modal__hint   { font-size: .78rem; color: #475569; margin-top: .3rem; }

/* ============================================================
   PROYECTOS — Editor multi-archivo
   ============================================================ */
.proj-editor {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--nav-h));
    overflow: hidden;
}

/* Topbar del editor */
.proj-editor__topbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1rem;
    height: 48px;
    background: #0d1117;
    border-bottom: 1px solid #21262d;
    flex-shrink: 0;
}
.proj-editor__back {
    color: #64748b;
    text-decoration: none;
    font-size: .83rem;
    white-space: nowrap;
}
.proj-editor__back:hover { color: #94a3b8; }
.proj-editor__name {
    flex: 1;
    font-size: .9rem;
    font-weight: 600;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.proj-editor__actions { display: flex; gap: .5rem; flex-shrink: 0; }

/* Body: sidebar + editor */
.proj-editor__body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Sidebar de archivos */
.proj-editor__sidebar {
    width: 200px;
    flex-shrink: 0;
    background: #010409;
    border-right: 1px solid #21262d;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.proj-sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6rem .8rem;
    border-bottom: 1px solid #21262d;
}
.proj-sidebar__title {
    font-size: .68rem;
    font-weight: 700;
    color: #4a5568;
    letter-spacing: .08em;
}
.proj-sidebar__add {
    background: none; border: none;
    color: #64748b; font-size: 1.1rem; cursor: pointer; line-height: 1;
    padding: 0 2px;
}
.proj-sidebar__add:hover { color: #e2e8f0; }

/* Lista de archivos */
.proj-file-list { list-style: none; padding: .3rem 0; flex: 1; }
.proj-file-item {
    display: flex;
    align-items: center;
    padding: 0 .3rem;
}
.proj-file-item--active .proj-file-btn { background: #1c2128; color: #e2e8f0; }
.proj-file-btn {
    flex: 1;
    background: none; border: none;
    color: #8b949e; font-size: .82rem;
    text-align: left; padding: 5px 8px;
    cursor: pointer; border-radius: 5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.proj-file-btn:hover { background: #161b22; color: #e2e8f0; }
.proj-file-delete {
    background: none; border: none;
    color: transparent; font-size: .72rem; cursor: pointer;
    padding: 3px 5px; border-radius: 3px; flex-shrink: 0;
}
.proj-file-item:hover .proj-file-delete { color: #6b7280; }
.proj-file-delete:hover { color: #f87171 !important; background: #1c2128; }

/* Formulario nuevo archivo */
.proj-new-file {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: .5rem .7rem;
    border-top: 1px solid #21262d;
}
.proj-new-file__input {
    background: #1c2128; border: 1px solid #30363d; border-radius: 5px;
    color: #e2e8f0; font-size: .82rem; padding: 5px 8px; outline: none;
    font-family: 'Fira Code', monospace; width: 100%;
}
.proj-new-file__input:focus { border-color: #6366f1; }
.proj-new-file__actions { display: flex; gap: .3rem; }

/* Setup SQL */
.proj-setup-sql {
    margin-top: auto;
    border-top: 1px solid #21262d;
    padding: .7rem .8rem;
    font-size: .78rem;
}
.proj-setup-sql__title {
    display: flex; align-items: center; justify-content: space-between;
    color: #4a5568; font-weight: 600; margin-bottom: .4rem;
}
.proj-setup-sql__toggle {
    background: none; border: none; color: #4a5568; cursor: pointer; font-size: .72rem;
}
.proj-setup-sql__toggle:hover { color: #94a3b8; }
.proj-setup-sql__code {
    background: #0d1117; border: 1px solid #21262d; border-radius: 5px;
    padding: .5rem; color: #7dd3fc; font-size: .72rem;
    white-space: pre-wrap; word-break: break-all;
    margin-bottom: .4rem; max-height: 200px; overflow-y: auto;
}
.proj-setup-sql__link { color: #6366f1; text-decoration: none; font-size: .75rem; }
.proj-setup-sql__link:hover { text-decoration: underline; }

/* Panel principal del editor */
.proj-editor__main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #0d1117;
}
.proj-editor__file-tab {
    display: flex; align-items: center; gap: .7rem;
    padding: 5px 1rem;
    background: #161b22;
    border-bottom: 1px solid #21262d;
    font-size: .82rem;
    font-family: 'Fira Code', monospace;
    color: #8b949e;
    flex-shrink: 0;
}
.proj-editor__unsaved { color: #f59e0b; font-size: .72rem; }
.proj-editor__cm { flex: 1; overflow: hidden; min-height: 0; }

/* Panels wrapper (editor + preview) */
.proj-editor__panels {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-height: 0;
}
.proj-editor__panels.proj-panels--split .proj-editor__cm { flex: 1; }
.proj-editor__panels.proj-panels--split .proj-preview    { flex: 1; border-left: 1px solid #2d3748; }

/* Preview panel */
.proj-preview { display: flex; flex-direction: column; min-width: 0; background: #fff; }
.proj-preview__bar {
    display: flex; align-items: center; gap: .5rem;
    padding: 4px 10px; background: #1a202c; border-bottom: 1px solid #2d3748;
    flex-shrink: 0;
}
.proj-preview__url { font-size: .78rem; color: #718096; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-preview__frame { flex: 1; border: none; background: #fff; }

/* Rename button */
.proj-file-rename {
    opacity: 0; background: none; border: none; color: #718096;
    cursor: pointer; padding: 2px 4px; font-size: .8rem; line-height: 1;
    transition: opacity .15s, color .15s;
}
.proj-file-item:hover .proj-file-rename { opacity: 1; }
.proj-file-rename:hover { color: #90cdf4; }

/* Auto-save status */
.proj-autosave { font-size: .75rem; color: #68d391; opacity: .8; }

/* Preview button */
.proj-btn--preview { background: #2d3748; color: #90cdf4; }
.proj-btn--preview:hover { background: #4a5568; }

.proj-editor__empty {
    flex: 1; display: flex; align-items: center; justify-content: center;
    color: #4a5568; font-size: .9rem;
}

/* CodeMirror dentro del editor de proyectos */
.proj-editor__cm .CodeMirror {
    flex: 1;
    height: 100% !important;
    font-family: 'Fira Code', monospace;
    font-size: .9rem;
    line-height: 1.65;
}
.proj-editor__cm .CodeMirror-scroll { min-height: 100%; }

/* Botones del editor */
.proj-btn {
    padding: 5px 14px;
    border-radius: 6px;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background .12s;
}
.proj-btn--save   { background: #1e40af; color: #bfdbfe; }
.proj-btn--save:hover { background: #1d4ed8; }
.proj-btn--run    { background: #166534; color: #bbf7d0; }
.proj-btn--run:hover  { background: #15803d; }
.proj-btn--xs     { padding: 3px 10px; font-size: .75rem; background: #1e293b; color: #94a3b8; }
.proj-btn--xs:hover { background: #334155; }
.proj-btn--cancel { background: #1e293b; color: #ef4444; }
.proj-btn--cancel:hover { background: #450a0a; }

/* ═══════════════════════════════════════════════════════════════
   DB MANAGER  (workspace/db.php)
   ═══════════════════════════════════════════════════════════════ */
.dbm-layout {
    display: flex;
    height: calc(100vh - var(--nav-h));
    overflow: hidden;
    background: #0f172a;
}

/* ── Sidebar ──────────────────────────────────────────────── */
.dbm-sidebar {
    width: 240px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: #1e293b;
    border-right: 1px solid #334155;
    overflow: hidden;
}
.dbm-sidebar__header {
    padding: 14px 14px 10px;
    border-bottom: 1px solid #334155;
}
.dbm-sidebar__db {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.dbm-sidebar__db-icon { font-size: 1.4rem; }
.dbm-sidebar__db-label { font-size: .68rem; color: #64748b; text-transform: uppercase; letter-spacing: .05em; }
.dbm-sidebar__db-name  { font-size: .78rem; color: #7dd3fc; word-break: break-all; }
.dbm-sidebar__links    { display: flex; flex-direction: column; gap: 4px; }
.dbm-sidebar__link     { font-size: .75rem; color: #94a3b8; text-decoration: none; }
.dbm-sidebar__link:hover { color: #e2e8f0; }

.dbm-sidebar__search { padding: 8px 10px; border-bottom: 1px solid #334155; }
.dbm-sidebar__search-input {
    width: 100%;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 6px;
    color: #e2e8f0;
    padding: 5px 10px;
    font-size: .8rem;
}
.dbm-sidebar__search-input::placeholder { color: #475569; }

.dbm-table-list {
    flex: 1;
    overflow-y: auto;
    list-style: none;
    padding: 6px 0;
}
.dbm-table-list__loading,
.dbm-table-list__empty,
.dbm-table-list__error { padding: 12px 16px; font-size: .8rem; color: #64748b; }
.dbm-table-list__error { color: #f87171; }

.dbm-table-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 14px;
    cursor: pointer;
    border-radius: 6px;
    margin: 1px 6px;
    gap: 8px;
    transition: background .1s;
}
.dbm-table-item:hover { background: #334155; }
.dbm-table-item--active { background: #1d4ed8 !important; }
.dbm-table-item__name  { font-size: .82rem; color: #e2e8f0; font-family: monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dbm-table-item__count { font-size: .7rem; color: #94a3b8; flex-shrink: 0; background: #0f172a; border-radius: 10px; padding: 1px 7px; }
.dbm-table-item--active .dbm-table-item__count { background: #1e40af; color: #bfdbfe; }

/* ── Main ─────────────────────────────────────────────────── */
.dbm-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

/* Estado vacío */
.dbm-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #475569;
    text-align: center;
    padding: 2rem;
}
.dbm-empty__icon  { font-size: 3rem; margin-bottom: 1rem; }
.dbm-empty__title { font-size: 1.2rem; color: #64748b; margin-bottom: .5rem; }
.dbm-empty__sub   { font-size: .9rem; margin-bottom: .75rem; }
.dbm-empty__hint  { font-size: .82rem; color: #334155; }
.dbm-empty__hint a { color: #60a5fa; }

/* Panel de tabla */
.dbm-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}
.dbm-panel__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: #1e293b;
    border-bottom: 1px solid #334155;
    flex-shrink: 0;
    gap: 12px;
}
.dbm-panel__title   { display: flex; align-items: center; gap: 10px; }
.dbm-panel__table-icon { font-size: 1.2rem; }
.dbm-panel__table-name { font-size: 1rem; font-weight: 600; color: #e2e8f0; margin: 0; font-family: monospace; }
.dbm-panel__row-count  { font-size: .75rem; color: #64748b; background: #0f172a; border-radius: 10px; padding: 2px 9px; }
.dbm-panel__actions    { display: flex; gap: 8px; }

.dbm-btn { padding: 5px 12px; border-radius: 6px; font-size: .78rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: background .12s; }
.dbm-btn--danger-ghost { background: transparent; border-color: #7f1d1d; color: #f87171; }
.dbm-btn--danger-ghost:hover { background: #7f1d1d; color: #fff; }

/* Tabs */
.dbm-tabs {
    display: flex;
    gap: 0;
    background: #1a2235;
    border-bottom: 1px solid #334155;
    padding: 0 20px;
    flex-shrink: 0;
}
.dbm-tab {
    padding: 9px 18px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: #64748b;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: color .12s, border-color .12s;
}
.dbm-tab:hover { color: #94a3b8; }
.dbm-tab--active { color: #60a5fa; border-bottom-color: #3b82f6; }

/* Contenido de tabs */
.dbm-tab-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.dbm-data-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    background: #1a2235;
    border-bottom: 1px solid #334155;
    flex-shrink: 0;
}
.dbm-data-search {
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 6px;
    color: #e2e8f0;
    padding: 5px 12px;
    font-size: .8rem;
    width: 220px;
}
.dbm-data-search::placeholder { color: #475569; }
.dbm-data-info { font-size: .75rem; color: #64748b; flex: 1; }

/* Paginación */
.dbm-pagination { display: flex; gap: 4px; }
.dbm-page-btn {
    padding: 3px 9px; border-radius: 5px; font-size: .75rem;
    background: #1e293b; border: 1px solid #334155; color: #94a3b8; cursor: pointer;
}
.dbm-page-btn:hover { background: #334155; color: #e2e8f0; }
.dbm-page-btn--active { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }

/* Tabla de datos */
.dbm-table-wrap {
    flex: 1;
    overflow: auto;
    padding: 0;
}
.dbm-indexes-wrap { padding: 16px 20px; flex-shrink: 0; }
.dbm-section-title { font-size: .82rem; color: #64748b; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }

.dbm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
    white-space: nowrap;
}
.dbm-table thead { position: sticky; top: 0; z-index: 1; }
.dbm-table th {
    background: #1e293b;
    color: #94a3b8;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 8px 14px;
    text-align: left;
    border-bottom: 1px solid #334155;
    font-weight: 600;
}
.dbm-table td {
    padding: 7px 14px;
    color: #cbd5e1;
    border-bottom: 1px solid #1e293b;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dbm-table tbody tr:hover td { background: #1e293b; }
.dbm-th--action { width: 32px; padding: 0 !important; }
.dbm-td--action { width: 32px; padding: 0 4px !important; text-align: center; }

.dbm-null { color: #475569; font-style: italic; font-size: .78rem; }

.dbm-row-delete {
    background: none; border: none; color: #475569;
    cursor: pointer; font-size: .8rem; padding: 2px 5px;
    border-radius: 4px; opacity: 0; transition: opacity .1s, color .1s;
}
.dbm-table tbody tr:hover .dbm-row-delete { opacity: 1; }
.dbm-row-delete:hover { color: #f87171; background: #450a0a; }

.dbm-loading, .dbm-error, .dbm-empty-rows {
    padding: 24px 20px;
    color: #64748b;
    font-size: .88rem;
}
.dbm-error { color: #f87171; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE GLOBAL + PANTALLAS GRANDES
   ═══════════════════════════════════════════════════════════════ */

/* ── Variables de altura del nav ──────────────────────────── */
:root { --nav-h: 60px; }
@media (max-width: 640px) { :root { --nav-h: 52px; } }

/* ── Lesson content: centrado en el área principal ─────────── */
.lesson-content {
    margin-inline: auto;
}

/* ── Pantallas muy grandes (≥1440px) ──────────────────────── */
@media (min-width: 1440px) {
    .topnav { padding-inline: clamp(1.5rem, 4vw, 4rem); }

    .lesson-layout {
        grid-template-columns: 300px 1fr;
    }
    .lesson-sidebar {
        width: 300px;
    }
    .lesson-content {
        max-width: 860px;
        padding: 2.5rem 2.5rem;
    }
}

@media (min-width: 1920px) {
    .lesson-layout {
        grid-template-columns: 320px 1fr;
        max-width: 1920px;
        margin-inline: auto;
    }
    .lesson-content {
        max-width: 900px;
    }
}

/* ── Tablet (641px – 1023px) ──────────────────────────────── */
@media (max-width: 1023px) and (min-width: 641px) {
    .topnav__nav-label { display: none; }
    .topnav__ws-link   { padding: .3rem .4rem; }
}

/* ── Mobile (≤640px): nav compacto ───────────────────────── */
@media (max-width: 640px) {
    .topnav {
        padding: 0 .75rem;
        gap: .35rem;
        height: var(--nav-h);
    }
    .topnav__user      { gap: .2rem; }
    .topnav__progress  { display: none; }          /* barra de progreso → ocultar */
    .topnav__nav-label { display: none; }          /* "Proyectos", "DB" → solo icono */
    .topnav__ws-link   { padding: .3rem .35rem; font-size: .95rem; }
    .user-name         { display: none; }          /* nombre usuario → solo avatar */
    .topnav__tour-btn  { display: none; }          /* tour → ocultar en móvil */
    .brand-link        { font-size: 1rem; letter-spacing: -.02em; }

    /* Sidebar de lección ocupa casi toda la pantalla */
    #lesson-sidebar,
    #lesson-sidebar.sidebar--open {
        width: 90vw !important;
        max-width: 340px !important;
    }

    /* Ajustar cálculos de height al nuevo nav */
    .lesson-sidebar            { height: calc(100vh - var(--nav-h)); top: var(--nav-h); }
    #lesson-sidebar            { top: var(--nav-h) !important; }
    .dbm-layout                { height: calc(100vh - var(--nav-h)); }
    .proj-editor               { height: calc(100vh - var(--nav-h)); }
}

/* ── Mobile: tamaños de toque mínimos (44px) ─────────────── */
@media (max-width: 640px) {
    .sidebar-lesson,
    .step-btn,
    .lesson-nav-btn,
    .proj-file-btn,
    .proj-btn,
    .dbm-tab {
        min-height: 44px;
    }
    .sidebar-lesson {
        padding: .65rem 1.25rem;
        font-size: .9rem;
    }
    .proj-file-btn {
        padding: 10px 12px;
    }

    /* Editor de proyectos: topbar apilado en móvil */
    .proj-editor__topbar {
        flex-wrap: wrap;
        height: auto;
        padding: .5rem .75rem;
        gap: .4rem;
    }
    .proj-editor__actions { gap: .35rem; }
    .proj-btn { padding: 6px 10px; font-size: .78rem; }
    .proj-btn--preview { display: none; } /* preview panel no útil en móvil */

    /* DB manager: sidebar oculto → mostrar solo lista */
    .dbm-sidebar { width: 100%; border-right: none; border-bottom: 1px solid #334155; max-height: 200px; }
    .dbm-layout  { flex-direction: column; height: auto; min-height: calc(100vh - var(--nav-h)); }
    .dbm-main    { min-height: 60vh; }
    .dbm-sidebar__links { flex-direction: row; flex-wrap: wrap; }

    /* Proyectos: cards en columna */
    .proj-grid { grid-template-columns: 1fr !important; }

    /* Contenido de lección */
    .lesson-content { padding: .9rem .75rem; }
    .lesson-body pre { padding: .85rem; font-size: .82rem; overflow-x: auto; }
    .lesson-body code { font-size: .85em; }
    .lesson-body h1 { font-size: 1.3rem; }
    .lesson-body h2 { font-size: 1.15rem; }

    /* Steps bar: scroll horizontal */
    .lesson-steps-bar { padding: .5rem .75rem; }
    .step-btn { font-size: .78rem; padding: .4rem .65rem; }
}

/* ── Mobile: prevenir overflow horizontal global ─────────── */
@media (max-width: 640px) {
    body { overflow-x: hidden; }
    .lesson-body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .sql-table         { display: block; overflow-x: auto; }
}

/* ═══════════════════════════════════════════════════════════════
   MAPA DEL CURSO  (mapa.php)
   ═══════════════════════════════════════════════════════════════ */

/* ── Página ──────────────────────────────────────────────── */
.mapa-page {
    max-width: 980px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}

/* ── Header ──────────────────────────────────────────────── */
.mapa-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}
.mapa-back {
    display: inline-block;
    font-size: .82rem;
    color: var(--text-3);
    margin-bottom: .5rem;
}
.mapa-back:hover { color: var(--primary); text-decoration: none; }
.mapa-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text);
    margin-bottom: .2rem;
}
.mapa-subtitle { font-size: .9rem; color: var(--text-2); }

/* Ring de progreso */
.mapa-progress-ring { position: relative; width: 80px; height: 80px; flex-shrink: 0; }
.mapa-ring-svg { width: 80px; height: 80px; transform: rotate(-90deg); }
.mapa-ring-bg   { fill: none; stroke: var(--border); stroke-width: 6; }
.mapa-ring-fill {
    fill: none;
    stroke: var(--primary);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dashoffset: 0;
    transition: stroke-dasharray .6s ease;
}
.mapa-ring-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .88rem;
    font-weight: 800;
    color: var(--primary);
}

/* ── Módulos ─────────────────────────────────────────────── */
.mapa-modules { display: flex; flex-direction: column; gap: 1.5rem; }

.mapa-module {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    border-top: 3px solid var(--mod-color, var(--primary));
    transition: box-shadow .2s;
}
.mapa-module:hover { box-shadow: var(--shadow-lg); }
.mapa-module--done { opacity: .85; }

.mapa-module__head {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.25rem .75rem;
}
.mapa-module__icon { font-size: 1.6rem; flex-shrink: 0; line-height: 1; }
.mapa-module__info { flex: 1; min-width: 0; }
.mapa-module__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: .1rem;
}
.mapa-module__desc { font-size: .8rem; color: var(--text-3); margin: 0; }
.mapa-module__stat { text-align: right; flex-shrink: 0; }
.mapa-module__count { display: block; font-size: .9rem; font-weight: 700; color: var(--text); }
.mapa-module__pct   { font-size: .75rem; color: var(--text-3); }
.mapa-module__badge {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    color: var(--success);
    background: #F0FDF4;
    border-radius: 99px;
    padding: .15rem .6rem;
}

.mapa-module__bar {
    height: 3px;
    background: var(--surface-2);
    margin: 0 1.25rem .85rem;
    border-radius: 99px;
    overflow: hidden;
}
.mapa-module__bar-fill {
    height: 100%;
    background: var(--mod-color, var(--primary));
    border-radius: 99px;
    transition: width .5s ease;
}

/* ── Lecciones ───────────────────────────────────────────── */
.mapa-lessons {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--border);
}
.mapa-lesson {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .6rem 1.25rem;
    text-decoration: none;
    color: var(--text-2);
    font-size: .88rem;
    border-bottom: 1px solid var(--surface-2);
    transition: background .12s, color .12s;
}
.mapa-lesson:last-child { border-bottom: none; }
.mapa-lesson:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }

.mapa-lesson__num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    font-weight: 700;
    flex-shrink: 0;
    background: var(--surface-2);
    color: var(--text-3);
    border: 1px solid var(--border);
}
.mapa-lesson--done .mapa-lesson__num {
    background: var(--success);
    color: #fff;
    border-color: var(--success);
}
.mapa-lesson--done .mapa-lesson__title { color: var(--text-3); }
.mapa-lesson__title { flex: 1; line-height: 1.3; }

/* ── Tarjeta del mapa en el dashboard ───────────────────── */
.mapa-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.25rem 1.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    text-decoration: none;
    color: var(--text);
    transition: box-shadow .18s, border-color .18s;
}
.mapa-card:hover { box-shadow: var(--shadow-lg); border-color: var(--primary); text-decoration: none; color: var(--text); }
.mapa-card__left  { display: flex; align-items: center; gap: 1rem; }
.mapa-card__icon  { font-size: 2rem; line-height: 1; }
.mapa-card__title { font-size: 1rem; font-weight: 700; margin-bottom: .2rem; }
.mapa-card__sub   { font-size: .82rem; color: var(--text-2); margin: 0; }
.mapa-card__right { display: flex; align-items: center; gap: 1.25rem; flex-shrink: 0; }
.mapa-card__modules { display: flex; gap: .4rem; align-items: center; }
.mapa-card__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: conic-gradient(var(--mod-color, #6366F1) var(--pct, 0%), var(--surface-2) 0%);
    border: 1px solid color-mix(in srgb, var(--mod-color, #6366F1) 40%, transparent);
    flex-shrink: 0;
}
.mapa-card__cta {
    font-size: .82rem;
    font-weight: 600;
    color: var(--primary);
    white-space: nowrap;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 640px) {
    .mapa-page { padding: 1rem .75rem 3rem; }
    .mapa-header { flex-direction: column; align-items: flex-start; gap: .75rem; }
    .mapa-progress-ring { display: none; }
    .mapa-title { font-size: 1.35rem; }
    .mapa-module__head { flex-wrap: wrap; gap: .6rem; }
    .mapa-card { flex-direction: column; align-items: flex-start; gap: .75rem; }
    .mapa-card__right { width: 100%; justify-content: space-between; }
}

/* ============================================================
   PROJECT SPECS
   ============================================================ */
body.page-project-specs {
    background:
        radial-gradient(circle at top left, rgba(99, 102, 241, .12), transparent 28%),
        radial-gradient(circle at top right, rgba(16, 185, 129, .10), transparent 22%),
        linear-gradient(180deg, #eef4ff 0%, #f8fafc 24%, #f8fafc 100%);
}

.btn--ghost {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-2);
}
.btn--ghost:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }

.spec-page { padding: 1.75rem 1.25rem 3rem; }
.spec-shell {
    max-width: 1460px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.spec-nav {
    position: sticky;
    top: calc(var(--nav-h) + 1rem);
    background: rgba(15, 23, 42, .96);
    color: #e2e8f0;
    border-radius: 24px;
    padding: 1.35rem;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .24);
    overflow: hidden;
}
.spec-nav::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(99,102,241,.18), transparent 40%, rgba(16,185,129,.14));
    pointer-events: none;
}
.spec-nav > * { position: relative; z-index: 1; }
.spec-nav__project { margin-bottom: 1.1rem; }
.spec-nav__eyebrow,
.spec-topbar__eyebrow,
.spec-section__eyebrow {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.spec-nav__eyebrow { color: #93c5fd; margin-bottom: .35rem; }
.spec-nav__title { font-size: 1.35rem; line-height: 1.15; margin-bottom: .2rem; }
.spec-nav__slug { color: #94a3b8; font-family: var(--font-mono); font-size: .8rem; }

.spec-nav__progress {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    border-top: 1px solid rgba(148, 163, 184, .18);
    border-bottom: 1px solid rgba(148, 163, 184, .18);
    margin-bottom: 1rem;
}
.spec-nav__ring {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at center, #0f172a 52%, transparent 53%),
        conic-gradient(#818cf8, #60a5fa, #34d399, #818cf8);
    color: #fff;
    font-weight: 800;
    box-shadow: inset 0 0 0 6px rgba(15,23,42,.86);
}
.spec-nav__progress-text { font-size: .86rem; color: #cbd5e1; max-width: 130px; line-height: 1.3; }

.spec-nav__links {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin-bottom: 1rem;
}
.spec-nav__links a {
    color: #cbd5e1;
    text-decoration: none;
    padding: .55rem .7rem;
    border-radius: 12px;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}
.spec-nav__links a:hover {
    background: rgba(255,255,255,.08);
    color: #fff;
    transform: translateX(2px);
    text-decoration: none;
}
.spec-nav__actions { display: flex; flex-direction: column; gap: .55rem; }
.spec-nav__btn { width: 100%; text-align: center; }

.spec-main { display: flex; flex-direction: column; gap: 1.25rem; }
.spec-topbar,
.spec-section,
.spec-summary__card {
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(10px);
}
.spec-topbar {
    border: 1px solid rgba(226, 232, 240, .9);
    border-radius: 24px;
    padding: 1.25rem 1.4rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    box-shadow: var(--shadow-lg);
}
.spec-topbar__eyebrow { color: var(--primary); margin-bottom: .35rem; }
.spec-topbar__title { font-size: 1.55rem; line-height: 1.15; margin-bottom: .3rem; }
.spec-topbar__subtitle { color: var(--text-2); max-width: 760px; }
.spec-topbar__links { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: flex-end; }

.spec-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .55rem .9rem;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-2);
    font-weight: 600;
    text-decoration: none;
}
.spec-pill--active {
    background: linear-gradient(135deg, #1d4ed8, #4f46e5);
    color: #fff;
}

.spec-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .9rem;
}
.spec-summary__card {
    border: 1px solid rgba(226, 232, 240, .9);
    border-radius: 20px;
    padding: 1rem 1.1rem;
    box-shadow: var(--shadow);
}
.spec-summary__label {
    display: block;
    color: var(--text-3);
    font-size: .8rem;
    margin-bottom: .45rem;
}
.spec-summary__card strong { font-size: 1.55rem; line-height: 1; }

.spec-section {
    border-radius: 24px;
    padding: 1.35rem;
    border: 1px solid rgba(226, 232, 240, .95);
    box-shadow: var(--shadow);
}

.spec-section__head,
.spec-card__head,
.spec-field-row__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
}
.spec-section__head { margin-bottom: 1rem; }
.spec-section__eyebrow { color: #64748b; margin-bottom: .25rem; }
.spec-section__head h3 { font-size: 1.3rem; }
.spec-section__actions,
.spec-card__head-actions,
.spec-upload-panel__actions { display: flex; gap: .55rem; flex-wrap: wrap; align-items: center; }
.spec-section__toggle {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    border: 1px solid #dbe5f0;
    background: #fff;
    color: var(--text-2);
    border-radius: 999px;
    padding: .55rem .85rem;
    font: inherit;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(15,23,42,.05);
}
.spec-section__toggle:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
}
.spec-section__toggle-icon {
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    transition: transform .18s ease;
}
.spec-section--collapsed .spec-section__toggle-icon {
    transform: rotate(-45deg) translateY(1px);
}
.spec-section__body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.spec-section__body[hidden] {
    display: none !important;
}
.spec-section__toolbar {
    display: flex;
    justify-content: flex-end;
    gap: .55rem;
    flex-wrap: wrap;
    align-items: center;
}
.spec-section--collapsed .spec-section__head {
    margin-bottom: 0;
}

.spec-grid { display: grid; gap: .9rem; }
.spec-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.spec-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.spec-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.spec-field--full { grid-column: 1 / -1; }
.spec-field--wide { grid-column: span 2; }

.spec-field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.spec-field span {
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-2);
}
.spec-field input,
.spec-field select,
.spec-field textarea,
.spec-upload-panel input[type="file"] {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    background: #fff;
    color: var(--text);
    font: inherit;
    padding: .8rem .9rem;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.spec-field textarea { resize: vertical; min-height: 96px; }
.spec-field input:focus,
.spec-field select:focus,
.spec-field textarea:focus,
.spec-upload-panel input[type="file"]:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(99,102,241,.12);
}

.spec-repeater,
.spec-data-model,
.spec-roadmap,
.spec-checklist {
    display: flex;
    flex-direction: column;
    gap: .9rem;
}

.spec-card {
    background: linear-gradient(180deg, rgba(248,250,252,.94), rgba(255,255,255,.98));
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 1rem;
}
.spec-card--panel { height: 100%; }
.spec-card--table { padding-bottom: 1.1rem; }
.spec-card__head { margin-bottom: .85rem; }
.spec-card__head h4 { font-size: 1rem; }

.spec-remove {
    border: none;
    background: transparent;
    color: #dc2626;
    font-weight: 700;
    cursor: pointer;
}
.spec-remove--text { font-size: .86rem; }

.spec-empty {
    padding: 1rem 1.1rem;
    border: 1px dashed #cbd5e1;
    border-radius: 16px;
    color: var(--text-3);
    background: rgba(248,250,252,.7);
}

.spec-upload-panel {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px dashed #94a3b8;
    border-radius: 18px;
    padding: 1rem 1.1rem;
    background: rgba(241,245,249,.75);
}
.spec-upload-panel p {
    color: var(--text-2);
    font-size: .9rem;
    margin-top: .2rem;
}

.spec-attachments {
    margin-top: .9rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}
.spec-attachment {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: .85rem 1rem;
    background: #fff;
}
.spec-attachment strong { display: block; }
.spec-attachment span { color: var(--text-3); font-size: .82rem; }
.spec-attachment__actions { display: flex; align-items: center; gap: .75rem; }
.spec-inline-link { font-weight: 600; }

.spec-data-model .spec-fields-list {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-top: .9rem;
}
.spec-field-row {
    border: 1px solid #dbe5f0;
    border-radius: 18px;
    padding: .9rem;
    background: #fff;
}
.spec-field-row__head { margin-bottom: .75rem; }
.spec-check-row {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    align-items: center;
}
.spec-check {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem .8rem;
    border-radius: 999px;
    border: 1px solid #dbe5f0;
    background: #fff;
    font-size: .86rem;
    font-weight: 600;
    color: var(--text-2);
}
.spec-check input { accent-color: var(--primary); }

.spec-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.spec-card--roadmap {
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(15,23,42,.06);
}

.spec-roadmap-log {
    margin-top: 1rem;
}
.spec-log-item {
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: .85rem 1rem;
    background: #fff;
}
.spec-log-item + .spec-log-item {
    margin-top: .7rem;
}
.spec-log-item span,
.spec-checklist__item p {
    color: var(--text-3);
    font-size: .84rem;
}
.spec-log-item p,
.spec-checklist__item p {
    margin-top: .28rem;
}

.spec-checklist-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .85rem;
    margin-bottom: .2rem;
}
.spec-checklist-summary__card {
    border: 1px solid #dbe5f0;
    border-radius: 16px;
    padding: .95rem 1rem;
    background: linear-gradient(180deg, rgba(248,250,252,.94), rgba(255,255,255,.98));
}
.spec-checklist-summary__card strong {
    display: block;
    font-size: 1.15rem;
}
.spec-checklist-summary__card span {
    color: var(--text-3);
    font-size: .84rem;
}

.spec-checklist__item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .8rem .95rem;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    background: #fff;
}
.spec-checklist__item--done {
    background: linear-gradient(135deg, rgba(16,185,129,.08), rgba(52,211,153,.04));
    border-color: rgba(16,185,129,.25);
}
.spec-checklist__icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #e2e8f0;
    color: var(--text-2);
    font-size: .76rem;
    font-weight: 800;
}
.spec-checklist__item--done .spec-checklist__icon {
    background: #10b981;
    color: #fff;
}

@media (max-width: 1200px) {
    .spec-shell { grid-template-columns: 1fr; }
    .spec-nav { position: static; }
    .spec-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 840px) {
    .spec-page { padding-inline: .75rem; }
    .spec-topbar,
    .spec-upload-panel,
    .spec-section__head { flex-direction: column; align-items: flex-start; }
    .spec-grid--2,
    .spec-grid--3,
    .spec-grid--4,
    .spec-split,
    .spec-summary,
    .spec-checklist-summary { grid-template-columns: 1fr; }
    .spec-field--wide { grid-column: auto; }
    .spec-check-row { flex-direction: column; align-items: flex-start; }
    .spec-attachment { flex-direction: column; align-items: flex-start; }
    .spec-section__toolbar { justify-content: flex-start; }
}