/* ── InverNovaK Dashboard ───────────────────────────────────────────────
   Todo scopeado bajo .invkd-portal para no afectar el resto del sitio
──────────────────────────────────────────────────────────────────────── */

.invkd-portal {
    /* Tokens de diseño */
    --invkd-bg-0:       #070910;
    --invkd-bg-1:       #0c0f1e;
    --invkd-bg-card:    #101423;
    --invkd-bg-input:   #181c32;
    --invkd-border:     rgba(255,255,255,.07);
    --invkd-border-h:   rgba(255,255,255,.13);
    --invkd-txt-1:      #ffffff;
    --invkd-txt-2:      #8892b0;
    --invkd-txt-3:      #4d5678;
    --invkd-accent:     #2563eb;
    --invkd-teal:       #06d6f0;
    --invkd-orange:     #f97316;
    --invkd-green:      #22c55e;
    --invkd-purple:     #a855f7;
    --invkd-red:        #ef4444;
    --invkd-sidebar-w:  210px;
    --invkd-radius:     12px;
    --invkd-t:          .17s ease;
}

/* Reset */
.invkd-portal *, .invkd-portal *::before, .invkd-portal *::after {
    box-sizing: border-box; margin: 0; padding: 0;
}
.invkd-portal a { text-decoration: none; color: inherit; }
.invkd-portal button { cursor: pointer; background: none; border: none; font-family: inherit; color: inherit; }
.invkd-portal input  { font-family: inherit; }

/* Shell */
.invkd-portal {
    display: flex;
    min-height: 100vh;
    background: var(--invkd-bg-0);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    color: var(--invkd-txt-1);
    line-height: 1.5;
}

/* ── Sidebar ─────────────────────────────────────────────────────────── */
.invkd-sidebar {
    width: var(--invkd-sidebar-w);
    flex-shrink: 0;
    background: var(--invkd-bg-1);
    border-right: 1px solid var(--invkd-border);
    display: flex;
    flex-direction: column;
    padding: 1.25rem .75rem;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.invkd-brand { display: flex; align-items: center; gap: .625rem; padding-bottom: 1rem; border-bottom: 1px solid var(--invkd-border); margin-bottom: .75rem; }
.invkd-brand-name { font-size: .875rem; font-weight: 700; }
.invkd-brand-sub  { font-size: .6rem;   color: var(--invkd-txt-3); letter-spacing: .08em; }

.invkd-nav { display: flex; flex-direction: column; gap: .15rem; }
.invkd-sidebar-footer { margin-top: auto; padding-top: .875rem; border-top: 1px solid var(--invkd-border); display: flex; flex-direction: column; gap: .15rem; }

.invkd-nav-item {
    display: flex; align-items: center; gap: .625rem;
    padding: .55rem .75rem; border-radius: 8px;
    color: var(--invkd-txt-2); font-size: .8125rem; font-weight: 500;
    transition: background var(--invkd-t), color var(--invkd-t), border-color var(--invkd-t);
    border-left: 2px solid transparent;
}
.invkd-nav-item:hover { background: rgba(255,255,255,.05); color: var(--invkd-txt-1); }
.invkd-nav-item.is-active {
    background: rgba(6,214,240,.08);
    color: var(--invkd-teal);
    border-left-color: var(--invkd-teal);
}
.invkd-logout:hover { color: var(--invkd-red); }

/* ── Main ────────────────────────────────────────────────────────────── */
.invkd-main {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
    overflow-x: hidden;
    /* Espacio para que los botones flotantes no tapen el último bloque */
    padding-bottom: 5rem;
}

/* ── Topbar ──────────────────────────────────────────────────────────── */
.invkd-topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .875rem 1.5rem;
    border-bottom: 1px solid var(--invkd-border);
    background: var(--invkd-bg-1);
    position: sticky; top: 0; z-index: 50;
}
.invkd-search {
    display: flex; align-items: center; gap: .5rem;
    background: var(--invkd-bg-input); border: 1px solid var(--invkd-border);
    border-radius: 9999px; padding: .45rem 1rem;
    flex: 1; max-width: 360px;
    color: var(--invkd-txt-3);
}
.invkd-search input { background: none; border: none; outline: none; color: var(--invkd-txt-2); font-size: .82rem; flex: 1; }
.invkd-search input::placeholder { color: var(--invkd-txt-3); }

