/* ============================================================
   SPECTRE
   STYLE.CSS
   UI PRINCIPAL + CHAT + FICHAS + TESTS + EJERCICIOS
   ============================================================ */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --bg-black: #02040a;
    --bg-deep: #050b18;
    --bg-blue: #07152c;

    --panel: rgba(7, 17, 35, 0.82);
    --panel-light: rgba(15, 23, 42, 0.55);

    --violet: #8b5cf6;
    --violet-light: #a78bfa;

    --blue: #3b82f6;
    --blue-light: #60a5fa;

    --cyan: #22d3ee;

    --text: #f8fafc;
    --text-soft: #cbd5e1;
    --text-muted: #94a3b8;

    --border: rgba(148, 163, 184, 0.14);
    --border-light: rgba(139, 92, 246, 0.28);

    --success: #34d399;
    --danger: #fb7185;
    --warning: #fbbf24;

    --sidebar-width: 250px;

    --shadow:
        0 20px 60px rgba(0, 0, 0, 0.45);

    --radius: 20px;
}


/* ============================================================
   BASE
   ============================================================ */

html {
    width: 100%;
    min-height: 100%;
    background: var(--bg-black);
}

body {
    width: 100%;
    min-height: 100vh;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color: var(--text);

    background:
        radial-gradient(
            circle at 70% 10%,
            rgba(59, 130, 246, 0.08),
            transparent 30%
        ),
        radial-gradient(
            circle at 20% 80%,
            rgba(139, 92, 246, 0.06),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #02040a 0%,
            #040915 45%,
            #07152c 100%
        );

    overflow-x: hidden;
}

button,
textarea,
input {
    font: inherit;
}

button {
    border: 0;
}

button:focus-visible,
textarea:focus-visible,
input:focus-visible {
    outline: 2px solid rgba(139, 92, 246, 0.65);
    outline-offset: 2px;
}


/* ============================================================
   SCROLLBAR
   ============================================================ */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background:
        linear-gradient(
            180deg,
            var(--violet),
            var(--blue)
        );

    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(
            180deg,
            var(--violet-light),
            var(--blue-light)
        );
}


/* ============================================================
   INTRO / CINEMÁTICA
   ============================================================ */

#intro {
    position: fixed;
    inset: 0;

    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            #08162d 0%,
            #030712 45%,
            #000 100%
        );

    color: white;
}

#intro::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at center,
            rgba(139, 92, 246, 0.08),
            transparent 30%
        );

    pointer-events: none;
}

#intro::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(139, 92, 246, 0.025),
            transparent
        );

    pointer-events: none;
}


/* ============================================================
   PARTICLES
   ============================================================ */

#particles {
    position: absolute;
    inset: 0;

    overflow: hidden;

    pointer-events: none;

    color: #a78bfa;
}

.intro-particle {
    position: absolute;

    width: 3px;
    height: 3px;

    border-radius: 50%;

    box-shadow:
        0 0 6px currentColor,
        0 0 12px rgba(139, 92, 246, 0.55);
}


/* ============================================================
   CENTRAL LIGHT
   ============================================================ */

.central-light {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 240px;
    height: 240px;

    transform:
        translate(-50%, -50%)
        scale(0.5);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(167, 139, 250, 0.45) 12%,
            rgba(139, 92, 246, 0.16) 35%,
            transparent 70%
        );

    filter: blur(3px);

    pointer-events: none;

    z-index: 1;
}


/* ============================================================
   INTRO CONTENT
   ============================================================ */

.intro-content {
    position: relative;
    z-index: 10;

    width: min(900px, 90vw);

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;
}


/* ============================================================
   INTRO LOGO
   ============================================================ */

.intro-logo {
    position: absolute;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 0.02em;

    font-size:
        clamp(
            3rem,
            9vw,
            7rem
        );

    font-weight: 800;

    letter-spacing: 0.14em;

    line-height: 1;

    text-transform: uppercase;

    color: transparent;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #c4b5fd 40%,
            #60a5fa 75%,
            #ffffff
        );

    -webkit-background-clip: text;
    background-clip: text;

    filter:
        drop-shadow(
            0 0 25px
            rgba(139, 92, 246, 0.25)
        );

    opacity: 0;
}

/* ============================================================
   INTRO SUBTITLE
   ============================================================ */

.intro-subtitle {
    margin-top: 22px;

    font-size:
        clamp(
            0.75rem,
            1.8vw,
            1rem
        );

    letter-spacing: 0.35em;

    text-transform: uppercase;

    color:
        rgba(226, 232, 240, 0.7);

    opacity: 0;
}


/* ============================================================
   APP
   ============================================================ */

#app {
    position: relative;

    display: flex;

    min-height: 100vh;

    opacity: 0;
    visibility: hidden;

    background:
        radial-gradient(
            circle at 70% 20%,
            rgba(139, 92, 246, 0.06),
            transparent 32%
        ),
        radial-gradient(
            circle at 20% 80%,
            rgba(59, 130, 246, 0.05),
            transparent 30%
        );
}


/* ============================================================
   SIDEBAR
   ============================================================ */

.sidebar {
    position: fixed;

    left: 0;
    top: 0;
    bottom: 0;

    width: var(--sidebar-width);

    padding: 20px 16px;

    display: flex;
    flex-direction: column;

    background:
        rgba(2, 6, 23, 0.86);

    border-right:
        1px solid var(--border);

    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);

    z-index: 100;
}


/* ============================================================
   BRAND
   ============================================================ */

.brand {
    display: flex;
    align-items: center;

    gap: 11px;

    padding:
        4px 4px 20px;
}

.brand-symbol {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--violet),
            var(--blue)
        );

    box-shadow:
        0 0 25px rgba(139, 92, 246, 0.3);

    font-weight: 800;
}

.brand-name {
    font-size: 1.12rem;

    font-weight: 800;

    letter-spacing: 0.12em;
}


/* ============================================================
   NUEVO CHAT
   ============================================================ */

.new-chat-button {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    padding: 11px 14px;

    border-radius: 12px;

    color: var(--text-soft);

    background:
        rgba(148, 163, 184, 0.06);

    border:
        1px solid var(--border);

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.new-chat-button:hover {
    background:
        rgba(139, 92, 246, 0.1);

    border-color:
        rgba(139, 92, 246, 0.25);

    transform: translateY(-1px);
}

.new-chat-icon {
    font-size: 1.2rem;
    color: var(--violet-light);
}

/* ============================================================
   HISTORIAL
   ============================================================ */

.history-container {
    margin-top: 18px;
}

.history-title {
    padding: 0 8px 8px;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.13em;
}

.chat-history {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* ============================================================
   ELEMENTO DE CONVERSACIÓN
   ============================================================ */

.history-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border-radius: 10px;
    background: transparent;
    color: var(--text-soft);
    transition: background 0.2s ease;
}

.history-item:hover {
    background: rgba(139, 92, 246, 0.08);
}

/* ============================================================
   BOTÓN DE LA CONVERSACIÓN
   ============================================================ */

.history-conversation-button {
    flex: 1;
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 9px;

    padding: 7px 6px;

    border: none;
    border-radius: 8px;

    background: transparent;
    color: var(--text-soft);

    text-align: left;
    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.history-conversation-button:hover {
    background: rgba(139, 92, 246, 0.08);
    color: white;
}

.history-item.active
.history-conversation-button {
    background: rgba(139, 92, 246, 0.1);
    color: white;
}

/* ============================================================
   ICONO
   ============================================================ */

.history-icon {
    flex-shrink: 0;

    color: var(--text-muted);
    font-size: 0.85rem;
}

/* ============================================================
   TÍTULO
   ============================================================ */

.history-text {
    min-width: 0;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-size: 0.88rem;
}

/* ============================================================
   BOTÓN ELIMINAR
   ============================================================ */

.history-delete-button {
    flex-shrink: 0;

    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: none;
    border-radius: 8px;

    background: transparent;
    color: var(--text-muted);

    font-size: 0.85rem;

    cursor: pointer;

    opacity: 0.65;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        opacity 0.2s ease,
        transform 0.15s ease;
}

.history-delete-button:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
    opacity: 1;
}

.history-delete-button:active {
    transform: scale(0.92);
}

/* ============================================================
   MENSAJE DE HISTORIAL VACÍO
   ============================================================ */

.history-empty {
    padding: 12px 8px;

    color: var(--text-muted);

    font-size: 0.82rem;
    text-align: center;
}

/* ============================================================
   MÓVIL
   ============================================================ */

@media (max-width: 600px) {

    .history-container {
        margin-top: 14px;
    }

    .history-item {
        gap: 3px;
        padding: 3px;
    }

    .history-conversation-button {
        padding: 9px 7px;
    }

    .history-text {
        font-size: 0.86rem;
    }

    .history-delete-button {
        width: 36px;
        height: 36px;
        opacity: 0.8;
    }
}

/* ============================================================
   NAVEGACIÓN
   ============================================================ */

.navigation {
    display: flex;
    flex-direction: column;

    gap: 5px;

    margin-top: 22px;
}

.nav-item {
    width: 100%;

    border:
        1px solid transparent;

    background: transparent;

    color: var(--text-muted);

    padding:
        11px 12px;

    border-radius: 12px;

    display: flex;
    align-items: center;

    gap: 11px;

    cursor: pointer;

    font-size: 0.92rem;

    text-align: left;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.nav-item:hover {
    color: white;

    background:
        rgba(139, 92, 246, 0.07);

    border-color:
        rgba(139, 92, 246, 0.1);

    transform:
        translateX(2px);
}

.nav-item.active {
    color: white;

    background:
        linear-gradient(
            135deg,
            rgba(139, 92, 246, 0.17),
            rgba(59, 130, 246, 0.1)
        );

    border-color:
        rgba(139, 92, 246, 0.2);

    box-shadow:
        inset 3px 0 0 var(--violet);
}

.nav-icon {
    width: 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: inherit;

    font-size: 1rem;
}


/* ============================================================
   SIDEBAR BOTTOM
   ============================================================ */

.sidebar-bottom {
    margin-top: auto;

    display: flex;
    flex-direction: column;

    gap: 8px;
}


/* ============================================================
   PERFIL
   ============================================================ */

.profile-button {
    width: 100%;

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 9px;

    border-radius: 13px;

    background:
        rgba(148, 163, 184, 0.05);

    border:
        1px solid var(--border);

    color: var(--text-soft);

    cursor: pointer;

    text-align: left;

    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}

.profile-button:hover {
    background:
        rgba(139, 92, 246, 0.08);

    border-color:
        rgba(139, 92, 246, 0.18);
}

.profile-avatar {
    width: 34px;
    height: 34px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    color: white;

    background:
        linear-gradient(
            135deg,
            #334155,
            #1e293b
        );

    font-weight: 700;
}

.profile-information {
    min-width: 0;

    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 2px;
}

.profile-information strong {
    color: white;

    font-size: 0.82rem;
}

.profile-information small {
    color: var(--text-muted);

    font-size: 0.7rem;
}

.profile-arrow {
    color: var(--text-muted);

    font-size: 1.3rem;
}


/* ============================================================
   CONTENIDO
   ============================================================ */

.content {
    width: calc(100% - var(--sidebar-width));

    margin-left: var(--sidebar-width);

    min-height: 100vh;

    position: relative;
}


/* ============================================================
   TOPBAR
   ============================================================ */

.topbar {
    height: 70px;

    display: flex;
    align-items: center;

    justify-content: space-between;

    padding:
        12px 28px;

    border-bottom:
        1px solid rgba(148, 163, 184, 0.08);

    background:
        rgba(2, 6, 23, 0.35);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    position: sticky;

    top: 0;

    z-index: 40;
}

.mobile-brand {
    display: none;

    align-items: center;

    gap: 9px;

    font-weight: 800;

    letter-spacing: 0.1em;
}

.spectre-status {
    display: flex;
    align-items: center;

    gap: 8px;

    color: var(--text-muted);

    font-size: 0.78rem;
}

.status-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--success);

    box-shadow:
        0 0 10px rgba(52, 211, 153, 0.6);
}

.topbar-right {
    display: flex;
    align-items: center;

    gap: 8px;
}

.icon-button {
    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background:
        transparent;

    color:
        var(--text-muted);

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.icon-button:hover {
    color: white;

    background:
        rgba(148, 163, 184, 0.08);
}

.top-profile {
    background: transparent;

    cursor: pointer;
}


/* ============================================================
   SECCIONES
   ============================================================ */

.content > section {
    display: none;
}

.content > section.active-section {
    display: block;
}

.page-section {
    width: min(1100px, 100%);

    margin: 0 auto;

    padding:
        55px 28px 120px;
}

.section-heading {
    margin-bottom: 30px;
}

.section-label {
    color: var(--violet-light);

    font-size: 0.7rem;

    font-weight: 800;

    letter-spacing: 0.16em;
}

.section-heading h2 {
    margin-top: 7px;

    font-size: 2rem;
}

.section-heading p {
    margin-top: 8px;

    color: var(--text-muted);

    line-height: 1.6;
}


/* ============================================================
   CHAT
   ============================================================ */

.chat-page {
    min-height:
        calc(100vh - 70px);

    position: relative;
}

#welcome-screen {
    min-height:
        calc(100vh - 300px);

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;

    padding:
        50px 25px 25px;
}

.welcome-symbol {
    width: 64px;
    height: 64px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 18px;

    border-radius: 20px;

    font-size: 1.5rem;

    font-weight: 800;

    color: white;

    background:
        linear-gradient(
            135deg,
            rgba(139, 92, 246, 0.9),
            rgba(59, 130, 246, 0.9)
        );

    box-shadow:
        0 0 40px rgba(139, 92, 246, 0.22);
}

.welcome-badge {
    display: flex;
    align-items: center;

    gap: 7px;

    margin-bottom: 15px;

    color:
        var(--text-muted);

    font-size: 0.72rem;

    font-weight: 700;

    letter-spacing: 0.12em;
}

#welcome-screen h1 {
    max-width: 700px;

    font-size:
        clamp(
            2rem,
            5vw,
            3.4rem
        );

    line-height: 1.08;

    letter-spacing: -0.035em;

    color: white;
}

#welcome-screen h1 span {
    display: inline;

    background:
        linear-gradient(
            135deg,
            #c4b5fd,
            #60a5fa
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}

#welcome-screen p {
    max-width: 620px;

    margin-top: 16px;

    color: var(--text-muted);

    line-height: 1.7;

    font-size: 0.95rem;
}


/* ============================================================
   MENSAJES
   ============================================================ */

.messages {
    width: min(950px, calc(100% - 40px));

    margin: 0 auto;

    padding:
        10px 0 240px;

    display: flex;
    flex-direction: column;

    gap: 20px;
}

.message {
    width: 100%;

    display: flex;

    animation:
        messageAppear
        0.28s ease;
}

