/* ==========================================================================
   SinergIA · Sistema de diseño «Claro futurista»
   Cristal, profundidad 3D, degradados de marca y movimiento sutil.
   El color de marca llega como --sa-primary desde el servidor (Admin → Configuración).
   ========================================================================== */

:root {
    --sa-primary: #0f8f8c;
    --sa-primary-rgb: 15, 143, 140;
    --sa-cyan: #19c8e0;
    --sa-blue: #3366ff;
    --sa-violet: #7c5cff;
    --sa-amber: #ffb224;
    --sa-rose: #ff5c8a;

    --sa-ink: #0b2545;
    --sa-ink-soft: #2c4468;
    --sa-muted: #62728a;
    --sa-bg: #f1f6fb;
    --sa-card: rgba(255, 255, 255, .78);
    --sa-card-solid: #ffffff;
    --sa-line: rgba(11, 37, 69, .09);
    --sa-glass-border: rgba(255, 255, 255, .85);

    --sa-grad: linear-gradient(135deg, var(--sa-primary) 0%, var(--sa-cyan) 60%, var(--sa-blue) 120%);
    --sa-grad-soft: linear-gradient(135deg, rgba(var(--sa-primary-rgb), .14), rgba(51, 102, 255, .10));
    --sa-shadow-1: 0 1px 2px rgba(11, 37, 69, .05), 0 10px 28px -12px rgba(11, 37, 69, .18);
    --sa-shadow-2: 0 2px 4px rgba(11, 37, 69, .05), 0 18px 40px -14px rgba(11, 37, 69, .24);
    --sa-shadow-3d: 0 2px 4px rgba(11, 37, 69, .05), 0 22px 44px -16px rgba(11, 37, 69, .28), 0 44px 80px -36px rgba(var(--sa-primary-rgb), .45);
    --sa-radius: 20px;
    --sa-radius-sm: 12px;

    /* Puente con Bootstrap */
    --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --bs-body-bg: var(--sa-bg);
    --bs-body-color: var(--sa-ink);
    --bs-secondary-color: var(--sa-muted);
    --bs-border-color: var(--sa-line);
    --bs-primary: var(--sa-primary);
    --bs-primary-rgb: var(--sa-primary-rgb);
    --bs-link-color: var(--sa-primary);
    --bs-link-color-rgb: var(--sa-primary-rgb);
    --bs-link-hover-color: color-mix(in srgb, var(--sa-primary) 70%, #000);
    --bs-border-radius: 12px;
    --bs-border-radius-lg: 18px;
}

[data-bs-theme="dark"] {
    --sa-ink: #e6eefb;
    --sa-ink-soft: #b9c8e2;
    --sa-muted: #93a4c0;
    --sa-bg: #060d1c;
    --sa-card: rgba(20, 34, 62, .66);
    --sa-card-solid: #12203c;
    --sa-line: rgba(255, 255, 255, .09);
    --sa-glass-border: rgba(255, 255, 255, .10);
    --sa-grad-soft: linear-gradient(135deg, rgba(var(--sa-primary-rgb), .22), rgba(51, 102, 255, .16));
    --sa-shadow-1: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px -12px rgba(0, 0, 0, .6);
    --sa-shadow-2: 0 2px 4px rgba(0, 0, 0, .3), 0 18px 40px -14px rgba(0, 0, 0, .7);
    --sa-shadow-3d: 0 2px 4px rgba(0, 0, 0, .35), 0 22px 44px -16px rgba(0, 0, 0, .75), 0 44px 80px -36px rgba(var(--sa-primary-rgb), .5);
    --bs-body-bg: var(--sa-bg);
    --bs-body-color: var(--sa-ink);
    --bs-tertiary-bg: rgba(255, 255, 255, .05);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body {
    font-family: var(--bs-body-font-family);
    background: var(--sa-bg);
    color: var(--sa-ink);
    -webkit-font-smoothing: antialiased;
    position: relative;
    overflow-x: hidden;
}
/* Malla de color + cuadrícula técnica detrás de todo */
body::before {
    content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
    background:
        radial-gradient(900px 520px at 8% -8%, rgba(var(--sa-primary-rgb), .20), transparent 60%),
        radial-gradient(760px 520px at 96% 4%, rgba(51, 102, 255, .16), transparent 60%),
        radial-gradient(800px 600px at 70% 108%, rgba(124, 92, 255, .12), transparent 60%),
        var(--sa-bg);
}
body::after {
    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
    background-image: linear-gradient(var(--sa-line) 1px, transparent 1px), linear-gradient(90deg, var(--sa-line) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 72%);
    mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 72%);
}
h1, h2, h3, h4, h5, h6, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 { letter-spacing: -.02em; font-weight: 800; color: var(--sa-ink); }
.display-5, .display-6, .fs-1, .fs-2, .fs-3 { font-family: 'Sora', var(--bs-body-font-family); }
.text-body-secondary { color: var(--sa-muted) !important; }
a { text-underline-offset: 3px; }
::selection { background: rgba(var(--sa-primary-rgb), .25); }

/* ---------- Cristal y tarjetas ---------- */
.glass, .card {
    background: var(--sa-card);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    backdrop-filter: blur(16px) saturate(1.5);
    border: 1px solid var(--sa-glass-border);
    border-radius: var(--sa-radius);
    box-shadow: var(--sa-shadow-1);
}
.card { --bs-card-border-color: transparent; --bs-card-bg: transparent; --bs-card-cap-bg: transparent; color: var(--sa-ink); }
.card-header { background: transparent; border-bottom: 1px solid var(--sa-line); font-weight: 700; padding: .9rem 1.15rem; }
.card-footer { background: transparent; border-top: 1px solid var(--sa-line); }
.card-body { padding: 1.15rem; }
.card-img-top { border-radius: var(--sa-radius) var(--sa-radius) 0 0; }
a.card { transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s; }
a.card:not(.tilt):hover { transform: translateY(-4px); box-shadow: var(--sa-shadow-2); }
.list-group { --bs-list-group-bg: transparent; --bs-list-group-border-color: var(--sa-line); --bs-list-group-color: var(--sa-ink); }
.list-group-item { background: transparent; }
.accordion { --bs-accordion-bg: transparent; --bs-accordion-border-color: var(--sa-line); --bs-accordion-btn-bg: transparent; --bs-accordion-active-bg: rgba(var(--sa-primary-rgb), .08); --bs-accordion-active-color: var(--sa-ink); --bs-accordion-border-radius: var(--sa-radius); --bs-accordion-inner-border-radius: var(--sa-radius); }
.accordion-item { background: var(--sa-card); border: 1px solid var(--sa-glass-border); margin-bottom: .6rem; border-radius: var(--sa-radius) !important; overflow: hidden; box-shadow: var(--sa-shadow-1); }
.accordion-button { font-weight: 700; color: var(--sa-ink); box-shadow: none !important; }
.accordion-button:not(.collapsed) { color: var(--sa-primary); }

/* Profundidad 3D: inclinación con el ratón (js/fx.js) */
.tilt {
    transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform .18s ease-out, box-shadow .3s;
    will-change: transform; position: relative;
}
.tilt::after {                                      /* foco de luz que sigue al cursor */
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .55), transparent 60%);
    mix-blend-mode: soft-light;
}
.tilt:hover { box-shadow: var(--sa-shadow-3d); }
.tilt:hover::after { opacity: 1; }