.invkd-topbar-right { display: flex; align-items: center; gap: .75rem; }
.invkd-icon-btn {
    width: 34px; height: 34px; border-radius: 8px;
    background: var(--invkd-bg-card); border: 1px solid var(--invkd-border);
    display: grid; place-items: center; color: var(--invkd-txt-2);
    transition: border-color var(--invkd-t);
}
.invkd-icon-btn:hover { border-color: var(--invkd-border-h); color: var(--invkd-txt-1); }

/* El chip es ahora un <a> — quitar subrayado, mantener colores */
a.invkd-user-chip {
    display: flex; align-items: center; gap: .6rem;
    text-decoration: none; color: inherit;
    border-radius: 10px; padding: .3rem .45rem;
    transition: background var(--invkd-t);
    margin-right: -.45rem;
}
a.invkd-user-chip:hover { background: rgba(255,255,255,.05); }
a.invkd-user-chip:hover .invkd-avatar { border-color: var(--invkd-accent); }

.invkd-user-chip { display: flex; align-items: center; gap: .6rem; }
.invkd-user-info { display: flex; flex-direction: column; align-items: flex-end; gap: .1rem; }
.invkd-user-name { font-size: .82rem; font-weight: 600; }
.invkd-plan-badge {
    font-size: .58rem; font-weight: 700; letter-spacing: .07em;
    background: rgba(249,115,22,.15); color: var(--invkd-orange);
    border: 1px solid rgba(249,115,22,.3); border-radius: 4px; padding: .1rem .35rem;
}
.invkd-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    object-fit: cover; border: 2px solid var(--invkd-teal);
    flex-shrink: 0; transition: border-color var(--invkd-t);
}
.invkd-avatar-fallback {
    display: flex; align-items: center; justify-content: center;
    background: var(--invkd-accent); color: #fff;
    font-size: .78rem; font-weight: 700;
}

/* ── Hero ────────────────────────────────────────────────────────────── */
.invkd-hero {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.25rem;
    padding: 1.75rem 1.5rem;
    background-color: var(--invkd-bg-1);
    background-size: cover;
    background-position: center right;
    border-bottom: 1px solid var(--invkd-border);
}

.invkd-hero-content { display: flex; flex-direction: column; gap: .875rem; }

.invkd-module-badge {
    display: inline-block; font-size: .62rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--invkd-orange);
    background: rgba(249,115,22,.12); border: 1px solid rgba(249,115,22,.3);
    border-radius: 4px; padding: .25rem .6rem; width: fit-content;
}
.invkd-hero-title { font-size: 1.9rem; font-weight: 800; line-height: 1.2; max-width: 520px; }

.invkd-hprog-labels { display: flex; justify-content: space-between; font-size: .78rem; color: var(--invkd-txt-2); margin-bottom: .4rem; }
.invkd-hprog-pct { color: var(--invkd-teal); font-weight: 700; }
.invkd-hprog-track { height: 6px; background: rgba(255,255,255,.1); border-radius: 9999px; overflow: hidden; max-width: 480px; }
.invkd-hprog-fill  { height: 100%; background: linear-gradient(90deg, var(--invkd-accent) 0%, var(--invkd-teal) 100%); border-radius: 9999px; transition: width .6s ease; }

.invkd-hero-actions { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.invkd-btn-primary {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .65rem 1.4rem; background: var(--invkd-teal); color: #050a14;
    font-size: .875rem; font-weight: 700; border-radius: 8px;
    transition: opacity var(--invkd-t);
}
.invkd-btn-primary:hover { opacity: .88; }
.invkd-btn-ghost {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .65rem 1.4rem; border: 1px solid var(--invkd-border-h);
    color: var(--invkd-txt-1); font-size: .875rem; font-weight: 600;
    border-radius: 8px; transition: background var(--invkd-t), border-color var(--invkd-t);
}
.invkd-btn-ghost:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); }