@keyframes messageAppear {
    from {
        opacity: 0;

        transform:
            translateY(8px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}

.user-message {
    justify-content: flex-end;
}

.user-message .message-content {
    max-width: min(760px, 85%);

    padding:
        13px 17px;

    border-radius:
        18px 18px 5px 18px;

    background:
        linear-gradient(
            135deg,
            rgba(139, 92, 246, 0.24),
            rgba(59, 130, 246, 0.18)
        );

    border:
        1px solid
        rgba(139, 92, 246, 0.2);

    line-height: 1.6;
}

.assistant-message {
    justify-content: flex-start;
}

.assistant-message .message-content {
    width: 100%;

    max-width: 900px;

    color:
        rgba(248, 250, 252, 0.94);

    line-height: 1.7;
}


/* ============================================================
   MARKDOWN
   ============================================================ */

.message-content h1,
.message-content h2,
.message-content h3,
.message-content h4 {
    margin:
        18px 0 9px;

    line-height: 1.25;
}

.message-content h1 {
    font-size: 1.65rem;
}

.message-content h2 {
    font-size: 1.4rem;
}

.message-content h3 {
    font-size: 1.15rem;
}

.message-content p {
    margin: 8px 0;
}

.message-content ul,
.message-content ol {
    margin:
        10px 0 10px 22px;
}

.message-content li {
    margin:
        5px 0;
}

.message-content strong {
    color: white;
}

.message-content blockquote {
    margin: 14px 0;

    padding:
        10px 16px;

    border-left:
        3px solid var(--violet);

    background:
        rgba(139, 92, 246, 0.06);

    color:
        var(--text-soft);
}

.message-content code {
    padding:
        2px 6px;

    border-radius: 6px;

    background:
        rgba(148, 163, 184, 0.1);

    color:
        #c4b5fd;
}

.message-content pre {
    overflow-x: auto;

    margin:
        14px 0;

    padding:
        16px;

    border-radius: 14px;

    background:
        rgba(0, 0, 0, 0.4);

    border:
        1px solid var(--border);
}

.message-content pre code {
    padding: 0;

    background: transparent;
}


/* ============================================================
   KATEX
   ============================================================ */

.katex-display {
    overflow-x: auto;
    overflow-y: hidden;

    padding:
        10px 0;

    margin:
        8px 0;
}

.katex {
    font-size: 1.05em;
}

.message-content .katex {
    color: #f8fafc;
}


/* ============================================================
   SUGERENCIAS
   ============================================================ */

.suggestions {
    width: min(950px, calc(100% - 40px));

    margin:
        0 auto 160px;

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 11px;
}

.suggestion-card {
    min-height: 112px;

    padding: 15px;

    display: flex;
    flex-direction: column;

    gap: 11px;

    border:
        1px solid var(--border);

    border-radius: 16px;

    background:
        rgba(15, 23, 42, 0.48);

    color: var(--text-soft);

    cursor: pointer;

    text-align: left;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}

.suggestion-card:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(139, 92, 246, 0.35);

    background:
        rgba(139, 92, 246, 0.08);
}

.suggestion-icon {
    color:
        var(--violet-light);

    font-size: 1.1rem;
}

.suggestion-card strong {
    display: block;

    color: white;

    font-size: 0.88rem;

    margin-bottom: 4px;
}

.suggestion-card span {
    display: block;

    color: var(--text-muted);

    font-size: 0.75rem;

    line-height: 1.45;
}


/* ============================================================
   INPUT
   ============================================================ */

.chat-input-wrapper {
    position: fixed;

    left:
        calc(var(--sidebar-width) + 28px);

    right: 28px;

    bottom: 16px;

    z-index: 80;

    display: flex;
    flex-direction: column;

    align-items: center;

    pointer-events: none;
}

.chat-input-container {
    width: min(950px, 100%);

    padding:
        9px 11px 10px;

    border:
        1px solid
        rgba(148, 163, 184, 0.16);

    border-radius: 20px;

    background:
        rgba(4, 10, 24, 0.92);

    backdrop-filter:
        blur(20px);

    -webkit-backdrop-filter:
        blur(20px);

    box-shadow:
        0 15px 50px
        rgba(0, 0, 0, 0.48);

    pointer-events: auto;
}

.input-top {
    width: 100%;
}

#prompt {
    width: 100%;

    min-height: 45px;
    max-height: 160px;

    resize: none;

    border: 0;
    outline: none;

    background: transparent;

    color: white;

    line-height: 1.5;

    padding:
        8px 5px 6px;
}

#prompt::placeholder {
    color:
        rgba(148, 163, 184, 0.65);
}

.input-bottom {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;
}

.input-tools {
    min-width: 0;
}

.input-hint {
    color:
        rgba(148, 163, 184, 0.48);

    font-size: 0.7rem;
}

.send-button {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--violet),
            var(--blue)
        );

    cursor: pointer;

    box-shadow:
        0 8px 25px
        rgba(99, 102, 241, 0.25);

    transition:
        transform 0.2s ease,
        filter 0.2s ease,
        opacity 0.2s ease;
}

.send-button:hover:not(:disabled) {
    transform:
        translateY(-2px);

    filter:
        brightness(1.12);
}

.send-button:disabled {
    opacity: 0.4;

    cursor:
        not-allowed;
}

.input-disclaimer {
    margin-top: 7px;

    color:
        rgba(148, 163, 184, 0.42);

    font-size: 0.66rem;

    text-align: center;
}


/* ============================================================
   TYPING
   ============================================================ */

.typing-indicator {
    display: flex;

    align-items: center;

    gap: 5px;

    padding:
        9px 0;
}

.typing-indicator span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--violet);

    animation:
        typingBounce
        1.2s infinite ease-in-out;
}

.typing-indicator span:nth-child(2) {
    animation-delay: 0.15s;
}

.typing-indicator span:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes typingBounce {
    0%,
    60%,
    100% {
        transform:
            translateY(0);

        opacity: 0.45;
    }

    30% {
        transform:
            translateY(-5px);

        opacity: 1;
    }
}


/* ============================================================
   FICHAS
   ============================================================ */

.spectre-sheet {
    width: min(900px, 100%);

    margin: 20px auto;

    padding: 26px;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(12, 20, 42, 0.95),
            rgba(7, 14, 30, 0.92)
        );

    border:
        1px solid
        rgba(139, 92, 246, 0.2);

    box-shadow:
        0 20px 60px
        rgba(0, 0, 0, 0.25);
}

.spectre-sheet-header {
    display: flex;

    align-items: center;

    gap: 17px;

    padding-bottom: 20px;

    border-bottom:
        1px solid var(--border);
}

.spectre-sheet-icon {
    width: 54px;
    height: 54px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            rgba(139, 92, 246, 0.2),
            rgba(59, 130, 246, 0.18)
        );

    font-size: 1.5rem;
}

.spectre-sheet-label,
.spectre-test-label,
.spectre-exercise-label {
    color:
        var(--violet-light);

    font-size: 0.72rem;

    font-weight: 700;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;
}

.spectre-sheet h2,
.spectre-test h2,
.spectre-exercise h2 {
    margin-top: 4px;

    font-size: 1.45rem;
}

.spectre-sheet-topic {
    margin-top: 5px;

    color:
        var(--text-muted);

    font-size: 0.9rem;
}

.spectre-sheet-section {
    padding:
        22px 0;

    border-bottom:
        1px solid var(--border);
}

.spectre-sheet-section:last-child {
    border-bottom: 0;
}

.spectre-sheet-section h3 {
    margin-bottom: 12px;

    font-size: 1rem;
}

.spectre-concepts {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(210px, 1fr)
        );

    gap: 12px;
}

.spectre-concept {
    padding: 13px;

    border-radius: 13px;

    background:
        rgba(139, 92, 246, 0.07);

    border:
        1px solid
        rgba(139, 92, 246, 0.12);

    line-height: 1.55;
}

.spectre-formulas {
    display: flex;
    flex-direction: column;

    gap: 12px;
}

.spectre-formula {
    padding: 15px;

    border-radius: 13px;

    background:
        rgba(59, 130, 246, 0.07);

    border-left:
        3px solid var(--blue);

    overflow-x: auto;
}

.spectre-examples {
    display: flex;

    flex-direction: column;

    gap: 12px;
}

.spectre-example {
    padding: 15px;

    border-radius: 13px;

    background:
        rgba(52, 211, 153, 0.055);

    border-left:
        3px solid var(--success);

    line-height: 1.55;
}

.spectre-mistake {
    padding: 14px;

    border-radius: 13px;

    background:
        rgba(251, 191, 36, 0.055);

    border-left:
        3px solid var(--warning);

    line-height: 1.55;
}


/* ============================================================
   TESTS
   ============================================================ */

.spectre-test {
    width: min(900px, 100%);

    margin: 20px auto;

    padding: 26px;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(10, 20, 42, 0.96),
            rgba(6, 12, 28, 0.94)
        );

    border:
        1px solid
        rgba(59, 130, 246, 0.2);
}

.spectre-test-header,
.spectre-exercise-header {
    display: flex;

    align-items: center;

    gap: 16px;

    padding-bottom: 22px;

    border-bottom:
        1px solid var(--border);
}

.spectre-test-icon,
.spectre-exercise-icon {
    width: 54px;
    height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 16px;

    background:
        rgba(59, 130, 246, 0.1);

    font-size: 1.5rem;
}

.spectre-test-questions {
    display: flex;

    flex-direction: column;

    gap: 18px;

    margin-top: 22px;
}

.spectre-question {
    display: flex;

    gap: 14px;

    padding: 18px;

    border:
        1px solid var(--border);

    border-radius: 17px;

    background:
        rgba(15, 23, 42, 0.45);

    transition:
        border-color 0.2s ease;
}

.spectre-question-number {
    width: 31px;
    height: 31px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background:
        rgba(139, 92, 246, 0.16);

    color:
        var(--violet-light);

    font-weight: 700;
}

.spectre-question-body {
    flex: 1;
}

.spectre-question-text {
    margin-bottom: 14px;

    font-weight: 600;

    line-height: 1.55;
}

.spectre-options {
    display: flex;

    flex-direction: column;

    gap: 8px;
}

.spectre-option {
    display: flex;

    align-items: center;

    gap: 12px;

    padding:
        11px 12px;

    border:
        1px solid
        rgba(148, 163, 184, 0.12);

    border-radius: 11px;

    cursor: pointer;

    background:
        rgba(2, 6, 23, 0.25);

    transition:
        border-color 0.18s ease,
        background 0.18s ease;
}

.spectre-option:hover {
    border-color:
        rgba(139, 92, 246, 0.3);

    background:
        rgba(139, 92, 246, 0.055);
}

.spectre-option input {
    accent-color:
        var(--violet);

    flex-shrink: 0;
}

.spectre-option-letter {
    width: 26px;
    height: 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    background:
        rgba(148, 163, 184, 0.08);

    font-size: 0.78rem;

    font-weight: 700;
}

.spectre-option-text {
    flex: 1;

    line-height: 1.4;
}

.spectre-option.selected {
    border-color:
        rgba(139, 92, 246, 0.4);
}

.spectre-option.correct {
    border-color:
        rgba(52, 211, 153, 0.6);

    background:
        rgba(52, 211, 153, 0.09);
}

.spectre-option.incorrect {
    border-color:
        rgba(251, 113, 133, 0.6);

    background:
        rgba(251, 113, 133, 0.08);
}

.spectre-question-feedback {
    margin-top: 12px;

    padding:
        11px 13px;

    border-radius: 11px;

    font-size: 0.9rem;
}

.test-feedback-correct {
    color:
        var(--success);

    font-weight: 700;
}

.test-feedback-incorrect {
    color:
        var(--danger);

    font-weight: 700;
}

.test-feedback-warning {
    color:
        var(--warning);

    font-weight: 600;
}

.test-feedback-correct-answer {
    margin-top: 5px;

    color:
        var(--text-soft);
}

.test-feedback-explanation {
    margin-top: 8px;

    color:
        var(--text-muted);

    line-height: 1.55;
}

.spectre-test-actions {
    display: flex;

    gap: 12px;

    margin-top: 22px;
}

.spectre-check-test,
.spectre-reset-test {
    border-radius: 12px;

    padding:
        12px 17px;

    cursor: pointer;

    font-weight: 650;

    transition:
        transform 0.2s ease,
        filter 0.2s ease;
}

.spectre-check-test {
    color: white;

    background:
        linear-gradient(
            135deg,
            var(--violet),
            var(--blue)
        );
}

.spectre-reset-test {
    color:
        var(--text-soft);

    background:
        rgba(148, 163, 184, 0.08);

    border:
        1px solid var(--border);
}

.spectre-check-test:hover,
.spectre-reset-test:hover {
    transform:
        translateY(-2px);

    filter:
        brightness(1.1);
}


/* ============================================================
   RESULTADO TEST
   ============================================================ */

.spectre-test-result {
    margin-top: 20px;
}

.spectre-result-card {
    padding: 24px;

    text-align: center;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(139, 92, 246, 0.11),
            rgba(59, 130, 246, 0.08)
        );

    border:
        1px solid
        rgba(139, 92, 246, 0.2);
}

.spectre-result-icon {
    font-size: 2rem;

    margin-bottom: 8px;
}

.spectre-result-title {
    color:
        var(--text-muted);

    font-size: 0.8rem;

    text-transform:
        uppercase;

    letter-spacing:
        0.15em;
}

.spectre-result-score {
    margin-top: 5px;

    font-size: 2.3rem;

    font-weight: 800;
}

.spectre-result-percentage {
    color:
        var(--violet-light);

    font-size: 1.3rem;

    font-weight: 700;
}

.spectre-result-message {
    margin-top: 10px;

    color:
        var(--text-soft);
}

.spectre-result-answered {
    margin-top: 7px;

    color:
        var(--text-muted);

    font-size: 0.85rem;
}


/* ============================================================
   EJERCICIOS
   ============================================================ */

.spectre-exercise {
    width: min(900px, 100%);

    margin: 20px auto;

    padding: 26px;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(10, 20, 42, 0.96),
            rgba(6, 12, 28, 0.94)
        );

    border:
        1px solid
        rgba(52, 211, 153, 0.14);
}

.spectre-exercise-section {
    padding:
        20px 0;

    border-bottom:
        1px solid var(--border);
}

.spectre-exercise-section h3 {
    margin-bottom: 10px;

    font-size: 1rem;
}

.spectre-exercise-section ul {
    padding-left: 22px;
}

.spectre-exercise-section li {
    margin:
        7px 0;

    color:
        var(--text-soft);
}

.spectre-exercise-solution {
    margin-top: 20px;

    border:
        1px solid
        rgba(52, 211, 153, 0.2);

    border-radius: 14px;

    overflow: hidden;

    background:
        rgba(52, 211, 153, 0.04);
}

.spectre-exercise-solution summary {
    padding:
        14px 16px;

    cursor: pointer;

    color:
        var(--success);

    font-weight: 700;

    user-select: none;
}

.spectre-exercise-solution > div {
    padding:
        0 16px 16px;

    color:
        var(--text-soft);
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1000px) {

    .suggestions {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 850px) {

    .sidebar {
        position: relative;

        width: 100%;

        height: auto;

        bottom: auto;

        border-right: 0;

        border-bottom:
            1px solid var(--border);
    }

    #app {
        flex-direction: column;
    }

    .content {
        width: 100%;

        margin-left: 0;
    }

    .topbar {
        padding:
            10px 18px;
    }

    .mobile-brand {
        display: flex;
    }

    .spectre-status {
        display: none;
    }

    .chat-input-wrapper {
        left: 14px;
        right: 14px;

        bottom: 12px;
    }

    .messages,
    .suggestions {
        width:
            calc(100% - 28px);
    }

    .suggestions {
        margin-bottom: 160px;
    }

    .sidebar {
        display: none;
    }
}


@media (max-width: 600px) {

    .topbar {
        height: 60px;
    }

    .page-section {
        padding:
            35px 15px 100px;
    }

    #welcome-screen {
        min-height:
            calc(100vh - 230px);

        padding:
            35px 15px 20px;
    }

    #welcome-screen h1 {
        font-size:
            clamp(
                2rem,
                11vw,
                3rem
            );
    }

    .suggestions {
        grid-template-columns: 1fr;

        margin-bottom: 150px;
    }

    .suggestion-card {
        min-height: auto;
    }

    .user-message .message-content {
        max-width: 90%;
    }

    .spectre-sheet,
    .spectre-test,
    .spectre-exercise {
        padding: 18px;
    }

    .spectre-question {
        padding: 13px;
    }

    .spectre-test-actions {
        flex-direction: column;
    }

    .spectre-check-test,
    .spectre-reset-test {
        width: 100%;
    }

    .input-hint {
        display: none;
    }
}