/* Entrada al hacer scroll */
.js .reveal { opacity: 0; transform: translateY(26px) scale(.985); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--d, 0s); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- Botones (relieve 3D «pulsable») ---------- */
.btn { border-radius: 14px; font-weight: 700; letter-spacing: -.005em; transition: transform .15s, box-shadow .2s, background .2s, filter .2s; }
.btn-primary {
    --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-disabled-color: #fff;
    border: 0; color: #fff; background: var(--sa-grad);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(0, 0, 0, .14), 0 6px 0 -1px color-mix(in srgb, var(--sa-primary) 62%, #001a2c), 0 14px 22px -8px rgba(var(--sa-primary-rgb), .55);
}
.btn-primary:hover { color: #fff; filter: brightness(1.06); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(0, 0, 0, .14), 0 8px 0 -1px color-mix(in srgb, var(--sa-primary) 62%, #001a2c), 0 20px 28px -8px rgba(var(--sa-primary-rgb), .6); }
.btn-primary:active, .btn-primary:focus-visible { color: #fff; transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 2px 0 -1px color-mix(in srgb, var(--sa-primary) 62%, #001a2c), 0 6px 12px -6px rgba(var(--sa-primary-rgb), .5); }
.btn-primary:disabled { opacity: .6; transform: none; }
.btn-sm { border-radius: 11px; }
.btn-lg { border-radius: 16px; padding: .85rem 1.6rem; }
.btn-outline-primary, .btn-outline-secondary, .btn-outline-danger, .btn-outline-success, .btn-outline-warning {
    background: var(--sa-card); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 1px 2px rgba(11, 37, 69, .06);
}
.btn-outline-secondary { --bs-btn-color: var(--sa-ink-soft); --bs-btn-border-color: var(--sa-line); --bs-btn-hover-bg: rgba(var(--sa-primary-rgb), .10); --bs-btn-hover-color: var(--sa-primary); --bs-btn-hover-border-color: rgba(var(--sa-primary-rgb), .4); --bs-btn-active-bg: rgba(var(--sa-primary-rgb), .16); --bs-btn-active-color: var(--sa-primary); }
.btn-outline-primary { --bs-btn-color: var(--sa-primary); --bs-btn-border-color: rgba(var(--sa-primary-rgb), .45); --bs-btn-hover-bg: var(--sa-primary); --bs-btn-hover-border-color: var(--sa-primary); }
.btn-success { background: linear-gradient(135deg, #12b886, #0b8f6a); border: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 0 -1px #07634a, 0 14px 22px -8px rgba(18, 184, 134, .55); }
.btn-success:hover { transform: translateY(-2px); filter: brightness(1.06); }
.btn-danger { background: linear-gradient(135deg, #ff5c7a, #e03156); border: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 0 -1px #9d1f3b, 0 14px 22px -8px rgba(224, 49, 86, .5); }
.btn-danger:hover { transform: translateY(-2px); filter: brightness(1.06); }
.btn-warning { border: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 5px 0 -1px #b57d00, 0 12px 20px -8px rgba(255, 178, 36, .55); }
.btn-link { text-decoration: none; font-weight: 600; }

/* ---------- Formularios ---------- */
.form-control, .form-select {
    background-color: rgba(255, 255, 255, .85); border: 1px solid var(--sa-line); border-radius: var(--sa-radius-sm);
    padding: .65rem .95rem; color: var(--sa-ink); box-shadow: inset 0 1px 2px rgba(11, 37, 69, .05);
}
[data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background-color: rgba(255, 255, 255, .06); color: var(--sa-ink); }
.form-control:focus, .form-select:focus { border-color: var(--sa-primary); box-shadow: 0 0 0 4px rgba(var(--sa-primary-rgb), .18), inset 0 1px 2px rgba(11, 37, 69, .05); background-color: var(--sa-card-solid); }
.form-control-sm, .form-select-sm { border-radius: 10px; padding: .4rem .7rem; }
.form-label { font-weight: 600; font-size: .875rem; color: var(--sa-ink-soft); }
.form-check-input:checked { background-color: var(--sa-primary); border-color: var(--sa-primary); }
.input-group-text { background: var(--sa-card); border-color: var(--sa-line); }

/* ---------- Tablas, insignias, alertas, progreso ---------- */
.table { --bs-table-bg: transparent; --bs-table-color: var(--sa-ink); --bs-table-border-color: var(--sa-line); --bs-table-hover-bg: rgba(var(--sa-primary-rgb), .06); --bs-table-striped-bg: transparent; }
.table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--sa-muted); font-weight: 700; border-bottom-width: 1px; background: rgba(var(--sa-primary-rgb), .04); }
.table-responsive { border-radius: var(--sa-radius); }
.badge { border-radius: 999px; padding: .4em .75em; font-weight: 700; letter-spacing: .01em; }
.alert { border: 1px solid transparent; border-radius: 16px; box-shadow: var(--sa-shadow-1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.progress { height: 10px; background: rgba(var(--sa-primary-rgb), .12); border-radius: 999px; overflow: visible; box-shadow: inset 0 1px 2px rgba(11, 37, 69, .08); }
.progress-bar { background: var(--sa-grad); border-radius: 999px; box-shadow: 0 0 14px rgba(var(--sa-primary-rgb), .55); transition: width .9s cubic-bezier(.2, .8, .2, 1); }
.pagination { --bs-pagination-bg: var(--sa-card); --bs-pagination-border-color: var(--sa-line); --bs-pagination-active-bg: var(--sa-primary); --bs-pagination-active-border-color: var(--sa-primary); --bs-pagination-color: var(--sa-ink-soft); }
.breadcrumb { --bs-breadcrumb-divider-color: var(--sa-muted); }
.nav-tabs { --bs-nav-tabs-link-active-bg: var(--sa-card-solid); --bs-nav-tabs-link-active-color: var(--sa-primary); --bs-nav-tabs-border-color: var(--sa-line); --bs-nav-link-color: var(--sa-ink-soft); }
.tab-content { background: var(--sa-card); border-radius: 0 0 var(--sa-radius) var(--sa-radius); }
.offcanvas { background: var(--sa-card-solid); }

/* ---------- Piezas 3D reutilizables ---------- */
.icon-3d {                                          /* cubo de icono con relieve */
    --s: 52px; width: var(--s); height: var(--s); border-radius: 16px; display: inline-grid; place-items: center; flex-shrink: 0;
    font-size: calc(var(--s) * .46); color: #fff; background: var(--sa-grad);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -3px 0 rgba(0, 0, 0, .16), 0 10px 18px -6px rgba(var(--sa-primary-rgb), .6);
    transition: transform .25s;
}
.icon-3d.v-blue { background: linear-gradient(135deg, #5b8cff, #2a4fd6); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 0 rgba(0,0,0,.16), 0 10px 18px -6px rgba(51,102,255,.6); }
.icon-3d.v-violet { background: linear-gradient(135deg, #9b82ff, #5b3fe0); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 0 rgba(0,0,0,.16), 0 10px 18px -6px rgba(124,92,255,.6); }
.icon-3d.v-amber { background: linear-gradient(135deg, #ffcc4d, #f59e0b); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -3px 0 rgba(0,0,0,.14), 0 10px 18px -6px rgba(245,158,11,.6); }
.icon-3d.v-rose { background: linear-gradient(135deg, #ff7aa0, #e5316b); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 0 rgba(0,0,0,.16), 0 10px 18px -6px rgba(229,49,107,.55); }
.icon-3d.v-green { background: linear-gradient(135deg, #3ddc97, #0f9d6b); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 0 rgba(0,0,0,.16), 0 10px 18px -6px rgba(15,157,107,.55); }
.icon-3d.sm { --s: 38px; border-radius: 12px; }
.icon-3d.lg { --s: 68px; border-radius: 20px; }
a:hover > .icon-3d, .card:hover .icon-3d { transform: translateY(-3px) rotate(-4deg); }

.stat-tile { position: relative; overflow: hidden; }
.stat-tile::before { content: ''; position: absolute; right: -30px; top: -30px; width: 120px; height: 120px; border-radius: 50%; background: var(--sa-grad-soft); }
.stat-tile .num { font-family: 'Sora', var(--bs-body-font-family); font-weight: 700; font-size: 1.9rem; line-height: 1; letter-spacing: -.03em; }
.stat-tile .etq { font-size: .8rem; color: var(--sa-muted); font-weight: 600; }

.ring {                                             /* anillo de progreso (usa --pct: 0–100) */
    --size: 96px; --pct: 0; width: var(--size); height: var(--size); border-radius: 50%; position: relative; flex-shrink: 0; display: grid; place-items: center;
    background: conic-gradient(var(--sa-primary) 0, var(--sa-cyan) calc(var(--pct) * .6%), var(--sa-blue) calc(var(--pct) * 1%), rgba(var(--sa-primary-rgb), .13) 0);
    box-shadow: 0 10px 24px -10px rgba(var(--sa-primary-rgb), .6);
}
.ring::before { content: ''; position: absolute; inset: calc(var(--size) * .11); border-radius: 50%; background: var(--sa-card-solid); box-shadow: inset 0 2px 6px rgba(11, 37, 69, .12); }
.ring > span { position: relative; z-index: 1; font-family: 'Sora', var(--bs-body-font-family); font-weight: 700; font-size: calc(var(--size) * .24); }

.eyebrow { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .8rem; border-radius: 999px; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sa-primary); background: rgba(var(--sa-primary-rgb), .10); border: 1px solid rgba(var(--sa-primary-rgb), .2); }
.grad-text { background: var(--sa-grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.section-title { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); }
.orb { position: absolute; border-radius: 50%; filter: blur(34px); opacity: .55; pointer-events: none; animation: flotar 9s ease-in-out infinite alternate; }
@keyframes flotar { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(18px, -26px, 0); } }

/* ---------- Estructura de paneles (estudiante / admin / instructor) ---------- */
.sa-shell { display: flex; gap: 18px; padding: 14px; min-height: 100vh; }
.sa-sidebar {
    width: 262px; flex-shrink: 0; position: sticky; top: 14px; height: calc(100vh - 28px); overflow-y: auto; align-self: flex-start;
    background: var(--sa-card); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
    border: 1px solid var(--sa-glass-border); border-radius: 26px; box-shadow: var(--sa-shadow-2); padding: 1.1rem; scrollbar-width: thin;
}
.sa-brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--sa-ink); font-weight: 800; letter-spacing: -.02em; padding: .35rem .4rem 1rem; }
.sa-brand img { height: 30px; width: auto; max-width: 120px; object-fit: contain; }
.sa-sidebar .nav-link { display: flex; align-items: center; gap: .7rem; border-radius: 14px; padding: .55rem .7rem; color: var(--sa-ink-soft); font-weight: 600; font-size: .92rem; transition: background .2s, transform .2s, color .2s; }
.sa-sidebar .nav-link i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: rgba(var(--sa-primary-rgb), .09); color: var(--sa-primary); font-size: 1rem; transition: all .2s; flex-shrink: 0; }
.sa-sidebar .nav-link:hover { background: rgba(var(--sa-primary-rgb), .08); transform: translateX(3px); color: var(--sa-ink); }
.sa-sidebar .nav-link.active { color: #fff; background: var(--sa-grad); box-shadow: 0 10px 20px -8px rgba(var(--sa-primary-rgb), .65), inset 0 1px 0 rgba(255, 255, 255, .4); }
.sa-sidebar .nav-link.active i { background: rgba(255, 255, 255, .22); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }
.offcanvas .nav-link { display: flex; align-items: center; gap: .7rem; border-radius: 14px; font-weight: 600; color: var(--sa-ink-soft); }
.offcanvas .nav-link.active { color: #fff; background: var(--sa-grad); }
.sa-main { flex: 1; min-width: 0; }
.sa-topbar {
    position: sticky; top: 14px; z-index: 20; display: flex; align-items: center; gap: .6rem; padding: .55rem .9rem; margin-bottom: 1.2rem;
    background: var(--sa-card); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
    border: 1px solid var(--sa-glass-border); border-radius: 20px; box-shadow: var(--sa-shadow-1);
}
.sa-topbar .titulo { font-weight: 800; letter-spacing: -.02em; font-size: 1.05rem; }
.sa-content { padding: .2rem .2rem 2rem; }
.sa-avatar { width: 34px; height: 34px; border-radius: 12px; display: inline-grid; place-items: center; background: var(--sa-grad); color: #fff; font-weight: 800; font-size: .85rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 6px 12px -4px rgba(var(--sa-primary-rgb), .6); }
@media (max-width: 991.98px) { .sa-shell { display: block; padding: 10px; } .sa-topbar { top: 10px; } }

/* Cabecera de bienvenida de los paneles */
.panel-hero { position: relative; overflow: hidden; padding: 1.6rem 1.7rem; border-radius: 26px; color: #fff; background: linear-gradient(120deg, #0b2545 0%, #12507f 55%, var(--sa-primary) 130%); box-shadow: var(--sa-shadow-3d); }
.panel-hero h1, .panel-hero h2, .panel-hero .h3, .panel-hero .h4 { color: #fff; }
.panel-hero::before { content: ''; position: absolute; right: -60px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(25, 200, 224, .55), transparent 65%); }
.panel-hero::after { content: ''; position: absolute; right: 90px; bottom: -70px; width: 190px; height: 190px; border-radius: 50%; background: radial-gradient(circle, rgba(124, 92, 255, .5), transparent 65%); }
.panel-hero > * { position: relative; z-index: 1; }
.panel-hero .text-body-secondary { color: rgba(255, 255, 255, .72) !important; }

/* ---------- Sitio público ---------- */
.nav-flotante {
    position: sticky; top: 12px; z-index: 50; max-width: 1180px; margin: 12px auto 0; padding: .55rem .75rem .55rem 1.1rem;
    background: var(--sa-card); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
    border: 1px solid var(--sa-glass-border); border-radius: 999px; box-shadow: var(--sa-shadow-2);
}
.nav-flotante .navbar-brand { font-weight: 800; letter-spacing: -.02em; color: var(--sa-ink); }
.nav-flotante .nav-link { font-weight: 600; color: var(--sa-ink-soft); border-radius: 999px; padding: .45rem .95rem !important; transition: background .2s; }
.nav-flotante .nav-link:hover { background: rgba(var(--sa-primary-rgb), .1); color: var(--sa-primary); }
@media (max-width: 991.98px) { .nav-flotante { border-radius: 26px; margin: 8px; } .nav-flotante .navbar-collapse { padding-top: .6rem; } }

.hero3d { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 1rem; padding: 3.2rem 1rem 1.5rem; min-height: 560px; }
.hero3d h1 { font-size: clamp(2.2rem, 1.3rem + 3.4vw, 4rem); line-height: 1.04; }
.hero3d .lead { font-size: 1.15rem; color: var(--sa-ink-soft); max-width: 560px; }
.escena3d { position: relative; width: 100%; height: 520px; }
.escena3d canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; outline: none; }
.escena3d .estatico { position: absolute; inset: 8%; border-radius: 36%; background: var(--sa-grad); opacity: .25; filter: blur(30px); }
.hero-stats { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 1.8rem; }
.hero-stats .num { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1.9rem; line-height: 1; letter-spacing: -.03em; }
.hero-stats .etq { font-size: .82rem; color: var(--sa-muted); font-weight: 600; }
.chip-flotante { position: absolute; z-index: 3; display: flex; align-items: center; gap: .55rem; padding: .55rem .85rem; border-radius: 16px; font-size: .82rem; font-weight: 700; background: var(--sa-card); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--sa-glass-border); box-shadow: var(--sa-shadow-2); animation: flotar 6s ease-in-out infinite alternate; }
@media (max-width: 991.98px) { .hero3d { grid-template-columns: 1fr; padding-top: 2rem; min-height: 0; } .escena3d { height: 340px; order: -1; margin-bottom: -20px; } .chip-flotante { display: none; } }

.escuela-card { text-align: center; padding: 1.4rem 1rem; display: block; text-decoration: none; color: var(--sa-ink); }
.escuela-card { align-items: center; }
.escuela-card .icon-3d { margin-bottom: .8rem; }
.chip-flotante .icon-3d { box-shadow: none; }

.curso-card { overflow: hidden; }
.curso-card .portada { position: relative; height: 150px; display: grid; place-items: center; color: #fff; overflow: hidden; background: linear-gradient(135deg, var(--sa-primary), #0b2545); }
.curso-card .portada::before { content: ''; position: absolute; inset: -30% -10% auto auto; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.35), transparent 65%); }
.curso-card .portada i { font-size: 3.2rem; filter: drop-shadow(0 8px 14px rgba(0,0,0,.35)); }
.curso-card .portada img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.curso-card .progress { height: 7px; }
.precio { font-family: 'Sora', sans-serif; font-weight: 700; letter-spacing: -.02em; }

.plan-card { position: relative; padding: 1.6rem 1.3rem; text-align: center; }
.plan-card.destacado { background: linear-gradient(160deg, #0b2545, #12507f 70%, var(--sa-primary) 160%); color: #fff; border-color: rgba(255,255,255,.2); box-shadow: var(--sa-shadow-3d); transform: translateY(-8px); }
.plan-card.destacado .text-body-secondary { color: rgba(255,255,255,.7) !important; }
.plan-card.destacado h3, .plan-card.destacado .precio { color: #fff; }
.plan-card .cinta { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--sa-amber); color: #3b2a00; font-weight: 800; font-size: .72rem; padding: .3rem .8rem; border-radius: 999px; box-shadow: 0 6px 12px -4px rgba(245,158,11,.7); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }

.pie-sitio { margin-top: 3rem; background: linear-gradient(160deg, #081a33, #0b2545 60%, #0f4a6e); color: #cfe0f5; position: relative; overflow: hidden; }
.pie-sitio::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--sa-grad); }
.pie-sitio a { color: #cfe0f5; text-decoration: none; } .pie-sitio a:hover { color: #fff; }
.cta-final { position: relative; overflow: hidden; border-radius: 32px; padding: 3rem 1.5rem; text-align: center; color: #fff; background: linear-gradient(125deg, #0b2545, #12507f 55%, var(--sa-primary) 140%); box-shadow: var(--sa-shadow-3d); }
.cta-final h2 { color: #fff; }
.cta-final .text-body-secondary { color: rgba(255,255,255,.75) !important; }
.cta-final::before { content: ''; position: absolute; inset: -40% auto auto -10%; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(25,200,224,.45), transparent 65%); }
.cta-final > * { position: relative; }

/* ---------- Acceso (login, recuperar…) ---------- */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.auth-brand { position: relative; overflow: hidden; color: #fff; display: flex; flex-direction: column; justify-content: space-between; padding: 2.2rem 2.6rem; background: linear-gradient(150deg, #071a33 0%, #0b2f5c 55%, #0f6a84 120%); }
.auth-brand h2 { color: #fff; font-size: clamp(1.7rem, 1.1rem + 1.8vw, 2.6rem); line-height: 1.1; }
.auth-brand .escena3d { position: absolute; inset: 0; height: 100%; }
.auth-brand > *:not(.escena3d) { position: relative; z-index: 2; pointer-events: none; }
.auth-brand a { pointer-events: auto; }
.auth-form { display: flex; align-items: center; justify-content: center; padding: 2rem 1.2rem; }
.auth-form .card { width: 100%; max-width: 440px; box-shadow: var(--sa-shadow-3d); }
@media (max-width: 991.98px) { .auth-wrap { grid-template-columns: 1fr; } .auth-brand { display: none; } }

/* ---------- Reproductor ---------- */
.sa-player { padding: 0; }
.sa-player .player-bar { position: sticky; top: 10px; z-index: 30; margin: 10px; padding: .55rem .9rem; display: flex; align-items: center; gap: .6rem; background: var(--sa-card); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); border: 1px solid var(--sa-glass-border); border-radius: 20px; box-shadow: var(--sa-shadow-1); }
.sa-player .player-body { display: flex; gap: 18px; padding: 0 10px 20px; align-items: flex-start; }
.sa-player .sa-main { flex: 1; min-width: 0; max-width: 1100px; padding: .5rem .5rem 2rem; }
.sa-temario { width: 350px; flex-shrink: 0; position: sticky; top: 76px; max-height: calc(100vh - 92px); overflow-y: auto; background: var(--sa-card); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); border: 1px solid var(--sa-glass-border); border-radius: 24px; box-shadow: var(--sa-shadow-2); scrollbar-width: thin; }
.sa-temario .accordion-item { box-shadow: none; border: 0; border-bottom: 1px solid var(--sa-line); border-radius: 0 !important; margin: 0; background: transparent; }
.sa-temario .list-group-item { border: 0; padding: .55rem 1rem; transition: background .2s; }
.sa-temario .active-leccion, #temarioMovil .active-leccion { background: var(--sa-grad-soft) !important; box-shadow: inset 3px 0 0 var(--sa-primary); }
.video-frame { border-radius: 24px; overflow: hidden; background: #000; box-shadow: var(--sa-shadow-3d); border: 1px solid rgba(255,255,255,.15); }
.contenido-leccion img { max-width: 100%; height: auto; border-radius: 14px; }
.contenido-leccion pre, .contenido-leccion .ql-syntax { background: var(--bs-tertiary-bg); padding: .85rem; border-radius: 14px; overflow-x: auto; }
.contenido-leccion blockquote { border-left: 4px solid var(--sa-primary); padding: .2rem 1rem; color: var(--sa-muted); background: var(--sa-grad-soft); border-radius: 0 14px 14px 0; }
@media (max-width: 991.98px) { .sa-player .player-body { display: block; } }

/* ---------- Varios ---------- */
.sa-vacio { text-align: center; padding: 2.5rem 1rem; color: var(--sa-muted); }
code { color: var(--sa-violet); background: rgba(124, 92, 255, .08); padding: .1em .4em; border-radius: 6px; }
.sombra-3d { box-shadow: var(--sa-shadow-3d); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .js .reveal { opacity: 1; transform: none; }
    .tilt { transform: none !important; }
}

/* ---- Hero: centro de mando (paneles de cristal con paralaje 3D sobre el cerebro neuronal) ---- */
.hero3d .escena3d { height: 560px; }
.hero3d .escena3d canvas.capa-cerebro { opacity: .5; }
.hero3d .escena3d canvas.capa-campo { opacity: .8; }
.stage { position: absolute; inset: 0; z-index: 3; perspective: 1200px; }
.stage-in { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.ph { position: absolute; background: var(--sa-card); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--sa-glass-border); border-radius: 20px; box-shadow: var(--sa-shadow-3d, var(--sa-shadow-2)); will-change: transform; }
.ph-main { left: 3%; top: 50%; margin-top: -150px; width: 94%; padding: 1rem 1.1rem 1.1rem; }
.ph-cab { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .9rem; }
.ph-t { font-weight: 800; font-size: .86rem; }
.ph-t i { color: var(--sa-primary); margin-right: .25rem; }
.ph-vivo { font-size: .7rem; font-weight: 700; color: var(--sa-primary); background: rgba(var(--sa-primary-rgb), .12); padding: .15rem .55rem; border-radius: 99px; display: inline-flex; align-items: center; gap: .35rem; }
.ph-vivo i, .punto-vivo { width: 7px; height: 7px; border-radius: 50%; background: #ef4444; display: inline-block; animation: pulso-vivo 1.6s infinite; }
.ph-vivo i { background: var(--sa-primary); }
@keyframes pulso-vivo { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .5); } 70% { box-shadow: 0 0 0 7px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } }
.ph-cuerpo { display: flex; gap: 1rem; align-items: center; }
.ph-barras { flex: 1; display: grid; gap: .55rem; min-width: 0; }
.ph-barras > div { display: grid; grid-template-columns: 1fr auto; gap: 0 .5rem; font-size: .75rem; font-weight: 600; }
.ph-barras b { font-family: 'Sora', sans-serif; }
.ph-barras i { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: rgba(var(--sa-primary-rgb), .14); position: relative; overflow: hidden; margin-top: .2rem; }
.ph-barras i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 6px; background: var(--sa-grad); }
.ph-semana { display: flex; align-items: flex-end; gap: .45rem; height: 78px; margin-top: 1rem; padding-top: .6rem; border-top: 1px dashed rgba(var(--sa-primary-rgb), .25); }
.ph-semana span { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .2rem; }
.ph-semana i { width: 100%; height: var(--h); border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, var(--sa-cyan), var(--sa-primary)); }
.ph-semana em { font-style: normal; font-size: .62rem; color: var(--sa-muted); font-weight: 700; }
.ph-racha, .ph-vivo-card, .ph-cert { display: flex; align-items: center; gap: .65rem; padding: .6rem .85rem; }
.ph-racha strong, .ph-vivo-card strong, .ph-cert strong { display: block; font-size: .82rem; line-height: 1.15; }
.ph-racha small, .ph-vivo-card small, .ph-cert small { font-size: .7rem; color: var(--sa-muted); font-weight: 600; }
.ph .icon-3d { box-shadow: none; }
.ph-racha { right: 0; top: 5%; animation: flotar 6s ease-in-out infinite alternate; }
.ph-vivo-card { right: -2%; top: 66%; animation: flotar 7s ease-in-out -2s infinite alternate; }
.ph-cert { left: 2%; bottom: 2%; animation: flotar 6.5s ease-in-out -4s infinite alternate; }
@media (max-width: 991.98px) {
    .hero3d .escena3d { height: 400px; order: 2; margin-bottom: 0; }
    .ph-main { left: 0; width: 100%; top: 8%; }
    .ph-racha, .ph-vivo-card, .ph-cert { display: none; }
}

/* ---- Hero oscuro: banner con el cerebro neuronal de fondo (mismo lenguaje que el acceso) ---- */
.hero-oscuro { display: block; position: relative; overflow: hidden; border-radius: 32px; min-height: 600px; padding: 4.2rem 3.2rem; color: #fff; background: linear-gradient(150deg, #071a33 0%, #0b2f5c 55%, #0f6a84 120%); box-shadow: 0 40px 80px -40px rgba(7, 26, 51, .65); }
.hero-oscuro .escena3d { position: absolute; inset: 0; height: 100%; width: 100%; }
.hero-oscuro .hero-texto { position: relative; z-index: 2; max-width: 640px; }
.hero-oscuro h1 { color: #fff; }
.hero-oscuro .lead { color: rgba(255, 255, 255, .82); }
.hero-oscuro .eyebrow { color: #bff3ff; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .25); }
.hero-oscuro .hero-stats .num { color: #fff; }
.hero-oscuro .hero-stats .etq { color: rgba(255, 255, 255, .7); }
.hero-oscuro .btn-outline-primary, .hero-oscuro .btn-outline-secondary { color: #fff; border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .08); }
.hero-oscuro .btn-outline-primary:hover, .hero-oscuro .btn-outline-secondary:hover { background: rgba(255, 255, 255, .2); color: #fff; }
@media (max-width: 991.98px) { .hero-oscuro { padding: 2.4rem 1.4rem; min-height: 0; border-radius: 24px; } .hero-oscuro .escena3d { order: 0; margin: 0; } }

/* Hero más ancho (rompe el contenedor) y azul más claro */
.hero-oscuro { margin-inline: calc(50% - min(800px, 50vw - 1rem)); background: linear-gradient(140deg, #0e3466 0%, #1459a0 52%, #1a8fb5 120%); padding-inline: clamp(1.4rem, 5vw, 4.5rem); }
@media (max-width: 991.98px) { .hero-oscuro { margin-inline: calc(50% - 50vw + .75rem); } }

/* ==========================================================================
   Línea corporativa: formas más rectas, iconos planos y tipografía de titulares propia.
   (Sobrescribe lo anterior para alejarse del look «cristal + píldoras + cubos 3D».)
   ========================================================================== */
:root { --sa-radius: 10px; --sa-radius-sm: 8px; --bs-border-radius: 8px; --bs-border-radius-lg: 12px; --sa-card: #fff; }
[data-bs-theme="dark"] { --sa-card: #12203c; }
h1, h2, h3, h4, .section-title { font-family: 'Sora', var(--bs-body-font-family); letter-spacing: -.025em; font-weight: 700; }
.btn { border-radius: 8px; letter-spacing: 0; }
.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:focus-visible { background: var(--sa-primary); border-color: var(--sa-primary); box-shadow: none; transform: none; color: #fff; }
.btn-primary:hover { background: color-mix(in srgb, var(--sa-primary) 82%, #000); }
.card, .glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--sa-card); border: 1px solid var(--sa-line); border-radius: 10px; box-shadow: 0 1px 2px rgba(11, 37, 69, .05); }
.card::before, .card::after { display: none; }
a.card:hover, .curso-card:hover { box-shadow: 0 10px 28px -12px rgba(11, 37, 69, .25); }
.form-control, .form-select { border-radius: 8px; }
.badge { border-radius: 6px; }
.nav-flotante { border-radius: 12px; }
.icon-3d, .icon-3d.v-blue, .icon-3d.v-violet, .icon-3d.v-amber, .icon-3d.v-rose, .icon-3d.v-green { background: var(--sa-ink); color: #fff; box-shadow: none; border-radius: 8px; }
.icon-3d { background: var(--sa-primary); }
.icon-3d.v-blue { background: #1f4fb8; } .icon-3d.v-violet { background: #4b3fa8; } .icon-3d.v-amber { background: #c77d0a; } .icon-3d.v-rose { background: #b8325a; } .icon-3d.v-green { background: #0f7a55; }
.icon-3d.sm { border-radius: 7px; } .icon-3d.lg { border-radius: 12px; }
.eyebrow { padding: 0; border: 0; border-radius: 0; background: none; color: var(--sa-primary); font-size: .74rem; letter-spacing: .14em; gap: .6rem; }
.eyebrow::before { content: ''; width: 28px; height: 2px; background: currentColor; }
.plan-card, .escuela-card, .curso-card { border-radius: 10px; }
.cta-final { border-radius: 14px; }

/* Hero corporativo: más ancho, azul intermedio, sin etiqueta, cifras en barra inferior */
.hero-oscuro { border-radius: 14px; margin-inline: calc(50% - min(900px, 50vw - .75rem)); background: linear-gradient(140deg, #0a2b57 0%, #0f4a86 52%, #137ca0 120%); padding-bottom: 0; display: flex; flex-direction: column; justify-content: space-between; }
.hero-oscuro .eyebrow { display: none; }
.hero-oscuro .hero-texto { max-width: 700px; }
.hero-oscuro h1 { font-size: clamp(2.2rem, 1.2rem + 3.2vw, 3.8rem); }
.hero-oscuro .form-control { border-radius: 8px 0 0 8px; }
.hero-oscuro form .btn { border-radius: 0 8px 8px 0; }
.hero-oscuro form { gap: 0 !important; }
.hero-oscuro .hero-stats { position: relative; z-index: 2; margin: 2.4rem calc(-1 * clamp(1.4rem, 5vw, 4.5rem)) 0; padding: 1.3rem clamp(1.4rem, 5vw, 4.5rem); gap: 0; flex-wrap: nowrap; border-top: 1px solid rgba(255, 255, 255, .18); background: rgba(5, 20, 45, .28); }
.hero-oscuro .hero-stats > div { flex: 1; padding-right: 1.2rem; margin-right: 1.2rem; border-right: 1px solid rgba(255, 255, 255, .16); }
.hero-oscuro .hero-stats > div:last-child { border-right: 0; margin-right: 0; }
.hero-oscuro .hero-stats .num { font-size: 2rem; }
.hero-oscuro .hero-stats .etq { text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; }
.auth-brand { background: linear-gradient(150deg, #0a2b57 0%, #0f4a86 55%, #137ca0 120%); }
@media (max-width: 991.98px) { .hero-oscuro { margin-inline: calc(50% - 50vw + .75rem); } .hero-oscuro .hero-stats { flex-wrap: wrap; gap: 1rem; } .hero-oscuro .hero-stats > div { flex: 1 1 40%; border: 0; margin: 0; } }
.hero-oscuro { align-items: stretch; }
.hero-oscuro .hero-texto { max-width: none; } .hero-oscuro .hero-texto > :not(.hero-stats) { max-width: 700px; }

/* ==========================================================================
   Iconografía de línea sin contenedor + numeración editorial (sin cajitas de color)
   ========================================================================== */
h1, h2, h3, h4, .section-title { font-family: 'Sora', 'Inter', system-ui, sans-serif; letter-spacing: -.03em; font-weight: 600; }
.icon-3d, .icon-3d.v-blue, .icon-3d.v-violet, .icon-3d.v-amber, .icon-3d.v-rose, .icon-3d.v-green { width: auto; height: auto; min-width: 0; background: none; box-shadow: none; border: 0; color: var(--sa-primary); font-size: 1.7rem; line-height: 1; display: inline-flex; }
.icon-3d.sm { font-size: 1.25rem; } .icon-3d.lg { font-size: 2.3rem; }
.icon-3d.v-blue { color: #1f4fb8; } .icon-3d.v-violet { color: #5b3fe0; } .icon-3d.v-amber { color: #c77d0a; } .icon-3d.v-rose { color: #c63363; } .icon-3d.v-green { color: #0f8a5f; }
.auth-brand .icon-3d { color: #7fe0ff; }
.paso { border-top: 3px solid var(--sa-primary); border-radius: 4px 4px 10px 10px; }
.paso-num { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 3.2rem; line-height: 1; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px var(--sa-primary); margin-bottom: .6rem; }
.paso h3 { font-size: 1.1rem; }
.escuela-card { align-items: flex-start !important; text-align: left; border-left: 3px solid var(--sa-primary); border-radius: 4px 10px 10px 4px; }
.stat-tile .icon-3d { font-size: 2rem; }