@import '_content/Ubot.UI/Ubot.UI.k33ue02wqa.bundle.scp.css';

/* /Components/AIBubble/Content/AnswerChat.razor.rz.scp.css */
/* Venían en un <style> dentro del .razor: una copia en el DOM por cada burbuja de
   validación, y los selectores sueltos sobre el resto de la app. Scoped se emiten una
   vez, dentro de Ubot.Admision.styles.css. */

/* Respuestas */
.respuestas-container[b-3xygl83q3u] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.respuesta-box[b-3xygl83q3u] {
    border-radius: var(--app-border-radius);
    padding: 15px;
    box-shadow: 0px 0px 5px var(--mud-palette-gray-light);
    transition: all 0.3s ease;
}

.respuesta-box.correct[b-3xygl83q3u] {
    background-color: var(--mud-palette-success);
    border: 1px solid var(--mud-palette-success);
    box-shadow: 0px 0px 7px var(--mud-palette-success);
    color: var(--mud-palette-dark);
}

.respuesta-box.incorrect[b-3xygl83q3u] {
    background-color: var(--mud-palette-error);
    border: 1px solid var(--mud-palette-error);
    box-shadow: 0px 0px 2px var(--mud-palette-error);
    color: var(--mud-palette-black);
}

.respuesta-label[b-3xygl83q3u] {
    font-weight: bold;
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.respuesta-text[b-3xygl83q3u] {
    font-size: 1rem;
}

/* Secciones colapsables */
.subtitle[b-3xygl83q3u] {
    font-size: 1.2rem;
    font-weight: bold;
}

.seccion-header[b-3xygl83q3u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-top: 1px dashed white;
    margin-top: 10px;
}

.seccion-wrapper[b-3xygl83q3u] {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s ease;
}

.seccion-wrapper.show[b-3xygl83q3u] {
    grid-template-rows: 1fr;
}

.seccion-content[b-3xygl83q3u] {
    overflow: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease 0.1s,
                transform 0.3s ease 0.1s;
}

.seccion-wrapper.show .seccion-content[b-3xygl83q3u] {
    opacity: 1;
    transform: translateY(0);
}

/* Tips específicos */
.tip-item[b-3xygl83q3u] {
    margin-bottom: 15px;
}

.tip-item:last-child[b-3xygl83q3u] {
    margin-bottom: 0;
}

.tip-label[b-3xygl83q3u] {
    font-weight: bold;
    margin-bottom: 5px;
    color: var(--mud-palette-primary);
}
/* /Components/AIBubble/Content/QuestionChat.razor.rz.scp.css */
/* Estos estilos vivían en un <style> dentro del .razor, así que el navegador recibía una
   copia por cada burbuja de pregunta en pantalla y los selectores se escapaban al resto
   de la app. Como archivo scoped se emiten una sola vez, dentro de Ubot.Admision.styles.css,
   que el publish ya versiona. */

.question[b-lcym859q84] {
    text-align: center;
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1.45;
    text-wrap: balance;
}

.question-meta[b-lcym859q84] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    row-gap: 0.25rem;
    margin-bottom: 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
}

/* El punto medio vive en el CSS, así los campos ausentes no dejan separador. */
.question-meta > * + *[b-lcym859q84]::before {
    content: "·";
    margin: 0 0.5rem;
    opacity: 0.5;
}

.question-meta-materia[b-lcym859q84] {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.question-meta-dificultad[b-lcym859q84] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

/* Tres barras crecientes: la dificultad se lee de un vistazo sin gastar color,
   que en esta app está reservado a lo que el estudiante se gana. La etiqueta de
   texto va al lado, así el nivel nunca depende solo de la forma. */
.dificultad-medidor[b-lcym859q84] {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 0.625rem;
}

.dificultad-medidor > span[b-lcym859q84] {
    width: 3px;
    border-radius: 1px;
    background-color: currentColor;
    opacity: 0.25;
}

.dificultad-medidor > span:nth-child(1)[b-lcym859q84] { height: 40%; }
.dificultad-medidor > span:nth-child(2)[b-lcym859q84] { height: 70%; }
.dificultad-medidor > span:nth-child(3)[b-lcym859q84] { height: 100%; }
.dificultad-medidor > span.on[b-lcym859q84] { opacity: 1; }

.item-container[b-lcym859q84] {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    margin: 15px 0;
}

.item-option[b-lcym859q84] {
    min-height: 44px;
    flex-basis: 40%;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s ease-out, color 0.2s ease-out, transform 0.2s ease-out;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 5px;
    position: relative;
    overflow-wrap: anywhere;
}

/* El texto de la opción ya no es un nodo suelto sino un elemento flex: sin min-width
   se niega a encogerse y las opciones largas desbordan la tarjeta. */
.option-text[b-lcym859q84] {
    min-width: 0;
}

.subtitle[b-lcym859q84] {
    font-size: 1.2rem;
    font-weight: bold;
}

.item-option.correct[b-lcym859q84]  {
    color: var(--mud-palette-success-lighten);
}

.item-option.correct .option-letter[b-lcym859q84] {
    background-color: var(--mud-palette-success);
    color: var(--mud-palette-black);
}

.item-option.correct .option-check[b-lcym859q84]{
    opacity: 1;
}

.item-option.incorrect[b-lcym859q84] {
    color: var(--mud-palette-error-darken);
}

.item-option.incorrect .option-letter[b-lcym859q84] {
    background-color: var(--mud-palette-error-darken);
    color: var(--mud-palette-black);
}

.item-option.incorrect .option-cross[b-lcym859q84]{
    opacity: 1;
}

.explicacion-header[b-lcym859q84] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-top: 1px dashed var(--mud-palette-divider);
    margin-top: 10px;
}

.explicacion-wrapper[b-lcym859q84] {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s ease;
}

.explicacion-wrapper.show[b-lcym859q84] {
    grid-template-rows: 1fr;
}

.explicacion-content[b-lcym859q84] {
    overflow: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease 0.1s,
                transform 0.3s ease 0.1s;
}

.explicacion-wrapper.show .explicacion-content[b-lcym859q84] {
    opacity: 1;
    transform: translateY(0);
}

.option-letter[b-lcym859q84] {
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) 45%, transparent);
    padding: 3px;
    border-radius: 100px;
    min-width: 30px;
    min-height: 30px;
    position: relative;
    transition: background-color 0.2s ease-out, transform 0.2s ease-out, border-color 0.2s ease-out;
    max-height: 30px;
    max-width: 30px;
    align-content: center;
    text-align: center;
}

.option-selected[b-lcym859q84] {
    position: absolute;
    color: var(--mud-palette-text-primary);
    transform: translate(-5px, -35px);
    font-size: 2rem;
    font-style: italic;
    font-weight: 900;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.item-option.selected .option-selected[b-lcym859q84]{
    opacity: 1;
}
/* /Components/Barajas/BarajaCard.razor.rz.scp.css */
/* Mismo lenguaje visual que .set-card en FlipCards: tile de icono, cuerpo y pie separado por línea. */
.baraja-card[b-iaovlo1g49] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    padding: 1rem;
    height: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    border-radius: var(--app-border-radius);
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    box-shadow: var(--app-box-shadow-sm);
    transition: transform .15s ease, box-shadow .15s ease;
}

.baraja-card:hover[b-iaovlo1g49] {
    transform: translateY(-2px);
    box-shadow: var(--app-box-shadow-hover);
}

.baraja-card-body[b-iaovlo1g49] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.baraja-card-title[b-iaovlo1g49] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.baraja-card-icon[b-iaovlo1g49] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--app-border-radius-sm);
    background-color: var(--mud-palette-primary-hover);
    color: var(--mud-palette-primary);
}

.baraja-card-title h4[b-iaovlo1g49] {
    margin: 0;
    font-size: 1rem;
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
}

.baraja-card-desc[b-iaovlo1g49] {
    margin: 0;
    font-size: .875rem;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.baraja-card-author[b-iaovlo1g49] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    width: fit-content;
    max-width: 100%;
    border-radius: 999px;
    padding: 2px 8px 2px 2px;
    transition: background-color .15s ease;
}

.baraja-card-author:hover[b-iaovlo1g49] {
    background-color: var(--mud-palette-action-default-hover);
}

.baraja-card-author-name[b-iaovlo1g49] {
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.baraja-card-meta[b-iaovlo1g49] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.baraja-card-stat[b-iaovlo1g49] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
}

.baraja-card-actions[b-iaovlo1g49] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--mud-palette-divider);
}

.baraja-card-actions-row[b-iaovlo1g49] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.baraja-card-publish-switch[b-iaovlo1g49] {
    margin: 0;
}

.baraja-card-actions-right[b-iaovlo1g49] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.baraja-card-estado[b-iaovlo1g49] {
    margin-left: auto;
}

.baraja-card-estado.is-success[b-iaovlo1g49] {
    color: var(--mud-palette-success);
}

.baraja-card-estado.is-warning[b-iaovlo1g49] {
    color: var(--mud-palette-warning);
}

.baraja-card-estado.is-error[b-iaovlo1g49] {
    color: var(--mud-palette-error);
}
/* /Components/Barajas/ComunidadPanel.razor.rz.scp.css */
.comunidad-toolbar[b-x7j2oaf1m5] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.comunidad-search[b-x7j2oaf1m5] {
    flex: 1 1 260px;
    min-width: 0;
}

.comunidad-filter[b-x7j2oaf1m5] {
    flex: 0 1 200px;
    min-width: 160px;
}

.comunidad-orden[b-x7j2oaf1m5] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.comunidad-cargar-mas[b-x7j2oaf1m5] {
    display: flex;
    justify-content: center;
    padding: 20px 0 8px;
}

.barajas-grid[b-x7j2oaf1m5] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.barajas-empty[b-x7j2oaf1m5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    text-align: center;
}

.barajas-empty p[b-x7j2oaf1m5] {
    margin: 0;
    max-width: 420px;
    color: var(--mud-palette-text-secondary);
}

@media (max-width: 600px) {
    .barajas-grid[b-x7j2oaf1m5] {
        grid-template-columns: 1fr;
    }

    .comunidad-filter[b-x7j2oaf1m5] {
        flex: 1 1 100%;
    }
}
/* /Components/Barajas/EditarBarajaDialog.razor.rz.scp.css */
.editar-baraja[b-twauggf9d1] {
    display: flex;
    flex-direction: column;
}

.editar-baraja-cards-head[b-twauggf9d1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.editar-baraja-cards[b-twauggf9d1] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 45vh;
    overflow-y: auto;
    padding-right: 4px;
}

.editar-baraja-card[b-twauggf9d1] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 10px;
    background-color: var(--mud-palette-background-gray);
}

.editar-baraja-card-head[b-twauggf9d1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.editar-baraja-card-num[b-twauggf9d1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: .75rem;
    font-weight: 600;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.editar-baraja-card-tools[b-twauggf9d1] {
    display: flex;
    align-items: center;
    gap: 2px;
}
/* /Components/Barajas/MisBarajasPanel.razor.rz.scp.css */
.barajas-grid[b-dcphw4g3s7] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.barajas-empty[b-dcphw4g3s7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    text-align: center;
}

.barajas-empty p[b-dcphw4g3s7] {
    margin: 0;
    max-width: 420px;
    color: var(--mud-palette-text-secondary);
}

@media (max-width: 600px) {
    .barajas-grid[b-dcphw4g3s7] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Chat/ChatInput.razor.rz.scp.css */
.mic-button[b-fw2c9wgoyn] {
    transition: all 0.2s ease-in-out;
}

.mic-button.recording[b-fw2c9wgoyn] {
    animation: pulse-recording-b-fw2c9wgoyn 0.6s ease-in-out infinite;
}

.mic-button.transcribing[b-fw2c9wgoyn] {
    animation: pulse-transcribing-b-fw2c9wgoyn 0.8s ease-in-out infinite;
}

@keyframes pulse-recording-b-fw2c9wgoyn {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes pulse-transcribing-b-fw2c9wgoyn {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.mic-button:hover:not(:disabled)[b-fw2c9wgoyn] {
    transform: scale(1.1);
}

.mic-button:disabled[b-fw2c9wgoyn] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* /Components/Chat/ChatSessionList.razor.rz.scp.css */
.sessions-list[b-qm2hfxaix1] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.navbar-status-text[b-qm2hfxaix1] {
    color: var(--mud-palette-text-primary);
    white-space: pre-line;
}

/* Session Item */
.session-item[b-qm2hfxaix1] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem;
    border-radius: var(--app-border-radius);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--mud-palette-background-gray);
}

.session-item-deleting[b-qm2hfxaix1] {
    animation: sessionSlideOut-b-qm2hfxaix1 0.3s ease-in forwards;
    pointer-events: none;
    transition: none !important;
    overflow: hidden;
}

@keyframes sessionSlideOut-b-qm2hfxaix1 {
    0% {
        opacity: 1;
        max-height: 80px;
        transform: translateX(0);
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        margin-bottom: 0;
    }

    60% {
        opacity: 0.2;
        transform: translateX(50px);
        max-height: 80px;
    }

    100% {
        opacity: 0;
        max-height: 0;
        transform: translateX(60px);
        padding-top: 0;
        padding-bottom: 0;
        margin-bottom: -0.5rem;
    }
}

@media (hover: hover) {
    .session-item:hover[b-qm2hfxaix1] {
        background: var(--mud-palette-action-default-hover);
        border-color: var(--mud-palette-divider);
        transform: translateX(4px);
    }
}

.session-item.active[b-qm2hfxaix1] {
    background: rgba(102, 179, 255, 0.15) !important;
    border-color: rgba(102, 179, 255, 0.3) !important;
    box-shadow: var(--app-box-shadow),
        inset 0 0 20px rgba(102, 179, 255, 0.05);
}

.session-item.active[b-qm2hfxaix1]  .session-title {
    color: var(--mud-palette-primary) !important;
    font-weight: 600;
}

.session-item.active .session-icon[b-qm2hfxaix1] {
    background: color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
    color: var(--mud-palette-primary);
}

/* Session Icon */
.session-icon[b-qm2hfxaix1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--app-border-radius-sm);
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-secondary);
    flex-shrink: 0;
    margin-top: 2px;
}

/* Session Info */
.session-info[b-qm2hfxaix1] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

[b-qm2hfxaix1] .session-title {
    color: var(--mud-palette-text-primary) !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--font-nav-item) !important;
}

[b-qm2hfxaix1] .session-meta {
    color: var(--mud-palette-text-secondary) !important;
    font-size: 0.8rem !important;
    margin-top: 3px;
}

.session-content[b-qm2hfxaix1] {
    display: flex;
    width: 100%;
    gap: 0.75rem;
}

/* Session Actions */
.session-actions[b-qm2hfxaix1] {
    display: none;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
}

@media (hover: hover) {
    .session-item:hover .session-actions[b-qm2hfxaix1] {
        display: flex;
        opacity: 1;
    }
}

.session-item.is-pinned .session-actions[b-qm2hfxaix1] {
    display: flex;
    opacity: 1;
}

@media (hover: hover) {
    .session-item.is-pinned:not(:hover) .session-actions .mud-icon-button:not(.pin-btn)[b-qm2hfxaix1] {
        display: none !important;
    }
}

@media (hover: none) {
    .session-actions[b-qm2hfxaix1] {
        display: flex;
        opacity: 1;
    }
}

.session-actions .mud-icon-button[b-qm2hfxaix1] {
    width: 34px !important;
    height: 34px !important;
}

/* Session Edit */
.session-edit-container[b-qm2hfxaix1] {
    flex: 1;
}

.session-edit-field[b-qm2hfxaix1] {
    margin: 0 !important;
}

.session-edit-field input[b-qm2hfxaix1] {
    font-size: 0.875rem !important;
    padding: 0.5rem !important;
}

/* Group Labels for Pinned/Recent Chats */
.sessions-group-label[b-qm2hfxaix1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 0.25rem;
}

.sessions-group-label.recent-group[b-qm2hfxaix1] {
    border-top: 1px solid var(--mud-palette-divider);
    margin-top: 0.5rem;
    padding-top: 0.5rem;
}

.sessions-group-label .group-icon[b-qm2hfxaix1] {
    font-size: 0.9rem;
    color: var(--mud-palette-text-secondary);
}

.sessions-group-label[b-qm2hfxaix1]  .mud-typography-overline {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
}
/* /Components/Chat/ChatTitle.razor.rz.scp.css */
.chat-title-floating[b-gwfmsi6jw2] {
    position: absolute;
    top: calc(1rem + env(safe-area-inset-top, 0px));
    left: 0;
    width: 100%;
    z-index: 10;
    pointer-events: auto;
    transition: transform 0.3s ease-in-out;
}

.chat-title-floating[data-has-session="false"][b-gwfmsi6jw2] {
    transform: translateY(-150%);
}

.chat-title-floating[data-has-session="true"][b-gwfmsi6jw2] {
    transform: translateY(0%);
}

.chat-title-banner[b-gwfmsi6jw2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    margin-left: auto;
    margin-right: auto;
    background: color-mix(in srgb, var(--mud-palette-surface) 85%, transparent);
    border: 1px solid rgba(102, 179, 255, 0.2);
    border-radius: var(--app-border-radius);
    backdrop-filter: blur(4px);
    position: sticky;
    top: 0;
    z-index: 5;
    max-width: 800px;
    width: calc(100% - 2rem);
    overflow: hidden;
}

@media (max-width: 650px) {
    .chat-title-banner[b-gwfmsi6jw2] {
        flex-direction: column;
    }
}


.chat-title-content[b-gwfmsi6jw2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

[b-gwfmsi6jw2] .chat-title-icon {
    color: #66b3ff;
    flex-shrink: 0;
}

[b-gwfmsi6jw2] .chat-title-text {
    font-weight: 600 !important;
    color: var(--mud-palette-text-primary) !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/Dialogs/FeedbackQuizDialog.razor.rz.scp.css */
.quiz[b-siz9xpsnv6] {
    display: flex;
    flex-direction: column;
    padding: 0.25rem 0.25rem 0;
}

.quiz__step[b-siz9xpsnv6] {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

[b-siz9xpsnv6] .quiz__progress {
    margin-top: 0.5rem;
    border-radius: 100px;
}

.quiz__title[b-siz9xpsnv6] {
    margin: 0.75rem 0 0;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--mud-palette-text-primary);
    text-wrap: balance;
}

.quiz__subtitle[b-siz9xpsnv6] {
    margin: 0.35rem 0 0;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
    text-wrap: pretty;
}

.quiz__options[b-siz9xpsnv6] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

[b-siz9xpsnv6] .quiz__option {
    margin: 0;
    padding: 0.55rem 0.75rem;
    border-radius: var(--app-border-radius-sm);
    border: 1px solid var(--app-border);
    background: var(--mud-palette-surface);
    transition: border-color 0.2s ease-out, background-color 0.2s ease-out;
}

[b-siz9xpsnv6] .quiz__option:hover {
    border-color: var(--mud-palette-primary);
}

.quiz__option-row[b-siz9xpsnv6] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

[b-siz9xpsnv6] .quiz__option-icon {
    font-size: 1.1rem;
    color: var(--mud-palette-primary);
}

.quiz__hint[b-siz9xpsnv6] {
    margin: 0.75rem 0 0;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
}

.quiz__scale[b-siz9xpsnv6] {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

[b-siz9xpsnv6] .quiz__scale-btn {
    flex: 1 1 0;
    min-width: 2.75rem;
    padding-left: 0;
    padding-right: 0;
}

.quiz__actions[b-siz9xpsnv6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
}

.quiz__actions[b-siz9xpsnv6]  .quiz__cta {
    border-radius: var(--app-border-radius);
    font-weight: 700;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}

.quiz__secondary[b-siz9xpsnv6] {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.25rem;
}

@media (prefers-reduced-motion: reduce) {
    [b-siz9xpsnv6] .quiz__option {
        transition: none;
    }
}
/* /Components/Dialogs/PremiumTeaserDialog.razor.rz.scp.css */
.teaser[b-p01bmbp3oq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0.5rem 0.25rem 0.25rem;
}

.teaser__crest[b-p01bmbp3oq] {
    position: relative;
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: 0.5rem;
}

.teaser__glow[b-p01bmbp3oq] {
    position: absolute;
    inset: -30%;
    pointer-events: none;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--mud-palette-warning) 45%, transparent),
        transparent 65%);
    animation: teaser-breathe-b-p01bmbp3oq 3.2s ease-in-out infinite;
}

[b-p01bmbp3oq] .teaser__icon {
    position: relative;
    font-size: 3rem;
    color: var(--mud-palette-warning);
    filter: drop-shadow(0 2px 8px color-mix(in srgb, var(--mud-palette-warning) 50%, transparent));
}

.teaser__title[b-p01bmbp3oq] {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--mud-palette-text-primary);
    text-wrap: balance;
}

.teaser__subtitle[b-p01bmbp3oq] {
    margin: 0.35rem 0 0;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
    max-width: 34ch;
    text-wrap: pretty;
}

.teaser__benefits[b-p01bmbp3oq] {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    width: 100%;
    text-align: left;
}

.teaser__benefit[b-p01bmbp3oq] {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--mud-palette-text-primary);
}

[b-p01bmbp3oq] .teaser__check {
    flex-shrink: 0;
    margin-top: 0.08rem;
    font-size: 1.1rem;
    color: var(--mud-palette-warning);
}

.teaser__price[b-p01bmbp3oq] {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    margin-top: 1rem;
}

.teaser__price-value[b-p01bmbp3oq] {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--mud-palette-text-primary);
}

.teaser__price-period[b-p01bmbp3oq] {
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
}

@keyframes teaser-breathe-b-p01bmbp3oq {
    0%, 100% { opacity: 0.65; transform: scale(0.96); }
    50%      { opacity: 1;    transform: scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
    .teaser__glow[b-p01bmbp3oq] { animation: none; }
}
/* /Components/Dialogs/PremiumWelcomeDialog.razor.rz.scp.css */
/* ==========================================================================
   Premium Welcome Dialog — celebration moment, reward-gold voice
   Tokens only; works in light and dark themes.
   MudBlazor components (MudIcon/MudText/MudButton) need ::deep because CSS
   isolation only scopes plain HTML elements.
   ========================================================================== */

.pw-content[b-en1n69gj67] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem 0.5rem 0.25rem;
}

/* --- Animated badge ------------------------------------------------------ */

.pw-badge[b-en1n69gj67] {
    position: relative;
    width: 108px;
    height: 108px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.pw-diamond-wrapper[b-en1n69gj67] {
    position: relative;
    z-index: 2;
    width: 84px;
    height: 84px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--mud-palette-warning) 16%, var(--mud-palette-surface));
    border: 1px solid color-mix(in srgb, var(--mud-palette-warning) 45%, transparent);
    animation: pw-pop-b-en1n69gj67 0.55s cubic-bezier(0.22, 1.4, 0.36, 1) both;
}

.pw-diamond-wrapper[b-en1n69gj67]  .pw-diamond {
    font-size: 2.75rem;
    width: 2.75rem;
    height: 2.75rem;
    color: var(--mud-palette-warning);
    animation: pw-float-b-en1n69gj67 2.6s ease-in-out 0.6s infinite;
}

/* Expanding celebration rings */
.pw-ring[b-en1n69gj67] {
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    border: 2px solid var(--mud-palette-warning);
    opacity: 0;
    z-index: 1;
    animation: pw-ring-b-en1n69gj67 1.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.pw-ring-1[b-en1n69gj67] { animation-delay: 0.25s; }
.pw-ring-2[b-en1n69gj67] { animation-delay: 0.55s; }

/* Twinkling sparks around the badge */
.pw-badge[b-en1n69gj67]  .pw-spark {
    position: absolute;
    font-size: 1.1rem;
    width: 1.1rem;
    height: 1.1rem;
    color: var(--mud-palette-warning);
    z-index: 3;
    opacity: 0;
    animation: pw-twinkle-b-en1n69gj67 2.2s ease-in-out infinite;
}

.pw-badge[b-en1n69gj67]  .pw-spark-1 { top: 2px; right: 10px; animation-delay: 0.7s; }
.pw-badge[b-en1n69gj67]  .pw-spark-2 { bottom: 10px; left: 0; font-size: 0.85rem; width: 0.85rem; height: 0.85rem; animation-delay: 1.2s; }
.pw-badge[b-en1n69gj67]  .pw-spark-3 { top: 26px; left: -6px; font-size: 0.7rem; width: 0.7rem; height: 0.7rem; animation-delay: 1.7s; }

/* --- Copy ----------------------------------------------------------------- */

.pw-content[b-en1n69gj67]  .pw-title {
    font-weight: 800;
    animation: pw-rise-b-en1n69gj67 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

.pw-content[b-en1n69gj67]  .pw-subtitle {
    color: var(--mud-palette-text-secondary);
    margin-top: 0.35rem;
    animation: pw-rise-b-en1n69gj67 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
}

/* --- Benefits ------------------------------------------------------------- */

.pw-benefits[b-en1n69gj67] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    margin-top: 1.25rem;
}

.pw-benefit[b-en1n69gj67] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.85rem;
    border-radius: var(--app-border-radius-sm);
    background: var(--mud-palette-background-gray);
    text-align: left;
}

.pw-benefit-1[b-en1n69gj67] { animation: pw-rise-b-en1n69gj67 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both; }
.pw-benefit-2[b-en1n69gj67] { animation: pw-rise-b-en1n69gj67 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both; }
.pw-benefit-3[b-en1n69gj67] { animation: pw-rise-b-en1n69gj67 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both; }

.pw-benefit-icon[b-en1n69gj67] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pw-benefit-icon-primary[b-en1n69gj67] {
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
}

.pw-benefit-icon-secondary[b-en1n69gj67] {
    color: var(--mud-palette-secondary);
    background: color-mix(in srgb, var(--mud-palette-secondary) 14%, transparent);
}

.pw-benefit-icon-gold[b-en1n69gj67] {
    color: var(--mud-palette-warning);
    background: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent);
}

.pw-benefit-text[b-en1n69gj67] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.pw-content[b-en1n69gj67]  .pw-note {
    color: var(--mud-palette-text-secondary);
    margin-top: 1rem;
    animation: pw-rise-b-en1n69gj67 0.45s ease-out 0.65s both;
}

/* --- CTA ------------------------------------------------------------------ */

.pw-actions[b-en1n69gj67] {
    width: 100%;
    padding: 0 0.5rem 0.75rem;
}

.pw-actions[b-en1n69gj67]  .pw-cta {
    border-radius: var(--app-border-radius-sm);
    font-weight: 700;
    animation: pw-rise-b-en1n69gj67 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.7s both;
}

/* --- Keyframes ------------------------------------------------------------ */

@keyframes pw-pop-b-en1n69gj67 {
    from { transform: scale(0.3); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

@keyframes pw-float-b-en1n69gj67 {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}

@keyframes pw-ring-b-en1n69gj67 {
    0%   { transform: scale(0.6); opacity: 0.7; }
    100% { transform: scale(1.55); opacity: 0; }
}

@keyframes pw-twinkle-b-en1n69gj67 {
    0%, 100% { opacity: 0; transform: scale(0.5) rotate(0deg); }
    50%      { opacity: 1; transform: scale(1) rotate(20deg); }
}

@keyframes pw-rise-b-en1n69gj67 {
    from { transform: translateY(10px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

/* --- Reduced motion ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .pw-diamond-wrapper[b-en1n69gj67],
    .pw-diamond-wrapper[b-en1n69gj67]  .pw-diamond,
    .pw-content[b-en1n69gj67]  .pw-title,
    .pw-content[b-en1n69gj67]  .pw-subtitle,
    .pw-benefit-1[b-en1n69gj67],
    .pw-benefit-2[b-en1n69gj67],
    .pw-benefit-3[b-en1n69gj67],
    .pw-content[b-en1n69gj67]  .pw-note,
    .pw-actions[b-en1n69gj67]  .pw-cta {
        animation: none;
    }

    .pw-ring[b-en1n69gj67] {
        display: none;
    }

    .pw-badge[b-en1n69gj67]  .pw-spark {
        animation: none;
        opacity: 0.8;
    }
}
/* /Components/Dialogs/QuizOnboardingDialog.razor.rz.scp.css */
.quiz[b-cmw65dhobc] {
    display: flex;
    flex-direction: column;
    padding: 0.25rem 0.25rem 0;
}

.quiz__step[b-cmw65dhobc] {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

[b-cmw65dhobc] .quiz__progress {
    margin-top: 0.5rem;
    border-radius: 100px;
}

.quiz__title[b-cmw65dhobc] {
    margin: 0.75rem 0 0;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--mud-palette-text-primary);
    text-wrap: balance;
}

.quiz__subtitle[b-cmw65dhobc] {
    margin: 0.35rem 0 0;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
    text-wrap: pretty;
}

.quiz__alert[b-cmw65dhobc] {
    margin-top: 0.75rem;
}

.quiz__options[b-cmw65dhobc] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

[b-cmw65dhobc] .quiz__option {
    margin: 0;
    padding: 0.55rem 0.75rem;
    border-radius: var(--app-border-radius-sm);
    border: 1px solid var(--app-border);
    background: var(--mud-palette-surface);
    transition: border-color 0.2s ease-out, background-color 0.2s ease-out;
}

[b-cmw65dhobc] .quiz__option:hover {
    border-color: var(--mud-palette-primary);
}

.quiz__option-row[b-cmw65dhobc] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

[b-cmw65dhobc] .quiz__option-icon {
    font-size: 1.1rem;
    color: var(--mud-palette-primary);
}

.quiz__hint[b-cmw65dhobc] {
    margin: 0.75rem 0 0;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
}

.quiz__welcome[b-cmw65dhobc] {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.quiz__welcome-item[b-cmw65dhobc] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    border-radius: var(--app-border-radius-sm);
    background: var(--mud-palette-background-gray);
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--mud-palette-text-primary);
}

.quiz__path[b-cmw65dhobc] {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.quiz__path-desc[b-cmw65dhobc] {
    margin: 0.3rem 0 0;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
}

[b-cmw65dhobc] .quiz__path-btn {
    justify-content: flex-start;
}

[b-cmw65dhobc] .quiz__spinner {
    margin-right: 0.5rem;
}

.quiz__actions[b-cmw65dhobc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
}

.quiz__actions[b-cmw65dhobc]  .quiz__cta {
    border-radius: var(--app-border-radius);
    font-weight: 700;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}

.quiz__secondary[b-cmw65dhobc] {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.25rem;
}

@media (prefers-reduced-motion: reduce) {
    [b-cmw65dhobc] .quiz__option {
        transition: none;
    }
}
/* /Components/Dialogs/StudyModeDialog.razor.rz.scp.css */
.mode[b-gntv1oj54r] {
    display: flex;
    flex-direction: column;
    padding: 0.25rem 0.25rem 0;
}

.mode__title[b-gntv1oj54r] {
    margin: 0.75rem 0 0;
    font-size: var(--font-headline);
    font-weight: 800;
    line-height: 1.25;
    color: var(--mud-palette-text-primary);
    text-wrap: balance;
}

.mode__subtitle[b-gntv1oj54r] {
    margin: 0.35rem 0 0;
    font-size: var(--font-body-sm);
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
    text-wrap: pretty;
}

.mode__path[b-gntv1oj54r] {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mode__path-desc[b-gntv1oj54r] {
    margin: 0.3rem 0 0;
    font-size: var(--font-label);
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
}

[b-gntv1oj54r] .mode__path-btn {
    justify-content: flex-start;
}

.mode__hint[b-gntv1oj54r] {
    margin: 0.75rem 0 0;
    font-size: var(--font-label);
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
}

.mode__path[b-gntv1oj54r]  .mud-button-root {
    min-height: 48px;
    white-space: normal;
    text-align: left;
}
/* /Components/Dialogs/WhatsNewDialog.razor.rz.scp.css */
/* What's New Dialog. Solo tokens. ::deep porque el aislamiento no alcanza a MudBlazor. */

.wn-content[b-69zqwj4k6s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0.5rem;
}

.wn-hero[b-69zqwj4k6s] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin: 1.25rem 0 0.75rem;
}

.wn-hero-fix[b-69zqwj4k6s] {
    width: auto;
    height: auto;
    margin: 0.5rem 0 0.75rem;
}

.wn-fix-badge[b-69zqwj4k6s] {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--mud-palette-tertiary) 16%, var(--mud-palette-surface));
    border: 1px solid color-mix(in srgb, var(--mud-palette-tertiary) 45%, transparent);
}

.wn-fix-badge[b-69zqwj4k6s]  .wn-fix-icon {
    font-size: 2rem;
    width: 2rem;
    height: 2rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--mud-palette-tertiary);
}

.wn-content[b-69zqwj4k6s]  .wn-title {
    margin-bottom: 0.35rem;
    font-weight: 700;
}

.wn-content[b-69zqwj4k6s]  .wn-subtitle {
    color: var(--mud-palette-text-secondary);
    margin-bottom: 1.25rem;
}

.wn-list[b-69zqwj4k6s] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
    text-align: left;
}

.wn-item[b-69zqwj4k6s] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--app-border-radius);
    background: var(--mud-palette-background-gray);
}

.wn-item-icon[b-69zqwj4k6s] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
}

.wn-item-icon-primary[b-69zqwj4k6s] {
    background: color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
    color: var(--mud-palette-primary);
}

.wn-item-icon-secondary[b-69zqwj4k6s] {
    background: color-mix(in srgb, var(--mud-palette-secondary) 18%, transparent);
    color: var(--mud-palette-secondary);
}

.wn-item-icon-tertiary[b-69zqwj4k6s] {
    background: color-mix(in srgb, var(--mud-palette-tertiary) 18%, transparent);
    color: var(--mud-palette-tertiary);
}

.wn-item-text[b-69zqwj4k6s] {
    font-size: 0.875rem;
    line-height: 1.35;
    color: var(--mud-palette-text-primary);
}

.wn-actions[b-69zqwj4k6s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
}

.wn-actions[b-69zqwj4k6s]  .wn-cta {
    border-radius: var(--app-border-radius);
    font-weight: 700;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    transition: transform 120ms ease-out;
}

.wn-actions[b-69zqwj4k6s]  .wn-cta:active {
    transform: scale(0.98);
}
/* /Components/Education/AdmissionGuidanceCards.razor.rz.scp.css */
.admission-guidance[b-piwciv6of4] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.block-title[b-piwciv6of4] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: var(--font-body);
}

.admission-cards[b-piwciv6of4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.admission-card[b-piwciv6of4] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    border: 1px solid var(--mud-palette-primary);
    border-radius: var(--app-border-radius-sm);
    background-color: color-mix(in srgb, var(--mud-palette-primary) 5%, var(--mud-palette-surface));
}

.admission-card-head[b-piwciv6of4] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.admission-university[b-piwciv6of4] {
    font-weight: 700;
}

.admission-program[b-piwciv6of4] {
    color: var(--mud-palette-text-secondary);
    font-size: var(--font-label);
}

.admission-copy[b-piwciv6of4] {
    margin: 0;
    font-size: var(--font-body-sm);
    line-height: 1.5;
}
/* /Components/Education/DiagnosticFeedback.razor.rz.scp.css */
.diagnostic[b-4r4r9c2pb6] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    border-radius: var(--app-border-radius-sm);
    /* Va dentro de la tarjeta de la pregunta: región tintada, sin marco propio ni filete
       lateral. El veredicto ya lleva icono y color. */
    background-color: var(--mud-palette-background);
}

.diagnostic.correct[b-4r4r9c2pb6] {
    background-color: color-mix(in srgb, var(--mud-palette-success) 8%, var(--mud-palette-surface));
}

.diagnostic.incorrect[b-4r4r9c2pb6] {
    background-color: color-mix(in srgb, var(--mud-palette-error) 8%, var(--mud-palette-surface));
}

.diagnostic-head[b-4r4r9c2pb6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.diagnostic-verdict[b-4r4r9c2pb6] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-body-sm);
    font-weight: 700;
}

.diagnostic.correct .diagnostic-verdict[b-4r4r9c2pb6] {
    color: var(--mud-palette-success);
}

.diagnostic.incorrect .diagnostic-verdict[b-4r4r9c2pb6] {
    color: var(--mud-palette-error);
}

.diagnostic-tag[b-4r4r9c2pb6] {
    padding: 2px 8px;
    border-radius: var(--app-border-radius-full);
    font-size: var(--font-micro);
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    background-color: var(--mud-palette-lines-default);
}

.diagnostic-choice[b-4r4r9c2pb6] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin: 0;
    font-size: var(--font-body-sm);
    color: var(--mud-palette-text-secondary);
}

.diagnostic-block[b-4r4r9c2pb6] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.diagnostic-block-title[b-4r4r9c2pb6] {
    margin: 0;
    font-size: var(--font-micro);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.diagnostic-next[b-4r4r9c2pb6] {
    padding-top: 8px;
    border-top: 1px dashed var(--mud-palette-lines-default);
}

.diagnostic[b-4r4r9c2pb6]  .prose {
    min-width: 0;
    font-size: var(--font-body-sm);
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.diagnostic[b-4r4r9c2pb6]  .prose :last-child {
    margin-bottom: 0;
}
/* /Components/Education/EarlyAccessLock.razor.rz.scp.css */
.early-access-lock[b-txv2d510dz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px;
    text-align: center;
    border-radius: var(--app-border-radius);
    border: 1px solid var(--mud-palette-warning);
    background-color: color-mix(in srgb, var(--mud-palette-warning) 8%, var(--mud-palette-surface));
}

/* Los dos candados NO significan lo mismo, así que tampoco se ven igual: el ámbar es la ventana
   temporal ("te lo estás perdiendo por ahora") y el neutro es el cierre permanente. */
.early-access-lock.permanent[b-txv2d510dz] {
    border-color: var(--mud-palette-lines-default);
    background-color: color-mix(in srgb, var(--mud-palette-secondary) 6%, var(--mud-palette-surface));
}

.lock-copy[b-txv2d510dz] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.lock-headline[b-txv2d510dz] {
    margin: 0;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    text-wrap: balance;
}

.lock-sub[b-txv2d510dz] {
    margin: 0;
    font-size: var(--font-body-sm);
    color: var(--mud-palette-text-secondary);
}

/* Dentro de la tarjeta del camino: una sola línea, sin CTA (la tarjeta entera ya lleva a Premium). */
.early-access-lock.compact[b-txv2d510dz] {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    text-align: left;
    border-radius: var(--app-border-radius-sm);
}

.early-access-lock.compact .lock-headline[b-txv2d510dz] {
    font-size: var(--font-label);
    font-weight: 600;
}

.early-access-lock.compact .lock-sub[b-txv2d510dz] {
    /* Sentence-case sub-copy, not a band tag: Label, not Micro (ver DESIGN.md). */
    font-size: var(--font-label);
}
/* /Components/Education/EducationalMedia.razor.rz.scp.css */
.educational-media[b-jdp8voo0om] {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.media-frame[b-jdp8voo0om] {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Reserva el hueco antes de que llegue el archivo: sin esto el bloque salta al cargar.
       Con `height: auto` la proporción es solo el hueco reservado, no un techo: una figura
       vertical crece en vez de encogerse hasta ser ilegible dentro del apaisado. */
    aspect-ratio: 16 / 9;
    height: auto;
    width: 100%;
    padding: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--app-border-radius);
    background-color: var(--mud-palette-surface);
    overflow: hidden;
}

.media-frame picture[b-jdp8voo0om] {
    display: contents;
}

.media-img[b-jdp8voo0om] {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
}

[b-jdp8voo0om] .media-svg {
    max-width: 100%;
    max-height: 70vh;
    overflow: auto;
}

[b-jdp8voo0om] .media-svg svg {
    max-width: 100%;
    height: auto;
}

.media-fallback[b-jdp8voo0om] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px;
    text-align: center;
}

.media-fallback-text[b-jdp8voo0om] {
    margin: 0;
    color: var(--mud-palette-text-secondary);
    font-size: var(--font-body-sm);
}

.media-actions[b-jdp8voo0om] {
    display: flex;
    justify-content: flex-end;
}

.media-zoom-button[b-jdp8voo0om] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    /* WCAG 2.5.8: en móvil este botón es la única vía para ver el detalle de la figura. */
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--app-border-radius-full);
    background: none;
    color: var(--mud-palette-primary);
    font: inherit;
    font-size: var(--font-label);
    cursor: pointer;
}

.media-zoom-button:hover[b-jdp8voo0om] {
    background-color: var(--mud-palette-action-default-hover);
}

.media-zoom-button:focus-visible[b-jdp8voo0om] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.media-caption[b-jdp8voo0om] {
    margin: 0;
    color: var(--mud-palette-text-secondary);
    font-size: var(--font-label);
}

@media (max-width: 480px) {
    .media-frame[b-jdp8voo0om] {
        aspect-ratio: 4 / 3;
    }

    .media-actions[b-jdp8voo0om] {
        justify-content: stretch;
    }

    .media-zoom-button[b-jdp8voo0om] {
        width: 100%;
    }
}
/* /Components/Education/EducationLessonV4.razor.rz.scp.css */
.lesson-v4[b-jblzjlsvvn] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.lesson-v4-head[b-jblzjlsvvn] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--mud-palette-lines-default);
}

.lesson-v4-head-text[b-jblzjlsvvn] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lesson-v4-order[b-jblzjlsvvn] {
    font-size: var(--font-label);
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.lesson-v4-head h3[b-jblzjlsvvn] {
    margin: 0;
    font-size: var(--font-headline);
    color: var(--mud-palette-text-primary);
    text-wrap: balance;
}

.v4-block[b-jblzjlsvvn] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--app-border-radius);
    background-color: var(--mud-palette-surface);
}

.v4-block-title[b-jblzjlsvvn] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: var(--font-body);
}

.v4-list[b-jblzjlsvvn],
.v4-steps[b-jblzjlsvvn] {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Los métodos y los errores viven dentro de un bloque que ya es tarjeta: se separan por
   filete, no por marco propio. */
.v4-card + .v4-card[b-jblzjlsvvn] {
    padding-top: 12px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.v4-card-warning[b-jblzjlsvvn] {
    padding: 12px;
    border-radius: var(--app-border-radius-sm);
    background-color: color-mix(in srgb, var(--mud-palette-warning) 7%, var(--mud-palette-surface));
}

.v4-card-warning + .v4-card-warning[b-jblzjlsvvn] {
    border-top: none;
}

/* Mismo acento que .worked-example en la lección v3: borde completo y tinte, sin filete lateral. */
.worked-example[b-jblzjlsvvn] {
    border-color: var(--mud-palette-primary);
    background-color: color-mix(in srgb, var(--mud-palette-primary) 5%, var(--mud-palette-surface));
}

.v4-closing[b-jblzjlsvvn] {
    align-items: flex-start;
}

/* Mismos valores que la página de lección: el bloque se lee igual si el componente se usa suelto. */
.v4-block[b-jblzjlsvvn]  .prose {
    min-width: 0;
    line-height: 1.65;
    max-width: 68ch;
    text-wrap: pretty;
    overflow-wrap: anywhere;
}

.v4-block[b-jblzjlsvvn]  .prose :last-child {
    margin-bottom: 0;
}

[b-jblzjlsvvn] .v4-node-fields {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(120px, auto) 1fr;
    gap: 4px 12px;
}

[b-jblzjlsvvn] .v4-node-fields dt {
    color: var(--mud-palette-text-secondary);
    font-size: var(--font-label);
    font-weight: 600;
}

[b-jblzjlsvvn] .v4-node-fields dd {
    margin: 0;
}

[b-jblzjlsvvn] .v4-node-list {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

@media (max-width: 480px) {
    [b-jblzjlsvvn] .v4-node-fields {
        grid-template-columns: 1fr;
    }

    [b-jblzjlsvvn] .v4-node-fields dd {
        margin-bottom: 6px;
    }
}
/* /Components/Education/LessonAudioButton.razor.rz.scp.css */
.lesson-audio[b-4qdyoykq2a] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.audio-hint[b-4qdyoykq2a] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-label);
    color: var(--mud-palette-text-secondary);
}

.audio-hint.free-trial[b-4qdyoykq2a] {
    color: var(--mud-palette-success);
    font-weight: 600;
}

.audio-player[b-4qdyoykq2a] {
    width: 100%;
    max-width: 100%;
    margin-top: 4px;
}
/* /Components/Education/LessonNode.razor.rz.scp.css */
/* El nodo se coloca respecto al eje del sendero: `--offset` son pasos laterales y
   `--trail-amp` / `--trail-gap` los define la pista en PathDetailPage. */
.node-slot[b-dicka6lbni] {
    --node-radio: 38px;
    --titulo-ancho: 132px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: var(--trail-gap);
}

/* El tramo va de centro a centro de círculo y queda por debajo de ellos: así nace dentro del
   nodo anterior en vez de morir contra su borde. */
.trail-link[b-dicka6lbni] {
    position: absolute;
    top: calc(-1 * var(--node-radio));
    height: calc(var(--trail-gap) + 2 * var(--node-radio));
    border-color: var(--mud-palette-lines-default);
    border-style: solid;
    border-width: 0;
}

.trail-link.recorrido[b-dicka6lbni] {
    border-color: var(--mud-palette-primary);
}

.tramo-recto .trail-link[b-dicka6lbni] {
    left: calc(50% + var(--offset) * var(--trail-amp) - 1.5px);
    width: 3px;
    border-left-width: 3px;
}

.tramo-derecha .trail-link[b-dicka6lbni] {
    left: calc(50% + var(--offset-previo) * var(--trail-amp));
    width: calc((var(--offset) - var(--offset-previo)) * var(--trail-amp));
    border-left-width: 3px;
    border-bottom-width: 3px;
    border-bottom-left-radius: 24px;
}

.tramo-izquierda .trail-link[b-dicka6lbni] {
    left: calc(50% + var(--offset) * var(--trail-amp));
    width: calc((var(--offset-previo) - var(--offset)) * var(--trail-amp));
    border-right-width: 3px;
    border-bottom-width: 3px;
    border-bottom-right-radius: 24px;
}

.node-cta[b-dicka6lbni] {
    position: absolute;
    top: 4px;
    left: 50%;
    z-index: 2;
    padding: 3px 12px;
    font-size: var(--font-micro);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-primary-text);
    /* Mezcla al 65% con negro: blanco-sobre-fondo ≥4.5 en ambos temas (micro = texto normal). */
    background-color: color-mix(in srgb, var(--mud-palette-primary) 65%, black);
    border-radius: var(--app-border-radius-full);
    box-shadow: var(--app-box-shadow-sm);
    transform: translateX(calc(-50% + var(--offset) * var(--trail-amp)));
}

.lesson-node[b-dicka6lbni] {
    position: relative;
    z-index: 1;
    display: block;
    width: calc(2 * var(--node-radio));
    padding: 0;
    background: none;
    border: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    transform: translateX(calc(var(--offset) * var(--trail-amp)));
    transition: transform 0.18s ease-out;
}

.lesson-node:disabled[b-dicka6lbni] {
    cursor: not-allowed;
}

.node-circle[b-dicka6lbni] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: var(--app-border);
    color: var(--mud-palette-text-secondary);
    background-color: var(--mud-palette-lines-default);
    box-shadow: var(--app-box-shadow-sm);
    transition: box-shadow 0.18s ease-out;
}

.node-number[b-dicka6lbni] {
    font-size: var(--font-display-number);
    font-weight: 700;
}

/* El estado no se dice solo con color: el círculo cambia de icono (candado / check / número). */
.lesson-node.abierta .node-circle[b-dicka6lbni] {
    color: var(--mud-palette-primary-text);
    background-color: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
}

.lesson-node.completada .node-circle[b-dicka6lbni] {
    color: var(--mud-palette-success-text);
    background-color: var(--mud-palette-success);
    border-color: var(--mud-palette-success);
}

/* Atenúa con color, no con opacidad: el círculo tiene que seguir tapando el tramo que pasa
   por debajo. */
.lesson-node.bloqueada .node-circle[b-dicka6lbni] {
    color: var(--mud-palette-text-disabled);
    background-color: var(--mud-palette-background-gray);
}

.lesson-node.bloqueada .node-title[b-dicka6lbni] {
    color: var(--mud-palette-text-secondary);
}

/* Anillo de atención del nodo actual: escala y opacidad, nunca propiedades de layout. */
.lesson-node.actual .node-circle[b-dicka6lbni]::after {
    content: "";
    position: absolute;
    inset: -6px;
    border: 2px solid var(--mud-palette-primary);
    border-radius: 50%;
    animation: node-pulse-b-dicka6lbni 2s ease-out infinite;
}

@keyframes node-pulse-b-dicka6lbni {
    0% {
        opacity: 0.7;
        transform: scale(1);
    }

    70%, 100% {
        opacity: 0;
        transform: scale(1.18);
    }
}

.node-crown[b-dicka6lbni] {
    position: absolute;
    top: -4px;
    right: -6px;
    display: flex;
}

/* El título sale del eje vertical (al lado contrario del zig-zag) para dejarle el centro
   limpio al sendero. */
.node-title[b-dicka6lbni] {
    position: absolute;
    top: 50%;
    width: var(--titulo-ancho);
    font-size: var(--font-label);
    font-weight: 600;
    line-height: 1.25;
    color: var(--mud-palette-text-primary);
    text-wrap: balance;
    transform: translateY(-50%);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.titulo-derecha .node-title[b-dicka6lbni] {
    left: calc(100% + 10px);
    text-align: left;
}

.titulo-izquierda .node-title[b-dicka6lbni] {
    right: calc(100% + 10px);
    text-align: right;
}

.lesson-node:focus-visible[b-dicka6lbni] {
    outline: none;
}

.lesson-node:focus-visible .node-circle[b-dicka6lbni] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 3px;
}

@media (hover: hover) {
    .lesson-node:not(:disabled):hover[b-dicka6lbni] {
        transform: translateX(calc(var(--offset) * var(--trail-amp))) translateY(-3px);
    }

    .lesson-node:not(:disabled):hover .node-circle[b-dicka6lbni] {
        box-shadow: var(--app-box-shadow);
    }
}

.lesson-node:not(:disabled):active[b-dicka6lbni] {
    transform: translateX(calc(var(--offset) * var(--trail-amp))) scale(0.94);
}

@media (max-width: 600px) {
    .node-slot[b-dicka6lbni] {
        --node-radio: 31px;
        --titulo-ancho: 96px;
    }

    .node-number[b-dicka6lbni] {
        font-size: var(--font-headline);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lesson-node[b-dicka6lbni],
    .lesson-node:hover[b-dicka6lbni],
    .lesson-node:active[b-dicka6lbni] {
        transform: translateX(calc(var(--offset) * var(--trail-amp)));
        transition: none;
    }

    .lesson-node.actual .node-circle[b-dicka6lbni]::after {
        animation: none;
    }
}
/* /Components/Education/MediaZoomDialog.razor.rz.scp.css */
.media-zoom-body[b-k6s2bqavj7] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.media-zoom-viewport[b-k6s2bqavj7] {
    display: flex;
    /* `safe` para que al acercar la figura no quede recortada por la izquierda. */
    align-items: safe center;
    justify-content: safe center;
    width: 100%;
    max-height: 72vh;
    overflow: auto;
    overscroll-behavior: contain;
}

.media-zoom-viewport picture[b-k6s2bqavj7] {
    display: contents;
}

.media-zoom-img[b-k6s2bqavj7] {
    display: block;
    max-width: 100%;
    max-height: 72vh;
    object-fit: contain;
}

[b-k6s2bqavj7] .media-zoom-svg {
    max-width: 100%;
    max-height: 72vh;
}

.media-zoom-viewport--acercado .media-zoom-img[b-k6s2bqavj7],
.media-zoom-viewport--acercado[b-k6s2bqavj7]  .media-zoom-svg {
    flex: none;
    width: 200%;
    max-width: none;
    max-height: none;
}

[b-k6s2bqavj7] .media-zoom-svg svg {
    width: 100%;
    height: auto;
}

.media-zoom-caption[b-k6s2bqavj7] {
    margin: 0;
    color: var(--mud-palette-text-secondary);
    font-size: var(--font-body-sm);
    text-align: center;
}
/* /Components/Education/PathCard.razor.rz.scp.css */
.path-card[b-8rphqtyje0] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    min-width: 0;
    padding: 16px;
    cursor: pointer;
    border-radius: var(--app-border-radius-lg);
    border: var(--app-border);
    background-color: var(--mud-palette-surface);
    box-shadow: var(--app-box-shadow);
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

@media (hover: hover) {
    .path-card:hover[b-8rphqtyje0] {
        transform: translateY(-2px);
        box-shadow: var(--app-box-shadow-hover);
    }
}

.path-card:focus-visible[b-8rphqtyje0] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.path-card.done[b-8rphqtyje0] {
    border-color: var(--mud-palette-success);
}

/* Adelanto Premium: ámbar, porque es una oferta con fecha, no un muro. */
.path-card.locked[b-8rphqtyje0] {
    border-color: var(--mud-palette-warning);
    background-color: color-mix(in srgb, var(--mud-palette-warning) 4%, var(--mud-palette-surface));
}

/* Cierre permanente: neutro. Pintarlo del mismo ámbar prometería una apertura que no llega. */
.path-card.locked-permanent[b-8rphqtyje0] {
    border-color: var(--mud-palette-lines-default);
}

.path-card-head[b-8rphqtyje0] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.path-icon[b-8rphqtyje0] {
    flex-shrink: 0;
    font-size: var(--font-icon-glyph);
    line-height: 1;
}

.path-title-block[b-8rphqtyje0] {
    /* min-width:0 es lo que permite que el título trunque en vez de empujar la tarjeta. */
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.path-title[b-8rphqtyje0] {
    margin: 0;
    font-size: var(--font-body);
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.path-meta[b-8rphqtyje0] {
    font-size: var(--font-label);
    color: var(--mud-palette-text-secondary);
}

.path-done-badge[b-8rphqtyje0] {
    display: inline-flex;
    line-height: 0;
}

.path-progress[b-8rphqtyje0] {
    height: 8px;
    width: 100%;
    border-radius: var(--app-border-radius-full);
    background-color: var(--mud-palette-lines-default);
    overflow: hidden;
}

/* La barra se llena con `transform` y no con `width`: animar el ancho relayoutea la tarjeta en
   cada frame, y el mapa puede pintar decenas a la vez. El radio lo pone el carril, que recorta. */
.path-progress-fill[b-8rphqtyje0] {
    height: 100%;
    width: 100%;
    transform-origin: left center;
    background-color: var(--mud-palette-success);
    transition: transform 0.4s ease-out;
}

.path-card.locked .path-progress-fill[b-8rphqtyje0] {
    background-color: var(--mud-palette-warning);
}

.path-card.locked-permanent .path-progress-fill[b-8rphqtyje0] {
    background-color: var(--mud-palette-secondary);
}

@media (prefers-reduced-motion: reduce) {
    .path-card[b-8rphqtyje0],
    .path-card:hover[b-8rphqtyje0] {
        transform: none;
        transition: none;
    }

    .path-progress-fill[b-8rphqtyje0] {
        transition: none;
    }
}
/* /Components/Education/PathRewardDialog.razor.rz.scp.css */
.reward-body[b-z1cs2z8evu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 8px;
    text-align: center;
}

[b-z1cs2z8evu] .reward-icon {
    font-size: var(--font-reward-glyph);
}

.reward-title[b-z1cs2z8evu] {
    font-weight: 700;
}

.reward-prizes[b-z1cs2z8evu] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    width: 100%;
    margin-top: 12px;
}

.reward-prize[b-z1cs2z8evu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
    flex: 1 1 120px;
    padding: 14px;
    border-radius: var(--app-border-radius);
    border: var(--app-border);
    background-color: var(--mud-palette-background);
}

.prize-value[b-z1cs2z8evu] {
    /* Prize-value role: Headline size, reward-surface exception (ver DESIGN.md). */
    font-size: var(--font-headline);
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.prize-label[b-z1cs2z8evu] {
    font-size: var(--font-label);
    color: var(--mud-palette-text-secondary);
}

.reward-note[b-z1cs2z8evu] {
    margin-top: 10px;
    color: var(--mud-palette-text-secondary);
}
/* /Components/Education/PracticeQuestion.razor.rz.scp.css */
.practice-question[b-zh7bwtrzy4] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 20px;
    border-radius: var(--app-border-radius);
    border: var(--app-border);
    background-color: var(--mud-palette-surface);
    box-shadow: var(--app-box-shadow-sm);
}

.question-header[b-zh7bwtrzy4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.question-index[b-zh7bwtrzy4] {
    font-size: var(--font-label);
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.question-verdict[b-zh7bwtrzy4] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-label);
    font-weight: 700;
}

.question-verdict.correct[b-zh7bwtrzy4] {
    color: var(--mud-palette-success);
}

.question-verdict.incorrect[b-zh7bwtrzy4] {
    color: var(--mud-palette-error);
}

.practice-question[b-zh7bwtrzy4]  .question-text {
    font-weight: 600;
}

.question-figure[b-zh7bwtrzy4] {
    max-width: 100%;
    overflow-x: auto;
}

.question-explanation[b-zh7bwtrzy4] {
    padding: 12px 14px;
    border-radius: var(--app-border-radius-sm);
    background-color: var(--mud-palette-background);
    font-size: var(--font-body-sm);
}

.question-explanation.correct[b-zh7bwtrzy4] {
    background-color: color-mix(in srgb, var(--mud-palette-success) 8%, var(--mud-palette-surface));
}

.question-explanation.incorrect[b-zh7bwtrzy4] {
    background-color: color-mix(in srgb, var(--mud-palette-error) 8%, var(--mud-palette-surface));
}

/* La prosa la pinta MathText, que es hijo: sin ::deep el scope no la alcanza. */
.practice-question[b-zh7bwtrzy4]  .prose {
    min-width: 0;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.practice-question[b-zh7bwtrzy4]  .prose :last-child {
    margin-bottom: 0;
}
/* /Components/Education/PracticeV4Question.razor.rz.scp.css */
.v4-question[b-3kckezb35g] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 20px;
    border-radius: var(--app-border-radius);
    border: var(--app-border);
    background-color: var(--mud-palette-surface);
    box-shadow: var(--app-box-shadow-sm);
}

.v4-question-head[b-3kckezb35g] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.v4-question-index[b-3kckezb35g] {
    font-size: var(--font-label);
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.v4-question-band[b-3kckezb35g] {
    padding: 2px 8px;
    border-radius: var(--app-border-radius-full);
    font-size: var(--font-micro);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    background-color: var(--mud-palette-lines-default);
}

.v4-question[b-3kckezb35g]  .v4-question-text {
    font-weight: 600;
}

.v4-question-figure[b-3kckezb35g] {
    max-width: 100%;
    overflow-x: auto;
}

.v4-hints[b-3kckezb35g] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.v4-hint[b-3kckezb35g] {
    display: flex;
    gap: 8px;
    min-width: 0;
    width: 100%;
    padding: 10px 12px;
    border-radius: var(--app-border-radius-sm);
    background-color: color-mix(in srgb, var(--mud-palette-primary) 7%, var(--mud-palette-surface));
}

.v4-question[b-3kckezb35g]  .prose {
    min-width: 0;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.v4-question[b-3kckezb35g]  .prose :last-child {
    margin-bottom: 0;
}
/* /Components/Education/ProgressHeader.razor.rz.scp.css */
.progress-header[b-lcbadzb9o6] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.progress-stats[b-lcbadzb9o6] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.progress-stat[b-lcbadzb9o6] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 8px 12px;
    border-radius: var(--app-border-radius);
    border: var(--app-border);
    background-color: var(--mud-palette-surface);
    box-shadow: var(--app-box-shadow-sm);
}

.stat-value[b-lcbadzb9o6] {
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.racha[b-lcbadzb9o6] {
    position: relative;
}

.racha-fuego[b-lcbadzb9o6] {
    display: inline-flex;
    transform-origin: 50% 90%;
    will-change: transform;
}

.racha.is-warm .racha-fuego[b-lcbadzb9o6] {
    animation: racha-flicker-b-lcbadzb9o6 2.6s ease-in-out infinite;
}

.racha.is-hot .racha-fuego[b-lcbadzb9o6] {
    scale: 1.12;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--mud-palette-warning) 55%, transparent));
    animation: racha-flicker-b-lcbadzb9o6 1.9s ease-in-out infinite;
}

.racha.is-blaze .racha-fuego[b-lcbadzb9o6] {
    scale: 1.22;
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--mud-palette-error) 60%, transparent));
    animation: racha-flicker-b-lcbadzb9o6 1.5s ease-in-out infinite;
}

.racha.is-off .racha-fuego[b-lcbadzb9o6] {
    opacity: 0.5;
    filter: grayscale(0.7);
}

.racha.celebrar .racha-num[b-lcbadzb9o6] {
    display: inline-block;
    animation: racha-pop-b-lcbadzb9o6 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1;
}

.racha.celebrar[b-lcbadzb9o6]::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: var(--app-border-radius-full);
    background: radial-gradient(circle, color-mix(in srgb, var(--mud-palette-warning) 45%, transparent) 0%, transparent 70%);
    opacity: 0;
    pointer-events: none;
    animation: racha-flash-b-lcbadzb9o6 0.7s ease-out 1;
}

@keyframes racha-flicker-b-lcbadzb9o6 {
    0%, 100% {
        transform: scale(1) rotate(-2deg) translateY(0);
    }
    25% {
        transform: scale(1.06) rotate(2deg) translateY(-0.5px);
    }
    50% {
        transform: scale(1.02) rotate(-1deg) translateY(0);
    }
    75% {
        transform: scale(1.08) rotate(1deg) translateY(-0.5px);
    }
}

@keyframes racha-pop-b-lcbadzb9o6 {
    0% {
        transform: scale(0.4);
    }
    55% {
        transform: scale(1.25);
    }
    75% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes racha-flash-b-lcbadzb9o6 {
    from {
        opacity: 0.85;
        transform: scale(0.7);
    }
    to {
        opacity: 0;
        transform: scale(1.35);
    }
}

@media (prefers-reduced-motion: reduce) {
    .racha-fuego[b-lcbadzb9o6],
    .racha-num[b-lcbadzb9o6],
    .racha[b-lcbadzb9o6]::after {
        animation: none !important;
    }
    .racha.celebrar[b-lcbadzb9o6]::after {
        display: none !important;
    }
}

.stat-label[b-lcbadzb9o6] {
    font-size: var(--font-label);
    color: var(--mud-palette-text-secondary);
}

.daily-quota[b-lcbadzb9o6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    font-size: var(--font-label);
    border-radius: var(--app-border-radius);
    border: var(--app-border);
    color: var(--mud-palette-text-secondary);
    background-color: var(--mud-palette-surface);
}

/* Sin cupo: es el momento de empujar a Premium, así que la fila cambia de tono. */
.daily-quota.spent[b-lcbadzb9o6] {
    border-color: var(--mud-palette-warning);
    background-color: color-mix(in srgb, var(--mud-palette-warning) 8%, var(--mud-palette-surface));
    color: var(--mud-palette-text-primary);
}

.quota-line[b-lcbadzb9o6] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
/* /Components/Education/RecommendedCard.razor.rz.scp.css */
.recommended-card[b-zjvz5a98o0] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    border-radius: var(--app-border-radius-lg);
    border: var(--app-border);
    background-color: var(--mud-palette-surface);
    box-shadow: var(--app-box-shadow);
}

.recommended-card[role="button"][b-zjvz5a98o0] {
    cursor: pointer;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

@media (hover: hover) {
    .recommended-card[role="button"]:hover[b-zjvz5a98o0] {
        transform: translateY(-2px);
        box-shadow: var(--app-box-shadow-hover);
    }
}

.recommended-card[role="button"]:focus-visible[b-zjvz5a98o0] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.recommended-card.done[b-zjvz5a98o0] {
    border-color: var(--mud-palette-success);
}

.recommended-text[b-zjvz5a98o0] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.recommended-label[b-zjvz5a98o0] {
    font-size: var(--font-label);
    color: var(--mud-palette-text-secondary);
}

.recommended-title[b-zjvz5a98o0] {
    margin: 0;
    font-size: var(--font-body);
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .recommended-card[role="button"][b-zjvz5a98o0],
    .recommended-card[role="button"]:hover[b-zjvz5a98o0] {
        transform: none;
        transition: none;
    }
}
/* /Components/Education/SubtemaBanner.razor.rz.scp.css */
.subtema-banner[b-fxntnxomw8] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 1rem 1.25rem;
    color: var(--mud-palette-primary-text);
    background-color: var(--mud-palette-primary);
    border-radius: var(--app-border-radius-lg);
    box-shadow: var(--app-box-shadow-sm);
}

.banner-text[b-fxntnxomw8] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.banner-title[b-fxntnxomw8] {
    margin: 0;
    font-size: var(--font-body);
    font-weight: 700;
    text-wrap: balance;
}

.banner-progreso[b-fxntnxomw8] {
    font-size: var(--font-label);
    font-weight: 600;
    opacity: 0.85;
}
/* /Components/ExamContributionMap.razor.rz.scp.css */
/* Contenedor principal estilo MudPaper premium */
.contribution-map-container[b-medz5gljlo] {
    width: 100%;
    border-radius: var(--app-border-radius, 12px);
    border: 1px solid var(--mud-palette-divider, #3a3a3a);
    background-color: var(--mud-palette-surface, #2d2d30);
    padding: 1rem;
    box-shadow: var(--app-box-shadow, 0 4px 12px rgba(0, 0, 0, 0.1));
    transition: background-color 0.2s ease-out, border 0.2s ease-out;
}

/* Encabezado del componente */
.contribution-map-header[b-medz5gljlo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.contribution-map-title[b-medz5gljlo] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--mud-palette-primary, #3399ff);
    margin: 0;
}

.contribution-map-summary[b-medz5gljlo] {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary, #b0b0b0);
}

/* Área de scroll horizontal (solo para pantallas móviles de <650px) */
.contribution-map-scroll[b-medz5gljlo] {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden; /* Evita scrollbar vertical de forma absoluta */
    height: auto;       /* Se adapta al tamaño exacto del contenido */
    padding-bottom: 0.25rem;
    margin-bottom: 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: var(--mud-palette-divider, #3a3a3a) transparent;
}

.contribution-map-scroll[b-medz5gljlo]::-webkit-scrollbar {
    height: 4px;
}

.contribution-map-scroll[b-medz5gljlo]::-webkit-scrollbar-track {
    background: transparent;
}

.contribution-map-scroll[b-medz5gljlo]::-webkit-scrollbar-thumb {
    background-color: var(--mud-palette-divider, #3a3a3a);
    border-radius: 4px;
}

/* Contenedor relativo de los meses para posicionamiento exacto */
.heatmap-months[b-medz5gljlo] {
    position: relative;
    margin-left: 30px; /* Alineación perfecta con el inicio de la segunda columna (28px etiquetas + 2px gap) */
    height: 16px;
    margin-bottom: 4px;
    width: 581px; /* Ancho exacto de las 53 columnas de días (53 * 9px + 52 * 2px) */
}

/* Etiquetas de meses en la parte superior */
.month-label[b-medz5gljlo] {
    position: absolute;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary, #b0b0b0);
    white-space: nowrap;
    top: 0;
    transform: translateX(-10%);
}

/* El Grid CSS de 7 filas (Días de la semana) y 54 columnas */
.contribution-grid[b-medz5gljlo] {
    display: grid;
    grid-template-rows: repeat(7, 9px);
    grid-template-columns: 28px repeat(53, 9px);
    gap: 2px;
    width: max-content;
    padding: 1px 0;
}

/* Etiquetas de días de la semana en la columna 1 */
.day-label[b-medz5gljlo] {
    grid-column: 1;
    font-size: 0.68rem;
    color: var(--mud-palette-text-secondary, #b0b0b0);
    text-align: left;
    align-self: center;
    line-height: 9px;
}

/* Cada celda o bloque de contribución */
.heatmap-cell[b-medz5gljlo] {
    width: 9px;
    height: 9px;
    border-radius: 1.5px;
    transition: transform 0.1s ease, filter 0.15s ease;
    cursor: pointer;
    box-sizing: border-box;
}

/* Efecto hover premium */
.heatmap-cell:hover[b-medz5gljlo] {
    transform: scale(1.35);
    filter: brightness(1.2) saturate(1.1);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
    z-index: 10;
}

/* Paleta de colores adaptable (Light vs Dark) */
.light-theme[b-medz5gljlo] {
    --color-level-0: rgba(0, 0, 0, 0.06);
    --color-level-1: #9be9a8;
    --color-level-2: #40c463;
    --color-level-3: #30a14e;
    --color-level-4: #216e39;
}

.dark-theme[b-medz5gljlo] {
    --color-level-0: #161b22;
    --color-level-1: #0e4429;
    --color-level-2: #006d32;
    --color-level-3: #26a641;
    --color-level-4: #39d353;
}

/* Asignación de colores por nivel */
.cell-level-0[b-medz5gljlo] { background-color: var(--color-level-0); }
.cell-level-1[b-medz5gljlo] { background-color: var(--color-level-1); }
.cell-level-2[b-medz5gljlo] { background-color: var(--color-level-2); }
.cell-level-3[b-medz5gljlo] { background-color: var(--color-level-3); }
.cell-level-4[b-medz5gljlo] { background-color: var(--color-level-4); }

/* Pie del componente y leyenda */
.contribution-map-footer[b-medz5gljlo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary, #b0b0b0);
    margin-top: 0.4rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.map-legend[b-medz5gljlo] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.legend-cells[b-medz5gljlo] {
    display: flex;
    gap: 2px;
}

.legend-cell[b-medz5gljlo] {
    width: 9px;
    height: 9px;
    border-radius: 1.5px;
}

/* Esqueleto de carga */
.heatmap-skeleton[b-medz5gljlo] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}
/* /Components/FlashcardCard.razor.rz.scp.css */
/* ─────────────────────────────────────────────
   FlashcardCard.razor.css
   Scoped stylesheet – Blazor applies this only
   to elements rendered by FlashcardCard.razor
───────────────────────────────────────────── */

/* ── Scene (3-D stage) ─────────────────────── */
.fc-scene[b-eex98p5cu6] {
    width: 100%;
    max-width: 680px;
    perspective: 1200px;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

/* ── Card (rotates) ────────────────────────── */
.fc-card[b-eex98p5cu6] {
    position: relative;
    width: 100%;
    max-width: 500px;
    transform-style: preserve-3d;
    transition: transform 0.65s cubic-bezier(.4, 0, .2, 1);
    border-radius: var(--app-border-radius-lg);
    box-shadow: var(--app-box-shadow-hover);
    min-height: 400px;
    margin: 0 auto;
    outline: none;
}

.fc-card:focus-visible[b-eex98p5cu6] {
    outline: 3px solid var(--mud-palette-primary);
    outline-offset: 4px;
}

.fc-card--decorative[b-eex98p5cu6] {
    cursor: default;
}

.fc-scene--flipped .fc-card[b-eex98p5cu6] {
    transform: rotateY(180deg);
}

@media (hover: hover) {
    /* Subtle lift on hover when NOT mid-flip */
    .fc-scene:hover:not(.fc-scene--flipped) .fc-card[b-eex98p5cu6] {
        transform: rotateY(8deg) translateY(-4px);
    }
    .fc-scene--flipped:hover .fc-card[b-eex98p5cu6] {
        transform: rotateY(172deg) translateY(-4px);
    }
}

/* ── Shared face styles ─────────────────────── */
.fc-face[b-eex98p5cu6] {
    position: absolute;
    inset: 0;
    border-radius: var(--app-border-radius-lg);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    padding: 28px 32px 22px;
    color: var(--mud-palette-text-primary);
}

/*
 * Ghost twin — sits in normal flow (not absolute) so the card stretches
 * to fit the tallest face. Invisible and non-interactive.
 */
.fc-face--ghost[b-eex98p5cu6] {
    position: relative;
    visibility: hidden;
    pointer-events: none;
}

/* Subtle noise texture overlay */
.fc-face[b-eex98p5cu6]::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: .04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    pointer-events: none;
}

/* ── Front face ─────────────────────────────── */
.fc-face--front[b-eex98p5cu6] {
    background: linear-gradient(135deg, var(--mud-palette-primary) 0%, var(--mud-palette-primary-darken) 100%);
    border: 1px solid rgba(255, 255, 255, .06);
}

/* ── Back face ──────────────────────────────── */
.fc-face--back[b-eex98p5cu6] {
    background: linear-gradient(135deg, var(--mud-palette-secondary) 0%, var(--mud-palette-secondary-darken) 100%);
    border: 1px solid rgba(74, 222, 128, .12);
    transform: rotateY(180deg);
}

/* ── Header row ─────────────────────────────── */
.fc-face__header[b-eex98p5cu6] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Body ───────────────────────────────────── */
.fc-face__body[b-eex98p5cu6] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
    padding: 0.5rem 0;
    margin: auto 0;
}

.fc-face__body--back[b-eex98p5cu6] {
    overflow-y: auto;
    gap: 12px;
    scrollbar-width: thin;
    scrollbar-color: rgba(74, 222, 128, .15) transparent;
}

/* ── Footer ─────────────────────────────────── */
.fc-face__footer[b-eex98p5cu6] {
    display: flex;
    justify-content: flex-end;
}

/* ── Badges ─────────────────────────────────── */
.fc-badge[b-eex98p5cu6] {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 100px;
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(4px);
    border: 1px solid var(--mud-palette-white);
    color: var(--mud-palette-white);
}

.fc-badge--back[b-eex98p5cu6] {
    background: rgba(222, 222, 222, .15);
    border-color: var(--mud-palette-white);
    color: var(--mud-palette-white);
}

/* ── Tipo label ─────────────────────────────── */
.fc-tipo[b-eex98p5cu6] {
    font-size: .72rem;
    color: var(--mud-palette-white);
    margin: 0;
    letter-spacing: .04em;
}

/* ── Title ──────────────────────────────────── */
.fc-titulo[b-eex98p5cu6] {
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
    color: var(--mud-palette-white);
}

/* ── Definition ─────────────────────────────── */
.fc-definicion[b-eex98p5cu6] {
    font-size: .92rem;
    line-height: 1.65;
    margin: 0;
    color: var(--mud-palette-white);
}

/* ── Example block ──────────────────────────── */
.fc-ejemplo[b-eex98p5cu6] {
    padding: 10px 14px;
    border-radius: var(--app-border-radius);
    background: rgba(222, 222, 222, .15);
}

.fc-ejemplo__label[b-eex98p5cu6] {
    display: block;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mud-palette-white);
    margin-bottom: 4px;
}

.fc-ejemplo__text[b-eex98p5cu6] {
    font-size: .85rem;
    line-height: 1.55;
    margin: 0;
    color: rgba(232, 240, 254, .85);
}

/* ── Hint ───────────────────────────────────── */
.fc-hint[b-eex98p5cu6] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .72rem;
    color: var(--mud-palette-white);
}

.fc-hint svg[b-eex98p5cu6] {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

/* ── Controls ───────────────────────────────── */
.fc-controls[b-eex98p5cu6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
    width: 100%;
    max-width: 680px;
}

.fc-btn[b-eex98p5cu6] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .82rem;
    font-weight: 600;
    border: none;
    border-radius: var(--app-border-radius);
    cursor: pointer;
    transition: background .2s, transform .15s, opacity .2s;
    padding: 9px 16px;
}

.fc-btn:disabled[b-eex98p5cu6] {
    opacity: .35;
    cursor: not-allowed;
}

.fc-btn--nav[b-eex98p5cu6] {
    background: rgba(255, 255, 255, .06);
    color: var(--mud-palette-text-primary);
    border: 1px solid rgba(255, 255, 255, .1);
}

@media (hover: hover) {
    .fc-btn--nav:hover:not(:disabled)[b-eex98p5cu6] {
        background: rgba(255, 255, 255, .11);
        transform: translateY(-1px);
    }

    .fc-btn--flip:hover[b-eex98p5cu6] {
        opacity: 1;
    }
}

@media (hover: none){
    .fc-btn--flip[b-eex98p5cu6] {
        opacity: 1;
    }
}

.fc-btn--nav svg[b-eex98p5cu6] {
    width: 15px;
    height: 15px;
}

.fc-btn--flip[b-eex98p5cu6] {
    color: var(--mud-palette-white);
    padding: 9px 22px;
    background: var(--mud-palette-primary);
    transform: translateY(-1px);
    opacity: 0;
    width: 150px;
}


/* ── Progress bar ───────────────────────────── */
.fc-progress[b-eex98p5cu6] {
    position: relative;
    width: 100%;
    max-width: 680px;
    height: 4px;
    background: var(--mud-palette-gray-default);
    border-radius: 100px;
    margin-top: 14px;
    overflow: hidden;
}

/* Relleno con `transform` y no con `width`: igual que PathCard, el carril recorta. */
.fc-progress__bar[b-eex98p5cu6] {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    transform-origin: left center;
    background: var(--mud-palette-primary);
    transition: transform .4s cubic-bezier(.4, 0, .2, 1);
}

.fc-progress__label[b-eex98p5cu6] {
    position: absolute;
    right: 0;
    top: 8px;
    font-size: .68rem;
    color: var(--mud-palette-text-primary);
    font-weight: bold;
}

/* ── Responsive ─────────────────────────────── */
@media (max-width: 500px) {
    .fc-face[b-eex98p5cu6] {
        padding: 20px 20px 16px;
    }

    .fc-titulo[b-eex98p5cu6] {
        font-size: 1.2rem;
    }

    .fc-definicion[b-eex98p5cu6] {
        font-size: .88rem;
    }
}
/* /Components/Flipcards/FlipcardCardMini.razor.rz.scp.css */
/* Lightweight, static card for carousel and game contexts. */

.fc-mini[b-fdeda9tbof] {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    border-radius: var(--app-border-radius);
    overflow: hidden;
}

.fc-mini__surface[b-fdeda9tbof] {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 14px;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--mud-palette-white);
    box-sizing: border-box;
}

.fc-mini__surface[b-fdeda9tbof]::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    pointer-events: none;
}

.fc-mini--front .fc-mini__surface[b-fdeda9tbof] {
    background: linear-gradient(135deg, var(--mud-palette-primary) 0%, var(--mud-palette-primary-darken) 100%);
}

.fc-mini--back .fc-mini__surface[b-fdeda9tbof] {
    background: linear-gradient(135deg, var(--mud-palette-secondary) 0%, var(--mud-palette-secondary-darken) 100%);
}

.fc-mini--tone-success .fc-mini__surface[b-fdeda9tbof] {
    background: linear-gradient(135deg, var(--mud-palette-success) 0%, var(--mud-palette-success-darken) 100%);
}

.fc-mini--tone-error .fc-mini__surface[b-fdeda9tbof] {
    background: linear-gradient(135deg, var(--mud-palette-error) 0%, var(--mud-palette-error-darken) 100%);
}

.fc-mini--tone-warning .fc-mini__surface[b-fdeda9tbof] {
    background: linear-gradient(135deg, var(--mud-palette-warning) 0%, var(--mud-palette-warning-darken) 100%);
}

.fc-mini__header[b-fdeda9tbof] {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.fc-mini__badge[b-fdeda9tbof] {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.1);
    color: var(--mud-palette-white);
}

.fc-mini__badge--back[b-fdeda9tbof] {
    background: rgba(222, 222, 222, 0.2);
}

.fc-mini__body[b-fdeda9tbof] {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
    min-height: 0;
    overflow: hidden;
}

.fc-mini__type[b-fdeda9tbof] {
    margin: 0;
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    opacity: 0.95;
}

.fc-mini__title[b-fdeda9tbof] {
    margin: 0;
    font-size: 1rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.fc-mini__definition[b-fdeda9tbof] {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.45;
    overflow-y: auto;
    scrollbar-width: thin;
}

.fc-mini__example[b-fdeda9tbof] {
    padding: 8px 10px;
    border-radius: var(--app-border-radius);
    border-left: 3px solid rgba(255, 255, 255, 0.8);
    background: rgba(0, 0, 0, 0.14);
    overflow: hidden;
}

.fc-mini__example-label[b-fdeda9tbof] {
    display: block;
    margin-bottom: 3px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.fc-mini__example-text[b-fdeda9tbof] {
    margin: 0;
    font-size: 0.76rem;
    line-height: 1.35;
    opacity: 0.95;
}

.fc-mini__footer[b-fdeda9tbof] {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

.fc-mini__hint[b-fdeda9tbof] {
    font-size: 0.68rem;
    opacity: 0.85;
}

@media (max-width: 500px) {
    .fc-mini__surface[b-fdeda9tbof] {
        padding: 12px;
    }

    .fc-mini__title[b-fdeda9tbof] {
        font-size: 0.92rem;
    }

    .fc-mini__definition[b-fdeda9tbof] {
        font-size: 0.78rem;
    }
}
/* /Components/Flipcards/FlipcardCarousel.razor.rz.scp.css */
/* ── Root container ──────────────────────────── */
.fc-carousel[b-r32omwzep5] {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border-radius: var(--app-border-radius);
    box-sizing: border-box;
}

/* ── Row ─────────────────────────────────────── */
.fc-carousel__row[b-r32omwzep5] {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* ── Track (moves) ───────────────────────────── */
.fc-carousel__track[b-r32omwzep5] {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    gap: 0;
    width: max-content;
    height: 100%;
    will-change: transform;
    /* Track is absolutely positioned so its intrinsic width
       doesn't affect the row's layout size — row clips it. */
}

.fc-carousel__track--right[b-r32omwzep5] {
    left: auto;
    right: 0;
}

.fc-carousel__set[b-r32omwzep5] {
    display: flex;
    flex-shrink: 0;
    width: max-content;
    height: 100%;
}

/* ── Cell (card wrapper) ─────────────────────── */
.fc-carousel__cell[b-r32omwzep5] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    box-sizing: border-box;
}

/* Shrink inner card scene to fit cell */
.fc-carousel__cell[b-r32omwzep5]  .fc-scene {
    width: 100%;
    max-width: 100%;
}

.fc-carousel__cell[b-r32omwzep5]  .fc-card {
    max-width: 100%;
    min-height: unset;
    height: 100%;
}

/* ── Controls overlay ────────────────────────── */
.fc-carousel__controls[b-r32omwzep5] {
    position: absolute;
    bottom: 12px;
    right: 16px;
    z-index: 10;
    display: flex;
    gap: 8px;
}

.fc-carousel__btn[b-r32omwzep5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px);
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}

@media (hover: hover) {
  .fc-carousel__btn:hover[b-r32omwzep5] {
      background: rgba(0, 0, 0, 0.65);
      transform: scale(1.08);
  }
}

.fc-carousel__btn:active[b-r32omwzep5] {
    transform: scale(0.95);
}

/* ── Fade edges for infinite illusion ────────── */
.fc-carousel[b-r32omwzep5]::before,
.fc-carousel[b-r32omwzep5]::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    z-index: 5;
    pointer-events: none;
}

.fc-carousel[b-r32omwzep5]::before {
    left: 0;
    background: linear-gradient(to right,
            var(--mud-palette-background, #121212) 0%,
            transparent 100%);
}

.fc-carousel[b-r32omwzep5]::after {
    right: 0;
    background: linear-gradient(to left,
            var(--mud-palette-background, #121212) 0%,
            transparent 100%);
}

/* ── Responsive ──────────────────────────────── */
@media (max-width: 768px) {
    .fc-carousel[b-r32omwzep5]::before,
    .fc-carousel[b-r32omwzep5]::after {
        width: 40px;
    }

    .fc-carousel__controls[b-r32omwzep5] {
        bottom: 8px;
        right: 8px;
    }
}
/* /Components/Games/AnswerSheet.razor.rz.scp.css */
/* Papel de la hoja de respuestas.

   Blanco fijo en los dos temas: es papel, no una superficie de la app,
   así que no usa los tokens de MudBlazor. Verde y rojo también son
   literales, calibrados contra blanco. */

.answer-sheet[b-02tds7ck8t] {
    --row-h: 28px;
    --sheet-paper: #fdfcf8;
    --sheet-ink: #1a1a1a;
    --sheet-line: #d9d5cc;
    --sheet-acierto: #1b8a4b;
    --sheet-fallo: #c62828;

    /* Techo de la ventana de filas. Por defecto no recorta nada; quien
       monta la hoja en un sitio apretado (el overlay móvil) lo baja para
       que el papel no crezca por encima de la pantalla. */
    --sheet-max-h: 100vh;

    width: 290px;
    padding: 18px 16px;
    background: var(--sheet-paper);
    color: var(--sheet-ink);
    border: 1px solid var(--sheet-line);
    border-radius: 2px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .2);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .85rem;
    line-height: 1;
    user-select: none;
}

.sheet-title[b-02tds7ck8t] {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .72rem;
    text-align: center;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--sheet-line);
    margin-bottom: 6px;
}

/* Flex y no grid: `repeat(var(--cols), 1fr)` no es CSS válido —
   repeat() exige un entero literal, no acepta custom properties. Con
   flex las columnas se reparten solas sin saber cuántas son. */
.sheet-row[b-02tds7ck8t] {
    display: flex;
    align-items: center;
    height: var(--row-h);
}

.sheet-header[b-02tds7ck8t] {
    border-bottom: 1px solid var(--sheet-line);
    margin-bottom: 2px;
}

.col-letter[b-02tds7ck8t] {
    flex: 1 1 0;
    text-align: center;
    font-weight: bold;
    opacity: .7;
}

.row-number[b-02tds7ck8t] {
    flex: 0 0 28px;
    text-align: right;
    padding-right: 8px;
    font-size: .72rem;
    opacity: .6;
}

/* La ventana recorta; el desplazamiento lo hace .sheet-rows con
   transform. Nada de overflow-y: auto aquí — sería un segundo scroller
   en una pantalla que a propósito solo tiene uno.

   --fade-top y --fade-bottom valen 0% cuando ese borde no corta nada, y
   entonces el degradado es un canto duro: sin ellos el papel se veía
   desvanecido arriba ya en la primera pregunta, sin haber nada oculto. */
.sheet-viewport[b-02tds7ck8t] {
    height: min(calc(var(--row-h) * var(--visible-rows)), var(--sheet-max-h));
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent 100%);
}

.sheet-rows[b-02tds7ck8t] {
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}

.sheet-row.current[b-02tds7ck8t] {
    background: rgba(0, 0, 0, .06);
    border-radius: 2px;
}

/* Cue no-color para la fila actual: el fondo tenue solo no llega a 3:1
   y depende solo del color (WCAG 1.4.1). */
.sheet-row.current .row-number[b-02tds7ck8t] {
    font-weight: bold;
    opacity: 1;
}

/* La celda reparte el ancho; la burbuja mide fijo y va centrada. */
.sheet-cell[b-02tds7ck8t] {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bubble[b-02tds7ck8t] {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    border: 1px solid var(--sheet-ink);
    border-radius: 50%;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.bubble.llena[b-02tds7ck8t] {
    background: var(--sheet-ink);
}

.bubble.acierto[b-02tds7ck8t] {
    background: var(--sheet-acierto);
    border-color: var(--sheet-acierto);
}

.bubble.fallo[b-02tds7ck8t] {
    background: var(--sheet-fallo);
    border-color: var(--sheet-fallo);
}

/* La correcta que el estudiante no marcó: anillo, no relleno. */
.bubble.esperada[b-02tds7ck8t] {
    border-color: var(--sheet-acierto);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sheet-acierto) 35%, transparent);
}
/* /Components/Games/DiagnosticoGeneralInforme.razor.rz.scp.css */
.diagnostico-result-page-container[b-5jl9iylwag] {
    width: 100%;
    max-height: 100%;
    display: flex;

    overflow-y: auto;
    scrollbar-gutter: stable both-edges;
    flex-direction: column;
}

.diagnostico-result-page[b-5jl9iylwag] {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px 15px 40px 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.diagnostico-result-header[b-5jl9iylwag] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    margin-bottom: 10px;
}

.diagnostico-score-ring-wrap[b-5jl9iylwag] {
    position: relative;
    width: 172px;
    height: 172px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px 0 4px 0;
}

.diagnostico-score-ring-wrap[b-5jl9iylwag]  .diagnostico-score-ring,
.diagnostico-score-ring-wrap[b-5jl9iylwag]  .diagnostico-score-ring svg {
    width: 172px !important;
    height: 172px !important;
}

.diagnostico-score-ring-label[b-5jl9iylwag] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.diagnostico-score-value[b-5jl9iylwag] {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
}

.diagnostico-score-fraction[b-5jl9iylwag] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
}

.diagnostico-banda[b-5jl9iylwag] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 1rem;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 999px;
    margin-top: 4px;
}

.diagnostico-banda.good[b-5jl9iylwag] {
    color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
}

.diagnostico-banda.mid[b-5jl9iylwag] {
    color: var(--mud-palette-warning);
    background: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent);
}

.diagnostico-banda.low[b-5jl9iylwag] {
    color: var(--mud-palette-error);
    background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
}

.diagnostico-disclaimer[b-5jl9iylwag] {
    font-size: 0.8rem;
    font-style: italic;
    opacity: 0.7;
    margin-top: 4px;
}

.diagnostico-section-title[b-5jl9iylwag] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 5px;
}

.diagnostico-debilidades[b-5jl9iylwag] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.diagnostico-debilidad-card[b-5jl9iylwag] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-error) 40%, transparent);
    border-radius: var(--app-border-radius);
    background: color-mix(in srgb, var(--mud-palette-error) 5%, transparent);
    padding: 10px 12px;
}

.diagnostico-debilidad-icon[b-5jl9iylwag] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--mud-palette-error) 15%, transparent);
    margin-top: 2px;
}

.diagnostico-debilidad-body[b-5jl9iylwag] {
    min-width: 0;
}

.diagnostico-debilidad-familia[b-5jl9iylwag] {
    font-weight: bold;
}

.diagnostico-debilidad-score[b-5jl9iylwag] {
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
}

.diagnostico-debilidad-mensaje[b-5jl9iylwag] {
    font-size: 0.9rem;
    opacity: 0.85;
    margin-top: 4px;
}

.diagnostico-familias[b-5jl9iylwag] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.diagnostico-familia-item[b-5jl9iylwag] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.diagnostico-familia-header[b-5jl9iylwag] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
}

.diagnostico-familia-name[b-5jl9iylwag] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.diagnostico-familia-bar-track[b-5jl9iylwag] {
    width: 100%;
    height: 8px;
    border-radius: var(--app-border-radius);
    background: color-mix(in srgb, var(--mud-palette-text-primary) 12%, transparent);
    overflow: hidden;
}

/* Relleno con `transform` y no con `width`: igual que PathCard, el carril recorta. */
.diagnostico-familia-bar-fill[b-5jl9iylwag] {
    height: 100%;
    width: 100%;
    transform-origin: left center;
    transition: transform 0.4s ease-out;
}

.diagnostico-familia-bar-fill.good[b-5jl9iylwag] {
    background: var(--mud-palette-success);
}

.diagnostico-familia-bar-fill.mid[b-5jl9iylwag] {
    background: var(--mud-palette-warning);
}

.diagnostico-familia-bar-fill.low[b-5jl9iylwag] {
    background: var(--mud-palette-error);
}

.diagnostico-ctas[b-5jl9iylwag] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.diagnostico-detalle[b-5jl9iylwag] {
    margin-top: 15px;
}

.diagnostico-detalle-item[b-5jl9iylwag] {
    padding: 10px;
    border-radius: var(--app-border-radius);
    margin-bottom: 6px;
}

.diagnostico-detalle-item.correct[b-5jl9iylwag] {
    background: color-mix(in srgb, var(--mud-palette-success) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-success) 30%, transparent);
}

.diagnostico-detalle-item.incorrect[b-5jl9iylwag] {
    background: color-mix(in srgb, var(--mud-palette-error) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-error) 30%, transparent);
}

.diagnostico-detalle-header[b-5jl9iylwag] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.diagnostico-detalle-tema[b-5jl9iylwag] {
    font-weight: bold;
}

.diagnostico-detalle-explicacion[b-5jl9iylwag] {
    font-size: 0.9rem;
    font-style: italic;
    margin-top: 4px;
    opacity: 0.85;
}
/* /Components/Games/DiagnosticoInforme.razor.rz.scp.css */
.diagnostico-result-page-container[b-ntid9sm2ui] {
    width: 100%;
    max-height: 100%;
    display: flex;

    overflow-y: auto;
    scrollbar-gutter: stable both-edges;
    flex-direction: column;
}

.diagnostico-result-page[b-ntid9sm2ui] {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px 15px 40px 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.diagnostico-result-header[b-ntid9sm2ui] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    margin-bottom: 10px;
}

.diagnostico-score-ring-wrap[b-ntid9sm2ui] {
    position: relative;
    width: 172px;
    height: 172px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px 0 4px 0;
}

.diagnostico-score-ring-wrap[b-ntid9sm2ui]  .diagnostico-score-ring,
.diagnostico-score-ring-wrap[b-ntid9sm2ui]  .diagnostico-score-ring svg {
    width: 172px !important;
    height: 172px !important;
}

.diagnostico-score-ring-label[b-ntid9sm2ui] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.diagnostico-score-value[b-ntid9sm2ui] {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
}

.diagnostico-score-fraction[b-ntid9sm2ui] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
}

.diagnostico-banda[b-ntid9sm2ui] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 1rem;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 999px;
    margin-top: 4px;
}

.diagnostico-banda.good[b-ntid9sm2ui] {
    color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
}

.diagnostico-banda.mid[b-ntid9sm2ui] {
    color: var(--mud-palette-warning);
    background: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent);
}

.diagnostico-banda.low[b-ntid9sm2ui] {
    color: var(--mud-palette-error);
    background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
}

.diagnostico-disclaimer[b-ntid9sm2ui] {
    font-size: 0.8rem;
    font-style: italic;
    opacity: 0.7;
    margin-top: 4px;
}

.diagnostico-section-title[b-ntid9sm2ui] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 5px;
}

.diagnostico-debilidades[b-ntid9sm2ui] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.diagnostico-debilidad-card[b-ntid9sm2ui] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-error) 40%, transparent);
    border-radius: var(--app-border-radius);
    background: color-mix(in srgb, var(--mud-palette-error) 5%, transparent);
    padding: 10px 12px;
}

.diagnostico-debilidad-icon[b-ntid9sm2ui] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--mud-palette-error) 15%, transparent);
    margin-top: 2px;
}

.diagnostico-debilidad-body[b-ntid9sm2ui] {
    min-width: 0;
}

.diagnostico-debilidad-familia[b-ntid9sm2ui] {
    font-weight: bold;
}

.diagnostico-debilidad-score[b-ntid9sm2ui] {
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
}

.diagnostico-debilidad-mensaje[b-ntid9sm2ui] {
    font-size: 0.9rem;
    opacity: 0.85;
    margin-top: 4px;
}

.diagnostico-familias[b-ntid9sm2ui] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.diagnostico-familia-item[b-ntid9sm2ui] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.diagnostico-familia-header[b-ntid9sm2ui] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
}

.diagnostico-familia-name[b-ntid9sm2ui] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.diagnostico-familia-bar-track[b-ntid9sm2ui] {
    width: 100%;
    height: 8px;
    border-radius: var(--app-border-radius);
    background: color-mix(in srgb, var(--mud-palette-text-primary) 12%, transparent);
    overflow: hidden;
}

/* Relleno con `transform` y no con `width`: igual que PathCard, el carril recorta. */
.diagnostico-familia-bar-fill[b-ntid9sm2ui] {
    height: 100%;
    width: 100%;
    transform-origin: left center;
    transition: transform 0.4s ease-out;
}

.diagnostico-familia-bar-fill.good[b-ntid9sm2ui] {
    background: var(--mud-palette-success);
}

.diagnostico-familia-bar-fill.mid[b-ntid9sm2ui] {
    background: var(--mud-palette-warning);
}

.diagnostico-familia-bar-fill.low[b-ntid9sm2ui] {
    background: var(--mud-palette-error);
}

.diagnostico-ctas[b-ntid9sm2ui] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.diagnostico-detalle[b-ntid9sm2ui] {
    margin-top: 15px;
}

.diagnostico-detalle-item[b-ntid9sm2ui] {
    padding: 10px;
    border-radius: var(--app-border-radius);
    margin-bottom: 6px;
}

.diagnostico-detalle-item.correct[b-ntid9sm2ui] {
    background: color-mix(in srgb, var(--mud-palette-success) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-success) 30%, transparent);
}

.diagnostico-detalle-item.incorrect[b-ntid9sm2ui] {
    background: color-mix(in srgb, var(--mud-palette-error) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-error) 30%, transparent);
}

.diagnostico-detalle-header[b-ntid9sm2ui] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.diagnostico-detalle-tema[b-ntid9sm2ui] {
    font-weight: bold;
}

.diagnostico-detalle-explicacion[b-ntid9sm2ui] {
    font-size: 0.9rem;
    font-style: italic;
    margin-top: 4px;
    opacity: 0.85;
}
/* /Components/Games/GameCarouselSlide.razor.rz.scp.css */
.carousel-slide-container[b-w7xygxsb1a] {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease-in-out;
}

@media (hover: hover) {
    .carousel-slide-container:hover[b-w7xygxsb1a] {
        transform: scale(1.01);
    }
}

.carousel-slide-container[b-w7xygxsb1a]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.1) 100%);
    pointer-events: none;
}

.carousel-slide-content[b-w7xygxsb1a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem;
    z-index: 1;
    max-width: 800px;
}

.slide-icon[b-w7xygxsb1a] {
    font-size: 3.5rem !important;
    margin-bottom: 1rem;
    filter: drop-shadow(0px 4px 6px rgba(0,0,0,0.3));
}

.slide-text[b-w7xygxsb1a] {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.4;
    text-shadow: 0px 2px 4px rgba(0,0,0,0.3);
    margin-bottom: 0.5rem;
}

.slide-text.description[b-w7xygxsb1a] {
    font-size: 1rem;
    font-weight: normal;
}

.slide-action[b-w7xygxsb1a] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.2);
    padding: 0.5rem 1rem;
    border-radius: var(--app-border-radius-lg);
    backdrop-filter: blur(4px);
    transition: background 0.3s;
}

@media (hover: hover) {
    .slide-action:hover[b-w7xygxsb1a] {
        background: rgba(255, 255, 255, 0.35);
    }
}

/* Animations */
.slide-in-top[b-w7xygxsb1a] {
    animation: slideInTop-b-w7xygxsb1a 0.5s ease-out both;
}

.bounce[b-w7xygxsb1a] {
    animation: bounce-b-w7xygxsb1a 2s infinite;
}

.fade-in[b-w7xygxsb1a] {
    animation: fadeIn-b-w7xygxsb1a 1s ease-in both;
    animation-delay: 0.3s;
}

@keyframes slideInTop-b-w7xygxsb1a {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes bounce-b-w7xygxsb1a {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

@keyframes fadeIn-b-w7xygxsb1a {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .carousel-slide-container[b-w7xygxsb1a],
    .carousel-slide-container:hover[b-w7xygxsb1a] {
        transform: none;
    }

    .slide-in-top[b-w7xygxsb1a],
    .bounce[b-w7xygxsb1a],
    .fade-in[b-w7xygxsb1a] {
        animation: none;
    }
}

/* Ranking slides: same shell as the other slides (colored surface, centered
   column, .slide-action pill). El podio se dimensiona con clamp() sobre el ancho
   real del slide, así que no hace falta ningún breakpoint: el layout es el mismo
   de 320px a 1250px. */
.ranking-slide-content[b-w7xygxsb1a] {
    padding: clamp(1rem, 3vw, 1.75rem);
    width: 100%;
}

.ranking-heading[b-w7xygxsb1a] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 0.25rem;
}

[b-w7xygxsb1a] .ranking-heading-icon {
    font-size: 1.75rem;
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.3));
}

.ranking-heading .slide-text[b-w7xygxsb1a] {
    margin-bottom: 0;
    font-size: clamp(1.05rem, 3vw, 1.5rem);
}

.ranking-podium[b-w7xygxsb1a] {
    list-style: none;
    margin: clamp(0.75rem, 2vw, 1.25rem) 0;
    padding: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: clamp(8px, 2.5vw, 28px);
}

.podium-slot[b-w7xygxsb1a] {
    --podium-avatar-size: clamp(46px, 13vw, 68px);
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    flex: 0 1 clamp(84px, 22%, 150px);
}

/* Podio real: plata a la izquierda, oro al centro, bronce a la derecha. */
.podium-slot-1[b-w7xygxsb1a] {
    --podium-avatar-size: clamp(58px, 16vw, 86px);
    order: 2;
}

.podium-slot-2[b-w7xygxsb1a] {
    order: 1;
}

.podium-slot-3[b-w7xygxsb1a] {
    order: 3;
}

/* Alto y ancho explícitos (no aspect-ratio): el borde del <img> hijo engorda la
   caja y estiraba la altura, dejando avatares ovalados en vez de circulares. */
.podium-slot-avatar[b-w7xygxsb1a] {
    position: relative;
    width: var(--podium-avatar-size);
    height: var(--podium-avatar-size);
}

[b-w7xygxsb1a] .podium-slot-img {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.55);
    box-shadow: var(--app-box-shadow-sm);
}

.podium-slot-1[b-w7xygxsb1a]  .podium-slot-img {
    border-color: #ffd700;
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.45);
}

.podium-slot-2[b-w7xygxsb1a]  .podium-slot-img {
    border-color: #d8d8d8;
}

.podium-slot-3[b-w7xygxsb1a]  .podium-slot-img {
    border-color: #cd7f32;
}

/* Marco decorativo del perfil: se desborda del avatar, nunca captura el clic. */
.podium-slot-frame[b-w7xygxsb1a] {
    position: absolute;
    inset: -10%;
    width: 120%;
    height: 120%;
    object-fit: contain;
    pointer-events: none;
    z-index: 1;
}

.podium-slot-rank[b-w7xygxsb1a] {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: #1f1f1f;
    background: #d8d8d8;
    box-shadow: var(--app-box-shadow-sm);
}

.podium-slot-1 .podium-slot-rank[b-w7xygxsb1a] {
    background: #ffd700;
}

.podium-slot-3 .podium-slot-rank[b-w7xygxsb1a] {
    background: #cd7f32;
    color: #fff;
}

.podium-slot-name[b-w7xygxsb1a] {
    margin-top: 12px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: clamp(0.75rem, 2vw, 0.95rem);
    font-weight: 600;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
}

.podium-slot-1 .podium-slot-name[b-w7xygxsb1a] {
    font-weight: 700;
    font-size: clamp(0.82rem, 2.2vw, 1.05rem);
}

.podium-slot-score[b-w7xygxsb1a] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 2px;
    font-size: clamp(0.7rem, 1.8vw, 0.85rem);
    opacity: 0.85;
}
/* /Components/Gamification/StreakMilestoneDialog.razor.rz.scp.css */
.streak-full[b-eektpin8jo] {
    --streak-gold: var(--mud-palette-warning);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.35rem;
    padding: 3rem 1.25rem 1rem;
    border-radius: var(--app-border-radius-lg);
    min-height: 62dvh;
    justify-content: center;
    background:
        radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--streak-gold) 22%, transparent), transparent),
        var(--mud-palette-surface);
}

.tier-epico .streak-full[b-eektpin8jo],
.streak-full.tier-epico[b-eektpin8jo] {
    background:
        radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, #9c27b0 26%, transparent), transparent),
        var(--mud-palette-surface);
}

.tier-legendario .streak-full[b-eektpin8jo],
.streak-full.tier-legendario[b-eektpin8jo] {
    background:
        radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, #ffd700 30%, transparent), transparent),
        radial-gradient(80% 40% at 50% 100%, color-mix(in srgb, #ff5722 18%, transparent), transparent),
        var(--mud-palette-surface);
}

.streak-orb[b-eektpin8jo] {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    opacity: 0.5;
    animation: streak-drift-b-eektpin8jo 7s ease-in-out infinite;
}

.streak-orb-1[b-eektpin8jo] { width: 180px; height: 180px; top: -50px; left: -50px; background: color-mix(in srgb, var(--streak-gold) 30%, transparent); }
.streak-orb-2[b-eektpin8jo] { width: 140px; height: 140px; bottom: 8%; right: -40px; background: color-mix(in srgb, #3399ff 25%, transparent); animation-delay: 1.4s; }
.streak-orb-3[b-eektpin8jo] { width: 90px; height: 90px; top: 38%; right: 12%; background: color-mix(in srgb, #4caf50 22%, transparent); animation-delay: 2.6s; }

.streak-flame-wrap[b-eektpin8jo] {
    position: relative;
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.streak-flame-circle[b-eektpin8jo] {
    position: relative;
    z-index: 2;
    width: 116px;
    height: 116px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--streak-gold) 18%, var(--mud-palette-surface));
    border: 1px solid color-mix(in srgb, var(--streak-gold) 50%, transparent);
    animation: streak-pop-b-eektpin8jo 0.55s cubic-bezier(0.22, 1.4, 0.36, 1) both;
}

.streak-flame-circle[b-eektpin8jo]  .racha-flame {
    position: relative;
    z-index: 2;
    animation: streak-pop-b-eektpin8jo 0.55s cubic-bezier(0.22, 1.4, 0.36, 1) both;
}

.streak-ring[b-eektpin8jo] {
    position: absolute;
    inset: 16px;
    border-radius: 50%;
    border: 2px solid var(--streak-gold);
    opacity: 0;
    z-index: 1;
    animation: streak-ring-b-eektpin8jo 1.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.streak-ring-2[b-eektpin8jo] { animation-delay: 0.35s; }

.streak-full[b-eektpin8jo]  .streak-spark {
    position: absolute;
    color: var(--streak-gold);
    z-index: 3;
    opacity: 0;
    animation: streak-twinkle-b-eektpin8jo 2.4s ease-in-out infinite;
}

.streak-full[b-eektpin8jo]  .streak-spark-1 { top: 6px; right: 18px; font-size: 1.4rem; animation-delay: 0.5s; }
.streak-full[b-eektpin8jo]  .streak-spark-2 { bottom: 18px; left: 8px; font-size: 1rem; animation-delay: 1.1s; }
.streak-full[b-eektpin8jo]  .streak-spark-3 { top: 44px; left: 0; font-size: 0.8rem; animation-delay: 1.7s; }

.streak-full[b-eektpin8jo]  .streak-kicker {
    letter-spacing: 0.2em;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    animation: streak-rise-b-eektpin8jo 0.5s ease-out 0.15s both;
}

.streak-number-row[b-eektpin8jo] {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    animation: streak-rise-b-eektpin8jo 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
}

.streak-number[b-eektpin8jo] {
    font-size: clamp(4.5rem, 18vw, 7rem);
    font-weight: 900;
    line-height: 1;
    color: var(--mud-palette-text-primary);
}

.streak-days[b-eektpin8jo] {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--streak-gold);
}

.streak-full[b-eektpin8jo]  .streak-title {
    font-weight: 800;
    animation: streak-rise-b-eektpin8jo 0.5s ease-out 0.35s both;
}

.streak-full[b-eektpin8jo]  .streak-msg {
    color: var(--mud-palette-text-secondary);
    max-width: 420px;
    animation: streak-rise-b-eektpin8jo 0.5s ease-out 0.45s both;
}

.streak-next[b-eektpin8jo] {
    width: min(420px, 100%);
    margin-top: 1.1rem;
    animation: streak-rise-b-eektpin8jo 0.5s ease-out 0.55s both;
}

.streak-next-label[b-eektpin8jo] {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 0.4rem;
}

.streak-bar[b-eektpin8jo] {
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--mud-palette-background-gray);
}

.streak-fill[b-eektpin8jo] {
    height: 100%;
    width: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--streak-gold), #ff5722);
    transform-origin: left center;
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.streak-actions[b-eektpin8jo] {
    width: 100%;
    padding: 0 0.5rem 1rem;
}

.streak-actions[b-eektpin8jo]  .streak-cta {
    border-radius: var(--app-border-radius-sm);
    font-weight: 800;
    font-size: 1.05rem;
    animation: streak-rise-b-eektpin8jo 0.5s ease-out 0.65s both;
}

@keyframes streak-pop-b-eektpin8jo {
    from { transform: scale(0.3); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes streak-ring-b-eektpin8jo {
    0% { transform: scale(0.6); opacity: 0.7; }
    100% { transform: scale(1.5); opacity: 0; }
}

@keyframes streak-twinkle-b-eektpin8jo {
    0%, 100% { opacity: 0; transform: scale(0.5) rotate(0deg); }
    50% { opacity: 1; transform: scale(1) rotate(20deg); }
}

@keyframes streak-rise-b-eektpin8jo {
    from { transform: translateY(12px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes streak-drift-b-eektpin8jo {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}

@media (prefers-reduced-motion: reduce) {
    .streak-flame-circle[b-eektpin8jo]  .racha-flame,
    .streak-full[b-eektpin8jo]  .streak-kicker,
    .streak-number-row[b-eektpin8jo],
    .streak-full[b-eektpin8jo]  .streak-title,
    .streak-full[b-eektpin8jo]  .streak-msg,
    .streak-next[b-eektpin8jo],
    .streak-actions[b-eektpin8jo]  .streak-cta,
    .streak-orb[b-eektpin8jo] {
        animation: none;
    }

    .streak-ring[b-eektpin8jo],
    .streak-full[b-eektpin8jo]  .streak-spark {
        display: none;
    }

    .streak-fill[b-eektpin8jo] { transition: none; }
}
/* /Components/GeneralRankingPage.razor.rz.scp.css */
.ranking-container[b-dac2cq08hv] {
    /* Siempre embebido (hub de rankings, lobbies, carrusel): el scroll y la altura
       los aporta la página/MainLayout. Un min-height:100dvh aquí reservaba una
       pantalla completa incluso con pocos resultados (espacio muerto) y forzaba un
       scrollbar siempre visible. overflow-x:clip contiene cualquier desborde
       horizontal sin crear un contenedor de scroll anidado. */
    display: flex;
    flex-direction: column;
    user-select: none;
    -webkit-user-select: none;
    overflow-x: clip;
    width: 100%;
    container-type: inline-size;
}

[b-dac2cq08hv] .ranking-header {
    padding: 20px;
    text-align: center;
    border-bottom: 2px solid rgba(128, 128, 128, 0.3);
}

[b-dac2cq08hv] .ranking-title {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 5px;
}

[b-dac2cq08hv] .ranking-date {
    font-size: 1rem;
    color: #999;
    font-style: italic;
}

[b-dac2cq08hv] .ranking-meta {
    margin-top: 6px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.95rem;
}

[b-dac2cq08hv] .top-three-section {
    padding: 0px 20px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 20px;
}

[b-dac2cq08hv] .podium-position {
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: slideUp-b-dac2cq08hv 0.6s ease-out;
}

[b-dac2cq08hv] .podium-position.first {
    order: 2;
}

[b-dac2cq08hv] .podium-position.second {
    order: 1;
}

[b-dac2cq08hv] .podium-position.third {
    order: 3;
}

[b-dac2cq08hv] .medal-icon {
    font-size: 3rem;
    margin-bottom: 10px;
    animation: bounce-b-dac2cq08hv 1s ease-in-out;
}

[b-dac2cq08hv] .podium-position.first .medal-icon {
    font-size: 4rem;
    animation: bounce-b-dac2cq08hv 1s ease-in-out, rotate-b-dac2cq08hv 2s ease-in-out infinite;
}

/* El SVG de MudIcon trae su propio tamaño (Size => font-size fijo) y no heredaba
   el 3rem/4rem del contenedor, por eso el trofeo se veía pequeño. Forzarlo a
   escalar con la fuente del .medal-icon. */
[b-dac2cq08hv] .medal-icon .mud-icon-root {
    width: 1em;
    height: 1em;
    font-size: inherit;
}

[b-dac2cq08hv] .podium-card {
    border-radius: 15px;
    padding: 20px;
    width: 190px;
    max-width: 100%;
    min-width: 0;
    text-align: center;
    box-shadow: var(--app-box-shadow);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
}

@media (hover: hover) {
    [b-dac2cq08hv] .podium-card:hover {
        transform: translateY(-5px);
    }
}

[b-dac2cq08hv] .podium-position.first .podium-card {
    width: 220px;
    padding: 25px;
    border: 3px solid #FFD700;
}

[b-dac2cq08hv] .podium-position.second .podium-card {
    border: 2px solid #C0C0C0;
}

[b-dac2cq08hv] .podium-position.third .podium-card {
    border: 2px solid #CD7F32;
}

/* Fila que encoge, no una caja de ancho fijo: con width:170px el nombre era más
   ancho que la caja de contenido de la tarjeta (190px - 40px de padding = 150px)
   y se salía por fuera del borde. Ahora el nombre trunca dentro de su propio span
   y los stickers quedan fuera del recorte. */
[b-dac2cq08hv] .podium-username {
    /* Tarjeta vertical: los stickers bajan a su propia línea. Compartiéndola con
       el nombre le robaban ~70px de los 150px útiles y lo truncaban a "Marc…". */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    min-width: 0;
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 10px;
}

[b-dac2cq08hv] .podium-username-text {
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-dac2cq08hv] .podium-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    aspect-ratio: 1 / 1;
    margin-bottom: 10px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    box-shadow: var(--app-box-shadow-sm);
}

[b-dac2cq08hv] .podium-position.first .podium-avatar {
    width: 100px;
    height: 100px;
    border-width: 4px;
}

[b-dac2cq08hv] .podium-position.first .podium-username {
    font-size: 1.4rem;
}

[b-dac2cq08hv] .podium-user-info {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

[b-dac2cq08hv] .rest-ranking-section {
    padding: 20px;
    width: 100%;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

[b-dac2cq08hv] .ranking-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

[b-dac2cq08hv] .ranking-item {
    display: flex;
    align-items: center;
    padding: 15px;
    border-radius: var(--app-border-radius);
    background-color: rgba(128, 128, 128, 0.05);
    transition: all 0.3s ease;
    animation: fadeIn-b-dac2cq08hv 0.4s ease-out;
    border: 1px solid transparent;
}

[b-dac2cq08hv] .ranking-you-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 0 8px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.02em;
    color: var(--mud-palette-text-primary);
    vertical-align: middle;
}

[b-dac2cq08hv] .ranking-item.is-current-user {
    border: 1px solid var(--mud-palette-warning);
    background-color: color-mix(in srgb, var(--mud-palette-warning) 8%, var(--mud-palette-surface));
}

[b-dac2cq08hv] .podium-position.is-current-user .podium-card {
    border-color: var(--mud-palette-warning);
    box-shadow: var(--app-box-shadow-hover);
}

[b-dac2cq08hv] .ranking-position {
    font-size: 1.5rem;
    font-weight: bold;
    width: 50px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

[b-dac2cq08hv] .ranking-position.out-of-top-position {
    color: var(--mud-palette-warning);
}

[b-dac2cq08hv] .ranking-avatar {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(128, 128, 128, 0.2);
}

/* ── Flair: avatar frame overlay + sticker icons ──────────── */

/* Wrapper that anchors the frame overlay around the avatar */
[b-dac2cq08hv] .flair-avatar-wrap {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    line-height: 0;
    margin-right: 15px;
}

/* Frame SVG sits as an absolute overlay around the avatar, extending beyond it.
   Uses the same technique as the profile page's .frame-sticker-img. */
[b-dac2cq08hv] .flair-frame-img {
    position: absolute;
    inset: -10px;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    object-fit: contain;
    pointer-events: none;
    z-index: 1;
}

/* Podium cards: slightly larger overshoot for the bigger avatar */
[b-dac2cq08hv] .podium-position .flair-frame-img {
    inset: -12px;
    width: calc(100% + 24px);
    height: calc(100% + 24px);
}

/* First place: even larger avatar ⇒ proportional frame */
[b-dac2cq08hv] .podium-position.first .flair-frame-img {
    inset: -14px;
    width: calc(100% + 28px);
    height: calc(100% + 28px);
}

/* La medalla ya centra la columna del podio; el margen es solo para las filas
   de la lista, donde el avatar va pegado al nombre. */
[b-dac2cq08hv] .podium-position .flair-avatar-wrap {
    margin-right: 0;
}

/* Sticker icons inline next to the display name */
[b-dac2cq08hv] .flair-stickers {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: 4px;
    margin-left: 6px;
    vertical-align: middle;
}

/* Dentro del podio el gap del contenedor ya separa nombre y stickers. */
[b-dac2cq08hv] .podium-username .flair-stickers {
    margin-left: 0;
}

[b-dac2cq08hv] .flair-sticker-img {
    width: 25px;
    height: 25px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
    vertical-align: middle;
}

/* Podium stickers: slightly larger for the bigger cards */
[b-dac2cq08hv] .podium-position .flair-sticker-img {
    width: 20px;
    height: 20px;
}

[b-dac2cq08hv] .podium-position.first .flair-sticker-img {
    width: 22px;
    height: 22px;
}

/* ── End flair ────────────────────────────────────────────── */

[b-dac2cq08hv] .ranking-user-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

[b-dac2cq08hv] .ranking-username {
    font-size: 1.1rem;
    font-weight: bold;
}

/* .premium-name vive en css/app.css: la comparten perfil público y widgets. */

[b-dac2cq08hv] .ranking-stats-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 0.9rem;
    justify-content: center;
}

[b-dac2cq08hv] .stat-inline {
    display: flex;
    align-items: center;
    gap: 5px;
    position: relative;
}



.loading-container[b-dac2cq08hv] {
    min-height: 70dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.error-container[b-dac2cq08hv] {
    min-height: 70dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
}

.error-icon[b-dac2cq08hv] {
    font-size: 4rem;
    margin-bottom: 20px;
}

.error-message[b-dac2cq08hv] {
    color: #f44336;
    font-size: 1.1rem;
}

.ranking-footer-actions[b-dac2cq08hv] {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

@keyframes slideUp-b-dac2cq08hv {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

@keyframes fadeIn-b-dac2cq08hv {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes bounce-b-dac2cq08hv {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes rotate-b-dac2cq08hv {

    0%,
    100% {
        transform: rotate(-5deg);
    }

    50% {
        transform: rotate(5deg);
    }
}

/* Skeleton and Overlay System */
.skeleton-wrapper[b-dac2cq08hv] {
    position: relative;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

[b-dac2cq08hv] .skeleton-content {
    pointer-events: none;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

[b-dac2cq08hv] .skeleton-content.is-blurred {
    filter: blur(5px);
    opacity: 0.6;
}

[b-dac2cq08hv] .flex-center-100 {
    display: flex;
    justify-content: center;
    width: 100%;
}

[b-dac2cq08hv] .flex-center {
    display: flex;
    justify-content: center;
}

[b-dac2cq08hv] .w-100 {
    width: 100%;
}

[b-dac2cq08hv] .mt-8px {
    margin-top: 8px;
}

[b-dac2cq08hv] .mb-8px {
    margin-bottom: 8px;
}

.mb-24px[b-dac2cq08hv] {
    margin-bottom: 24px;
}

.overlay-container[b-dac2cq08hv] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.overlay-card[b-dac2cq08hv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
    border-radius: var(--app-border-radius);
    max-width: 400px;
    width: 90%;
    margin: auto;
    text-align: center;
}

.overlay-card-error[b-dac2cq08hv] {
    background: var(--mud-palette-surface);
    box-shadow: var(--app-box-shadow-hover);
    border: 1px solid var(--mud-palette-lines-default);
}

/* 720px: el podio de 3 columnas necesita ~680px (190+220+190 + gaps + padding).
   Por debajo de eso se apila. El contenedor mide su ancho real, no el viewport,
   así que esto cubre tanto móvil como la columna angosta bajo el drawer. */
@container (max-width: 720px) {
    [b-dac2cq08hv] .top-three-section {
        flex-direction: column;
        align-items: stretch;
    }

    [b-dac2cq08hv] .podium-position {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        width: 100%;
    }

    [b-dac2cq08hv] .podium-position.first,
    [b-dac2cq08hv] .podium-position.second,
    [b-dac2cq08hv] .podium-position.third {
        order: initial;
    }

    /* La medalla ocupa lo que mide, sin reservar una columna fija: con
       flex-basis:100px la fila pedía "100% (tarjeta) + 100px (medalla)" y la
       tarjeta se salía de la pista. min-width:0 en la tarjeta es lo que le
       permite encoger por debajo del ancho de su contenido. */
    [b-dac2cq08hv] .medal-icon {
        flex: 0 0 auto;
        display: flex;
        justify-content: center;
        margin-bottom: 0;
        font-size: 2.25rem;
    }

    [b-dac2cq08hv] .podium-position.first .medal-icon {
        font-size: 2.75rem;
    }

    [b-dac2cq08hv] .podium-card,
    [b-dac2cq08hv] .podium-position.first .podium-card {
        flex: 1;
        width: auto;
        min-width: 0;
        flex-direction: row;
        align-items: center;
        padding: 16px;
    }

    [b-dac2cq08hv] .podium-avatar,
    [b-dac2cq08hv] .podium-position.first .podium-avatar {
        width: 64px;
        height: 64px;
        margin-bottom: 0;
    }

    [b-dac2cq08hv] .podium-position.first .podium-avatar {
        width: 76px;
        height: 76px;
    }

    /* El marco cosmético sobresale ~12px del avatar; el margen tiene que
       despejarlo o el nombre queda pegado al aro. */
    [b-dac2cq08hv] .podium-user-info {
        align-items: flex-start;
        flex: 1;
        min-width: 0;
        margin-left: 24px;
    }

    /* Tarjeta en fila: hay ancho de sobra, así que nombre y stickers vuelven a
       compartir línea. */
    [b-dac2cq08hv] .podium-username,
    [b-dac2cq08hv] .podium-position.first .podium-username {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 6px;
        text-align: left;
        font-size: 1.1rem;
        margin-bottom: 6px;
    }

    [b-dac2cq08hv] .ranking-stats-inline {
        justify-content: flex-start;
    }

    [b-dac2cq08hv] .ranking-item {
        flex-wrap: wrap;
        gap: 10px;
    }
}

/* Móvil estrecho: el podio apilado sigue siendo una fila, solo baja de escala.
   Sin esto el avatar de 80/100px + la medalla de 4rem dejan al nombre sin sitio. */
@container (max-width: 480px) {
    [b-dac2cq08hv] .medal-icon {
        font-size: 1.9rem;
    }

    [b-dac2cq08hv] .podium-position.first .medal-icon {
        font-size: 2.2rem;
    }

    [b-dac2cq08hv] .podium-position {
        gap: 8px;
    }

    [b-dac2cq08hv] .podium-card,
    [b-dac2cq08hv] .podium-position.first .podium-card {
        padding: 12px;
    }

    [b-dac2cq08hv] .podium-avatar {
        width: 52px;
        height: 52px;
    }

    [b-dac2cq08hv] .podium-position.first .podium-avatar {
        width: 62px;
        height: 62px;
    }

    [b-dac2cq08hv] .podium-user-info {
        margin-left: 18px;
    }

    [b-dac2cq08hv] .podium-username,
    [b-dac2cq08hv] .podium-position.first .podium-username {
        font-size: 1rem;
    }

    [b-dac2cq08hv] .podium-position .flair-sticker-img {
        width: 16px;
        height: 16px;
    }

    [b-dac2cq08hv] .ranking-stats-inline {
        gap: 10px;
        font-size: 0.85rem;
    }

    /* En las filas de la lista las métricas bajan a su propia línea: compitiendo
       por el ancho con el nombre, lo partían en tres líneas. */
    [b-dac2cq08hv] .ranking-item .ranking-stats-inline {
        width: 100%;
        justify-content: flex-start;
    }
}

/* Embed Mode Adjustments */
.ranking-container.is-embed[b-dac2cq08hv] {
    min-height: auto;
    padding-bottom: 0;
}

.error-container.is-embed[b-dac2cq08hv] {
    min-height: auto;
    padding: 20px 0;
}

.overlay-container.is-embed[b-dac2cq08hv] {
    background: color-mix(in srgb, var(--mud-palette-background) 70%, transparent);
    backdrop-filter: blur(4px);
    border-radius: var(--app-border-radius);
}

.rest-ranking-section.is-embed[b-dac2cq08hv] {
    padding: 10px 0;
    max-width: 100%;
}
/* /Components/Layout/BottomNav.razor.rz.scp.css */
/* No reserva espacio: la holgura la da app.css con padding-bottom en el scroller del shell. */
.bottom-nav[b-lz0qyd2jrh] {
    position: fixed;
    left: calc(12px + env(safe-area-inset-left, 0px));
    right: calc(12px + env(safe-area-inset-right, 0px));
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    height: var(--bottom-nav-height);
    padding: 4px;
    background: var(--mud-palette-surface);
    border: var(--app-border);
    border-radius: var(--app-border-radius-lg);
    box-shadow: var(--app-box-shadow);
    z-index: 1200;

    /* El ancho no se interpola (auto no es animable): lo tapa el cruce de opacidad.
       `visibility` va retrasada para no cortar el foco antes de que termine. */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(0.94);
    transform-origin: bottom center;
    transition: opacity 0.22s ease,
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 0.28s;
}

.bottom-nav.activa[b-lz0qyd2jrh] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1);
    transition: opacity 0.22s ease,
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s;
}

/* El alto sale de la variable y no del contenido: --bottom-nav-compact-clearance se calcula
   con ella. Va después de `.activa` para que su transform, que arrastra el centrado, gane. */
.bottom-nav.compact[b-lz0qyd2jrh] {
    left: 50%;
    right: auto;
    width: auto;
    height: var(--bottom-nav-compact-height);
    transform: translateX(-50%) scale(0.86);
}

.bottom-nav.compact.activa[b-lz0qyd2jrh] {
    transform: translateX(-50%) scale(1);
}

@media (min-width: 951px) {
    .bottom-nav[b-lz0qyd2jrh] {
        display: none;
    }
}

.bottom-nav-compact-btn[b-lz0qyd2jrh] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: transparent;
    border: none;
    border-radius: var(--app-border-radius);
    color: var(--mud-palette-text-primary);
    font-weight: 600;
    font-size: var(--font-body-sm);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s ease;
}

@media (hover: hover) {
    .bottom-nav-compact-btn:hover[b-lz0qyd2jrh] {
        background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    }
}

.bottom-nav-compact-btn:focus-visible[b-lz0qyd2jrh] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .bottom-nav-compact-btn[b-lz0qyd2jrh] {
        transition: none;
    }

    /* Sin retraso de `visibility`: dejaría la barra saliente capturando toques 0.28s. */
    .bottom-nav[b-lz0qyd2jrh],
    .bottom-nav.activa[b-lz0qyd2jrh] {
        transition: none;
        transform: none;
    }

    .bottom-nav.compact[b-lz0qyd2jrh],
    .bottom-nav.compact.activa[b-lz0qyd2jrh] {
        transform: translateX(-50%);
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.main-frame[b-rb65me4tp2] {
    height: 100dvh;
    width: 100dvw;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.main-frame-content[b-rb65me4tp2] {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.popup-content[b-rb65me4tp2] {
    overflow: hidden;
    width: 100%;
}

.safe-area[b-rb65me4tp2] {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    box-sizing: border-box;
}

.content[b-rb65me4tp2] {
    padding: 0px;
}

main[b-rb65me4tp2] {
    flex: 1;
    min-width: 0;
    min-height: 0;
    background-color: var(--mud-palette-background);
}

.layout-sidebar[b-rb65me4tp2] {
    background-color: var(--mud-palette-background);
    pointer-events: none;
}

.top-row[b-rb65me4tp2] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

.top-row[b-rb65me4tp2]  a,
.top-row[b-rb65me4tp2]  .btn-link {
    white-space: nowrap;
    margin-left: 1.5rem;
    text-decoration: none;
}

@media (hover: hover) {

    .top-row[b-rb65me4tp2]  a:hover,
    .top-row[b-rb65me4tp2]  .btn-link:hover {
        text-decoration: underline;
    }
}

.top-row[b-rb65me4tp2]  a:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

.layout-sidebar[b-rb65me4tp2]  .navbar-toggler {
    position: absolute;
    top: 20px;
    left: 0;
    z-index: 1002;
}


@media (max-width: 950px) {
    .top-row[b-rb65me4tp2] {
        justify-content: space-between;
    }

    .top-row[b-rb65me4tp2]  a,
    .top-row[b-rb65me4tp2]  .btn-link {
        margin-left: 0;
    }

    /* Navegación móvil = barra inferior (BottomNav). El drawer/hamburguesa se oculta por
       completo; las 4 pestañas y sus páginas absorben sus funciones. */
    .layout-sidebar[b-rb65me4tp2] {
        display: none;
    }

    /* La barra flotante asume el safe-area de abajo, así que el shell no debe duplicarlo. */
    .main-frame[b-rb65me4tp2] {
        padding-bottom: 0;
    }

    /* La barra va fija POR ENCIMA (no reserva espacio en el flujo). La holgura para que el
       contenido no quede debajo la pone `article.content` una sola vez (app.css); las
       inmersivas y las superficies con scroller propio se salen por clase. */
}


@media (min-width: 951px) {
    .main-frame-content[b-rb65me4tp2] {
        flex-direction: row;
    }

    .layout-sidebar[b-rb65me4tp2]  .navbar-toggler.open {
        left: calc(var(--layout-sidebar-width) - 4rem);
        top: 20px;
    }

    .layout-sidebar[b-rb65me4tp2] {
        --layout-sidebar-width: 270px;
        width: var(--layout-sidebar-width);
        height: 100%;
        position: sticky;
        top: 0;
        transition: width 0.3s ease;
        z-index: 1000;
    }

    @supports selector(:has(*)) {
        .layout-sidebar:has(.sidebar-container.collapsed)[b-rb65me4tp2] {
            width: 0;
        }
    }

    /* Desktop: sidebar container should be positioned by layout */
    .layout-sidebar .sidebar-container[b-rb65me4tp2] {
        position: static;
        width: 100%;
        max-width: none;
    }

    @supports selector(:has(*)) {

        .layout-sidebar:has(.sidebar-container.collapsed)[b-rb65me4tp2] {

            width: 0;

        }

    }



    .top-row[b-rb65me4tp2] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    /* ::deep is used for Blazor scoped CSS deep selectors */
    .top-row.auth[b-rb65me4tp2]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-rb65me4tp2],
    article[b-rb65me4tp2] {
        padding-left: 2rem;
        padding-right: 1.5rem;
    }
}

.popup-overlay[b-rb65me4tp2] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    /* Use dvh for consistency */
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.popup[b-rb65me4tp2] {
    position: relative;
    background: var(--mud-palette-surface);
    border-radius: var(--app-border-radius);
    padding: 2rem;
    min-width: 500px;
    max-width: 500px;
    /* Unified max-width, removed conflicting 700px */
    width: 90%;
    max-height: 80dvh;
    overflow-y: auto;
    box-shadow: var(--app-box-shadow-hover);
}

/* ::deep is used for Blazor scoped CSS deep selectors */
[b-rb65me4tp2] .popup-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.sidebar[b-wblgthdn3l] {
    display: flex;
    flex-direction: column;
    height: 100%;
    pointer-events: none;
}

/* Sidebar Container */
.sidebar-container[b-wblgthdn3l] {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Let layout control viewport positioning and height */
    z-index: 1001;
    background: var(--mud-palette-drawer-background);
    box-shadow: var(--app-box-shadow-hover);
    pointer-events: auto;

    padding-top: env(safe-area-inset-top, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    box-sizing: border-box;
    overflow: hidden;

    transition: 0.3s ease;
}

.sidebar-container.collapsed[b-wblgthdn3l] {
    transform: translateX(-100%);
    visibility: hidden;
}

/* Header */
.sidebar-header[b-wblgthdn3l] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem 1rem 0 1rem;
    border-bottom: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-background-gray);
    flex-shrink: 0;
}

.sidebar-title-banner[b-wblgthdn3l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    margin-bottom: 10px;
}

/* Fila horizontal de accesos directos: 4 iconos iguales. Antes eran 4 botones apilados a
   ancho completo (~150px de alto); esto lo reduce a una sola fila (~44px). El texto va en
   el tooltip/aria-label, no en pantalla, así que nada se recorta. */
.sidebar-header-options[b-wblgthdn3l] {
    display: flex;
    align-items: stretch;
    gap: 6px;
    padding: 0px 10px 10px 10px;
}

.nav-shortcut[b-wblgthdn3l] {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    background: transparent;
    border: none;
    border-radius: var(--app-border-radius-sm);
    color: var(--mud-palette-primary);
    cursor: pointer;
    transition: background 0.2s ease;
}

@media (hover: hover) {
    .nav-shortcut:hover[b-wblgthdn3l] {
        background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    }
}

.nav-shortcut:focus-visible[b-wblgthdn3l] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.nav-shortcut-mode[b-wblgthdn3l] {
    padding: 0;
}

.nav-shortcut-mode[b-wblgthdn3l]  .study-mode-control-compact,
.nav-shortcut-mode[b-wblgthdn3l]  .study-mode-menu,
.nav-shortcut-mode[b-wblgthdn3l]  .study-mode-menu > button {
    width: 100%;
    height: 100%;
}

.nav-shortcut-mode[b-wblgthdn3l]  .study-mode-menu > button {
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: var(--app-border-radius-sm);
    color: var(--mud-palette-primary);
}

/* Aviso de "sección nueva". Va absoluto para no alterar el alto de la fila de
   accesos: son cuatro botones a ancho igual y cualquier caja en flujo los descuadra.
   El anillo del color del drawer lo despega del icono en ambos temas. */
.nav-shortcut-dot[b-wblgthdn3l] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mud-palette-error);
    box-shadow: 0 0 0 2px var(--mud-palette-drawer-background);
    animation: newDotPulse 2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .nav-shortcut[b-wblgthdn3l] {
        transition: none;
    }

    /* El punto sigue visible: solo deja de latir. */
    .nav-shortcut-dot[b-wblgthdn3l] {
        animation: none;
    }
}

.brand-section[b-wblgthdn3l] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
}

[b-wblgthdn3l] .brand-text {
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--mud-palette-primary);
}

.new-chat-btn[b-wblgthdn3l] {
    background: rgba(102, 179, 255, 0.15) !important;
    border-radius: 10px !important;
    transition: all 0.2s ease !important;
}

@media (hover: hover) {
    .new-chat-btn:hover[b-wblgthdn3l] {
        background: rgba(102, 179, 255, 0.25) !important;
        transform: scale(1.05);
    }
}

/* Mobile Toggle */
.navbar-toggler[b-wblgthdn3l] {
    background-color: var(--mud-palette-action-default);
    border: none;
    border-radius: var(--app-border-radius-sm);
    padding: 0.5rem;
    cursor: pointer;
    color: var(--mud-palette-text-primary);
    pointer-events: auto;
    transition: left 0.3s ease;


    display: block;
    background: color-mix(in srgb, var(--mud-palette-surface) 85%, transparent);
    border: transparent;
    border-radius: 0px 12px 12px 0px;
    backdrop-filter: blur(4px);
    height: 44px;
    width: 44px;
    z-index: 100;
}

/* Scrollable Content */
.sidebar-scrollable[b-wblgthdn3l] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--mud-palette-action-default) transparent;
    min-height: 0;
    /* Important for flex child scrolling */
    -webkit-overflow-scrolling: touch;
    /* Smooth scrolling on iOS */
}

.sidebar-scrollable[b-wblgthdn3l]::-webkit-scrollbar {
    width: 6px;
}

.sidebar-scrollable[b-wblgthdn3l]::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-scrollable[b-wblgthdn3l]::-webkit-scrollbar-thumb {
    background: var(--mud-palette-action-default);
    border-radius: 3px;
}

@media (hover: hover) {
    .sidebar-scrollable[b-wblgthdn3l]::-webkit-scrollbar-thumb:hover {
        background: var(--mud-palette-text-secondary);
    }
}

.sidebar-content[b-wblgthdn3l] {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    gap: 1rem;
}

/* Section Label */
[b-wblgthdn3l] .section-label {
    color: var(--mud-palette-text-secondary) !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    margin-bottom: 0.75rem !important;
    font-size: var(--font-nav-meta) !important;
}

/* Chat History Section (los estilos de las sesiones viven en ChatSessionList.razor.css) */
.chat-history-section[b-wblgthdn3l] {
    margin-bottom: 1rem;
}

/* Footer / User Bar */
.sidebar-footer[b-wblgthdn3l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    padding-bottom: calc(0.875rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-background-gray);
    backdrop-filter: blur(10px);
    flex-shrink: 0;
}

.user-info[b-wblgthdn3l] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.user-avatar[b-wblgthdn3l] {
    flex-shrink: 0;
    box-shadow: var(--app-box-shadow-sm);
}

/* Marco (frameUrl) como overlay sobre el avatar del sidebar */
.avatar-frame[b-wblgthdn3l] {
    position: relative;
    flex-shrink: 0;
    display: inline-flex;
    line-height: 0;
}

.avatar-frame .frame-sticker-img[b-wblgthdn3l] {
    position: absolute;
    width: calc(100% + 14px);
    height: calc(100% + 14px);
    object-fit: contain;
    pointer-events: none;
    z-index: 1;
    inset: -7px;
}

.user-details[b-wblgthdn3l] {
    min-width: 0;
    overflow: hidden;
}

[b-wblgthdn3l] .user-name {
    color: var(--mud-palette-text-secondary) !important;
    font-weight: 500 !important;
    font-size: var(--font-nav-user) !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-wblgthdn3l] .user-plan {
    color: var(--mud-palette-text-secondary) !important;
    font-size: var(--font-nav-meta) !important;
}

.footer-actions[b-wblgthdn3l] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex-shrink: 0;
}

[b-wblgthdn3l] .footer-action-btn {
    width: 100%;
    border: 1px solid var(--mud-palette-divider) !important;
    border-radius: 4px !important;
    flex: 1;
}

.footer-actions .mud-icon-button[b-wblgthdn3l] {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
}

@media (hover: hover) {
    .footer-actions .mud-icon-button:hover[b-wblgthdn3l] {
        background: var(--mud-palette-action-default-hover) !important;
    }
}

/* Sidebar Overlay */
.sidebar-overlay[b-wblgthdn3l] {
    display: none;
}

/* Responsive */
@media (max-width: 950px) {

    .sidebar-overlay[b-wblgthdn3l] {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(4px);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        pointer-events: none;
        z-index: 1000;
    }

    .sidebar-overlay.visible[b-wblgthdn3l] {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .sidebar-container[b-wblgthdn3l] {
        width: 100%;
        max-width: 320px;
        /* Prevent full-width on tablets */
        transition: transform 0.3s ease, visibility 0.3s ease;
        /* Positioning is controlled by layout (MainLayout.razor.css) */
    }

    .sidebar-header[b-wblgthdn3l] {
        padding-right: 1rem;
    }
}

@media (min-width: 951px) {
    .navbar-toggler[b-wblgthdn3l] {
        background: var(--mud-palette-background-gray);
    }

    .sidebar[b-wblgthdn3l] {
        overflow: hidden;
    }

    .sidebar-title-banner[b-wblgthdn3l] {
        padding-right: 40px;
    }

    .sidebar-scrollable.collapsed[b-wblgthdn3l] {
        display: block;
    }

    .sidebar-container[b-wblgthdn3l] {
        width: 250px;
        /* Fixed width on desktop */
        border-radius: var(--app-border-radius-lg);
        overflow: hidden;
        margin: 10px;
    }
}

.footer-promo[b-wblgthdn3l] {
    border-bottom: 2px dashed var(--mud-palette-divider);
    padding-bottom: 5px;
}

[b-wblgthdn3l] .upgrade-button {
    margin-top: 8px;
    margin-bottom: 8px;
    width: 100%;
}

/* Premium Popup */
.premium-popup-overlay[b-wblgthdn3l] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    pointer-events: auto;
}

.premium-popup[b-wblgthdn3l] {
    position: relative;
    background: var(--mud-palette-surface);
    border-radius: var(--app-border-radius);
    padding: 2rem;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--app-box-shadow-hover);
}

[b-wblgthdn3l] .premium-popup-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

.sidebar-footer .sidebar-footer-fold[b-wblgthdn3l] {
    display: grid;
    grid-template-rows: 0fr;
    transform: translateY(20px);
    opacity: 0;
    transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    max-width: 220px;
}

.sidebar-footer-fold-inner[b-wblgthdn3l] {
    min-height: 0;
    overflow: hidden;
}

.sidebar-footer:hover .sidebar-footer-fold[b-wblgthdn3l],
.sidebar-footer-fold.force-show[b-wblgthdn3l] {
    grid-template-rows: 1fr;
    transform: translateY(0);
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .sidebar-footer .sidebar-footer-fold[b-wblgthdn3l] {
        transition: opacity 0.15s ease-out;
        transform: none;
    }
}

[b-wblgthdn3l] .user-plan.premium {
    color: goldenrod !important;
}

.user-meta-row[b-wblgthdn3l] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.coins-badge[b-wblgthdn3l] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--mud-palette-warning);
    line-height: 1;
}

.coins-badge .mud-icon-root[b-wblgthdn3l] {
    font-size: 0.85rem !important;
}
/* PILOTO #169: fila de etiqueta de modo bajo la marca. */
.mode-badge-row[b-wblgthdn3l] {
    display: flex;
    padding: 2px 12px 6px;
}
/* /Components/Layout/PublicStatusStrip.razor.rz.scp.css */
.public-status-strip-wrap[b-9dygmzggx7] {
    z-index: 9990;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    pointer-events: none;
}

.public-status-strip[b-9dygmzggx7] {
    width: 100%;
    max-width: 100%;
    max-height: 2rem;
    min-height: 2rem;
    padding: 0 0.5rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    pointer-events: auto;
}

.public-status-strip__viewport[b-9dygmzggx7] {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.public-status-strip__close[b-9dygmzggx7] {
    flex: 0 0 auto;
    margin-left: 0.25rem;
    background-color: transparent;
    color: inherit;
}

.public-status-strip__track[b-9dygmzggx7] {
    display: inline-flex;
    align-items: center;
    gap: 3rem;
    white-space: nowrap;
    width: 100%;
    justify-content: center;
}

.public-status-strip__track--marquee[b-9dygmzggx7] {
    width: max-content;
    justify-content: flex-start;
    animation: public-status-marquee-b-9dygmzggx7 var(--marquee-duration, 45s) linear infinite;
}

.public-status-strip__track--marquee:hover[b-9dygmzggx7] {
    animation-play-state: paused;
}

@keyframes public-status-marquee-b-9dygmzggx7 {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-50% - 1.5rem));
    }
}

.public-status-strip__text[b-9dygmzggx7] {
    margin: 0;
    line-height: 1.25;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}
/* /Components/Layout/ServerDownBanner.razor.rz.scp.css */
.server-down-banner[b-okc0g3v06v] {
    position: sticky;
    top: 0;
    z-index: 9995;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background-color: var(--mud-palette-error);
    color: var(--mud-palette-error-text);
    font-weight: 600;
    text-align: center;
}

.server-down-banner__text[b-okc0g3v06v] {
    line-height: 1.25;
}
/* /Components/Menores/GateEdadRanking.razor.rz.scp.css */
.retos-menores[b-vonq4l8izg] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}
/* /Components/Ranking/RankingPreviewCard.razor.rz.scp.css */
.ranking-preview-container[b-tb02h1vsgc] {
    background-color: var(--mud-palette-surface);
    border-radius: var(--app-border-radius, 12px);
    margin-bottom: 20px;
    overflow: hidden;
    color: var(--mud-palette-text-primary);
    font-family: 'Inter', sans-serif;
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: var(--app-box-shadow, 0 2px 8px rgba(0, 0, 0, 0.08));
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.ranking-preview-container:hover[b-tb02h1vsgc] {
    border-color: var(--mud-palette-lines-inputs);
    box-shadow: var(--app-box-shadow-hover, 0 4px 16px rgba(0, 0, 0, 0.12));
}

.ranking-preview-inner[b-tb02h1vsgc] {
    display: flex;
    padding: 20px;
    min-height: 240px;
}

.preview-left[b-tb02h1vsgc] {
    flex: 0 0 160px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-right: 1px solid var(--mud-palette-lines-default);
    padding-right: 20px;
    text-align: center;
}

.preview-icon[b-tb02h1vsgc] {
    font-size: 2.8rem;
    color: var(--mud-palette-warning);
    margin-bottom: 10px;
}

.preview-title[b-tb02h1vsgc] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    line-height: 1.3;
}

.preview-right[b-tb02h1vsgc] {
    flex: 1;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.preview-list[b-tb02h1vsgc] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.preview-item[b-tb02h1vsgc] {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background-color 0.15s ease;
}

.preview-item:hover[b-tb02h1vsgc] {
    background-color: var(--mud-palette-action-default-hover);
}

.pos-box[b-tb02h1vsgc] {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    border-radius: 6px;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.pos-1[b-tb02h1vsgc] {
    background-color: var(--mud-palette-warning);
    color: #ffffff;
}

.pos-2[b-tb02h1vsgc] {
    background-color: var(--mud-palette-action-disabled, #9e9e9e);
    color: #ffffff;
}

.pos-3[b-tb02h1vsgc] {
    background-color: var(--mud-palette-secondary);
    color: #ffffff;
}

.pos-other[b-tb02h1vsgc] {
    color: var(--mud-palette-text-secondary);
}

.skeleton-pos[b-tb02h1vsgc] {
    background-color: var(--mud-palette-action-disabled-background);
}

[b-tb02h1vsgc] .preview-avatar {
    border-radius: 50%;
    flex-shrink: 0;
}

.user-info[b-tb02h1vsgc] {
    flex: 1;
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 0.95rem;
    overflow: hidden;
    margin-right: 10px;
}

/* El :not() cede el color a .premium-name (css/app.css): esta regla es
   scoped, así que su especificidad le ganaría al dorado global. */
.username:not(.premium-name)[b-tb02h1vsgc] {
    color: var(--mud-palette-text-primary);
}

.username[b-tb02h1vsgc] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.score[b-tb02h1vsgc] {
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    font-size: 0.95rem;
    white-space: nowrap;
}

.preview-empty[b-tb02h1vsgc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.preview-footer[b-tb02h1vsgc] {
    background-color: var(--mud-palette-background-grey);
    padding: 12px;
    text-align: center;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid var(--mud-palette-lines-default);
    user-select: none;
}

.preview-footer:hover[b-tb02h1vsgc],
.preview-footer:focus-visible[b-tb02h1vsgc] {
    background-color: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
    outline: none;
}

.preview-footer:focus-visible[b-tb02h1vsgc] {
    box-shadow: inset 0 0 0 2px var(--mud-palette-primary);
}

/* @container: la tarjeta se apila según el ancho de .rankings-column, no del
   viewport, para adaptarse cuando el drawer persistente angosta el contenido. */
@container (max-width: 600px) {
    .ranking-preview-inner[b-tb02h1vsgc] {
        flex-direction: column;
        padding: 15px;
    }
    
    .preview-left[b-tb02h1vsgc] {
        flex: none;
        border-right: none;
        border-bottom: 1px solid var(--mud-palette-lines-default);
        padding-right: 0;
        padding-bottom: 15px;
        margin-bottom: 15px;
        flex-direction: row;
        justify-content: flex-start;
        gap: 15px;
    }
    
    .preview-icon[b-tb02h1vsgc] {
        margin-bottom: 0;
        font-size: 2.2rem;
    }
    
    .preview-right[b-tb02h1vsgc] {
        padding-left: 0;
    }
}

/* /Components/Ranking/RankingUserFooter.razor.rz.scp.css */
.ranking-user-footer[b-fvw125in2n] {
    width: 100%;
    /* En flujo, mismo ritmo que .ranking-list: sin sticky, sin fondo ni sombra.
       La fila interna (RankingListItem) ya aporta fondo y resaltado propio;
       una card extra creaba card-dentro-de-card. */
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    position: static;
}

.ranking-divider[b-fvw125in2n] {
    width: 100%;
    height: 1px;
    background: var(--mud-palette-lines-default);
    margin: 4px 0 2px;
}

.ranking-footer-entry-wrapper[b-fvw125in2n] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ranking-footer-hint[b-fvw125in2n] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 15px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.85rem;
    line-height: 1.4;
}

.hint-icon[b-fvw125in2n] {
    flex-shrink: 0;
}

.hint-text[b-fvw125in2n] {
    font-weight: 500;
}
/* /Components/Shared/FondoLogosUniversidad.razor.rz.scp.css */
.fondo-logos[b-7dq01ugz7j] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
    --ficha-color: var(--mud-palette-primary);
    --ficha-opacidad: 0.30;
}

/* En oscuro el primary (#267cd1) es azul oscuro sobre superficie oscura: casi no se ve.
   El lighten sí destaca, y con menos opacidad porque sobre fondo oscuro pesa más. */
.fondo-logos.dark-theme[b-7dq01ugz7j] {
    --ficha-color: var(--mud-palette-primary-lighten);
    --ficha-opacidad: 0.22;
}

/* Silueta con `mask` en vez de la imagen a color: el escudo se tiñe del primary de la app. */
.fondo-logo[b-7dq01ugz7j] {
    position: absolute;
    left: var(--ficha-x);
    bottom: calc(var(--ficha-tam) * -1);
    width: var(--ficha-tam);
    height: var(--ficha-tam);
    background-color: var(--ficha-color);
    opacity: 0;
    -webkit-mask-image: var(--ficha-logo);
    mask-image: var(--ficha-logo);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    animation: fondo-logo-deslizar-b-7dq01ugz7j var(--ficha-duracion) linear var(--ficha-desfase) infinite;
    will-change: transform;
}

@keyframes fondo-logo-deslizar-b-7dq01ugz7j {
    0% {
        transform: translate3d(0, 0, 0) rotate(-10deg);
        opacity: 0;
    }

    18% {
        opacity: var(--ficha-opacidad);
    }

    82% {
        opacity: var(--ficha-opacidad);
    }

    100% {
        transform: translate3d(180%, -560%, 0) rotate(14deg);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fondo-logo[b-7dq01ugz7j] {
        animation: none;
        opacity: var(--ficha-opacidad);
        transform: translate3d(60%, -220%, 0) rotate(-10deg);
    }
}
/* /Components/Shared/LogoUniversidad.razor.rz.scp.css */
.logos-universidad[b-dxz6pl3qtt] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Baldosa cuadrada de fondo claro fijo: los escudos institucionales son a color sobre blanco
   y en tema oscuro se pierden contra el fondo. */
.logo-universidad[b-dxz6pl3qtt] {
    width: 52px;
    height: 52px;
    padding: 7px;
    object-fit: contain;
    border-radius: 14px;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

@media (min-width: 641px) {
    .logo-universidad[b-dxz6pl3qtt] {
        width: 60px;
        height: 60px;
        padding: 8px;
        border-radius: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .logo-universidad[b-dxz6pl3qtt] {
        transition: none;
    }
}
/* /Components/Shared/UbitCheckpointOverlay.razor.rz.scp.css */
.ubit-checkpoint-overlay[b-dvwdc8935u] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 24px;
    display: flex;
    justify-content: center;
    pointer-events: none;
    z-index: 1300;
    padding: 0 16px;
}

.ubit-checkpoint-card[b-dvwdc8935u] {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 420px;
    background: var(--mud-palette-surface, #fff);
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    padding: 10px 20px 10px 10px;
    animation: ubit-checkpoint-in-b-dvwdc8935u 0.35s ease-out, ubit-checkpoint-out-b-dvwdc8935u 0.35s ease-in 3.6s;
    animation-fill-mode: forwards;
}

.ubit-checkpoint-image[b-dvwdc8935u] {
    width: 56px;
    height: 56px;
    object-fit: contain;
    flex-shrink: 0;
}

.ubit-checkpoint-card .ubit-rig[b-dvwdc8935u] {
    height: 56px;
    width: 56px;
    flex-shrink: 0;
}

/* En evento estacional el aviso aparece quieto (sin entrada) para no
   interrumpir el foco del examen; la salida atenuada se mantiene. */
.ubit-checkpoint-card.is-seasonal[b-dvwdc8935u] {
    animation: ubit-checkpoint-out-b-dvwdc8935u 0.35s ease-in 3.6s;
    animation-fill-mode: forwards;
}

.ubit-checkpoint-message[b-dvwdc8935u] {
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.3;
}

@keyframes ubit-checkpoint-in-b-dvwdc8935u {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ubit-checkpoint-out-b-dvwdc8935u {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(24px);
    }
}
/* /Components/Streak/StreakWidget.razor.rz.scp.css */
.streak-widget[b-lldfzzjfsj] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    text-align: left;
    font: inherit;
}

@media (hover: hover) {
    .streak-widget:hover[b-lldfzzjfsj] {
        filter: brightness(1.06);
    }
}

.streak-widget:focus-visible[b-lldfzzjfsj] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.streak-text[b-lldfzzjfsj] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.streak-count[b-lldfzzjfsj] {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
}

.streak-unit[b-lldfzzjfsj] {
    font-weight: 400;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.streak-status[b-lldfzzjfsj] {
    font-size: 0.75rem;
    line-height: 1.3;
}

.is-pending .streak-status[b-lldfzzjfsj] {
    color: var(--mud-palette-warning);
    font-weight: 600;
}

.is-done .streak-status[b-lldfzzjfsj] {
    color: var(--mud-palette-success);
    font-weight: 600;
}
/* /Components/StudyMode/StudyModeBadge.razor.rz.scp.css */
.study-mode-control[b-os7fh6fjuy] {
    min-width: 0;
    max-width: 100%;
}

[b-os7fh6fjuy] .study-mode-menu {
    max-width: 100%;
}

[b-os7fh6fjuy] .mud-button-root {
    min-height: 44px;
    max-width: 100%;
    font-size: var(--font-label);
    text-transform: none;
    text-align: left;
}

[b-os7fh6fjuy] .mud-button-label {
    white-space: normal;
    overflow-wrap: anywhere;
}

[b-os7fh6fjuy] .mud-button-root:focus-visible {
    outline: 2px solid var(--mud-palette-text-primary);
    outline-offset: 2px;
}
/* /Pages/AboutPage.razor.rz.scp.css */
.about-page[b-xr96y50rpg] {
    overflow-y: auto;
}

[b-xr96y50rpg] .about-container {
    margin-top: 2rem;
    margin-bottom: 2rem;
    max-width: 1000px !important;
}

/* Hero Section */
[b-xr96y50rpg] .hero-section {
    padding: 2rem 2rem;
    margin-bottom: 1.5rem;
    background: none;
    color: white;
    border-radius: var(--app-border-radius-lg);
}

[b-xr96y50rpg] .hero-title {
    margin-bottom: 1rem;
}

[b-xr96y50rpg] .hero-subtitle {
    opacity: 0.95;
}

/* Features Grid */
[b-xr96y50rpg] .features-grid {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
}

[b-xr96y50rpg] .feature-card {
    padding: 1rem;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    flex-wrap: nowrap;
    max-width: 600px;
    margin: 0 auto;
    margin-bottom: 1.5rem;
    border-radius: var(--app-border-radius-lg);
    padding: 1.5rem;
    box-shadow: var(--app-box-shadow-sm);
}

[b-xr96y50rpg] .feature-icon-container {
    text-align: center;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
}

[b-xr96y50rpg] .feature-icon {
    margin-bottom: 0.75rem;
}

[b-xr96y50rpg] .feature-title {
    margin-bottom: 0.75rem;
}

[b-xr96y50rpg] .feature-text {
    line-height: 1.6;
    text-align: center;
}

/* Info Sections */
[b-xr96y50rpg] .info-section {
    margin: 0 auto;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--app-box-shadow-sm);
    border-radius: var(--app-border-radius-lg);
    width: 100%;
}

[b-xr96y50rpg] .section-title {
    margin-bottom: 1rem;
}

[b-xr96y50rpg] .section-icon {
    margin-right: 0.5rem;
}

[b-xr96y50rpg] .differentials-list {
    margin-top: 0.5rem;
}

/* Commitment Alert */
[b-xr96y50rpg] .commitment-alert {
    margin-bottom: 1.5rem;
    background: none;
    border-left: solid;
}

[b-xr96y50rpg] .commitment-title {
    margin-bottom: 0.5rem;
}

/* Team Section */
[b-xr96y50rpg] .team-header {
    color: var(--mud-palette-text-primary);
    margin-bottom: 1rem;
    margin-top: 2rem;
}

[b-xr96y50rpg] .team-icon {
    margin-right: 0.5rem;
}

[b-xr96y50rpg] .team-intro {
    margin-bottom: 1.5rem;
    padding-left: 40px;
}

[b-xr96y50rpg] .team-card {
    padding: 1rem;
    min-height: 250px;
    box-shadow: var(--app-box-shadow-sm);
    border-radius: var(--app-border-radius-lg);
}

[b-xr96y50rpg] .team-member-header {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
}

[b-xr96y50rpg] .team-avatar {
    margin-right: 0.75rem;
}

[b-xr96y50rpg] .team-member-info {
    flex: 1;
}

[b-xr96y50rpg] .team-member-name {
    margin-bottom: 0.25rem;
}

[b-xr96y50rpg] .team-member-description {
    margin-top: 0.75rem;
    line-height: 1.6;
}

/* Contact Section */
[b-xr96y50rpg] .contact-section {
    padding: 1.5rem;
    margin-top: 2rem;
    background: none;
    border-radius: var(--app-border-radius-lg);
}

[b-xr96y50rpg] .contact-title {
    margin-bottom: 0.75rem;
}

[b-xr96y50rpg] .contact-subtitle {
    margin-bottom: 1rem;
}

[b-xr96y50rpg] .contact-email-container {
    text-align: center;
    margin-bottom: 1.5rem;
}

[b-xr96y50rpg] .contact-divider {
    background-color: var(--mud-palette-text-primary);
    margin-top: 1rem;
    margin-bottom: 1rem;
    border-color: var(--mud-palette-text-primary);
}

[b-xr96y50rpg] .social-title {
    margin-bottom: 0.75rem;
}

[b-xr96y50rpg] .social-icons-container {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    [b-xr96y50rpg] .hero-section {
        padding: 2rem 1rem;
    }

    [b-xr96y50rpg] .info-section {
        padding: 1rem;
    }

    [b-xr96y50rpg] .team-card {
        margin-bottom: 1rem;
    }

    [b-xr96y50rpg] .contact-section {
        padding: 1.25rem;
    }
}
/* /Pages/ActividadesPage.razor.rz.scp.css */
.actividades-page[b-ejtgsmbfca] {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px 16px;
    width: 100%;
    box-sizing: border-box;
}

.game-item[b-ejtgsmbfca] {
    width: 100%;
    box-shadow: var(--app-box-shadow);
    border-radius: var(--app-border-radius-lg);
    padding: 20px;
    cursor: pointer;
    background: var(--mud-palette-surface);
    border: var(--app-border);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) {
    .game-item:hover[b-ejtgsmbfca] {
        transform: translateY(-3px);
        box-shadow: var(--app-box-shadow-hover);
    }

    .game-item:hover[b-ejtgsmbfca]  .game-item-icon-icon {
        transform: rotate(7deg) scale(1.08) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .game-item[b-ejtgsmbfca],
    [b-ejtgsmbfca] .game-item-icon-icon {
        transition: none;
    }

    .game-item:hover[b-ejtgsmbfca] {
        transform: none;
    }
}

.game-item-chip[b-ejtgsmbfca] {
    position: relative;
}

.game-item-chip > p[b-ejtgsmbfca] {
    position: absolute;
    right: 0;
    top: -30px;
    z-index: 1;
    background-color: var(--mud-palette-background);
    box-shadow: var(--app-box-shadow-hover);
    border-radius: var(--app-border-radius);
}

.game-item-content[b-ejtgsmbfca] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}

.game-item-info[b-ejtgsmbfca] {
    flex: 1;
    margin: 0;
}

.game-item-title-row[b-ejtgsmbfca] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.game-item-title-row > h4[b-ejtgsmbfca] {
    font-weight: bold;
    margin: 0;
}

/* El aviso de novedad va junto al título y no en .game-item-chip: ese chip lo
   reescriben los stats del backend en cada refresco. */
.game-item-new[b-ejtgsmbfca] {
    padding: 2px 8px;
    border-radius: 999px;
    background-color: var(--mud-palette-secondary);
    color: var(--mud-palette-secondary-text);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.5;
    white-space: nowrap;
}

.games-section[b-ejtgsmbfca] {
    margin-bottom: 32px;
}

.games-section-header[b-ejtgsmbfca] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.games-section-header h3[b-ejtgsmbfca] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
}

.games-section-header p[b-ejtgsmbfca] {
    margin: 0;
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}

.games-grid[b-ejtgsmbfca] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px 16px;
}

@media (min-width: 600px) {
    .games-grid[b-ejtgsmbfca] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.game-item-tags-list[b-ejtgsmbfca] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.game-item-tag[b-ejtgsmbfca] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
}

.game-item-icon[b-ejtgsmbfca] {
    overflow: visible;
    height: 56px;
    width: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

[b-ejtgsmbfca] .game-item-icon-icon {
    font-size: 4.5rem;
    transition: transform 0.2s ease;
}

[b-ejtgsmbfca] .game-item-icon-glow {
    position: absolute;
    filter: blur(5px);
    opacity: 0.7;
}

[b-ejtgsmbfca] .carousel-container {
    width: 100%;
    max-width: 1250px;
    margin-left: auto;
    margin-right: auto;
    touch-action: pan-y;
}

.rankings-item[b-ejtgsmbfca] {
    border: 1px solid var(--mud-palette-warning);
}

.rankings-item .game-item-chip > p[b-ejtgsmbfca] {
    background-color: var(--mud-palette-warning);
    color: var(--mud-palette-warning-text);
}
/* /Pages/Chat.razor.rz.scp.css */
/* Speech Recognition Microphone Button Styles */

.mic-button[b-pnn9o0ri98] {
    transition: all 0.2s ease-in-out;
}

.mic-button.recording[b-pnn9o0ri98] {
    animation: pulse-recording-b-pnn9o0ri98 0.6s ease-in-out infinite;
}

.mic-button.transcribing[b-pnn9o0ri98] {
    animation: pulse-transcribing-b-pnn9o0ri98 0.8s ease-in-out infinite;
}

@keyframes pulse-recording-b-pnn9o0ri98 {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes pulse-transcribing-b-pnn9o0ri98 {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Microphone button hover effect */
.mic-button:hover:not(:disabled)[b-pnn9o0ri98] {
    transform: scale(1.1);
}

.mic-button:disabled[b-pnn9o0ri98] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Streaming cursor animation ──────────────────────────── */

[b-pnn9o0ri98] .streaming-message {
    min-height: 40px;
}

[b-pnn9o0ri98] .streaming-text {
    display: block;
    font-size: 1rem;
    line-height: 1.5;
}

/* Match the finished bubble's body1 typography so text doesn't shrink mid-stream */
[b-pnn9o0ri98] .streaming-text p {
    font-size: 1rem;
    line-height: 1.5;
}

/* Collapse the last paragraph to inline so the cursor trails the text
   instead of dropping to its own line below the block <p>. */
[b-pnn9o0ri98] .streaming-text p:last-of-type {
    display: inline;
}

[b-pnn9o0ri98] .streaming-cursor {
    display: inline-block;
    width: 8px;
    height: 1.1em;
    background-color: var(--mud-palette-text-primary);
    margin-left: 2px;
    vertical-align: text-bottom;
    border-radius: 1px;
    animation: blink-cursor-b-pnn9o0ri98 0.8s step-end infinite;
}

@keyframes blink-cursor-b-pnn9o0ri98 {
    50% {
        opacity: 0;
    }
}

/* ── "Assistant is typing" three jumping dots (pre-stream) ──── */

[b-pnn9o0ri98] .typing-dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 0;
}

[b-pnn9o0ri98] .typing-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--mud-palette-text-primary);
    opacity: 0.4;
    animation: typing-bounce-b-pnn9o0ri98 1.2s infinite ease-in-out;
}

[b-pnn9o0ri98] .typing-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

[b-pnn9o0ri98] .typing-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typing-bounce-b-pnn9o0ri98 {

    0%,
    80%,
    100% {
        transform: translateY(0);
        opacity: 0.4;
    }

    40% {
        transform: translateY(-5px);
        opacity: 1;
    }
}
/* /Pages/ChatHistoryPage.razor.rz.scp.css */
.chats-page[b-36fall20zm] {
    max-width: 820px;
    margin: 0 auto;
    padding: 24px 16px;
    width: 100%;
    box-sizing: border-box;
}
/* /Pages/Education/LearningMapPage.razor.rz.scp.css */
.title-row[b-h3d5d2p9pt] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* El header-big fuerza color blanco, así que el chip se recorta del propio fondo en vez de
   traer un color de la paleta que ahí no contrastaría. */
.beta-chip[b-h3d5d2p9pt] {
    padding: 3px 10px;
    border-radius: var(--app-border-radius-full);
    border: 1px solid rgba(255, 255, 255, 0.55);
    background-color: rgba(255, 255, 255, 0.15);
    font-size: var(--font-micro);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.4;
    white-space: nowrap;
}

.beta-note[b-h3d5d2p9pt] {
    opacity: 0.85;
    font-style: italic;
}

/* El drawer es persistente a >951px y se lleva 270px: con el viewport en 1000px esta columna
   mide ~625px. Por eso los cortes van por el ancho REAL del contenedor (@container) y no por el
   del viewport (@media), que aquí mentiría. */
.learning-map[b-h3d5d2p9pt] {
    container-type: inline-size;
    max-width: 980px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px 16px 48px;
}

/* align-items actúa sobre el eje CRUZADO: en fila es el vertical (evita que una rama corta se
   estire a lo alto de la otra), pero al apilarse pasa a ser el horizontal. Si se dejara en
   flex-start ahí, cada rama tomaría su fit-content y se saldría de la pista. */
.map-branches[b-h3d5d2p9pt] {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

/* Las dos ramas conviven en paralelo mientras haya sitio... */
.map-branch[b-h3d5d2p9pt] {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.branch-header[b-h3d5d2p9pt] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--mud-palette-lines-default);
}

.branch-title[b-h3d5d2p9pt] {
    margin: 0;
    min-width: 0;
    font-size: var(--font-title);
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Los caminos de una rama se recorren en orden: una sola columna, siempre. */
.branch-paths[b-h3d5d2p9pt] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.empty-copy[b-h3d5d2p9pt] {
    margin: 0;
    max-width: 420px;
    color: var(--mud-palette-text-secondary);
    text-align: center;
}

/* Esqueleto + overlay (mismo patrón que el ranking): cargando = esqueleto nítido;
   bloqueado o error = esqueleto borroso con una tarjeta encima. */
.skeleton-wrapper[b-h3d5d2p9pt] {
    position: relative;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

[b-h3d5d2p9pt] .skeleton-content {
    pointer-events: none;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

[b-h3d5d2p9pt] .skeleton-content.is-blurred {
    filter: blur(5px);
    opacity: 0.6;
}

.overlay-container[b-h3d5d2p9pt] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.overlay-card[b-h3d5d2p9pt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: auto;
    padding: 32px;
    width: 90%;
    max-width: 420px;
    text-align: center;
    border-radius: var(--app-border-radius);
}

.overlay-card-solid[b-h3d5d2p9pt] {
    background-color: var(--mud-palette-surface);
    border: var(--app-border);
    box-shadow: var(--app-box-shadow-hover);
}

.overlay-card h4[b-h3d5d2p9pt] {
    margin: 0;
    color: var(--mud-palette-text-primary);
}

.overlay-card p[b-h3d5d2p9pt] {
    margin: 0;
    color: var(--mud-palette-text-secondary);
    text-wrap: pretty;
}

/* Bajo ~720px de columna real, las dos ramas ya no caben lado a lado sin estrujar los títulos. */
@container (max-width: 720px) {
    .map-branches[b-h3d5d2p9pt] {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (prefers-reduced-motion: reduce) {
    [b-h3d5d2p9pt] .skeleton-content {
        transition: none;
    }
}
/* /Pages/Education/LessonPage.razor.rz.scp.css */
.lesson-page[b-c1whizx6ts] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 16px 56px;
}

.back-link[b-c1whizx6ts] {
    align-self: flex-start;
}

.lesson-head[b-c1whizx6ts] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--mud-palette-lines-default);
}

.lesson-head-text[b-c1whizx6ts] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lesson-order[b-c1whizx6ts] {
    font-size: var(--font-label);
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.lesson-head-text h3[b-c1whizx6ts] {
    margin: 0;
    color: var(--mud-palette-text-primary);
    text-wrap: balance;
}

/* Bloques de estudio: aire entre ellos, porque las lecciones son largas y se leen enteras. */
.lesson-block[b-c1whizx6ts] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    border-radius: var(--app-border-radius);
    border: var(--app-border);
    background-color: var(--mud-palette-surface);
}

.block-title[b-c1whizx6ts] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: var(--font-body);
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

/* La prosa la pinta MathText, que es hijo: sin ::deep el scope no la alcanza. */
.lesson-page[b-c1whizx6ts]  .prose {
    min-width: 0;
    line-height: 1.65;
    color: var(--mud-palette-text-primary);
    /* Prosa larga: el tope de medida evita renglones interminables en pantallas anchas. */
    max-width: 68ch;
    text-wrap: pretty;
    overflow-wrap: anywhere;
}

.lesson-page[b-c1whizx6ts]  .prose :last-child {
    margin-bottom: 0;
}

.lesson-steps[b-c1whizx6ts],
.example-steps[b-c1whizx6ts] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding-left: 1.4rem;
}

.lesson-steps li[b-c1whizx6ts]::marker,
.example-steps li[b-c1whizx6ts]::marker {
    font-weight: 700;
    color: var(--mud-palette-primary);
}

.worked-example[b-c1whizx6ts] {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 5%, var(--mud-palette-surface));
    border-color: var(--mud-palette-primary);
}

.lesson-page[b-c1whizx6ts]  .example-statement {
    font-weight: 600;
}

.example-answer[b-c1whizx6ts] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px;
    border-radius: var(--app-border-radius-sm);
    background-color: color-mix(in srgb, var(--mud-palette-success) 12%, var(--mud-palette-surface));
}

.lesson-figure[b-c1whizx6ts],
.lesson-figure-img[b-c1whizx6ts] {
    max-width: 100%;
    overflow-x: auto;
}

.premium-extra[b-c1whizx6ts] {
    border-color: var(--mud-palette-warning);
    background-color: color-mix(in srgb, var(--mud-palette-warning) 6%, var(--mud-palette-surface));
}

.premium-list[b-c1whizx6ts] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding-left: 1.2rem;
}

.lesson-cta[b-c1whizx6ts] {
    display: flex;
    justify-content: center;
    padding-top: 8px;
}

.muted-copy[b-c1whizx6ts] {
    margin: 0;
    max-width: 420px;
    color: var(--mud-palette-text-secondary);
    text-align: center;
    text-wrap: pretty;
}
/* /Pages/Education/PathDetailPage.razor.rz.scp.css */
.path-detail[b-v6z5v0fr15] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 16px 48px;
}

.back-link[b-v6z5v0fr15] {
    align-self: flex-start;
}

/* La cabecera se queda a la vista: el sendero es largo y sin ella se pierde de qué camino
   es el nodo que se está mirando. */
.path-head[b-v6z5v0fr15] {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 8px 0 12px;
    background-color: var(--mud-palette-background);
    border-bottom: 2px solid var(--mud-palette-lines-default);
}

.path-head-icon[b-v6z5v0fr15] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: var(--mud-palette-primary-text);
    background-color: var(--mud-palette-primary);
}

.path-head-text[b-v6z5v0fr15] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.path-head-text h3[b-v6z5v0fr15] {
    margin: 0;
    min-width: 0;
    font-size: var(--font-headline);
    color: var(--mud-palette-text-primary);
    text-wrap: balance;
}

.path-head-materia[b-v6z5v0fr15] {
    font-size: var(--font-label);
    color: var(--mud-palette-text-secondary);
}

.path-head-progreso[b-v6z5v0fr15] {
    flex-shrink: 0;
    font-size: var(--font-label);
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
}

/* Eje del sendero: `--trail-amp` es el paso lateral del zig-zag y `--trail-gap` el alto del
   tramo que une dos nodos; los consume LessonNode. */
.lesson-track[b-v6z5v0fr15] {
    --trail-amp: clamp(26px, 15vw, 76px);
    --trail-gap: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: clip;
}

.lesson-track[b-v6z5v0fr15]  .subtema-banner {
    width: 100%;
    margin: 28px 0 4px;
}

.lesson-track[b-v6z5v0fr15]  .subtema-banner:first-child {
    margin-top: 4px;
}

.muted-copy[b-v6z5v0fr15] {
    margin: 0;
    max-width: 420px;
    color: var(--mud-palette-text-secondary);
    text-align: center;
    text-wrap: pretty;
}
/* /Pages/Education/PracticePage.razor.rz.scp.css */
.practice-page[b-e8tvvd1d6g] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 16px 56px;
}

.back-link[b-e8tvvd1d6g] {
    align-self: flex-start;
}

.practice-list[b-e8tvvd1d6g] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.practice-submit[b-e8tvvd1d6g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
}

.submit-hint[b-e8tvvd1d6g] {
    font-size: var(--font-label);
    color: var(--mud-palette-text-secondary);
}

/* El resultado se pone ARRIBA de las preguntas: es lo primero que el usuario quiere ver al
   enviar, y las preguntas quedan debajo como repaso con su corrección. */
.result-card[b-e8tvvd1d6g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px;
    text-align: center;
    border-radius: var(--app-border-radius-lg);
    border: var(--app-border);
    background-color: var(--mud-palette-surface);
    box-shadow: var(--app-box-shadow);
}

.result-card.passed[b-e8tvvd1d6g] {
    border-color: var(--mud-palette-success);
    background-color: color-mix(in srgb, var(--mud-palette-success) 6%, var(--mud-palette-surface));
}

.result-score[b-e8tvvd1d6g] {
    margin: 0;
    font-size: var(--font-result-score);
    font-weight: 800;
    color: var(--mud-palette-text-primary);
}

.result-copy[b-e8tvvd1d6g] {
    margin: 0;
    max-width: 46ch;
    color: var(--mud-palette-text-secondary);
    text-wrap: pretty;
}

.result-stats[b-e8tvvd1d6g] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-top: 6px;
    font-size: var(--font-body-sm);
    color: var(--mud-palette-text-secondary);
}

.result-stats span[b-e8tvvd1d6g] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.result-actions[b-e8tvvd1d6g] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
}

.quota-wall[b-e8tvvd1d6g] {
    border: 1px solid var(--mud-palette-warning);
    border-radius: var(--app-border-radius);
    background-color: color-mix(in srgb, var(--mud-palette-warning) 8%, var(--mud-palette-surface));
}

.muted-copy[b-e8tvvd1d6g] {
    margin: 0;
    max-width: 46ch;
    color: var(--mud-palette-text-secondary);
    text-align: center;
    text-wrap: pretty;
}

/* El foco al resultado es programático: se marca solo si el usuario está navegando con teclado. */
.result-card:focus[b-e8tvvd1d6g] {
    outline: none;
}

.result-card:focus-visible[b-e8tvvd1d6g] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* Ruta inmersiva: el shell renuncia a su holgura (app.css) y la barra se reduce a la píldora,
   que es `fixed` y no reserva espacio. La holgura la pone la página o el último bloque queda
   debajo de la píldora. */
@media (max-width: 950px) {
    .practice-page[b-e8tvvd1d6g] {
        padding-bottom: calc(16px + var(--bottom-nav-compact-clearance));
    }
}
/* /Pages/Education/PracticeV4Page.razor.rz.scp.css */
.practice-v4-page[b-hwxi6dq64u] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 16px 56px;
}

.back-link[b-hwxi6dq64u] {
    align-self: flex-start;
}

.stage-head[b-hwxi6dq64u] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stage-title[b-hwxi6dq64u] {
    margin: 0;
    font-size: var(--font-headline);
    font-weight: 800;
    color: var(--mud-palette-text-primary);
}

.stage-goal[b-hwxi6dq64u] {
    margin: 0;
    max-width: 60ch;
    color: var(--mud-palette-text-secondary);
    text-wrap: pretty;
}

.stage-progress[b-hwxi6dq64u] {
    margin: 0;
    font-size: var(--font-label);
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

/* Transferencia sobria: mismo listado, sin adornos de etapa. */
.transferencia-note[b-hwxi6dq64u] {
    font-weight: 500;
}

.transferencia-list[b-hwxi6dq64u] {
    gap: 20px;
}

.question-list[b-hwxi6dq64u] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.guided-nav[b-hwxi6dq64u] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.practice-submit[b-hwxi6dq64u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
}

.submit-hint[b-hwxi6dq64u] {
    font-size: var(--font-label);
    color: var(--mud-palette-text-secondary);
}

.review-panel[b-hwxi6dq64u] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    border-radius: var(--app-border-radius);
    border: var(--app-border);
    background-color: var(--mud-palette-surface);
    box-shadow: var(--app-box-shadow-sm);
}

.review-title[b-hwxi6dq64u] {
    margin: 0;
    font-size: var(--font-title);
    font-weight: 700;
}

.review-list[b-hwxi6dq64u] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.review-item[b-hwxi6dq64u] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: var(--app-border-radius-sm);
    background-color: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition: border-color 0.15s ease-out;
}

@media (hover: hover) {
    .review-item:hover[b-hwxi6dq64u] {
        border-color: var(--mud-palette-primary);
    }
}

.review-item:focus-visible[b-hwxi6dq64u] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.review-body[b-hwxi6dq64u] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Dos líneas del enunciado: lo justo para reconocer la pregunta sin repetir la práctica. */
.review-item[b-hwxi6dq64u]  .review-statement {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-size: var(--font-body-sm);
    overflow-wrap: anywhere;
}

.review-index[b-hwxi6dq64u] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: var(--font-label);
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    background-color: var(--mud-palette-lines-default);
}

.review-answer[b-hwxi6dq64u] {
    font-size: var(--font-label);
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.review-actions[b-hwxi6dq64u] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

/* El cierre habla del aprendizaje: la etapa que sigue y qué revisar, no de XP ni de racha. */
.v4-result[b-hwxi6dq64u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px;
    text-align: center;
    border-radius: var(--app-border-radius-lg);
    border: var(--app-border);
    background-color: var(--mud-palette-surface);
    box-shadow: var(--app-box-shadow);
}

.v4-result.completed[b-hwxi6dq64u] {
    border-color: var(--mud-palette-success);
    background-color: color-mix(in srgb, var(--mud-palette-success) 6%, var(--mud-palette-surface));
}

.result-title[b-hwxi6dq64u] {
    margin: 0;
    font-size: var(--font-title);
    font-weight: 700;
}

.result-score[b-hwxi6dq64u] {
    margin: 0;
    font-size: var(--font-result-score);
    font-weight: 800;
    color: var(--mud-palette-text-primary);
}

.result-copy[b-hwxi6dq64u] {
    margin: 0;
    max-width: 46ch;
    color: var(--mud-palette-text-secondary);
    text-wrap: pretty;
}

.result-actions[b-hwxi6dq64u] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
}

.quota-wall[b-hwxi6dq64u] {
    border: 1px solid var(--mud-palette-warning);
    border-radius: var(--app-border-radius);
    background-color: color-mix(in srgb, var(--mud-palette-warning) 8%, var(--mud-palette-surface));
}

.muted-copy[b-hwxi6dq64u] {
    margin: 0;
    max-width: 46ch;
    color: var(--mud-palette-text-secondary);
    text-align: center;
    text-wrap: pretty;
}

/* El foco al resultado es programático: se marca solo si el usuario está navegando con teclado. */
.v4-result:focus[b-hwxi6dq64u] {
    outline: none;
}

.v4-result:focus-visible[b-hwxi6dq64u] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* Ruta inmersiva: el shell renuncia a su holgura (app.css) y la barra se reduce a la píldora,
   que es `fixed` y no reserva espacio. La holgura la pone la página o el último bloque queda
   debajo de la píldora. */
@media (max-width: 950px) {
    .practice-v4-page[b-hwxi6dq64u] {
        padding-bottom: calc(16px + var(--bottom-nav-compact-clearance));
    }
}

/* Destino del foco al volver desde la revisión: la pregunta se trae a pantalla sin dibujar
   un anillo sobre una tarjeta que no es un control. */
.question-anchor:focus[b-hwxi6dq64u] {
    outline: none;
}

.question-anchor:focus-visible[b-hwxi6dq64u] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 4px;
    border-radius: var(--app-border-radius);
}
/* /Pages/Estandarizadas/ChatEstandarizadas.razor.rz.scp.css */
.mep-chat[b-ng4ymdv4l8] { display: grid; grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr); gap: 2rem; align-items: start; }
.mep-history[b-ng4ymdv4l8] { border-right: var(--app-border); padding-right: 1rem; }
.mep-history nav[b-ng4ymdv4l8] { display: flex; flex-direction: column; gap: .25rem; margin-top: 1rem; }
.mep-history-item[b-ng4ymdv4l8] { text-align: left; padding: .75rem; border: 0; background: transparent; color: inherit; border-radius: var(--app-border-radius-sm); overflow-wrap: anywhere; }
.mep-history-item[aria-current="page"][b-ng4ymdv4l8] { background: var(--mud-palette-action-default-hover); font-weight: 700; }
.mep-conversation[b-ng4ymdv4l8] { min-width: 0; max-width: 76ch; }
.mep-controls[b-ng4ymdv4l8] { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.mep-controls label[b-ng4ymdv4l8] { display: flex; flex-direction: column; gap: .35rem; }
.mep-controls select[b-ng4ymdv4l8], .mep-composer textarea[b-ng4ymdv4l8] { font: inherit; color: inherit; background: var(--mud-palette-surface); border: var(--app-border); border-radius: var(--app-border-radius-sm); padding: .75rem; }
.mep-empty[b-ng4ymdv4l8] { padding: 2rem 0; }
.mep-empty h2[b-ng4ymdv4l8] { font-size: var(--font-title); }
.mep-empty p[b-ng4ymdv4l8] { margin-top: .75rem; }
.mep-turn[b-ng4ymdv4l8] { border-top: var(--app-border); padding: 1.5rem 0; }
.mep-question[b-ng4ymdv4l8] { margin-bottom: 1.5rem; }
.mep-question p[b-ng4ymdv4l8] { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: .5rem; }
.mep-answer[b-ng4ymdv4l8] { overflow-wrap: anywhere; }
.mep-answer[b-ng4ymdv4l8]  .safe-svg svg { width: 100%; height: auto; max-height: 30rem; }
.mep-note[b-ng4ymdv4l8] { color: var(--mud-palette-text-secondary); font-size: var(--font-label); margin: .75rem 0; }
.mep-composer[b-ng4ymdv4l8] { border-top: var(--app-border); padding-top: 1.5rem; margin-top: 1.5rem; }
.mep-composer textarea[b-ng4ymdv4l8] { width: 100%; display: block; margin: .5rem 0 .75rem; resize: vertical; }
.mep-compose-actions[b-ng4ymdv4l8] { display: flex; align-items: center; gap: 1rem; justify-content: space-between; flex-wrap: wrap; }
.mep-upload[b-ng4ymdv4l8] { display: flex; flex-direction: column; gap: .5rem; font-size: var(--font-label); max-width: 100%; }
.mep-upload[b-ng4ymdv4l8]  input { max-width: 100%; }
.mep-button[b-ng4ymdv4l8] { font: inherit; padding: .65rem 1rem; min-height: 44px; border: var(--app-border); border-radius: var(--app-border-radius-sm); color: inherit; background: var(--mud-palette-surface); }
.mep-send[b-ng4ymdv4l8] { background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); border-color: var(--mud-palette-primary); }
button:disabled[b-ng4ymdv4l8] { opacity: .55; cursor: default; }
button[b-ng4ymdv4l8], select[b-ng4ymdv4l8] { cursor: pointer; }
button:focus-visible[b-ng4ymdv4l8], select:focus-visible[b-ng4ymdv4l8], textarea:focus-visible[b-ng4ymdv4l8] { outline: 2px solid var(--mud-palette-primary); outline-offset: 3px; }
.mep-image-preview[b-ng4ymdv4l8] { display: flex; gap: .75rem; align-items: center; margin-top: .75rem; overflow-wrap: anywhere; }
.mep-image-preview img[b-ng4ymdv4l8] { width: 64px; height: 64px; object-fit: contain; }
.mep-image-preview span[b-ng4ymdv4l8] { min-width: 0; flex: 1; }
.mep-image-preview button[b-ng4ymdv4l8] { color: inherit; background: transparent; border: var(--app-border); min-height: 44px; padding: .5rem; }
@media (max-width: 760px) { .mep-chat[b-ng4ymdv4l8] { grid-template-columns: 1fr; gap: 1.25rem; } .mep-history[b-ng4ymdv4l8] { border-right: 0; border-bottom: var(--app-border); padding: 0 0 1rem; } .mep-history nav[b-ng4ymdv4l8] { max-height: 9rem; overflow-y: auto; } }
/* /Pages/Estandarizadas/InicioMatematicas.razor.rz.scp.css */
.estandarizadas-inicio[b-9j6h08ysn0] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.inicio-temas h2[b-9j6h08ysn0],
.inicio-teoria h2[b-9j6h08ysn0],
.inicio-funciones h2[b-9j6h08ysn0] {
    margin: 0 0 0.75rem;
    font-size: var(--font-title);
    font-weight: 700;
}

.funciones-lista[b-9j6h08ysn0] {
    border-top: var(--app-border);
}

.funcion-card[b-9j6h08ysn0] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.25rem 0;
    border-bottom: var(--app-border);
}

.funcion-contenido[b-9j6h08ysn0] {
    flex: 1;
    min-width: 0;
}

.funcion-titulo[b-9j6h08ysn0] {
    font-size: var(--font-body);
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.funcion-accion[b-9j6h08ysn0] {
    flex-shrink: 0;
}

.funcion-accion[b-9j6h08ysn0]  .mud-button-root {
    min-height: 44px;
    min-width: 10rem;
}

.temas-lista[b-9j6h08ysn0] {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: var(--app-border);
}

.tema-item[b-9j6h08ysn0] {
    padding: 0.75rem 0;
    border-bottom: var(--app-border);
}

.tema-fila[b-9j6h08ysn0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.tema-nombre[b-9j6h08ysn0] {
    font-weight: 600;
}

.tema-acciones[b-9j6h08ysn0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.tema-detalle[b-9j6h08ysn0],
.inicio-aviso[b-9j6h08ysn0] {
    font-size: var(--font-label);
    color: var(--mud-palette-text-secondary);
}

.inicio-aviso[b-9j6h08ysn0] {
    margin: 0;
}

@media (max-width: 600px) {
    .funcion-card[b-9j6h08ysn0] {
        align-items: stretch;
        flex-direction: column;
        gap: 0.75rem;
    }

    .funcion-accion[b-9j6h08ysn0]  .mud-button-root {
        width: 100%;
    }

    .tema-fila[b-9j6h08ysn0] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }
}
/* /Pages/Estandarizadas/PracticaMatematicas.razor.rz.scp.css */
.practica-mock[b-qzkd3d0a1m] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.practica-subtitulo[b-qzkd3d0a1m] {
    margin: 0 0 0.75rem;
    font-size: var(--font-title);
    font-weight: 700;
}

.practica-config[b-qzkd3d0a1m] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.practica-acciones-secundarias[b-qzkd3d0a1m] {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.practica-barra[b-qzkd3d0a1m] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.75rem;
    align-items: baseline;
    font-variant-numeric: tabular-nums;
}

.practica-barra[b-qzkd3d0a1m]  .mud-progress-linear {
    grid-column: 1 / -1;
}

.practica-enlace-fila[b-qzkd3d0a1m] {
    font-size: var(--font-label);
}

.practica-pregunta-card[b-qzkd3d0a1m] {
    margin: 0;
}

.pregunta-meta[b-qzkd3d0a1m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.pregunta-numero[b-qzkd3d0a1m] {
    font-size: var(--font-label);
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.pregunta-enunciado[b-qzkd3d0a1m] {
    margin: 0 0 1rem;
    font-size: var(--font-body);
    font-weight: 600;
    line-height: 1.6;
}

.practica-mock[b-qzkd3d0a1m]  .practica-opciones {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.practica-mock[b-qzkd3d0a1m]  .mud-radio {
    min-height: 48px;
    width: 100%;
    margin: 0;
    padding-right: 0.75rem;
    border: var(--app-border);
    border-radius: var(--app-border-radius-sm);
}

.practica-mock[b-qzkd3d0a1m]  .mud-radio:has(input:checked) {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-background-gray);
}

.practica-mock[b-qzkd3d0a1m]  .mud-radio:focus-within {
    outline: 2px solid var(--mud-palette-text-primary);
    outline-offset: 2px;
}

.practica-acciones-entrega[b-qzkd3d0a1m] {
    display: flex;
    justify-content: flex-end;
    padding-top: 0.25rem;
}

.practica-aviso[b-qzkd3d0a1m] {
    margin: 0.25rem 0 0;
    font-size: var(--font-label);
    color: var(--mud-palette-text-secondary);
}

@media (max-width: 600px) {
    .practica-acciones-entrega[b-qzkd3d0a1m]  .mud-button-root {
        width: 100%;
    }
}

@media (max-width: 400px) {
    .practica-barra[b-qzkd3d0a1m] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 950px) {
    .practica-mock[b-qzkd3d0a1m] {
        padding-bottom: calc(1rem + var(--bottom-nav-compact-clearance));
    }
}
/* /Pages/Estandarizadas/RepasoMatematicas.razor.rz.scp.css */
.repaso-mock[b-tdu2qek8ym] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Tarjeta volteable: botón nativo (teclado gratis), sin animación si el
   usuario prefiere reducir movimiento (red global en app.css). */
.flashcard[b-tdu2qek8ym] {
    position: relative;
    min-height: 180px;
    padding: 1.5rem 1.25rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--app-border-radius-lg);
    background: transparent;
    color: inherit;
    font-size: var(--font-title);
    text-align: center;
    cursor: pointer;
}

.flashcard-reverso[b-tdu2qek8ym] {
    display: none;
}

.flashcard:focus-visible[b-tdu2qek8ym] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 3px;
}

.flashcard.volteada .flashcard-frente[b-tdu2qek8ym] {
    display: none;
}

.flashcard.volteada .flashcard-reverso[b-tdu2qek8ym] {
    display: inline;
}

.flashcard-fuente[b-tdu2qek8ym] {
    font-size: var(--font-label);
    color: var(--mud-palette-text-secondary);
}

.flashcard-nav[b-tdu2qek8ym] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.flashcard[b-tdu2qek8ym] {
    background: var(--mud-palette-surface);
    line-height: 1.65;
}

.flashcard-nav[b-tdu2qek8ym] {
    flex-wrap: wrap;
    justify-content: space-between;
}

.flashcard.volteada[b-tdu2qek8ym] {
    border-color: var(--mud-palette-primary);
}

.flashcard-frente[b-tdu2qek8ym],
.flashcard-reverso[b-tdu2qek8ym] {
    white-space: pre-line;
}
/* /Pages/Estandarizadas/ResultadoMatematicas.razor.rz.scp.css */
.resultado-mock[b-4fgmq0ugom] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.resumen-numero[b-4fgmq0ugom] {
    margin: 0;
    font-size: var(--font-result-score);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.resumen-chips[b-4fgmq0ugom] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

.resumen-desglose[b-4fgmq0ugom] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: var(--app-border);
}

.resumen-tema-item[b-4fgmq0ugom] {
    margin: 0;
    font-size: var(--font-body-sm);
    color: var(--mud-palette-text-secondary);
}

.resultado-acciones-secundarias[b-4fgmq0ugom] {
    display: flex;
    justify-content: center;
}

.revision-lista h2[b-4fgmq0ugom] {
    margin: 0 0 0.75rem;
    font-size: var(--font-title);
    font-weight: 700;
}

.revision-card[b-4fgmq0ugom] {
    margin-bottom: 0.75rem;
}

.revision-cabecera[b-4fgmq0ugom] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.revision-numero[b-4fgmq0ugom] {
    font-size: var(--font-label);
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.revision-enunciado[b-4fgmq0ugom] {
    margin: 0 0 0.75rem;
    font-size: var(--font-body);
    font-weight: 600;
    line-height: 1.6;
}

.revision-opciones[b-4fgmq0ugom] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.6rem;
}

.opcion[b-4fgmq0ugom] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--app-border-radius-sm);
    overflow-wrap: anywhere;
}

.opcion-correcta[b-4fgmq0ugom] {
    border-color: var(--mud-palette-success);
    font-weight: 700;
}

.opcion-elegida[b-4fgmq0ugom] {
    border-color: var(--mud-palette-error);
}

.opcion-marca[b-4fgmq0ugom] {
    margin-left: auto;
    flex-shrink: 0;
    font-size: var(--font-micro);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mud-palette-text-primary);
}

.opcion-marca-error[b-4fgmq0ugom] {
    color: var(--mud-palette-text-primary);
}

.revision-veredicto[b-4fgmq0ugom] {
    margin: 0.75rem 0 0;
    font-size: var(--font-body-sm);
    color: var(--mud-palette-text-secondary);
}

.revision-explicacion[b-4fgmq0ugom] {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: var(--app-border);
    font-size: var(--font-body-sm);
    line-height: 1.6;
}

.resultado-aviso[b-4fgmq0ugom] {
    margin: 0;
    font-size: var(--font-label);
    color: var(--mud-palette-text-secondary);
}
/* /Pages/Estandarizadas/TeoriaMatematicas.razor.rz.scp.css */
.teoria-mep[b-vffza24xql] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.teoria-cuerpo[b-vffza24xql] {
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.teoria-aviso[b-vffza24xql] {
    margin: 0;
    font-size: var(--font-label);
    color: var(--mud-palette-text-secondary);
}
/* /Pages/Estandarizadas/TutorMatematicas.razor.rz.scp.css */
.tutor-page[b-vkd5rcthx6] { padding:1rem; max-width:1250px; margin:auto; }
h1[b-vkd5rcthx6] { font-size:var(--font-headline); margin:0 0 1rem; }
h2[b-vkd5rcthx6] { font-size:var(--font-title); }
.tutor-workspace[b-vkd5rcthx6] { display:grid; grid-template-columns:240px minmax(0,1fr); gap:1rem; height:calc(100dvh - 240px); min-height:500px; }
.tutor-history[b-vkd5rcthx6] { overflow:auto; }
.tutor-actions[b-vkd5rcthx6] { display:flex; flex-wrap:wrap; gap:.25rem; }
.tutor-notice[b-vkd5rcthx6] { margin:.5rem 0 0; font-size:.8rem; color:var(--mud-palette-text-secondary); }
@media(max-width:700px) {
    .tutor-workspace[b-vkd5rcthx6] { display:flex; flex-direction:column; height:auto; min-height:0; }
    .tutor-history[b-vkd5rcthx6] { max-height:220px; }
    .tutor-workspace[b-vkd5rcthx6]  .conversation-shell { height:75dvh; min-height:450px; }
}
/* /Pages/Exams/DiagnosticoPage.razor.rz.scp.css */
.diagnostico-content[b-0tc5q3ja4o] {
    overflow-y: auto;
}

/* ── Pantalla de presentación (intro) ───────────────────────── */

.diagnostico-stats-row[b-0tc5q3ja4o] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
    margin: 16px 0;
    justify-content: center;
}

.diagnostico-stat-item[b-0tc5q3ja4o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 16px;
    border-radius: var(--app-border-radius);
    border: var(--app-border);
    background: var(--mud-palette-surface);
    box-shadow: var(--app-box-shadow-sm);
    min-width: 80px;
    flex-basis: 30%;
}

.diagnostico-stat-value[b-0tc5q3ja4o] {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.diagnostico-stat-label[b-0tc5q3ja4o] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    text-align: center;
}

.diagnostico-intro-text[b-0tc5q3ja4o] {
    text-align: center;
    font-size: 0.9rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.5;
    margin: 8px 0;
}

.cta-button[b-0tc5q3ja4o] {
    margin-top: 8px;
}

.diagnostico-submit-alert[b-0tc5q3ja4o] {
    margin: 0 10px 10px 10px;
}

/* /diagnostico no es ruta inmersiva: abajo va la barra completa y la holgura la da el shell.
   Solo hay que neutralizar la de exam-taking.css, calculada para la píldora. */
@media (max-width: 950px) {

    .exam-intro-cards-container[b-0tc5q3ja4o] {
        padding-bottom: 2rem;
    }

    .exam-question-page[b-0tc5q3ja4o] {
        padding-bottom: 10px;
    }
}

/* /Pages/Exams/EdicionEspecialPage.razor.rz.scp.css */
/* Sin `overflow` propio: `article.content` (app.css) es una columna flex y un hijo con overflow
   distinto de visible pasa a tener `min-height: 0`, se aplasta y se lleva el scroll de la página. */
.examenes-especiales[b-8b58zjbo0s] {
    padding: 0 16px 32px;
}

.especiales-grid[b-8b58zjbo0s] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.especial-card[b-8b58zjbo0s] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    width: 100%;
    position: relative;
    overflow: hidden;
    padding: 24px 28px;
    cursor: pointer;
    border-radius: var(--app-border-radius);
    border: var(--app-border);
    background-color: var(--mud-palette-surface);
    box-shadow: var(--app-box-shadow-sm);
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, border-color 0.2s ease-out;
}

@media (hover: hover) {
    .especial-card:hover[b-8b58zjbo0s] {
        transform: translateY(-2px);
        border-color: var(--mud-palette-primary);
        box-shadow: var(--app-box-shadow);
    }
}

.especial-card:focus-visible[b-8b58zjbo0s] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.edicion-encabezado[b-8b58zjbo0s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* Escudo grande: en el header es la marca de la edición, no una etiqueta de lista. */
.edicion-encabezado[b-8b58zjbo0s]  .logo-universidad {
    width: 88px;
    height: 88px;
    padding: 12px;
    border-radius: 22px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

/* El fondo animado es hermano del contenido, no un pseudo-elemento: sin esto quedaría encima. */
.especial-titulo[b-8b58zjbo0s],
.especial-datos[b-8b58zjbo0s],
.especial-pie[b-8b58zjbo0s] {
    position: relative;
    z-index: 1;
}

.especial-titulo[b-8b58zjbo0s] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--mud-palette-text-primary);
    text-wrap: balance;
    overflow-wrap: anywhere;
}

.especial-datos[b-8b58zjbo0s] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 2px;
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
}

.especial-dato[b-8b58zjbo0s] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* `::deep` porque el atributo de ámbito no llega al markup que renderiza MudIcon. */
.especial-dato[b-8b58zjbo0s]  .especial-dato-icono {
    font-size: 1.1rem;
    color: var(--mud-palette-text-secondary);
}

.especial-pie[b-8b58zjbo0s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 12px;
    border-top: var(--app-border);
}

.especial-fecha[b-8b58zjbo0s] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.especial-accion[b-8b58zjbo0s] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--mud-palette-primary);
}

.especial-accion[b-8b58zjbo0s]  .especial-accion-icono {
    font-size: 1.05rem;
    transition: transform 0.2s ease-out;
}

@media (hover: hover) {
    .especial-card:hover .especial-accion[b-8b58zjbo0s]  .especial-accion-icono {
        transform: translateX(3px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .especial-card[b-8b58zjbo0s],
    .especial-card:hover[b-8b58zjbo0s] {
        transform: none;
        transition: box-shadow 0.2s ease-out, border-color 0.2s ease-out;
    }

    .especial-accion[b-8b58zjbo0s]  .especial-accion-icono,
    .especial-card:hover .especial-accion[b-8b58zjbo0s]  .especial-accion-icono {
        transform: none;
        transition: none;
    }
}
/* /Pages/Exams/ExamenesEspecialesPage.razor.rz.scp.css */
/* Sin `overflow` propio: `article.content` (app.css) es una columna flex y un hijo con overflow
   distinto de visible pasa a tener `min-height: 0`, se aplasta y se lleva el scroll de la página. */
.examenes-especiales[b-lsyfaadhm5] {
    padding: 0 16px 32px;
}

.especiales-grid[b-lsyfaadhm5] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.especial-card[b-lsyfaadhm5] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    width: 92%;
    position: relative;
    overflow: hidden;
    padding: 24px 28px;
    cursor: pointer;
    border-radius: var(--app-border-radius);
    border: var(--app-border);
    background-color: var(--mud-palette-surface);
    box-shadow: var(--app-box-shadow-sm);
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, border-color 0.2s ease-out;
}

.especial-card:nth-child(odd)[b-lsyfaadhm5] {
    align-self: flex-start;
}

.especial-card:nth-child(even)[b-lsyfaadhm5] {
    align-self: flex-end;
}

.categorias-grid[b-lsyfaadhm5] {
    flex-direction: row;
    flex-wrap: wrap;
}

.categorias-grid .especial-card[b-lsyfaadhm5] {
    align-self: stretch !important;
    flex: 1 1 260px;
    width: auto;
}

@media (max-width: 640px) {
    .especial-card[b-lsyfaadhm5] {
        width: 100%;
        align-self: stretch !important;
    }
}

@media (hover: hover) {
    .especial-card:hover[b-lsyfaadhm5] {
        transform: translateY(-2px);
        border-color: var(--mud-palette-primary);
        box-shadow: var(--app-box-shadow);
    }
}

.especial-card:focus-visible[b-lsyfaadhm5] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* El fondo animado es hermano del contenido, no un pseudo-elemento: sin esto quedaría encima. */
.especial-encabezado[b-lsyfaadhm5],
.especial-pie[b-lsyfaadhm5] {
    position: relative;
    z-index: 1;
}

.especial-encabezado[b-lsyfaadhm5] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

@media (hover: hover) {
    .especial-card:hover .especial-encabezado[b-lsyfaadhm5]  .logo-universidad {
        transform: translateY(-2px);
        box-shadow: 0 5px 12px rgba(0, 0, 0, 0.18);
    }
}

@media (prefers-reduced-motion: reduce) {
    .especial-card:hover .especial-encabezado[b-lsyfaadhm5]  .logo-universidad {
        transform: none;
    }
}

.especial-titulo[b-lsyfaadhm5] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--mud-palette-text-primary);
    text-wrap: balance;
    overflow-wrap: anywhere;
}

.especial-pie[b-lsyfaadhm5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 12px;
    border-top: var(--app-border);
}

.especial-fecha[b-lsyfaadhm5] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.especial-accion[b-lsyfaadhm5] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--mud-palette-primary);
}

.especial-accion[b-lsyfaadhm5]  .especial-accion-icono {
    font-size: 1.05rem;
    transition: transform 0.2s ease-out;
}

@media (hover: hover) {
    .especial-card:hover .especial-accion[b-lsyfaadhm5]  .especial-accion-icono {
        transform: translateX(3px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .especial-card[b-lsyfaadhm5],
    .especial-card:hover[b-lsyfaadhm5] {
        transform: none;
        transition: box-shadow 0.2s ease-out, border-color 0.2s ease-out;
    }

    .especial-accion[b-lsyfaadhm5]  .especial-accion-icono,
    .especial-card:hover .especial-accion[b-lsyfaadhm5]  .especial-accion-icono {
        transform: none;
        transition: none;
    }
}
/* /Pages/Exams/ExamPerformanceFullPage.razor.rz.scp.css */
.performance-container[b-e0ta8ifgsl] {
    height: 100dvh;
    overflow-y: auto;
    padding: 20px;
}

.scrollable-content[b-e0ta8ifgsl] {
    max-width: 800px;
    margin: 0 auto;
}

.header[b-e0ta8ifgsl] {
    text-align: center;
    margin-bottom: 20px;
}

.title[b-e0ta8ifgsl] {
    font-size: 2rem;
    font-weight: bold;
}

.subtitle[b-e0ta8ifgsl] {
    color: #999;
    font-style: italic;
}

.section[b-e0ta8ifgsl] {
    border-radius: var(--app-border-radius);
    margin-bottom: 16px;
}

.summary-grid[b-e0ta8ifgsl] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.summary-flex[b-e0ta8ifgsl] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.card[b-e0ta8ifgsl] {
    border-radius: var(--app-border-radius);
    background-color: rgba(128, 128, 128, 0.05);
    padding: 12px;
    max-width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.card-title[b-e0ta8ifgsl] {
    font-weight: 600;
    color: #b8b8b8;
}

.card-value[b-e0ta8ifgsl] {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--mud-palette-text-primary);
}

.card-detail[b-e0ta8ifgsl] {
    color: #999;
}

.table-like[b-e0ta8ifgsl] {
    display: flex;
    flex-direction: row;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: space-evenly;
}


.row-item[b-e0ta8ifgsl] {
    border-radius: var(--app-border-radius);
    box-shadow: 0 0 5px var(--custom-transparent-grey);
    flex: 1;
    min-width: 200px;
    max-width: 400px;
    padding: 1rem;
}

.row-main[b-e0ta8ifgsl] {
    font-weight: 600;
}

.row-metrics[b-e0ta8ifgsl] {
    color: #aaa;
    font-size: 0.95rem;
}

.row-bar[b-e0ta8ifgsl] {
    display: flex;
    justify-content: space-evenly;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;

    color: #aaa;
}

.two-columns[b-e0ta8ifgsl] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.compact .row-item[b-e0ta8ifgsl] {
    max-width: 350px;
}

.compact ul[b-e0ta8ifgsl] {
    margin: 0;
}

.empty-state[b-e0ta8ifgsl] {
    border: 1px dashed rgba(128, 128, 128, 0.4);
    border-radius: var(--app-border-radius);
    padding: 12px;
    color: #aaa;
}

.empty-state.positive[b-e0ta8ifgsl] {
    color: #5fcf7a;
}

.error-row[b-e0ta8ifgsl] {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.loading-container[b-e0ta8ifgsl],
.error-container[b-e0ta8ifgsl] {
    height: calc(100dvh - 40px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
}

@media (max-width: 900px) {

    .summary-grid[b-e0ta8ifgsl],
    .two-columns[b-e0ta8ifgsl] {
        grid-template-columns: 1fr;
    }

    .error-row[b-e0ta8ifgsl] {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Scroller propio de 100dvh: se sale de la holgura del shell (`superficie-propia`) y pone
   la suya. Al final del archivo porque los breakpoints de arriba usan el atajo `padding`. */
@media (max-width: 950px) {
    .performance-container[b-e0ta8ifgsl] {
        padding-bottom: var(--bottom-nav-clearance);
    }
}
/* /Pages/Exams/ExamPerformancePage.razor.rz.scp.css */
/* ── keyframes ── */
@keyframes fadeSlideUp-b-b88eitkmeq {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

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

@keyframes fadeIn-b-b88eitkmeq {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ── keyframes ── */
@keyframes fadeSlideUp-b-b88eitkmeq {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

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

@keyframes fadeIn-b-b88eitkmeq {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ── page wrapper ── */
.summary-page[b-b88eitkmeq] {
    height: 100dvh;
    padding: 16px;
    background: radial-gradient(ellipse at top right, rgba(25, 118, 210, 0.22) 0%, transparent 55%), radial-gradient(ellipse at bottom left, rgba(129, 199, 132, 0.18) 0%, transparent 50%), radial-gradient(ellipse at center, rgba(17, 27, 49, 0.6) 0%, transparent 80%);
    background-attachment: fixed;
    padding: 16px;
    background: radial-gradient(ellipse at top right, rgba(25, 118, 210, 0.22) 0%, transparent 55%), radial-gradient(ellipse at bottom left, rgba(129, 199, 132, 0.18) 0%, transparent 50%), radial-gradient(ellipse at center, rgba(17, 27, 49, 0.6) 0%, transparent 80%);
    background-attachment: fixed;
    overflow-y: auto;
}

.summary-shell[b-b88eitkmeq] {
    width: min(1100px, 100%);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    animation: fadeIn-b-b88eitkmeq 0.35s ease both;
    height: 100%;
}

.summary-shell[b-b88eitkmeq] {
    width: min(1100px, 100%);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    animation: fadeIn-b-7gxtwhonjd 0.35s ease both;
    height: 100%;
}

.header-block[b-b88eitkmeq] {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
    background: rgba(11, 22, 44, 0.45);
    animation: fadeSlideUp-b-b88eitkmeq 0.4s ease both;
}

.header-block h2[b-b88eitkmeq] {
    margin: 0;
}

.header-block p[b-b88eitkmeq] {
    margin: 2px 0 0;
    color: #b7c4da;
}

.stats-grid[b-b88eitkmeq] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.metric-card[b-b88eitkmeq] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    border-radius: var(--app-border-radius);
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(17, 27, 49, 0.65);
    animation: fadeSlideUp-b-b88eitkmeq 0.45s ease both;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(17, 27, 49, 0.65);
    animation: fadeSlideUp-b-b88eitkmeq 0.45s ease both;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.metric-card:hover[b-b88eitkmeq] {
    transform: translateY(-3px);
    box-shadow: var(--app-box-shadow-hover);
}

/* staggered entrance for the four stat cards */
.stats-grid .metric-card:nth-child(1)[b-b88eitkmeq] {
    animation-delay: 0.05s;
}

.stats-grid .metric-card:nth-child(2)[b-b88eitkmeq] {
    animation-delay: 0.12s;
}

.stats-grid .metric-card:nth-child(3)[b-b88eitkmeq] {
    animation-delay: 0.19s;
}

.stats-grid .metric-card:nth-child(4)[b-b88eitkmeq] {
    animation-delay: 0.26s;
}

.metric-label[b-b88eitkmeq] {
    font-size: 0.82rem;
    color: #a8b2c6;
}

.metric-value[b-b88eitkmeq] {
    font-size: 1.05rem;
    font-weight: 700;
    color: #f5f8ff;
}

.metric-detail[b-b88eitkmeq] {
    font-size: 0.8rem;
    color: #9fb0ce;
}

.content-grid[b-b88eitkmeq] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.panel[b-b88eitkmeq] {
    border-radius: 14px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(17, 27, 49, 0.65);
    animation: fadeSlideUp-b-b88eitkmeq 0.45s ease both;
    transition: box-shadow 0.18s ease;
}

.panel:hover[b-b88eitkmeq] {
    box-shadow: var(--app-box-shadow);
}

/* staggered entrance for content panels */
.content-grid .panel:nth-child(1)[b-b88eitkmeq] {
    animation-delay: 0.18s;
}

.content-grid .panel:nth-child(2)[b-b88eitkmeq] {
    animation-delay: 0.28s;
}

.content-grid .panel:nth-child(3)[b-b88eitkmeq] {
    animation-delay: 0.38s;
}

.content-grid .panel:nth-child(4)[b-b88eitkmeq] {
    animation-delay: 0.48s;
}

.panel h4[b-b88eitkmeq] {
    margin: 0 0 10px;
}

.panel h5[b-b88eitkmeq] {
    margin: 0 0 8px;
}

.chart-panel[b-b88eitkmeq] {
    min-height: 230px;
}

.empty-message[b-b88eitkmeq] {
    border: 1px dashed rgba(180, 196, 222, 0.35);
    border-radius: var(--app-border-radius);
    padding: 10px;
    color: #a8b2c6;
}

.empty-message.positive[b-b88eitkmeq] {
    border-color: rgba(76, 175, 80, 0.45);
    color: #79d47d;
}

.recommendations-list[b-b88eitkmeq] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.recommendation-item[b-b88eitkmeq] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    border-radius: var(--app-border-radius);
    padding: 10px;
    background: rgba(255, 255, 255, 0.03);
}

.recommendation-item p[b-b88eitkmeq] {
    margin: 2px 0 0;
    font-size: 0.9rem;
    color: #b6c4dc;
}

.focus-grid[b-b88eitkmeq] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.tag[b-b88eitkmeq] {
    border-radius: 999px;
    padding: 6px 10px;
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.85rem;
}

.tag.success[b-b88eitkmeq] {
    border: 1px solid rgba(76, 175, 80, 0.6);
    background: rgba(76, 175, 80, 0.12);
}

.tag.danger[b-b88eitkmeq] {
    border: 1px solid rgba(255, 82, 82, 0.6);
    background: rgba(255, 82, 82, 0.12);
}

.recent-error[b-b88eitkmeq] {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    border-radius: var(--app-border-radius);
    margin-bottom: 7px;
    background: rgba(255, 255, 255, 0.03);
}

.recent-error p[b-b88eitkmeq] {
    margin: 2px 0 0;
    color: #afbdd5;
    font-size: 0.85rem;
}

.state-card[b-b88eitkmeq] {
    min-height: calc(100dvh - 64px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
}

.state-card p[b-b88eitkmeq] {
    max-width: 500px;
    color: #b6c4dc;
}

@media (max-width: 980px) {
    .stats-grid[b-b88eitkmeq] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .content-grid[b-b88eitkmeq],
    .focus-grid[b-b88eitkmeq] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .summary-page[b-b88eitkmeq] {
        padding: 10px;
    }

    .stats-grid[b-b88eitkmeq] {
        grid-template-columns: 1fr;
    }

    .recent-error[b-b88eitkmeq] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* La barra inferior flota por encima del contenido: esta pantalla deja su propia
   holgura para que lo último no quede debajo. Va al final del archivo a propósito:
   los breakpoints más estrechos usan el atajo `padding` y reiniciarían este valor. */
@media (max-width: 950px) {
    .summary-page[b-b88eitkmeq] {
        padding-bottom: var(--bottom-nav-clearance);
    }
}
/* /Pages/Exams/ExamRankingPage.razor.rz.scp.css */
.ranking-container[b-ii9xnp2jq1] {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    overflow-y: auto;
}

.ranking-header[b-ii9xnp2jq1] {
    padding: 20px;
    text-align: center;
    border-bottom: 2px solid rgba(128, 128, 128, 0.3);
}

.ranking-title[b-ii9xnp2jq1] {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 5px;
}

.ranking-date[b-ii9xnp2jq1] {
    font-size: 1rem;
    color: #999;
    font-style: italic;
}

.top-three-section[b-ii9xnp2jq1] {
    padding: 0px 20px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 20px;
}

.podium-position[b-ii9xnp2jq1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: slideUp-b-ii9xnp2jq1 0.6s ease-out;
}

.podium-position.first[b-ii9xnp2jq1] {
    order: 2;
}

.podium-position.second[b-ii9xnp2jq1] {
    order: 1;
}

.podium-position.third[b-ii9xnp2jq1] {
    order: 3;
}

.podium-card[b-ii9xnp2jq1] {
    border-radius: 15px;
    padding: 20px;
    width: 180px;
    text-align: center;
    box-shadow: var(--app-box-shadow);
    transition: transform 0.3s ease;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
}

@media (hover: hover) {
    .podium-card:hover[b-ii9xnp2jq1] {
        transform: translateY(-5px);
    }
}

.podium-position.first .podium-card[b-ii9xnp2jq1] {
    width: 220px;
    padding: 25px;
    border: 3px solid #FFD700;
}

.podium-position.second .podium-card[b-ii9xnp2jq1] {
    border: 2px solid #C0C0C0;
}

.podium-position.third .podium-card[b-ii9xnp2jq1] {
    border: 2px solid #CD7F32;
}

.podium-username[b-ii9xnp2jq1] {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 160px;
}

.podium-username.premium[b-ii9xnp2jq1],
.ranking-username.premium[b-ii9xnp2jq1] {
    color: goldenrod;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
}

.podium-avatar[b-ii9xnp2jq1] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    aspect-ratio: 1 / 1;
    margin-bottom: 10px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    box-shadow: var(--app-box-shadow-sm);
}

.podium-position.first .podium-avatar[b-ii9xnp2jq1] {
    width: 100px;
    height: 100px;
    border-width: 4px;
}

.podium-position.first .podium-username[b-ii9xnp2jq1] {
    font-size: 1.4rem;
}

.podium-stats[b-ii9xnp2jq1] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.9rem;
}

.podium-user-info[b-ii9xnp2jq1] {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
}

.stat-row[b-ii9xnp2jq1] {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.2);
}

.stat-label[b-ii9xnp2jq1] {
    color: #999;
}

.stat-value[b-ii9xnp2jq1] {
    font-weight: bold;
}

.rest-ranking-section[b-ii9xnp2jq1] {
    padding: 20px;
    width: 100%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;

}

.ranking-list-header[b-ii9xnp2jq1] {
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 15px;
    padding-left: 10px;
}

.ranking-list[b-ii9xnp2jq1] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ranking-item[b-ii9xnp2jq1] {
    display: flex;
    align-items: center;
    padding: 15px;
    border-radius: var(--app-border-radius);
    background-color: rgba(128, 128, 128, 0.05);
    transition: all 0.3s ease;
    animation: fadeIn-b-ii9xnp2jq1 0.4s ease-out;
}

@media (hover: hover) {
    .ranking-item:hover[b-ii9xnp2jq1] {
        background-color: rgba(128, 128, 128, 0.1);
        transform: translateX(5px);
    }
}

.ranking-position[b-ii9xnp2jq1] {
    font-size: 1.5rem;
    font-weight: bold;
    width: 50px;
    text-align: center;
    color: #666;
}

.ranking-avatar[b-ii9xnp2jq1] {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px;
    border: 2px solid rgba(128, 128, 128, 0.2);
}

.ranking-user-info[b-ii9xnp2jq1] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ranking-username[b-ii9xnp2jq1] {
    font-size: 1.1rem;
    font-weight: bold;
}

.ranking-stats-inline[b-ii9xnp2jq1] {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 0.9rem;
    justify-content: center;
}

.stat-inline[b-ii9xnp2jq1] {
    display: flex;
    align-items: center;
    gap: 5px;
    position: relative;
}


.loading-container[b-ii9xnp2jq1] {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.error-container[b-ii9xnp2jq1] {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
}

.error-icon[b-ii9xnp2jq1] {
    font-size: 4rem;
    margin-bottom: 20px;
}

.error-message[b-ii9xnp2jq1] {
    color: #f44336;
    font-size: 1.1rem;
}

@keyframes slideUp-b-ii9xnp2jq1 {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

@keyframes fadeIn-b-ii9xnp2jq1 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .top-three-section[b-ii9xnp2jq1] {
        flex-direction: column;
        align-items: start;
        gap: 15px;
    }

    .podium-position[b-ii9xnp2jq1] {
        order: unset !important;
        flex-direction: row;
        width: 100%;
    }

    .podium-card[b-ii9xnp2jq1],
    .podium-position.first .podium-card[b-ii9xnp2jq1] {
        display: flex;
        flex: 1;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 10px;
        padding: 15px;
    }

    .podium-username[b-ii9xnp2jq1] {
        flex: 1;
        text-align: left;
    }

    .podium-avatar[b-ii9xnp2jq1] {
        width: 60px;
        height: 60px;
        border: 2px solid rgba(255, 255, 255, 0.3);
        margin-bottom: 0px;
    }

    .podium-position.first .podium-avatar[b-ii9xnp2jq1] {
        width: 80px;
        height: 80px;
        border-width: 3px;
    }

    .podium-username[b-ii9xnp2jq1] {
        margin-bottom: 0px;
    }
}
/* /Pages/Exams/ExamResultsHistory.razor.rz.scp.css */
.results-history-container[b-43he8l68dm] {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    overflow-y: auto;
}

.results-history-header[b-43he8l68dm] {
    padding: 20px;
    text-align: center;
    border-bottom: 2px solid rgba(128, 128, 128, 0.3);
}

.results-history-title[b-43he8l68dm] {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 5px;
}

.results-history-subtitle[b-43he8l68dm] {
    font-size: 1rem;
    color: #999;
    font-style: italic;
}

.results-history-stats-inline[b-43he8l68dm] {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 0.9rem;
    justify-content: center;
}

.stats-inline[b-43he8l68dm] {
    display: flex;
    align-items: center;
    gap: 5px;
    position: relative;
}


.result-history-list-item[b-43he8l68dm] {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    max-width: 500px;
    padding: 10px;
    justify-content: space-around;
    width: calc(100% - 20px);
    border-bottom: 1px dashed var(--custom-transparent-grey);
}

.result-history-item-title[b-43he8l68dm] {
    font-weight: bold;
    font-size: larger;
    margin: 5px;
    margin-bottom: 0;
}

.result-history-item-id[b-43he8l68dm] {
    margin: 5px;
    font-style: italic;
}

.result-history-list[b-43he8l68dm] {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin: 20px;
}
/* La barra inferior flota por encima del contenido: esta pantalla deja su propia
   holgura para que lo último no quede debajo. Va al final del archivo a propósito:
   los breakpoints más estrechos usan el atajo `padding` y reiniciarían este valor. */
@media (max-width: 950px) {
    .results-history-container[b-43he8l68dm] {
        padding-bottom: var(--bottom-nav-clearance);
    }
}
/* /Pages/Exams/ExamTakingPage.razor.rz.scp.css */
/* Solo lo propio de esta página. La cáscara del examen (contenedores,
   tarjeta de pregunta, opciones, figura) vive en css/exam-taking.css,
   compartida con SimulacroTakingPage. */

/* ── Tarjetas de la pantalla de bienvenida ──────────────────── */

.exam-intro-card.info[b-pys4bwt6u7] {
    height: 150px;
}

.mini-guide-card[b-pys4bwt6u7] {
    max-height: none;
    align-items: flex-start;
    gap: 10px;
}

.mini-guide-summary[b-pys4bwt6u7],
.mini-guide-recommendation[b-pys4bwt6u7] {
    width: 100%;
}

.mini-guide-block[b-pys4bwt6u7] {
    width: 100%;
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) 20%, transparent);
    border-radius: var(--app-border-radius);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mini-guide-block-title[b-pys4bwt6u7] {
    font-size: 1rem;
}

.mini-guide-checklist[b-pys4bwt6u7] {
    margin: 0;
    padding-left: 20px;
}

/* ── Bloques premium ────────────────────────────────────────── */

.premium-top-info[b-pys4bwt6u7],
.premium-chip-list[b-pys4bwt6u7] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.premium-info-block[b-pys4bwt6u7],
.premium-guide[b-pys4bwt6u7] {
    width: 100%;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 40%, transparent);
    border-radius: var(--app-border-radius);
    padding: 10px;
    text-align: left;
}

.premium-guide-block[b-pys4bwt6u7] {
    margin-top: 8px;
    padding: 6px 10px;
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 25%, transparent);
    border-radius: var(--app-border-radius-sm);
}

.exam-explanation-skeleton[b-pys4bwt6u7] {
    height: 20%;
}

/* ── Historial de intentos ──────────────────────────────────── */

.stats-inline[b-pys4bwt6u7] {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 0.9rem;
    justify-content: center;
}

.stat-inline[b-pys4bwt6u7] {
    display: flex;
    align-items: center;
    gap: 5px;
    position: relative;
}

.exam-try-item[b-pys4bwt6u7] {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    max-width: 500px;
    height: 100px;
    box-shadow: var(--app-box-shadow-sm);
    padding: 20px;
    border-radius: var(--app-border-radius-lg);
    justify-content: space-around;
}

.exam-try-list[b-pys4bwt6u7] {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-height: 100px;
    min-width: 300px;
}
/* /Pages/Exams/PracticaSemanaPage.razor.rz.scp.css */
/* ──── Cabecera y navegación ──── */

.practice-back[b-mvimhl6oq7] {
    display: flex;
    margin-bottom: 8px;
}

.practice-back-bottom[b-mvimhl6oq7] {
    justify-content: center;
    margin: 16px 0 8px;
}

.practice-empty[b-mvimhl6oq7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 32px 20px;
}

/* ──── Resumen de la semana ──── */

.practice-objective[b-mvimhl6oq7] {
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 10px;
}

.practice-note[b-mvimhl6oq7] {
    padding: 8px 12px;
    font-size: 0.82rem;
    border-radius: var(--app-border-radius-lg, 10px);
    color: var(--mud-palette-text-secondary);
    background: color-mix(in srgb, var(--mud-palette-secondary) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-secondary) 20%, transparent);
}

.practice-count[b-mvimhl6oq7] {
    margin-top: 10px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

/* ──── Pregunta ──── */

.practice-question-header[b-mvimhl6oq7] {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 6px;
}

.practice-question-topic[b-mvimhl6oq7] {
    font-weight: 600;
    color: var(--mud-palette-primary);
}

.practice-question-text[b-mvimhl6oq7] {
    line-height: 1.5;
    margin-bottom: 10px;
    overflow-wrap: anywhere;
}

/* ──── Opciones ──── */

.practice-options[b-mvimhl6oq7] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* La letra ya no viene dentro del texto de la opción, así que la
   pinta el componente. */
.practice-option-letter[b-mvimhl6oq7] {
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    margin-right: 8px;
}

.practice-option[b-mvimhl6oq7] {
    padding: 10px 14px;
    border-radius: var(--app-border-radius-lg, 10px);
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) 18%, transparent);
    cursor: pointer;
    line-height: 1.4;
    overflow-wrap: anywhere;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.practice-option:hover[b-mvimhl6oq7] {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent);
}

.practice-option.correct[b-mvimhl6oq7] {
    border-color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
    cursor: default;
}

.practice-option.incorrect[b-mvimhl6oq7] {
    border-color: var(--mud-palette-error);
    background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
    cursor: default;
}

.practice-option.dimmed[b-mvimhl6oq7] {
    opacity: 0.55;
    cursor: default;
}

.practice-option.dimmed:hover[b-mvimhl6oq7],
.practice-option.correct:hover[b-mvimhl6oq7],
.practice-option.incorrect:hover[b-mvimhl6oq7] {
    border-color: inherit;
    background: inherit;
}

/* ──── Explicación ──── */

.practice-explanation[b-mvimhl6oq7] {
    margin-top: 10px;
    padding: 10px 14px;
    border-radius: var(--app-border-radius-lg, 10px);
    font-size: 0.88rem;
    line-height: 1.5;
}

.practice-explanation.correct[b-mvimhl6oq7] {
    background: color-mix(in srgb, var(--mud-palette-success) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-success) 30%, transparent);
}

.practice-explanation.incorrect[b-mvimhl6oq7] {
    background: color-mix(in srgb, var(--mud-palette-warning) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-warning) 30%, transparent);
}

.practice-explanation-verdict[b-mvimhl6oq7] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    margin-bottom: 4px;
}

.practice-explanation.correct .practice-explanation-verdict[b-mvimhl6oq7] {
    color: var(--mud-palette-success);
}

.practice-explanation.incorrect .practice-explanation-verdict[b-mvimhl6oq7] {
    color: var(--mud-palette-warning);
}

/* ──── Figura de apoyo (figura_svg) ──── */

.question-figure[b-mvimhl6oq7] {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

/* El SVG inyectado trae fondo blanco propio, así que el contenedor lo
   acompaña en vez de pelearse con él. */
.question-figure-svg[b-mvimhl6oq7] {
    width: 100%;
    max-width: 360px;
    border-radius: var(--app-border-radius-sm, 8px);
    border: 1px solid var(--mud-palette-divider);
    background: #fff;
    padding: 0.5rem;
}

.question-figure-svg[b-mvimhl6oq7]  svg {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* ──── Responsive: celular ──── */

@media (max-width: 600px) {
    .practice-option[b-mvimhl6oq7] {
        padding: 12px;
    }
}
/* /Pages/Exams/PremiumExamIntro.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   PremiumExamIntro – intro del refuerzo premium
   Superficie de estudio: plana y calmada.
   ═══════════════════════════════════════════ */

.premium-intro-root[b-cs6ny23er4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 560px;
    width: calc(100% - 20px);
    animation: premiumFadeIn-b-cs6ny23er4 0.4s ease-out;
}

/* ──── Hero (card plana, sin gradiente) ──── */
.premium-hero[b-cs6ny23er4] {
    width: 100%;
    text-align: center;
    padding: 24px 20px 18px;
    border-radius: var(--app-border-radius-lg);
    background: var(--mud-palette-surface);
    border: var(--app-border);
    box-shadow: var(--app-box-shadow-sm);
}

.premium-hero-badge[b-cs6ny23er4] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
    margin-bottom: 8px;
}

.premium-hero-subject[b-cs6ny23er4] {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--mud-palette-text-primary);
}

/* Materia + boton de ayuda en la misma fila. */
.premium-hero-subject:has(.how-to-play-wrapper)[b-cs6ny23er4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* ──── Meta row (texto plano, sin pills) ──── */
.premium-meta-row[b-cs6ny23er4] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 18px;
    width: 100%;
}

.premium-meta-item[b-cs6ny23er4] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}

.premium-meta-item.origin[b-cs6ny23er4] {
    color: var(--mud-palette-primary);
    font-weight: 600;
}

/* ──── Stats grid ──── */
.premium-stats-grid[b-cs6ny23er4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 10px;
    width: 100%;
}

.stat-card[b-cs6ny23er4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 8px;
    border-radius: var(--app-border-radius);
    background: var(--mud-palette-surface);
    border: var(--app-border);
    box-shadow: var(--app-box-shadow-sm);
    transition: transform 0.2s ease;
}

.stat-card:hover[b-cs6ny23er4] {
    transform: translateY(-2px);
}

.stat-card-icon[b-cs6ny23er4] {
    opacity: 0.85;
}

.stat-card-value[b-cs6ny23er4] {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
    color: var(--mud-palette-text-primary);
}

.stat-card-value.easy[b-cs6ny23er4] {
    color: var(--mud-palette-success);
}

.stat-card-value.moderate[b-cs6ny23er4] {
    color: var(--mud-palette-info);
}

.stat-card-value.hard[b-cs6ny23er4] {
    color: var(--mud-palette-warning);
}

.stat-card-value.extreme[b-cs6ny23er4] {
    color: var(--mud-palette-error);
}

.stat-card-label[b-cs6ny23er4] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mud-palette-text-secondary);
    text-align: center;
}

/* ──── Sections (topics, weaknesses, guide) ──── */

[b-cs6ny23er4] .premium-parent {
    width: 100%;
}

[b-cs6ny23er4] .premium-section {
    width: 100%;
    padding: 14px;
    border-radius: var(--app-border-radius) !important;
    border: var(--app-border);
    box-shadow: var(--app-box-shadow-sm);
    background: var(--mud-palette-surface);
    margin: 0 !important;
}

.section-header[b-cs6ny23er4] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 10px;
    color: var(--mud-palette-text-primary);
}

/* Topics (lista limpia, sin pills) */
.topics-list[b-cs6ny23er4] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.topic-row[b-cs6ny23er4] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 0.85rem;
    line-height: 1.4;
}

.topic-row-subject[b-cs6ny23er4] {
    flex-shrink: 0;
    min-width: 84px;
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mud-palette-text-secondary);
}

.topic-row-name[b-cs6ny23er4] {
    color: var(--mud-palette-text-primary);
}

/* Weaknesses */
.weakness-list[b-cs6ny23er4] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.weakness-item[b-cs6ny23er4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: var(--app-border-radius-sm);
    border: 1px solid color-mix(in srgb, var(--mud-palette-error) 30%, transparent);
    background: color-mix(in srgb, var(--mud-palette-error) 5%, transparent);
}

.weakness-info[b-cs6ny23er4] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.weakness-subject[b-cs6ny23er4] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mud-palette-text-secondary);
}

.weakness-topic[b-cs6ny23er4] {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
}

.weakness-rate[b-cs6ny23er4] {
    font-size: 0.8rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 100px;
    white-space: nowrap;
}

.weakness-rate.low[b-cs6ny23er4] {
    color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
}

.weakness-rate.medium[b-cs6ny23er4] {
    color: var(--mud-palette-warning);
    background: color-mix(in srgb, var(--mud-palette-warning) 12%, transparent);
}

.weakness-rate.high[b-cs6ny23er4] {
    color: var(--mud-palette-error);
    background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
}

/* ──── Study guide (plana, sin gradiente) ──── */
.guide-section[b-cs6ny23er4] {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 20%, transparent);
}

.guide-header span[b-cs6ny23er4] {
    font-size: 1rem;
}

.guide-summary[b-cs6ny23er4] {
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 12px;
}

[b-cs6ny23er4] .guide-blocks {
    display: flex;
    flex-direction: column;
}

[b-cs6ny23er4] .guide-block {
    padding: 12px;
    border-radius: var(--app-border-radius-sm);
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) 10%, transparent);
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 0.2s ease;
    margin: 0 !important;
    background: none;
}


.guide-block-header[b-cs6ny23er4] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.guide-block-number[b-cs6ny23er4] {
    min-width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-weight: 700;
    font-size: 0.82rem;
    flex-shrink: 0;
}

.guide-block-titles[b-cs6ny23er4] {
    flex: 1;
    min-width: 0;
}

.guide-block-topic[b-cs6ny23er4] {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--mud-palette-text-primary);
    line-height: 1.25;
}

.guide-block-subject[b-cs6ny23er4] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mud-palette-text-secondary);
}

.guide-block-rate[b-cs6ny23er4] {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 100px;
    flex-shrink: 0;
    white-space: nowrap;
}

.guide-block-detail[b-cs6ny23er4] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

.guide-block-detail.exercise[b-cs6ny23er4] {
    font-style: italic;
}

.guide-checklist[b-cs6ny23er4] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: 4px;
}

.checklist-item[b-cs6ny23er4] {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--mud-palette-text-primary);
}

.guide-recommendation[b-cs6ny23er4] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: var(--app-border-radius-sm);
    background: color-mix(in srgb, var(--mud-palette-warning) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-warning) 25%, transparent);
    font-size: 0.82rem;
    line-height: 1.45;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
}

/* ──── CTA ──── */
.premium-cta[b-cs6ny23er4] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px 16px;
    border-radius: var(--app-border-radius);
    background: var(--mud-palette-surface);
    border: var(--app-border);
    box-shadow: var(--app-box-shadow-sm);
    text-align: center;
}

.cta-note[b-cs6ny23er4] {
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--mud-palette-text-secondary);
}

.cta-message[b-cs6ny23er4] {
    font-size: 0.85rem;
    font-style: italic;
    color: var(--mud-palette-text-secondary);
}

[b-cs6ny23er4] .cta-button {
    min-width: 200px;
    font-weight: 700;
}

/* ──── Animación de entrada ──── */
@keyframes premiumFadeIn-b-cs6ny23er4 {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Pages/Exams/PremiumIntroSkeleton.razor.rz.scp.css */
/* Skeleton del refuerzo premium — mismas cajas que PremiumExamIntro. */

.pis-root[b-fi00ykw3qf] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    max-width: 560px;
    width: calc(100% - 20px);
}

.pis-hero[b-fi00ykw3qf],
.pis-section[b-fi00ykw3qf],
.pis-cta[b-fi00ykw3qf] {
    padding: 20px 16px;
    border-radius: var(--app-border-radius);
    background: var(--mud-palette-surface);
    border: var(--app-border);
    box-shadow: var(--app-box-shadow-sm);
}

.pis-hero[b-fi00ykw3qf] {
    border-radius: var(--app-border-radius-lg);
    text-align: center;
}

.pis-section[b-fi00ykw3qf],
.pis-cta[b-fi00ykw3qf] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pis-meta[b-fi00ykw3qf] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 18px;
}

.pis-stats[b-fi00ykw3qf] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 10px;
}

.pis-stat[b-fi00ykw3qf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    border-radius: var(--app-border-radius);
    border: var(--app-border);
}
/* /Pages/Exams/SimulacroTakingPage.razor.rz.scp.css */
/* Solo lo propio del simulacro. La cáscara del examen (contenedores,
   tarjeta de pregunta, opciones, figura) vive en css/exam-taking.css,
   compartida con ExamTakingPage. */

/* ── Resumen de la pantalla de bienvenida ───────────────────── */

/* Rejilla en vez de flex-wrap: con cuatro datos, el wrap dejaba tres
   arriba y uno huérfano centrado debajo. */
.simulacro-stats-row[b-r9d6ffzmjk] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    width: 100%;
    margin: 16px 0;
}

/* Card recipe del sitio: surface + borde + sombra suave, como las stat
   cards del resto de la página. */
.simulacro-stat-item[b-r9d6ffzmjk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 16px;
    border-radius: var(--app-border-radius);
    border: var(--app-border);
    background: var(--mud-palette-surface);
    box-shadow: var(--app-box-shadow-sm);
    min-width: 80px;
}

/* Skeleton de stat: misma caja que .simulacro-stat-item, sin superficie. */
.simulacro-skeleton-stat[b-r9d6ffzmjk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    border-radius: var(--app-border-radius);
    border: var(--app-border);
    min-width: 80px;
}

.simulacro-stat-value[b-r9d6ffzmjk] {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.simulacro-stat-label[b-r9d6ffzmjk] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.simulacro-info-text[b-r9d6ffzmjk] {
    text-align: center;
    font-size: 0.9rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.5;
    margin: 8px 0;
}

.simulacro-mensaje[b-r9d6ffzmjk] {
    text-align: center;
    font-size: 0.85rem;
    font-style: italic;
    color: var(--mud-palette-text-secondary);
    padding: 8px;
    border-radius: var(--app-border-radius-sm);
    background: var(--mud-palette-background-gray);
}

.cta-button[b-r9d6ffzmjk] {
    margin-top: 8px;
}

/* ── Cronómetro ─────────────────────────────────────────────── */

.simulacro-timer-bar[b-r9d6ffzmjk] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 12px 0;
}

.timer-display[b-r9d6ffzmjk] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 1.1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
    transition: color 0.3s ease;
}

.timer-display.timer-warning[b-r9d6ffzmjk] {
    color: var(--mud-palette-warning);
}

.timer-display.timer-critical[b-r9d6ffzmjk] {
    color: var(--mud-palette-error);
    animation: timerPulse-b-r9d6ffzmjk 1s ease-in-out infinite;
}

.timer-progress-track[b-r9d6ffzmjk] {
    height: 4px;
    width: 100%;
    border-radius: 2px;
    background: var(--mud-palette-divider);
    overflow: hidden;
}

.timer-progress-fill[b-r9d6ffzmjk] {
    height: 100%;
    width: 100%;
    border-radius: 2px;
    background: var(--mud-palette-primary);
    transform: scaleX(calc(var(--progress, 0) / 100));
    transform-origin: left;
    transition: transform 1s linear, background-color 0.3s ease;
}

.timer-progress-fill.timer-warning[b-r9d6ffzmjk] {
    background-color: var(--mud-palette-warning);
}

.timer-progress-fill.timer-critical[b-r9d6ffzmjk] {
    background-color: var(--mud-palette-error);
}

@keyframes timerPulse-b-r9d6ffzmjk {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}
/* /Pages/Exams/SimulacroTecTakingPage.razor.rz.scp.css */
/* Solo lo propio del simulacro. La cáscara del examen (contenedores,
   tarjeta de pregunta, opciones, figura) vive en css/exam-taking.css,
   compartida con ExamTakingPage. */

/* ── Resumen de la pantalla de bienvenida ───────────────────── */

/* Rejilla en vez de flex-wrap: con cuatro datos, el wrap dejaba tres
   arriba y uno huérfano centrado debajo. */
.simulacro-stats-row[b-6kuredgknd] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    width: 100%;
    margin: 16px 0;
}

/* Card recipe del sitio: surface + borde + sombra suave, como las stat
   cards del resto de la página. */
.simulacro-stat-item[b-6kuredgknd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 16px;
    border-radius: var(--app-border-radius);
    border: var(--app-border);
    background: var(--mud-palette-surface);
    box-shadow: var(--app-box-shadow-sm);
    min-width: 80px;
}

/* Skeleton de stat: misma caja que .simulacro-stat-item, sin superficie. */
.simulacro-skeleton-stat[b-6kuredgknd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    border-radius: var(--app-border-radius);
    border: var(--app-border);
    min-width: 80px;
}

.simulacro-stat-value[b-6kuredgknd] {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.simulacro-stat-label[b-6kuredgknd] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.simulacro-info-text[b-6kuredgknd] {
    text-align: center;
    font-size: 0.9rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.5;
    margin: 8px 0;
}

.simulacro-mensaje[b-6kuredgknd] {
    text-align: center;
    font-size: 0.85rem;
    font-style: italic;
    color: var(--mud-palette-text-secondary);
    padding: 8px;
    border-radius: var(--app-border-radius-sm);
    background: var(--mud-palette-background-gray);
}

.cta-button[b-6kuredgknd] {
    margin-top: 8px;
}

/* La pantalla de resultados (.resultados-*) vive en css/exam-taking.css:
   la comparten esta página y ExamenEspecialPage. */

/* ── Cronómetro ─────────────────────────────────────────────── */

.simulacro-timer-bar[b-6kuredgknd] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 12px 0;
}

.timer-display[b-6kuredgknd] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 1.1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
    transition: color 0.3s ease;
}

.timer-display.timer-warning[b-6kuredgknd] {
    color: var(--mud-palette-warning);
}

.timer-display.timer-critical[b-6kuredgknd] {
    color: var(--mud-palette-error);
    animation: timerPulse-b-6kuredgknd 1s ease-in-out infinite;
}

.timer-progress-track[b-6kuredgknd] {
    height: 4px;
    width: 100%;
    border-radius: 2px;
    background: var(--mud-palette-divider);
    overflow: hidden;
}

.timer-progress-fill[b-6kuredgknd] {
    height: 100%;
    width: 100%;
    border-radius: 2px;
    background: var(--mud-palette-primary);
    transform: scaleX(calc(var(--progress, 0) / 100));
    transform-origin: left;
    transition: transform 1s linear, background-color 0.3s ease;
}

.timer-progress-fill.timer-warning[b-6kuredgknd] {
    background-color: var(--mud-palette-warning);
}

.timer-progress-fill.timer-critical[b-6kuredgknd] {
    background-color: var(--mud-palette-error);
}

@keyframes timerPulse-b-6kuredgknd {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}
/* /Pages/Exams/StudyPlanPage.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   StudyPlanPage – Plan de estudio Premium
   ═══════════════════════════════════════════ */

/* ──── Layout ──── */
.plan-main[b-qw4jvd90jr] {
    max-width: 880px;
    margin: 0 auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ──── Card base (recipe del sitio) ──── */
.plan-card[b-qw4jvd90jr] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem;
    background: var(--mud-palette-surface);
    border: var(--app-border);
    border-radius: var(--app-border-radius);
    box-shadow: var(--app-box-shadow-sm);
}

.plan-card.center[b-qw4jvd90jr] {
    align-items: center;
    text-align: center;
}

/* ──── Skeleton ──── */
.plan-skeleton-week[b-qw4jvd90jr] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
}

.plan-skeleton-week-lines[b-qw4jvd90jr] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ──── Resumen ──── */
.plan-message[b-qw4jvd90jr] {
    color: var(--mud-palette-text-secondary);
    line-height: 1.5;
}

.plan-meta-row[b-qw4jvd90jr] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 6px;
}

.plan-meta-item[b-qw4jvd90jr] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
}

.plan-progress-note[b-qw4jvd90jr] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 0.82rem;
    color: var(--mud-palette-text-secondary);
}

.plan-actions[b-qw4jvd90jr] {
    margin-top: 8px;
}

/* ──── Tarjeta de semana ──── */
.week-header[b-qw4jvd90jr] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.week-number[b-qw4jvd90jr] {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
    border-radius: 50%;
    color: var(--mud-palette-text-secondary);
    background: color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent);
}

.week-number.actual[b-qw4jvd90jr] {
    color: var(--mud-palette-primary-text);
    background: var(--mud-palette-primary);
}

.week-number.completada[b-qw4jvd90jr] {
    color: var(--mud-palette-success-text);
    background: var(--mud-palette-success);
}

.week-number.repasar[b-qw4jvd90jr] {
    color: var(--mud-palette-warning-text);
    background: var(--mud-palette-warning);
}

.week-titles[b-qw4jvd90jr] {
    flex: 1;
    min-width: 0;
}

.week-topic[b-qw4jvd90jr] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.week-subject[b-qw4jvd90jr] {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}

.week-header[b-qw4jvd90jr]  .week-state-chip {
    flex-shrink: 0;
    margin: 0;
}

.week-objective[b-qw4jvd90jr] {
    margin-top: 6px;
    color: var(--mud-palette-text-secondary);
    line-height: 1.4;
}

/* ──── Barra de progreso semanal ──── */
.week-progress[b-qw4jvd90jr] {
    width: 100%;
    margin-top: 10px;
}

.week-progress-bar[b-qw4jvd90jr] {
    position: relative;
    width: 100%;
    height: 10px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 10%, transparent);
    overflow: visible;
}

/* Relleno con `transform` y no con `width` (patrón PathCard). Desvío: el carril
   mantiene `overflow: visible` y el relleno su radio porque el marcador de meta
   vive dentro del carril y sobresale 3px por arriba/abajo — con `hidden` se recortaría. */
.week-progress-fill[b-qw4jvd90jr] {
    height: 100%;
    width: 100%;
    transform-origin: left center;
    border-radius: 5px;
    background: var(--mud-palette-primary);
    transition: transform 0.4s ease;
}

.week-progress-fill.completada[b-qw4jvd90jr] {
    background: var(--mud-palette-success);
}

.week-progress-fill.repasar[b-qw4jvd90jr] {
    background: var(--mud-palette-warning);
}

.week-progress-meta-marker[b-qw4jvd90jr] {
    position: absolute;
    top: -3px;
    width: 3px;
    height: 16px;
    border-radius: 2px;
    background: var(--mud-palette-text-primary);
    opacity: 0.55;
}

.week-progress-labels[b-qw4jvd90jr] {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

/* ──── Paneles ──── */
.week-panels[b-qw4jvd90jr] {
    margin-top: 12px;
    width: 100%;
}

.week-panel-title[b-qw4jvd90jr] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.material-list[b-qw4jvd90jr] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.material-item[b-qw4jvd90jr] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.4;
    color: var(--mud-palette-text-primary);
}

/* ──── Llamada a la práctica ────
   Las preguntas viven en /juegos/examenes/plan/practica/{semana}; aquí
   solo queda la entrada. */
.week-practice-cta[b-qw4jvd90jr] {
    display: flex;
    margin-top: 12px;
}

/* ──── Responsive: celular ──── */
@media (max-width: 600px) {
    .week-header[b-qw4jvd90jr] {
        flex-wrap: wrap;
    }

    .week-header[b-qw4jvd90jr]  .week-state-chip {
        order: 3;
        margin-left: 54px; /* aligned under titles, next to the number column */
    }

    .week-topic[b-qw4jvd90jr] {
        font-size: 1.05rem;
    }

    .week-progress-labels[b-qw4jvd90jr] {
        flex-direction: column;
    }
}

/* /Pages/FlipCards/FlipCardsCrearIA.razor.rz.scp.css */
.ia-creation-page[b-03a18fq9rw] {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.ia-creation-content[b-03a18fq9rw] {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 24px;
    flex: 1;
    min-height: 0;
}

.ia-instructions-container[b-03a18fq9rw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-height: 0;
    padding: 2rem;
}

.ia-instructions-header[b-03a18fq9rw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

[b-03a18fq9rw] .ia-features {
    background: var(--mud-palette-surface);
    border: var(--app-border);
    border-radius: var(--app-border-radius);
}

.ia-wizard-wrapper[b-03a18fq9rw] {
    display: grid;
    grid-template-rows: 1fr;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    flex-shrink: 0;
    opacity: 1;
    transition: grid-template-rows 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.ia-wizard-wrapper.ia-wizard-collapsed[b-03a18fq9rw] {
    grid-template-rows: 0fr;
    opacity: 0;
    pointer-events: none;
}

[b-03a18fq9rw] .ia-wizard-inner {
    position: relative;
    z-index: 1;
    min-height: 0;
    overflow: hidden;
    padding: 20px 24px;
    background: var(--mud-palette-surface);
    border: var(--app-border);
    border-radius: var(--app-border-radius);
}

@media (prefers-reduced-motion: reduce) {
    .ia-wizard-wrapper[b-03a18fq9rw] {
        transition: opacity 0.2s ease;
    }
}

.ia-wizard-progress[b-03a18fq9rw] {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
}

.ia-wizard-dot[b-03a18fq9rw] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mud-palette-lines-default);
    transition: background 0.2s ease, transform 0.2s ease;
}

.ia-wizard-dot.active[b-03a18fq9rw] {
    background: var(--mud-palette-secondary);
    transform: scale(1.3);
}

.ia-wizard-dot.done[b-03a18fq9rw] {
    background: var(--mud-palette-secondary);
    opacity: 0.5;
}

.ia-wizard-step[b-03a18fq9rw] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 90px;
    justify-content: center;
}

.ia-wizard-label[b-03a18fq9rw] {
    opacity: 0.8;
}

.ia-wizard-field[b-03a18fq9rw] {
    margin-top: 0;
}

.ia-options-toggle[b-03a18fq9rw] {
    align-self: flex-start;
    text-transform: none;
}

.ia-wizard-nav[b-03a18fq9rw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
}

.ia-generate-options[b-03a18fq9rw] {
    display: grid;
    grid-template-columns: 1fr 1fr 110px;
    gap: 8px;
    margin-top: 8px;
}

.input-field[b-03a18fq9rw] {
    margin-top: 8px;
}

.generated-results-actions[b-03a18fq9rw] {
    gap: 8px;
}

.deck-header[b-03a18fq9rw] {
    padding-top: 8px;
}

.deck-counter[b-03a18fq9rw] {
    opacity: 0.7;
    min-width: 48px;
    text-align: center;
}

.cards-deck[b-03a18fq9rw] {
    display: flex;
    gap: 16px;
    padding-top: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    flex: 1;
    min-height: 0;
}

.deck-card-slot[b-03a18fq9rw] {
    flex: 0 0 260px;
    scroll-snap-align: start;
    display: flex;
    max-height: 640px;
}

.deck-card-slot[b-03a18fq9rw]  .fc-scene {
    width: 100%;
    max-width: 100%;
    height: 100%;
}

.deck-card-slot[b-03a18fq9rw]  .fc-card {
    max-width: 100%;
    min-height: unset;
    height: 100%;
}

@media (max-width: 720px) {
    .deck-card-slot[b-03a18fq9rw] {
        flex-basis: 220px;
    }
}

/* Conjuring loading animation: the arena's ring circle, casting a card */
.ai-loading-screen[b-03a18fq9rw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 60vh;
}

.conjuring-spinner[b-03a18fq9rw] {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.conjuring-glow[b-03a18fq9rw] {
    position: absolute;
    inset: -20%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--mud-palette-secondary) 0%, transparent 70%);
    filter: blur(18px);
    opacity: 0.35;
    animation: conjuring-breathe-b-03a18fq9rw 2.4s ease-in-out infinite;
}

.ai-core-icon[b-03a18fq9rw] {
    font-size: 2rem;
    z-index: 5;
    animation: conjuring-breathe-b-03a18fq9rw 2s ease-in-out infinite;
}

.ring[b-03a18fq9rw] {
    position: absolute;
    border-radius: 50%;
    border: 2px solid transparent;
}

.outer-ring[b-03a18fq9rw] {
    width: 100%;
    height: 100%;
    border-top-color: var(--mud-palette-secondary);
    border-bottom-color: var(--mud-palette-primary);
    animation: spin-b-03a18fq9rw 3s linear infinite;
}

.middle-ring[b-03a18fq9rw] {
    width: 80%;
    height: 80%;
    border-left-color: var(--mud-palette-primary);
    border-right-color: var(--mud-palette-secondary);
    animation: spin-b-03a18fq9rw 2s linear infinite reverse;
}

.inner-ring[b-03a18fq9rw] {
    width: 60%;
    height: 60%;
    border-top-color: var(--mud-palette-secondary);
    animation: spin-settle-b-03a18fq9rw 1.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.conjuring-text[b-03a18fq9rw] {
    position: relative;
    letter-spacing: 0.02em;
    color: var(--mud-palette-text-primary);
    margin: 0;
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.55) 0%, black 45%, black 55%, rgba(0,0,0,0.55) 100%);
    mask-image: linear-gradient(90deg, rgba(0,0,0,0.55) 0%, black 45%, black 55%, rgba(0,0,0,0.55) 100%);
    -webkit-mask-size: 220% 100%;
    mask-size: 220% 100%;
    animation: conjuring-sweep-b-03a18fq9rw 2.6s ease-in-out infinite;
}

.conjuring-subtext[b-03a18fq9rw] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.9rem;
}

@keyframes spin-b-03a18fq9rw {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes spin-settle-b-03a18fq9rw {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}

@keyframes conjuring-breathe-b-03a18fq9rw {
    0%, 100% { transform: scale(0.94); opacity: 0.75; }
    50% { transform: scale(1.08); opacity: 1; }
}

@keyframes conjuring-sweep-b-03a18fq9rw {
    0% { mask-position: -120% 0; -webkit-mask-position: -120% 0; }
    100% { mask-position: 120% 0; -webkit-mask-position: 120% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .conjuring-glow[b-03a18fq9rw],
    .ai-core-icon[b-03a18fq9rw],
    .outer-ring[b-03a18fq9rw],
    .middle-ring[b-03a18fq9rw],
    .inner-ring[b-03a18fq9rw],
    .conjuring-text[b-03a18fq9rw] {
        animation: none;
    }

    .conjuring-glow[b-03a18fq9rw] { opacity: 0.35; }
    .conjuring-text[b-03a18fq9rw] { color: var(--mud-palette-text-primary); -webkit-mask-image: none; mask-image: none; }
}

@media (max-width: 720px) {
    .ia-generate-options[b-03a18fq9rw] {
        grid-template-columns: 1fr;
    }
}

/* /Pages/FlipMatch/FlipMatchPlay.razor.rz.scp.css */
.flipmatch-page[b-6d4ammtd3k] {
    position: relative;
    height: 100%;
    overflow-y: auto;
    padding: 16px;
}

.flipmatch-cards-title[b-6d4ammtd3k] {
    font-size: 1.5rem;
    font-weight: bold;
    margin: auto;
    text-align: center;
    color: var(--mud-palette-text-primary);
}

.flipmatch-cards-banner[b-6d4ammtd3k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 1rem 0;
    height: 100px;
}


.flipmatch-loading[b-6d4ammtd3k] {
    min-height: 70dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 12px;
}

.flipmatch-title[b-6d4ammtd3k] {
    font-size: 1.4rem;
    font-weight: 700;
}

.flipmatch-subtitle[b-6d4ammtd3k] {
    color: var(--mud-palette-text-secondary);
}

.flipmatch-intro-grid[b-6d4ammtd3k] {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.flipmatch-card[b-6d4ammtd3k] {
    border-radius: var(--app-border-radius);
    padding: 16px;
    box-shadow: 0 0 5px grey;
    background: var(--mud-palette-background);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 500px;
    width: calc(100% - 20px);
}

.flipmatch-card.full-width[b-6d4ammtd3k] {
    max-width: none;
    box-shadow: none;
    background: none;
}

.flipmatch-card-title[b-6d4ammtd3k] {
    font-size: 1.1rem;
    font-weight: 700;
}

.flipmatch-intro-text[b-6d4ammtd3k] {
    color: var(--mud-palette-text-secondary);
    line-height: 1.45;
}

.flipmatch-kpis[b-6d4ammtd3k] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.flipmatch-kpi[b-6d4ammtd3k] {
    border-radius: var(--app-border-radius);
    border: 1px solid var(--mud-palette-lines-default);
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: color-mix(in srgb, var(--mud-palette-surface) 90%, transparent);
}

.flipmatch-note[b-6d4ammtd3k] {
    font-size: 0.95rem;
    color: var(--mud-palette-text-secondary);
}

.flipmatch-ranking-list[b-6d4ammtd3k] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.flipmatch-ranking-item[b-6d4ammtd3k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--app-border-radius);
    padding: 8px 10px;
}

.flipmatch-ranking-left[b-6d4ammtd3k] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.flipmatch-ranking-right[b-6d4ammtd3k] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
    color: var(--mud-palette-text-secondary);
}

.flipmatch-play[b-6d4ammtd3k] {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.flipmatch-play-header[b-6d4ammtd3k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    border-radius: 14px;
    height: 100px;
    padding: 12px 14px;
}

.flipmatch-play-header-text[b-6d4ammtd3k] {
    flex: 1;
}

.flipmatch-columns-wrapper[b-6d4ammtd3k] {
    position: relative;
}

.flipmatch-columns[b-6d4ammtd3k] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    position: relative;
    z-index: 2;
    max-width: 650px;
    margin: 0 auto;
}

.flipmatch-column[b-6d4ammtd3k] {
    border-radius: 14px;
    padding: 12px 0px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.flipmatch-column-title[b-6d4ammtd3k] {
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
}

.flipmatch-option[b-6d4ammtd3k] {
    background: transparent;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--app-border-radius);
    padding: 0;
    text-align: left;
    transition: all 0.25s ease;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    margin: 0 20px;
}

.flipmatch-option.selected[b-6d4ammtd3k] {
    transform: translateY(-5px);
}

.flipmatch-columns.is-playing .flipmatch-option.matched[b-6d4ammtd3k]{
    filter: grayscale();
}

.flipmatch-columns .flipmatch-option.matched[b-6d4ammtd3k] {
    margin-right: 0px;
    margin-left: 40px;
}

.flipmatch-columns.is-playing .flipmatch-option.example.matched[b-6d4ammtd3k]{
    filter: grayscale();
}

.flipmatch-columns .flipmatch-option.example.matched[b-6d4ammtd3k] {
    margin-right: 40px;
    margin-left: 0px;
}

.flipmatch-option-title[b-6d4ammtd3k] {
    font-weight: 700;
    margin-bottom: 4px;
}

.flipmatch-option-description[b-6d4ammtd3k] {
    color: var(--mud-palette-text-secondary);
}

.flipmatch-option-match[b-6d4ammtd3k] {
    padding: 6px 10px;
    font-size: 0.85rem;
    color: var(--mud-palette-success);
    align-self: center;
    flex: 1;
    min-width: 0;
    position: absolute;
    width: 30%;
    right: 0;
}

[b-6d4ammtd3k] .flipmatch-mini-card {
    width: 100%;
    flex: 0 0 100%;
    min-height: 230px;
    min-width: 70%;
    z-index: 1;
}

.flipmatch-actions[b-6d4ammtd3k] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
}

.flipmatch-error[b-6d4ammtd3k] {
    max-width: 700px;
    color: var(--mud-palette-error);
}

.flipmatch-errors-list[b-6d4ammtd3k] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.flipmatch-error-item[b-6d4ammtd3k] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--app-border-radius);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

@media (hover: hover) {
    .flipmatch-option:hover[b-6d4ammtd3k] {
        transform: translateY(-1px);
    }
    .flipmatch-option.selected:hover[b-6d4ammtd3k] {
        transform: translateY(-6px);
    }
}

/* /Pages/FlipMatch/FlipMatchRankingPage.razor.rz.scp.css */
.ranking-container[b-zt6e18tnzf] {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    user-select: none;
    overflow-y: auto;
}

.ranking-header[b-zt6e18tnzf] {
    padding: 20px;
    text-align: center;
    border-bottom: 2px solid rgba(128, 128, 128, 0.3);
}

.ranking-title[b-zt6e18tnzf] {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 5px;
}

.ranking-date[b-zt6e18tnzf] {
    font-size: 1rem;
    color: #999;
    font-style: italic;
}

.ranking-meta[b-zt6e18tnzf] {
    margin-top: 6px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.95rem;
}

.top-three-section[b-zt6e18tnzf] {
    padding: 0px 20px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 20px;
    background: linear-gradient(180deg, rgba(255, 215, 0, 0.05) 0%, transparent 100%);
}

.podium-position[b-zt6e18tnzf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: slideUp-b-zt6e18tnzf 0.6s ease-out;
}

.podium-position.first[b-zt6e18tnzf] {
    order: 2;
}

.podium-position.second[b-zt6e18tnzf] {
    order: 1;
}

.podium-position.third[b-zt6e18tnzf] {
    order: 3;
}

.medal-icon[b-zt6e18tnzf] {
    font-size: 3rem;
    margin-bottom: 10px;
    animation: bounce 1s ease-in-out;
}

.podium-position.first .medal-icon[b-zt6e18tnzf] {
    font-size: 4rem;
    animation: bounce 1s ease-in-out, rotate 2s ease-in-out infinite;
}

.podium-card[b-zt6e18tnzf] {
    border-radius: 15px;
    padding: 20px;
    width: 180px;
    text-align: center;
    box-shadow: var(--app-box-shadow);
    transition: transform 0.3s ease;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
}

@media (hover: hover) {
    .podium-card:hover[b-zt6e18tnzf] {
        transform: translateY(-5px);
    }
}

.podium-position.first .podium-card[b-zt6e18tnzf] {
    width: 220px;
    padding: 25px;
    border: 3px solid #FFD700;
}

.podium-position.second .podium-card[b-zt6e18tnzf] {
    border: 2px solid #C0C0C0;
}

.podium-position.third .podium-card[b-zt6e18tnzf] {
    border: 2px solid #CD7F32;
}

.podium-username[b-zt6e18tnzf] {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 160px;
}

.podium-avatar[b-zt6e18tnzf] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    aspect-ratio: 1 / 1;
    margin-bottom: 10px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    box-shadow: var(--app-box-shadow-sm);
}

.podium-position.first .podium-avatar[b-zt6e18tnzf] {
    width: 100px;
    height: 100px;
    border-width: 4px;
}

.podium-position.first .podium-username[b-zt6e18tnzf] {
    font-size: 1.4rem;
}

.podium-stats[b-zt6e18tnzf] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.9rem;
}

.podium-user-info[b-zt6e18tnzf] {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
}

.rest-ranking-section[b-zt6e18tnzf] {
    padding: 20px;
    width: 100%;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.ranking-list[b-zt6e18tnzf] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ranking-item[b-zt6e18tnzf] {
    display: flex;
    align-items: center;
    padding: 15px;
    border-radius: var(--app-border-radius);
    background-color: rgba(128, 128, 128, 0.05);
    transition: all 0.3s ease;
    animation: fadeIn-b-zt6e18tnzf 0.4s ease-out;
}

@media (hover: hover) {
    .ranking-item:hover[b-zt6e18tnzf] {
        background-color: rgba(128, 128, 128, 0.1);
        transform: translateX(5px);
    }
}

.ranking-position[b-zt6e18tnzf] {
    font-size: 1.5rem;
    font-weight: bold;
    width: 50px;
    text-align: center;
    color: #666;
}

.ranking-user-info[b-zt6e18tnzf] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ranking-username[b-zt6e18tnzf] {
    font-size: 1.1rem;
    font-weight: bold;
}

.ranking-stats-inline[b-zt6e18tnzf] {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 0.9rem;
    justify-content: center;
}

.stat-inline[b-zt6e18tnzf] {
    display: flex;
    align-items: center;
    gap: 5px;
}

.loading-container[b-zt6e18tnzf] {
    min-height: 70dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.error-container[b-zt6e18tnzf] {
    min-height: 70dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
}

.error-icon[b-zt6e18tnzf] {
    font-size: 4rem;
    margin-bottom: 20px;
}

.error-message[b-zt6e18tnzf] {
    color: #f44336;
    font-size: 1.1rem;
}

.ranking-footer-actions[b-zt6e18tnzf] {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

@keyframes slideUp-b-zt6e18tnzf {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

@keyframes fadeIn-b-zt6e18tnzf {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (max-width: 900px) {
    .top-three-section[b-zt6e18tnzf] {
        flex-direction: column;
        align-items: center;
    }

    .podium-position.first[b-zt6e18tnzf],
    .podium-position.second[b-zt6e18tnzf],
    .podium-position.third[b-zt6e18tnzf] {
        order: initial;
    }

    .podium-card[b-zt6e18tnzf] {
        width: min(420px, calc(100vw - 32px));
    }

    .ranking-item[b-zt6e18tnzf] {
        flex-wrap: wrap;
        gap: 10px;
    }

    .ranking-stats-inline[b-zt6e18tnzf] {
        width: 100%;
        justify-content: flex-start;
    }
}
/* /Pages/FlipMatch/FlipMatchResultsPage.razor.rz.scp.css */
.flipmatch-results-container[b-80q3ipcsoo] {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    align-items: center;
}

.flipmatch-results-card[b-80q3ipcsoo] {
    width: min(780px, 100%);
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 0 5px grey;
    background: var(--mud-palette-background);
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: flipmatch-results-scale-in-b-80q3ipcsoo 320ms ease-out;
}

.flipmatch-results-title[b-80q3ipcsoo] {
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
}

.flipmatch-results-content[b-80q3ipcsoo] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.flipmatch-step-panel[b-80q3ipcsoo] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: flipmatch-step-in-b-80q3ipcsoo 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.flipmatch-score-display[b-80q3ipcsoo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.flipmatch-score-circle[b-80q3ipcsoo] {
    width: 210px;
    aspect-ratio: 1;
    border-radius: 999px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: var(--app-box-shadow-hover);
    animation: flipmatch-score-pop-b-80q3ipcsoo 560ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.flipmatch-score-number[b-80q3ipcsoo] {
    font-size: 3.4rem;
    font-weight: 900;
    line-height: 1;
}

.flipmatch-score-label[b-80q3ipcsoo] {
    letter-spacing: 0.2rem;
    font-size: 0.82rem;
}

.flipmatch-score-stats[b-80q3ipcsoo] {
    color: var(--mud-palette-text-secondary);
    text-align: center;
}

.flipmatch-kpi-grid[b-80q3ipcsoo] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.flipmatch-kpi-item[b-80q3ipcsoo] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--app-border-radius);
    padding: 12px;
    text-align: center;
    background: color-mix(in srgb, var(--mud-palette-surface) 92%, transparent);
}

.flipmatch-kpi-label[b-80q3ipcsoo] {
    font-size: 0.82rem;
    color: var(--mud-palette-text-secondary);
}

.flipmatch-kpi-value[b-80q3ipcsoo] {
    font-size: 1.25rem;
    font-weight: 800;
}

.flipmatch-info-note[b-80q3ipcsoo] {
    border-radius: var(--app-border-radius);
    padding: 10px 12px;
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    color: var(--mud-palette-text-primary);
}

.flipmatch-pairs-grid[b-80q3ipcsoo] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.flipmatch-pair-pill[b-80q3ipcsoo] {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 800;
    color: #fff;
}

.flipmatch-pair-pill.ok[b-80q3ipcsoo] {
    background: #16a34a;
}

.flipmatch-pair-pill.fail[b-80q3ipcsoo] {
    background: #dc2626;
}

.flipmatch-results-footer[b-80q3ipcsoo] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.flipmatch-results-nav[b-80q3ipcsoo] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.flipmatch-step-indicator[b-80q3ipcsoo] {
    text-align: center;
    color: var(--mud-palette-text-secondary);
    font-size: 0.88rem;
}

.flipmatch-columns.is-playing .flipmatch-option.matched[b-80q3ipcsoo] {
    filter: grayscale();
    margin-right: 0px;
    margin-left: 40px;
}

.flipmatch-columns.is-playing .flipmatch-option.example.matched[b-80q3ipcsoo] {
    filter: grayscale();
    margin-right: 40px;
    margin-left: 0px;
}

.stagger-item[b-80q3ipcsoo] {
    opacity: 0;
    animation: flipmatch-stagger-in-b-80q3ipcsoo 420ms ease-out forwards;
    animation-delay: calc(var(--i, 0) * 65ms);
}

@keyframes flipmatch-results-scale-in-b-80q3ipcsoo {
    from {
        opacity: 0;
        transform: scale(0.97);
    }

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

@keyframes flipmatch-step-in-b-80q3ipcsoo {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.985);
    }

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

@keyframes flipmatch-stagger-in-b-80q3ipcsoo {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

@keyframes flipmatch-score-pop-b-80q3ipcsoo {
    from {
        transform: scale(0.88);
    }

    to {
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .flipmatch-results-card[b-80q3ipcsoo],
    .flipmatch-step-panel[b-80q3ipcsoo],
    .flipmatch-score-circle[b-80q3ipcsoo],
    .stagger-item[b-80q3ipcsoo] {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
    }
}

@media (max-width: 720px) {
    .flipmatch-results-card[b-80q3ipcsoo] {
        padding: 16px;
    }

    .flipmatch-kpi-grid[b-80q3ipcsoo] {
        grid-template-columns: 1fr;
    }

    .flipmatch-score-circle[b-80q3ipcsoo] {
        width: 180px;
    }

    .flipmatch-score-number[b-80q3ipcsoo] {
        font-size: 2.8rem;
    }
}

/* /Pages/Galeria.razor.rz.scp.css */
.galeria-page[b-71bye487y4] {
    overflow-y: auto;
    height: 100%;
    width: 100%;
    background-color: var(--mud-palette-background);
    padding-bottom: 2rem;
}

[b-71bye487y4] .galeria-container {
    margin-top: 2rem;
    margin-bottom: 2rem;
    max-width: 1100px !important;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Hero Section */
[b-71bye487y4] .hero-section {
    padding: 2.5rem 2rem;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, var(--mud-palette-primary) 0%, var(--mud-palette-secondary) 100%);
    color: white;
    box-shadow: var(--app-box-shadow-sm);
    border-radius: var(--app-border-radius-lg);
}

.header-content-inner[b-71bye487y4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.header-left[b-71bye487y4] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.header-text[b-71bye487y4] {
    display: flex;
    flex-direction: column;
    text-align: left;
}

[b-71bye487y4] .hero-title {
    margin-bottom: 0.25rem;
    color: white !important;
    font-weight: 700;
}

[b-71bye487y4] .hero-subtitle {
    opacity: 0.9;
    color: rgba(255, 255, 255, 0.9) !important;
}

[b-71bye487y4] .refresh-btn {
    background: rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    border-radius: var(--app-border-radius-sm) !important;
    transition: background 0.2s ease !important;
}

[b-71bye487y4] .refresh-btn:hover {
    background: rgba(255, 255, 255, 0.25) !important;
}

/* Controls Bar */
.controls-bar[b-71bye487y4] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    gap: 1rem;
    background: var(--mud-palette-surface);
    border-radius: var(--app-border-radius);
    box-shadow: var(--app-box-shadow-sm);
    border: var(--app-border);
}

.search-wrapper[b-71bye487y4] {
    flex: 1;
    min-width: 260px;
}

[b-71bye487y4] .search-field {
    background: var(--mud-palette-drawer-background);
    border-radius: var(--app-border-radius-sm);
}

/* Filter Segmented Control tabs */
.filter-tabs[b-71bye487y4] {
    display: flex;
    background: var(--mud-palette-background-gray);
    border-radius: var(--app-border-radius);
    padding: 4px;
    gap: 4px;
    border: var(--app-border);
}

.filter-tab[b-71bye487y4] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    outline: none;
    border-radius: var(--app-border-radius-sm);
    padding: 6px 16px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-tab:hover[b-71bye487y4] {
    color: var(--mud-palette-text-primary);
    background: color-mix(in srgb, var(--mud-palette-drawer-background) 30%, transparent);
}

.filter-tab.active[b-71bye487y4] {
    background: var(--mud-palette-primary);
    color: #ffffff;
}

[b-71bye487y4] .tab-icon {
    font-size: 1rem !important;
}

/* View Toggle */
.view-toggle[b-71bye487y4] {
    display: flex;
    background: var(--mud-palette-background-gray);
    border-radius: var(--app-border-radius-sm);
    padding: 4px;
    border: var(--app-border);
}

[b-71bye487y4] .active-toggle {
    background: color-mix(in srgb, var(--mud-palette-primary) 15%, transparent) !important;
    border-radius: var(--app-border-radius-sm) !important;
}

/* Grid Mode Layout */
.files-grid[b-71bye487y4] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.5rem;
}

.file-card[b-71bye487y4] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 285px;
    background: var(--mud-palette-surface);
    border-radius: var(--app-border-radius);
    box-shadow: var(--app-box-shadow-sm);
    border: var(--app-border);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.file-card:hover[b-71bye487y4] {
    transform: translateY(-3px);
    box-shadow: var(--app-box-shadow);
    border-color: color-mix(in srgb, var(--mud-palette-primary) 40%, transparent);
}

.file-card-preview[b-71bye487y4] {
    position: relative;
    height: 155px;
    background-color: var(--mud-palette-background-gray);
    border-bottom: var(--app-border);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--app-border-radius) var(--app-border-radius) 0 0;
}

.file-card-image[b-71bye487y4] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease;
}

.file-card:hover .file-card-image[b-71bye487y4] {
    transform: scale(1.03);
}

.file-card-image-fallback[b-71bye487y4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 100%;
    background-color: color-mix(in srgb, var(--mud-palette-error) 5%, var(--mud-palette-background-gray));
    padding: 1rem;
    text-align: center;
}

.fallback-text[b-71bye487y4] {
    font-size: 0.75rem !important;
    color: var(--mud-palette-text-secondary);
}

.file-card-document[b-71bye487y4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--mud-palette-background-gray) 0%, color-mix(in srgb, var(--mud-palette-divider) 30%, transparent) 100%);
}

[b-71bye487y4] .doc-icon {
    font-size: 2.75rem !important;
    color: var(--mud-palette-primary);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
}

.file-extension[b-71bye487y4] {
    font-size: 0.65rem;
    font-weight: 700;
    background: var(--mud-palette-divider);
    color: var(--mud-palette-text-secondary);
    padding: 2px 8px;
    border-radius: 10px;
}

/* Card Hover Actions Overlay */
.file-card-overlay[b-71bye487y4] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 2;
}

.file-card-preview:hover .file-card-overlay[b-71bye487y4] {
    opacity: 1;
}

.overlay-actions[b-71bye487y4] {
    display: flex;
    gap: 12px;
}

[b-71bye487y4] .overlay-btn {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    transition: transform 0.2s ease, background 0.2s ease !important;
}

[b-71bye487y4] .overlay-btn:hover {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.25) !important;
}

[b-71bye487y4] .chat-link-btn {
    background: var(--mud-palette-primary) !important;
    color: #ffffff !important;
}

[b-71bye487y4] .chat-link-btn:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 85%, white) !important;
}

[b-71bye487y4] .delete-btn {
    background: rgba(244, 67, 54, 0.25) !important;
    color: #ffffff !important;
}

[b-71bye487y4] .delete-btn:hover {
    background: rgba(244, 67, 54, 0.5) !important;
}

/* Card Details */
.file-card-details[b-71bye487y4] {
    padding: 0.875rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: space-between;
    min-height: 0;
}

.file-name[b-71bye487y4] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 2px;
}

.file-meta[b-71bye487y4] {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
}

.file-date[b-71bye487y4] {
    font-size: 0.725rem;
    color: var(--mud-palette-text-secondary);
}

.file-chat-ref[b-71bye487y4] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--mud-palette-background-gray);
    border-radius: var(--app-border-radius-sm);
    padding: 6px 10px;
    margin-top: auto;
    cursor: pointer;
    transition: all 0.2s ease;
    border: var(--app-border);
    min-height: 32px;
}

.file-chat-ref:hover[b-71bye487y4] {
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-background-gray));
    border-color: color-mix(in srgb, var(--mud-palette-primary) 20%, var(--mud-palette-divider));
}

[b-71bye487y4] .chat-ref-icon {
    font-size: 0.875rem !important;
    color: var(--mud-palette-primary);
}

.chat-ref-title[b-71bye487y4] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

/* List Mode Layout */
.files-list-wrapper[b-71bye487y4] {
    overflow-x: auto;
    border-radius: var(--app-border-radius);
    background: var(--mud-palette-surface);
    border: var(--app-border);
    box-shadow: var(--app-box-shadow-sm);
}

.files-list[b-71bye487y4] {
    min-width: 750px;
    display: flex;
    flex-direction: column;
}

.list-header[b-71bye487y4] {
    display: flex;
    align-items: center;
    background: var(--mud-palette-background-gray);
    padding: 1rem 1.5rem;
    border-bottom: var(--app-border);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.list-row[b-71bye487y4] {
    display: flex;
    align-items: center;
    padding: 0.875rem 1.5rem;
    border-bottom: 1px solid var(--mud-palette-divider);
    font-size: 0.875rem;
    background: var(--mud-palette-surface);
}

.list-row:last-child[b-71bye487y4] {
    border-bottom: none;
}

.list-row:hover[b-71bye487y4] {
    background: color-mix(in srgb, var(--mud-palette-primary) 4%, var(--mud-palette-surface));
}

.col-name[b-71bye487y4] {
    flex: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

[b-71bye487y4] .row-type-icon {
    color: var(--mud-palette-primary);
    font-size: 1.25rem !important;
}

.row-file-name[b-71bye487y4] {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.col-type[b-71bye487y4] {
    flex: 0.8;
}

.type-badge[b-71bye487y4] {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: 0.5px;
    display: inline-block;
}

.type-badge.imagen[b-71bye487y4] {
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    color: var(--mud-palette-primary);
}

.type-badge.documento[b-71bye487y4] {
    background: color-mix(in srgb, var(--mud-palette-secondary) 12%, transparent);
    color: var(--mud-palette-secondary);
}

.col-chat[b-71bye487y4] {
    flex: 1.5;
    min-width: 0;
}

.row-chat-link[b-71bye487y4] {
    cursor: pointer;
    font-weight: 500;
    color: var(--mud-palette-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    max-width: 100%;
}

.row-chat-link:hover[b-71bye487y4] {
    text-decoration: underline;
}

.col-date[b-71bye487y4] {
    flex: 1.2;
    color: var(--mud-palette-text-secondary);
}

.col-actions[b-71bye487y4] {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    gap: 4px;
}

[b-71bye487y4] .row-action-btn {
    border: var(--app-border) !important;
    border-radius: var(--app-border-radius-sm) !important;
}

[b-71bye487y4] .row-action-btn:hover {
    background: var(--mud-palette-action-default-hover) !important;
}

/* Pagination & States */
.load-more-wrapper[b-71bye487y4] {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
}

[b-71bye487y4] .load-more-btn {
    border-radius: 20px !important;
    padding: 8px 24px !important;
    font-weight: 600 !important;
    box-shadow: var(--app-box-shadow-sm) !important;
    transition: transform 0.2s ease !important;
}

[b-71bye487y4] .load-more-btn:hover {
    transform: scale(1.02);
}

.loading-state[b-71bye487y4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 5rem 0;
}

.loading-text[b-71bye487y4] {
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
}

.empty-state[b-71bye487y4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    background: var(--mud-palette-surface);
    border-radius: var(--app-border-radius);
    box-shadow: var(--app-box-shadow-sm);
    border: var(--app-border);
}

.empty-icon-wrapper[b-71bye487y4] {
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

[b-71bye487y4] .empty-icon {
    color: var(--mud-palette-primary);
    font-size: 2.25rem !important;
}

.empty-title[b-71bye487y4] {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: var(--mud-palette-text-primary);
}

.empty-subtitle[b-71bye487y4] {
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
    max-width: 320px;
    margin: 0 0 1.5rem 0;
    line-height: 1.5;
}

[b-71bye487y4] .empty-action-btn {
    border-radius: 20px !important;
    padding: 6px 20px !important;
    font-weight: 600 !important;
}

/* superficie-propia: article.content renuncia a su holgura (app.css) porque este scroller
   es propio; la reservamos aquí como padding del propio scroller (no achica el contenedor)
   para que el contenido pueda deslizarse por detrás de la barra flotante hasta liberarla. */
@media (max-width: 950px) {
    .galeria-page[b-71bye487y4] {
        padding-bottom: calc(2rem + var(--bottom-nav-clearance));
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .galeria-container[b-71bye487y4] {
        margin-top: 1rem;
        margin-bottom: 1rem;
        gap: 1rem;
    }

    .hero-section[b-71bye487y4] {
        padding: 1.75rem 1.25rem;
    }

    .controls-bar[b-71bye487y4] {
        flex-direction: column;
        align-items: stretch;
        padding: 1.25rem;
    }

    .filter-tabs[b-71bye487y4] {
        width: 100%;
        justify-content: space-between;
    }

    .filter-tab[b-71bye487y4] {
        flex: 1;
        justify-content: center;
        padding: 8px 4px;
        font-size: 0.8rem;
    }

    .view-toggle[b-71bye487y4] {
        display: none;
    }

    .files-grid[b-71bye487y4] {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 1rem;
    }

    .file-card[b-71bye487y4] {
        height: 250px;
    }

    .file-card-preview[b-71bye487y4] {
        height: 125px;
    }

    .col-actions[b-71bye487y4] {
        gap: 2px;
    }
}
/* /Pages/Games/FlipCardsLobby.razor.rz.scp.css */
.flip-tab[b-i8n2oo6z3q] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: transparent;
    border-radius: 999px;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    padding: 8px 16px;
    min-height: 44px;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
}

.flip-tab.flip-tab-active[b-i8n2oo6z3q] {
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.flip-tab.flip-tab-active:hover[b-i8n2oo6z3q] {
    background-color: var(--mud-palette-primary-hover);
}

.flip-cards-tabs[b-i8n2oo6z3q],
.flip-tabs-bar-inner[b-i8n2oo6z3q] {
    max-width: 100%;
    min-width: 0;
}

.flip-tabs-bar[b-i8n2oo6z3q] {
    /* min-width:0 obliga a encoger el flex item en vez de desbordar; scroll nativo sin scrollbar visible. */
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.flip-tabs-bar[b-i8n2oo6z3q]::-webkit-scrollbar {
    display: none;
}

.flip-tabs-list[b-i8n2oo6z3q] {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
}

/*
    Sin scrollbar la barra no avisa de que hay más pestañas: un chevron flotante marca
    cada lado que todavía tiene contenido fuera de vista. Las clases can-scroll-* las
    pone watchTabScrollHints según la posición real del scroll.
*/
.flip-tabs-bar-inner[b-i8n2oo6z3q] {
    position: relative;
}

.flip-cards-tabs .flip-tabs-bar-inner[b-i8n2oo6z3q]::before,
.flip-cards-tabs .flip-tabs-bar-inner[b-i8n2oo6z3q]::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 9px;
    height: 9px;
    border-style: solid;
    border-color: var(--mud-palette-text-primary);
    border-width: 2px 2px 0 0;
    border-radius: 1px;
    opacity: 0;
    transition: opacity .15s ease;
    pointer-events: none;
    z-index: 2;
    /* El chevron va encima de las pestañas: el halo del color de fondo lo despega del texto. */
    filter: drop-shadow(0 0 3px var(--mud-palette-surface)) drop-shadow(0 0 6px var(--mud-palette-surface));
}

.flip-cards-tabs .flip-tabs-bar-inner[b-i8n2oo6z3q]::before {
    left: 3px;
    transform: translateY(-50%) rotate(-135deg);
}

.flip-cards-tabs .flip-tabs-bar-inner[b-i8n2oo6z3q]::after {
    right: 3px;
    transform: translateY(-50%) rotate(45deg);
}

.flip-cards-tabs.can-scroll-left .flip-tabs-bar-inner[b-i8n2oo6z3q]::before,
.flip-cards-tabs.can-scroll-right .flip-tabs-bar-inner[b-i8n2oo6z3q]::after {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .flip-cards-tabs .flip-tabs-bar-inner[b-i8n2oo6z3q]::before,
    .flip-cards-tabs .flip-tabs-bar-inner[b-i8n2oo6z3q]::after {
        transition: none;
    }
}

@media (max-width: 600px) {
    .flip-tab[b-i8n2oo6z3q] {
        padding: 6px 12px;
        min-height: 44px;
        font-size: 0.78rem;
        line-height: 1.2;
        letter-spacing: 0;
        text-transform: none;
        white-space: nowrap;
    }
}

.flip-tabs-panel[b-i8n2oo6z3q] {
    padding: 1rem;
}

.flip-cards-list-title[b-i8n2oo6z3q] {
    margin-top: 1.5rem;
}

.category-card-content-title[b-i8n2oo6z3q] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-bottom: 10px;
}

[b-i8n2oo6z3q] .category-card {
    padding: 1.25rem 0;
    margin: 0;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    background-color: transparent;
    border-bottom: 1px solid var(--mud-palette-divider);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

[b-i8n2oo6z3q] .category-card:last-child {
    border-bottom: none;
}

[b-i8n2oo6z3q] .category-card-play-button {
    height: 44px;
}

.category-card-subcategories-list[b-i8n2oo6z3q] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    max-width: 100%;
    min-width: 0;
}

/* Cada set se presenta como tarjeta de baraja, con el mismo lenguaje visual que BarajaCard. */
[b-i8n2oo6z3q] .set-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    border-radius: var(--app-border-radius);
    cursor: pointer;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    transition: transform .15s ease, box-shadow .15s ease;
}

[b-i8n2oo6z3q] .set-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--app-box-shadow-hover);
}

.set-card-body[b-i8n2oo6z3q] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.set-card-icon[b-i8n2oo6z3q] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--app-border-radius-sm);
    background-color: var(--mud-palette-primary-hover);
    color: var(--mud-palette-primary);
}

.set-card-name[b-i8n2oo6z3q] {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
}

.set-card-footer[b-i8n2oo6z3q] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--mud-palette-divider);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
}

.category-card-subcategories-title[b-i8n2oo6z3q] {
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    font-size: 0.85rem;
    margin-bottom: 4px;
}

.category-card-name[b-i8n2oo6z3q] {
    overflow-wrap: anywhere;
}

.category-card-description[b-i8n2oo6z3q] {
    overflow-wrap: anywhere;
}

.flip-cards-empty-state[b-i8n2oo6z3q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

/* /Pages/Games/FlipMatchLobby.razor.rz.scp.css */
.flipmatch-error[b-kx21uttqh9] {
    max-width: 700px;
}

.flipmatch-note[b-kx21uttqh9] {
    color: var(--mud-palette-text-secondary);
}

.flipmatch-preview-ranking[b-kx21uttqh9] {
    margin: 0;
    padding-left: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.flipmatch-preview-ranking li[b-kx21uttqh9] {
    display: flex;
    justify-content: space-between;
    gap: .8rem;
}

.flipmatch-preview-name[b-kx21uttqh9] {
    font-weight: 600;
}
/* /Pages/Games/TorreDePoderLobby.razor.rz.scp.css */
/* Active Session Card Style */
.active-session-card[b-r01tiuvu87] {
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface));
    border: 2px solid var(--mud-palette-primary);
    box-shadow: 0 4px 15px color-mix(in srgb, var(--mud-palette-primary) 20%, transparent);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    width: 100%;
}

.active-session-info[b-r01tiuvu87] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.active-session-info h4[b-r01tiuvu87] {
    margin: 0 0 0.5rem;
    font-weight: 800;
    color: var(--mud-palette-text-primary);
}

.active-session-info p[b-r01tiuvu87] {
    margin: 0.15rem 0;
    font-size: 0.9rem;
    color: var(--mud-palette-text-secondary);
}

.active-session-info .mode-text[b-r01tiuvu87] {
    font-size: 1rem;
}

/* Mode Cards Setup */
.new-game-setup[b-r01tiuvu87] {
    width: 100%;
}

.new-game-setup h4[b-r01tiuvu87] {
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.mode-cards[b-r01tiuvu87] {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    width: 100%;
}

.mode-card[b-r01tiuvu87] {
    flex: 1;
    flex-basis: 280px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--app-border-radius);
    padding: 1.25rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.5rem;
    transition: background-color 0.2s, border-color 0.2s;
}

.mode-card:hover[b-r01tiuvu87] {
    border-color: var(--mud-palette-primary-lighten);
}

.mode-card.selected[b-r01tiuvu87] {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface));
}

.mode-card-header[b-r01tiuvu87] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.mode-card-header h5[b-r01tiuvu87] {
    font-weight: 800;
    margin: 0;
    font-size: 1.1rem;
}

.mode-card p[b-r01tiuvu87] {
    font-size: 0.88rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.4;
    margin: 0;
}

.mode-badge[b-r01tiuvu87] {
    align-self: flex-start;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mode-badge.free[b-r01tiuvu87] {
    background: color-mix(in srgb, var(--mud-palette-success) 15%, transparent);
    color: var(--mud-palette-success);
    border: 1px solid color-mix(in srgb, var(--mud-palette-success) 30%, transparent);
}

.mode-badge.premium-badge-gold[b-r01tiuvu87] {
    background: color-mix(in srgb, var(--mud-palette-warning) 15%, transparent);
    color: var(--mud-palette-warning);
    border: 1px solid color-mix(in srgb, var(--mud-palette-warning) 30%, transparent);
}

.mode-badge.locked-badge[b-r01tiuvu87] {
    background: color-mix(in srgb, var(--mud-palette-text-secondary) 15%, transparent);
    color: var(--mud-palette-text-secondary);
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-secondary) 30%, transparent);
}

.mode-card.locked-mode[b-r01tiuvu87] {
    opacity: 0.75;
}

.mode-card.locked-mode:hover[b-r01tiuvu87] {
    border-color: var(--mud-palette-error);
}

/* Premium Gate Warning */
.premium-gate-warning[b-r01tiuvu87] {
    background: color-mix(in srgb, var(--mud-palette-warning) 8%, var(--mud-palette-surface));
    border-color: color-mix(in srgb, var(--mud-palette-warning) 40%, transparent) !important;
}

.premium-gate-warning p[b-r01tiuvu87] {
    margin: 0;
    font-weight: 600;
}

/* Error notices */
.error-notice[b-r01tiuvu87] {
    background: color-mix(in srgb, var(--mud-palette-error) 5%, var(--mud-palette-surface));
    border: 1px solid color-mix(in srgb, var(--mud-palette-error) 30%, transparent);
    border-radius: 10px;
    padding: 1.25rem;
}

.error-wrapper[b-r01tiuvu87] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.error-content h5[b-r01tiuvu87] {
    color: var(--mud-palette-error);
    font-weight: 800;
    margin: 0 0 0.25rem;
}

.error-content p[b-r01tiuvu87] {
    font-size: 0.9rem;
    margin: 0;
    color: var(--mud-palette-text-primary);
}

/* Tables & Rankings */
.ranking-header-filters[b-r01tiuvu87] {
    display: flex;
    align-items: center;
}

.ranking-header-filters span[b-r01tiuvu87] {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
}

.ranking-table-wrapper[b-r01tiuvu87] {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

.ubot-ranking-table[b-r01tiuvu87] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
    text-align: left;
}

.ubot-ranking-table th[b-r01tiuvu87],
.ubot-ranking-table td[b-r01tiuvu87] {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.ubot-ranking-table th[b-r01tiuvu87] {
    background: color-mix(in srgb, var(--mud-palette-primary) 5%, var(--mud-palette-surface));
    font-weight: 750;
    text-transform: uppercase;
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    letter-spacing: 0.5px;
}

.ubot-ranking-table tbody tr:hover[b-r01tiuvu87] {
    background: color-mix(in srgb, var(--mud-palette-primary) 3%, transparent);
}

.ubot-ranking-table tr.row-highlight[b-r01tiuvu87] {
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    font-weight: 700;
}

.ubot-ranking-table tr.row-highlight td[b-r01tiuvu87] {
    border-bottom: 1.5px solid var(--mud-palette-primary);
}

.ubot-ranking-table td.name-gold[b-r01tiuvu87] {
    color: var(--mud-palette-warning);
    font-weight: 700;
}

/* My Ranking box */
.my-ranking-box[b-r01tiuvu87] {
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface));
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 25%, transparent);
    border-radius: 8px;
    padding: 1rem;
}

.my-ranking-box h5[b-r01tiuvu87] {
    font-weight: 800;
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
}

.my-ranking-details[b-r01tiuvu87] {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    font-size: 0.95rem;
}

.my-ranking-details span strong[b-r01tiuvu87] {
    color: var(--mud-palette-primary);
}
/* /Pages/PerfilPage.razor.rz.scp.css */
.cuenta-page[b-f2rmexkzte] {
    max-width: 640px;
    margin: 0 auto;
    padding: 24px 16px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cuenta-block[b-f2rmexkzte] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    border-radius: var(--app-border-radius-lg);
    border: var(--app-border);
    background: var(--mud-palette-surface);
    box-shadow: var(--app-box-shadow-sm);
}

.cuenta-block-text[b-f2rmexkzte] {
    margin: 0;
    font-size: 0.9rem;
    color: var(--mud-palette-text-secondary);
    text-wrap: pretty;
}

.cuenta-premium[b-f2rmexkzte] {
    border-color: var(--mud-palette-warning);
    background: color-mix(in srgb, var(--mud-palette-warning) 5%, var(--mud-palette-surface));
}

.cuenta-premium-title[b-f2rmexkzte] {
    margin: 0 0 4px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.cuenta-actions[b-f2rmexkzte] {
    display: flex;
    flex-direction: column;
    border-radius: var(--app-border-radius-lg);
    border: var(--app-border);
    background: var(--mud-palette-surface);
    box-shadow: var(--app-box-shadow-sm);
    overflow: hidden;
}

.cuenta-action[b-f2rmexkzte] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--mud-palette-divider);
    cursor: pointer;
    color: var(--mud-palette-text-primary);
    font-size: 0.95rem;
    text-align: left;
    transition: background 0.2s ease;
}

.cuenta-action:last-child[b-f2rmexkzte] {
    border-bottom: none;
}

.cuenta-action > span[b-f2rmexkzte] {
    flex: 1;
    min-width: 0;
}

.cuenta-action-chevron[b-f2rmexkzte] {
    color: var(--mud-palette-text-secondary);
}

@media (hover: hover) {
    .cuenta-action:hover[b-f2rmexkzte] {
        background: var(--mud-palette-action-default-hover);
    }
}

.cuenta-action:focus-visible[b-f2rmexkzte] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

[b-f2rmexkzte] .cuenta-logout {
    margin-top: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .cuenta-action[b-f2rmexkzte] {
        transition: none;
    }
}
/* /Pages/PremiumPage.razor.rz.scp.css */
.premium-page[b-unas0rtjaa] {
    max-width: 960px;
    margin: 0 auto;
    width: 100%;
    padding: clamp(1.25rem, 4vw, 2.5rem) 1rem;
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 4vw, 2.5rem);
}

/* ---------- Hero ---------- */
.premium-hero[b-unas0rtjaa] {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: clamp(2rem, 5vw, 3rem) 1.5rem;
    border-radius: var(--app-border-radius-lg);
    background: linear-gradient(135deg, var(--mud-palette-primary), var(--mud-palette-secondary));
    color: #ffffff;
    box-shadow: var(--app-box-shadow);
    animation: premium-rise-b-unas0rtjaa 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.premium-hero__glow[b-unas0rtjaa] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% -20%,
            color-mix(in srgb, #ffffff 22%, transparent),
            transparent 55%);
}

.premium-hero__icon-badge[b-unas0rtjaa] {
    position: relative;
    width: 68px;
    height: 68px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, #000000 28%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-warning) 65%, transparent);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--mud-palette-warning) 12%, transparent),
        0 4px 14px color-mix(in srgb, #000000 25%, transparent);
}

[b-unas0rtjaa] .premium-hero__icon {
    position: relative;
    font-size: 2.1rem;
    color: var(--mud-palette-warning);
    filter: drop-shadow(0 2px 4px color-mix(in srgb, #000000 35%, transparent));
}

.premium-hero__title[b-unas0rtjaa] {
    position: relative;
    margin: 0.5rem 0 0;
    font-weight: 700;
    font-size: clamp(2rem, 6vw, 3rem);
    line-height: 1.1;
    text-wrap: balance;
}

.premium-hero__subtitle[b-unas0rtjaa] {
    position: relative;
    margin: 0.6rem auto 0;
    max-width: 40ch;
    font-size: 1rem;
    line-height: 1.5;
    opacity: 0.92;
    text-wrap: pretty;
}

/* ---------- Plans grid ---------- */
.plans-grid[b-unas0rtjaa] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: clamp(1rem, 3vw, 1.5rem);
    align-items: start;
}

.plan-card[b-unas0rtjaa] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    height: 100%;
    padding: 1.75rem 1.5rem;
    border-radius: var(--app-border-radius-lg);
    background: var(--mud-palette-surface);
    border: var(--app-border);
    box-shadow: var(--app-box-shadow-sm);
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    animation: premium-rise-b-unas0rtjaa 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.plan-card--free[b-unas0rtjaa] {
    animation-delay: 0.08s;
}

.plan-card--premium[b-unas0rtjaa] {
    animation-delay: 0.14s;
}

.plan-card:hover[b-unas0rtjaa] {
    transform: translateY(-3px);
    box-shadow: var(--app-box-shadow);
}

/* Premium emphasis — the "earned gold" reward voice */
.plan-card--premium[b-unas0rtjaa] {
    border-color: color-mix(in srgb, var(--mud-palette-warning) 55%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--mud-palette-warning) 30%, transparent),
        var(--app-box-shadow-sm);
}

.plan-card--premium[b-unas0rtjaa]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(130% 90% at 50% 0%,
            color-mix(in srgb, var(--mud-palette-warning) 16%, transparent),
            transparent 55%);
}

.plan-card--premium>*[b-unas0rtjaa] {
    position: relative;
}

.plan-card--premium:hover[b-unas0rtjaa] {
    transform: translateY(-3px);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--mud-palette-warning) 55%, transparent),
        var(--app-box-shadow-hover);
}

/* ---------- Card head ---------- */
.plan-card__ribbon[b-unas0rtjaa] {
    align-self: flex-start;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: var(--mud-palette-warning);
    color: var(--mud-palette-warning-text);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.plan-card__head[b-unas0rtjaa] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

[b-unas0rtjaa] .plan-card__crest {
    font-size: 1.5rem;
    color: var(--mud-palette-warning);
}

.plan-card__name[b-unas0rtjaa] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.plan-card__badge[b-unas0rtjaa] {
    margin-left: auto;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ---------- Price ---------- */
.plan-card__price[b-unas0rtjaa] {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    margin-top: 0.15rem;
}

.plan-card__price-value[b-unas0rtjaa] {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--mud-palette-text-primary);
    line-height: 1;
}

.plan-card__price-period[b-unas0rtjaa] {
    font-size: 0.95rem;
    color: var(--mud-palette-text-secondary);
}

.plan-card__desc[b-unas0rtjaa] {
    margin: 0;
    color: var(--mud-palette-text-secondary);
    font-size: 0.9rem;
    line-height: 1.45;
}

/* ---------- Benefits ---------- */
.plan-card__benefits[b-unas0rtjaa] {
    list-style: none;
    margin: 0.4rem 0 0.25rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex-grow: 1;
}

.benefit[b-unas0rtjaa] {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.92rem;
    line-height: 1.4;
    color: var(--mud-palette-text-primary);
}

[b-unas0rtjaa] .benefit-check {
    flex-shrink: 0;
    margin-top: 0.08rem;
    font-size: 1.15rem;
    color: var(--mud-palette-primary);
}

[b-unas0rtjaa] .benefit-check--gold {
    color: var(--mud-palette-warning);
}

/* ---------- CTA ---------- */
[b-unas0rtjaa] .plan-card__cta {
    border-radius: var(--app-border-radius);
    font-weight: 700;
    margin-top: auto;
}

/* ---------- Skeleton ---------- */
.premium-skeleton[b-unas0rtjaa] {
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 4vw, 2.5rem);
}

.sk[b-unas0rtjaa] {
    background: var(--mud-palette-background-gray);
    border-radius: var(--app-border-radius-lg);
    animation: sk-pulse-b-unas0rtjaa 1.5s ease-in-out infinite;
}

.sk-hero[b-unas0rtjaa] {
    height: clamp(170px, 26vw, 220px);
}

.sk-card[b-unas0rtjaa] {
    height: 380px;
}

/* ---------- Motion ---------- */
@keyframes premium-rise-b-unas0rtjaa {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes sk-pulse-b-unas0rtjaa {

    0%,
    100% {
        opacity: 0.4;
    }

    50% {
        opacity: 0.75;
    }
}

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

    .premium-hero[b-unas0rtjaa],
    .plan-card[b-unas0rtjaa] {
        animation: none;
    }

    .plan-card:hover[b-unas0rtjaa],
    .plan-card--premium:hover[b-unas0rtjaa] {
        transform: none;
    }
}

/* ---------- Responsive ---------- */
@media (max-width: 599px) {

    /* Lead with the upgrade on mobile */
    .plan-card--premium[b-unas0rtjaa] {
        order: -1;
    }

    .plan-card[b-unas0rtjaa] {
        padding: 1.5rem 1.25rem;
    }
}
/* /Pages/Profile/PublicProfilePage.razor.rz.scp.css */
.profile-page[b-d1fa6nfr3s] {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    box-sizing: border-box;
}

/* Error */
.profile-error[b-d1fa6nfr3s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    text-align: center;
}

/* ── Skeleton loading ─────────────────────────────── */
@keyframes skel-pulse-b-d1fa6nfr3s {

    0%,
    100% {
        opacity: 0.4;
    }

    50% {
        opacity: 0.75;
    }
}

.skel-line[b-d1fa6nfr3s],
.skeleton-heatmap-grid[b-d1fa6nfr3s],
.skel-icon[b-d1fa6nfr3s],
.skel-icon-lg[b-d1fa6nfr3s],
.skeleton-cover[b-d1fa6nfr3s],
.skeleton-avatar-lg[b-d1fa6nfr3s] {
    background: var(--mud-palette-background-gray);
    border-radius: 4px;
    animation: skel-pulse-b-d1fa6nfr3s 1.5s ease-in-out infinite;
}

.skeleton-banner[b-d1fa6nfr3s] {
    border-radius: 16px;
    border: var(--app-border);
    background: var(--mud-palette-surface);
    overflow: hidden;
}

.skeleton-cover[b-d1fa6nfr3s] {
    height: 180px;
    width: 100%;
    border-radius: 0;
}

.skeleton-banner-body[b-d1fa6nfr3s] {
    display: flex;
    align-items: flex-end;
    gap: 1.5rem;
    padding: 0 2rem 1.75rem;
}

.skeleton-avatar-lg[b-d1fa6nfr3s] {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: -44px;
    border: 4px solid var(--mud-palette-surface);
}

.skeleton-banner-text[b-d1fa6nfr3s] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    padding-bottom: 0.25rem;
}

.skel-title[b-d1fa6nfr3s] {
    height: 28px;
    width: 50%;
}

.skel-subtitle[b-d1fa6nfr3s] {
    height: 16px;
    width: 30%;
}

.skeleton-heatmap[b-d1fa6nfr3s] {
    border-radius: 12px;
    border: var(--app-border);
    background: var(--mud-palette-surface);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.skel-heatmap-header[b-d1fa6nfr3s] {
    height: 18px;
    width: 40%;
}

.skeleton-heatmap-grid[b-d1fa6nfr3s] {
    height: 85px;
    width: 100%;
    border-radius: 4px;
}

.skeleton-main-row[b-d1fa6nfr3s] {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.skeleton-stats-col[b-d1fa6nfr3s] {
    flex: 0 0 280px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.skel-section-title[b-d1fa6nfr3s] {
    height: 20px;
    width: 45%;
}

.skeleton-stats-grid[b-d1fa6nfr3s] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.skeleton-stat-card[b-d1fa6nfr3s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.75rem 0.4rem;
    border-radius: var(--app-border-radius);
    border: var(--app-border);
    background: var(--mud-palette-surface);
}

.skel-icon[b-d1fa6nfr3s] {
    width: 20px;
    height: 20px;
    border-radius: 4px;
}

.skel-icon-lg[b-d1fa6nfr3s] {
    width: 56px;
    height: 56px;
    border-radius: 8px;
}

.skel-stat-val[b-d1fa6nfr3s] {
    height: 18px;
    width: 36px;
}

.skel-stat-label[b-d1fa6nfr3s] {
    height: 12px;
    width: 50px;
}

.skeleton-badges-col[b-d1fa6nfr3s] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.skeleton-badges-grid[b-d1fa6nfr3s] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
}

.skeleton-badge-card[b-d1fa6nfr3s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.25rem 0.75rem;
    border-radius: 12px;
    border: var(--app-border);
    background: var(--mud-palette-surface);
}

.skel-badge-name[b-d1fa6nfr3s] {
    height: 14px;
    width: 60%;
}

@media (max-width: 900px) {
    .skeleton-main-row[b-d1fa6nfr3s] {
        flex-direction: column;
    }

    .skeleton-stats-col[b-d1fa6nfr3s] {
        flex: none;
        width: 100%;
    }

    .skeleton-stats-grid[b-d1fa6nfr3s] {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 600px) {
    .skeleton-cover[b-d1fa6nfr3s] {
        height: 130px;
    }

    .skeleton-banner-body[b-d1fa6nfr3s] {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 0 1rem 1.5rem;
    }

    .skeleton-banner-text[b-d1fa6nfr3s] {
        align-items: center;
    }

    .skeleton-stats-grid[b-d1fa6nfr3s] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Banner */
.profile-banner[b-d1fa6nfr3s] {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: var(--mud-palette-surface);
    border: var(--app-border);
}

/* Cover band — full-bleed top of the card */
.profile-cover[b-d1fa6nfr3s] {
    position: relative;
    height: 180px;
    width: 100%;
    overflow: hidden;
}

.profile-cover[b-d1fa6nfr3s]  .profile-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-avatar-section[b-d1fa6nfr3s] {
    display: flex;
    align-items: flex-end;
    gap: 1.5rem;
    padding: 2rem 2rem;
}

.avatar-frame[b-d1fa6nfr3s] {
    position: relative;
    flex-shrink: 0;
    display: inline-flex;
    line-height: 0;
    border-radius: 50%;
    background: var(--mud-palette-surface);
    box-shadow: 0 0 0 4px var(--mud-palette-surface), 0 6px 16px rgba(0, 0, 0, 0.18);
}

/* With a cover, the avatar overlaps the band and the row loses its top padding */
.profile-banner.has-cover .profile-avatar-section[b-d1fa6nfr3s] {
    padding: 1.5rem 2rem;
}

.profile-banner.has-cover .avatar-frame[b-d1fa6nfr3s] {
    margin-top: -44px;
}

.frame-sticker-img[b-d1fa6nfr3s] {
    position: absolute;
    inset: -12px;
    width: calc(100% + 24px);
    height: calc(100% + 24px);
    object-fit: contain;
    pointer-events: none;
    z-index: 1;
}

.profile-avatar[b-d1fa6nfr3s] {
    width: 88px !important;
    height: 88px !important;
}

.profile-identity[b-d1fa6nfr3s] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.profile-display-name[b-d1fa6nfr3s] {
    font-weight: 800;
    line-height: 1.2;
    text-wrap: balance;
}

.profile-username[b-d1fa6nfr3s] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.9rem;
}

/* Bio */
.profile-bio-card[b-d1fa6nfr3s] {
    background: var(--mud-palette-surface);
    border: var(--app-border);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.5;
}

/* ── Main row: Stats + Badges side by side ────────── */
.profile-main-row[b-d1fa6nfr3s] {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

/* Stats column — compact left side */
.profile-stats-column[b-d1fa6nfr3s] {
    flex: 0 0 280px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.profile-stats-grid[b-d1fa6nfr3s] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.stat-card[b-d1fa6nfr3s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.75rem 0.4rem;
    border-radius: var(--app-border-radius);
    background: var(--mud-palette-surface);
    border: var(--app-border);
    text-align: center;
    transition: border-color 0.2s ease-out;
}

.stat-card:hover[b-d1fa6nfr3s] {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
}

.stat-card .mud-typography.h5[b-d1fa6nfr3s] {
    font-weight: 800;
    line-height: 1;
    font-size: 1.1rem;
}

.stat-card .mud-typography.caption[b-d1fa6nfr3s] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.72rem;
}

/* Badges column — prominent right side */
.profile-badges-column[b-d1fa6nfr3s] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.section-title[b-d1fa6nfr3s] {
    font-weight: 700;
    display: flex;
    align-items: center;
}

/* Badges Grid */
.badges-grid[b-d1fa6nfr3s] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
}

.badge-card[b-d1fa6nfr3s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 1.25rem 0.75rem;
    border-radius: 12px;
    background: var(--mud-palette-surface);
    border: 2px solid var(--mud-palette-divider);
    text-align: center;
    transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
}

.badge-card.common[b-d1fa6nfr3s] {
    border-color: color-mix(in srgb, var(--mud-palette-text-secondary) 30%, transparent);
}

.badge-card.rare[b-d1fa6nfr3s] {
    border-color: color-mix(in srgb, var(--mud-palette-info) 50%, transparent);
}

.badge-card.epic[b-d1fa6nfr3s] {
    border-color: color-mix(in srgb, var(--mud-palette-secondary) 50%, transparent);
}

.badge-card.legendary[b-d1fa6nfr3s] {
    border-color: color-mix(in srgb, var(--mud-palette-warning) 60%, transparent);
    box-shadow: 0 0 12px color-mix(in srgb, var(--mud-palette-warning) 15%, transparent);
}

.badge-icon[b-d1fa6nfr3s] {
    width: 56px;
    height: 56px;
    object-fit: contain;
}

.badge-icon-missing[b-d1fa6nfr3s] {
    font-size: 56px !important;
    color: var(--mud-palette-text-disabled);
    opacity: 0.5;
}

.badge-name[b-d1fa6nfr3s] {
    font-weight: 700;
    font-size: 0.85rem;
}

.badge-desc[b-d1fa6nfr3s] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.72rem;
    line-height: 1.3;
}

.badges-streak-line[b-d1fa6nfr3s] {
    color: var(--mud-palette-text-secondary);
}

.badges-streak-line b[b-d1fa6nfr3s] {
    color: var(--mud-palette-text-primary);
}

.badge-card.is-destacada[b-d1fa6nfr3s] {
    border-color: color-mix(in srgb, var(--mud-palette-warning) 80%, transparent);
    box-shadow: 0 0 16px color-mix(in srgb, var(--mud-palette-warning) 30%, transparent);
}

.badge-card.is-locked[b-d1fa6nfr3s] {
    opacity: 0.65;
}

.badge-card.is-locked .badge-icon[b-d1fa6nfr3s] {
    filter: grayscale(1);
}

.badge-tag[b-d1fa6nfr3s] {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-warning) 18%, transparent);
    color: var(--mud-palette-warning);
}

.badge-card.is-locked .badge-tag[b-d1fa6nfr3s] {
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
}

/* Stickers Row */
.stickers-row[b-d1fa6nfr3s] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.sticker-item[b-d1fa6nfr3s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}

.sticker-img[b-d1fa6nfr3s] {
    width: 80px;
    height: 80px;
    object-fit: contain;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));
}

.sticker-img-missing[b-d1fa6nfr3s] {
    font-size: 80px !important;
    color: var(--mud-palette-text-disabled);
    opacity: 0.5;
    filter: none;
}

/* Footer */
.profile-footer[b-d1fa6nfr3s] {
    text-align: center;
    padding-top: 1rem;
    border-top: 1px solid var(--mud-palette-divider);
    color: var(--mud-palette-text-secondary);
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 900px) {
    .profile-page[b-d1fa6nfr3s] {
        padding: 1.5rem 1.25rem;
    }

    .profile-main-row[b-d1fa6nfr3s] {
        flex-direction: column;
    }

    .profile-stats-column[b-d1fa6nfr3s] {
        flex: none;
        width: 100%;
    }

    .profile-stats-grid[b-d1fa6nfr3s] {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 600px) {
    .profile-page[b-d1fa6nfr3s] {
        padding: 1rem 0.75rem;
    }

    .profile-cover[b-d1fa6nfr3s] {
        height: 130px;
    }

    .profile-avatar-section[b-d1fa6nfr3s] {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 1.5rem 1rem;
    }

    .profile-banner.has-cover .profile-avatar-section[b-d1fa6nfr3s] {
        padding-top: 0;
    }

    .profile-identity[b-d1fa6nfr3s] {
        align-items: center;
    }

    .profile-stats-grid[b-d1fa6nfr3s] {
        grid-template-columns: repeat(2, 1fr);
    }

    .badges-grid[b-d1fa6nfr3s] {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    }
}

/* ── Reduced motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    .skel-line[b-d1fa6nfr3s],
    .skeleton-heatmap-grid[b-d1fa6nfr3s],
    .skel-icon[b-d1fa6nfr3s],
    .skel-icon-lg[b-d1fa6nfr3s],
    .skeleton-cover[b-d1fa6nfr3s],
    .skeleton-avatar-lg[b-d1fa6nfr3s] {
        animation: none;
        opacity: 0.55;
    }

    .stat-card[b-d1fa6nfr3s],
    .badge-card[b-d1fa6nfr3s] {
        transition: none;
    }
}
/* /Pages/Ranking/MultiRankingPage.razor.rz.scp.css */
.multi-ranking-hub[b-wintlja6jd] {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 1rem;
    font-family: 'Inter', sans-serif;
}

.hub-header-container[b-wintlja6jd] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    gap: 1.5rem;
}

.hub-title-section[b-wintlja6jd] {
    flex: 1;
}

.hub-title[b-wintlja6jd] {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--mud-palette-text-primary);
    margin: 0 0 0.25rem 0;
    display: flex;
    align-items: center;
}

.hub-subtitle[b-wintlja6jd] {
    font-size: 0.95rem;
    color: var(--mud-palette-text-secondary);
    margin: 0;
}

.hub-controls[b-wintlja6jd] {
    flex-shrink: 0;
    min-width: 220px;
}

.category-select[b-wintlja6jd] {
    width: 100%;
}

.rankings-column[b-wintlja6jd] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* Las tarjetas de vista previa se apilan según el ancho de esta columna
       (no del viewport), para adaptarse cuando el drawer angosta el contenido. */
    container-type: inline-size;
}

/* Category detail view container. Es un <main>, así que la regla global
   `main { height: 100% }` de app.css lo estiraba por encima de su contenido y
   dejaba un hueco vacío al fondo del ranking. height:auto lo ajusta al contenido. */
.ranking-container[b-wintlja6jd] {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    container-type: inline-size;
}

/* Toggle de subcategoría (Global/Diario, Normal/Pesadilla/Salón) sobre el ranking. */
.ranking-subcategory-filters[b-wintlja6jd] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

@container (max-width: 720px) {
    .ranking-subcategory-filters[b-wintlja6jd] {
        margin-bottom: 1rem;
    }
}

/* Error & Empty state styles for Hub loading */
.error-container[b-wintlja6jd],
.empty-container[b-wintlja6jd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
    background-color: var(--mud-palette-surface);
    border-radius: var(--app-border-radius, 12px);
    border: 1px solid var(--mud-palette-lines-default);
    margin: 2rem 0;
}

.error-title[b-wintlja6jd],
.empty-title[b-wintlja6jd] {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    margin-bottom: 0.5rem;
}

.error-message[b-wintlja6jd],
.empty-message[b-wintlja6jd] {
    font-size: 0.95rem;
    color: var(--mud-palette-text-secondary);
    max-width: 400px;
}

@media (max-width: 768px) {
    .hub-header-container[b-wintlja6jd] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .hub-controls[b-wintlja6jd] {
        width: 100%;
        min-width: unset;
    }
}
/* /Pages/Store/StorePage.razor.rz.scp.css */
.store-page[b-prq7ni9gtm] {
    overflow-y: auto;
    height: 100%;
    width: 100%;
    background-color: var(--mud-palette-background);
    padding-bottom: 2rem;
}

[b-prq7ni9gtm] .store-container {
    margin-top: 2rem;
    margin-bottom: 2rem;
    max-width: 1100px !important;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Hero Section */
[b-prq7ni9gtm] .hero-section {
    padding: 2.5rem 2rem;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, var(--mud-palette-primary) 0%, var(--mud-palette-secondary) 100%);
    color: white;
    box-shadow: var(--app-box-shadow-sm);
    border-radius: var(--app-border-radius-lg);
}

.header-content-inner[b-prq7ni9gtm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.header-left[b-prq7ni9gtm] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.header-text[b-prq7ni9gtm] {
    display: flex;
    flex-direction: column;
    text-align: left;
}

[b-prq7ni9gtm] .hero-title {
    margin-bottom: 0.25rem;
    color: white !important;
    font-weight: 700;
}

[b-prq7ni9gtm] .hero-subtitle {
    opacity: 0.9;
    color: rgba(255, 255, 255, 0.9) !important;
}

.header-right[b-prq7ni9gtm] {
    display: flex;
    align-items: center;
}

.hero-balance[b-prq7ni9gtm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--app-border-radius-sm);
    padding: 0.5rem 1rem;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

[b-prq7ni9gtm] .hero-balance-text {
    color: white !important;
    font-weight: 700;
    margin: 0;
}

/* Controls Bar */
.controls-bar[b-prq7ni9gtm] {
    display: flex;
    flex-direction: column;
    padding: 1rem 1.5rem;
    gap: 0.75rem;
    background: var(--mud-palette-surface);
    border-radius: var(--app-border-radius);
    box-shadow: var(--app-box-shadow-sm);
    border: var(--app-border);
}

.search-wrapper[b-prq7ni9gtm] {
    width: 100%;
}

.filters-section[b-prq7ni9gtm] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

[b-prq7ni9gtm] .search-field {
    background: var(--mud-palette-drawer-background);
    border-radius: var(--app-border-radius-sm);
}

/* Filter Segmented Control tabs */
.filter-tabs[b-prq7ni9gtm] {
    display: flex;
    background: var(--mud-palette-background-gray);
    border-radius: var(--app-border-radius);
    padding: 4px;
    gap: 4px;
    border: var(--app-border);
}

.filter-tab[b-prq7ni9gtm] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    outline: none;
    border-radius: var(--app-border-radius-sm);
    padding: 6px 16px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-tab:hover[b-prq7ni9gtm] {
    color: var(--mud-palette-text-primary);
    background: color-mix(in srgb, var(--mud-palette-drawer-background) 30%, transparent);
}

.filter-tab.active[b-prq7ni9gtm] {
    background: var(--mud-palette-primary);
    color: #ffffff;
}

[b-prq7ni9gtm] .tab-icon {
    font-size: 1rem !important;
}

/* Grid */
.store-grid[b-prq7ni9gtm] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.5rem;
}

/* Item card */
.store-item-card[b-prq7ni9gtm] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--mud-palette-surface);
    border-radius: var(--app-border-radius);
    box-shadow: var(--app-box-shadow-sm);
    border: var(--app-border);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.store-item-card:hover[b-prq7ni9gtm] {
    transform: translateY(-3px);
    box-shadow: var(--app-box-shadow);
    border-color: color-mix(in srgb, var(--mud-palette-primary) 40%, transparent);
}

.store-item-img[b-prq7ni9gtm] {
    width: 100%;
    height: 160px;
    object-fit: cover;
    transition: transform 0.2s ease;
}

.store-item-card:hover .store-item-img[b-prq7ni9gtm] {
    transform: scale(1.03);
}

.store-item-img-placeholder[b-prq7ni9gtm] {
    width: 100%;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--mud-palette-background-gray) 0%, color-mix(in srgb, var(--mud-palette-divider) 30%, transparent) 100%);
    color: var(--mud-palette-text-secondary);
}

/* Square preview for frames & profile decorations */
.store-item-preview[b-prq7ni9gtm] {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: linear-gradient(135deg, var(--mud-palette-background-gray) 0%, color-mix(in srgb, var(--mud-palette-divider) 30%, transparent) 100%);
    overflow: hidden;
}

/* Frame: user avatar behind the frame overlay */
.frame-preview-inner[b-prq7ni9gtm] {
    position: relative;
    width: 78%;
    aspect-ratio: 1 / 1;
    transition: transform 0.2s ease;
}

.store-item-card:hover .frame-preview-inner[b-prq7ni9gtm] {
    transform: scale(1.04);
}

.frame-preview-avatar[b-prq7ni9gtm] {
    position: absolute;
    inset: 11%;
    width: 78%;
    height: 78%;
    object-fit: cover;
    border-radius: 50%;
}

.frame-preview-frame[b-prq7ni9gtm] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    z-index: 1;
}

/* Decor: shown smaller inside the square */
.decor-preview-img[b-prq7ni9gtm] {
    width: 55%;
    height: 55%;
    object-fit: contain;
    transition: transform 0.2s ease;
}

.store-item-card:hover .decor-preview-img[b-prq7ni9gtm] {
    transform: scale(1.06);
}

.store-item-body[b-prq7ni9gtm] {
    padding: 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
}

.store-item-name[b-prq7ni9gtm] {
    font-weight: 700;
}

.store-item-desc[b-prq7ni9gtm] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.85rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.store-item-price[b-prq7ni9gtm] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: auto;
    padding-top: 0.5rem;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--mud-palette-warning);
}

/* Empty state */
.store-empty[b-prq7ni9gtm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    background: var(--mud-palette-surface);
    border-radius: var(--app-border-radius);
    box-shadow: var(--app-box-shadow-sm);
    border: var(--app-border);
}

.empty-icon-wrapper[b-prq7ni9gtm] {
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

[b-prq7ni9gtm] .empty-icon {
    color: var(--mud-palette-primary);
    font-size: 2.25rem !important;
}

.empty-title[b-prq7ni9gtm] {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: var(--mud-palette-text-primary);
}

.empty-subtitle[b-prq7ni9gtm] {
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
    max-width: 320px;
    margin: 0;
    line-height: 1.5;
}

/* Skeleton loading */
.skeleton-card[b-prq7ni9gtm] {
    border-radius: var(--app-border-radius);
    background: var(--mud-palette-surface);
    border: var(--app-border);
    box-shadow: var(--app-box-shadow-sm);
    overflow: hidden;
}

.skeleton-img[b-prq7ni9gtm] {
    width: 100%;
    height: 160px;
    background: var(--mud-palette-background-gray);
    animation: skeleton-pulse-b-prq7ni9gtm 1.5s ease-in-out infinite;
}

.skeleton-body[b-prq7ni9gtm] {
    padding: 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.skeleton-line[b-prq7ni9gtm] {
    border-radius: 4px;
    background: var(--mud-palette-background-gray);
    animation: skeleton-pulse-b-prq7ni9gtm 1.5s ease-in-out infinite;
}

.skeleton-title[b-prq7ni9gtm] {
    height: 18px;
    width: 70%;
}

.skeleton-desc[b-prq7ni9gtm] {
    height: 14px;
    width: 100%;
}

.skeleton-desc.short[b-prq7ni9gtm] {
    width: 55%;
}

.skeleton-price[b-prq7ni9gtm] {
    height: 16px;
    width: 30%;
    margin-top: 0.25rem;
}

@keyframes skeleton-pulse-b-prq7ni9gtm {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

/* superficie-propia: article.content renuncia a su holgura (app.css) porque este scroller
   es propio; la reservamos aquí como padding del propio scroller (no achica el contenedor)
   para que el contenido pueda deslizarse por detrás de la barra flotante hasta liberarla. */
@media (max-width: 950px) {
    .store-page[b-prq7ni9gtm] {
        padding-bottom: calc(2rem + var(--bottom-nav-clearance));
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .store-container[b-prq7ni9gtm] {
        margin-top: 1rem;
        margin-bottom: 1rem;
        gap: 1rem;
    }

    .hero-section[b-prq7ni9gtm] {
        padding: 1.75rem 1.25rem;
    }

    .header-content-inner[b-prq7ni9gtm] {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .controls-bar[b-prq7ni9gtm] {
        padding: 1.25rem;
    }

    .filters-section[b-prq7ni9gtm] {
        flex-direction: column;
    }

    .filter-tabs[b-prq7ni9gtm] {
        width: 100%;
        justify-content: space-between;
        overflow-x: auto;
    }

    .filter-tab[b-prq7ni9gtm] {
        flex: 1;
        justify-content: center;
        padding: 8px 4px;
        font-size: 0.8rem;
        white-space: nowrap;
    }

    .store-grid[b-prq7ni9gtm] {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 1rem;
    }
}
/* /Pages/TorreDePoder/TorreDePoder.razor.rz.scp.css */
.tower-game-container[b-ltlmryfn2t] {
    min-height: calc(100vh - 120px);
    color: var(--mud-palette-text-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex-shrink: 0;
    flex-shrink: 0;
    padding: 1.5rem 1rem;
}

/* ── Loading &amp; Error Screens ──────────────────────────────── */
.tower-loading-screen[b-ltlmryfn2t],
.tower-error-screen[b-ltlmryfn2t] {
    background: var(--mud-palette-surface);
    border: 2px solid var(--mud-palette-lines-default);
    box-shadow: var(--app-box-shadow-sm);
    border-radius: 16px;
    padding: 3rem 2rem;
    max-width: 500px;
    width: 100%;
    text-align: center;
    margin: auto;
}

.tower-error-screen h2[b-ltlmryfn2t] {
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: 1px;
    margin: 0.75rem 0 0.5rem;
}

.error-desc[b-ltlmryfn2t] {
    color: var(--mud-palette-text-secondary);
    margin-bottom: 1.5rem;
}

.error-actions[b-ltlmryfn2t] {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

/* Spinner */
.loader-spinner[b-ltlmryfn2t] {
    width: 60px;
    height: 60px;
    border: 5px solid color-mix(in srgb, var(--mud-palette-primary) 15%, transparent);
    border-top: 5px solid var(--mud-palette-primary);
    border-radius: 50%;
    margin: 0 auto 1.5rem;
    animation: spin-b-ltlmryfn2t 1s linear infinite;
}

@keyframes spin-b-ltlmryfn2t {
    to {
        transform: rotate(360deg);
    }
}

.loading-text[b-ltlmryfn2t] {
    font-size: 1.1rem;
    color: var(--mud-palette-text-secondary);
    letter-spacing: 1px;
}

/* ============================================================
   WORKSPACE LAYOUT
   ============================================================ */
.tower-game-workspace[b-ltlmryfn2t] {
    display: flex;
    gap: 2rem;
    width: 100%;
    max-width: 1200px;
}

/* ── Sidebar: Ladder ──────────────────────────────────────── */
.tower-sidebar[b-ltlmryfn2t] {
    flex: 0 0 280px;
    background: color-mix(in srgb, var(--mud-palette-background) 80%, transparent);
    border: 2px solid var(--mud-palette-primary-darken);
    border-radius: 16px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    align-self: flex-start;
    position: sticky;
    top: 1.5rem;
}

.sidebar-header[b-ltlmryfn2t] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 1px solid var(--mud-palette-divider);
    border-bottom: 1px solid var(--mud-palette-divider);
    padding-bottom: 0.75rem;
}

.sidebar-header h3[b-ltlmryfn2t] {
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: 3px;
    color: var(--mud-palette-text-primary);
}

/* ::deep porque .glowing-accent se pasa via Class= a un MudIcon */
[b-ltlmryfn2t] .glowing-accent {
    color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

/* Ladder steps */
.arcade-ladder[b-ltlmryfn2t] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.ladder-step[b-ltlmryfn2t] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 0.9rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-background));
    border: 2px solid color-mix(in srgb, var(--mud-palette-primary) 20%, transparent);
    transition: border-color 0.2s, background-color 0.2s;
    border: 2px solid color-mix(in srgb, var(--mud-palette-primary) 20%, transparent);
    transition: border-color 0.2s, background-color 0.2s;
}

.ladder-step.completed[b-ltlmryfn2t] {
    background: color-mix(in srgb, var(--mud-palette-success) 5%, var(--mud-palette-surface));
    border-color: color-mix(in srgb, var(--mud-palette-success) 30%, var(--mud-palette-divider));
    background: color-mix(in srgb, var(--mud-palette-success) 5%, var(--mud-palette-surface));
    border-color: color-mix(in srgb, var(--mud-palette-success) 30%, var(--mud-palette-divider));
}

.ladder-step.completed .step-name[b-ltlmryfn2t] {
    color: var(--mud-palette-success);
    text-decoration: line-through;
    opacity: 0.7;
}

.ladder-step.active[b-ltlmryfn2t] {
    border-color: var(--mud-palette-error);
    box-shadow: 0 0 14px color-mix(in srgb, var(--mud-palette-error) 40%, transparent);
    transform: scale(1.03);
}

.ladder-step.active .step-name[b-ltlmryfn2t] {
    color: var(--mud-palette-error-darken);
    color: var(--mud-palette-error-darken);
    font-weight: 800;
}

.ladder-step.locked[b-ltlmryfn2t] {
    opacity: 0.5;
}

.step-indicator[b-ltlmryfn2t] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
}

.active-pulse-dot[b-ltlmryfn2t] {
    width: 11px;
    height: 11px;
    background-color: var(--mud-palette-error);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--mud-palette-error);
    animation: pulse-b-ltlmryfn2t 3s infinite;
    animation: pulse-b-ltlmryfn2t 3s infinite;
}

@keyframes pulse-b-ltlmryfn2t {
    0% {
        transform: scale(0.9);
        opacity: 1;
    }

    50% {
        transform: scale(1.3);
        transform: scale(1.3);
        opacity: 0.5;
    }

    100% {
        transform: scale(0.9);
        opacity: 1;
    }
}

.step-info[b-ltlmryfn2t] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.step-name[b-ltlmryfn2t] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
}

.step-stats[b-ltlmryfn2t] {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Main Board ───────────────────────────────────────────── */
.tower-main-board[b-ltlmryfn2t] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ============================================================
   HUD
   ============================================================ */
.game-hud[b-ltlmryfn2t] {
    display: flex;
    flex-direction: column;
    display: flex;
    flex-direction: column;
    background: color-mix(in srgb, var(--mud-palette-background) 85%, transparent);
    border: 2px solid var(--mud-palette-primary-darken);
    border-radius: 14px;
    padding: 1rem 1.25rem;
    gap: 0.5rem;
    box-shadow: var(--app-box-shadow);

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

.game-hud-banner-info[b-ltlmryfn2t] {
    display: grid;
    grid-template-columns: 1fr 110px 1fr;
    align-items: center;
    gap: 0.5rem;
}

.hud-item[b-ltlmryfn2t] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.hud-details[b-ltlmryfn2t] {
    display: flex;
    flex-direction: column;
}

.hud-center[b-ltlmryfn2t] {
    align-items: center;
    width: 100%;
}

.hud-right[b-ltlmryfn2t] {
    align-items: flex-end;
    width: 100%;
}

.hud-label[b-ltlmryfn2t] {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
}

.hud-value[b-ltlmryfn2t] {
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--mud-palette-text-primary);
}

.clock-font[b-ltlmryfn2t] {
    font-family: ui-monospace, 'Cascadia Mono', 'Courier New', monospace;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-info);
    font-size: 1rem;
}

.level-highlight[b-ltlmryfn2t] {
    font-size: 1.8rem;
    color: var(--mud-palette-warning);
    line-height: 1;
}

/* ::deep porque .hud-icon y .text-cyan se pasan via Class= a MudIcon */
[b-ltlmryfn2t] .hud-icon {
    font-size: 2rem !important;
    flex-shrink: 0;
}

[b-ltlmryfn2t] .text-cyan {
    color: var(--mud-palette-info);
}

.hud-hearts[b-ltlmryfn2t] {
    display: flex;
    gap: 0.2rem;
    margin-top: 4px;
}

/* ::deep porque .heart-icon se pasa via Class= a MudIcon */
[b-ltlmryfn2t] .heart-icon {
    font-size: 1.6rem !important;
    transition: transform 0.2s;
}

[b-ltlmryfn2t] .heart-icon.filled {
    color: var(--mud-palette-error);
    filter: drop-shadow(0 0 5px var(--mud-palette-error));
}

[b-ltlmryfn2t] .heart-icon.empty {
    color: color-mix(in srgb, var(--mud-palette-primary) 25%, var(--mud-palette-background));
}

/* ── Progress Bar ─────────────────────────────────────────── */
.progress-bar-container[b-ltlmryfn2t] {
    background: color-mix(in srgb, var(--mud-palette-background) 50%, transparent);
    padding: 0.7rem 1rem;

    display: flex;
    color: var(--mud-palette-text-secondary);
    color: var(--mud-palette-text-secondary);
    justify-content: space-between;
    font-size: 0.78rem;

    align-items: center;
    gap: 1rem;

    align-items: center;
    gap: 1rem;
}



.progress-track[b-ltlmryfn2t] {
    height: 8px;
    background: color-mix(in srgb, var(--mud-palette-background) 80%, var(--mud-palette-primary));
    border-radius: 4px;
    overflow: hidden;
    flex: 1;

    flex: 1;

}

.progress-fill[b-ltlmryfn2t] {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, var(--mud-palette-info), var(--mud-palette-success));
    border-radius: 4px;
    transform: scaleX(calc(var(--progress, 0) / 100));
    transform-origin: left;
    transition: transform 0.4s ease-out;
}

/* ============================================================
   GAME BOARD CARD
   ============================================================ */
.game-board-card[b-ltlmryfn2t] {
    background: color-mix(in srgb, var(--mud-palette-background) 80%, transparent);
    border: 2px solid var(--mud-palette-primary);
    border-radius: 16px;
    box-shadow: var(--app-box-shadow-hover);
    padding: 2.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.board-action-loading[b-ltlmryfn2t] {
    text-align: center;
    padding: 3rem;
}

.board-action-loading p[b-ltlmryfn2t] {
    margin-top: 1rem;
    font-size: 1.05rem;
    color: var(--mud-palette-text-secondary);
}

/* ── Question Pane ────────────────────────────────────────── */
.question-pane[b-ltlmryfn2t] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.question-header[b-ltlmryfn2t] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.subject-badge[b-ltlmryfn2t],
.topic-badge[b-ltlmryfn2t] {
    padding: 0.3rem 0.75rem;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    border-radius: 6px;
    letter-spacing: 1px;
}

.subject-badge[b-ltlmryfn2t] {
    background: color-mix(in srgb, var(--mud-palette-primary) 20%, transparent);
    color: var(--mud-palette-primary-lighten);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 50%, transparent);
}

.topic-badge[b-ltlmryfn2t] {
    background: color-mix(in srgb, var(--mud-palette-info) 20%, transparent);
    color: var(--mud-palette-info-lighten);
    border: 1px solid color-mix(in srgb, var(--mud-palette-info) 50%, transparent);
}

.question-text[b-ltlmryfn2t] {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.45;
    color: var(--mud-palette-text-primary);
    margin: 0;
}

.question-figure[b-ltlmryfn2t] {
    display: flex;
    justify-content: center;
    margin: 0.5rem 0 1rem;
    padding: 0 0.5rem;
}

.question-figure-img[b-ltlmryfn2t] {
    max-width: 100%;
    max-height: 320px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    padding: 0.5rem;
}

/* SVG inyectado (figura_svg): el SVG trae fondo blanco propio */
.question-figure-svg[b-ltlmryfn2t] {
    width: 100%;
    max-width: 380px;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-divider);
    background: #fff;
    padding: 0.5rem;
}

.question-figure-svg[b-ltlmryfn2t]  svg {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* ── Options ──────────────────────────────────────────────── */
.options-list[b-ltlmryfn2t] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
}

.arcade-option-button[b-ltlmryfn2t] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 1rem 1.25rem;
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-background));
    border: 2px solid color-mix(in srgb, var(--mud-palette-primary) 50%, transparent);
    border-radius: 12px;
    color: var(--mud-palette-text-primary);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}

.arcade-option-button:hover:not(:disabled)[b-ltlmryfn2t] {
    border-color: var(--mud-palette-info);
    box-shadow: 0 0 14px color-mix(in srgb, var(--mud-palette-info) 40%, transparent);
    transform: scale(1.012);
}

.arcade-option-button:active:not(:disabled)[b-ltlmryfn2t] {
    transform: scale(0.995);
}

.arcade-option-button:disabled[b-ltlmryfn2t] {
    opacity: 0.5;
    cursor: not-allowed;
}

.option-letter[b-ltlmryfn2t] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--mud-palette-error);
    color: var(--mud-palette-text-primary);
    font-weight: 900;
    font-size: 0.9rem;
    margin-right: 1.1rem;
    box-shadow: 0 0 8px color-mix(in srgb, var(--mud-palette-error) 60%, transparent);
}

.option-text[b-ltlmryfn2t] {
    line-height: 1.35;
}

/* ============================================================
   FEEDBACK PANE
   ============================================================ */
.feedback-pane[b-ltlmryfn2t] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    animation: fadeInUp-b-ltlmryfn2t 0.35s ease-out;
}

@keyframes fadeInUp-b-ltlmryfn2t {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.feedback-status-banner[b-ltlmryfn2t] {
    display: flex;
    align-items: center;
    gap: 1rem;
    border-bottom: 2px solid;
    padding-bottom: 1rem;
}

.feedback-status-banner h2[b-ltlmryfn2t] {
    font-size: 1.7rem;
    font-weight: 900;
    letter-spacing: 1px;
    margin: 0;
}

/* ::deep porque .feedback-banner-icon se pasa via Class= a MudIcon */
[b-ltlmryfn2t] .feedback-banner-icon {
    font-size: 2.4rem !important;
}

.correct-feedback .feedback-status-banner[b-ltlmryfn2t] {
    border-color: var(--mud-palette-success);
    color: var(--mud-palette-success);
}

.incorrect-feedback .feedback-status-banner[b-ltlmryfn2t] {
    border-color: var(--mud-palette-error);
    color: var(--mud-palette-error);
}

.correct-was[b-ltlmryfn2t] {
    font-size: 1.05rem;
    color: var(--mud-palette-text-primary);
    margin: 0;
}

.correct-was strong[b-ltlmryfn2t] {
    color: var(--mud-palette-warning);
    font-size: 1.15rem;
}

.explanation-box[b-ltlmryfn2t] {
    background: color-mix(in srgb, var(--mud-palette-background) 70%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 40%, transparent);
    border-radius: 10px;
    padding: 1.1rem 1.25rem;
}

.explanation-box h5[b-ltlmryfn2t] {
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 1px;
    color: var(--mud-palette-text-secondary);
    margin: 0 0 0.4rem;
}

.explanation-box p[b-ltlmryfn2t] {
    font-size: 0.93rem;
    line-height: 1.5;
    color: var(--mud-palette-text-primary);
    margin: 0;
}

.rewards-summary[b-ltlmryfn2t] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.reward-pill[b-ltlmryfn2t] {
    padding: 0.45rem 1rem;
    border-radius: 20px;
    font-size: 0.88rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.coins-pill[b-ltlmryfn2t] {
    background: color-mix(in srgb, var(--mud-palette-warning) 12%, transparent);
    color: var(--mud-palette-warning);
    border: 1px solid color-mix(in srgb, var(--mud-palette-warning) 40%, transparent);
    box-shadow: 0 0 8px color-mix(in srgb, var(--mud-palette-warning) 15%, transparent);
}

.bonus-pill[b-ltlmryfn2t] {
    background: color-mix(in srgb, var(--mud-palette-secondary) 20%, transparent);
    color: var(--mud-palette-secondary-lighten);
    border: 1px solid color-mix(in srgb, var(--mud-palette-secondary) 50%, transparent);
    box-shadow: 0 0 8px color-mix(in srgb, var(--mud-palette-secondary) 25%, transparent);
}

/* Outcome notices */
.level-failed-notice[b-ltlmryfn2t],
.tower-completed-notice[b-ltlmryfn2t],
.level-completed-notice[b-ltlmryfn2t] {
    text-align: center;
    padding: 1.5rem;
    background: color-mix(in srgb, var(--mud-palette-background) 70%, transparent);
    border: 2px solid;
    border-radius: 12px;
    animation: popIn-b-ltlmryfn2t 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes popIn-b-ltlmryfn2t {
    from {
        transform: scale(0.85);
        opacity: 0;
    }

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

.level-failed-notice[b-ltlmryfn2t] {
    border-color: var(--mud-palette-error);
    box-shadow: 0 0 15px color-mix(in srgb, var(--mud-palette-error) 25%, transparent);
}

.level-failed-notice h3[b-ltlmryfn2t] {
    color: var(--mud-palette-error);
    font-weight: 800;
}

.tower-completed-notice[b-ltlmryfn2t] {
    border-color: var(--mud-palette-warning);
    box-shadow: 0 0 20px color-mix(in srgb, var(--mud-palette-warning) 25%, transparent);
}

.tower-completed-notice h3[b-ltlmryfn2t] {
    color: var(--mud-palette-warning);
    font-weight: 900;
}

/* ::deep porque .gold-glow se pasa via Class= a MudIcon */
[b-ltlmryfn2t] .gold-glow {
    color: var(--mud-palette-warning);
}

.level-completed-notice[b-ltlmryfn2t] {
    border-color: var(--mud-palette-success);
}

.level-completed-notice h3[b-ltlmryfn2t] {
    color: var(--mud-palette-success);
    font-weight: 800;
}

/* ::deep porque .green-glow se pasa via Class= a MudIcon */
[b-ltlmryfn2t] .green-glow {
    color: var(--mud-palette-success);
}

.feedback-actions[b-ltlmryfn2t] {
    margin-top: 0.5rem;
}

/* ::deep porque .action-btn-glow se pasa via Class= a MudButton */
[b-ltlmryfn2t] .action-btn-glow {
    transition: none !important;
    transition: none !important;
}

[b-ltlmryfn2t] .action-btn-glow:hover {
    background-color: var(--mud-palette-primary-darken) !important;
    background-color: var(--mud-palette-primary-darken) !important;
}

/* ============================================================
   EPIC OVERLAYS &amp; MICRO-ANIMATIONS
   ============================================================ */
.epic-overlay-message[b-ltlmryfn2t] {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    background: var(--mud-palette-overlay-dark);
    backdrop-filter: blur(4px);
    pointer-events: none;
}

/* FIGHT */
.fight-text-anim[b-ltlmryfn2t] {
    font-size: 8rem;
    font-weight: 900;
    color: var(--mud-palette-error);
    text-shadow: 0 0 20px var(--mud-palette-error), 0 0 50px var(--mud-palette-error);
    letter-spacing: 6px;
    animation: fightAnim-b-ltlmryfn2t 1.2s forwards cubic-bezier(0.22, 1, 0.36, 1);
    margin: 0;
}

@keyframes fightAnim-b-ltlmryfn2t {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }

    20% {
        transform: scale(1.1);
        opacity: 1;
    }

    30% {
        transform: scale(1);
    }

    80% {
        transform: scale(1);
        opacity: 1;
        filter: blur(0);
    }

    100% {
        transform: scale(1.4);
        opacity: 0;
        filter: blur(10px);
    }
}

/* PERFECT VICTORY */
.perfect-text-anim[b-ltlmryfn2t] {
    font-size: 5rem;
    font-weight: 900;
    color: var(--mud-palette-warning);
    text-shadow: 0 0 15px var(--mud-palette-warning), 0 0 35px var(--mud-palette-warning);
    letter-spacing: 2px;
    animation: slideInOut-b-ltlmryfn2t 2.3s forwards;
    margin: 0;
}

.perfect-subtext[b-ltlmryfn2t] {
    font-size: 1.7rem;
    color: var(--mud-palette-text-primary);
    font-weight: 800;
    margin-top: 1rem;
    text-shadow: 0 0 8px color-mix(in srgb, var(--mud-palette-text-primary) 40%, transparent);
    opacity: 0;
    animation: delayFadeIn-b-ltlmryfn2t 2.3s forwards;
}

@keyframes slideInOut-b-ltlmryfn2t {
    0% {
        transform: translateY(-40px) scale(0.85);
        opacity: 0;
    }

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

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

    100% {
        transform: translateY(40px) scale(0.85);
        opacity: 0;
    }
}

@keyframes delayFadeIn-b-ltlmryfn2t {

    0%,
    18% {
        opacity: 0;
    }

    28%,
    88% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* FLOOR COMPLETED */
.completed-text-anim[b-ltlmryfn2t] {
    font-size: 4.5rem;
    font-weight: 900;
    color: var(--mud-palette-success);
    text-shadow: 0 0 15px var(--mud-palette-success), 0 0 35px var(--mud-palette-success);
    letter-spacing: 2px;
    animation: slideInOut-b-ltlmryfn2t 1.9s forwards;
    margin: 0;
}

/* FLOATING COINS */
.floating-coins-indicator[b-ltlmryfn2t] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1000;
    animation: floatCoins-b-ltlmryfn2t 1.5s ease-out forwards;
}

.coin-float-text[b-ltlmryfn2t] {
    font-size: 3rem;
    font-weight: 900;
    color: var(--mud-palette-warning);
    text-shadow: 0 0 10px var(--mud-palette-warning), 0 4px 12px rgba(0, 0, 0, 0.6);
}

@keyframes floatCoins-b-ltlmryfn2t {
    0% {
        transform: translate(-50%, -50%) scale(0.6);
        opacity: 0;
    }

    20% {
        transform: translate(-50%, -60%) scale(1.1);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -130%) scale(0.8);
        opacity: 0;
    }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
    .tower-game-workspace[b-ltlmryfn2t] {
        flex-direction: column-reverse;
        gap: 1.25rem;
    }

    .tower-sidebar[b-ltlmryfn2t] {
        position: static;
        flex: none;
    }

    .arcade-ladder[b-ltlmryfn2t] {
        flex-direction: column;
        overflow-y: auto;
        max-height: 50vh;
        padding-bottom: 0.5rem;
        gap: 0.4rem;
        scrollbar-width: thin;
        scrollbar-color: var(--mud-palette-primary-darken) transparent;
    }

    .arcade-ladder[b-ltlmryfn2t]::-webkit-scrollbar {
        width: 4px;
    }

    .arcade-ladder[b-ltlmryfn2t]::-webkit-scrollbar-thumb {
        background: var(--mud-palette-primary-darken);
        border-radius: 2px;
    }

    .ladder-step[b-ltlmryfn2t] {
        flex: 0 0 auto;
        flex-direction: row;
        align-items: center;
        text-align: left;
        padding: 0.4rem 0.6rem;
    }

    .step-info[b-ltlmryfn2t] {
        align-items: flex-start;
    }

    .step-stats[b-ltlmryfn2t] {
        display: none;
    }

    .game-hud[b-ltlmryfn2t] {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }

    .timer-hud[b-ltlmryfn2t] {
        grid-column: 1 / -1;
        justify-content: center;
    }

    .hud-center[b-ltlmryfn2t] {
        align-items: flex-start;
    }

    .hud-right[b-ltlmryfn2t] {
        align-items: flex-end;
    }
}

@media (max-width: 600px) {
    .tower-game-container[b-ltlmryfn2t] {
        padding: 1rem 0.5rem;
    }

    .game-board-card[b-ltlmryfn2t] {
        padding: 1.25rem;
    }

    .question-text[b-ltlmryfn2t] {
        font-size: 1.2rem;
    }

    .arcade-option-button[b-ltlmryfn2t] {
        padding: 0.8rem 1rem;
        font-size: 0.93rem;
    }

    .fight-text-anim[b-ltlmryfn2t] {
        font-size: 4rem;
    }

    .perfect-text-anim[b-ltlmryfn2t],
    .completed-text-anim[b-ltlmryfn2t] {
        font-size: 2.6rem;
    }
}