/* ============================================================
   REDUCIR ANIMACIONES
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        scroll-behavior:
            auto !important;

        transition-duration:
            0.01ms !important;
    }
}
/* ============================================================
   SPECTRE - CUENTAS + GENERADORES
   Añadido sin modificar los estilos anteriores
============================================================ */

.spectre-auth {
    position: fixed;
    inset: 0;
    z-index: 999999;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        radial-gradient(
            circle at center,
            rgba(20, 60, 110, 0.22),
            transparent 45%
        ),
        #020409;

    opacity: 1;
    transition: opacity 0.35s ease;
}

.spectre-auth.auth-hidden {
    opacity: 0;
    pointer-events: none;
}

.auth-background {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(0, 80, 160, 0.08),
            transparent 40%,
            rgba(70, 120, 255, 0.05)
        );
}

.auth-card {
    position: relative;

    width: min(440px, calc(100vw - 40px));

    padding: 42px;

    border: 1px solid rgba(255,255,255,0.08);

    border-radius: 24px;

    background:
        rgba(5, 10, 20, 0.92);

    box-shadow:
        0 30px 100px rgba(0,0,0,0.55);

    backdrop-filter: blur(20px);

    text-align: center;
}

.auth-logo {
    width: 62px;
    height: 62px;

    margin: 0 auto 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #75aaff
        );

    color: #020409;

    font-size: 30px;
    font-weight: 800;

    box-shadow:
        0 0 40px rgba(90,150,255,0.3);
}

.auth-badge {
    margin-bottom: 12px;

    font-size: 12px;
    letter-spacing: 3px;
    font-weight: 700;

    opacity: 0.65;
}

.auth-card h1 {
    margin-bottom: 10px;

    font-size: 28px;
}

.auth-description {
    margin-bottom: 28px;

    color: rgba(255,255,255,0.58);

    line-height: 1.6;
}

.auth-tabs {
    display: flex;
    gap: 6px;

    margin-bottom: 24px;

    padding: 5px;

    border-radius: 12px;

    background: rgba(255,255,255,0.04);
}

.auth-tab {
    flex: 1;

    padding: 11px;

    border: 0;
    border-radius: 9px;

    background: transparent;

    color: rgba(255,255,255,0.55);

    cursor: pointer;

    transition: 0.2s;
}

.auth-tab.active {
    background: rgba(255,255,255,0.09);

    color: white;
}

.auth-form {
    text-align: left;
}

.auth-field {
    margin-bottom: 17px;
}

.auth-field.hidden {
    display: none;
}

.auth-field label {
    display: block;

    margin-bottom: 7px;

    font-size: 13px;
    font-weight: 600;
}

.auth-field input {
    width: 100%;

    padding: 13px 15px;

    border: 1px solid rgba(255,255,255,0.08);

    border-radius: 11px;

    outline: none;

    background: rgba(255,255,255,0.04);

    color: white;

    font: inherit;

    transition: 0.2s;
}

.auth-field input:focus {
    border-color: rgba(100,160,255,0.6);

    box-shadow:
        0 0 0 3px rgba(80,140,255,0.08);
}

.auth-error {
    min-height: 20px;

    margin-bottom: 8px;

    color: #ff7181;

    font-size: 13px;
}

.auth-submit {
    width: 100%;

    padding: 14px;

    border: 0;
    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #7faeff
        );

    color: #020409;

    font-weight: 800;

    cursor: pointer;

    transition:
        transform 0.2s,
        box-shadow 0.2s;
}

.auth-submit:hover {
    transform: translateY(-1px);

    box-shadow:
        0 10px 30px rgba(90,150,255,0.22);
}

.auth-security {
    margin-top: 20px;

    font-size: 12px;

    color: rgba(255,255,255,0.35);
}


/* ============================================================
   GENERADORES
============================================================ */

.generator-screen {
    width: min(700px, 100%);

    margin: 80px auto;

    padding: 30px;

    text-align: center;
}

.generator-icon {
    width: 64px;
    height: 64px;

    margin: 0 auto 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 18px;

    background: rgba(255,255,255,0.06);

    font-size: 28px;

    box-shadow:
        0 0 35px rgba(70,130,255,0.1);
}

.generator-screen h2 {
    margin: 12px 0;

    font-size: clamp(28px, 5vw, 42px);
}

.generator-screen > p {
    max-width: 580px;

    margin: 0 auto 30px;

    color: rgba(255,255,255,0.55);

    line-height: 1.6;
}

.generator-form {
    display: flex;
    flex-direction: column;

    gap: 12px;

    text-align: left;
}

.generator-form textarea {
    width: 100%;

    resize: vertical;

    min-height: 100px;

    padding: 16px;

    border: 1px solid rgba(255,255,255,0.08);

    border-radius: 15px;

    outline: none;

    background: rgba(255,255,255,0.04);

    color: white;

    font: inherit;

    line-height: 1.5;
}

.generator-form textarea:focus {
    border-color: rgba(100,160,255,0.55);

    box-shadow:
        0 0 0 3px rgba(80,140,255,0.07);
}

.generator-form button {
    align-self: flex-end;

    padding: 13px 20px;

    border: 0;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #82adff
        );

    color: #020409;

    font-weight: 800;

    cursor: pointer;

    transition: 0.2s;
}

.generator-form button:hover {
    transform: translateY(-1px);
}


/* ============================================================
   MÓVIL
============================================================ */

@media (max-width: 600px) {

    .auth-card {
        padding: 30px 22px;
    }

    .generator-screen {
        margin: 40px auto;

        padding: 20px;
    }

}/* ============================================================
   SPECTRE - AJUSTE SIN BARRA LATERAL
   ============================================================ */

/* El contenido ocupa ahora toda la pantalla */
.content {
    width: 100%;
    margin-left: 0;
}

/* El chat aprovecha todo el ancho */
.messages {
    width: min(950px, calc(100% - 40px));
    margin-left: auto;
    margin-right: auto;
}

/* Sugerencias centradas */
.suggestions {
    width: min(950px, calc(100% - 40px));
    margin-left: auto;
    margin-right: auto;
}

/* Caja de escribir centrada y sin espacio para sidebar */
.chat-input-wrapper {
    left: 28px;
    right: 28px;
}

/* Contenedor de la caja de escribir */
.chat-input-container {
    width: min(950px, 100%);
    margin-left: auto;
    margin-right: auto;
}

/* Pantallas de fichas, tests y ejercicios */
.spectre-sheet,
.spectre-test,
.spectre-exercise {
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================
   POSICIÓN DEL CHAT
   ============================================================ */

.chat-page {
    min-height: calc(100vh - 70px);
}

#welcome-screen {
    min-height: calc(100vh - 250px);
    padding-top: 30px;
}

/* Cuando hay mensajes, dejamos espacio suficiente
   para que la caja inferior no los tape */
.messages {
    padding-bottom: 210px;
}

/* ============================================================
   PANTALLAS PEQUEÑAS
   ============================================================ */

@media (max-width: 850px) {

    .content {
        width: 100%;
        margin-left: 0;
    }

    .chat-input-wrapper {
        left: 14px;
        right: 14px;
        bottom: 12px;
    }

    .messages,
    .suggestions {
        width: calc(100% - 28px);
    }
}

@media (max-width: 600px) {

    .chat-input-wrapper {
        left: 10px;
        right: 10px;
        bottom: 10px;
    }

    #welcome-screen {
        min-height: calc(100vh - 210px);
        padding-top: 20px;
    }

    .messages {
        padding-bottom: 190px;
    }
}/* ============================================================
   NUEVA CONVERSACIÓN
   ============================================================ */

.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    padding: 18px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}


/* ------------------------------------------------------------
   TÍTULO
   ------------------------------------------------------------ */

.chat-title {
    display: flex;
    align-items: center;
    gap: 12px;
}


.chat-title-logo {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #8ab4ff
        );

    color: #050b18;

    font-size: 21px;
    font-weight: 800;

    box-shadow:
        0 0 20px rgba(100, 150, 255, 0.18);
}


.chat-title-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}


.chat-title-text strong {
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
}


.chat-title-text small {
    color: rgba(255, 255, 255, 0.48);
    font-size: 12px;
}


/* ------------------------------------------------------------
   BOTÓN NUEVA CONVERSACIÓN
   ------------------------------------------------------------ */

.new-chat-button {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 10px 15px;

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;

    background:
        rgba(255, 255, 255, 0.035);

    color: rgba(255, 255, 255, 0.82);

    font-family: inherit;
    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.new-chat-icon {
    font-size: 18px;
    line-height: 1;
    font-weight: 400;
}


.new-chat-button:hover {
    background:
        rgba(255, 255, 255, 0.08);

    border-color:
        rgba(138, 180, 255, 0.35);

    color: #ffffff;

    box-shadow:
        0 0 18px rgba(80, 130, 255, 0.10);

    transform:
        translateY(-1px);
}


.new-chat-button:active {
    transform:
        translateY(0);
}


/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width: 650px) {

    .chat-header {
        padding: 14px 16px;
    }


    .new-chat-button {
        width: 42px;
        height: 42px;

        padding: 0;

        border-radius: 12px;
    }


    .new-chat-button span:last-child {
        display: none;
    }


    .new-chat-icon {
        font-size: 21px;
    }

}/* ==========================================================
   MATEMÁTICAS SPECTRE v1.1
   ========================================================== */

.spectre-math-block{

    margin:18px 0;
    padding:18px;

    border-radius:18px;

    background:rgba(18,28,48,.55);

    border:1px solid rgba(0,170,255,.25);

    overflow-x:auto;
    text-align:center;

}

.spectre-inline-math{

    padding:2px 6px;
    border-radius:8px;

    background:rgba(0,120,255,.12);

}

.spectre-procedure{

    display:flex;
    flex-direction:column;
    gap:16px;

}

.spectre-procedure p{

    margin:0;

}

.spectre-procedure .katex-display{

    margin:20px auto;

}

.spectre-exercise-section ul{

    padding-left:22px;

}

.spectre-exercise-solution{

    margin-top:22px;

    border:1px solid rgba(0,170,255,.25);
    border-radius:18px;

    background:rgba(12,20,35,.45);

}

.spectre-exercise-solution summary{

    cursor:pointer;
    padding:16px 20px;
    font-weight:700;

    color:#7fd8ff;

    user-select:none;

}

.spectre-solution-content{

    padding:18px 20px;
    border-top:1px solid rgba(255,255,255,.08);

}/* ========================================================
   PANEL DE HISTORIAL DE CONVERSACIONES
   ======================================================== */

.conversation-history-panel {
    display: none;
    position: absolute;
    top: 70px;
    right: 80px;
    width: 340px;
    max-height: 480px;
    padding: 14px;
    background: rgba(8, 15, 35, 0.97);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 1000;
    overflow-y: auto;
}

.conversation-history-panel.open {
    display: block;
}

.conversation-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 4px 12px;
    color: white;
    font-size: 0.95rem;
    font-weight: 700;
}

#close-history-button {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
}

#close-history-button:hover {
    color: white;
}

.history-item {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 10px;
    margin-bottom: 5px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text-soft);
    text-align: left;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.history-item:hover {
    background: rgba(139, 92, 246, 0.1);
    color: white;
}

.history-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.88rem;
}/* ============================================================
   HISTORIAL — MÓVIL
   ============================================================ */

@media (max-width: 600px) {

    .conversation-history-panel {
        position: fixed;

        top: 60px;
        left: 10px;
        right: 10px;

        width: auto;
        max-width: none;

        max-height: calc(100vh - 80px);

        padding: 12px;

        border-radius: 14px;

        overflow-y: auto;
        overflow-x: hidden;
    }

    .conversation-history-header {
        padding: 4px 4px 12px;

        font-size: 0.9rem;
    }

    #close-history-button {
        width: 36px;
        height: 36px;

        display: flex;
        align-items: center;
        justify-content: center;

        font-size: 1.4rem;
    }

    .chat-history {
        width: 100%;
    }

    .history-item {
        width: 100%;
        max-width: 100%;

        box-sizing: border-box;
    }

}
/* =====================================================
   GENERACIÓN DE IMÁGENES — SPECTRE PREMIUM
===================================================== */

.image-generate-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 7px 12px;

    border: 1px solid rgba(130, 110, 255, 0.25);
    border-radius: 10px;

    background: rgba(90, 70, 180, 0.08);
    color: rgba(225, 225, 255, 0.75);

    font-family: inherit;
    font-size: 12px;
    font-weight: 500;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.image-generate-button:hover {
    background: rgba(100, 80, 220, 0.15);
    border-color: rgba(140, 120, 255, 0.45);
    color: #ffffff;

    box-shadow:
        0 0 18px rgba(100, 80, 220, 0.12);

    transform: translateY(-1px);
}

.image-generate-button:active {
    transform: translateY(0);
}

.image-generate-button:disabled {
    opacity: 0.55;
    cursor: wait;
    transform: none;
}

.image-generate-button span:first-child {
    font-size: 14px;
    line-height: 1;
}/* =====================================================
   SPECTRE PREMIUM — GENERADOR DE IMÁGENES
===================================================== */

.image-generator-panel {
    width: 100%;
    box-sizing: border-box;

    margin-bottom: 12px;
    padding: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(35, 28, 75, 0.72),
            rgba(8, 10, 22, 0.94)
        );

    border: 1px solid rgba(130, 105, 255, 0.28);

    border-radius: 18px;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.25),
        0 0 35px rgba(100, 75, 220, 0.08);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    animation: spectreImagePanelIn 0.25s ease;
}


@keyframes spectreImagePanelIn {

    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =====================================================
   CABECERA
===================================================== */

.image-generator-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 14px;
}


.image-generator-label {
    display: block;

    margin-bottom: 5px;

    color: rgba(160, 140, 255, 0.85);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.5px;
}


.image-generator-header h3 {
    margin: 0;

    color: #ffffff;

    font-size: 17px;
    font-weight: 600;
}


.image-generator-header p {
    margin: 5px 0 0;

    color: rgba(220, 220, 235, 0.55);

    font-size: 12px;
}


/* =====================================================
   BOTÓN CERRAR
===================================================== */

.image-generator-close {
    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 9px;

    background: rgba(255, 255, 255, 0.035);

    color: rgba(255, 255, 255, 0.55);

    font-size: 20px;
    line-height: 1;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}


.image-generator-close:hover {
    background: rgba(255, 255, 255, 0.08);

    border-color: rgba(255, 255, 255, 0.16);

    color: #ffffff;
}


/* =====================================================
   ÁREA DEL PROMPT
===================================================== */

.image-generator-input-wrapper {
    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 13px;

    background: rgba(0, 0, 0, 0.18);

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.image-generator-input-wrapper:focus-within {

    border-color: rgba(130, 105, 255, 0.45);

    box-shadow:
        0 0 0 3px rgba(100, 80, 220, 0.08);
}


.image-prompt {
    width: 100%;
    min-height: 82px;

    box-sizing: border-box;

    padding: 13px 14px;

    resize: vertical;

    border: none;
    outline: none;

    background: transparent;

    color: #ffffff;

    font-family: inherit;

    font-size: 13px;
    line-height: 1.5;
}


.image-prompt::placeholder {
    color: rgba(220, 220, 235, 0.35);
}


.image-prompt:focus {
    outline: none;
}


/* =====================================================
   PARTE INFERIOR
===================================================== */

.image-generator-footer {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding: 9px 10px;

    border-top: 1px solid rgba(255, 255, 255, 0.055);
}


.image-prompt-counter {
    color: rgba(220, 220, 235, 0.35);

    font-size: 10px;
}


/* =====================================================
   BOTÓN GENERAR
===================================================== */

.image-submit-button {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    padding: 10px 16px;

    border: 1px solid rgba(135, 110, 255, 0.35);

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            rgba(110, 85, 230, 0.24),
            rgba(75, 60, 180, 0.16)
        );

    color: #ffffff;

    font-family: inherit;

    font-size: 12px;
    font-weight: 600;

    cursor: pointer;

    box-shadow:
        0 0 18px rgba(100, 80, 220, 0.07);

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}