/* Panel derecho del hero */
.invkd-hero-aside { display: flex; flex-direction: column; gap: .875rem; }
.invkd-aside-card {
    background: rgba(16,20,35,.85);
    border: 1px solid var(--invkd-border-h);
    border-radius: var(--invkd-radius);
    padding: 1rem;
    backdrop-filter: blur(6px);
}
.invkd-aside-card-label { font-size: .6rem; font-weight: 700; letter-spacing: .1em; color: var(--invkd-txt-3); text-transform: uppercase; margin-bottom: .5rem; }
.invkd-aside-icon-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.invkd-aside-icon { font-size: 1.2rem; }
.invkd-aside-title { font-size: .95rem; font-weight: 700; }
.invkd-aside-body { font-size: .78rem; color: var(--invkd-txt-2); line-height: 1.55; margin-bottom: .75rem; }
.invkd-aside-suggest {
    display: flex; align-items: center; justify-content: space-between;
    font-size: .7rem; color: var(--invkd-txt-3);
}
.invkd-btn-optimize {
    font-size: .68rem; font-weight: 700; letter-spacing: .06em;
    background: var(--invkd-orange); color: #fff;
    border-radius: 4px; padding: .25rem .625rem;
    transition: opacity var(--invkd-t);
}
.invkd-btn-optimize:hover { opacity: .85; }

.invkd-tutor-card { background: rgba(10,8,24,.85); border-color: rgba(168,85,247,.2); }
.invkd-tutor-quote { font-size: .82rem; font-style: italic; color: var(--invkd-txt-2); line-height: 1.6; margin-bottom: .5rem; }
.invkd-tutor-name  { font-size: .72rem; color: var(--invkd-txt-3); font-style: normal; }

/* ── Secciones ───────────────────────────────────────────────────────── */
.invkd-section { padding: 1.75rem 1.5rem; border-bottom: 1px solid var(--invkd-border); }
.invkd-section-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.25rem; gap: 1rem; }
.invkd-section-title { font-size: 1.15rem; font-weight: 700; }
.invkd-section-sub   { font-size: .78rem; color: var(--invkd-txt-2); margin-top: .2rem; }
.invkd-section-link  { display: flex; align-items: center; gap: .3rem; font-size: .8rem; color: var(--invkd-teal); white-space: nowrap; flex-shrink: 0; }
.invkd-section-link:hover { text-decoration: underline; }

/* ── Cursos grid ─────────────────────────────────────────────────────── */
.invkd-courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.invkd-course-card {
    background: var(--invkd-bg-card);
    border: 1px solid var(--invkd-border);
    border-radius: var(--invkd-radius);
    padding: 1.1rem;
    display: flex; flex-direction: column; gap: .6rem;
    transition: border-color var(--invkd-t), transform var(--invkd-t);
}
.invkd-course-card:hover { border-color: var(--invkd-border-h); transform: translateY(-2px); }

.invkd-course-card-top { display: flex; align-items: flex-start; justify-content: space-between; }

/* SVG ring progress */
.invkd-ring-wrap { position: relative; width: 60px; height: 60px; }
.invkd-ring-svg  { width: 60px; height: 60px; transform: rotate(-90deg); }
.invkd-ring-bg   { stroke: rgba(255,255,255,.08); }
.invkd-ring-fill { stroke: var(--invkd-teal); transition: stroke-dasharray .6s ease; }
.invkd-ring-pct  {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 700; color: var(--invkd-txt-1);
}

/* Three-dot menu */
.invkd-more-btn { position: relative; color: var(--invkd-txt-3); padding: .25rem; border-radius: 4px; transition: background var(--invkd-t); }
.invkd-more-btn:hover { background: rgba(255,255,255,.07); color: var(--invkd-txt-1); }
.invkd-more-menu {
    position: absolute; top: 100%; left: 0; min-width: 140px;
    background: var(--invkd-bg-card); border: 1px solid var(--invkd-border-h);
    border-radius: 8px; padding: .35rem; z-index: 30;
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity var(--invkd-t), visibility var(--invkd-t), transform var(--invkd-t);
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.invkd-more-btn.is-open .invkd-more-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.invkd-more-menu a {
    display: block; padding: .45rem .625rem; border-radius: 5px;
    font-size: .8rem; color: var(--invkd-txt-2);
    transition: background var(--invkd-t), color var(--invkd-t);
}
.invkd-more-menu a:hover { background: rgba(255,255,255,.06); color: var(--invkd-txt-1); }

.invkd-course-title { font-size: .875rem; font-weight: 600; line-height: 1.35; }
.invkd-course-title a { color: var(--invkd-txt-1); transition: color var(--invkd-t); }
.invkd-course-title a:hover { color: var(--invkd-teal); }
.invkd-course-desc  { font-size: .75rem; color: var(--invkd-txt-2); line-height: 1.5; flex: 1; }
.invkd-course-meta  { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: auto; }
.invkd-meta-lessons { font-size: .7rem; background: rgba(255,255,255,.07); border-radius: 4px; padding: .2rem .5rem; color: var(--invkd-txt-2); }
.invkd-meta-level   { font-size: .7rem; border: 1px solid; border-radius: 4px; padding: .2rem .5rem; }

/* Explorar card */
.invkd-explore-card {
    border-style: dashed; border-color: var(--invkd-border-h);
    align-items: center; justify-content: center; text-align: center;
    background: transparent;
}
.invkd-explore-icon { color: var(--invkd-txt-3); margin-bottom: .5rem; }
.invkd-explore-card .invkd-course-title { color: var(--invkd-txt-2); }
.invkd-explore-card .invkd-course-desc  { color: var(--invkd-txt-3); font-size: .72rem; }
.invkd-explore-btn {
    display: inline-block; margin-top: .5rem;
    font-size: .75rem; color: var(--invkd-teal); font-weight: 600;
}
.invkd-explore-btn:hover { text-decoration: underline; }

/* ── Blueprints grid ─────────────────────────────────────────────────── */
.invkd-blueprints-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.1rem;
}

