/**
 * Studio A Escena — Área privada (student-area.css)
 * Extraído de source-original/assets/css/main.css
 * TODO: Este archivo será generado por el pipeline de build en una fase posterior.
 * Copia funcional legible — no minificada agresivamente.
 */
        @keyframes fadeInPage { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }

/* Modal base (perfil) */
        .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.9); backdrop-filter: blur(15px); z-index: 100000; display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; }
        .modal-overlay.active { opacity: 1; pointer-events: auto; }
        .modal-box { background: #050505; border: 1px solid rgba(255,255,255,0.1); border-radius: 30px; padding: 40px; transform: scale(0.9) translateY(20px); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); max-width: 500px; width: 90%; box-shadow: 0 30px 60px rgba(0,0,0,0.8); }
        .modal-overlay.active .modal-box { transform: scale(1) translateY(0); }

/* Área privada — perfil, academia, progreso, tutor */
        .modal-box.modal-box--profile { width: 98vw; max-width: 98vw; height: 98vh; max-height: 98vh; min-height: 98vh; padding: 0; overflow: hidden; text-align: left; border-color: rgba(255,0,85,0.28); border-radius: 22px; box-shadow: 0 50px 100px rgba(0,0,0,0.95), 0 0 60px rgba(255,0,85,0.12); }
        #profileModal.modal-overlay { padding: 0.25rem; align-items: center; }
        .profile-layout { display: grid; grid-template-columns: 1fr; height: 100%; min-height: 0; max-height: 98vh; }
        @media (min-width: 900px) { .profile-layout { grid-template-columns: min(300px, 22vw) 1fr; } }
        .profile-sidebar { background: linear-gradient(180deg, #0c0c0c 0%, #080808 100%); border-bottom: 1px solid rgba(255,255,255,0.08); padding: 1.75rem 1.35rem; min-height: 0; }
        @media (min-width: 900px) { .profile-sidebar { border-bottom: none; border-right: none; } }
        .profile-tab-btn { width: 100%; text-align: left; padding: 14px 16px; border-radius: 12px; font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: #888; transition: all 0.25s; margin-bottom: 6px; display: flex; align-items: center; gap: 11px; border: 1px solid transparent; background: transparent; cursor: pointer; line-height: 1.3; }
        a.profile-tab-btn { text-decoration: none; box-sizing: border-box; }
        .profile-tab-btn--logout { margin-top: 0; }
        .profile-tab-btn i { font-size: 1.28rem; flex-shrink: 0; }
        .profile-tab-btn:hover { color: white; background: rgba(255,255,255,0.05); }
        .profile-tab-btn.active { color: #ff0055; border-color: rgba(255,0,85,0.4); background: rgba(255,0,85,0.1); box-shadow: 0 0 22px rgba(255,0,85,0.15); }
        .profile-content { padding: 2rem 2.25rem 2.5rem; overflow-y: auto; min-height: 0; height: 100%; max-height: none; font-size: 0.95rem; }
        @media (min-width: 900px) { .profile-content { padding: 2.25rem 3rem 3rem; } }
        @media (min-width: 1280px) { .profile-content { padding: 2.5rem 3.5rem 3.25rem; } }
        .profile-panel { display: none; animation: fadeInPage 0.4s ease forwards; }
        .profile-panel.active { display: block; }
        .profile-panel-head { margin-bottom: 2rem; padding-bottom: 1.35rem; border-bottom: 1px solid rgba(255,255,255,0.07); }
        .profile-panel-head h2 { font-size: clamp(1.85rem, 2.8vw, 2.65rem); }
        .profile-panel-head p { font-size: 0.95rem; }
        .profile-avatar { width: 108px; height: 108px; border-radius: 50%; object-fit: cover; border: 3px solid #ff0055; box-shadow: 0 0 28px rgba(255,0,85,0.4); }
        .profile-field { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.06); display: flex; gap: 14px; align-items: flex-start; }
        .profile-block { margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid rgba(255,255,255,0.08); }
        .profile-tutor-item { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0; padding: 16px 18px; border-radius: 14px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); margin-bottom: 10px; transition: border-color 0.25s ease, box-shadow 0.25s ease; }
        .profile-tutor-item:last-child { margin-bottom: 0; }
        .profile-tutor-item:hover { border-color: rgba(255,255,255,0.14); box-shadow: 0 8px 24px rgba(0,0,0,0.35); }
        .profile-tutor-item__title { margin: 0; font-size: 0.95rem; font-weight: 700; line-height: 1.35; color: #fff; }
        .profile-tutor-item__name { color: #fff; }
        .profile-tutor-item__sep { color: rgba(255,255,255,0.35); font-weight: 600; }
        .profile-tutor-item__relation { color: #ff0055; font-weight: 700; }
        .profile-tutor-item__role { margin: 6px 0 0; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #888; }
        .profile-tutor-item__contact { margin: 8px 0 0; display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; font-weight: 600; line-height: 1.4; color: #ccc; }
        .profile-tutor-item__contact + .profile-tutor-item__contact { margin-top: 6px; }
        .profile-tutor-item__contact i { font-size: 1rem; flex-shrink: 0; line-height: 1; }
        .profile-tutor-item__contact .ph-phone { color: #fffa00; }
        .profile-tutor-item__contact .ph-envelope-simple { color: #00f3ff; }
        .profile-tutor-item__contact span { min-width: 0; word-break: break-word; }
        .profile-plan-card { padding: 1.25rem 1.35rem; border-radius: 18px; border: 1px solid rgba(255,255,255,0.1); background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0.2) 100%); margin-bottom: 14px; position: relative; overflow: hidden; }
        .profile-plan-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--plan-accent, #ff0055); }
        .profile-plan-status { font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.12em; padding: 4px 10px; border-radius: 999px; display: inline-block; }
        .profile-plan-status--active { background: rgba(74,222,128,0.12); color: #4ade80; border: 1px solid rgba(74,222,128,0.3); }
        .profile-plan-status--low { background: rgba(255,250,0,0.1); color: #fffa00; border: 1px solid rgba(255,250,0,0.25); }
        .profile-class-card { padding: 1.35rem 1.5rem; border-radius: 18px; border: 1px solid rgba(255,255,255,0.1); background: #0f0f0f; margin-bottom: 14px; transition: border-color 0.25s, box-shadow 0.25s; }
        .profile-class-card:hover { border-color: rgba(255,0,85,0.35); box-shadow: 0 12px 32px rgba(255,0,85,0.1); }
        .profile-classes-view-toggle { display: inline-flex; gap: 0; margin-bottom: 1.35rem; border-radius: 12px; border: 1px solid rgba(255,255,255,0.12); overflow: hidden; background: rgba(255,255,255,0.03); width: fit-content; max-width: 100%; align-self: flex-start; flex: 0 0 auto; }
        .profile-classes-view-btn { padding: 11px 20px; font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.12em; color: #888; background: transparent; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: all 0.25s; }
        .profile-classes-view-btn:hover { color: white; background: rgba(255,255,255,0.05); }
        .profile-classes-view-btn.active { color: #ff0055; background: rgba(255,0,85,0.12); box-shadow: inset 0 0 20px rgba(255,0,85,0.08); }
        .profile-classes-list-wrap { display: none; animation: fadeInPage 0.35s ease; }
        .profile-classes-list-wrap.is-active { display: block; }
        .profile-classes-cal-wrap { display: none; animation: fadeInPage 0.35s ease; position: relative; }
        .profile-classes-cal-wrap.is-active { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; gap: 0; }
        .profile-punctual-block { margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid rgba(255,255,255,0.08); }
        #profileEnrolledCalendar { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
        .profile-content.is-classes-calendar { overflow: hidden; }
        #profile-panel-misclases.is-calendar-view {
            display: flex;
            flex-direction: column;
            height: 100%;
            min-height: 0;
            overflow: hidden;
        }
        #profile-panel-misclases.is-calendar-view .profile-panel-head {
            flex-shrink: 0;
            margin-bottom: 1rem;
            padding-bottom: 0.85rem;
        }
        #profile-panel-misclases.is-calendar-view .profile-classes-view-toggle {
            flex-shrink: 0;
            flex-grow: 0;
            margin-bottom: 0.85rem;
            width: fit-content;
            max-width: 100%;
            align-self: flex-start;
        }
        #profile-panel-misclases.is-calendar-view .profile-classes-list-wrap { display: none; }
        .profile-schedule { border-radius: 20px; border: 1px solid rgba(255,255,255,0.12); background: linear-gradient(180deg, #0f0f0f 0%, #080808 100%); overflow: hidden; box-shadow: 0 24px 56px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06); flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; height: 100%; }
        .profile-schedule__scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; height: 100%; }
        .profile-schedule__head { display: grid; grid-template-columns: 52px repeat(7, 1fr); width: 100%; flex-shrink: 0; background: #121212; border-bottom: 1px solid rgba(255,255,255,0.1); box-shadow: 0 6px 20px rgba(0,0,0,0.35); z-index: 4; }
        .profile-schedule__head-gutter { display: flex; align-items: center; justify-content: center; padding: 8px 6px; color: #555; font-size: 1.15rem; }
        .profile-schedule__head-day { text-align: center; padding: 8px 6px; border-left: 1px solid rgba(255,255,255,0.06); transition: background 0.25s; }
        .profile-schedule__head-day.is-today { background: rgba(0,243,255,0.08); box-shadow: inset 0 -2px 0 #00f3ff; }
        .profile-schedule__head-day-name { display: block; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; color: #fff; }
        .profile-schedule__head-day-sub { display: block; font-size: 9px; font-weight: 700; color: #666; margin-top: 2px; text-transform: uppercase; letter-spacing: 0.08em; min-height: 1em; }
        .profile-schedule__head-day.is-today .profile-schedule__head-day-name { color: #00f3ff; }
        .profile-schedule__head-day.is-today .profile-schedule__head-day-sub { color: #00f3ff; }
        .profile-schedule__body { display: flex; width: 100%; flex: 1 1 auto; min-height: 0; height: 100%; }
        .profile-schedule__body-inner { display: flex; width: 100%; flex: 1 1 auto; min-height: 0; height: 100%; align-self: stretch; }
        .profile-schedule__hours { width: 52px; flex-shrink: 0; background: rgba(0,0,0,0.45); border-right: 1px solid rgba(255,255,255,0.08); display: flex; flex-direction: column; height: 100%; min-height: 0; }
        .profile-schedule__hour { box-sizing: border-box; flex: 1 1 0; min-height: 0; display: flex; align-items: flex-start; justify-content: flex-end; padding: 4px 8px 0 4px; font-size: 11px; font-weight: 800; color: #888; font-variant-numeric: tabular-nums; border-top: 1px solid rgba(255,255,255,0.05); }
        .profile-schedule__days { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); min-width: 0; height: 100%; min-height: 0; }
        .profile-schedule__day { position: relative; border-left: 1px solid rgba(255,255,255,0.06); background-color: rgba(255,255,255,0.015); min-width: 0; height: 100%; min-height: 0; }
        .profile-schedule__day.is-today { background-color: rgba(0,243,255,0.04); }
        .profile-schedule__day-lines { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(100% / var(--schedule-rows, 15) - 1px), rgba(255,255,255,0.05) calc(100% / var(--schedule-rows, 15) - 1px), rgba(255,255,255,0.05) calc(100% / var(--schedule-rows, 15))); }
        .profile-schedule__event { position: absolute; left: 4px; right: 4px; border-radius: 12px; padding: 8px 10px; border: 1px solid; overflow: hidden; z-index: 2; cursor: pointer; transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s; box-sizing: border-box; text-align: left; width: calc(100% - 8px); font: inherit; appearance: none; -webkit-appearance: none; display: flex; align-items: center; }
        button.profile-schedule__event { margin: 0; }
        .profile-schedule__event:hover { transform: translateY(-2px) scale(1.03); filter: brightness(1.12); z-index: 3; box-shadow: 0 8px 28px rgba(0,0,0,0.45); }
        .profile-schedule__event-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-weight: 900; line-height: 1.25; color: inherit; text-shadow: 0 1px 8px rgba(0,0,0,0.5); word-break: break-word; max-width: 100%; }
        .profile-schedule__legend { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 10px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); flex-shrink: 0; }
        .profile-schedule__legend span { font-size: 10px; font-weight: 800; display: inline-flex; align-items: center; gap: 8px; color: #bbb; }
        .profile-schedule__legend-dot { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; }
        .profile-reserva-card { padding: 1.15rem 1.25rem; border-radius: 14px; border: 1px dashed rgba(255,255,255,0.15); background: rgba(255,255,255,0.02); margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
        .profile-video-card { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); background: #111; cursor: pointer; text-align: left; transition: transform 0.25s, border-color 0.25s; }
        .profile-video-card:hover { transform: translateY(-3px); border-color: rgba(255,0,85,0.4); }
        .profile-video-card img, .profile-video-card video { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
        .profile-video-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.35); opacity: 0; transition: opacity 0.25s; }
        .profile-video-card:hover .profile-video-play { opacity: 1; }
        .profile-video-play i { width: 52px; height: 52px; border-radius: 50%; background: #ff0055; color: white; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: 0 0 24px rgba(255,0,85,0.5); }
        .profile-video-meta { padding: 12px 14px; }
        .profile-stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 1.5rem; }
        .profile-stat { padding: 14px; border-radius: 14px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); text-align: center; }
        .profile-stat strong { display: block; font-size: 1.35rem; color: #ff0055; font-family: 'Syncopate', sans-serif; }
        .profile-bonus-card { padding: 16px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.1); background: #111; margin-bottom: 12px; }
        .profile-month-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
        .profile-month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
        .profile-month-weekday { text-align: center; font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; color: #666; padding: 6px 0; }
        .profile-month-day { background: #111; border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; min-height: 88px; padding: 6px 5px; display: flex; flex-direction: column; }
        .profile-month-day.other-month { opacity: 0.35; background: #0a0a0a; }
        .profile-month-day.is-today { border-color: rgba(0,243,255,0.5); box-shadow: inset 0 0 16px rgba(0,243,255,0.08); }
        .profile-month-day-num { font-size: 11px; font-weight: 800; color: #888; margin-bottom: 4px; line-height: 1; }
        .profile-month-day.is-today .profile-month-day-num { color: #00f3ff; }
        .profile-month-day.other-month .profile-month-day-num { color: #555; }
        .profile-booking { font-size: 8px; line-height: 1.25; padding: 4px 4px; border-radius: 6px; margin-bottom: 3px; font-weight: 700; cursor: pointer; transition: transform 0.2s, filter 0.2s; text-align: left; width: 100%; border: none; }
        .profile-booking:hover { transform: scale(1.03); filter: brightness(1.15); }
        .profile-booking--urbano { background: rgba(0,243,255,0.15); color: #00f3ff; border: 1px solid rgba(0,243,255,0.25); }
        .profile-booking--heels { background: rgba(255,0,85,0.12); color: #ff0055; border: 1px solid rgba(255,0,85,0.25); }
        .profile-booking--barre { background: rgba(255,250,0,0.12); color: #fffa00; border: 1px solid rgba(255,250,0,0.25); }
        .profile-booking-detail { position: absolute; inset: 0; z-index: 60; background: rgba(0,0,0,0.75); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 1.5rem; opacity: 0; pointer-events: none; transition: opacity 0.3s; border-radius: inherit; }
        .profile-booking-detail.active { opacity: 1; pointer-events: auto; }
        .profile-booking-detail-box { background: #0f0f0f; border: 1px solid rgba(255,255,255,0.12); border-radius: 20px; padding: 1.5rem 1.75rem; max-width: 380px; width: 100%; box-shadow: 0 24px 48px rgba(0,0,0,0.8); position: relative; }
        .profile-tab-btn.active--yellow { color: #fffa00; border-color: rgba(255,250,0,0.35); background: rgba(255,250,0,0.08); box-shadow: 0 0 20px rgba(255,250,0,0.12); }
        .profile-media-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
        @media (min-width: 640px) { .profile-media-grid { grid-template-columns: repeat(3, 1fr); } }
        .profile-media-item { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); cursor: pointer; aspect-ratio: 1; background: #111; }
        .profile-media-item img, .profile-media-item video { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
        .profile-media-item:hover img, .profile-media-item:hover video { transform: scale(1.06); }
        .profile-media-item .media-type-badge { position: absolute; top: 8px; left: 8px; background: rgba(0,0,0,0.7); padding: 4px 8px; border-radius: 50px; font-size: 9px; font-weight: 900; text-transform: uppercase; }
        .profile-media-lightbox { position: fixed; inset: 0; z-index: 100060; background: rgba(0,0,0,0.92); backdrop-filter: blur(12px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem; opacity: 0; pointer-events: none; transition: opacity 0.35s; }
        .profile-media-lightbox.active { opacity: 1; pointer-events: auto; }
        .profile-media-lightbox-content { max-width: min(720px, 92vw); max-height: 70vh; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,0.15); }
        .profile-media-lightbox-content img, .profile-media-lightbox-content video, .profile-media-lightbox-content iframe { max-width: 100%; max-height: 70vh; display: block; object-fit: contain; }
        .profile-media-lightbox-content iframe { width: min(720px, 92vw); aspect-ratio: 16/9; height: auto; border: 0; background: #000; }
        @media (max-width: 767px) {
            .profile-month-day { min-height: 72px; }
            .profile-booking { font-size: 7px; padding: 3px; }
            .modal-box.modal-box--profile { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; min-height: 100vh; border-radius: 0; }
            #profileModal.modal-overlay { padding: 0; }
            .profile-layout { max-height: 100vh; }
            .profile-content { padding: 1.5rem 1.25rem 2rem; }
            .profile-schedule__scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
            .profile-schedule__head,
            .profile-schedule__body-inner { min-width: 720px; }
            .profile-schedule__head-day-name { font-size: 10px; }
            .profile-schedule__event { padding: 8px 7px; }
            .profile-schedule__event-title { font-size: 10px; -webkit-line-clamp: 2; line-clamp: 2; }
        }

        /* PERFIL: nuevas secciones (solo modal alumno) */
        .profile-sidebar { max-height: none; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,0,85,0.35) transparent; }
        .profile-sidebar::-webkit-scrollbar { width: 5px; }
        .profile-sidebar::-webkit-scrollbar-thumb { background: rgba(255,0,85,0.35); border-radius: 99px; }
        .profile-content { scrollbar-width: thin; scrollbar-color: rgba(0,243,255,0.25) transparent; }
        .profile-content::-webkit-scrollbar { width: 6px; }
        .profile-content::-webkit-scrollbar-thumb { background: rgba(0,243,255,0.25); border-radius: 99px; }
        .profile-tab-badge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #ff0055; color: #fff; font-size: 10px; font-weight: 900; font-family: inherit; line-height: 1; letter-spacing: 0; text-indent: 0; display: none; align-items: center; justify-content: center; box-shadow: 0 0 10px rgba(255,0,85,0.5); }
        .profile-tab-badge.is-visible { display: inline-flex; }
        .profile-zone-scroll { max-height: min(72vh, 720px); overflow-y: auto; padding-right: 6px; }
        #profileModal .profile-stats-row { gap: 16px; }
        #profileModal .profile-stat strong { font-size: 1.65rem; }
        #profileModal .activity-card { padding: 1.35rem 1.5rem; }
        #profileModal .activity-card-thumb { width: 88px; height: 56px; }
        .profile-filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1.25rem; }
        .profile-filter-btn { font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.12em; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); color: #888; cursor: pointer; transition: all 0.22s; }
        .profile-filter-btn:hover { color: white; border-color: rgba(255,255,255,0.25); }
        .profile-filter-btn.active { color: #ff0055; border-color: rgba(255,0,85,0.45); background: rgba(255,0,85,0.1); box-shadow: 0 0 16px rgba(255,0,85,0.12); }
        .profile-search { width: 100%; padding: 12px 16px 12px 42px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); color: white; font-size: 0.85rem; transition: border-color 0.25s, box-shadow 0.25s; }
        .profile-search:focus { outline: none; border-color: rgba(0,243,255,0.45); box-shadow: 0 0 20px rgba(0,243,255,0.12); }
        .profile-search-wrap { position: relative; margin-bottom: 1.25rem; }
        .profile-search-wrap i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #666; font-size: 1.1rem; pointer-events: none; }
        .activity-feed { display: flex; flex-direction: column; gap: 12px; position: relative; padding-left: 18px; }
        .activity-feed::before { content: ''; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, rgba(255,0,85,0.5), rgba(0,243,255,0.2)); border-radius: 99px; }
        .activity-card { position: relative; padding: 1.15rem 1.25rem; border-radius: 16px; border: 1px solid rgba(255,255,255,0.09); background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0.35) 100%); transition: border-color 0.28s, box-shadow 0.28s, transform 0.28s; }
        .activity-card::before { content: ''; position: absolute; left: -18px; top: 1.35rem; width: 10px; height: 10px; border-radius: 50%; background: #111; border: 2px solid rgba(255,255,255,0.2); transition: all 0.28s; }
        .activity-card:hover { border-color: rgba(255,0,85,0.4); box-shadow: 0 12px 36px rgba(255,0,85,0.12); transform: translateX(4px); }
        .activity-card.activity-unread { border-color: rgba(255,0,85,0.32); background: rgba(255,0,85,0.06); }
        .activity-card.activity-unread::before { border-color: #ff0055; background: #ff0055; box-shadow: 0 0 12px #ff0055; }
        .activity-type { font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.14em; padding: 4px 10px; border-radius: 999px; display: inline-block; margin-bottom: 8px; }
        .activity-type--video { background: rgba(255,0,85,0.12); color: #ff0055; border: 1px solid rgba(255,0,85,0.28); }
        .activity-type--aviso { background: rgba(0,243,255,0.12); color: #00f3ff; border: 1px solid rgba(0,243,255,0.28); }
        .activity-type--clase { background: rgba(255,250,0,0.1); color: #fffa00; border: 1px solid rgba(255,250,0,0.25); }
        .activity-type--evento { background: rgba(255,255,255,0.06); color: #ccc; border: 1px solid rgba(255,255,255,0.15); }
        .activity-card-thumb { width: 72px; height: 48px; border-radius: 10px; object-fit: cover; border: 1px solid rgba(255,255,255,0.12); flex-shrink: 0; }
        .activity-card__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
        .activity-card__badges .activity-type { margin-bottom: 0; }
        .activity-priority { font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.12em; padding: 4px 10px; border-radius: 999px; display: inline-block; border: 1px solid transparent; }
        .activity-priority--important { background: rgba(255,250,0,0.1); color: #fffa00; border-color: rgba(255,250,0,0.28); }
        .activity-priority--urgent { background: rgba(255,0,85,0.14); color: #ff0055; border-color: rgba(255,0,85,0.35); }
        .activity-card.activity-important { border-color: rgba(255,250,0,0.28); }
        .activity-card.activity-important.activity-unread { border-color: rgba(255,0,85,0.4); }
        .activity-card__datetime { letter-spacing: 0.02em; }
        .activity-card__excerpt { line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .activity-card__body { margin-top: 0.65rem; padding: 0.85rem 1rem; border-radius: 12px; border: 1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.28); color: #d4d4d4; font-size: 0.8125rem; line-height: 1.55; }
        .activity-card__body p { margin: 0 0 0.65em; }
        .activity-card__body p:last-child { margin-bottom: 0; }
        .activity-card.is-open { border-color: rgba(0,243,255,0.35); box-shadow: 0 12px 36px rgba(0,243,255,0.08); }
        .activity-card.is-open .activity-card__body { border-color: rgba(0,243,255,0.18); }
        /* START MI ACADEMIA */
        .academy-summary-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 1.5rem; }
        .academy-summary-row--student { grid-template-columns: repeat(2, 1fr); }
        @media (min-width: 768px) { .academy-summary-row--student { grid-template-columns: repeat(4, 1fr); } }
        .academy-summary-card { padding: 1rem 1.1rem; border-radius: 16px; border: 1px solid rgba(255,255,255,0.1); background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.25) 100%); backdrop-filter: blur(8px); text-align: center; transition: border-color 0.25s, box-shadow 0.25s; }
        .academy-summary-card:hover { border-color: rgba(255,0,85,0.35); box-shadow: 0 8px 28px rgba(255,0,85,0.1); }
        .academy-summary-card strong { display: block; font-size: 2.15rem; font-family: 'Syncopate', sans-serif; color: #ff0055; line-height: 1.1; }
        .academy-summary-card--cyan strong { color: #00f3ff; }
        .academy-summary-card--muted strong { color: #ccc; font-size: 1.35rem; }
        #profileModal #profileTabBadgeAcademia { min-width: 24px; height: 24px; font-size: 11px; padding: 0 7px; }
        .academy-scroll { max-height: min(68vh, 640px); }
        .academy-folders { display: flex; flex-direction: column; gap: 10px; }
        .academy-folder { border-radius: 18px; border: 1px solid rgba(255,255,255,0.09); background: rgba(255,255,255,0.03); backdrop-filter: blur(10px); overflow: hidden; transition: border-color 0.28s, box-shadow 0.28s; }
        .academy-folder:hover { border-color: rgba(255,0,85,0.25); }
        .academy-folder.is-open { border-color: rgba(255,0,85,0.38); box-shadow: 0 12px 40px rgba(255,0,85,0.08); }
        .academy-folder-header { width: 100%; text-align: left; padding: 1.1rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; background: transparent; border: none; color: inherit; transition: background 0.25s; }
        .academy-folder-header:hover { background: rgba(255,255,255,0.04); }
        .academy-folder-header__left { min-width: 0; flex: 1; }
        .academy-folder-header__title { font-weight: 900; font-size: 0.95rem; color: white; text-transform: uppercase; letter-spacing: 0.06em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
        .academy-folder-header__meta { font-size: 0.75rem; color: #888; margin-top: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
        .academy-folder-header__meta .academy-progress-dots { color: #00f3ff; letter-spacing: 0.15em; }
        .academy-folder-new-count { font-size: 1.15rem; font-weight: 900; min-width: 32px; height: 32px; padding: 0 10px; border-radius: 999px; background: rgba(255,0,85,0.18); color: #ff0055; border: 2px solid rgba(255,0,85,0.45); box-shadow: 0 0 18px rgba(255,0,85,0.35); display: inline-flex; align-items: center; justify-content: center; line-height: 1; font-family: 'Syncopate', sans-serif; }
        .academy-folder-new-alert { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 10px 14px; border-radius: 12px; background: rgba(255,250,0,0.12); border: 1px solid rgba(255,250,0,0.4); color: #fffa00; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.04em; box-shadow: 0 0 20px rgba(255,250,0,0.12); animation: academyAlertPulse 2s ease-in-out infinite; }
        .academy-folder-new-alert i { font-size: 1.15rem; flex-shrink: 0; color: #fffa00; filter: drop-shadow(0 0 6px rgba(255,250,0,0.5)); }
        @keyframes academyAlertPulse { 0%, 100% { opacity: 1; border-color: rgba(255,250,0,0.4); } 50% { opacity: 0.92; border-color: rgba(255,250,0,0.65); box-shadow: 0 0 24px rgba(255,250,0,0.2); } }
        .academy-folder.has-new-week { border-color: rgba(255,250,0,0.22); }
        .academy-folder-chevron { color: #666; font-size: 1.1rem; transition: transform 0.35s ease, color 0.25s; flex-shrink: 0; }
        .academy-folder.is-open .academy-folder-chevron { transform: rotate(180deg); color: #ff0055; }
        .academy-folder-content { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease; }
        .academy-folder.is-open .academy-folder-content { max-height: 2400px; opacity: 1; }
        .academy-folder-content__inner { padding: 0 1rem 1.15rem; }
        .academy-video-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
        @media (min-width: 768px) { .academy-video-grid { grid-template-columns: repeat(3, 1fr); } }
        @media (min-width: 1200px) { .academy-video-grid { grid-template-columns: repeat(4, 1fr); } }
        .academy-video-card { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); background: #0f0f0f; text-align: left; cursor: pointer; transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s; width: 100%; padding: 0; }
        .academy-video-card:hover { transform: translateY(-4px); border-color: rgba(255,0,85,0.45); box-shadow: 0 14px 36px rgba(255,0,85,0.15); }
        .academy-video-card.video-new { border-color: rgba(255,0,85,0.28); }
        .academy-video-card.video-viewed { border-color: rgba(0,243,255,0.2); }
        .academy-video-card__img { position: relative; aspect-ratio: 16/10; overflow: hidden; }
        .academy-video-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s ease; }
        .academy-video-card__img-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #151515; color: #555; font-size: 2rem; }
        .academy-video-watch-btn { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; }
        .academy-video-watch-btn:disabled { opacity: 0.45; cursor: not-allowed; }
        .academy-video-card:hover .academy-video-card__img img { transform: scale(1.07); }
        .academy-video-card__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.45); opacity: 0; transition: opacity 0.3s; }
        .academy-video-card:hover .academy-video-card__play { opacity: 1; }
        .academy-video-card__play i { width: 48px; height: 48px; border-radius: 50%; background: #ff0055; color: white; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; box-shadow: 0 0 22px rgba(255,0,85,0.55); }
        .academy-video-card__dur { position: absolute; bottom: 8px; right: 8px; font-size: 9px; font-weight: 900; padding: 3px 8px; border-radius: 6px; background: rgba(0,0,0,0.85); color: white; }
        .academy-video-card__body { padding: 11px 12px 12px; }
        .academy-video-status { font-size: 8px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.12em; padding: 4px 8px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; }
        .academy-video-status--new { background: rgba(255,0,85,0.15); color: #ff0055; border: 1px solid rgba(255,0,85,0.35); }
        .academy-video-status--viewed { background: rgba(0,243,255,0.12); color: #00f3ff; border: 1px solid rgba(0,243,255,0.3); }
        .academy-video-status--continue { background: rgba(255,250,0,0.1); color: #fffa00; border: 1px solid rgba(255,250,0,0.28); }
        /* END MI ACADEMIA */
        .progress-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 1.75rem; }
        @media (min-width: 640px) { .progress-grid { grid-template-columns: repeat(4, 1fr); } }
        .progress-metric { padding: 1rem; border-radius: 16px; border: 1px solid rgba(255,255,255,0.09); background: rgba(255,255,255,0.03); text-align: center; transition: border-color 0.25s; }
        .progress-metric:hover { border-color: rgba(0,243,255,0.35); }
        .progress-metric strong { display: block; font-size: 1.5rem; color: #ff0055; font-family: 'Syncopate', sans-serif; margin-bottom: 4px; }
        .progress-level-bar { height: 10px; border-radius: 99px; background: rgba(255,255,255,0.08); overflow: hidden; margin-top: 12px; }
        .progress-level-bar span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ff0055 0%, #00f3ff 100%); box-shadow: 0 0 16px rgba(255,0,85,0.4); animation: progressBarPulse 2.5s ease-in-out infinite; }
        @keyframes progressBarPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.15); } }
        .progress-roadmap { position: relative; display: flex; flex-direction: row; align-items: stretch; justify-content: center; gap: 0; padding: 2rem 0.5rem 1.25rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; max-width: 100%; margin: 0 auto; }
        .progress-roadmap::before { content: ''; position: absolute; left: 8%; right: 8%; top: 28px; height: 3px; width: auto; bottom: auto; background: linear-gradient(90deg, #ff0055, #00f3ff); opacity: 0.45; border-radius: 99px; }
        .progress-roadmap-item { position: relative; flex: 1 1 0; min-width: 140px; max-width: 220px; padding: 2.75rem 0.85rem 0.5rem; text-align: center; padding-bottom: 0.5rem; }
        .progress-roadmap-item::before { content: ''; position: absolute; left: 50%; top: 18px; transform: translateX(-50%); width: 16px; height: 16px; border-radius: 50%; background: #111; border: 3px solid #ff0055; box-shadow: 0 0 14px rgba(255,0,85,0.55); }
        .progress-roadmap-item.is-current::before { background: #ff0055; }
        .progress-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,0,85,0.35); background: rgba(255,0,85,0.08); color: #ff0055; margin-top: 8px; margin-right: 6px; }
        .progress-badge--cyan { border-color: rgba(0,243,255,0.35); background: rgba(0,243,255,0.08); color: #00f3ff; }
        .progress-badge--yellow { border-color: rgba(255,250,0,0.3); background: rgba(255,250,0,0.08); color: #fffa00; }
        .study-programs-block { margin-top: 0.25rem; }
        .study-programs-block__intro { color: #888; font-size: 0.85rem; margin: 0 0 1rem; line-height: 1.5; }
        .study-programs-year { margin-bottom: 1.15rem; }
        .study-programs-year__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
        .study-programs-year__label { font-size: 0.78rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; margin: 0; }
        .study-programs-empty { padding: 1rem 1.1rem; border-radius: 18px; border: 1px solid rgba(255,255,255,0.09); background: rgba(255,255,255,0.03); }
        .study-program-card .academy-folder-header { align-items: flex-start; }
        .study-program-card__cta { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; color: #ff0055; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }
        .study-program-card__content { color: #cfcfcf; font-size: 0.9rem; line-height: 1.65; overflow-wrap: anywhere; word-break: break-word; }
        .study-program-card__content p { margin: 0 0 0.75rem; }
        .study-program-card__content p:last-child { margin-bottom: 0; }
        .study-program-card__content ul, .study-program-card__content ol { margin: 0 0 0.75rem; padding-left: 1.25rem; }
        .study-program-card__content img, .study-program-card__content table, .study-program-card__content pre, .study-program-card__content iframe { max-width: 100%; }
        #profile-panel-progreso .study-program-card.is-open > .academy-folder-content,
        #profile-panel-progreso .study-programs-history.is-open > .academy-folder-content { max-height: none; overflow: visible; opacity: 1; }
        .study-programs-history { margin-top: 0.5rem; }
        @media (max-width: 700px) {
            .study-program-card .academy-folder-header { flex-direction: column; }
            .study-program-card__cta { width: 100%; justify-content: space-between; }
        }
        .feedback-card { padding: 1rem 1.15rem; border-radius: 16px; border: 1px solid rgba(255,255,255,0.1); background: #0f0f0f; margin-bottom: 10px; cursor: pointer; transition: all 0.25s; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; width: 100%; text-align: left; }
        .feedback-card .feedback-detail { flex-basis: 100%; }
        .feedback-card:hover, .feedback-card.is-open { border-color: rgba(255,0,85,0.4); box-shadow: 0 8px 28px rgba(255,0,85,0.1); }
        .feedback-card img { width: 64px; height: 40px; border-radius: 8px; object-fit: cover; }
        .feedback-detail { display: none; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.08); animation: fadeInPage 0.35s ease; }
        .feedback-card.is-open .feedback-detail { display: block; }
        .feedback-video-wrap { border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,0.12); margin-bottom: 14px; aspect-ratio: 16/9; background: #000; }
        .feedback-video-wrap video { width: 100%; height: 100%; object-fit: cover; }
        .feedback-marker { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); margin-bottom: 8px; font-size: 0.85rem; }
        .feedback-marker time { font-weight: 900; color: #00f3ff; font-size: 0.75rem; min-width: 42px; font-variant-numeric: tabular-nums; }
        .feedback-marker--positive { border-color: rgba(74,222,128,0.25); background: rgba(74,222,128,0.06); }
        .feedback-marker--positive time { color: #4ade80; }
        .profile-tutor-hero { display: flex; align-items: center; gap: 16px; padding: 1.25rem; border-radius: 18px; border: 1px solid rgba(255,255,255,0.1); background: linear-gradient(135deg, rgba(255,0,85,0.08) 0%, rgba(0,0,0,0.3) 100%); margin-bottom: 1.25rem; }
        .profile-tutor-hero img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid #00f3ff; }
        .profile-tutor-switch { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1rem; }
        .profile-tutor-switch__btn { appearance: none; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); color: #ccc; border-radius: 999px; padding: 8px 14px; font-size: 0.75rem; font-weight: 700; cursor: pointer; transition: border-color 0.2s, color 0.2s, background 0.2s; }
        .profile-tutor-switch__btn.is-active { border-color: rgba(0,243,255,0.45); color: #00f3ff; background: rgba(0,243,255,0.08); }
        .profile-tutor-switch__badge { margin-left: 6px; font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: #ff0055; }
        .profile-tutor-consent { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.02); margin-bottom: 8px; }
        .profile-tutor-consent > div:first-child { min-width: 0; flex: 1 1 auto; }
        .profile-tutor-consent__title { margin: 0; color: #fff; font-size: 0.9rem; font-weight: 700; }
        .profile-tutor-consent__meta { margin: 4px 0 0; color: #888; font-size: 0.75rem; }
        .profile-tutor-consent__actions,
        .document-actions { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: nowrap; }
        @media (max-width: 430px) {
            .profile-tutor-consent { align-items: center; gap: 10px; }
            .profile-tutor-consent__download { width: 32px; height: 32px; }
        }
        .profile-tutor-consent__download { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; border: 1px solid rgba(0,229,255,0.35); background: rgba(0,229,255,0.08); color: #00e5ff; text-decoration: none; transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; }
        .profile-tutor-consent__download:hover { background: rgba(0,229,255,0.16); border-color: rgba(0,229,255,0.55); color: #7af3ff; transform: translateY(-1px); }
        .profile-tutor-consent__download i { font-size: 1rem; line-height: 1; }
        .profile-tutor-consent__download.is-disabled { opacity: 0.35; pointer-events: none; border-color: rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); color: #888; }
        .profile-tutor-badge { display: inline-flex; align-items: center; font-size: 9px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.15); color: #ccc; white-space: nowrap; }
        .profile-tutor-badge--green { border-color: rgba(74,222,128,0.35); background: rgba(74,222,128,0.1); color: #4ade80; }
        .profile-tutor-badge--yellow { border-color: rgba(255,250,0,0.35); background: rgba(255,250,0,0.1); color: #fffa00; }
        .profile-tutor-badge--pink { border-color: rgba(255,0,85,0.4); background: rgba(255,0,85,0.1); color: #ff0055; }
        .profile-tutor-badge--neutral { border-color: rgba(255,255,255,0.14); background: rgba(255,255,255,0.04); color: #bbb; }
        .profile-tutor-chips { display: flex; flex-wrap: wrap; gap: 8px; }
        .profile-tutor-chip { display: inline-flex; align-items: center; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(0,243,255,0.35); background: rgba(0,243,255,0.08); color: #00f3ff; font-size: 0.75rem; font-weight: 700; }
        .profile-tutor-chip.is-off { border-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); color: #666; }
        .profile-tutor-history { display: block; width: 100%; text-align: left; appearance: none; cursor: pointer; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.02); margin-bottom: 8px; color: inherit; transition: border-color 0.2s; }
        .profile-tutor-history:hover { border-color: rgba(255,0,85,0.35); }
        .profile-tutor-history__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
        .profile-tutor-history__title { color: #fff; font-weight: 700; font-size: 0.9rem; }
        .profile-tutor-history__meta { margin: 6px 0 0; color: #888; font-size: 0.75rem; }
        .profile-tutor-history__detail { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.08); color: #bbb; font-size: 0.8rem; }
        .profile-info-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
        @media (min-width: 640px) { .profile-info-grid { grid-template-columns: repeat(2, 1fr); } }
        .profile-info-tile { padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.02); }
        .profile-skeleton { border-radius: 16px; background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0.04) 75%); background-size: 200% 100%; animation: profileSkeletonShine 1.2s ease-in-out infinite; }
        @keyframes profileSkeletonShine { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
        .profile-empty { text-align: center; padding: 3rem 1.5rem; border-radius: 20px; border: 1px dashed rgba(255,255,255,0.12); background: rgba(255,255,255,0.02); }
        .profile-empty i { font-size: 2.5rem; color: #444; margin-bottom: 12px; display: block; }
        .profile-tooltip { position: relative; display: inline-flex; }
        .profile-tooltip[data-tip]::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) scale(0.95); opacity: 0; pointer-events: none; padding: 6px 10px; border-radius: 8px; background: #1a1a1a; border: 1px solid rgba(255,255,255,0.15); font-size: 10px; color: #ccc; white-space: nowrap; transition: opacity 0.2s, transform 0.2s; z-index: 5; }
        .profile-tooltip:hover::after { opacity: 1; transform: translateX(-50%) scale(1); }

/* Área privada — base, sidebar y utilidades del prototipo (sin depender de Tailwind CDN) */
        .sae-student-area {
            font-family: 'Space Grotesk', sans-serif;
            color: #fff;
            -webkit-font-smoothing: antialiased;
        }
        .sae-student-area .title-font { font-family: 'Syncopate', sans-serif; text-transform: uppercase; }
        .sae-student-area .profile-sidebar-head {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        /* Separador lateral: misma línea que bajo la cabecera (foto / nombre / perfil). */
        .sae-student-area .profile-sidebar-head,
        .sae-student-area .profile-sidebar-separator {
            margin-bottom: 1.5rem;
            padding-bottom: 1.5rem;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        .sae-student-area .profile-sidebar-separator {
            margin-top: 1.5rem;
            pointer-events: none;
        }
        @media (min-width: 768px) {
            .sae-student-area .profile-sidebar-head,
            .sae-student-area .profile-sidebar-separator {
                margin-bottom: 2rem;
            }
            .sae-student-area .profile-sidebar-separator {
                margin-top: 2rem;
            }
        }
        .sae-student-area .profile-sidebar-avatar {
            width: 48px;
            height: 48px;
            border-radius: 14px;
            object-fit: cover;
            object-position: center center;
            border: 2px solid #ff0055;
            flex-shrink: 0;
        }
        .sae-student-area .profile-sidebar-identity { min-width: 0; }
        .sae-student-area .profile-sidebar-label {
            font-size: 10px;
            color: #00f3ff;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin: 0;
        }
        .sae-student-area .profile-sidebar-name {
            color: #fff;
            font-weight: 700;
            font-size: 0.875rem;
            margin: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .sae-student-area button.profile-tab-btn,
        .sae-student-area button.profile-classes-view-btn,
        .sae-student-area button.profile-filter-btn {
            -webkit-appearance: none;
            appearance: none;
            box-sizing: border-box;
            font-family: inherit;
        }
        .sae-student-area .profile-sidebar .profile-tab-btn {
            width: 100%;
            text-align: left;
            padding: 14px 16px;
            border-radius: 12px;
            font-size: 0.78rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: #888;
            transition: all 0.25s ease;
            margin: 0 0 6px;
            display: flex;
            align-items: center;
            gap: 11px;
            border: 1px solid transparent;
            background: transparent;
            cursor: pointer;
            line-height: 1.3;
            box-shadow: none;
        }
        .sae-student-area .profile-sidebar a.profile-tab-btn {
            text-decoration: none;
            box-sizing: border-box;
            color: #888;
        }
        .sae-student-area .profile-sidebar .profile-tab-btn--logout {
            margin-top: 0;
        }
        .sae-student-area .profile-sidebar .profile-tab-btn i {
            font-size: 1.28rem;
            flex-shrink: 0;
            line-height: 1;
            color: inherit;
        }
        .sae-student-area .profile-sidebar .profile-tab-btn:not(.active):not(.active--yellow) {
            color: #888;
            border-color: transparent;
            background: transparent;
            box-shadow: none;
        }
        .sae-student-area .profile-sidebar .profile-tab-btn:not(.active):not(.active--yellow):hover {
            color: #fff;
            background: rgba(255,255,255,0.05);
        }
        .sae-student-area .profile-sidebar .profile-tab-btn.active {
            color: #ff0055;
            border: 1px solid rgba(255,0,85,0.4);
            background: linear-gradient(135deg, rgba(255,0,85,0.14) 0%, rgba(8,8,8,0.92) 100%);
            box-shadow: 0 0 22px rgba(255,0,85,0.15);
        }
        .sae-student-area .profile-sidebar .profile-tab-btn.active i {
            color: #ff0055;
        }
        .sae-student-area .profile-sidebar .profile-tab-btn.active--yellow {
            color: #fffa00;
            border: 1px solid rgba(255,250,0,0.35);
            background: linear-gradient(135deg, rgba(255,250,0,0.1) 0%, rgba(8,8,8,0.92) 100%);
            box-shadow: 0 0 20px rgba(255,250,0,0.12);
        }
        .sae-student-area .profile-sidebar .profile-tab-btn.active--yellow i {
            color: #fffa00;
        }
        .sae-student-area .profile-sidebar .profile-tab-badge {
            flex-shrink: 0;
            text-indent: 0 !important;
            letter-spacing: 0;
            line-height: 1;
            overflow: visible;
            z-index: 2;
        }
        #profile-panel-datos > div:nth-child(3) {
            display: grid;
            grid-template-columns: 1fr;
            gap: 14px;
        }
        @media (min-width: 640px) {
            #profile-panel-datos > div:nth-child(3) {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }
        #profile-panel-datos > div:nth-child(3) .profile-field {
            padding: 16px 18px;
            margin: 0;
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 14px;
            background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0.22) 100%);
            border-bottom: none;
            align-items: flex-start;
            gap: 12px;
            transition: border-color 0.25s ease, box-shadow 0.25s ease;
        }
        #profile-panel-datos > div:nth-child(3) .profile-field:hover {
            border-color: rgba(255,255,255,0.14);
            box-shadow: 0 8px 24px rgba(0,0,0,0.35);
        }
        #profile-panel-datos > div:nth-child(3) .profile-field > div > p:first-child {
            margin: 0 0 6px;
        }
        #profile-panel-datos > div:nth-child(3) .profile-field > div > p:last-child {
            margin: 0;
            font-size: 1rem;
            font-weight: 600;
            line-height: 1.4;
            color: #fff;
        }
        .sae-student-area .flex { display: flex; }
        .sae-student-area .flex-col { flex-direction: column; }
        .sae-student-area .flex-wrap { flex-wrap: wrap; }
        .sae-student-area .items-center { align-items: center; }
        .sae-student-area .items-start { align-items: flex-start; }
        .sae-student-area .justify-between { justify-content: space-between; }
        .sae-student-area .gap-1\.5 { gap: 6px; }
        .sae-student-area .gap-2 { gap: 8px; }
        .sae-student-area .gap-3 { gap: 12px; }
        .sae-student-area .gap-8 { gap: 32px; }
        .sae-student-area .min-w-0 { min-width: 0; }
        .sae-student-area .relative { position: relative; }
        .sae-student-area .absolute { position: absolute; }
        .sae-student-area .top-3 { top: 12px; }
        .sae-student-area .top-4 { top: 16px; }
        .sae-student-area .top-6 { top: 24px; }
        .sae-student-area .right-3 { right: 12px; }
        .sae-student-area .right-4 { right: 16px; }
        .sae-student-area .right-6 { right: 24px; }
        .sae-student-area .z-10 { z-index: 10; }
        .sae-student-area .z-50 { z-index: 50; }
        .sae-student-area .w-8 { width: 32px; }
        .sae-student-area .h-8 { height: 32px; }
        .sae-student-area .w-10 { width: 40px; }
        .sae-student-area .h-10 { height: 40px; }
        .sae-student-area .w-11 { width: 44px; }
        .sae-student-area .h-11 { height: 44px; }
        .sae-student-area .w-12 { width: 48px; }
        .sae-student-area .h-12 { height: 48px; }
        .sae-student-area .rounded-full { border-radius: 9999px; }
        .sae-student-area .object-cover { object-fit: cover; }
        .sae-student-area .border { border-width: 1px; border-style: solid; }
        .sae-student-area .border-2 { border-width: 2px; border-style: solid; }
        .sae-student-area .border-b { border-bottom-width: 1px; border-bottom-style: solid; }
        .sae-student-area .border-t { border-top-width: 1px; border-top-style: solid; }
        .sae-student-area .border-white\/10 { border-color: rgba(255,255,255,0.1); }
        .sae-student-area .border-white\/15 { border-color: rgba(255,255,255,0.15); }
        .sae-student-area .border-white\/20 { border-color: rgba(255,255,255,0.2); }
        .sae-student-area .border-\[\#ff0055\] { border-color: #ff0055; }
        .sae-student-area .text-white { color: #fff; }
        .sae-student-area .text-gray-300 { color: #d1d5db; }
        .sae-student-area .text-gray-400 { color: #9ca3af; }
        .sae-student-area .text-gray-500 { color: #6b7280; }
        .sae-student-area .text-\[\#ff0055\] { color: #ff0055; }
        .sae-student-area .text-\[\#00f3ff\] { color: #00f3ff; }
        .sae-student-area .text-\[\#fffa00\] { color: #fffa00; }
        .sae-student-area .text-\[9px\] { font-size: 9px; }
        .sae-student-area .text-\[10px\] { font-size: 10px; }
        .sae-student-area .text-xs { font-size: 0.75rem; }
        .sae-student-area .text-sm { font-size: 0.875rem; }
        .sae-student-area .text-lg { font-size: 1.125rem; }
        .sae-student-area .text-xl { font-size: 1.25rem; }
        .sae-student-area .text-3xl { font-size: 1.875rem; }
        .sae-student-area .font-bold { font-weight: 700; }
        .sae-student-area .font-black { font-weight: 900; }
        .sae-student-area .uppercase { text-transform: uppercase; }
        .sae-student-area .tracking-widest { letter-spacing: 0.1em; }
        .sae-student-area .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .sae-student-area .leading-tight { line-height: 1.25; }
        .sae-student-area .leading-relaxed { line-height: 1.625; }
        .sae-student-area .inline-block { display: inline-block; }
        .sae-student-area .mb-1 { margin-bottom: 0.25rem; }
        .sae-student-area .mb-2 { margin-bottom: 0.5rem; }
        .sae-student-area .mb-3 { margin-bottom: 0.75rem; }
        .sae-student-area .mb-4 { margin-bottom: 1rem; }
        .sae-student-area .mb-8 { margin-bottom: 2rem; }
        .sae-student-area .mb-6 { margin-bottom: 1.5rem; }
        .sae-student-area .mt-1 { margin-top: 0.25rem; }
        .sae-student-area .mt-2 { margin-top: 0.5rem; }
        .sae-student-area .mt-3 { margin-top: 0.75rem; }
        .sae-student-area .mt-0\.5 { margin-top: 0.125rem; }
        .sae-student-area .pb-6 { padding-bottom: 1.5rem; }
        .sae-student-area .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
        .sae-student-area .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
        .sae-student-area .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
        .sae-student-area .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
        .sae-student-area .space-y-2 > * + * { margin-top: 0.5rem; }
        .sae-student-area .btn-core {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 2px;
            padding: 16px 32px;
            transition: all 0.3s;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            z-index: 1;
        }
        .sae-student-area .btn-core.btn-outline {
            border: 1px solid rgba(255,255,255,0.3);
            background: transparent;
            color: #fff;
        }
        /* START TEACHER ACADEMY ACTIONS / MODALS */
        .teacher-academy-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1rem; }
        .teacher-academy-action-btn { display: inline-flex; align-items: center; gap: 6px; }
        .teacher-academy-modal.profile-booking-detail {
            z-index: 120;
        }
        .teacher-academy-modal .teacher-academy-modal-box { max-width: 440px; }
        .teacher-academy-modal .teacher-academy-modal-box--wide { max-width: min(720px, 94vw); max-height: min(78vh, 720px); overflow: auto; }
        .teacher-academy-form { display: flex; flex-direction: column; gap: 14px; }
        .teacher-academy-field { display: flex; flex-direction: column; gap: 6px; }
        .teacher-academy-field__label { font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.12em; color: #888; }
        .teacher-academy-field__hint { font-size: 0.75rem; color: #6b7280; line-height: 1.35; }
        .teacher-academy-toolbar { display: flex; flex-wrap: wrap; gap: 8px; }
        .teacher-academy-input { width: 100%; border-radius: 12px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); color: #fff; padding: 10px 12px; font-size: 0.9rem; }
        .teacher-academy-input:focus { outline: none; border-color: rgba(255,0,85,0.45); box-shadow: 0 0 0 1px rgba(255,0,85,0.2); }
        .teacher-academy-textarea { resize: vertical; min-height: 84px; }
        .teacher-academy-form-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 4px; }
        .teacher-academy-form-error { margin: 0; color: #ff6b8a; font-size: 0.85rem; line-height: 1.4; }
        .teacher-academy-form-error[hidden] { display: none !important; }
        .teacher-academy-form.is-submitting .teacher-academy-input,
        .teacher-academy-form.is-submitting .profile-filter-btn { pointer-events: none; opacity: 0.7; }
        .teacher-upload-progress { display: flex; flex-direction: column; gap: 8px; }
        .teacher-upload-progress[hidden] { display: none !important; }
        .teacher-upload-progress__label { margin: 0; color: #cfd3dc; font-size: 0.82rem; }
        .teacher-upload-progress__bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; }
        .teacher-upload-progress__fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ff0055, #00f3ff); transition: width 0.2s ease; }
        .teacher-manage-videos-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
        .teacher-manage-video-item { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); }
        .teacher-manage-video-item__thumb { width: 72px; height: 48px; border-radius: 10px; overflow: hidden; flex-shrink: 0; background: #111; border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; }
        .teacher-manage-video-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
        .teacher-manage-video-item__thumb-fallback { color: #555; font-size: 1.25rem; }
        .teacher-manage-video-item__body { flex: 1; min-width: 160px; }
        .teacher-manage-video-item__title { color: #fff; font-weight: 800; font-size: 0.92rem; margin: 0 0 4px; }
        .teacher-manage-video-item__meta { color: #888; font-size: 0.75rem; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; }
        .teacher-manage-video-item__actions { display: flex; flex-wrap: wrap; gap: 6px; }
        .teacher-manage-video-item__actions .profile-filter-btn:disabled { opacity: 0.45; cursor: not-allowed; }
        .teacher-manage-status-field { display: block; margin-top: 8px; max-width: 220px; }
        .teacher-manage-status-select { padding: 8px 10px; font-size: 0.8rem; }
        .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
        /* END TEACHER ACADEMY ACTIONS / MODALS */
        @media (min-width: 640px) {
            .sae-student-area .sm\:flex-row { flex-direction: row; }
        }

/* Ruta propia /mi-academia/ — visibilidad del shell sin navbar del theme */
        body.sae-student-area-route { background: #050505; color: #fff; margin: 0; min-height: 100vh; overflow: hidden; font-family: 'Space Grotesk', sans-serif; }
        body.sae-student-area-route .sae-student-area #profileModal.modal-overlay { opacity: 1; pointer-events: auto; }
        body.sae-student-area-route .sae-student-area #profileModal.modal-overlay .modal-box { transform: scale(1) translateY(0); }
        body.sae-student-area-route .sae-student-area-message { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem; text-align: center; }
        body.sae-student-area-route .sae-student-area-message p { max-width: 36rem; font-size: 1.05rem; line-height: 1.6; color: #e5e5e5; }

/* -------------------------------------------------------------------------- */
/* Skin visual "Next" (solo diseño, sin tocar lógica ni estructura funcional) */
/* -------------------------------------------------------------------------- */
        :root {
            --sae-bg: #030303;
            --sae-panel: rgba(15, 15, 15, 0.55);
            --sae-pink: #ff0055;
            --sae-cyan: #00e5ff;
            --sae-yellow: #faff00;
        }

        /* Cursor clásico siempre activo (petición del usuario). */
        .sae-student-area,
        .sae-student-area *,
        body.sae-student-area-route,
        body.sae-student-area-route * {
            cursor: auto !important;
        }

        body.sae-student-area-route {
            background:
                radial-gradient(circle at 12% 18%, rgba(255, 0, 85, 0.16) 0%, rgba(255, 0, 85, 0) 34%),
                radial-gradient(circle at 86% 92%, rgba(0, 229, 255, 0.12) 0%, rgba(0, 229, 255, 0) 36%),
                var(--sae-bg);
        }

        body.sae-student-area-route::before {
            content: '';
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            opacity: 0.06;
            background-image: radial-gradient(rgba(255, 255, 255, 0.25) 0.5px, transparent 0.5px);
            background-size: 3px 3px;
        }

        .sae-student-area {
            position: relative;
            z-index: 1;
        }

        .profile-content {
            position: relative;
            overflow-x: hidden;
            overflow-y: auto;
            background: transparent !important;
            border: none !important;
            border-radius: 0 !important;
            box-shadow: none !important;
        }

        .profile-content::before {
            content: 'STUDIO A ESCENA';
            position: absolute;
            left: -2%;
            top: 8%;
            font-family: 'Syncopate', sans-serif;
            font-size: clamp(48px, 12vw, 180px);
            letter-spacing: 0.05em;
            color: rgba(255, 255, 255, 0.04);
            white-space: nowrap;
            pointer-events: none;
            z-index: 0;
            animation: saeMarquee 38s linear infinite;
        }

        .profile-content > * {
            position: relative;
            z-index: 1;
        }

        .modal-box.modal-box--profile {
            background: rgba(6, 6, 6, 0.88);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow:
                0 40px 90px rgba(0, 0, 0, 0.85),
                0 0 40px rgba(255, 0, 85, 0.14);
            border-radius: 26px;
        }

        .profile-layout {
            background: linear-gradient(180deg, rgba(10, 10, 10, 0.72) 0%, rgba(7, 7, 7, 0.82) 100%);
        }

        .profile-sidebar {
            background: linear-gradient(180deg, rgba(12, 12, 12, 0.78) 0%, rgba(8, 8, 8, 0.88) 100%);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
        }

        .profile-sidebar-head {
            padding: 14px;
            border-radius: 18px;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        .profile-sidebar-avatar {
            width: 54px;
            height: 54px;
            border: 2px solid rgba(255, 0, 85, 0.55);
            box-shadow: 0 0 20px rgba(255, 0, 85, 0.25);
        }

        .profile-sidebar-label {
            color: var(--sae-cyan);
            letter-spacing: 0.16em;
            font-size: 9px;
        }

        .profile-sidebar .profile-tab-btn {
            border-radius: 14px;
            border: 1px solid transparent;
            color: #8b8b8b;
            transition: all 0.22s ease;
        }

        .profile-sidebar .profile-tab-btn:hover {
            color: #fff;
            border-color: rgba(255, 255, 255, 0.14);
            background: rgba(255, 255, 255, 0.05);
            transform: translateX(3px);
        }

        .profile-sidebar .profile-tab-btn.active {
            color: #fff;
            border-color: rgba(255, 0, 85, 0.38);
            background: linear-gradient(135deg, rgba(255, 0, 85, 0.16) 0%, rgba(14, 14, 14, 0.9) 100%);
            box-shadow: 0 10px 28px rgba(255, 0, 85, 0.14);
        }

        .profile-sidebar .profile-tab-btn.active i {
            color: var(--sae-pink);
        }

        .profile-content {
            background: transparent;
        }

        .profile-panel-head h2 {
            letter-spacing: -0.02em;
        }

        .profile-panel-head p {
            color: #7f7f7f;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            font-size: 11px;
            font-weight: 700;
        }

        .profile-field,
        .profile-plan-card,
        .profile-class-card,
        .profile-stat,
        .activity-card,
        .academy-summary-card,
        .academy-folder,
        .progress-metric,
        .profile-info-tile,
        .profile-tutor-item,
        .profile-empty {
            background: var(--sae-panel);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border-color: rgba(255, 255, 255, 0.1);
            border-radius: 16px;
        }

        .profile-field:hover,
        .profile-plan-card:hover,
        .profile-class-card:hover,
        .activity-card:hover,
        .academy-summary-card:hover,
        .academy-folder:hover,
        .progress-metric:hover {
            border-color: rgba(255, 0, 85, 0.28);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
        }

        .profile-avatar {
            border-width: 2px;
            border-color: rgba(255, 0, 85, 0.7);
            box-shadow:
                0 0 24px rgba(255, 0, 85, 0.26),
                0 0 0 8px rgba(255, 255, 255, 0.02);
        }

        .progress-level-bar {
            height: 12px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(255, 255, 255, 0.04);
        }

        .progress-level-bar span {
            background: linear-gradient(90deg, var(--sae-pink) 0%, var(--sae-cyan) 100%);
        }

        .profile-tab-badge {
            background: linear-gradient(135deg, #ff0055 0%, #ff3377 100%);
            box-shadow: 0 0 14px rgba(255, 0, 85, 0.5);
        }

        .profile-filter-btn.active,
        .teacher-academy-input:focus,
        .profile-search:focus,
        .academy-folder.is-open {
            border-color: rgba(0, 229, 255, 0.45);
            box-shadow: 0 0 20px rgba(0, 229, 255, 0.13);
        }

        .profile-sidebar::-webkit-scrollbar-thumb,
        .profile-content::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, rgba(255, 0, 85, 0.55) 0%, rgba(0, 229, 255, 0.45) 100%);
        }

        @media (max-width: 767px) {
            .modal-box.modal-box--profile {
                border-radius: 0;
            }
            .profile-content {
                background: transparent;
            }
        }

        /* Ajuste fino visual por secciones (sin cambios funcionales) */
        .profile-panel-head {
            display: flex;
            flex-direction: column;
            gap: 6px;
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
        }

        .profile-panel-head h2 {
            font-size: clamp(2rem, 4.2vw, 3.4rem);
            line-height: 0.95;
            text-transform: uppercase;
        }

        .profile-sidebar-separator {
            opacity: 0.55;
            border-bottom-color: rgba(255, 255, 255, 0.08);
        }

        .profile-classes-view-toggle,
        .profile-filter-bar {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 14px;
            padding: 4px;
        }

        .profile-classes-view-btn,
        .profile-filter-btn {
            border-radius: 10px;
        }

        .profile-classes-view-btn.active,
        .profile-filter-btn.active {
            background: linear-gradient(135deg, rgba(255, 0, 85, 0.2) 0%, rgba(255, 0, 85, 0.08) 100%);
            color: #fff;
            border-color: rgba(255, 0, 85, 0.35);
        }

        .academy-summary-row,
        .profile-stats-row,
        .progress-grid {
            gap: 14px;
        }

        .academy-summary-card strong,
        .profile-stat strong,
        .progress-metric strong {
            letter-spacing: -0.02em;
            text-shadow: 0 0 14px rgba(255, 0, 85, 0.16);
        }

        .academy-folder-header__title,
        .profile-class-card h4,
        .profile-tutor-hero h3 {
            letter-spacing: 0.01em;
        }

        .academy-video-card,
        .profile-class-card,
        .activity-card,
        .profile-plan-card {
            transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
        }

        .academy-video-card:hover,
        .profile-class-card:hover,
        .activity-card:hover,
        .profile-plan-card:hover {
            transform: translateY(-2px);
        }

        .profile-schedule {
            background: linear-gradient(180deg, rgba(18, 18, 18, 0.95) 0%, rgba(10, 10, 10, 0.96) 100%);
            border-color: rgba(255, 255, 255, 0.14);
        }

        .profile-schedule__head {
            background: rgba(20, 20, 20, 0.95);
        }

        .profile-schedule__event {
            border-width: 1px;
            border-style: solid;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
        }

        .profile-tutor-consent,
        .profile-tutor-history,
        .profile-info-tile {
            border-color: rgba(255, 255, 255, 0.1);
        }

        .profile-empty {
            border-style: solid;
            border-color: rgba(255, 255, 255, 0.1);
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%),
                var(--sae-panel);
        }

        .profile-empty i {
            color: rgba(255, 255, 255, 0.28);
        }

        /* Pasada 3: acercamiento visual a dock + bento */
        @media (min-width: 900px) {
            .profile-layout {
                grid-template-columns: 110px 1fr;
            }

            .profile-sidebar {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 10px;
                padding: 1.2rem 0.75rem;
                background: rgba(10, 10, 10, 0.62);
                border-right: none;
            }

            .profile-sidebar-head {
                width: 84px;
                flex-direction: column;
                text-align: center;
                padding: 10px 8px;
                gap: 8px;
                border-radius: 16px;
            }

            .profile-sidebar-avatar {
                width: 42px;
                height: 42px;
            }

            .profile-sidebar-name {
                font-size: 0.66rem;
                line-height: 1.25;
                white-space: normal;
                word-break: break-word;
            }

            .profile-sidebar-label {
                font-size: 8px;
                letter-spacing: 0.11em;
            }

            .profile-sidebar .profile-tab-btn {
                width: 84px;
                height: 54px;
                justify-content: center;
                border-radius: 16px;
                padding: 8px 6px;
                margin: 0;
                position: relative;
                text-indent: -9999px;
                overflow: hidden;
            }

            .profile-sidebar .profile-tab-btn i {
                font-size: 1.35rem;
                margin: 0;
                text-indent: 0;
            }

            .profile-sidebar .profile-tab-btn.active::after {
                content: '';
                position: absolute;
                right: 8px;
                top: 50%;
                transform: translateY(-50%);
                width: 3px;
                height: 24px;
                border-radius: 8px;
                background: var(--sae-pink);
                box-shadow: 0 0 12px rgba(255, 0, 85, 0.8);
            }

            .profile-tab-badge {
                position: absolute;
                top: 4px;
                right: 4px;
                min-width: 18px;
                height: 18px;
                font-size: 10px;
                font-weight: 900;
                line-height: 1;
                letter-spacing: 0;
                text-indent: 0 !important;
                padding: 0 5px;
                display: none;
                align-items: center;
                justify-content: center;
                z-index: 3;
            }

            .profile-tab-badge.is-visible {
                display: inline-flex !important;
            }

            .profile-sidebar-separator {
                width: 56px;
                margin: 4px auto;
                padding: 0;
                border-bottom-width: 1px;
            }

            .profile-tab-btn--logout {
                margin-top: auto !important;
            }
        }

        .profile-content > .profile-panel.active {
            animation: fadeInPage 0.45s ease;
        }

        .profile-info-grid {
            gap: 12px;
        }

        .profile-info-tile {
            border-radius: 14px;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
        }

        .academy-video-card__body .profile-filter-btn {
            width: 100%;
            justify-content: center;
            margin-top: 10px;
        }

        .activity-feed {
            gap: 14px;
        }

        .activity-card {
            border-radius: 18px;
        }

        .activity-type {
            font-size: 8px;
            letter-spacing: 0.13em;
        }

        #profile-panel-datos .profile-field {
            min-height: 86px;
        }

        #profile-panel-datos .profile-field i {
            filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.08));
        }

        #profile-panel-progreso .progress-roadmap-item {
            padding-bottom: 1.2rem;
        }

        #profile-panel-progreso .progress-badge {
            margin-bottom: 6px;
        }

        /* Pasada 4: optimización móvil/tablet */
        @media (max-width: 1024px) {
            .modal-box.modal-box--profile {
                width: 100vw;
                max-width: 100vw;
                height: 100vh;
                max-height: 100vh;
                min-height: 100vh;
                border-radius: 0;
            }

            #profileModal.modal-overlay {
                padding: 0;
            }

            .profile-layout {
                grid-template-columns: 1fr;
            }

            .profile-sidebar {
                display: grid;
                grid-template-columns: 1fr;
                gap: 8px;
                padding: 1rem 0.9rem;
            }

            .profile-sidebar-head {
                margin-bottom: 0.5rem;
            }

            .profile-sidebar-separator {
                display: none;
            }

            .profile-sidebar .profile-tab-btn,
            .profile-sidebar a.profile-tab-btn {
                min-height: 44px;
                border-radius: 12px;
                font-size: 0.72rem;
                letter-spacing: 0.08em;
                padding: 10px 12px;
                margin-bottom: 0;
            }

            .profile-tab-btn--logout {
                margin-top: 0.25rem;
            }

            .profile-content {
                padding: 1.15rem 1rem 1.5rem;
            }

            .profile-panel-head {
                margin-bottom: 1rem;
                padding-bottom: 0.8rem;
            }

            .profile-panel-head h2 {
                font-size: clamp(1.5rem, 7vw, 2.1rem);
                line-height: 0.98;
            }

            .profile-panel-head p {
                font-size: 10px;
                letter-spacing: 0.04em;
            }

            .profile-stats-row,
            .academy-summary-row,
            .progress-grid,
            .profile-info-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 10px;
            }

            .profile-stat,
            .academy-summary-card,
            .progress-metric,
            .profile-info-tile {
                padding: 0.85rem 0.8rem;
                border-radius: 13px;
            }

            .profile-stat strong,
            .academy-summary-card strong,
            .progress-metric strong {
                font-size: 1.28rem;
            }

            .profile-search-wrap {
                margin-bottom: 0.9rem;
            }

            .profile-search {
                padding: 10px 12px 10px 38px;
                font-size: 0.82rem;
                border-radius: 12px;
            }

            .profile-filter-bar,
            .profile-classes-view-toggle {
                gap: 6px;
                padding: 4px;
                margin-bottom: 0.9rem;
            }

            .profile-filter-btn,
            .profile-classes-view-btn {
                padding: 8px 10px;
                font-size: 9px;
                letter-spacing: 0.08em;
            }

            .academy-video-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 10px;
            }

            .academy-video-card__body {
                padding: 10px;
            }

            .academy-video-card__body .profile-filter-btn {
                font-size: 9px;
                padding: 8px 10px;
            }

            .activity-feed {
                padding-left: 12px;
                gap: 10px;
            }

            .activity-feed::before {
                left: 2px;
            }

            .activity-card {
                border-radius: 14px;
                padding: 0.9rem;
            }

            .profile-class-card,
            .profile-plan-card,
            .profile-tutor-consent,
            .profile-tutor-history {
                border-radius: 14px;
                padding: 0.9rem;
            }

            .profile-month-grid {
                gap: 4px;
            }

            .profile-month-day {
                min-height: 66px;
                border-radius: 8px;
            }
        }

        @media (max-width: 640px) {
            .profile-content {
                padding: 1rem 0.85rem 1.25rem;
            }

            .profile-stats-row,
            .academy-summary-row,
            .progress-grid,
            .profile-info-grid {
                grid-template-columns: 1fr;
            }

            .profile-sidebar-head {
                padding: 10px;
                border-radius: 14px;
            }

            .profile-sidebar-avatar {
                width: 44px;
                height: 44px;
            }

            .profile-avatar {
                width: 86px;
                height: 86px;
            }

            #profile-panel-datos .profile-field {
                min-height: 74px;
                padding: 12px 14px;
            }

            .academy-video-grid {
                grid-template-columns: 1fr;
            }

            .profile-schedule__head,
            .profile-schedule__body-inner {
                min-width: 640px;
            }

            .profile-schedule__event-title {
                font-size: 9px;
            }
        }

        /* Acabado final premium: contraste + ritmo visual */
        .title-font {
            text-wrap: balance;
        }

        .profile-panel {
            padding-bottom: 0.35rem;
        }

        .profile-panel > *:last-child {
            margin-bottom: 0;
        }

        .text-gray-500 {
            color: #9a9a9a;
        }

        .text-gray-400 {
            color: #b2b2b2;
        }

        .profile-panel-head {
            border-bottom-color: rgba(255, 255, 255, 0.1);
        }

        .profile-sidebar .profile-tab-btn,
        .profile-sidebar a.profile-tab-btn {
            box-shadow: inset 0 0 0 1px transparent;
        }

        .profile-sidebar .profile-tab-btn:hover,
        .profile-sidebar a.profile-tab-btn:hover {
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
        }

        .profile-sidebar .profile-tab-btn.active {
            box-shadow:
                0 12px 24px rgba(255, 0, 85, 0.14),
                inset 0 0 0 1px rgba(255, 0, 85, 0.28);
        }

        .profile-field,
        .profile-class-card,
        .profile-plan-card,
        .profile-tutor-item,
        .profile-info-tile,
        .activity-card,
        .academy-summary-card,
        .academy-folder,
        .progress-metric,
        .profile-stat {
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
        }

        .profile-field:hover,
        .profile-class-card:hover,
        .profile-plan-card:hover,
        .activity-card:hover,
        .academy-summary-card:hover,
        .academy-folder:hover,
        .progress-metric:hover,
        .profile-stat:hover {
            box-shadow:
                0 10px 30px rgba(0, 0, 0, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.07);
        }

        .profile-search,
        .teacher-academy-input {
            border-color: rgba(255, 255, 255, 0.14);
            background: rgba(255, 255, 255, 0.03);
        }

        .profile-search::placeholder,
        .teacher-academy-input::placeholder {
            color: #7d7d7d;
        }

        .profile-filter-btn {
            border-color: rgba(255, 255, 255, 0.14);
            color: #b7b7b7;
            background: rgba(255, 255, 255, 0.03);
        }

        .profile-filter-btn:hover {
            color: #fff;
            border-color: rgba(255, 255, 255, 0.24);
            background: rgba(255, 255, 255, 0.06);
        }

        .profile-filter-btn.active {
            color: #fff;
            border-color: rgba(255, 0, 85, 0.4);
            background: linear-gradient(135deg, rgba(255, 0, 85, 0.26) 0%, rgba(255, 0, 85, 0.1) 100%);
        }

        .academy-video-card__dur {
            border: 1px solid rgba(255, 255, 255, 0.14);
            letter-spacing: 0.04em;
        }

        .academy-video-status {
            font-size: 8px;
            letter-spacing: 0.11em;
        }

        .profile-schedule__legend {
            border-color: rgba(255, 255, 255, 0.1);
            background: rgba(255, 255, 255, 0.025);
        }

        .profile-booking-detail-box {
            border-color: rgba(255, 255, 255, 0.16);
            background: rgba(14, 14, 14, 0.95);
        }

        .profile-empty {
            color: #c6c6c6;
        }

        .profile-empty p {
            margin: 0;
        }

        /* ================================================================== */
        /* AJUSTE FIEL AL HTML DE REFERENCIA (sin tocar lógica)               */
        /* ================================================================== */
        /* Quitar el texto gigante que no corresponde al mockup */
        .profile-content::before {
            content: none !important;
            animation: none !important;
        }

        /* Fondo animado visible y limpio */
        .sae-ambient__noise { opacity: 0.045 !important; }
        .sae-ambient__light--pink { opacity: 0.3 !important; }
        .sae-ambient__light--cyan { opacity: 0.24 !important; }
        .sae-ambient__marquee { opacity: 0.03 !important; top: 10% !important; }
        .sae-ambient__marquee span {
            font-size: clamp(90px, 14vw, 240px) !important;
            letter-spacing: 0.03em !important;
            color: rgba(255,255,255,0.9) !important;
        }

        /* Sidebar flotante redondo tipo "dock" */
        @media (min-width: 900px) {
            .profile-layout {
                grid-template-columns: 88px 1fr !important;
                gap: 16px !important;
                padding: 14px !important;
            }

            .profile-sidebar {
                border-radius: 34px !important;
                padding: 10px 6px !important;
                gap: 8px !important;
                background: linear-gradient(180deg, rgba(28, 15, 24, 0.72) 0%, rgba(14, 14, 14, 0.78) 100%) !important;
                border: 1px solid rgba(255, 255, 255, 0.1) !important;
                box-shadow: 0 20px 44px rgba(0,0,0,0.58), inset 0 1px 0 rgba(255,255,255,0.05) !important;
                overflow: hidden;
            }

            .profile-sidebar-head {
                width: 70px !important;
                min-height: 66px;
                margin: 0 auto 6px !important;
                border-radius: 16px !important;
                padding: 8px 6px !important;
                background: rgba(255,255,255,0.03) !important;
            }

            .profile-sidebar-avatar {
                width: 40px !important;
                height: 40px !important;
                border-width: 2px !important;
            }

            .profile-sidebar-name,
            .profile-sidebar-label {
                display: none !important;
            }

            .profile-sidebar .profile-tab-btn,
            .profile-sidebar a.profile-tab-btn {
                width: 70px !important;
                height: 46px !important;
                border-radius: 14px !important;
                padding: 0 !important;
                margin: 0 auto !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                text-indent: -9999px !important;
                background: rgba(255,255,255,0.02) !important;
                border: 1px solid transparent !important;
                transform: none !important;
            }

            .profile-sidebar .profile-tab-btn i,
            .profile-sidebar a.profile-tab-btn i {
                text-indent: 0 !important;
                margin: 0 !important;
                font-size: 1.12rem !important;
                color: #868686 !important;
            }

            .profile-sidebar .profile-tab-btn:hover,
            .profile-sidebar a.profile-tab-btn:hover {
                background: rgba(255,255,255,0.05) !important;
            }

            .profile-sidebar .profile-tab-btn.active {
                background: rgba(255,255,255,0.07) !important;
                border-color: rgba(255, 0, 85, 0.36) !important;
                box-shadow: inset 0 0 0 1px rgba(255,0,85,0.2), 0 8px 20px rgba(0,0,0,0.36) !important;
            }

            .profile-sidebar .profile-tab-btn.active i {
                color: #ff0055 !important;
            }

            .profile-sidebar .profile-tab-btn.active::after {
                content: '' !important;
                position: absolute !important;
                right: 5px !important;
                top: 50% !important;
                transform: translateY(-50%) !important;
                width: 2px !important;
                height: 20px !important;
                border-radius: 99px !important;
                background: #ff0055 !important;
                box-shadow: 0 0 10px rgba(255,0,85,0.8) !important;
            }

            .profile-sidebar-separator {
                width: 42px !important;
                margin: 6px auto !important;
                opacity: 0.35 !important;
            }

            .profile-tab-btn--logout {
                margin-top: auto !important;
            }

            .profile-tab-btn--logout i {
                color: #ff3f4f !important;
            }

            .profile-content {
                border-radius: 0 !important;
                background: transparent !important;
                border: none !important;
                box-shadow: none !important;
            }
        }

        /* Tarjetas estilo flotante del mockup */
        #profile-panel-progreso .progress-bento {
            gap: 14px !important;
        }

        #profile-panel-progreso .progress-bento__hero {
            background:
                radial-gradient(circle at 16% 16%, rgba(255,0,85,0.16) 0%, rgba(255,0,85,0) 58%),
                linear-gradient(165deg, rgba(255,255,255,0.04) 0%, rgba(20,20,20,0.92) 100%) !important;
            border-radius: 24px !important;
            border: 1px solid rgba(255,255,255,0.11) !important;
            box-shadow: 0 16px 34px rgba(0,0,0,0.4) !important;
        }

        #profile-panel-progreso .progress-bento__ring {
            width: 188px !important;
            height: 188px !important;
            border-width: 2px !important;
            border-color: rgba(255,255,255,0.1) !important;
        }

        #profile-panel-progreso .progress-bento__stats {
            border-radius: 20px !important;
            border: 1px solid rgba(255,255,255,0.1) !important;
            background: linear-gradient(90deg, rgba(12,12,12,0.88) 0%, rgba(18,32,36,0.5) 100%) !important;
            box-shadow: 0 14px 28px rgba(0,0,0,0.3) !important;
        }

        #profile-panel-progreso .progress-bento__stat-card {
            padding: 16px 10px !important;
        }

        #profile-panel-progreso .progress-bento__event {
            border-radius: 22px !important;
            border: 1px solid rgba(0,229,255,0.2) !important;
            background:
                linear-gradient(90deg, rgba(8,8,8,0.9) 0%, rgba(0,80,92,0.32) 100%),
                linear-gradient(165deg, rgba(255,255,255,0.04) 0%, rgba(10,10,10,0.95) 100%) !important;
            box-shadow: 0 16px 34px rgba(0,0,0,0.34) !important;
        }

        #profile-panel-progreso .progress-bento__event h3 {
            letter-spacing: 0.02em !important;
        }

        #profile-panel-progreso .progress-level-bar {
            margin-top: 10px !important;
            margin-bottom: 8px !important;
        }

        /* FIX REAL: fondo animado visible dentro del modal principal */
        .modal-box.modal-box--profile {
            position: relative !important;
            background: rgba(5, 5, 5, 0.62) !important;
            overflow: hidden !important;
            isolation: isolate;
        }

        .modal-box.modal-box--profile::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            opacity: 0.06;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.68' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
        }

        .modal-box.modal-box--profile::after {
            content: var(--sae-bg-label, 'MIS DATOS');
            position: absolute;
            left: -4%;
            top: 12%;
            z-index: 0;
            pointer-events: none;
            font-family: 'Syncopate', sans-serif;
            font-size: clamp(74px, 13vw, 230px);
            font-weight: 900;
            letter-spacing: 0.02em;
            color: rgba(255, 255, 255, 0.07);
            -webkit-text-stroke: 2px rgba(255, 255, 255, 0.08);
            text-stroke: 2px rgba(255, 255, 255, 0.08);
            text-transform: uppercase;
            white-space: nowrap;
            animation: saeSectionSweep 20s ease-in-out infinite alternate;
        }

        .profile-layout {
            position: relative;
            z-index: 1;
            background: transparent !important;
        }

        .sae-ambient { display: none !important; }

        /* FIX REAL: dock lateral flotante redondo */
        @media (min-width: 900px) {
            .profile-layout {
                grid-template-columns: 92px 1fr !important;
                gap: 14px !important;
                padding: 12px !important;
            }

            .profile-sidebar {
                align-self: stretch !important;
                width: 92px !important;
                min-width: 92px !important;
                max-width: 92px !important;
                border-radius: 38px !important;
                padding: 10px 8px !important;
                background: linear-gradient(180deg, rgba(27, 13, 22, 0.75) 0%, rgba(14, 14, 14, 0.82) 100%) !important;
                border: 1px solid rgba(255,255,255,0.12) !important;
                box-shadow: 0 24px 50px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06) !important;
            }

            .profile-sidebar-head {
                width: 72px !important;
                min-height: 70px !important;
                margin: 0 auto 8px !important;
                border-radius: 16px !important;
                background: rgba(255,255,255,0.04) !important;
                border: 1px solid rgba(255,255,255,0.08) !important;
                padding: 8px 6px !important;
            }

            .profile-sidebar-avatar {
                width: 42px !important;
                height: 42px !important;
            }

            .profile-sidebar-name,
            .profile-sidebar-label {
                display: none !important;
            }

            .profile-sidebar .profile-tab-btn,
            .profile-sidebar a.profile-tab-btn {
                width: 72px !important;
                height: 46px !important;
                margin: 0 auto !important;
                border-radius: 14px !important;
                padding: 0 !important;
                text-indent: -9999px !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                background: rgba(255,255,255,0.02) !important;
                border: 1px solid transparent !important;
            }

            .profile-sidebar .profile-tab-btn i,
            .profile-sidebar a.profile-tab-btn i {
                text-indent: 0 !important;
                margin: 0 !important;
                color: #868686 !important;
                font-size: 1.08rem !important;
            }

            .profile-sidebar .profile-tab-btn.active {
                background: rgba(255,255,255,0.07) !important;
                border-color: rgba(255,0,85,0.35) !important;
            }

            .profile-sidebar .profile-tab-btn.active i {
                color: #ff0055 !important;
            }

            .profile-sidebar .profile-tab-btn.active::after {
                content: '';
                position: absolute;
                right: 6px;
                top: 50%;
                transform: translateY(-50%);
                width: 2px;
                height: 20px;
                border-radius: 99px;
                background: #ff0055;
                box-shadow: 0 0 10px rgba(255,0,85,0.8);
            }
        }

        /* ------------------------------------------------------------------ */
        /* Efectos visuales fieles a la referencia (solo capa visual)         */
        /* ------------------------------------------------------------------ */
        .sae-ambient {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            overflow: hidden;
        }

        .sae-ambient__noise {
            position: absolute;
            inset: 0;
            opacity: 0.06;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
        }

        .sae-ambient__light {
            position: absolute;
            border-radius: 999px;
            filter: blur(120px);
            opacity: 0.25;
            animation: saeAmbientDrift 18s ease-in-out infinite alternate;
        }

        .sae-ambient__light--pink {
            top: -10%;
            left: -12%;
            width: 42vw;
            height: 42vw;
            background: rgba(255, 0, 85, 0.36);
        }

        .sae-ambient__light--cyan {
            right: -10%;
            bottom: -18%;
            width: 50vw;
            height: 50vw;
            background: rgba(0, 229, 255, 0.25);
            animation-delay: -9s;
        }

        .sae-ambient__marquee {
            position: absolute;
            top: 12%;
            left: 0;
            width: 100%;
            overflow: hidden;
            opacity: 0.05;
            white-space: nowrap;
        }

        .sae-ambient__marquee span {
            display: inline-block;
            font-family: 'Syncopate', sans-serif;
            font-size: clamp(58px, 12vw, 220px);
            font-weight: 700;
            letter-spacing: 0.08em;
            color: #ffffff;
            animation: saeMarquee 45s linear infinite;
        }

        @keyframes saeAmbientDrift {
            0% { transform: translate3d(0, 0, 0) scale(1); }
            100% { transform: translate3d(10%, 8%, 0) scale(1.18); }
        }

        @keyframes saeMarquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        .sae-student-area {
            position: relative;
            z-index: 1;
        }

        #profileModal.modal-overlay {
            background: rgba(0, 0, 0, 0.74);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
        }

        /* Sidebar flotante real en desktop, como banner vertical */
        @media (min-width: 900px) {
            .profile-layout {
                grid-template-columns: 104px 1fr;
                gap: 18px;
                padding: 18px;
            }

            .profile-sidebar {
                position: relative;
                top: 0;
                align-self: stretch;
                border-radius: 34px;
                border: 1px solid rgba(255, 255, 255, 0.09);
                background: linear-gradient(180deg, rgba(20, 10, 18, 0.72) 0%, rgba(13, 13, 13, 0.74) 100%);
                box-shadow:
                    0 24px 55px rgba(0, 0, 0, 0.58),
                    inset 0 1px 0 rgba(255, 255, 255, 0.06);
                padding: 14px 8px;
            }

            .profile-content {
                border-radius: 0;
                border: none;
                box-shadow: none;
                background: transparent;
                padding: 2rem 2.2rem 2.4rem;
            }

            .profile-sidebar .profile-tab-btn {
                width: 86px;
                height: 56px;
                border-radius: 18px;
                background: rgba(255, 255, 255, 0.015);
            }

            .profile-sidebar .profile-tab-btn.active {
                background: linear-gradient(160deg, rgba(255, 0, 85, 0.22) 0%, rgba(32, 16, 24, 0.84) 100%);
                border-color: rgba(255, 0, 85, 0.36);
            }

            .profile-sidebar .profile-tab-btn.active::after {
                right: 6px;
                height: 26px;
            }
        }

        /* Tarjetas flotantes más parecidas al mockup */
        .profile-field,
        .profile-class-card,
        .profile-plan-card,
        .activity-card,
        .academy-summary-card,
        .academy-folder,
        .progress-metric,
        .profile-stat,
        .profile-info-tile,
        .profile-tutor-consent,
        .profile-tutor-history,
        .profile-tutor-item {
            border: 1px solid rgba(255, 255, 255, 0.11);
            background:
                linear-gradient(165deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.008) 48%, rgba(0, 0, 0, 0.36) 100%);
            box-shadow:
                0 16px 34px rgba(0, 0, 0, 0.28),
                inset 0 1px 0 rgba(255, 255, 255, 0.055);
        }

        .profile-field:hover,
        .profile-class-card:hover,
        .profile-plan-card:hover,
        .activity-card:hover,
        .academy-summary-card:hover,
        .academy-folder:hover,
        .progress-metric:hover,
        .profile-stat:hover,
        .profile-info-tile:hover {
            transform: translateY(-2px);
            border-color: rgba(255, 0, 85, 0.28);
            box-shadow:
                0 24px 42px rgba(0, 0, 0, 0.34),
                0 0 24px rgba(255, 0, 85, 0.11),
                inset 0 1px 0 rgba(255, 255, 255, 0.07);
        }

        .academy-summary-card strong,
        .profile-stat strong,
        .progress-metric strong {
            font-size: clamp(1.7rem, 3vw, 2.45rem);
            font-family: 'Syncopate', sans-serif;
        }

        .academy-video-card {
            border-color: rgba(255, 255, 255, 0.12);
            background: linear-gradient(160deg, rgba(20, 20, 20, 0.96) 0%, rgba(10, 10, 10, 0.96) 100%);
            box-shadow: 0 16px 35px rgba(0, 0, 0, 0.35);
        }

        .academy-video-card:hover {
            transform: translateY(-4px) scale(1.01);
            box-shadow:
                0 22px 44px rgba(0, 0, 0, 0.42),
                0 0 26px rgba(255, 0, 85, 0.16);
        }

        .progress-bento {
            display: grid;
            grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.45fr);
            grid-template-areas:
                "hero stats"
                "hero event";
            gap: 16px;
            margin-bottom: 1.5rem;
        }

        .progress-bento__hero,
        .progress-bento__stats,
        .progress-bento__event {
            border-radius: 24px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            background: linear-gradient(165deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.015) 50%, rgba(0,0,0,0.32) 100%);
            box-shadow: 0 18px 36px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.06);
        }

        .progress-bento__hero {
            grid-area: hero;
            padding: 24px 20px;
            text-align: center;
        }

        .progress-bento__kicker {
            margin: 0 0 14px;
            text-transform: uppercase;
            letter-spacing: 0.15em;
            font-size: 9px;
            font-weight: 800;
            color: #8e8e8e;
        }

        .progress-bento__ring {
            width: 170px;
            height: 170px;
            margin: 0 auto 16px;
            border-radius: 50%;
            border: 3px solid rgba(255, 255, 255, 0.08);
            display: grid;
            place-items: center;
            box-shadow: inset 0 0 24px rgba(255,255,255,0.04);
        }

        .progress-bento__ring-inner strong {
            display: block;
            color: #fff;
            font-size: clamp(2rem, 4vw, 3rem);
            font-family: 'Syncopate', sans-serif;
            letter-spacing: -0.03em;
        }

        .progress-bento__ring-inner span {
            color: #00e5ff;
            text-transform: uppercase;
            font-size: 9px;
            letter-spacing: 0.15em;
            font-weight: 800;
        }

        .progress-bento__range {
            margin: 0;
            font-size: 1.25rem;
            font-weight: 800;
            color: #fff;
        }

        .progress-bento__sub {
            margin: 8px 0 0;
            color: #9b9b9b;
            font-size: 0.85rem;
        }

        .progress-bento__stats {
            grid-area: stats;
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            overflow: hidden;
        }

        .progress-bento__stat-card {
            padding: 18px 14px;
            text-align: center;
            border-right: 1px solid rgba(255,255,255,0.07);
        }

        .progress-bento__stat-card:last-child {
            border-right: none;
        }

        .progress-bento__stat-card i {
            color: #00e5ff;
            font-size: 1.2rem;
            margin-bottom: 8px;
            display: inline-block;
        }

        .progress-bento__stat-card strong {
            display: block;
            font-size: 2rem;
            line-height: 1.1;
            color: #fff;
            font-family: 'Syncopate', sans-serif;
        }

        .progress-bento__stat-card span {
            display: block;
            margin-top: 8px;
            text-transform: uppercase;
            letter-spacing: 0.13em;
            font-size: 9px;
            color: #8f8f8f;
            font-weight: 800;
        }

        .progress-bento__event {
            grid-area: event;
            padding: 20px;
            background:
                linear-gradient(90deg, rgba(0,0,0,0.1) 0%, rgba(0,229,255,0.1) 100%),
                linear-gradient(165deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.015) 50%, rgba(0,0,0,0.32) 100%);
        }

        .progress-bento__event h3 {
            margin: 0 0 12px;
            color: #fff;
            font-family: 'Syncopate', sans-serif;
            font-size: clamp(1.1rem, 2.5vw, 1.8rem);
            line-height: 1.1;
        }

        .progress-bento__event-text {
            margin: 12px 0 0;
            color: #b8b8b8;
            font-size: 0.85rem;
        }

        @media (max-width: 1024px) {
            .sae-ambient__marquee {
                top: 9%;
                opacity: 0.035;
            }

            .progress-bento {
                grid-template-columns: 1fr;
                grid-template-areas:
                    "hero"
                    "stats"
                    "event";
            }
        }

        @media (max-width: 640px) {
            .sae-ambient__light {
                filter: blur(85px);
                opacity: 0.2;
            }

            .sae-ambient__marquee span {
                font-size: clamp(40px, 15vw, 120px);
            }

            .progress-bento__stats {
                grid-template-columns: 1fr;
            }

            .progress-bento__stat-card {
                border-right: none;
                border-bottom: 1px solid rgba(255,255,255,0.07);
            }

            .progress-bento__stat-card:last-child {
                border-bottom: none;
            }
        }

        @keyframes saeSectionSweep {
            0% { transform: translateX(0%); }
            100% { transform: translateX(16%); }
        }

        /* Sidebar flotante fuera del grid: sin columna lateral ni línea divisoria */
        @media (min-width: 900px) {
            .modal-box.modal-box--profile {
                background:
                    radial-gradient(circle at 12% 18%, rgba(255, 0, 85, 0.12) 0%, transparent 32%),
                    radial-gradient(circle at 88% 82%, rgba(0, 229, 255, 0.14) 0%, transparent 38%),
                    rgba(5, 5, 5, 0.62) !important;
            }

            .profile-layout {
                grid-template-columns: 1fr !important;
                align-items: stretch !important;
                gap: 0 !important;
                padding: 12px !important;
                background: transparent !important;
            }

            .profile-sidebar {
                position: absolute !important;
                left: 14px !important;
                top: 50% !important;
                transform: translateY(-50%) !important;
                z-index: 20 !important;
                align-self: auto !important;
                justify-self: auto !important;
                height: auto !important;
                max-height: calc(100vh - 220px) !important;
                width: 84px !important;
                min-width: 84px !important;
                max-width: 84px !important;
                border-radius: 36px !important;
                padding: 12px 7px !important;
                display: flex !important;
                flex-direction: column !important;
                gap: 10px !important;
                overflow: hidden !important;
                border-right: none !important;
                border-bottom: none !important;
            }

            .profile-content {
                padding-left: calc(84px + 28px) !important;
                width: 100% !important;
                min-height: 100% !important;
                background: transparent !important;
                border: none !important;
                border-radius: 0 !important;
                box-shadow: none !important;
                overflow-y: auto !important;
            }

            .profile-sidebar-head {
                width: 68px !important;
                min-height: 68px !important;
                margin: 0 auto 8px !important;
                padding: 8px 6px !important;
            }

            .profile-sidebar-avatar {
                width: 42px !important;
                height: 42px !important;
            }

            .profile-sidebar-name,
            .profile-sidebar-label {
                display: none !important;
            }

            .profile-sidebar .profile-tab-btn,
            .profile-sidebar a.profile-tab-btn {
                width: 68px !important;
                height: 52px !important;
                border-radius: 16px !important;
                margin: 0 auto !important;
                padding: 0 !important;
                text-indent: -9999px !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
            }

            .profile-sidebar .profile-tab-btn i,
            .profile-sidebar a.profile-tab-btn i {
                text-indent: 0 !important;
                margin: 0 !important;
                font-size: 1.26rem !important;
            }

            .profile-tab-btn--logout {
                margin-top: auto !important;
            }
        }
        /* ------------------------------------------------------------------ */
        /* Contenedor: tarjetas completas + scroll + responsive               */
        /* ------------------------------------------------------------------ */
        .modal-box.modal-box--profile {
            box-sizing: border-box !important;
        }

        .profile-layout {
            box-sizing: border-box !important;
            height: 100% !important;
            max-height: 100% !important;
            min-height: 0 !important;
            overflow: hidden !important;
        }

        .profile-content {
            box-sizing: border-box !important;
            height: 100% !important;
            max-height: 100% !important;
            min-height: 0 !important;
            overflow-x: hidden !important;
            overflow-y: auto !important;
            -webkit-overflow-scrolling: touch;
            padding-right: clamp(1rem, 2.5vw, 2.5rem) !important;
            padding-bottom: clamp(1.5rem, 4vh, 3rem) !important;
        }

        .profile-content > .profile-panel {
            max-width: 100%;
            box-sizing: border-box;
        }

        .profile-content > .profile-panel.active {
            padding-bottom: 1.5rem;
        }

        @media (min-width: 900px) {
            .profile-content {
                padding-left: calc(84px + clamp(1.25rem, 3vw, 2.5rem)) !important;
                padding-top: clamp(1.25rem, 2.5vh, 2.25rem) !important;
                padding-right: clamp(1.25rem, 3vw, 2.75rem) !important;
            }
        }

        /* ------------------------------------------------------------------ */
        /* Mis Datos — estilo ID card + datos del sistema (foto)              */
        /* ------------------------------------------------------------------ */
        .datos-bento {
            display: grid;
            grid-template-columns: 1fr;
            gap: clamp(1rem, 2vw, 1.75rem);
            align-items: start;
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }

        @media (min-width: 1024px) {
            .datos-bento {
                grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
                gap: clamp(1.25rem, 2.5vw, 2rem);
            }
        }

        .datos-bento__id-wrap {
            position: relative;
            width: 100%;
            max-width: 340px;
            margin: 0 auto;
        }

        @media (min-width: 1024px) {
            .datos-bento__id-wrap {
                margin: 0;
                max-width: none;
            }
        }

        .datos-bento__id-wrap::before {
            content: '';
            position: absolute;
            inset: 8% 4%;
            background: rgba(255, 0, 85, 0.22);
            filter: blur(70px);
            border-radius: 50%;
            pointer-events: none;
            z-index: 0;
        }

        .datos-id-card {
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 1rem;
            width: 100%;
            aspect-ratio: 2 / 3;
            max-height: min(560px, 72vh);
            padding: 1.35rem 1.25rem 1.2rem;
            border-radius: 22px;
            border: 1px solid rgba(255, 0, 85, 0.32);
            background: linear-gradient(165deg, rgba(22, 12, 18, 0.95) 0%, rgba(8, 8, 8, 0.96) 100%);
            box-shadow: 0 0 50px rgba(255, 0, 85, 0.16), 0 24px 50px rgba(0, 0, 0, 0.45);
            box-sizing: border-box;
            overflow: hidden;
        }

        .datos-id-card__head {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 12px;
        }

        .datos-id-card__head > i {
            font-size: 2rem;
            color: #ff0055;
            opacity: 0.85;
        }

        .datos-id-card__id { text-align: right; }

        .datos-id-card__id p:first-child {
            margin: 0;
            font-size: 8px;
            text-transform: uppercase;
            letter-spacing: 0.3em;
            color: #777;
        }

        .datos-id-card__id p:last-child {
            margin: 4px 0 0;
            font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
            font-size: 11px;
            color: rgba(255, 255, 255, 0.5);
        }

        .datos-id-card__photo {
            position: relative;
            width: 100%;
            aspect-ratio: 1 / 1;
            border-radius: 16px;
            overflow: hidden;
            border: 2px solid rgba(255, 255, 255, 0.1);
            flex: 1 1 auto;
            min-height: 0;
        }

        .datos-id-card__photo::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, transparent 55%);
            z-index: 1;
            pointer-events: none;
        }

        .datos-id-card__photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            filter: grayscale(1);
            mix-blend-mode: luminosity;
            transition: filter 0.5s ease, transform 0.5s ease;
        }

        .datos-id-card:hover .datos-id-card__photo img {
            filter: grayscale(0);
            transform: scale(1.04);
            mix-blend-mode: normal;
        }

        .datos-id-card__name {
            position: absolute;
            left: 14px;
            bottom: 14px;
            z-index: 2;
        }

        .datos-id-card__name h2 {
            margin: 0;
            font-family: 'Syncopate', sans-serif;
            font-size: clamp(1.15rem, 2.4vw, 1.55rem);
            font-weight: 800;
            line-height: 1.05;
            color: #fff;
            text-transform: uppercase;
        }

        .datos-id-card__name-outline {
            color: transparent !important;
            -webkit-text-stroke: 1px rgba(255, 255, 255, 0.9);
        }

        .datos-id-card__foot {
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            padding-top: 12px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .datos-id-card__meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
        }

        .datos-id-card__meta > span:first-child {
            font-size: 9px;
            text-transform: uppercase;
            letter-spacing: 0.16em;
            color: #777;
        }

        .datos-id-card__meta > span:last-child,
        .datos-id-card__meta #profileCreatedAt {
            font-size: 12px;
            font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
            color: #fff;
        }

        .datos-id-card__badge {
            font-size: 11px !important;
            font-weight: 800 !important;
            font-family: inherit !important;
            color: #00e5ff !important;
            background: rgba(0, 229, 255, 0.1);
            border: 1px solid rgba(0, 229, 255, 0.22);
            border-radius: 6px;
            padding: 3px 8px;
            letter-spacing: 0.08em;
        }

        .datos-id-card__status-label {
            margin: 0;
            font-size: 10px;
            color: rgba(255, 255, 255, 0.35);
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }

        .datos-bento__side {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            min-width: 0;
            width: 100%;
        }

        .datos-system-card {
            padding: clamp(1.15rem, 2.2vw, 1.75rem);
            border-radius: 22px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: linear-gradient(165deg, rgba(255, 255, 255, 0.04) 0%, rgba(10, 10, 10, 0.72) 100%);
            box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
            box-sizing: border-box;
            width: 100%;
        }

        .datos-system-card > h3 {
            margin: 0 0 1.35rem;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: #fff;
        }

        .datos-system-card > h3 i {
            font-size: 1.25rem;
            color: #ff0055;
        }

        .datos-system-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1.35rem 1.5rem;
        }

        @media (min-width: 640px) {
            .datos-system-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        .datos-system-field {
            position: relative;
            min-width: 0;
        }

        .datos-system-field--full { grid-column: 1 / -1; }

        .datos-system-field__label {
            position: absolute;
            top: -9px;
            left: 14px;
            z-index: 2;
            padding: 0 6px;
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: #888;
            background: #0f0f0f;
        }

        .datos-system-field__label--pink { color: #ff0055; }
        .datos-system-field__label--cyan { color: #00e5ff; }

        .datos-system-field__value {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
            padding: 14px 16px;
            border-radius: 14px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: rgba(0, 0, 0, 0.4);
            color: #fff;
            font-size: 0.875rem;
            font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
            transition: border-color 0.22s ease;
            box-sizing: border-box;
        }

        .datos-system-field__value:hover { border-color: rgba(255, 0, 85, 0.4); }

        .datos-system-field__value i {
            flex-shrink: 0;
            color: #777;
            font-size: 1.05rem;
        }

        .datos-system-field__value span {
            min-width: 0;
            overflow-wrap: anywhere;
            word-break: break-word;
        }

        .datos-tutors {
            display: flex;
            flex-direction: column;
            gap: 12px;
            width: 100%;
        }

        .datos-tutor-card {
            display: flex;
            align-items: center;
            gap: 14px;
            width: 100%;
            box-sizing: border-box;
            padding: 1rem 1.15rem;
            border-radius: 18px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-left: 4px solid #00e5ff;
            background: linear-gradient(90deg, rgba(0, 229, 255, 0.06) 0%, rgba(12, 12, 12, 0.85) 42%), rgba(10, 10, 10, 0.8);
            box-shadow: 0 14px 32px rgba(0, 0, 0, 0.3);
        }

        .datos-tutor-card--empty { opacity: 0.85; }

        .datos-tutor-card__icon {
            width: 48px;
            height: 48px;
            flex-shrink: 0;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(0, 229, 255, 0.1);
        }

        .datos-tutor-card__icon i {
            font-size: 1.45rem;
            color: #00e5ff;
        }

        .datos-tutor-card__body {
            min-width: 0;
            flex: 1;
        }

        .datos-tutor-card__name {
            margin: 0;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px;
            color: #fff;
            font-size: 1.05rem;
            font-weight: 700;
            line-height: 1.3;
        }

        .datos-tutor-card__tag {
            font-size: 10px;
            font-weight: 700;
            color: #00e5ff;
            border: 1px solid rgba(0, 229, 255, 0.3);
            border-radius: 999px;
            padding: 2px 8px;
        }

        .datos-tutor-card__role {
            margin: 4px 0 0;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: #777;
        }

        .datos-tutor-card .profile-tutor-item__contact { margin-top: 6px; }

        @media (max-width: 639px) {
            .datos-id-card {
                aspect-ratio: auto;
                max-height: none;
            }
            .datos-id-card__photo { aspect-ratio: 4 / 3; }
        }

        /* ------------------------------------------------------------------ */
        /* Ajustes finos: toggle compacto + letras gordas + sin WhatsApp      */
        /* ------------------------------------------------------------------ */
        .profile-classes-view-toggle,
        #profile-panel-misclases .profile-classes-view-toggle,
        #profile-panel-misclases.is-calendar-view .profile-classes-view-toggle {
            display: inline-flex !important;
            width: fit-content !important;
            max-width: 100% !important;
            align-self: flex-start !important;
            flex: 0 0 auto !important;
            border-radius: 999px !important;
            padding: 4px !important;
        }

        .profile-classes-view-btn {
            flex: 0 0 auto !important;
            white-space: nowrap;
            border-radius: 999px !important;
        }

        .modal-box.modal-box--profile::after {
            font-weight: 900 !important;
            -webkit-text-stroke: 2.5px rgba(255, 255, 255, 0.09) !important;
            paint-order: stroke fill;
            color: rgba(255, 255, 255, 0.08) !important;
        }

        /* Ocultar botón flotante WhatsApp (Join.chat) en el área de alumnos */
        body:has(.sae-student-area) .joinchat,
        body:has(#profileModal) .joinchat,
        .sae-student-area ~ .joinchat,
        #profileModal ~ .joinchat {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
            pointer-events: none !important;
        }

        /* Foto del banner: sin círculo, llena el recuadro */
        @media (min-width: 900px) {
            .profile-sidebar-head {
                padding: 0 !important;
                overflow: hidden !important;
                display: flex !important;
                align-items: stretch !important;
                justify-content: stretch !important;
            }

            .profile-sidebar-avatar {
                width: 100% !important;
                height: 100% !important;
                min-height: 68px !important;
                border-radius: 16px !important;
                border: none !important;
                box-shadow: none !important;
                object-fit: cover !important;
                object-position: center center !important;
                display: block !important;
            }
        }

        /* Mi recorrido: timeline horizontal, grande y centrada */
        #profile-panel-progreso .progress-roadmap-title {
            text-align: center;
            font-size: 11px;
            letter-spacing: 0.18em;
            margin-top: 1.75rem;
            margin-bottom: 0.85rem;
        }

        #profile-panel-progreso .progress-roadmap {
            display: flex !important;
            flex-direction: row !important;
            align-items: flex-start !important;
            justify-content: center !important;
            gap: 0.25rem;
            width: 100%;
            max-width: 920px;
            margin: 0 auto 1rem !important;
            padding: 2.25rem 0.75rem 1.5rem !important;
            box-sizing: border-box;
            overflow-x: auto;
        }

        #profile-panel-progreso .progress-roadmap::before {
            left: 10% !important;
            right: 10% !important;
            top: 30px !important;
            bottom: auto !important;
            width: auto !important;
            height: 4px !important;
            background: linear-gradient(90deg, #ff0055 0%, #00e5ff 100%) !important;
            opacity: 0.55 !important;
        }

        #profile-panel-progreso .progress-roadmap-item {
            flex: 1 1 160px;
            min-width: 150px;
            max-width: 210px;
            padding: 3rem 0.75rem 0.75rem !important;
            text-align: center;
            padding-bottom: 0.75rem !important;
        }

        #profile-panel-progreso .progress-roadmap-item::before {
            left: 50% !important;
            top: 18px !important;
            transform: translateX(-50%) !important;
            width: 18px !important;
            height: 18px !important;
            border-width: 3px !important;
            box-shadow: 0 0 16px rgba(255, 0, 85, 0.65) !important;
        }

        #profile-panel-progreso .progress-roadmap-item__year {
            margin: 0;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: #888;
        }

        #profile-panel-progreso .progress-roadmap-item__title {
            margin: 8px 0 0;
            font-size: 1.05rem;
            font-weight: 800;
            color: #fff;
            line-height: 1.25;
        }

        #profile-panel-progreso .progress-roadmap-item.is-current .progress-roadmap-item__title {
            color: #ff0055;
        }

        #profile-panel-progreso .progress-roadmap-item__meta {
            margin: 6px 0 0;
            font-size: 12px;
            color: #777;
            line-height: 1.35;
        }

        @media (max-width: 700px) {
            #profile-panel-progreso .progress-roadmap {
                justify-content: flex-start !important;
                max-width: 100%;
            }

            #profile-panel-progreso .progress-roadmap::before {
                left: 40px !important;
                right: 40px !important;
            }
        }


        /* Tutor: gate de selección (sin alumnos / multi-hijo) */
        .sae-tutor-gate {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem 1rem;
            background: #050505;
            color: #fff;
        }
        .sae-tutor-gate__card {
            width: min(520px, 100%);
            border-radius: 22px;
            border: 1px solid rgba(255,255,255,0.12);
            background: rgba(14,14,14,0.92);
            padding: 1.75rem 1.5rem;
            box-shadow: 0 30px 60px rgba(0,0,0,0.55);
        }
        .sae-tutor-gate__eyebrow {
            margin: 0 0 0.5rem;
            font-size: 10px;
            font-weight: 900;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: #00f3ff;
        }
        .sae-tutor-gate__title {
            margin: 0 0 0.65rem;
            font-size: 1.55rem;
            font-weight: 900;
            line-height: 1.2;
        }
        .sae-tutor-gate__text {
            margin: 0 0 1.25rem;
            color: #9ca3af;
            font-size: 0.95rem;
            line-height: 1.45;
        }
        .sae-tutor-gate__list {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .sae-tutor-gate__option {
            width: 100%;
            text-align: left;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            border-radius: 14px;
            border: 1px solid rgba(255,255,255,0.12);
            background: rgba(255,255,255,0.03);
            color: #fff;
            padding: 14px 16px;
            cursor: pointer;
            transition: border-color 0.2s, background 0.2s;
        }
        .sae-tutor-gate__option:hover {
            border-color: rgba(255,0,85,0.45);
            background: rgba(255,0,85,0.08);
        }
        .sae-tutor-gate__option-name {
            font-weight: 700;
        }
        .sae-tutor-gate__option-meta {
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #00f3ff;
        }

        /* Tutor: tarjeta contextual de alumno representado (shell) */
        .sae-portal-represented-banner {
            margin: 0 0 1.35rem;
            padding: 1.1rem 1.2rem 1.15rem;
            border-radius: 18px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            background:
                linear-gradient(135deg, rgba(255, 0, 85, 0.10) 0%, rgba(0, 243, 255, 0.06) 48%, rgba(14, 14, 14, 0.92) 100%);
            box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
        }
        .sae-portal-represented-banner__head {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 1rem;
        }
        .sae-portal-represented-banner__icon {
            width: 40px;
            height: 40px;
            border-radius: 12px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            color: #00f3ff;
            background: rgba(0, 243, 255, 0.10);
            border: 1px solid rgba(0, 243, 255, 0.22);
            font-size: 1.25rem;
        }
        .sae-portal-represented-banner__eyebrow {
            margin: 0;
            font-size: 10px;
            font-weight: 900;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: #00f3ff;
        }
        .sae-portal-represented-banner__subtitle {
            margin: 4px 0 0;
            color: #9ca3af;
            font-size: 0.9rem;
            line-height: 1.35;
        }
        .sae-portal-represented-banner__identity {
            display: flex;
            align-items: center;
            gap: 14px;
        }
        .sae-portal-represented-banner__avatar {
            width: 64px;
            height: 64px;
            border-radius: 16px;
            overflow: hidden;
            flex-shrink: 0;
            border: 1px solid rgba(255, 255, 255, 0.14);
            background: #111;
        }
        .sae-portal-represented-banner__avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .sae-portal-represented-banner__avatar-fallback {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #888;
            font-size: 1.6rem;
        }
        .sae-portal-represented-banner__meta {
            min-width: 0;
            flex: 1 1 auto;
        }
        .sae-portal-represented-banner__name {
            margin: 0;
            color: #fff;
            font-size: 1.15rem;
            font-weight: 800;
            line-height: 1.25;
        }
        .sae-portal-represented-banner__switcher {
            display: inline-flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 4px;
            margin-bottom: 2px;
        }
        .sae-portal-represented-banner__switcher-label {
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: #888;
        }
        .sae-portal-represented-banner__switcher-value {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 10px;
            border-radius: 10px;
            border: 1px dashed rgba(255, 255, 255, 0.18);
            background: rgba(0, 0, 0, 0.22);
            color: #fff;
        }
        .sae-portal-represented-banner__switcher-value .sae-portal-represented-banner__name {
            font-size: 1.05rem;
        }
        .sae-portal-represented-banner__switcher-value i {
            color: #00f3ff;
            font-size: 0.85rem;
        }
        .sae-portal-represented-banner__facts {
            list-style: none;
            margin: 10px 0 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            gap: 8px 18px;
        }
        .sae-portal-represented-banner__facts li {
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 0;
        }
        .sae-portal-represented-banner__fact-label {
            font-size: 9px;
            font-weight: 900;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: #777;
        }
        .sae-portal-represented-banner__fact-value {
            color: #e5e7eb;
            font-size: 0.88rem;
            font-weight: 600;
            line-height: 1.3;
        }
        @media (max-width: 700px) {
            .sae-portal-represented-banner__identity {
                flex-direction: column;
                align-items: flex-start;
            }
            .sae-portal-represented-banner__facts {
                width: 100%;
                flex-direction: column;
                gap: 10px;
            }
        }

        .profile-panel-head--split { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 16px; }
        .profile-purchases-history-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; }
        .profile-purchase-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
        .profile-purchase-doc-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.12em; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); color: #ccc; text-decoration: none; cursor: pointer; }
        .profile-purchase-doc-btn:hover { color: #fff; border-color: rgba(0,243,255,0.4); }
        .profile-purchase-doc-btn.is-disabled { opacity: 0.45; cursor: default; color: #888; pointer-events: none; }
        .profile-plan-status--consumed { background: rgba(156,163,175,0.12); color: #9ca3af; border: 1px solid rgba(156,163,175,0.3); }
        .profile-plan-status--expired { background: rgba(255,250,0,0.1); color: #fffa00; border: 1px solid rgba(255,250,0,0.25); }
        .profile-plan-status--cancelled { background: rgba(255,0,85,0.12); color: #ff6b8a; border: 1px solid rgba(255,0,85,0.3); }
        .purchase-history-table { width: 100%; border-collapse: collapse; }
        .purchase-history-table th { text-align: left; font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.12em; color: #888; padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,0.08); }
        .purchase-history-table td { padding: 12px 10px; border-bottom: 1px solid rgba(255,255,255,0.06); color: #ddd; font-size: 0.88rem; vertical-align: middle; }
        .purchase-history-table td:first-child { color: #fff; font-weight: 700; }
        .purchase-history-cards { display: none; }
        .purchase-history-card { padding: 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); margin-bottom: 10px; }
        .purchase-history-card__name { color: #fff; font-weight: 800; margin: 0 0 4px; }
        .purchase-history-card__meta { color: #888; font-size: 0.75rem; margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
        #profilePurchaseHistoryModal .teacher-academy-modal-box--wide { max-width: min(860px, 94vw); }
        @media (max-width: 700px) {
            .purchase-history-table-wrap { display: none; }
            .purchase-history-cards { display: block; }
        }

        /* ------------------------------------------------------------------ */
        /* Tooltips del dock de iconos (desktop). Misma fuente: label del menú */
        /* ------------------------------------------------------------------ */
        @media (min-width: 900px) {
            .profile-sidebar {
                overflow: visible !important;
            }

            .profile-sidebar .profile-tab-btn,
            .profile-sidebar a.profile-tab-btn {
                overflow: visible !important;
                text-indent: 0 !important;
            }

            .profile-sidebar .profile-tab-btn i,
            .profile-sidebar a.profile-tab-btn i {
                text-indent: 0 !important;
            }

            .profile-sidebar .profile-tab-btn__label {
                position: absolute;
                left: calc(100% + 12px);
                top: 50%;
                z-index: 30;
                display: block;
                width: max-content;
                max-width: min(240px, 42vw);
                margin: 0;
                padding: 7px 10px;
                border-radius: 10px;
                border: 1px solid rgba(255, 255, 255, 0.12);
                background: rgba(12, 12, 12, 0.96);
                box-shadow:
                    0 10px 28px rgba(0, 0, 0, 0.55),
                    0 0 0 1px rgba(255, 0, 85, 0.08);
                color: #f3f3f3;
                font-size: 12px;
                font-weight: 600;
                letter-spacing: 0.01em;
                line-height: 1.3;
                text-transform: none;
                text-indent: 0;
                white-space: nowrap;
                opacity: 0;
                visibility: hidden;
                pointer-events: none;
                transform: translateY(-50%) translateX(-4px);
                transition: opacity 150ms ease, visibility 150ms ease, transform 150ms ease;
            }

            .profile-sidebar .profile-tab-btn__label::before {
                content: '';
                position: absolute;
                right: 100%;
                top: 50%;
                width: 0;
                height: 0;
                border: 5px solid transparent;
                border-right-color: rgba(12, 12, 12, 0.96);
                transform: translateY(-50%);
            }

            .profile-sidebar .profile-tab-btn:focus-visible .profile-tab-btn__label,
            .profile-sidebar a.profile-tab-btn:focus-visible .profile-tab-btn__label {
                opacity: 1;
                visibility: visible;
                transform: translateY(-50%) translateX(0);
            }
        }

        @media (min-width: 900px) and (hover: hover) and (pointer: fine) {
            .profile-sidebar .profile-tab-btn:hover .profile-tab-btn__label,
            .profile-sidebar a.profile-tab-btn:hover .profile-tab-btn__label {
                opacity: 1;
                visibility: visible;
                transform: translateY(-50%) translateX(0);
            }
        }