.image-submit-button:hover {

    background:
        linear-gradient(
            135deg,
            rgba(120, 95, 245, 0.35),
            rgba(85, 65, 200, 0.24)
        );

    border-color: rgba(155, 135, 255, 0.55);

    box-shadow:
        0 0 25px rgba(110, 85, 230, 0.16);

    transform: translateY(-1px);
}


.image-submit-button:active {

    transform: translateY(0);

}


.image-submit-button:disabled {

    opacity: 0.55;

    cursor: wait;

    transform: none;

}


/* =====================================================
   BOTÓN IMAGEN EN LA BARRA DEL CHAT
===================================================== */

.image-generate-button {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 6px 10px;

    border: 1px solid rgba(130, 105, 255, 0.20);

    border-radius: 9px;

    background: rgba(100, 80, 220, 0.06);

    color: rgba(225, 225, 245, 0.58);

    font-family: inherit;

    font-size: 12px;
    font-weight: 500;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}


.image-generate-button:hover {

    background: rgba(100, 80, 220, 0.13);

    border-color: rgba(140, 120, 255, 0.38);

    color: #ffffff;

    box-shadow:
        0 0 18px rgba(100, 80, 220, 0.10);

    transform: translateY(-1px);
}


.image-generate-button:active {

    transform: translateY(0);

}


.image-generate-button span:first-child {

    font-size: 13px;

    line-height: 1;

}


/* =====================================================
   IMAGEN GENERADA
===================================================== */

.image-message img {

    max-width: min(100%, 700px);

    border-radius: 16px;

    border: 1px solid rgba(130, 105, 255, 0.18);

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.25),
        0 0 25px rgba(100, 80, 220, 0.07);
}


/* =====================================================
   MÓVIL
===================================================== */

@media (max-width: 600px) {

    .image-generator-panel {

        padding: 14px;

        border-radius: 15px;

    }


    .image-generator-header h3 {

        font-size: 16px;

    }


    .image-generator-header p {

        font-size: 12px;

    }


    .image-submit-button {

        padding: 8px 11px;

    }


    .image-generate-button span:last-child {

        display: none;

    }

}/* =====================================================
   AVISO PREMIUM — GENERACIÓN DE IMÁGENES
===================================================== */

.premium-image-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(2, 4, 9, 0.72);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    animation: premiumModalIn 0.2s ease;
}

@keyframes premiumModalIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}

.premium-image-card {
    position: relative;

    width: min(400px, 100%);

    padding: 30px 26px;

    box-sizing: border-box;

    text-align: center;

    background:
        linear-gradient(
            145deg,
            rgba(35, 28, 75, 0.96),
            rgba(7, 9, 20, 0.98)
        );

    border: 1px solid rgba(140, 115, 255, 0.30);

    border-radius: 22px;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.55),
        0 0 50px rgba(100, 75, 230, 0.12);

    animation: premiumCardIn 0.25s ease;
}

@keyframes premiumCardIn {

    from {
        opacity: 0;
        transform: translateY(10px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

}

.premium-image-close {
    position: absolute;

    top: 12px;
    right: 12px;

    width: 30px;
    height: 30px;

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 9px;

    background: rgba(255, 255, 255, 0.04);

    color: rgba(255, 255, 255, 0.55);

    font-size: 20px;

    cursor: pointer;
}

.premium-image-close:hover {
    background: rgba(255, 255, 255, 0.09);
    color: #ffffff;
}

.premium-image-icon {
    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 14px;

    border-radius: 17px;

    background: rgba(110, 85, 230, 0.12);

    border: 1px solid rgba(140, 115, 255, 0.22);

    font-size: 27px;

    box-shadow:
        0 0 30px rgba(100, 75, 230, 0.12);
}

.premium-image-label {
    display: block;

    margin-bottom: 7px;

    color: rgba(160, 140, 255, 0.85);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.5px;
}

.premium-image-card h3 {
    margin: 0;

    color: #ffffff;

    font-size: 20px;
}

.premium-image-card p {
    margin: 10px auto 22px;

    max-width: 320px;

    color: rgba(220, 220, 235, 0.58);

    font-size: 13px;

    line-height: 1.55;
}

.premium-image-action {
    width: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 11px 16px;

    border: 1px solid rgba(145, 120, 255, 0.38);

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            rgba(115, 90, 235, 0.30),
            rgba(75, 55, 180, 0.20)
        );

    color: #ffffff;

    font-family: inherit;

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.premium-image-action:hover {

    transform: translateY(-1px);

    background:
        linear-gradient(
            135deg,
            rgba(130, 105, 250, 0.40),
            rgba(85, 65, 200, 0.28)
        );

    box-shadow:
        0 0 25px rgba(110, 85, 230, 0.16);
}/* =====================================================
   SUBIR IMAGEN — SPECTRE
===================================================== */

.image-upload-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    height: 36px;
    padding: 0 13px;

    border: 1px solid rgba(120, 100, 255, 0.22);
    border-radius: 10px;

    background: rgba(80, 70, 180, 0.08);

    color: rgba(235, 235, 255, 0.82);

    font-family: inherit;
    font-size: 13px;
    font-weight: 500;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


/* Icono */

.image-upload-button span:first-child {
    font-size: 15px;
    line-height: 1;
}


/* Hover */

.image-upload-button:hover {
    background: rgba(100, 85, 220, 0.16);

    border-color:
        rgba(135, 120, 255, 0.42);

    color: #ffffff;

    box-shadow:
        0 0 18px rgba(100, 80, 255, 0.12);

    transform: translateY(-1px);
}


/* Click */

.image-upload-button:active {
    transform: translateY(0);

    background:
        rgba(100, 85, 220, 0.22);
}


/* Mientras analiza */

.image-upload-button:disabled {
    opacity: 0.65;

    cursor: wait;

    transform: none;

    box-shadow: none;
}


/* =====================================================
   PREVISUALIZACIÓN DE IMAGEN EN EL CHAT
===================================================== */

.image-user-message img {
    max-width: min(420px, 100%);

    max-height: 400px;

    object-fit: contain;

    border-radius: 14px;

    border:
        1px solid rgba(130, 110, 255, 0.18);

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.25);

    background:
        rgba(10, 10, 25, 0.5);
}


/* =====================================================
   MENSAJE DEL USUARIO CON IMAGEN
===================================================== */

.image-user-message {
    margin-top: 8px;
    margin-bottom: 8px;
}


.image-user-message .message-content {
    overflow: hidden;

    border-radius: 16px;
}


/* Texto debajo de la imagen */

.image-user-message p {
    margin-bottom: 0;

    color:
        rgba(245, 245, 255, 0.9);

    line-height: 1.5;
}


/* =====================================================
   MÓVIL
===================================================== */

@media (max-width: 600px) {

    .image-upload-button {
        width: 36px;
        height: 36px;

        padding: 0;

        border-radius: 10px;
    }


    .image-upload-button span:last-child {
        display: none;
    }


    .image-upload-button span:first-child {
        font-size: 17px;
    }


    .image-user-message img {
        max-width: 100%;

        max-height: 320px;
    }

}/* =====================================================
   IMAGEN PENDIENTE
===================================================== */

.pending-image-message {
    margin-top: 8px;
    margin-bottom: 8px;
}

.pending-image-message .message-content {
    overflow: hidden;
    border-radius: 16px;
}

.pending-image-wrapper {
    position: relative;
    display: inline-block;
    max-width: min(420px, 100%);
}

.pending-image {
    display: block;

    max-width: 100%;
    max-height: 400px;

    object-fit: contain;

    border-radius: 14px;

    border:
        1px solid rgba(130, 110, 255, 0.25);

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.25);
}

.pending-image-status {
    margin-top: 10px;

    color:
        rgba(190, 185, 255, 0.85);

    font-size: 13px;

    line-height: 1.4;
}

@media (max-width: 600px) {

    .pending-image {
        max-width: 100%;
        max-height: 320px;
    }

    .pending-image-status {
        font-size: 12px;
    }
}/* ========================================================
   ACCIONES DE FICHA
   ======================================================== */

.spectre-sheet-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.spectre-sheet-action {
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition:
        transform 0.15s ease,
        background 0.15s ease,
        border-color 0.15s ease;
}

.spectre-sheet-action:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--violet-light);
    transform: translateY(-1px);
}

.spectre-sheet-action:active {
    transform: translateY(0);
}

.spectre-sheet-action:disabled {
    opacity: 0.6;
    cursor: wait;
    transform: none;
}


/* MÓVIL */

@media (max-width: 600px) {

    .spectre-sheet-actions {
        flex-direction: column;
    }

    .spectre-sheet-action {
        width: 100%;
    }

}
/* =========================================================
   PLAN DE ESTUDIO — FORMULARIO
   ========================================================= */

.study-plan-generator {
    width: 100%;
    max-width: 920px;
    margin: 30px auto 0;
    padding: 30px;

    box-sizing: border-box;

    border: 1px solid var(--border);
    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.045),
            rgba(255, 255, 255, 0.018)
        );

    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.16);
}


/* INTRO */

.study-plan-intro {
    margin-bottom: 26px;
}

.study-plan-intro h3 {
    margin: 0 0 7px;

    font-size: 21px;
}

.study-plan-intro p {
    margin: 0;

    color: var(--text-muted);

    line-height: 1.6;
    font-size: 14px;
}


/* FORMULARIO */

.study-plan-form {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}


/* CAMPO */

.study-plan-field {
    display: flex;
    flex-direction: column;

    gap: 8px;
}

.study-plan-field label {
    font-size: 12px;

    font-weight: 700;

    color: var(--text-muted);

    letter-spacing: 0.2px;
}


/* INPUTS */

.study-plan-field input,
.study-plan-field select {
    width: 100%;
    min-height: 48px;

    padding: 12px 14px;

    box-sizing: border-box;

    border: 1px solid var(--border);

    border-radius: 11px;

    background:
        rgba(255, 255, 255, 0.035);

    color: var(--text);

    font-family: inherit;
    font-size: 14px;

    outline: none;

    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;
}


/* PLACEHOLDER */

.study-plan-field input::placeholder {
    color: var(--text-muted);
    opacity: 0.65;
}


/* FOCUS */

.study-plan-field input:focus,
.study-plan-field select:focus {

    border-color:
        var(--violet-light);

    background:
        rgba(255, 255, 255, 0.055);

    box-shadow:
        0 0 0 3px
        rgba(124, 92, 255, 0.09);
}


/* SELECT */

.study-plan-field select {
    cursor: pointer;
}


/* BOTÓN */

.study-plan-button {

    width: 100%;

    margin-top: 24px;

    min-height: 48px;

    border-radius: 12px;

    font-size: 14px;
    font-weight: 700;
}


/* RESULTADO */

.study-plan-result {
    margin-top: 26px;
}


/* MÓVIL */

@media (max-width: 650px) {

    .study-plan-generator {
        padding: 20px;

        border-radius: 17px;
    }

    .study-plan-form {
        grid-template-columns: 1fr;

        gap: 16px;
    }

    .study-plan-intro h3 {
        font-size: 19px;
    }

}
/* MÓVIL */

@media (max-width: 650px) {

    .study-plan-generator {
        padding: 20px;
    }

    .study-plan-form {
        grid-template-columns: 1fr;
    }

}/* ========================================================
   BOTÓN PLANES DE ESTUDIO JUNTO A LA CÁMARA
   ======================================================== */

.study-plans-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    min-height: 38px;
    padding: 8px 12px;

    border: 1px solid var(--border);
    border-radius: 10px;

    background: rgba(255, 255, 255, 0.035);
    color: var(--text);

    font-family: inherit;
    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        transform 0.15s ease;
}

.study-plans-nav:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--violet-light);
    transform: translateY(-1px);
}/* =========================================================
   PLANES DE ESTUDIO — DISEÑO
   ========================================================= */

.study-plan-card {
    width: 100%;
    box-sizing: border-box;
    padding: 28px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.045),
            rgba(255, 255, 255, 0.018)
        );
    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.18);
}


/* CABECERA */

.study-plan-card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border);
}

.study-plan-card-icon {
    width: 52px;
    height: 52px;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            rgba(124, 92, 255, 0.22),
            rgba(73, 118, 255, 0.16)
        );

    border: 1px solid rgba(124, 92, 255, 0.25);

    font-size: 24px;

    box-shadow:
        0 8px 25px rgba(91, 71, 180, 0.18);
}

.study-plan-card-label {
    display: block;
    margin-bottom: 4px;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;

    color: var(--violet-light);
}

.study-plan-card-header h3 {
    margin: 0;
    font-size: 27px;
}

.study-plan-card-header p {
    margin: 5px 0 0;
    color: var(--text-muted);
    font-size: 13px;
}


/* CONTENEDOR DE DÍAS */

.study-plan-days {
    display: flex;
    flex-direction: column;
    gap: 14px;
}


/* TARJETA DE CADA DÍA */

.study-plan-day-card {
    position: relative;

    padding: 20px;

    border: 1px solid var(--border);
    border-radius: 16px;

    background: rgba(255, 255, 255, 0.025);

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease;
}

.study-plan-day-card:hover {
    transform: translateY(-2px);

    border-color:
        rgba(124, 92, 255, 0.35);

    background:
        rgba(255, 255, 255, 0.04);
}


/* CABECERA DEL DÍA */

.study-plan-day-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.study-plan-day-number {
    width: 42px;
    height: 42px;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            rgba(124, 92, 255, 0.25),
            rgba(73, 118, 255, 0.16)
        );

    border:
        1px solid rgba(124, 92, 255, 0.3);

    color: var(--text);

    font-size: 16px;
    font-weight: 700;
}

.study-plan-day-title span {
    display: block;

    margin-bottom: 3px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;

    color: var(--violet-light);
}

.study-plan-day-title h4 {
    margin: 0;

    font-size: 17px;
    line-height: 1.35;
}


/* ACTIVIDADES */

.study-plan-activities {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.study-plan-activity {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    padding: 10px 12px;

    border-radius: 10px;

    background:
        rgba(255, 255, 255, 0.025);
}

.study-plan-activity > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 19px;
    height: 19px;
    flex-shrink: 0;

    margin-top: 1px;

    border-radius: 50%;

    background:
        rgba(124, 92, 255, 0.15);

    color: var(--violet-light);

    font-size: 12px;
    font-weight: 700;
}

.study-plan-activity p {
    margin: 0;

    color: var(--text-muted);

    font-size: 13px;
    line-height: 1.55;
}


/* REPASO FINAL */

.study-plan-final {
    display: flex;
    gap: 16px;

    margin-top: 6px;
    padding: 22px;

    border-radius: 17px;

    border:
        1px solid rgba(124, 92, 255, 0.3);

    background:
        linear-gradient(
            135deg,
            rgba(124, 92, 255, 0.10),
            rgba(73, 118, 255, 0.045)
        );

    box-shadow:
        0 12px 35px rgba(75, 60, 160, 0.10);
}

.study-plan-final-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background:
        rgba(124, 92, 255, 0.16);

    font-size: 20px;
}

.study-plan-final-content {
    flex: 1;
}

.study-plan-final h4 {
    margin: 0 0 14px;

    font-size: 15px;
    letter-spacing: 0.7px;
}


/* MÓVIL */

@media (max-width: 650px) {

    .study-plan-card {
        padding: 18px;
        border-radius: 16px;
    }

    .study-plan-card-header {
        gap: 12px;
        padding-bottom: 20px;
        margin-bottom: 18px;
    }

    .study-plan-card-icon {
        width: 45px;
        height: 45px;
        font-size: 21px;
    }

    .study-plan-card-header h3 {
        font-size: 19px;
    }

    .study-plan-day-card {
        padding: 16px;
    }

    .study-plan-day-number {
        width: 38px;
        height: 38px;
    }

    .study-plan-day-title h4 {
        font-size: 15px;
    }

    .study-plan-activity {
        padding: 9px 10px;
    }

    .study-plan-final {
        padding: 17px;
        gap: 12px;
    }

}/* =========================================================
   PLANES — OPCIONES DE LOS SELECT
   ========================================================= */