.invkd-bp-card {
    background: var(--invkd-bg-card);
    border: 1px solid var(--invkd-border);
    border-radius: var(--invkd-radius);
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: border-color var(--invkd-t), transform var(--invkd-t);
}
.invkd-bp-card:hover { border-color: var(--invkd-border-h); transform: translateY(-2px); }

.invkd-bp-img {
    height: 150px;
    background: var(--invkd-bg-input) center/cover no-repeat;
    position: relative;
}
.invkd-bp-bookmark {
    position: absolute; top: .75rem; right: .75rem;
    width: 28px; height: 28px; border-radius: 6px;
    background: rgba(0,0,0,.5); color: #fff;
    display: grid; place-items: center;
    backdrop-filter: blur(4px);
    transition: background var(--invkd-t);
}
.invkd-bp-bookmark:hover { background: rgba(0,0,0,.75); }

.invkd-bp-body { padding: 1rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.invkd-bp-cat  { font-size: .62rem; font-weight: 700; letter-spacing: .09em; color: var(--invkd-teal); text-transform: uppercase; }
.invkd-bp-title { font-size: .9rem; font-weight: 700; line-height: 1.3; }
.invkd-bp-desc  { font-size: .75rem; color: var(--invkd-txt-2); line-height: 1.55; flex: 1; }
.invkd-bp-link  {
    display: inline-block; font-size: .78rem; color: var(--invkd-txt-2);
    margin-top: auto; padding-top: .5rem;
    border-top: 1px solid var(--invkd-border);
    transition: color var(--invkd-t);
}
.invkd-bp-link:hover { color: var(--invkd-teal); }

/* ── Botones flotantes ───────────────────────────────────────────────── */
.invkd-float-consult {
    position: fixed; bottom: 1.5rem; left: calc(var(--invkd-sidebar-w) + 1.5rem);
    display: flex; align-items: center; gap: .5rem;
    padding: .6rem 1.1rem;
    background: var(--invkd-bg-card); border: 1px solid var(--invkd-border-h);
    border-radius: 9999px; color: var(--invkd-txt-1);
    font-size: .8rem; font-weight: 600;
    box-shadow: 0 4px 20px rgba(0,0,0,.4);
    z-index: 100;
    transition: background var(--invkd-t), border-color var(--invkd-t);
}
.invkd-float-consult:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); }

.invkd-float-chat {
    position: fixed; bottom: 1.5rem; right: 1.5rem;
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--invkd-teal); color: #050a14;
    display: grid; place-items: center;
    box-shadow: 0 4px 20px rgba(6,214,240,.3);
    z-index: 100;
    transition: opacity var(--invkd-t);
}
.invkd-float-chat:hover { opacity: .88; }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .invkd-hero { grid-template-columns: 1fr; }
    .invkd-hero-aside { flex-direction: row; }
    .invkd-aside-card { flex: 1; }
}
@media (max-width: 900px) {
    .invkd-hero-aside { flex-direction: column; }
}
@media (max-width: 768px) {
    .invkd-sidebar { display: none; }
    .invkd-float-consult { left: 1rem; }
    .invkd-hero-title { font-size: 1.4rem; }
}