.study-plan-field select option {
    background: #151525;
    color: #ffffff;
}

.study-plan-field select option:checked {
    background: #26213f;
    color: #ffffff;
}
/* Ocultar bot�n de Planes de estudio */

/* =====================================================
   RECOMPENSA DE LANZAMIENTO
===================================================== */

.launch-reward {
    width: min(720px, 92%);
    margin: 24px auto 20px;

    display: flex;
    align-items: center;
    gap: 18px;

    padding: 18px 20px;

    background:
        linear-gradient(
            135deg,
            rgba(20, 27, 55, 0.96),
            rgba(31, 20, 61, 0.94)
        );

    border: 1px solid rgba(112, 125, 255, 0.28);
    border-radius: 18px;

    box-shadow:
        0 0 30px rgba(83, 91, 255, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);

    position: relative;
    overflow: hidden;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.launch-reward::before {
    content: "";

    position: absolute;
    top: -80px;
    left: -80px;

    width: 180px;
    height: 180px;

    background: rgba(91, 101, 255, 0.16);

    filter: blur(55px);
    pointer-events: none;
}

.launch-reward:hover {
    transform: translateY(-2px);

    border-color: rgba(123, 135, 255, 0.48);

    box-shadow:
        0 0 40px rgba(83, 91, 255, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}


/* ICONO */

.launch-reward-icon {
    width: 48px;
    height: 48px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background: rgba(91, 101, 255, 0.12);

    border: 1px solid rgba(112, 125, 255, 0.22);

    font-size: 24px;

    box-shadow:
        0 0 20px rgba(91, 101, 255, 0.12);
}


/* CONTENIDO */

.launch-reward-content {
    flex: 1;
    min-width: 0;
}

.launch-reward-label {
    display: block;

    margin-bottom: 4px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;

    color: #8994ff;
}

.launch-reward-content h3 {
    margin: 0 0 4px;

    font-size: 15px;
    font-weight: 650;

    color: #ffffff;
}

.launch-reward-content p {
    margin: 0;

    font-size: 13px;
    line-height: 1.45;

    color: rgba(220, 224, 240, 0.68);
}


/* BOTÓN */

.launch-reward-button {
    flex-shrink: 0;

    padding: 10px 16px;

    border: 1px solid rgba(135, 145, 255, 0.35);
    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            rgba(91, 101, 255, 0.95),
            rgba(120, 74, 210, 0.95)
        );

    color: #ffffff;

    font-size: 12px;
    font-weight: 650;

    cursor: pointer;

    box-shadow:
        0 5px 18px rgba(80, 70, 220, 0.22);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;
}

.launch-reward-button:hover {
    transform: translateY(-1px);

    filter: brightness(1.08);

    box-shadow:
        0 7px 24px rgba(80, 70, 220, 0.32);
}

.launch-reward-button:active {
    transform: translateY(0);
}


/* =====================================================
   MÓVIL
===================================================== */

@media (max-width: 600px) {

    .launch-reward {
        width: calc(100% - 28px);

        margin: 18px auto;

        padding: 15px;

        gap: 13px;

        align-items: flex-start;
    }

    .launch-reward-icon {
        width: 42px;
        height: 42px;

        font-size: 21px;
    }

    .launch-reward-content h3 {
        font-size: 14px;
    }

    .launch-reward-content p {
        font-size: 12px;
    }

    .launch-reward-button {
        padding: 9px 12px;

        font-size: 12px;
    }
}/* =====================================================
   MODAL — CÓDIGO DE LANZAMIENTO
===================================================== */

.launch-code-modal {
    position: fixed;
    inset: 0;

    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(2, 4, 9, 0.78);

    backdrop-filter: blur(10px);
}

.launch-code-card {
    position: relative;

    width: min(440px, 100%);

    padding: 32px;

    text-align: center;

    background:
        linear-gradient(
            145deg,
            rgba(17, 23, 48, 0.98),
            rgba(28, 18, 52, 0.98)
        );

    border: 1px solid rgba(112, 125, 255, 0.3);

    border-radius: 22px;

    box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.55),
        0 0 45px rgba(83, 91, 255, 0.12);
}

.launch-code-close {
    position: absolute;

    top: 14px;
    right: 16px;

    width: 32px;
    height: 32px;

    border: none;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.05);

    color: rgba(255, 255, 255, 0.7);

    font-size: 22px;

    cursor: pointer;

    transition: 0.2s ease;
}

.launch-code-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.launch-code-icon {
    font-size: 42px;

    margin-bottom: 12px;

    filter:
        drop-shadow(0 0 18px rgba(110, 120, 255, 0.35));
}

.launch-code-label {
    display: block;

    margin-bottom: 8px;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.8px;

    color: #8994ff;
}

.launch-code-card h3 {
    margin: 0 0 8px;

    color: #ffffff;

    font-size: 21px;
}

.launch-code-card p {
    margin: 0 auto 22px;

    max-width: 340px;

    color: rgba(220, 224, 240, 0.68);

    font-size: 13px;
    line-height: 1.5;
}

.launch-code-input-wrapper {
    display: flex;

    gap: 8px;

    padding: 5px;

    background: rgba(0, 0, 0, 0.22);

    border: 1px solid rgba(112, 125, 255, 0.2);

    border-radius: 13px;
}

.launch-code-input-wrapper input {
    flex: 1;

    min-width: 0;

    padding: 10px 12px;

    border: none;
    outline: none;

    background: transparent;

    color: #ffffff;

    font-size: 13px;
}

.launch-code-input-wrapper input::placeholder {
    color: rgba(220, 224, 240, 0.38);
}

.launch-code-input-wrapper button {
    padding: 10px 15px;

    border: none;
    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            rgba(91, 101, 255, 0.95),
            rgba(120, 74, 210, 0.95)
        );

    color: #ffffff;

    font-size: 12px;
    font-weight: 650;

    cursor: pointer;

    transition: 0.2s ease;
}

.launch-code-input-wrapper button:hover {
    filter: brightness(1.08);
}

.launch-code-message {
    min-height: 20px;

    margin-top: 12px;

    font-size: 12px;
}

.launch-code-counter {
    display: block;

    margin-top: 14px;

    color: rgba(220, 224, 240, 0.4);

    font-size: 10px;
}

@media (max-width: 500px) {

    .launch-code-card {
        padding: 27px 20px;
    }

    .launch-code-input-wrapper {
        flex-direction: column;
        padding: 7px;
    }

    .launch-code-input-wrapper button {
        width: 100%;
    }
}/* ============================================================
   BOTÓN SALTAR — SPECTRE HUD
   ============================================================ */

.skip-intro-button {
    position: absolute;
    bottom: 30px;
    right: 30px;
    z-index: 20;

    display: flex;
    align-items: center;
    gap: 8px;

    padding: 9px 15px;

    border: 1px solid rgba(120, 160, 255, 0.35);
    border-radius: 7px;

    background:
        linear-gradient(
            135deg,
            rgba(80, 100, 255, 0.08),
            rgba(150, 80, 255, 0.06)
        );

    color: rgba(220, 230, 255, 0.78);

    font-family:
        "Inter",
        system-ui,
        sans-serif;

    font-size: 12px;
    font-weight: 600;

    letter-spacing: 1.5px;
    text-transform: uppercase;

    cursor: pointer;

    backdrop-filter: blur(12px);

    box-shadow:
        0 0 0 1px rgba(100, 130, 255, 0.04),
        0 0 18px rgba(80, 100, 255, 0.08);

    transition:
        color 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;

    overflow: hidden;
}


/* Línea tecnológica */

.skip-intro-button::before {
    content: "";

    position: absolute;
    top: 0;
    left: -100%;

    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(120, 170, 255, 0.9),
            transparent
        );

    transition: left 0.5s ease;
}


/* Pequeño indicador */

.skip-intro-button::after {
    content: "›";

    font-size: 15px;
    line-height: 1;

    opacity: 0.65;

    transform: translateX(0);

    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}


/* Hover */

.skip-intro-button:hover {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            rgba(80, 110, 255, 0.16),
            rgba(150, 80, 255, 0.12)
        );

    border-color:
        rgba(130, 165, 255, 0.65);

    box-shadow:
        0 0 18px rgba(80, 110, 255, 0.18),
        0 0 35px rgba(130, 80, 255, 0.08);

    transform:
        translateY(-1px);
}


.skip-intro-button:hover::before {
    left: 100%;
}


.skip-intro-button:hover::after {
    opacity: 1;
    transform: translateX(3px);
}


/* Click */

.skip-intro-button:active {
    transform:
        translateY(0)
        scale(0.97);
}


/* ============================================================
   MÓVIL
   ============================================================ */

@media (max-width: 600px) {

    .skip-intro-button {

        bottom: 20px;
        right: 20px;

        padding: 8px 12px;

        font-size: 10px;

        letter-spacing: 1.2px;
    }
}

/* =================================================
   SPECTRE FEEDBACK
================================================= */

.feedback-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;

    background:
        radial-gradient(
            circle at center,
            rgba(67, 85, 255, 0.12),
            rgba(3, 7, 18, 0.88)
        );

    backdrop-filter: blur(12px);
}

.feedback-card {
    position: relative;

    width: min(520px, 100%);

    padding: 34px;

    border: 1px solid rgba(100, 120, 255, 0.25);
    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(15, 22, 45, 0.98),
            rgba(8, 12, 28, 0.98)
        );

    box-shadow:
        0 0 50px rgba(60, 80, 255, 0.18),
        0 25px 80px rgba(0, 0, 0, 0.5);

    color: #fff;
}

.feedback-close {
    position: absolute;

    top: 16px;
    right: 18px;

    width: 36px;
    height: 36px;

    border: 0;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.06);

    color: rgba(255, 255, 255, 0.7);

    font-size: 24px;

    cursor: pointer;

    transition: 0.2s ease;
}

.feedback-close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.feedback-icon {
    display: flex;

    width: 54px;
    height: 54px;

    align-items: center;
    justify-content: center;

    margin-bottom: 18px;

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            rgba(80, 100, 255, 0.2),
            rgba(140, 70, 255, 0.2)
        );

    border: 1px solid rgba(120, 130, 255, 0.25);

    font-size: 25px;
}

.feedback-label {
    font-size: 12px;
    font-weight: 700;

    letter-spacing: 2px;

    color: #8d9cff;
}

.feedback-card h2 {
    margin: 8px 0 10px;

    font-size: 27px;
}

.feedback-card > p {
    margin: 0 0 25px;

    color: rgba(255, 255, 255, 0.62);

    line-height: 1.6;
}

.feedback-field {
    margin-bottom: 20px;
}

.feedback-field label {
    display: block;

    margin-bottom: 8px;

    font-size: 13px;
    font-weight: 600;

    color: rgba(255, 255, 255, 0.8);
}

.feedback-field select,
.feedback-field textarea {
    width: 100%;

    box-sizing: border-box;

    border: 1px solid rgba(120, 135, 255, 0.18);
    border-radius: 12px;

    background: rgba(255, 255, 255, 0.045);

    color: #fff;

    outline: none;

    transition: 0.2s ease;
}

.feedback-field select {
    height: 46px;

    padding: 0 13px;
}

.feedback-field textarea {
    min-height: 130px;

    padding: 13px;

    resize: vertical;

    font-family: inherit;
}

.feedback-field select:focus,
.feedback-field textarea:focus {
    border-color: rgba(110, 125, 255, 0.65);

    box-shadow:
        0 0 0 3px rgba(80, 100, 255, 0.1);
}

.feedback-field select option {
    background: #10162d;
    color: #fff;
}

.feedback-submit {
    display: flex;

    width: 100%;
    height: 48px;

    align-items: center;
    justify-content: space-between;

    padding: 0 17px;

    border: 0;
    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #5367ff,
            #7651e8
        );

    color: #fff;

    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease;
}

.feedback-submit:hover {
    transform: translateY(-1px);

    box-shadow:
        0 8px 25px rgba(80, 90, 255, 0.25);
}

.feedback-submit:disabled {
    opacity: 0.6;
    cursor: wait;
}

.feedback-success {
    text-align: center;
    padding: 20px 0 5px;
}

.feedback-success-icon {
    display: flex;

    width: 60px;
    height: 60px;

    align-items: center;
    justify-content: center;

    margin: 0 auto 18px;

    border-radius: 50%;

    background: rgba(70, 220, 150, 0.12);

    border: 1px solid rgba(70, 220, 150, 0.3);

    color: #6ee7a8;

    font-size: 28px;
}

.feedback-success h3 {
    margin: 0 0 8px;

    font-size: 22px;
}

.feedback-success p {
    margin: 0 0 20px;

    color: rgba(255, 255, 255, 0.6);
}

.feedback-success-button {
    padding: 10px 22px;

    border: 1px solid rgba(120, 135, 255, 0.25);
    border-radius: 10px;

    background: rgba(255, 255, 255, 0.05);

    color: #fff;

    cursor: pointer;
}

.feedback-error {
    margin-top: 12px;

    padding: 11px;

    border-radius: 10px;

    background: rgba(255, 70, 90, 0.1);

    border: 1px solid rgba(255, 70, 90, 0.2);

    color: #ff9da8;

    font-size: 13px;
}


/* BOTÓN DE SUGERENCIAS */

.suggestions-nav-button {
    display: flex;

    align-items: center;
    gap: 7px;

    padding: 8px 12px;

    border: 1px solid rgba(110, 125, 255, 0.18);
    border-radius: 10px;

    background: rgba(255, 255, 255, 0.04);

    color: rgba(255, 255, 255, 0.78);

    cursor: pointer;

    transition: 0.2s ease;
}

.suggestions-nav-button:hover {
    border-color: rgba(110, 125, 255, 0.4);

    background: rgba(80, 100, 255, 0.1);

    color: #fff;

    box-shadow:
        0 0 20px rgba(80, 100, 255, 0.1);
}


@media (max-width: 600px) {

    .feedback-modal {
        padding: 14px;
    }

    .feedback-card {
        padding: 26px 20px;
    }

    .feedback-card h2 {
        font-size: 27px;
    }

}
/* =========================================================
   ACCIONES DE FICHAS — DESCARGAR / COMPARTIR
   ========================================================= */

.spectre-sheet-actions {
    display: flex;
    gap: 12px;
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px solid rgba(120, 140, 255, 0.16);
}

.spectre-sheet-action {
    flex: 1;
    min-height: 42px;
    border: 1px solid rgba(100, 120, 255, 0.28);
    border-radius: 12px;
    background: rgba(45, 55, 110, 0.35);
    color: #f4f6ff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition:
        transform 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.spectre-sheet-action:hover {
    transform: translateY(-1px);
    background: rgba(70, 85, 160, 0.5);
    border-color: rgba(120, 140, 255, 0.55);
    box-shadow: 0 6px 20px rgba(30, 40, 100, 0.22);
}

.spectre-sheet-action:active {
    transform: translateY(0);
}

.spectre-sheet-action:disabled {
    opacity: 0.65;
    cursor: wait;
    transform: none;
}

.spectre-sheet-action span:first-child {
    font-size: 17px;
    line-height: 1;
}

@media (max-width: 600px) {

    .spectre-sheet-actions {
        flex-direction: column;
    }

    .spectre-sheet-action {
        width: 100%;
    }
}


/* =========================================================
   SPECTRE VOICE V1
   ========================================================= */

.voice-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    height: 36px;
    padding: 0 13px;

    border: 1px solid rgba(120, 100, 255, 0.22);
    border-radius: 10px;

    background: rgba(80, 70, 180, 0.08);
    color: inherit;

    cursor: pointer;

    font: inherit;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.voice-button span:first-child {
    font-size: 15px;
    line-height: 1;
}

.voice-button:hover {
    background: rgba(100, 85, 220, 0.16);

    border-color:
        rgba(135, 120, 255, 0.42);

    color: #ffffff;

    box-shadow:
        0 0 18px rgba(100, 80, 255, 0.12);

    transform: translateY(-1px);
}

.voice-button:active {
    transform: translateY(0);

    background:
        rgba(100, 85, 220, 0.22);
}

.voice-button.voice-listening {
    background:
        rgba(100, 85, 220, 0.24);

    border-color:
        rgba(150, 135, 255, 0.65);

    box-shadow:
        0 0 20px rgba(100, 80, 255, 0.28);

    animation: spectreVoicePulse 1.4s ease-in-out infinite;
}

@keyframes spectreVoicePulse {
    0%, 100% {
        box-shadow:
            0 0 12px rgba(100, 80, 255, 0.20);
    }

    50% {
        box-shadow:
            0 0 24px rgba(100, 80, 255, 0.42);
    }
}

@media (max-width: 600px) {

    .voice-button {
        width: 36px;
        height: 36px;
        padding: 0;
        border-radius: 10px;
    }

    .voice-button span:last-child {
        display: none;
    }

    .voice-button span:first-child {
        font-size: 17px;
    }

}


/* ============================================================
   SPECTRE MINI GAME
============================================================ */

.spectre-game-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 36px;
    padding: 0 13px;
    border: 1px solid rgba(120, 100, 255, 0.22);
    border-radius: 10px;
    background: rgba(80, 70, 180, 0.08);
    color: inherit;
    cursor: pointer;
    font: inherit;
    transition: 0.2s ease;
}

.spectre-game-button:hover {
    background: rgba(100, 80, 220, 0.15);
    border-color: rgba(140, 120, 255, 0.35);
}

.spectre-game-button:active {
    transform: scale(0.96);
}

.spectre-game-button span:first-child {
    font-size: 15px;
    line-height: 1;
}

@media (max-width: 600px) {

    .spectre-game-button {
        width: 36px;
        height: 36px;
        padding: 0;
        border-radius: 10px;
    }

    .spectre-game-button span:last-child {
        display: none;
    }

    .spectre-game-button span:first-child {
        font-size: 17px;
    }

}

/* ============================================================
   SPECTRE MINI GAME MODAL
============================================================ */

.spectre-game-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
}

.spectre-game-card {
    position: relative;
    width: min(760px, 100%);
    max-height: 90vh;
    overflow: auto;
    padding: 24px;
    border-radius: 22px;
    background: #111827;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
    text-align: center;
}

.spectre-game-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: white;
    font-size: 25px;
    cursor: pointer;
}

.spectre-game-close:hover {
    background: rgba(255, 255, 255, 0.16);
}

.spectre-game-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
}

.spectre-game-icon {
    font-size: 25px;
}

.spectre-game-title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
}

.spectre-game-score {
    margin-bottom: 14px;
    font-size: 15px;
    font-weight: 600;
}

#spectre-game-canvas {
    display: block;
    width: 100%;
    max-width: 700px;
    height: auto;
    margin: 0 auto;
    border-radius: 16px;
    background: #0b1220;
    border: 1px solid rgba(255, 255, 255, 0.1);
    touch-action: none;
}

.spectre-game-over {
    margin-top: 14px;
    padding: 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
}

.spectre-game-over h2 {
    margin: 0 0 6px;
    font-size: 24px;
}

.spectre-game-over p {
    margin: 0 0 14px;
}

.spectre-game-retry {
    padding: 10px 18px;
    border: none;
    border-radius: 10px;
    background: #ffffff;
    color: #111827;
    font-weight: 700;
    cursor: pointer;
}

.spectre-game-retry:hover {
    transform: translateY(-1px);
}

.spectre-game-hint {
    margin: 12px 0 0;
    opacity: 0.7;
    font-size: 13px;
}

@media (max-width: 600px) {

    .spectre-game-modal {
        padding: 10px;
    }

    .spectre-game-card {
        padding: 16px;
        border-radius: 18px;
    }

    .spectre-game-title {
        font-size: 15px;
    }

    .spectre-game-score {
        font-size: 14px;
    }

    .spectre-game-hint {
        font-size: 12px;
    }

}

/* ============================================================
   SPECTRE THEMES V1
   Personalizacion visual del chat
   ============================================================ */

body[data-spectre-theme="aurora"] {
    background:
        radial-gradient(circle at 70% 10%, rgba(139, 92, 246, 0.18), transparent 35%),
        radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.12), transparent 35%),
        linear-gradient(135deg, #090611 0%, #160d2b 48%, #07152c 100%);
}

body[data-spectre-theme="crimson"] {
    background:
        radial-gradient(circle at 70% 10%, rgba(34, 211, 238, 0.16), transparent 35%),
        radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.12), transparent 35%),
        linear-gradient(135deg, #020b12 0%, #062235 48%, #07152c 100%);
}

body[data-spectre-theme="aurora"] .user-message .message-content {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.32), rgba(99, 102, 241, 0.24));
    border-color: rgba(167, 139, 250, 0.35);
}

body[data-spectre-theme="crimson"] .user-message .message-content {
    background: linear-gradient(135deg, rgba(8, 145, 178, 0.32), rgba(37, 99, 235, 0.24));
    border-color: rgba(34, 211, 238, 0.3);
}

body[data-spectre-theme="aurora"] button:focus-visible,
body[data-spectre-theme="aurora"] textarea:focus-visible,
body[data-spectre-theme="aurora"] input:focus-visible {
    outline-color: rgba(192, 132, 252, 0.85);
}

body[data-spectre-theme="crimson"] button:focus-visible,
body[data-spectre-theme="crimson"] textarea:focus-visible,
body[data-spectre-theme="crimson"] input:focus-visible {
    outline-color: rgba(34, 211, 238, 0.85);
}

/* Fin de Spectre Themes V1 */

/* ============================================================
   SPECTRE THEMES V1 - SELECTOR
   ============================================================ */

.settings-themes {
    width: 100%;
    max-width: 820px;
    margin-top: 28px;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--panel);
    box-shadow: var(--shadow);
}

.settings-themes h3 {
    margin-bottom: 8px;
    color: var(--text);
    font-size: 20px;
}

.settings-themes > p {
    color: var(--text-muted);
    line-height: 1.6;
}

.exp-level-panel {
    margin-top: 18px;
    padding: 16px;
    border: 1px solid var(--border, rgba(127,127,127,.25));
    border-radius: 16px;
    background: var(--panel-light, rgba(127,127,127,.06));
}
.exp-level-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.exp-level-kicker {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--text-muted, #888);
}
.exp-level-top h4 {
    margin: 5px 0 0;
    color: var(--text, inherit);
    font-size: 18px;
}
.exp-total-label {
    color: var(--text-muted, #888);
    font-size: 13px;
}
.exp-total-label strong {
    color: var(--violet-light, var(--violet, #9b87f5));
    font-size: 18px;
}
.exp-progress-track {
    overflow: hidden;
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: rgba(127,127,127,.22);
}
.exp-progress-fill {
    display: block;
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--violet, #7657e8), var(--violet-light, #b09cff));
    transition: width .35s ease;
}
.exp-level-next {
    margin: 10px 0 0;
    color: var(--text-muted, #888);
    font-size: 12px;
}

.theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    margin-top: 22px;
}

.theme-option {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    color: var(--text);
    text-align: left;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--panel-light);
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.theme-option:hover {
    transform: translateY(-2px);
    border-color: var(--violet);
}

.theme-option[aria-pressed="true"] {
    border-color: var(--violet-light);
    box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.15);
}

.theme-preview {
    display: block;
    width: 100%;
    height: 76px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.theme-preview-midnight {
    background: linear-gradient(135deg, #02040a, #07152c 60%, #8b5cf6);
}

.theme-preview-aurora {
    background: linear-gradient(135deg, #090611, #160d2b 55%, #a855f7);
}

.theme-preview-crimson {
    background: linear-gradient(135deg, #020b12, #062235 55%, #22d3ee);
}

.theme-option-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.theme-option-info strong {
    font-size: 15px;
}

.theme-option-info small {
    color: var(--text-muted);
    font-size: 12px;
}

.theme-premium-label,
.theme-status {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.theme-premium-label {
    color: var(--violet-light);
}

.theme-status {
    color: var(--success);
}

.theme-feedback {
    min-height: 22px;
    margin-top: 16px;
    font-size: 13px;
}

@media (max-width: 520px) {
    .settings-themes {
        padding: 16px;
    }

    .theme-grid {
        grid-template-columns: 1fr;
    }
}

/* Fin del selector Spectre Themes V1 */

/* SPECTRE THEMES V2 - EMBER Y NEBULA */

/* Ember: carbón, naranja eléctrico y ámbar */
body[data-spectre-theme="ember"] {
    background:
        radial-gradient(circle at 75% 12%, rgba(255, 107, 44, 0.20), transparent 34%),
        radial-gradient(circle at 15% 85%, rgba(255, 179, 71, 0.10), transparent 35%),
        linear-gradient(135deg, #101114 0%, #21130f 52%, #100d12 100%);
}

body[data-spectre-theme="ember"] .user-message .message-content {
    background: linear-gradient(135deg, rgba(255, 107, 44, 0.28), rgba(255, 179, 71, 0.16));
    border-color: rgba(255, 145, 65, 0.38);
}

body[data-spectre-theme="ember"] button:focus-visible,
body[data-spectre-theme="ember"] textarea:focus-visible,
body[data-spectre-theme="ember"] input:focus-visible {
    outline-color: rgba(255, 179, 71, 0.9);
}

/* Nebula: azul espacial, cian y verde menta */
body[data-spectre-theme="nebula"] {
    background:
        radial-gradient(circle at 72% 12%, rgba(0, 217, 255, 0.19), transparent 34%),
        radial-gradient(circle at 15% 82%, rgba(92, 255, 177, 0.11), transparent 36%),
        linear-gradient(135deg, #071426 0%, #0a2030 52%, #08121f 100%);
}

body[data-spectre-theme="nebula"] .user-message .message-content {
    background: linear-gradient(135deg, rgba(0, 217, 255, 0.24), rgba(92, 255, 177, 0.14));
    border-color: rgba(0, 217, 255, 0.34);
}

body[data-spectre-theme="nebula"] button:focus-visible,
body[data-spectre-theme="nebula"] textarea:focus-visible,
body[data-spectre-theme="nebula"] input:focus-visible {
    outline-color: rgba(92, 255, 177, 0.9);
}

.theme-preview-ember {
    background: linear-gradient(135deg, #101114, #492015 58%, #ff6b2c);
}

.theme-preview-nebula {
    background: linear-gradient(135deg, #071426, #0a5262 58%, #5cffb1);
}

/* ============================================================
   SPECTRE THEME: CRIMSON
   Negro profundo, rojo carmesi y destellos escarlata
   ============================================================ */
body[data-spectre-theme="crimson"] {
    background:
        radial-gradient(circle at 78% 12%, rgba(220, 38, 38, 0.22), transparent 34%),
        radial-gradient(circle at 15% 85%, rgba(153, 27, 27, 0.16), transparent 38%),
        linear-gradient(135deg, #080608 0%, #1b090d 52%, #10070b 100%);
}

body[data-spectre-theme="crimson"] .user-message .message-content {
    border-color: rgba(248, 70, 85, 0.38);
    box-shadow: 0 0 18px rgba(220, 38, 38, 0.08);
}

body[data-spectre-theme="crimson"] button:focus-visible,
body[data-spectre-theme="crimson"] textarea:focus-visible,
body[data-spectre-theme="crimson"] input:focus-visible {
    outline-color: #f43f5e;
}

.theme-preview-crimson {
    background: linear-gradient(135deg, #080608, #4c0519 58%, #fb334f);
}
/* Fin de Crimson */

/* ============================================================
   SPECTRE MIND V1 — BOTÓN ESPECIAL
   ============================================================ */

#spectre-mind-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid rgba(151, 132, 255, 0.38) !important;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(92, 72, 170, 0.19), rgba(68, 91, 170, 0.13)) !important;
    color: #d8d2ff !important;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 0 12px rgba(116, 91, 235, 0.08);
    transition: background 0.2s ease, border-color 0.2s ease,
                box-shadow 0.2s ease, transform 0.2s ease;
}

#spectre-mind-button:hover {
    background: linear-gradient(135deg, rgba(115, 88, 210, 0.3), rgba(79, 105, 190, 0.22)) !important;
    border-color: rgba(177, 158, 255, 0.72) !important;
    box-shadow: 0 0 18px rgba(126, 103, 255, 0.2);
    transform: translateY(-1px);
}

#spectre-mind-button.mind-active {
    background: linear-gradient(135deg, #51409a, #354e91) !important;
    border-color: rgba(190, 178, 255, 0.8) !important;
    color: #ffffff !important;
    box-shadow: 0 0 18px rgba(126, 103, 255, 0.24),
                inset 0 0 10px rgba(255, 255, 255, 0.04);
}

#spectre-mind-button:focus-visible {
    outline: 2px solid #b8a9ff;
    outline-offset: 3px;
}

@media (max-width: 600px) {
    #spectre-mind-button {
        width: 36px;
        min-width: 36px;
        height: 36px;
        padding: 0;
        border-radius: 11px;
        gap: 0;
        font-size: 0;
    }

    #spectre-mind-button::before {
        content: "♡";
        font-size: 21px;
        line-height: 1;
    }

    #spectre-mind-button.mind-active::before {
        content: "←";
        font-size: 19px;
    }
}

/* SPECTRE MIND - VISUAL REFRESH */
#spectre-mind-button {
    position: relative;
    min-height: 40px;
    height: 40px;
    padding: 0 16px 0 12px;
    gap: 9px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 650;
    letter-spacing: 0.2px;
    background: linear-gradient(135deg, #211b3b, #17233c) !important;
    border: 1px solid rgba(164, 139, 255, 0.55) !important;
    color: #eee9ff !important;
    box-shadow: 0 4px 18px rgba(103, 76, 220, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

#spectre-mind-button::before {
    content: "\2661";
    display: inline-flex;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: linear-gradient(135deg, #7257d9, #5146a9);
    color: #ffffff;
    font-size: 18px;
    line-height: 1;
    box-shadow: 0 0 12px rgba(132, 105, 255, 0.25);
}

#spectre-mind-button:hover {
    background: linear-gradient(135deg, #302550, #202f50) !important;
    border-color: rgba(190, 174, 255, 0.85) !important;
    box-shadow: 0 5px 22px rgba(103, 76, 220, 0.24);
    transform: translateY(-2px);
}

#spectre-mind-button.mind-active {
    background: linear-gradient(135deg, #49358c, #2d467e) !important;
}

#spectre-mind-button.mind-active::before {
    content: "\2190";
    background: linear-gradient(135deg, #8068e5, #5369c4);
}

#spectre-mind-button:focus-visible {
    outline: 2px solid #b8a9ff;
    outline-offset: 3px;
}

/* SKIP INTRO - use a CSS escape instead of a misencoded symbol */
.skip-intro-button {
    gap: 9px;
    border-radius: 10px;
    letter-spacing: 1px;
}

.skip-intro-button::after {
    content: "\2192";
    font-size: 14px;
    opacity: 0.8;
}

.skip-intro-button:hover::after {
    transform: translateX(3px);
    opacity: 1;
}

@media (max-width: 600px) {
    #spectre-mind-button {
        width: 40px;
        min-width: 40px;
        height: 40px;
        padding: 0;
        gap: 0;
        font-size: 0;
        border-radius: 12px;
    }

    #spectre-mind-button::before {
        content: "\2661";
        flex-basis: 26px;
        width: 26px;
        height: 26px;
        font-size: 18px;
    }

    #spectre-mind-button.mind-active::before {
        content: "\2190";
        font-size: 18px;
    }
}

/* SPECTRE MIND - ACABADO UNIFICADO */
#spectre-mind-button {
    box-sizing: border-box;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    gap: 0 !important;
    border-radius: 10px !important;
    font-size: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #393052, #24233f) !important;
    border: 1px solid rgba(164, 145, 225, 0.5) !important;
    color: #eee9ff !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
    transition: background 0.2s ease, border-color 0.2s ease,
                box-shadow 0.2s ease, transform 0.2s ease;
}

#spectre-mind-button::before {
    content: "\1F49C";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif;
    font-size: 19px;
    line-height: 1;
}

#spectre-mind-button:hover {
    background: linear-gradient(145deg, #4b3c70, #302e51) !important;
    border-color: rgba(195, 179, 255, 0.8) !important;
    box-shadow: 0 2px 10px rgba(110, 83, 190, 0.2);
    transform: translateY(-1px);
}

#spectre-mind-button.mind-active {
    background: linear-gradient(145deg, #51447d, #344568) !important;
    border-color: rgba(190, 178, 255, 0.7) !important;
    box-shadow: 0 1px 8px rgba(110, 95, 190, 0.2);
}

#spectre-mind-button.mind-active::before {
    content: "\2190";
    font-family: sans-serif;
    font-size: 19px;
    color: #ffffff;
}

#spectre-mind-button:focus-visible {
    outline: 2px solid #b8a9ff;
    outline-offset: 3px;
}



/* ============================================================
   SPECTRE DAILY INSPIRATION V1
   ============================================================ */

.daily-inspiration {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    max-width: min(500px, 52vw);
    padding: 10px 16px;
    border: 1px solid rgba(167, 139, 250, 0.22);
    border-radius: 12px;
    background: linear-gradient(
        120deg,
        rgba(139, 92, 246, 0.13),
        rgba(76, 65, 125, 0.08)
    );
}

.daily-inspiration-icon {
    flex: 0 0 auto;
    color: #c4b5fd;
    font-size: 27px;
    line-height: 1;
    text-shadow: 0 0 14px rgba(167, 139, 250, 0.3);
}

.daily-inspiration-copy {
    min-width: 0;
}

.daily-inspiration-label {
    display: block;
    margin-bottom: 3px;
    color: #c4b5fd;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.13em;
}

#daily-inspiration-quote {
    margin: 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 12px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

@media (max-width: 650px) {
    .daily-inspiration {
        gap: 7px;
        max-width: min(55vw, 280px);
        padding: 7px 9px;
    }

    .daily-inspiration-icon {
        font-size: 19px;
    }

    .daily-inspiration-label {
        font-size: 8px;
        letter-spacing: 0.08em;
    }

    #daily-inspiration-quote {
        font-size: 10px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}





/* SPECTRE INSPIRATION WELCOME V1 */
.welcome-screen .daily-inspiration {
    box-sizing: border-box;
    width: fit-content;
    max-width: min(100%, 520px);
    margin: -12px auto 28px;
    padding: 13px 18px;
    gap: 12px;
    justify-content: flex-start;
    text-align: left;
}

.welcome-screen .daily-inspiration-icon {
    font-size: 28px;
}

.welcome-screen .daily-inspiration-label {
    font-size: 10px;
}

.welcome-screen #daily-inspiration-quote {
    font-size: 13px;
    line-height: 1.5;
}

@media (max-width: 650px) {
    .welcome-screen .daily-inspiration {
        width: 100%;
        max-width: 360px;
        margin: 0 auto 24px;
        padding: 12px 14px;
        gap: 10px;
    }

    .welcome-screen .daily-inspiration-icon {
        font-size: 23px;
    }

    .welcome-screen .daily-inspiration-label {
        font-size: 9px;
        letter-spacing: 0.07em;
    }

    .welcome-screen #daily-inspiration-quote {
        font-size: 12px;
        line-height: 1.45;
        display: block;
        overflow: visible;
    }
}



/* SPECTRE STUDY PLAN — lectura clara y estilo tecnológico */
.study-plan-card {
    max-width: 920px;
    margin-inline: auto;
    border-color: rgba(124, 92, 255, 0.24);
    background: linear-gradient(155deg, rgba(20, 25, 48, 0.98), rgba(12, 16, 31, 0.98));
}

.study-plan-card-header h3 {
    margin-top: 5px;
    line-height: 1.25;
}

.study-plan-card-header p {
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.study-plan-days {
    gap: 16px;
}

.study-plan-day-card {
    padding: 20px;
    border-color: rgba(148, 163, 184, 0.18);
    background: rgba(255, 255, 255, 0.025);
}

.study-plan-day-card:hover {
    transform: translateY(-1px);
    border-color: rgba(124, 92, 255, 0.4);
}

.study-plan-day-title h4 {
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.study-plan-activities {
    display: grid;
    gap: 10px;
    margin: 0;
    padding-left: 22px;
    color: var(--text);
    line-height: 1.7;
}

.study-plan-activities li {
    padding-left: 3px;
}

.study-plan-activities li::marker {
    color: var(--violet-light);
}

.study-plan-note {
    margin: 12px 0 0;
    color: var(--text-muted);
    line-height: 1.65;
}

@media (max-width: 650px) {
    .study-plan-card {
        padding: 17px;
    }

    .study-plan-card-header {
        align-items: flex-start;
        gap: 12px;
    }

    .study-plan-card-icon {
        width: 42px;
        height: 42px;
        font-size: 20px;
    }

    .study-plan-day-card {
        padding: 15px;
    }

    .study-plan-activities {
        padding-left: 19px;
        line-height: 1.65;
    }
}

/* ============================================================
   SPECTRE CODE V1 — DARK UI
   ============================================================ */
.code-lab {
    padding: 28px;
    color: var(--text-color, #f2f2f7);
}

.code-lab-header,
.code-result-header,
.code-lab-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.code-lab-header {
    margin-bottom: 22px;
}

.code-lab-header h2 {
    margin: 4px 0 8px;
    font-size: clamp(25px, 4vw, 34px);
}

.code-lab-header p {
    color: var(--text-muted, #a5a5b5);
}

.code-lab-eyebrow {
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 700;
    color: var(--violet-light, #b9a2ff) !important;
}

.code-lab-card {
    max-width: 950px;
    margin: 0 auto;
    padding: 24px;
    border: 1px solid rgba(160, 130, 255, 0.24);
    border-radius: 18px;
    background: rgba(20, 20, 32, 0.92);
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.2);
}

.code-lab-card label {
    display: block;
    margin: 18px 0 8px;
    font-weight: 600;
}

.code-lab-card select,
.code-lab-card textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(160, 160, 190, 0.25);
    border-radius: 10px;
    padding: 12px 14px;
    background: #11111b;
    color: #f2f2f7;
    font: inherit;
}

.code-lab-card textarea {
    resize: vertical;
    line-height: 1.6;
}

.code-lab-card textarea:focus,
.code-lab-card select:focus {
    outline: 2px solid rgba(160, 130, 255, 0.65);
    outline-offset: 2px;
}

.code-lab-actions {
    justify-content: flex-start;
    margin-top: 20px;
}

#code-submit {
    border: 0;
    border-radius: 10px;
    padding: 12px 18px;
    background: linear-gradient(135deg, #8057e8, #5c43bc);
    color: white;
    font-weight: 700;
    cursor: pointer;
}

#code-submit:disabled {
    opacity: 0.6;
    cursor: wait;
}

.code-secondary-button {
    border: 1px solid rgba(160, 160, 190, 0.3);
    border-radius: 10px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.04);
    color: inherit;
    cursor: pointer;
}

#code-status {
    min-height: 22px;
    margin-top: 16px;
    color: var(--text-muted, #b6b6c8);
}

#code-result-panel {
    margin-top: 24px;
    border-top: 1px solid rgba(160, 160, 190, 0.2);
    padding-top: 18px;
}

#code-result {
    overflow: auto;
    max-height: 650px;
    padding: 18px;
    border-radius: 12px;
    background: #090910;
    color: #e5e5ef;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.65;
    font-family: Consolas, "Courier New", monospace;
    font-size: 13px;
}

.code-lab-note {
    color: var(--text-muted, #a5a5b5);
    font-size: 12px;
    line-height: 1.6;
}

@media (max-width: 650px) {
    .code-lab {
        padding: 14px;
    }

    .code-lab-card {
        padding: 16px;
    }
}

/* ============================================================
   SPECTRE CODE — RESULTADOS CON FORMATO Y SINTAXIS
   ============================================================ */

#code-result.code-result-content {
    display: block;
    max-height: 750px;
    overflow: auto;
    padding: 22px;
    border: 1px solid rgba(160, 130, 255, 0.22);
    border-radius: 14px;
    background: #10101a;
    color: #e7e7f2;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.75;
    overflow-wrap: anywhere;
}

#code-result.code-result-content > :first-child {
    margin-top: 0;
}

#code-result.code-result-content > :last-child {
    margin-bottom: 0;
}

#code-result.code-result-content h1,
#code-result.code-result-content h2,
#code-result.code-result-content h3,
#code-result.code-result-content h4 {
    margin: 24px 0 10px;
    color: #c7b5ff;
    line-height: 1.35;
}

#code-result.code-result-content h1 {
    font-size: 1.55rem;
}

#code-result.code-result-content h2 {
    font-size: 1.3rem;
}

#code-result.code-result-content h3 {
    font-size: 1.12rem;
}

#code-result.code-result-content p {
    margin: 12px 0;
}

#code-result.code-result-content ul,
#code-result.code-result-content ol {
    padding-left: 25px;
    margin: 12px 0;
}

#code-result.code-result-content li {
    margin: 5px 0;
}

#code-result.code-result-content blockquote {
    margin: 16px 0;
    padding: 10px 15px;
    border-left: 3px solid #9b7bff;
    border-radius: 0 8px 8px 0;
    background: rgba(155, 123, 255, 0.08);
    color: #c9c9dc;
}

#code-result.code-result-content :not(pre) > code {
    padding: 3px 6px;
    border: 1px solid rgba(160, 130, 255, 0.2);
    border-radius: 5px;
    background: #222132;
    color: #d5c7ff;
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.9em;
}

#code-result.code-result-content pre {
    margin: 18px 0;
    overflow: auto;
    border: 1px solid #303044;
    border-radius: 12px;
    background: #0b0b12;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

#code-result.code-result-content pre code {
    display: block;
    min-width: max-content;
    padding: 18px;
    background: transparent;
    color: #e6e6f0;
    font-family: Consolas, "Cascadia Code", "Courier New", monospace;
    font-size: 13px;
    line-height: 1.7;
    tab-size: 4;
}

#code-result.code-result-content a {
    color: #bba5ff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

#code-result.code-result-content hr {
    border: 0;
    border-top: 1px solid rgba(160, 160, 190, 0.22);
    margin: 22px 0;
}

#code-result.code-result-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
}

#code-result.code-result-content th,
#code-result.code-result-content td {
    padding: 8px 12px;
    border: 1px solid #343448;
    text-align: left;
}

#code-result.code-result-content th {
    background: #222132;
    color: #d5c7ff;
}

@media (max-width: 650px) {
    #code-result.code-result-content {
        padding: 14px;
        font-size: 14px;
    }

    #code-result.code-result-content pre code {
        padding: 13px;
        font-size: 12px;
    }
}


/* ============================================================
   SPECTRE THEMES V2 - TEMAS DESBLOQUEABLES CON EXP
   ============================================================ */

/* Cyberpunk: neón rosa y eléctrico */
body[data-spectre-theme="cyberpunk"] {
    background:
        radial-gradient(circle at 80% 10%, rgba(255, 0, 170, .22), transparent 35%),
        radial-gradient(circle at 15% 80%, rgba(0, 225, 255, .16), transparent 38%),
        #090713;
    --accent: #ff35c8;
    --accent-color: #ff35c8;
}

body[data-spectre-theme="cyberpunk"] .user-message .message-content {
    background: linear-gradient(135deg, rgba(255, 53, 200, .28), rgba(0, 225, 255, .18));
    border-color: rgba(255, 53, 200, .4);
}

body[data-spectre-theme="cyberpunk"] button:focus-visible,
body[data-spectre-theme="cyberpunk"] textarea:focus-visible,
body[data-spectre-theme="cyberpunk"] input:focus-visible {
    outline-color: #ff35c8;
}

.theme-preview-cyberpunk {
    background: linear-gradient(135deg, #090713, #571052 58%, #00e1ff);
}

/* Emerald: verde esmeralda */
body[data-spectre-theme="emerald"] {
    background:
        radial-gradient(circle at 75% 12%, rgba(16, 185, 129, .22), transparent 35%),
        radial-gradient(circle at 12% 85%, rgba(74, 222, 128, .12), transparent 38%),
        #06130f;
    --accent: #34d399;
    --accent-color: #34d399;
}

body[data-spectre-theme="emerald"] .user-message .message-content {
    background: linear-gradient(135deg, rgba(16, 185, 129, .27), rgba(74, 222, 128, .14));
    border-color: rgba(52, 211, 153, .4);
}

body[data-spectre-theme="emerald"] button:focus-visible,
body[data-spectre-theme="emerald"] textarea:focus-visible,
body[data-spectre-theme="emerald"] input:focus-visible {
    outline-color: #34d399;
}

.theme-preview-emerald {
    background: linear-gradient(135deg, #06130f, #075b42 58%, #4ade80);
}

/* Inferno: fuego */
body[data-spectre-theme="inferno"] {
    background:
        radial-gradient(circle at 75% 10%, rgba(249, 115, 22, .24), transparent 35%),
        radial-gradient(circle at 15% 85%, rgba(239, 68, 68, .16), transparent 38%),
        #170907;
    --accent: #fb923c;
    --accent-color: #fb923c;
}

body[data-spectre-theme="inferno"] .user-message .message-content {
    background: linear-gradient(135deg, rgba(249, 115, 22, .3), rgba(239, 68, 68, .18));
    border-color: rgba(251, 146, 60, .42);
}

body[data-spectre-theme="inferno"] button:focus-visible,
body[data-spectre-theme="inferno"] textarea:focus-visible,
body[data-spectre-theme="inferno"] input:focus-visible {
    outline-color: #fb923c;
}

.theme-preview-inferno {
    background: linear-gradient(135deg, #170907, #7f1d1d 58%, #fb923c);
}

/* Abyss: océano profundo */
body[data-spectre-theme="abyss"] {
    background:
        radial-gradient(circle at 75% 10%, rgba(14, 165, 233, .22), transparent 35%),
        radial-gradient(circle at 15% 85%, rgba(37, 99, 235, .16), transparent 38%),
        #030b19;
    --accent: #38bdf8;
    --accent-color: #38bdf8;
}

body[data-spectre-theme="abyss"] .user-message .message-content {
    background: linear-gradient(135deg, rgba(14, 165, 233, .27), rgba(37, 99, 235, .18));
    border-color: rgba(56, 189, 248, .4);
}

body[data-spectre-theme="abyss"] button:focus-visible,
body[data-spectre-theme="abyss"] textarea:focus-visible,
body[data-spectre-theme="abyss"] input:focus-visible {
    outline-color: #38bdf8;
}

.theme-preview-abyss {
    background: linear-gradient(135deg, #030b19, #0c376b 58%, #38bdf8);
}

/* Royal: púrpura y oro */
body[data-spectre-theme="royal"] {
    background:
        radial-gradient(circle at 75% 10%, rgba(168, 85, 247, .23), transparent 35%),
        radial-gradient(circle at 15% 85%, rgba(234, 179, 8, .12), transparent 38%),
        #10091d;
    --accent: #c084fc;
    --accent-color: #c084fc;
}

body[data-spectre-theme="royal"] .user-message .message-content {
    background: linear-gradient(135deg, rgba(168, 85, 247, .28), rgba(234, 179, 8, .14));
    border-color: rgba(192, 132, 252, .4);
}

body[data-spectre-theme="royal"] button:focus-visible,
body[data-spectre-theme="royal"] textarea:focus-visible,
body[data-spectre-theme="royal"] input:focus-visible {
    outline-color: #c084fc;
}

.theme-preview-royal {
    background: linear-gradient(135deg, #10091d, #51217a 58%, #eab308);
}

/* Frost: hielo */
body[data-spectre-theme="frost"] {
    background:
        radial-gradient(circle at 75% 10%, rgba(125, 211, 252, .23), transparent 35%),
        radial-gradient(circle at 15% 85%, rgba(96, 165, 250, .16), transparent 38%),
        #071321;
    --accent: #7dd3fc;
    --accent-color: #7dd3fc;
}

body[data-spectre-theme="frost"] .user-message .message-content {
    background: linear-gradient(135deg, rgba(125, 211, 252, .25), rgba(96, 165, 250, .17));
    border-color: rgba(125, 211, 252, .42);
}

body[data-spectre-theme="frost"] button:focus-visible,
body[data-spectre-theme="frost"] textarea:focus-visible,
body[data-spectre-theme="frost"] input:focus-visible {
    outline-color: #7dd3fc;
}

.theme-preview-frost {
    background: linear-gradient(135deg, #071321, #164e75 58%, #bae6fd);
}

/* Estado visual de botones de temas */
.theme-option:disabled {
    opacity: .65;
    cursor: wait;
}


/* SPECTRE_TOOLS_MENU_V1 */
.input-bottom {
    position: relative;
    flex-wrap: wrap;
}

.input-tools {
    flex: 1 1 100%;
}

.spectre-input-actions {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.spectre-tools-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    color: #fff;
    font-size: 27px;
    line-height: 1;
    cursor: pointer;
    transition: transform .18s ease, filter .18s ease;
}

.spectre-tools-plus:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.spectre-tools-menu[hidden] {
    display: none !important;
}

.spectre-tools-menu {
    position: absolute;
    z-index: 1000;
    left: 0;
    bottom: calc(100% + 10px);
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: min(290px, calc(100vw - 40px));
    padding: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #fff;
    color: #1f2937;
    box-shadow: 0 12px 36px rgba(15, 23, 42, .16);
}

.spectre-tools-menu .spectre-menu-tool {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    min-height: 43px;
    padding: 9px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #1f2937;
    font: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: none;
    transform: none;
}

.spectre-tools-menu .spectre-menu-tool:hover {
    background: #f3f4f6;
    color: #4338ca;
}

.spectre-tools-menu .spectre-menu-tool span:first-child {
    flex: 0 0 22px;
    text-align: center;
}

.spectre-tools-menu .spectre-menu-tool .spectre-tool-label,
.spectre-tools-menu .spectre-menu-tool span:last-child {
    display: inline !important;
    font-size: 14px;
    line-height: 1.4;
}

.spectre-input-actions #image-upload-button,
.spectre-input-actions #voice-button {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
    border-radius: 13px;
}

.spectre-input-actions #send-button {
    flex: 0 0 42px;
    margin-left: auto;
}

@media (max-width: 600px) {
    .spectre-tools-menu {
        width: min(270px, calc(100vw - 32px));
    }
}


/* SPECTRE - BOTONES DEL MENU + UNIFICADOS CON SALTAR INTRO */
.spectre-tools-menu .spectre-menu-tool {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 42px !important;
    height: auto !important;
    padding: 10px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;

    background: linear-gradient(
        135deg,
        rgba(80, 110, 255, 0.07),
        rgba(150, 80, 255, 0.05)
    ) !important;
    color: #e8eaff !important;
    border: 1px solid rgba(130, 145, 255, 0.25) !important;
    border-radius: 10px !important;

    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    text-align: left !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background .2s ease, border-color .2s ease,
                box-shadow .2s ease, color .2s ease !important;
}

.spectre-tools-menu .spectre-menu-tool:hover {
    background: linear-gradient(
        135deg,
        rgba(80, 110, 255, 0.16),
        rgba(150, 80, 255, 0.12)
    ) !important;
    color: #ffffff !important;
    border-color: rgba(150, 160, 255, 0.65) !important;
    box-shadow: 0 0 14px rgba(110, 100, 255, 0.13) !important;
}

.spectre-tools-menu .spectre-menu-tool:active {
    transform: scale(0.98) !important;
}

.spectre-tools-menu .spectre-menu-tool:focus-visible {
    outline: 2px solid #9b8cff !important;
    outline-offset: 2px !important;
}

.spectre-tools-menu .spectre-menu-tool span:first-child {
    flex: 0 0 22px !important;
    width: 22px !important;
    text-align: center !important;
}

.spectre-tools-menu .spectre-menu-tool span:last-child,
.spectre-tools-menu .spectre-menu-tool .spectre-tool-label {
    color: inherit !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}


/* SPECTRE - CORRECCION FONDO DEL MENU + */
#spectre-tools-menu.spectre-tools-menu {
    background: linear-gradient(
        145deg,
        rgba(13, 17, 35, 0.98),
        rgba(25, 20, 49, 0.98)
    ) !important;
    background-color: #0d1123 !important;
    color: #e8eaff !important;
    border: 1px solid rgba(130, 145, 255, 0.3) !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

#spectre-tools-menu.spectre-tools-menu .spectre-menu-tool {
    background: linear-gradient(
        135deg,
        rgba(80, 110, 255, 0.07),
        rgba(150, 80, 255, 0.05)
    ) !important;
    color: #e8eaff !important;
}

#spectre-tools-menu.spectre-tools-menu .spectre-menu-tool:hover {
    background: linear-gradient(
        135deg,
        rgba(80, 110, 255, 0.2),
        rgba(150, 80, 255, 0.15)
    ) !important;
    color: #ffffff !important;
}


/* SPECTRE - FIX ANCHO BOTON MIND EN MENU + */
#spectre-tools-menu #spectre-mind-button {
    display: flex !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    min-height: 42px !important;
    padding: 10px 12px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    flex: 1 1 100% !important;
    align-self: stretch !important;
}

#spectre-tools-menu #spectre-mind-button span,
#spectre-tools-menu #spectre-mind-button .spectre-tool-label {
    flex-shrink: 0 !important;
}


/* SPECTRE - ORGANIZACION DE LA BARRA SUPERIOR */
.topbar-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
}

#suggestions-button {
    order: 1 !important;
    flex: 0 0 auto !important;
}

#new-chat {
    order: 2 !important;
    flex: 0 0 auto !important;
}

#search-history-button {
    order: 3 !important;
    flex: 0 0 auto !important;
}

.topbar-right .profile-wrapper {
    order: 4 !important;
    flex: 0 0 auto !important;
    margin-left: 4px !important;
}


/* SPECTRE — REDISEÑO DE LA BARRA SUPERIOR */
.topbar {
    gap: 16px;
}

.topbar-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin-left: auto !important;
    flex: 0 1 auto !important;
    min-width: 0;
}

#new-chat { order: 1 !important; }
#suggestions-button { order: 2 !important; }
#search-history-button { order: 3 !important; }
.topbar-right .profile-wrapper { order: 4 !important; }

.spectre-share-conversation {
    order: 5 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 40px !important;
    padding: 0 15px !important;
    margin-left: 2px !important;
    border: 1px solid #dbe3ee !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: #263449 !important;
    font: inherit !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05) !important;
    transition: background .18s ease, border-color .18s ease,
                box-shadow .18s ease, transform .18s ease !important;
}

.spectre-share-conversation::before {
    content: "\2197";
    font-size: 17px;
    line-height: 1;
}

.spectre-share-conversation:hover {
    background: #f4f7fb !important;
    border-color: #b8c7dc !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.09) !important;
}

@media (max-width: 850px) {
    .topbar {
        gap: 8px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .topbar-right {
        gap: 5px !important;
    }

    .spectre-share-conversation {
        min-height: 38px !important;
        padding: 0 10px !important;
        font-size: 12px !important;
    }
}

@media (max-width: 600px) {
    .topbar-right {
        gap: 4px !important;
    }

    .spectre-share-conversation {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 !important;
        margin-left: 0 !important;
        font-size: 0 !important;
        border-radius: 11px !important;
    }

    .spectre-share-conversation::before {
        font-size: 18px;
    }
}
/* FIN REDISEÑO DE LA BARRA SUPERIOR */


/* SPECTRE — BOTÓN COPIAR RESPUESTA */
.message.assistant-message > .spectre-copy-response {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin: 8px 0 0;
    padding: 5px 8px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: #7b8492;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.message.assistant-message > .spectre-copy-response:hover {
    background: #f0f2f5;
    color: #303846;
}

.message.assistant-message > .spectre-copy-response:focus-visible {
    outline: 2px solid #6478f5;
    outline-offset: 2px;
}

/* SPECTRE — FIX BOTÓN COPIAR: EVITAR ANCHO COMPLETO */
.message.assistant-message > button.spectre-copy-response {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-self: flex-start !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: max-content !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 5px 8px !important;
    margin: 8px 0 0 !important;
    box-sizing: border-box !important;
    border-radius: 7px !important;
    white-space: nowrap !important;
}


/* SPECTRE_PRISM_V1 */
body[data-spectre-theme="prism"] {
    background:
        radial-gradient(ellipse at 12% 8%, rgba(139, 92, 246, .24), transparent 38%),
        radial-gradient(ellipse at 88% 18%, rgba(59, 130, 246, .20), transparent 36%),
        radial-gradient(ellipse at 55% 95%, rgba(45, 212, 191, .13), transparent 42%),
        #090b1b !important;
    background-attachment: fixed !important;
    --accent: #a78bfa;
    --accent-color: #a78bfa;
    --prism-violet: #a78bfa;
    --prism-blue: #60a5fa;
    --prism-cyan: #5eead4;
}

body[data-spectre-theme="prism"] .user-message .message-content {
    background: linear-gradient(125deg, rgba(139, 92, 246, .30), rgba(59, 130, 246, .22), rgba(45, 212, 191, .15)) !important;
    border: 1px solid rgba(167, 139, 250, .55) !important;
    box-shadow: 0 0 22px rgba(139, 92, 246, .10);
}

body[data-spectre-theme="prism"] button:focus-visible,
body[data-spectre-theme="prism"] textarea:focus-visible,
body[data-spectre-theme="prism"] input:focus-visible {
    outline: 2px solid #a78bfa;
    outline-offset: 2px;
}

body[data-spectre-theme="prism"] button,
body[data-spectre-theme="prism"] .message-content,
body[data-spectre-theme="prism"] textarea,
body[data-spectre-theme="prism"] input,
body[data-spectre-theme="prism"] aside,
body[data-spectre-theme="prism"] header,
body[data-spectre-theme="prism"] nav,
body[data-spectre-theme="prism"] [class*="panel"],
body[data-spectre-theme="prism"] [class*="sidebar"],
body[data-spectre-theme="prism"] [class*="composer"] {
    transition:
        background-color .45s ease,
        background-image .45s ease,
        border-color .45s ease,
        box-shadow .45s ease,
        color .45s ease,
        outline-color .45s ease;
}

body[data-spectre-theme="prism"] button:hover {
    border-color: rgba(167, 139, 250, .65);
    box-shadow: 0 0 16px rgba(139, 92, 246, .12);
}

.theme-preview-prism {
    background: linear-gradient(125deg, #090b1b 8%, #8b5cf6 40%, #3b82f6 70%, #5eead4) !important;
}

@media (prefers-reduced-motion: reduce) {
    body[data-spectre-theme="prism"] button,
    body[data-spectre-theme="prism"] .message-content,
    body[data-spectre-theme="prism"] textarea,
    body[data-spectre-theme="prism"] input,
    body[data-spectre-theme="prism"] aside,
    body[data-spectre-theme="prism"] header,
    body[data-spectre-theme="prism"] nav,
    body[data-spectre-theme="prism"] [class*="panel"],
    body[data-spectre-theme="prism"] [class*="sidebar"],
    body[data-spectre-theme="prism"] [class*="composer"] {
        transition: none !important;
    }
}
/* END SPECTRE_PRISM_V1 */
/* =========================================================
   SPECTRE PREMIUM — MODAL DE CANJE V1
========================================================= */
.premium-redeem-modal {
    position: fixed;
    inset: 0;
    z-index: 100001;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow-y: auto;
    box-sizing: border-box;
    background: radial-gradient(circle at center,
        rgba(67, 85, 255, 0.14), rgba(3, 7, 18, 0.88));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.premium-redeem-card {
    position: relative;
    width: min(460px, 100%);
    box-sizing: border-box;
    margin: auto;
    padding: 32px;
    border: 1px solid rgba(100, 120, 255, 0.25);
    border-radius: 22px;
    background: linear-gradient(145deg,
        rgba(15, 22, 45, 0.99), rgba(8, 12, 28, 0.99));
    box-shadow: 0 0 50px rgba(60, 80, 255, 0.18),
        0 25px 80px rgba(0, 0, 0, 0.5);
    color: #fff;
}

.premium-redeem-close {
    position: absolute;
    top: 14px;
    right: 16px;
    display: flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.75);
    font-size: 25px;
    cursor: pointer;
}

.premium-redeem-close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.premium-redeem-icon {
    display: flex;
    width: 54px;
    height: 54px;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border: 1px solid rgba(120, 130, 255, 0.25);
    border-radius: 16px;
    background: linear-gradient(135deg,
        rgba(80, 100, 255, 0.2), rgba(140, 70, 255, 0.2));
    font-size: 25px;
}

.premium-redeem-label {
    color: #8d9cff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}

.premium-redeem-card h2 {
    margin: 8px 0 10px;
    color: #fff;
    font-size: 27px;
}

.premium-redeem-description {
    margin: 0 0 24px;
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.6;
}

.premium-redeem-field {
    margin-bottom: 16px;
}

.premium-redeem-field label {
    display: block;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    font-weight: 600;
}

.premium-redeem-field input {
    display: block;
    width: 100%;
    height: 48px;
    box-sizing: border-box;
    padding: 0 14px;
    border: 1px solid rgba(120, 135, 255, 0.22);
    border-radius: 12px;
    outline: none;
    background: rgba(255, 255, 255, 0.045);
    color: #fff;
    font: inherit;
}

.premium-redeem-field input::placeholder {
    color: rgba(255, 255, 255, 0.38);
}

.premium-redeem-field input:focus {
    border-color: rgba(110, 125, 255, 0.75);
    box-shadow: 0 0 0 3px rgba(80, 100, 255, 0.12);
}

.premium-redeem-benefits {
    display: grid;
    gap: 9px;
    margin: 18px 0;
    padding: 15px;
    border: 1px solid rgba(120, 135, 255, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.035);
    color: rgba(255, 255, 255, 0.82);
    font-size: 13px;
}

.premium-redeem-status {
    display: none;
    margin: 12px 0;
    padding: 11px 12px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.5;
}

.premium-redeem-status.is-visible {
    display: block;
}

.premium-redeem-status.is-error {
    border: 1px solid rgba(255, 100, 120, 0.25);
    background: rgba(255, 70, 90, 0.09);
    color: #ffb4bd;
}

.premium-redeem-status.is-success {
    border: 1px solid rgba(70, 210, 140, 0.25);
    background: rgba(70, 210, 140, 0.09);
    color: #9ce8c0;
}

.premium-redeem-submit {
    display: flex;
    width: 100%;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 17px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #5367ff, #7651e8);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.premium-redeem-submit:hover:not(:disabled) {
    transform: translateY(-1px);
}

.premium-redeem-submit:disabled {
    cursor: wait;
    opacity: 0.65;
}

@media (max-width: 600px) {
    .premium-redeem-modal {
        padding: 14px;
    }

    .premium-redeem-card {
        padding: 26px 20px;
    }
}