/* /Components/MichilandLoader.razor.rz.scp.css */
/* ============================================================
   MichilandLoader — Michiland wordmark sobre fondo degradado
   rosa/morado, con animación de carga y transparencias.
   ============================================================ */

.michi-loader[b-45rphyx8ew] {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(18px, 2.4vw, 28px) clamp(28px, 4vw, 44px);
    border-radius: 28px;
    overflow: hidden;
    isolation: isolate;
    box-shadow:
        0 18px 40px rgba(91, 58, 138, 0.28),
        0 2px 6px rgba(91, 58, 138, 0.18);
}

/* ---------- fondo degradado rosa/morado con shimmer ---------- */
.michi-loader-bg[b-45rphyx8ew] {
    position: absolute;
    inset: -20%;
    z-index: -2;
    background:
        linear-gradient(120deg, #ff6a99 0%, #a674ff 50%, #ff6a99 100%);
    background-size: 200% 200%;
    animation:
        michi-loader-shift-b-45rphyx8ew 6s ease-in-out infinite alternate,
        michi-loader-fade-b-45rphyx8ew 2.6s ease-in-out infinite;
}

/* transparencias / ondas de luz que cruzan el loader */
.michi-loader-bg[b-45rphyx8ew]::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 80%, rgba(255, 143, 177, 0.85) 0%, transparent 50%),
        radial-gradient(circle at 82% 22%, rgba(198, 155, 255, 0.85) 0%, transparent 50%);
    mix-blend-mode: screen;
    opacity: 0.65;
    animation: michi-loader-breathe-b-45rphyx8ew 4.5s ease-in-out infinite;
}

/* onda de luz que cruza el loader */
.michi-loader-bg[b-45rphyx8ew]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        transparent 35%,
        rgba(255, 255, 255, 0.20) 48%,
        transparent 60%
    );
    transform: translateX(-100%);
    animation: michi-loader-shimmer-b-45rphyx8ew 2.4s linear infinite;
}

/* ---------- contenido apilado ---------- */
.michi-loader-stack[b-45rphyx8ew] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(6px, 1vw, 12px);
    text-align: center;
}

/* ---------- imagen de marca con respiración ---------- */
.michi-loader-brand[b-45rphyx8ew] {
    display: inline-block;
    line-height: 0;
    animation: michi-loader-pulse-b-45rphyx8ew 1.8s ease-in-out infinite;
    filter:
        drop-shadow(0 6px 14px rgba(91, 58, 138, 0.45))
        drop-shadow(0 0 10px rgba(255, 255, 255, 0.55));
}
.michi-loader-brand img[b-45rphyx8ew] {
    width: clamp(160px, 22vw, 240px);
    height: auto;
    display: block;
}

/* ---------- tres puntitos kawaii ---------- */
.michi-loader-dots[b-45rphyx8ew] {
    display: inline-flex;
    gap: 6px;
    margin-top: 2px;
}
.michi-loader-dots .dot[b-45rphyx8ew] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 0 2px rgba(91, 58, 138, 0.35);
    animation: michi-loader-dot-b-45rphyx8ew 1.1s ease-in-out infinite;
    opacity: 0.35;
}
.michi-loader-dots .dot-1[b-45rphyx8ew] { animation-delay: 0s; }
.michi-loader-dots .dot-2[b-45rphyx8ew] { animation-delay: 0.18s; background: #ffd9a3; }
.michi-loader-dots .dot-3[b-45rphyx8ew] { animation-delay: 0.36s; background: #ffc8a8; }

/* ---------- texto ---------- */
.loader-text[b-45rphyx8ew] {
    font-size: clamp(0.95rem, 1.4vw, 1.05rem);
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.02em;
    margin-top: 4px;
    text-shadow:
        0 1px 0 rgba(91, 58, 138, 0.55),
        0 0 14px rgba(91, 58, 138, 0.45);
    animation: michi-loader-text-fade-b-45rphyx8ew 1.8s ease-in-out infinite;
}

/* ============================================================
   keyframes
   ============================================================ */

/* el fondo se desplaza y respira (transparencia animada) */
@keyframes michi-loader-shift-b-45rphyx8ew {
    0%   { background-position:   0% 50%; }
    100% { background-position: 100% 50%; }
}
@keyframes michi-loader-fade-b-45rphyx8ew {
    0%, 100% { opacity: 0.92; }
    50%      { opacity: 1;    }
}
@keyframes michi-loader-breathe-b-45rphyx8ew {
    0%, 100% { opacity: 0.55; transform: scale(1);    }
    50%      { opacity: 0.85; transform: scale(1.06); }
}

/* ola de luz recorriendo el loader */
@keyframes michi-loader-shimmer-b-45rphyx8ew {
    0%   { transform: translateX(-100%); }
    60%  { transform: translateX( 100%); }
    100% { transform: translateX( 100%); }
}

/* la marca respira */
@keyframes michi-loader-pulse-b-45rphyx8ew {
    0%, 100% { transform: scale(1)    translateY(0);    }
    50%      { transform: scale(1.04) translateY(-3px); }
}

/* los puntos saltan */
@keyframes michi-loader-dot-b-45rphyx8ew {
    0%, 60%, 100% { transform: translateY(0)    scale(1);    opacity: 0.45; }
    30%           { transform: translateY(-7px) scale(1.25); opacity: 1;    }
}

/* el texto aparece/desaparece con la carga */
@keyframes michi-loader-text-fade-b-45rphyx8ew {
    0%, 100% { opacity: 0.85; }
    50%      { opacity: 1;    }
}

/* ============================================================
   prefers-reduced-motion — calma todo
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .michi-loader-bg[b-45rphyx8ew],
    .michi-loader-bg[b-45rphyx8ew]::before,
    .michi-loader-bg[b-45rphyx8ew]::after,
    .michi-loader-brand[b-45rphyx8ew],
    .michi-loader-dots .dot[b-45rphyx8ew],
    .loader-text[b-45rphyx8ew] {
        animation: none !important;
    }
    .michi-loader-bg[b-45rphyx8ew]::after { display: none; }
    .michi-loader-bg[b-45rphyx8ew]::before { display: none; }
}
/* /Components/QuizBell.razor.rz.scp.css */
/* QuizBell — campanita en el topbar + dropdown + modal de respuesta.

   El botón va pegado al logout a la derecha del topbar. Cuando hay
   quizzes pendientes muestra un badge con la cuenta; al click abre un
   panel flotante (position: fixed debajo del topbar) con la lista.
   Tocar fuera del panel (overlay) o apretar Escape lo cierra.

   El modal de respuesta es full-bleed con tarjeta centrada. Reusa las
   variables `.btn-michi` y `.msg-error` que ya viven en components.css
   (el componente no las redefinió — vienen por herencia global). */

.quiz-bell[b-z8kwtbkn3z] {
    position: relative;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    color: #7a3fc8;
    display: grid;
    place-items: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .18s ease, transform .18s ease,
                box-shadow .18s ease, color .18s ease;
    box-shadow: 0 2px 4px rgba(122, 63, 200, .08);
}

.quiz-bell:hover[b-z8kwtbkn3z] {
    background: #f4e8ff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 14px rgba(122, 63, 200, .22);
}
.quiz-bell:active[b-z8kwtbkn3z] { transform: translateY(0) scale(.96); }
.quiz-bell:focus-visible[b-z8kwtbkn3z] {
    outline: 3px solid #c69bff;
    outline-offset: 3px;
}

.quiz-bell.is-open[b-z8kwtbkn3z] {
    background: linear-gradient(180deg, #e3d4ff 0%, #c69bff 100%);
    color: #fff;
    box-shadow: 0 8px 18px rgba(122, 63, 200, .35);
}

/* Subtle wiggle when there are pending quizzes — pulse "¡mira aquí!" */
.quiz-bell.has-pending:not(.is-open)[b-z8kwtbkn3z] {
    animation: quiz-bell-pulse-b-z8kwtbkn3z 2.4s ease-in-out infinite;
}
@keyframes quiz-bell-pulse-b-z8kwtbkn3z {
    0%, 100% { box-shadow: 0 2px 4px rgba(122, 63, 200, .08); }
    50%      { box-shadow: 0 0 0 6px rgba(255, 154, 200, .25),
                              0 6px 14px rgba(122, 63, 200, .22); }
}

.quiz-bell-badge[b-z8kwtbkn3z] {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: linear-gradient(180deg, #ff7ea7 0%, #e84a7d 100%);
    color: #fff;
    font-size: .7rem;
    font-weight: 900;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(232, 74, 125, .45);
    border: 2px solid #fff;
    pointer-events: none;
}

/* ─── Overlay + dropdown panel ───────────────────────────────────── */

.quiz-bell-overlay[b-z8kwtbkn3z] {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 90;
}
.quiz-bell-overlay[b-z8kwtbkn3z] { cursor: default; }

.quiz-bell-dropdown[b-z8kwtbkn3z] {
    position: fixed;
    top: 64px;
    right: 12px;
    width: min(360px, calc(100vw - 24px));
    max-height: calc(100vh - 96px);
    background: linear-gradient(180deg,
        rgba(255, 255, 255, .98) 0%,
        rgba(248, 240, 255, .98) 100%);
    border: 1.5px solid #d3bce8;
    border-radius: 20px;
    box-shadow: 0 18px 40px rgba(90, 44, 160, .25);
    z-index: 95;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: quiz-bell-drop-b-z8kwtbkn3z .18s ease-out;
}
@keyframes quiz-bell-drop-b-z8kwtbkn3z {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.quiz-bell-header[b-z8kwtbkn3z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px dashed #d3bce8;
}
.quiz-bell-title[b-z8kwtbkn3z] {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: #5b2c70;
}
.quiz-bell-points[b-z8kwtbkn3z] {
    display: inline-grid;
    place-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffd84a 0%, #ff9b3a 100%);
    color: #5b3a05;
    font-weight: 800;
    font-size: .85rem;
    box-shadow: 0 2px 6px rgba(255, 155, 58, .35);
}
.quiz-bell-points strong[b-z8kwtbkn3z] { margin-right: 2px; }

.quiz-bell-list[b-z8kwtbkn3z] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.quiz-bell-empty[b-z8kwtbkn3z] {
    margin: 0;
    padding: 24px 16px;
    text-align: center;
    color: #6b5588;
    font-size: .92rem;
    line-height: 1.4;
}
.quiz-bell-empty small[b-z8kwtbkn3z] { color: #9783b8; font-size: .8rem; }
.quiz-bell-error[b-z8kwtbkn3z] {
    color: #b13b6a;
    font-weight: 600;
}

.quiz-bell-retry[b-z8kwtbkn3z] {
    margin-top: 8px;
    font-size: .8rem;
    padding: 0 14px;
    height: 30px;
}

/* ─── Cada item: pregunta ────────────────────────────────────────── */

.quiz-bell-item[b-z8kwtbkn3z] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    text-align: left;
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid #ead9ff;
    border-radius: 14px;
    background: rgba(255, 255, 255, .82);
    color: #3c2456;
    font: inherit;
    cursor: pointer;
    transition: background .14s ease, border-color .14s ease,
                transform .14s ease;
}
.quiz-bell-item:hover[b-z8kwtbkn3z] {
    background: #fbf3ff;
    border-color: #b48bff;
    transform: translateY(-1px);
}
.quiz-bell-item:active[b-z8kwtbkn3z] { transform: translateY(0) scale(.99); }

.quiz-bell-item.is-pending[b-z8kwtbkn3z] {
    border-color: #c8a8e8;
    background: linear-gradient(180deg,
        rgba(255, 245, 252, .92) 0%,
        rgba(243, 230, 255, .92) 100%);
}
.quiz-bell-item.is-done[b-z8kwtbkn3z] {
    opacity: .78;
    border-color: rgba(0, 0, 0, .06);
}
.quiz-bell-item.is-active[b-z8kwtbkn3z] {
    border-color: #7a3fc8;
    box-shadow: 0 0 0 3px rgba(122, 63, 200, .25);
}

.quiz-bell-item-icon[b-z8kwtbkn3z] {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .7);
    border: 1px solid #ead9ff;
}

.quiz-bell-item-body[b-z8kwtbkn3z] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.quiz-bell-item-q[b-z8kwtbkn3z] {
    font-size: .9rem;
    font-weight: 700;
    color: #3c2456;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.quiz-bell-item-meta[b-z8kwtbkn3z] { font-size: .78rem; }
.quiz-bell-status[b-z8kwtbkn3z] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 700;
    border: 1px solid transparent;
}
.quiz-bell-status-pending[b-z8kwtbkn3z] {
    background: #fff0f7;
    color: #b13b6a;
    border-color: #ffcce0;
}
.quiz-bell-status-ok[b-z8kwtbkn3z] {
    background: #e6fff0;
    color: #0d6e3e;
    border-color: #b3ecc8;
}
.quiz-bell-status-bad[b-z8kwtbkn3z] {
    background: #fde8ea;
    color: #b03a4a;
    border-color: #f4c5cc;
}

.quiz-bell-footer[b-z8kwtbkn3z] {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px dashed #d3bce8;
    background: rgba(255, 255, 255, .65);
}
.quiz-bell-footer .btn-michi[b-z8kwtbkn3z] {
    padding: 0 14px;
    height: 32px;
    font-size: .82rem;
}
.quiz-bell-reload[b-z8kwtbkn3z] { font-weight: 700; }

/* ─── Modal de respuesta ─────────────────────────────────────────── */

.quiz-modal-overlay[b-z8kwtbkn3z] {
    position: fixed;
    inset: 0;
    background: rgba(45, 22, 78, .55);
    backdrop-filter: blur(2px);
    z-index: 200;
    display: grid;
    place-items: center;
    padding: 16px;
    overflow-y: auto;
    /* Capa de stacking aislada para que nada desde el topbar pueda
       taparnos (el bug original era exactamente éste). */
    isolation: isolate;
    animation: quiz-modal-fade-b-z8kwtbkn3z .18s ease-out;
}
@keyframes quiz-modal-fade-b-z8kwtbkn3z {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.quiz-modal-card[b-z8kwtbkn3z] {
    position: relative;
    width: min(480px, 100%);
    /* En viewports cortos (p.ej. landscape 568px) el contenido no
       puede empujar el card fuera de pantalla — scrollea dentro. */
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: linear-gradient(180deg,
        #fffefc 0%,
        #fbf3ff 100%);
    border-radius: 22px;
    border: 1.5px solid #d3bce8;
    box-shadow: 0 24px 50px rgba(45, 22, 78, .35);
    padding: 28px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    animation: quiz-modal-pop-b-z8kwtbkn3z .22s cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes quiz-modal-pop-b-z8kwtbkn3z {
    from { opacity: 0; transform: translateY(8px) scale(.96); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.quiz-modal-close[b-z8kwtbkn3z] {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .7);
    color: #6b5588;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background .14s ease, color .14s ease;
}
.quiz-modal-close:hover[b-z8kwtbkn3z] {
    background: #f4e8ff;
    color: #5b2c70;
}

.quiz-modal-eyebrow[b-z8kwtbkn3z] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: #f4e8ff;
    color: #5b2c70;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    align-self: flex-start;
}

/* ─── Mascota del modal ───────────────────────────────────────────
   Imagen PNG transparente del michi conductor. La centramos arriba
   del eyebrow y le damos un "halo" sutil con drop-shadow para que
   flote sobre el fondo lila pastel del card. En mobile achicamos al
   96px para no comerse el alto del viewport. */
.quiz-modal-mascot[b-z8kwtbkn3z] {
    display: block;
    width: 128px;
    height: 128px;
    object-fit: contain;
    align-self: center;
    margin: -4px auto 4px;
    filter: drop-shadow(0 6px 12px rgba(58, 32, 92, .22));
    animation: quiz-modal-mascot-in-b-z8kwtbkn3z .35s ease-out;
}
@keyframes quiz-modal-mascot-in-b-z8kwtbkn3z {
    from { opacity: 0; transform: translateY(-6px) scale(.92); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@media (max-width: 480px) {
    .quiz-modal-mascot[b-z8kwtbkn3z] { width: 96px; height: 96px; margin-bottom: 2px; }
}

.quiz-modal-title[b-z8kwtbkn3z] {
    margin: 0;
    font-size: 1.18rem;
    font-weight: 800;
    color: #3c2456;
    line-height: 1.35;
}

.quiz-modal-points[b-z8kwtbkn3z] {
    margin: -6px 0 4px;
    color: #6b5588;
    font-size: .9rem;
}
.quiz-modal-points strong[b-z8kwtbkn3z] {
    color: #c87315;
    font-weight: 900;
}

.quiz-modal-options[b-z8kwtbkn3z] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.quiz-modal-opt[b-z8kwtbkn3z] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 2px solid #ead9ff;
    border-radius: 14px;
    background: rgba(255, 255, 255, .85);
    cursor: pointer;
    transition: border-color .14s ease, background .14s ease,
                transform .14s ease;
}
.quiz-modal-opt:hover[b-z8kwtbkn3z] {
    border-color: #c69bff;
    background: #fbf3ff;
}
.quiz-modal-opt:active[b-z8kwtbkn3z] { transform: scale(.99); }

.quiz-modal-opt input[type="radio"][b-z8kwtbkn3z] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.quiz-modal-opt-letter[b-z8kwtbkn3z] {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 900;
    color: #fff;
    font-size: .95rem;
}
.quiz-modal-opt-a .quiz-modal-opt-letter[b-z8kwtbkn3z] {
    background: linear-gradient(180deg, #ffb4d6 0%, #ff6a99 100%);
}
.quiz-modal-opt-b .quiz-modal-opt-letter[b-z8kwtbkn3z] {
    background: linear-gradient(180deg, #c69bff 0%, #7a3fc8 100%);
}
.quiz-modal-opt-c .quiz-modal-opt-letter[b-z8kwtbkn3z] {
    background: linear-gradient(180deg, #6ab7e8 0%, #3f7fc8 100%);
}

.quiz-modal-opt-text[b-z8kwtbkn3z] {
    flex: 1 1 auto;
    color: #3c2456;
    font-size: .95rem;
    line-height: 1.35;
}

.quiz-modal-opt.is-selected[b-z8kwtbkn3z] {
    border-color: #7a3fc8;
    background: linear-gradient(180deg,
        rgba(255, 245, 252, .95) 0%,
        rgba(243, 230, 255, .95) 100%);
    box-shadow: 0 0 0 3px rgba(122, 63, 200, .2);
}

.quiz-modal-actions[b-z8kwtbkn3z] {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 6px;
}
.quiz-modal-actions .btn-michi[b-z8kwtbkn3z] {
    min-width: 100px;
    height: 40px;
    font-weight: 700;
}

/* ─── Resultado del quiz ─────────────────────────────────────────── */

.quiz-modal-result[b-z8kwtbkn3z] {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 4px 0 0;
}
.quiz-modal-result-emoji[b-z8kwtbkn3z] {
    font-size: 3rem;
    line-height: 1;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .15));
    animation: quiz-modal-bounce-b-z8kwtbkn3z .55s cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes quiz-modal-bounce-b-z8kwtbkn3z {
    0%   { transform: scale(.6); }
    60%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}
.quiz-modal-result-title[b-z8kwtbkn3z] {
    margin: 4px 0 2px;
    font-size: 1.4rem;
    font-weight: 900;
    color: #3c2456;
}
.quiz-modal-result.is-ok .quiz-modal-result-title[b-z8kwtbkn3z] {
    background: linear-gradient(90deg, #2ed47e, #7a3fc8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.quiz-modal-result.is-bad .quiz-modal-result-title[b-z8kwtbkn3z] {
    color: #b03a4a;
}
.quiz-modal-result-msg[b-z8kwtbkn3z] {
    margin: 0;
    color: #5b3a8a;
    font-size: .95rem;
}
.quiz-modal-result-msg strong[b-z8kwtbkn3z] { color: #c87315; font-weight: 900; }
.quiz-modal-result.is-bad .quiz-modal-result-msg strong[b-z8kwtbkn3z] { color: #b03a4a; }

.quiz-modal-result-total[b-z8kwtbkn3z] {
    margin: 6px 0 12px;
    padding: 8px 16px;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffd84a 0%, #ff9b3a 100%);
    color: #5b3a05;
    font-weight: 800;
    font-size: 1rem;
    box-shadow: 0 2px 6px rgba(255, 155, 58, .35);
}
.quiz-modal-result-total strong[b-z8kwtbkn3z] { margin-right: 4px; }

.quiz-modal-result-btn[b-z8kwtbkn3z] {
    min-width: 160px;
    height: 44px;
    font-weight: 800;
}

/* ─── Responsive ─────────────────────────────────────────────────
   Mobile default: panel full-bleed en los costados, modal ocupa casi
   todo el ancho. En tablets dejamos un poco de respiración y achicamos
   el padding. */
@media (max-width: 480px) {
    .quiz-bell-dropdown[b-z8kwtbkn3z] {
        right: 8px;
        left:  8px;
        width: auto;
        max-height: calc(100vh - 96px);
    }
    .quiz-modal-overlay[b-z8kwtbkn3z] { padding: 12px; }
    .quiz-modal-card[b-z8kwtbkn3z] {
        padding: 22px 16px 18px;
        border-radius: 18px;
        gap: 12px;
    }
    .quiz-modal-title[b-z8kwtbkn3z] { font-size: 1.05rem; }
    .quiz-modal-opt[b-z8kwtbkn3z] {
        padding: 10px 12px;
        gap: 10px;
    }
    .quiz-modal-opt-letter[b-z8kwtbkn3z] {
        width: 28px;
        height: 28px;
        font-size: .85rem;
    }
    .quiz-modal-opt-text[b-z8kwtbkn3z] { font-size: .9rem; }
    .quiz-modal-actions .btn-michi[b-z8kwtbkn3z] { min-width: 90px; height: 38px; }
}

/* Narrow phones — el texto de la pregunta puede ser largo; achicamos
   más el modal y usamos todo el ancho. También compactamos la
   tipografía para que la tarjeta quepa en 568px (iPhone SE 1ª gen). */
@media (max-width: 360px) {
    .quiz-modal-overlay[b-z8kwtbkn3z] { padding: 8px; align-items: flex-start; padding-top: 16px; }
    .quiz-modal-card[b-z8kwtbkn3z] {
        padding: 18px 12px 14px;
        gap: 10px;
        border-radius: 16px;
    }
    .quiz-modal-eyebrow[b-z8kwtbkn3z] { padding: 3px 10px; font-size: .7rem; }
    .quiz-modal-title[b-z8kwtbkn3z] { font-size: 1rem; line-height: 1.3; }
    .quiz-modal-points[b-z8kwtbkn3z] { font-size: .8rem; margin: -2px 0 0; }
    .quiz-modal-opt[b-z8kwtbkn3z] { padding: 9px 10px; gap: 9px; border-radius: 12px; }
    .quiz-modal-opt-letter[b-z8kwtbkn3z] {
        width: 24px; height: 24px; font-size: .8rem;
    }
    .quiz-modal-opt-text[b-z8kwtbkn3z] { font-size: .85rem; }
    .quiz-modal-actions[b-z8kwtbkn3z] { flex-direction: row; gap: 8px; margin-top: 4px; }
    .quiz-modal-actions .btn-michi[b-z8kwtbkn3z] {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        height: 38px;
        font-size: .85rem;
    }
}

/* Tablets / small desktop: un poco más ancho, mejor lectura. */
@media (min-width: 768px) {
    .quiz-modal-card[b-z8kwtbkn3z] { width: min(540px, 90vw); }
    .quiz-bell-dropdown[b-z8kwtbkn3z] {
        width: min(400px, calc(100vw - 24px));
    }
}

/* Wide desktop: nunca más ancho de 600px para no estirar la pregunta. */
@media (min-width: 1280px) {
    .quiz-modal-card[b-z8kwtbkn3z] { width: min(600px, 60vw); }
}
/* /Components/RegisterSteps/Step0Invite.razor.rz.scp.css */
/* ─── Gate del código de invitación (paso 0 del wizard) ─── */
.step-invite[b-ory2ykusd8] {
    display: grid;
    gap: 14px;
    padding: 6px 4px;
}

.step-invite-title[b-ory2ykusd8] {
    font-size: 1.4rem;
    font-weight: 800;
    color: #5b3a8a;
    margin: 0;
    text-align: center;
}

.step-invite-tagline[b-ory2ykusd8] {
    margin: 0;
    color: #6a5a7a;
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.4;
}
.step-invite-tagline strong[b-ory2ykusd8] {
    color: #ff6a99;
}

.step-invite-field[b-ory2ykusd8] {
    margin: 4px 0 0;
}
.step-invite-input[b-ory2ykusd8] {
    text-align: center;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.step-invite-hint[b-ory2ykusd8] {
    color: #9989aa;
    font-size: 0.74rem;
    text-align: center;
}

.step-invite-btn[b-ory2ykusd8] {
    min-width: 180px;
    padding: 12px 24px;
}
/* /Components/RegisterSteps/Step1Registration.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────────
   /register — paso 1: header con michi invitando al registro.
   Este archivo es scoped a Step1Registration.razor, así que sus
   reglas SÍ se aplican a la markup que renderiza ese componente
   (a diferencia de Register.razor.css, que está scoped al padre).
   ───────────────────────────────────────────────────────────── */

.step-head-row[b-f5ogwsj23p] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(10px, 1.6vw, 18px);
    text-align: left;
    margin: 0 0 6px;
}

.step-head-michi[b-f5ogwsj23p] {
    flex: 0 0 auto;
    width: clamp(120px, 26vw, 180px);
    height: auto;
    pointer-events: none;
    user-select: none;
    animation: michi-head-wave-b-f5ogwsj23p 3.6s ease-in-out infinite;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.30));
}

.step-head-text[b-f5ogwsj23p] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}

.step-head-row .step-title[b-f5ogwsj23p] { text-align: left; font-size: clamp(1.2rem, 2.2vw, 1.7rem); line-height: 1.1; }
.step-head-row .step-sub[b-f5ogwsj23p]   { text-align: left; margin-top: 0; }

@keyframes michi-head-wave-b-f5ogwsj23p {
    0%, 100% { transform: translateY(0)    rotate(-2deg); }
    50%      { transform: translateY(-3px) rotate(2deg);  }
}

@media (max-width: 380px) {
    .step-head-michi[b-f5ogwsj23p] { width: 110px; }
}

@media (prefers-reduced-motion: reduce) {
    .step-head-michi[b-f5ogwsj23p] { animation: none !important; }
}
/* /Components/RegisterSteps/Step4Credential.razor.rz.scp.css */
/* Step4Credential.razor.css — selector de 10 temas con opciones,
   flip frente/vuelta, preview passport, descarga PNG/PDF y responsive. */

/* ─── Selector de 10 temas ─── */
.cred-designs[b-8luw8fqncx] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin: 18px 0 12px;
}

.cred-design[b-8luw8fqncx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 4px 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    color: #fff;
    cursor: pointer;
    font: inherit;
    transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.cred-design:hover[b-8luw8fqncx] { transform: translateY(-2px); background: rgba(255, 255, 255, .14); }
.cred-design.is-active[b-8luw8fqncx] {
    border-color: #ffb4d6;
    background: rgba(255, 180, 214, .18);
    box-shadow: 0 0 0 3px rgba(255, 180, 214, .25);
}

.cred-design-thumb[b-8luw8fqncx] {
    width: 56px;
    height: 38px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: 22px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    border: 2px solid rgba(255, 255, 255, .35);
}
.cred-design-name[b-8luw8fqncx] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    text-align: center;
    line-height: 1.15;
    max-width: 100%;
}

/* ─── Personalización (3 opciones por tema) ─── */
.cred-options[b-8luw8fqncx] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 4px 0 22px;
    padding: 14px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px;
}

.cred-option-label[b-8luw8fqncx] {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #ffb4d6;
    margin-bottom: 8px;
    text-align: center;
    min-height: 14px;
}

.cred-option-choices[b-8luw8fqncx] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

.cred-option-btn[b-8luw8fqncx] {
    border: 1.5px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .06);
    color: #fff;
    padding: 6px 10px;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.cred-option-btn:hover[b-8luw8fqncx] { background: rgba(255, 255, 255, .12); }
.cred-option-btn.is-active[b-8luw8fqncx] {
    background: #ffb4d6;
    border-color: #ffb4d6;
    color: #5b3a8a;
    box-shadow: 0 4px 12px rgba(255, 180, 214, .45);
}

/* ─── Visor frente / vuelta ─── */
.cred-viewer[b-8luw8fqncx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}

.cred-flip[b-8luw8fqncx] {
    width: 100%;
    display: flex;
    justify-content: center;
    perspective: 1200px;
}

/* El preview inyecta el HTML completo del tema vía credential.js
   (760×1080 px nativo). Lo escalamos con transform para que quepa en
   el ancho del visor y se vea el look final sin descargar nada. */
.cred-preview-stage[b-8luw8fqncx] {
    width: min(380px, 90vw);
    aspect-ratio: 760 / 1080;
    border-radius: 28px;
    border: 3px solid rgba(255, 255, 255, .25);
    background: #fff;
    color: #2e2244;
    position: relative;
    box-shadow: 0 18px 38px rgba(0, 0, 0, .35);
    overflow: hidden;
}

.cred-preview-host[b-8luw8fqncx] {
    position: absolute;
    inset: 0;
    /* El HTML inyectado mide 760×1080 nativas; lo encogemos al contenedor
       usando transform + transform-origin: top left para que no se
       descentre. Calculamos la escala con --cred-scale (variable CSS). */
    transform-origin: top left;
    transform: scale(var(--cred-scale, 0.421));
}

.cred-preview-empty[b-8luw8fqncx] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 18px;
    box-sizing: border-box;
    color: #5b3a8a;
    font-size: 13px;
    background:
        repeating-conic-gradient(#f0e8ff 0% 25%, #fff 0% 50%) 0 0 / 16px 16px;
}

/* ─── Tipografía legible en el preview escalado ───
   credential.js declara todos los font-size en px para el lienzo nativo
   760×1080. Cuando el stage se escala con `transform: scale(--cred-scale)`
   (≈0.3–0.5), el texto queda minúsculo. Multiplicamos ~2× cada tamaño
   dentro del host y usamos !important porque credential.js los declara
   en un <style> inline. El stage tiene `overflow: hidden`, así que el
   contenido que desborde simplemente se recorta.

   IMPORTANTE: como el HTML se inyecta desde JS, NO lleva el atributo
   de scope de Blazor; necesitamos `::deep` para que la regla atraviese
   el aislamiento de CSS del componente y aplique al árbol inyectado. */
.cred-preview-host[b-8luw8fqncx]  .pp-title      { font-size: calc(30px * 2) !important; line-height: 1 !important; }
.cred-preview-host[b-8luw8fqncx]  .pp-subtitle   { font-size: calc(10px * 2) !important; }
.cred-preview-host[b-8luw8fqncx]  .pp-type-l     { font-size: calc( 9px * 2) !important; }
.cred-preview-host[b-8luw8fqncx]  .pp-type-v     { font-size: calc(22px * 2) !important; line-height: 1 !important; }
.cred-preview-host[b-8luw8fqncx]  .pp-nick-label,
.cred-preview-host[b-8luw8fqncx]  .pp-name-label { font-size: calc(10px * 2) !important; letter-spacing: .24em !important; }
.cred-preview-host[b-8luw8fqncx]  .pp-nick       { font-size: calc(32px * 2) !important; line-height: 1 !important; }
.cred-preview-host[b-8luw8fqncx]  .pp-name       { font-size: calc(18px * 2) !important; }
.cred-preview-host[b-8luw8fqncx]  .pp-quote      { font-size: calc(14px * 2) !important; padding: 14px 16px !important; }
.cred-preview-host[b-8luw8fqncx]  .pp-meta-item  { font-size: calc(11px * 2) !important; padding: 8px 12px !important; }
.cred-preview-host[b-8luw8fqncx]  .pp-meta-item span { font-size: calc( 9px * 2) !important; }
.cred-preview-host[b-8luw8fqncx]  .pp-signature span   { font-size: calc( 9px * 2) !important; }
.cred-preview-host[b-8luw8fqncx]  .pp-signature b     { font-size: calc(13px * 2) !important; }
.cred-preview-host[b-8luw8fqncx]  .pp-foot             { font-size: calc(10px * 2) !important; }
/* Reverso */
.cred-preview-host[b-8luw8fqncx]  .pp-cover-h    { font-size: calc(38px * 2) !important; line-height: 1 !important; }
.cred-preview-host[b-8luw8fqncx]  .pp-cover-sub  { font-size: calc(10px * 2) !important; }
.cred-preview-host[b-8luw8fqncx]  .pp-cover-section-h { font-size: calc(10px * 2) !important; }
.cred-preview-host[b-8luw8fqncx]  .pp-row        { font-size: calc(14px * 2) !important; padding: 8px 6px !important; }
.cred-preview-host[b-8luw8fqncx]  .pp-row span   { font-size: calc(10px * 2) !important; }
.cred-preview-host[b-8luw8fqncx]  .pp-passno-l   { font-size: calc( 9px * 2) !important; }
.cred-preview-host[b-8luw8fqncx]  .pp-passno-v   { font-size: calc(18px * 2) !important; }
.cred-preview-host[b-8luw8fqncx]  .pp-back-trace { font-size: calc(10px * 2) !important; }

/* toggle de lado */
.cred-side-toggle[b-8luw8fqncx] {
    display: inline-flex;
    gap: 8px;
    background: rgba(255, 255, 255, .08);
    padding: 5px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .18);
}
.cred-side-btn[b-8luw8fqncx] {
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .7);
    padding: 8px 18px;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    letter-spacing: .04em;
    transition: background .12s ease, color .12s ease;
}
.cred-side-btn.is-active[b-8luw8fqncx] {
    background: #ffb4d6;
    color: #5b3a8a;
    box-shadow: 0 4px 12px rgba(255, 180, 214, .45);
}
.cred-side-btn:hover:not(.is-active)[b-8luw8fqncx] { color: #fff; }

/* ─── Acciones ─── */
.cred-actions[b-8luw8fqncx] {
    flex-wrap: wrap;
    gap: 12px;
}
.cred-dl-group[b-8luw8fqncx] {
    display: inline-flex;
    gap: 10px;
    flex: 1 1 280px;
    justify-content: center;
}
.cred-dl[b-8luw8fqncx] {
    background: #f7e6f5 !important;
    color: #5b3a8a !important;
    border: 1.5px dashed #c69bff !important;
    box-shadow: none !important;
    padding: 10px 18px;
    font-weight: 700;
    letter-spacing: .04em;
}
.cred-dl:hover:not(:disabled)[b-8luw8fqncx] {
    background: #ffd2e6 !important;
    border-color: #ff6a99 !important;
    color: #b13b6a !important;
}
.cred-dl--pdf[b-8luw8fqncx] {
    background: #fff5cc !important;
    color: #7a3b1c !important;
    border-color: #d4af37 !important;
}
.cred-dl--pdf:hover:not(:disabled)[b-8luw8fqncx] {
    background: #ffe89a !important;
    border-color: #b6892a !important;
    color: #5b3a04 !important;
}

/* ─── Responsive ─── */
@media (max-width: 900px) {
    .cred-designs[b-8luw8fqncx] { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
    .cred-options[b-8luw8fqncx]  { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .cred-designs[b-8luw8fqncx] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .cred-design[b-8luw8fqncx] { padding: 8px 4px 6px; }
    .cred-design-thumb[b-8luw8fqncx] { width: 48px; height: 32px; font-size: 18px; }
    .cred-design-name[b-8luw8fqncx] { font-size: 11px; }
    .cred-card[b-8luw8fqncx] { width: min(280px, 78vw); border-radius: 22px; }
    .cred-nick[b-8luw8fqncx] { font-size: 22px; }
    .cred-actions[b-8luw8fqncx] { flex-direction: column; }
    .cred-dl-group[b-8luw8fqncx] { width: 100%; }
    .cred-dl[b-8luw8fqncx] { flex: 1 1 0; padding: 10px 8px; }
}
/* /Layout/AdminLayout.razor.rz.scp.css */
/* Layout del panel admin — topbar pegado arriba + dropdown hamburguesa.
   Espeja el patrón visual de UserLayout (mismo brand con halo, misma
   hamburguesa con animación a X) para que las dos "apps" se sientan
   parte del mismo producto pero el admin mantenga su acento violeta.

   IMPORTANTE — el `<NavLink>` interno es un child component y Blazor NO
   le aplica el scope CSS del AdminLayout. Para que las reglas atraviesen
   al <a> real usamos `::deep` en cada selector descendiente. Sin esto,
   los links se ven con estilo default del navegador. */

.admin-layout[b-97bvf1cc22] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: #2e2244;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at 18% 12%, #ffd2e6 0%, transparent 55%),
        radial-gradient(circle at 82% 18%, #e3c0ff 0%, transparent 55%),
        radial-gradient(circle at 50% 92%, #b89bff 0%, transparent 60%),
        linear-gradient(160deg, #ffe4ef 0%, #f0d8ff 45%, #d8c4ff 100%);
    background-attachment: fixed;
    /* Defensa contra overflow horizontal: cualquier descendiente
       (tabla de usuarios, etc.) que se pase por 1 px se clipa acá
       en vez de empujar scroll horizontal en toda la página. */
    overflow-x: hidden;
}

/* ─── Topbar ──────────────────────────────────────────────────── */

.admin-topbar[b-97bvf1cc22] {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px clamp(14px, 3vw, 28px);
    background:
        linear-gradient(180deg,
            rgba(255,255,255,.96) 0%,
            rgba(243,230,255,.92) 60%,
            rgba(228,210,255,.92) 100%);
    border-bottom: 1px solid #d3bce8;
    box-shadow:
        0 4px 14px -8px rgba(122, 63, 200, .28),
        0 1px 0 rgba(255, 255, 255, 0.6) inset;
    backdrop-filter: saturate(140%) blur(8px);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
    flex-wrap: wrap;
}
.admin-topbar[b-97bvf1cc22]::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(176, 72, 213, 0.45) 25%,
        rgba(122, 63, 200, 0.55) 50%,
        rgba(176, 72, 213, 0.45) 75%,
        transparent 100%);
    pointer-events: none;
}

/* ─── Brand (logo) ───────────────────────────────────────────── */

.admin-topbar-brand[b-97bvf1cc22] {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
    padding: 3px;
    border-radius: 12px;
    transition: transform .15s ease, filter .15s ease;
}
.admin-topbar-brand img[b-97bvf1cc22] {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #ffffff;
    padding: 2px;
    object-fit: contain;
    box-shadow:
        0 2px 6px rgba(122, 63, 200, .35),
        0 0 0 2px rgba(255, 255, 255, .8),
        0 0 14px rgba(176, 72, 213, .35);
}
.admin-topbar-brand:hover[b-97bvf1cc22] {
    transform: translateY(-2px) rotate(-3deg);
    filter: brightness(1.06);
}
.admin-topbar-brand:active[b-97bvf1cc22] { transform: translateY(0) scale(.96); }

/* ─── Indicador de página actual ─────────────────────────────── */

.admin-topbar-current[b-97bvf1cc22] {
    font-weight: 800;
    color: #5b2c70;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
}
@media (max-width: 480px) {
    .admin-topbar-current[b-97bvf1cc22] { display: none; }
}

/* ─── Burger (toggle del dropdown) ───────────────────────────── */

.admin-topbar-burger[b-97bvf1cc22] {
    appearance: none;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f4e8ff 100%);
    border: 1.5px solid #d3bce8;
    color: #7a3fc8;
    cursor: pointer;
    transition:
        background-color 140ms ease,
        border-color 140ms ease,
        transform 140ms ease,
        box-shadow 140ms ease,
        color 140ms ease;
    box-shadow: 0 2px 6px -2px rgba(122, 63, 200, .35);
}
.admin-topbar-burger:hover[b-97bvf1cc22] {
    background: #f1e1ff;
    border-color: #b48bff;
    color: #5b2c70;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px -4px rgba(122, 63, 200, .5);
}
.admin-topbar-burger:active[b-97bvf1cc22] { transform: translateY(0) scale(.96); }
.admin-topbar-burger:focus-visible[b-97bvf1cc22] {
    outline: 2px solid #7a3fc8;
    outline-offset: 2px;
}
.admin-topbar-burger.is-open[b-97bvf1cc22] {
    background: linear-gradient(180deg, #b48bff 0%, #7a3fc8 100%);
    color: #ffffff;
    border-color: #7a3fc8;
    box-shadow: 0 4px 10px rgba(122, 63, 200, .45);
}

/* ─── Spacer + chip admin + logout ───────────────────────────── */

.admin-topbar-spacer[b-97bvf1cc22] { flex: 1 1 auto; }

.admin-topbar-chip[b-97bvf1cc22] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    background: linear-gradient(180deg, #f5edff 0%, #ece0ff 100%);
    border: 1.5px solid #d3bce8;
    color: #5b2c70;
    font-weight: 800;
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    flex-shrink: 0;
    margin-right: 2px;
}
.admin-topbar-chip-dot[b-97bvf1cc22] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2ed47e;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px rgba(46, 212, 126, 0.25);
    animation: michi-admin-pulse-b-97bvf1cc22 2.4s ease-in-out infinite;
}
@keyframes michi-admin-pulse-b-97bvf1cc22 {
    0%, 100% { box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px rgba(46, 212, 126, 0.25); }
    50%      { box-shadow: 0 0 0 2px #ffffff, 0 0 0 6px rgba(46, 212, 126, 0.05); }
}
@media (max-width: 480px) {
    .admin-topbar-chip-text[b-97bvf1cc22] { display: none; }
    .admin-topbar-chip[b-97bvf1cc22] { padding: 5px 8px; }
}

.admin-topbar-logout[b-97bvf1cc22] {
    appearance: none;
    background: rgba(255, 255, 255, .85);
    color: #7a3fc8;
    border: 1.5px solid #c8a8e8;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 0.85rem;
    font-weight: 800;
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition:
        background-color 140ms ease,
        border-color 140ms ease,
        transform 120ms ease,
        box-shadow 140ms ease;
}
.admin-topbar-logout:hover:not(:disabled)[b-97bvf1cc22] {
    background: #f4e8ff;
    border-color: #b48bff;
    box-shadow: 0 4px 10px rgba(122, 63, 200, 0.35);
    transform: translateY(-2px);
}
.admin-topbar-logout:active:not(:disabled)[b-97bvf1cc22] { transform: translateY(0); }
.admin-topbar-logout:disabled[b-97bvf1cc22] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ─── Overlay (cierra al tocar fuera) ────────────────────────── */

.admin-topbar-overlay[b-97bvf1cc22] {
    position: fixed;
    inset: 0;
    z-index: 18;
    background: rgba(46, 34, 68, .25);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: michi-overlay-fade-b-97bvf1cc22 160ms ease;
}
@keyframes michi-overlay-fade-b-97bvf1cc22 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ─── Dropdown ───────────────────────────────────────────────── */

.admin-topbar-dropdown[b-97bvf1cc22] {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    z-index: 19;
    display: none;
    flex-direction: column;
    gap: 6px;
    padding: 10px clamp(14px, 3vw, 28px) 14px;
    margin: 0;
    background:
        linear-gradient(180deg,
            rgba(243, 230, 255, .98) 0%,
            rgba(228, 210, 255, .98) 100%);
    border-bottom: 1px solid #d3bce8;
    box-shadow: 0 8px 18px -10px rgba(122, 63, 200, .35);
    animation: michi-admin-dropdown-in-b-97bvf1cc22 200ms ease;
}
.admin-topbar-dropdown.is-open[b-97bvf1cc22] {
    display: flex;
}
@keyframes michi-admin-dropdown-in-b-97bvf1cc22 {
    from { transform: translateY(-8px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* Links del dropdown: píldoras verticales con icono + título + sub.
   Mismo patrón que `.user-topbar-dropdown ::deep a` pero en violeta. */
.admin-topbar-dropdown[b-97bvf1cc22]  a.admin-dropdown-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 14px;
    text-decoration: none !important;
    color: #5b2c70;
    font-weight: 700;
    font-size: 0.95rem;
    border: 1.5px solid transparent;
    background: rgba(255, 255, 255, 0.78);
    transition:
        background-color 140ms ease,
        border-color 140ms ease,
        color 140ms ease,
        transform 120ms ease,
        box-shadow 140ms ease;
    cursor: pointer;
    position: relative;
}
.admin-dropdown-link-ico[b-97bvf1cc22] {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #ece0ff;
    color: #5b2c70;
    transition: background 160ms ease, color 160ms ease;
}
.admin-topbar-dropdown[b-97bvf1cc22]  a.admin-dropdown-link:hover {
    background: #f4e8ff;
    border-color: #c8a8e8;
    color: #4a1d8a;
    transform: translateX(2px);
    box-shadow: 0 4px 10px -4px rgba(122, 63, 200, 0.45);
}
.admin-topbar-dropdown[b-97bvf1cc22]  a.admin-dropdown-link:hover .admin-dropdown-link-ico {
    background: #d3bce8;
    color: #4a1d8a;
}
.admin-topbar-dropdown[b-97bvf1cc22]  a.admin-dropdown-link:active {
    transform: scale(0.985);
}
.admin-topbar-dropdown[b-97bvf1cc22]  a.admin-dropdown-link.active {
    background: linear-gradient(180deg, #b48bff 0%, #7a3fc8 100%);
    color: #ffffff !important;
    border-color: #7a3fc8;
    box-shadow:
        0 4px 10px rgba(122, 63, 200, 0.45),
        0 0 0 3px rgba(122, 63, 200, 0.18);
}
.admin-topbar-dropdown[b-97bvf1cc22]  a.admin-dropdown-link.active .admin-dropdown-link-ico {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}
.admin-topbar-dropdown[b-97bvf1cc22]  a.admin-dropdown-link.active .admin-dropdown-link-sub {
    color: rgba(255, 255, 255, 0.85);
}
.admin-topbar-dropdown[b-97bvf1cc22]  a.admin-dropdown-link.active:hover {
    transform: translateX(2px);
    filter: brightness(1.05);
}
.admin-dropdown-link-text[b-97bvf1cc22] {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
    flex: 1 1 auto;
}
.admin-dropdown-link-title[b-97bvf1cc22] {
    font-weight: 800;
    font-size: 0.95rem;
}
.admin-dropdown-link-sub[b-97bvf1cc22] {
    font-size: 0.74rem;
    color: #8a78a8;
    margin-top: 2px;
    font-weight: 500;
}

/* Indicador lateral del link activo (barra 3px). El slot es la NavLink,
   pero como el <a> real está fuera del scope acá usamos ::deep y le
   damos al <a> un position:relative heredado para anclar el ::before. */
.admin-dropdown-link[b-97bvf1cc22]::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 50%;
    width: 3px;
    height: 0;
    border-radius: 2px;
    background: linear-gradient(180deg, #b48bff, #7a3fc8);
    transform: translateY(-50%);
    transition: height 180ms ease;
    pointer-events: none;
}
.admin-topbar-dropdown[b-97bvf1cc22]  a.admin-dropdown-link.active::before {
    height: 28px;
}

/* ─── Main ────────────────────────────────────────────────────── */

.admin-main[b-97bvf1cc22] {
    flex: 1 1 auto;
    padding: clamp(14px, 3vw, 32px) clamp(14px, 3vw, 32px) 48px;
    min-width: 0;
}

/* ─── Accesibilidad: respetar prefers-reduced-motion ───────────── */
@media (prefers-reduced-motion: reduce) {
    .admin-topbar-overlay[b-97bvf1cc22],
    .admin-topbar-dropdown[b-97bvf1cc22],
    .admin-topbar-burger[b-97bvf1cc22],
    .admin-topbar-brand[b-97bvf1cc22],
    .admin-topbar-logout[b-97bvf1cc22],
    .admin-topbar-chip-dot[b-97bvf1cc22],
    .admin-topbar-dropdown[b-97bvf1cc22]  a.admin-dropdown-link {
        animation: none !important;
        transition: none !important;
    }
}

/* ─── Responsive (mobile) ────────────────────────────────────── */
@media (max-width: 600px) {
    .admin-topbar[b-97bvf1cc22] { padding: 8px 12px; }
    .admin-topbar-brand img[b-97bvf1cc22] { width: 36px; height: 36px; }
    .admin-topbar-burger[b-97bvf1cc22] { width: 36px; height: 36px; }
    .admin-topbar-dropdown[b-97bvf1cc22] { top: 56px; padding: 8px 12px 12px; left: 0; right: 0; }
    .admin-topbar-logout[b-97bvf1cc22] { padding: 7px 10px; }
    .admin-topbar-logout[b-97bvf1cc22]  .logout-full { display: none; }
    .admin-topbar-logout[b-97bvf1cc22]  .logout-short { display: inline; }
}
@media (min-width: 601px) {
    .admin-topbar-logout[b-97bvf1cc22]  .logout-short { display: none; }
    .admin-topbar-logout[b-97bvf1cc22]  .logout-full { display: inline; }
}
/* /Layout/UserLayout.razor.rz.scp.css */
/* Layout para páginas autenticadas (no admin).
   Header pegado arriba con brand + indicador de página + burger +
   Cerrar sesión. El menú de secciones vive en un dropdown que se
   abre al tocar el burger — así el topbar se mantiene compacto en
   todas las pantallas.

   IMPORTANTE — el `<NavLink>` interno es un child component y Blazor
   NO le aplica el scope CSS del UserLayout. Para que las reglas de
   estilo atraviesen al <a> real usamos `::deep` en cada selector
   descendiente. Sin esto, los links se ven con estilo default del
   navegador (azules subrayados). */

.user-layout[b-qrrhej0gto] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(circle at 12% 8%,  #ffd2e6 0%, transparent 55%),
        radial-gradient(circle at 88% 12%, #e3c0ff 0%, transparent 55%),
        radial-gradient(circle at 50% 96%, #b89bff 0%, transparent 60%),
        linear-gradient(160deg, #ffe4ef 0%, #f0d8ff 45%, #d8c4ff 100%);
    background-attachment: fixed;
    color: #2e2244;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    /* Defensa contra overflow horizontal: cualquier descendiente
       (podio, tabla, etc.) que se pase por 1 px se clipa acá en vez
       de empujar scroll horizontal en toda la página. */
    overflow-x: hidden;
}

/* ─── Topbar ──────────────────────────────────────────────────── */

.user-topbar[b-qrrhej0gto] {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px clamp(14px, 3vw, 28px);
    /* NO `backdrop-filter` aquí — crea un containing block para
       descendientes `position: fixed`, atrapando al modal del QuizBell
       dentro del rectángulo del topbar (~60px). Lo movemos al
       pseudo-elemento `::before` de abajo, que sí puede aplicar el
       blur sin afectar a sus hermanos. */
    border-bottom: 1px solid #f0c0dc;
    box-shadow:
        0 4px 14px -8px rgba(176,130,200,.25),
        0 1px 0 rgba(255, 255, 255, 0.6) inset;
}

/* Fondo + blur del topbar via pseudo-elemento. Vive una capa por
   debajo del contenido real (z-index: -1) y NO cuenta como
   containing-block para descendientes fixed — el modal del bell
   ahora se ancla a la viewport, no al topbar. */
.user-topbar[b-qrrhej0gto]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg,
            rgba(255,255,255,.96) 0%,
            rgba(255,233,247,.92) 60%,
            rgba(247,225,243,.92) 100%);
    backdrop-filter: saturate(140%) blur(8px);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
    pointer-events: none;
}

.user-topbar[b-qrrhej0gto]::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 143, 177, 0.55) 25%,
        rgba(198, 155, 255, 0.55) 50%,
        rgba(255, 143, 177, 0.55) 75%,
        transparent 100%);
    pointer-events: none;
}

/* ─── Brand (logo Michiland) ─────────────────────────────────── */

.user-topbar-brand[b-qrrhej0gto] {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
    padding: 3px;
    border-radius: 12px;
    transition: transform .15s ease, filter .15s ease;
}
.user-topbar-brand img[b-qrrhej0gto] {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #ffffff;
    padding: 2px;
    object-fit: contain;
    box-shadow:
        0 2px 6px rgba(176, 130, 200, .35),
        0 0 0 2px rgba(255, 255, 255, .8),
        0 0 14px rgba(255, 143, 177, .35);
}
.user-topbar-brand:hover[b-qrrhej0gto] {
    transform: translateY(-2px) rotate(-3deg);
    filter: brightness(1.06);
}
.user-topbar-brand:active[b-qrrhej0gto] { transform: translateY(0) scale(.96); }

/* ─── Indicador de página actual ─────────────────────────────── */
/* En el modo compacto el topbar ya no muestra los navlinks, así que
   este label chico sirve para que el usuario sepa dónde está sin
   tener que abrir el dropdown. */

.user-topbar-current[b-qrrhej0gto] {
    font-weight: 800;
    color: #5b2c70;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
}
@media (max-width: 480px) {
    .user-topbar-current[b-qrrhej0gto] { display: none; } /* en mobile el brand ya identifica el sitio */
}

/* ─── Burger (toggle del dropdown) ───────────────────────────── */

.user-topbar-burger[b-qrrhej0gto] {
    appearance: none;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #fff0f7 100%);
    border: 1.5px solid #ffc6dd;
    color: #b13b6a;
    cursor: pointer;
    transition:
        background-color 140ms ease,
        border-color 140ms ease,
        transform 140ms ease,
        box-shadow 140ms ease,
        color 140ms ease;
    box-shadow: 0 2px 6px -2px rgba(255, 143, 177, .35);
}
.user-topbar-burger:hover[b-qrrhej0gto] {
    background: #ffeaf3;
    border-color: #ff8fb1;
    color: #6b1f4d;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px -4px rgba(255, 143, 177, .5);
}
.user-topbar-burger:active[b-qrrhej0gto] { transform: translateY(0) scale(.96); }
.user-topbar-burger:focus-visible[b-qrrhej0gto] {
    outline: 2px solid #ff6a99;
    outline-offset: 2px;
}
.user-topbar-burger.is-open[b-qrrhej0gto] {
    background: linear-gradient(180deg, #ff8fb1 0%, #ff6a99 100%);
    color: #ffffff;
    border-color: #ff6a99;
    box-shadow: 0 4px 10px rgba(255, 106, 153, .45);
}

/* ─── Spacer + Logout ────────────────────────────────────────── */

.user-topbar-spacer[b-qrrhej0gto] { flex: 1 1 auto; }

.user-topbar-logout[b-qrrhej0gto] {
    appearance: none;
    background: rgba(255, 255, 255, .85);
    color: #b13b6a;
    border: 1.5px solid #ffb4d6;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 0.85rem;
    font-weight: 800;
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition:
        background-color 140ms ease,
        border-color 140ms ease,
        transform 120ms ease,
        box-shadow 140ms ease;
}
.user-topbar-logout:hover:not(:disabled)[b-qrrhej0gto] {
    background: #ffe5f1;
    border-color: #ff8fb1;
    box-shadow: 0 4px 10px rgba(255, 143, 177, 0.35);
    transform: translateY(-2px);
}
.user-topbar-logout:active:not(:disabled)[b-qrrhej0gto] { transform: translateY(0); }
.user-topbar-logout:disabled[b-qrrhej0gto] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ─── Overlay (cierra al tocar fuera) ────────────────────────── */

.user-topbar-overlay[b-qrrhej0gto] {
    position: fixed;
    inset: 0;
    z-index: 18;
    background: rgba(46, 34, 68, .25);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: michi-overlay-fade-b-qrrhej0gto 160ms ease;
}
@keyframes michi-overlay-fade-b-qrrhej0gto {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ─── Dropdown ───────────────────────────────────────────────── */

.user-topbar-dropdown[b-qrrhej0gto] {
    /* Posicionado fixed para no depender de un contexto posicionado
       y para superponerse al contenido sin empujarlo. `top` se ajusta
       por viewport en @media. Cuando está cerrado usamos
       `display: none` para que no ocupe espacio — antes el
       `visibility: hidden` dejaba un gap vertical grande arriba del
       contenido. */
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    z-index: 19;
    display: none;
    flex-direction: column;
    gap: 6px;
    padding: 10px clamp(14px, 3vw, 28px) 14px;
    margin: 0;
    background:
        linear-gradient(180deg,
            rgba(255, 233, 247, .98) 0%,
            rgba(247, 225, 243, .98) 100%);
    border-bottom: 1px solid #f0c0dc;
    box-shadow: 0 8px 18px -10px rgba(176, 130, 200, .35);
    animation: michi-dropdown-in-b-qrrhej0gto 200ms ease;
}
.user-topbar-dropdown.is-open[b-qrrhej0gto] {
    display: flex;
}
@keyframes michi-dropdown-in-b-qrrhej0gto {
    from { transform: translateY(-8px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* Links del dropdown: reutilizan la estética de los antiguos
   `.user-topbar-nav a` (pills), pero apilados verticalmente. */
.user-topbar-dropdown[b-qrrhej0gto]  a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 14px;
    text-decoration: none !important;
    color: #5b3a8a;
    font-weight: 700;
    font-size: 0.95rem;
    border: 1.5px solid transparent;
    background: rgba(255, 255, 255, 0.7);
    transition:
        background-color 140ms ease,
        border-color 140ms ease,
        color 140ms ease,
        transform 120ms ease,
        box-shadow 140ms ease;
    cursor: pointer;
    position: relative;
}
.user-topbar-dropdown[b-qrrhej0gto]  a > span[aria-hidden] {
    font-size: 1.2em;
    line-height: 1;
}
.user-topbar-dropdown[b-qrrhej0gto]  a:hover {
    background: #ffe5f1;
    border-color: #ffb4d6;
    color: #b13b6a;
    transform: translateX(2px);
    box-shadow: 0 4px 10px -4px rgba(255, 143, 177, 0.45);
}
.user-topbar-dropdown[b-qrrhej0gto]  a.active {
    background: linear-gradient(180deg, #ff8fb1 0%, #ff6a99 100%);
    color: #ffffff !important;
    border-color: #ff6a99;
    box-shadow:
        0 4px 10px rgba(255, 106, 153, 0.45),
        0 0 0 3px rgba(255, 143, 177, 0.18);
}
.user-topbar-dropdown[b-qrrhej0gto]  a.active:hover {
    transform: translateX(2px);
    filter: brightness(1.05);
}
.user-topbar-dropdown[b-qrrhej0gto]  a.is-locked {
    color: #8a78a8;
    background: rgba(255, 255, 255, 0.55);
    border-color: rgba(176, 130, 200, .25);
}
.user-topbar-dropdown[b-qrrhej0gto]  a.is-locked:hover {
    color: #5b3a8a;
    background: rgba(255, 245, 250, 0.85);
    border-color: #ffb4d6;
}

/* ─── Main ────────────────────────────────────────────────────── */

.user-main[b-qrrhej0gto] {
    flex: 1 1 auto;
    padding: clamp(14px, 3vw, 32px) clamp(14px, 3vw, 32px) 48px;
    min-width: 0;
}

/* ─── Accesibilidad: respetar prefers-reduced-motion ──────────── */
@media (prefers-reduced-motion: reduce) {
    .user-topbar-overlay[b-qrrhej0gto],
    .user-topbar-dropdown[b-qrrhej0gto],
    .user-topbar-burger[b-qrrhej0gto],
    .user-topbar-brand[b-qrrhej0gto],
    .user-topbar-logout[b-qrrhej0gto],
    .user-topbar-dropdown[b-qrrhej0gto]  a {
        animation: none !important;
        transition: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   MÓVIL — topbar más compacto, burger un poco más chico
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    .user-topbar[b-qrrhej0gto] {
        gap: 10px;
        padding: 8px 12px;
    }
    .user-topbar-brand img[b-qrrhej0gto] {
        width: 36px; height: 36px; border-radius: 9px;
    }
    .user-topbar-burger[b-qrrhej0gto] {
        width: 38px; height: 38px;
        border-radius: 11px;
    }
    .user-topbar-dropdown[b-qrrhej0gto] { top: 56px; padding: 8px 12px 12px; left: 0; right: 0; }
    .user-topbar-logout[b-qrrhej0gto] {
        padding: 6px 12px;
        font-size: 0.78rem;
    }
}

@media (max-width: 360px) {
    .user-topbar-logout[b-qrrhej0gto]  .logout-full { display: none; }
    .user-topbar-logout[b-qrrhej0gto]  .logout-short { display: inline; }
}
@media (min-width: 361px) {
    .user-topbar-logout[b-qrrhej0gto]  .logout-short { display: none; }
    .user-topbar-logout[b-qrrhej0gto]  .logout-full { display: inline; }
}
/* /Layout/WelcomeLayout.razor.rz.scp.css */
.welcome-layout[b-znnzzv0lfd] {
    /*
       Fondo rosa/morado para todas las páginas que usen este layout
       (Home trae su propio .welcome-bg full-bleed que lo cubre, y
       Register/Wizard se ve sobre este degradado). Variables CSS
       para que .wizard-card y .welcome-card puedan tomarlas.
    */
    --michi-bg-1: #ffd2e6;
    --michi-bg-2: #e3c0ff;
    --michi-bg-3: #b89bff;
    --michi-bg-4: #ff9ec4;

    min-height: 100vh;
    color: #2e2244;
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(circle at 18% 12%, var(--michi-bg-1) 0%, transparent 55%),
        radial-gradient(circle at 82% 18%, var(--michi-bg-2) 0%, transparent 55%),
        radial-gradient(circle at 50% 92%, var(--michi-bg-3) 0%, transparent 60%),
        linear-gradient(160deg, #ffe4ef 0%, #f0d8ff 45%, #d8c4ff 100%);
    background-attachment: fixed;
    position: relative;
    overflow-x: hidden;
}

/* Patrón suave de "pawprints" para dar textura sin distraer */
.welcome-layout[b-znnzzv0lfd]::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.45) 1.5px, transparent 2px),
        radial-gradient(rgba(255, 255, 255, 0.35) 1px, transparent 2px);
    background-size: 64px 64px, 32px 32px;
    background-position: 0 0, 16px 16px;
    opacity: 0.35;
    z-index: 0;
}
.welcome-layout > *[b-znnzzv0lfd] {
    position: relative;
    z-index: 1;
}
/* /Pages/AdminBoletos.razor.rz.scp.css */
/* ─── generator (replicado aquí por aislamiento CSS de Blazor:
   las reglas de AdminInvitaciones.razor.css no aplican a esta
   página; necesitamos las equivalentes para que el row se flex-wrap
   y el botón no desborde la card en mobile). ───────────────────── */
.inv-generator[b-wfaksppw6r] {
    background: #f7e6f5;
    border: 1px solid #e8c0e0;
    border-radius: 12px;
    padding: 14px;
    display: grid;
    gap: 10px;
}
.inv-generator-row[b-wfaksppw6r] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
}
.inv-generator-count[b-wfaksppw6r] { flex: 0 1 130px; min-width: 110px; margin: 0; }
.inv-generator-note[b-wfaksppw6r]  { flex: 1 1 280px; min-width: 200px; margin: 0; }
.inv-generator-btn[b-wfaksppw6r] {
    flex: 0 1 auto;
    height: 42px;
    padding: 0 20px;
    border-radius: 10px;
    white-space: nowrap;
}
.inv-generator .input[b-wfaksppw6r] {
    background: #ffffff;
    color: #2e2244;
    border-color: #d8b8e0;
}
.inv-generator .input:focus[b-wfaksppw6r] {
    background: #ffffff;
    border-color: #ff6a99;
    box-shadow: 0 0 0 4px rgba(255, 106, 153, 0.18);
}

/* ─── chip de código (botón "click para copiar") ────────────────── */
.inv-code[b-wfaksppw6r] {
    appearance: none;
    background: #ffffff;
    border: 1px solid #d8b8e0;
    border-radius: 8px;
    padding: 5px 10px;
    cursor: pointer;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85rem;
    font-weight: 800;
    color: #5b3a8a;
    letter-spacing: 0.04em;
    transition: background-color 120ms ease, border-color 120ms ease, transform 80ms ease;
    text-align: left;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.inv-code:hover[b-wfaksppw6r] {
    background: #ffe5f1;
    border-color: #ff8fb1;
}
.inv-code:active[b-wfaksppw6r] { transform: scale(0.97); }
.inv-code code[b-wfaksppw6r] {
    background: transparent;
    color: inherit;
    font: inherit;
}
.inv-code-fresh[b-wfaksppw6r] {
    background: linear-gradient(180deg, #fff7e0 0%, #ffe4a8 100%);
    border-color: #ffb74d;
}
.inv-code-fresh .inv-code-hint[b-wfaksppw6r] {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #b37500;
    font-weight: 700;
}

/* ─── badge de estado (sin usar / usado) ────────────────────────── */
.inv-status[b-wfaksppw6r] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.inv-status.is-unused[b-wfaksppw6r] {
    background: #d6f5d6;
    border: 1px solid #6ec46e;
    color: #2e6e2e;
}
.inv-status.is-used[b-wfaksppw6r] {
    background: #ece3f7;
    border: 1px solid #b89bff;
    color: #5b3a8a;
}

/* ─── botones mini (Borrar) ─────────────────────────────────────── */
.mini-btn[b-wfaksppw6r] {
    appearance: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    font-size: 0.78rem;
    padding: 6px 14px;
    border-radius: 8px;
    transition: filter 120ms ease, transform 80ms ease;
    white-space: nowrap;
}
.mini-btn:hover[b-wfaksppw6r]   { filter: brightness(1.06); transform: translateY(-1px); }
.mini-btn:disabled[b-wfaksppw6r] { opacity: 0.5; cursor: not-allowed; transform: none; filter: none; }
.mini-del[b-wfaksppw6r] {
    background: linear-gradient(180deg, #ff8fb1 0%, #ff6a99 100%);
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(255, 106, 153, 0.35);
}

/* ─── "Último lote generado" ───────────────────────────────────── */
.inv-lastgenerated[b-wfaksppw6r] {
    background: #ffffff;
    border: 1px dashed #ffb4d6;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 0.85rem;
    color: #5b3a8a;
}
.inv-lastgenerated strong[b-wfaksppw6r] {
    color: #ff6a99;
    display: block;
    margin-bottom: 8px;
}
.inv-lastgenerated-codes[b-wfaksppw6r] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ─── filters chips (estado) ────────────────────────────────────── */
.inv-filter-group[b-wfaksppw6r] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-left: 6px;
}

/* ─── Tabs del admin (Boletos / Progreso) ──────────────────────── */
.admin-tabs[b-wfaksppw6r] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
    border-bottom: 1px dashed #e8c0e0;
    padding-bottom: 8px;
}
.admin-tab[b-wfaksppw6r] {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 8px 14px;
    font-weight: 700;
    font-size: 0.9rem;
    color: #5b3a8a;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.admin-tab:hover[b-wfaksppw6r] {
    background: #ffe5f1;
    border-color: #ffb4d6;
}
.admin-tab.is-active[b-wfaksppw6r] {
    background: linear-gradient(180deg, #ff8fb1 0%, #ff6a99 100%);
    color: #ffffff;
    border-color: #e25485;
    box-shadow: 0 2px 6px rgba(255, 106, 153, 0.35);
}
.admin-tab.is-active:hover[b-wfaksppw6r] { color: #ffffff; }

/* ─── Tabla de progreso ─────────────────────────────────────────── */
.bol-progress-table tbody td:nth-child(4)[b-wfaksppw6r],
.bol-progress-table tbody td:nth-child(5)[b-wfaksppw6r],
.bol-progress-table tbody td:nth-child(6)[b-wfaksppw6r] {
    min-width: 140px;
}

/* ─── Celdas de posición del mapa ──────────────────────────────── */
.bol-pos[b-wfaksppw6r] {
    display: grid;
    grid-template-columns: 70px 38px 1fr;
    align-items: center;
    gap: 6px;
}
.bol-pos-num[b-wfaksppw6r] {
    font-weight: 800;
    color: #5b3a8a;
    font-size: 0.85rem;
}
.bol-pos-pct[b-wfaksppw6r] {
    font-size: 0.72rem;
    color: #9989aa;
    text-align: right;
    font-weight: 700;
}
.bol-pos-bar[b-wfaksppw6r] {
    background: #ffe4ef;
    border-radius: 999px;
    overflow: hidden;
    height: 6px;
    border: 1px solid #ffb4d6;
    display: block;
}
.bol-pos-bar-fill[b-wfaksppw6r] {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #ff8fb1 0%, #ff6a99 100%);
}

/* ─── Card ajustes ─────────────────────────────────────────────── */
.admin-bol-card .inv-generator-count[b-wfaksppw6r] {
    flex: 0 1 130px;
    min-width: 110px;
}

/* Override del tamaño del logo Michiland en esta card (en AdminPanel
   se define vía .admin-card .welcome-title .brand-img). El scoped CSS
   de Blazor no comparte reglas entre archivos. */
.admin-bol-card .welcome-title .brand-img[b-wfaksppw6r] {
    width: min(220px, 55%);
    height: auto;
}
.admin-bol-card .welcome-title .title-pre[b-wfaksppw6r] {
    color: #5b3a8a !important;
    -webkit-text-stroke: 0 !important;
            text-stroke: 0 !important;
    text-shadow: none !important;
    font-size: clamp(1.5rem, 2.4vw, 1.9rem) !important;
    margin-bottom: 6px;
}

/* ─── Responsive ────────────────────────────────────────────────── */
/* 900px (no 760): a 768px con sidebar 240px la card sólo tiene ~448px,
   insuficiente para la tabla de 8 columnas. El breakpoint mobile cubre
   tablets portrait también. */
@media (max-width: 900px) {
    .admin-tabs[b-wfaksppw6r] {
        flex-wrap: wrap;
    }
    .admin-bol-card .inv-generator-count[b-wfaksppw6r] { flex: 1 1 calc(50% - 10px); min-width: 0; }
    .admin-bol-card .inv-generator-note[b-wfaksppw6r]  { flex: 1 1 100%; min-width: 0; }
    .admin-bol-card .inv-generator-btn[b-wfaksppw6r]   { flex: 1 1 100%; width: 100%; }

    .admin-summary[b-wfaksppw6r] { flex-wrap: wrap; }
    .admin-summary .inv-filter-group[b-wfaksppw6r] { width: 100%; justify-content: flex-start; }

    /* tabla principal de boletos → tarjetas.
       Importante: font-size:0 en el td + line-height:0 elimina los
       anonymous grid items que crea el whitespace entre <td> y los
       hijos directos (de lo contrario aparecen filas vacías y textos
       como "u" o "sin usar" saltan a la línea siguiente). */
    .inv-table thead[b-wfaksppw6r] { display: none; }
    .inv-table[b-wfaksppw6r],
    .inv-table tbody[b-wfaksppw6r],
    .inv-table tr[b-wfaksppw6r],
    .inv-table td[b-wfaksppw6r] { display: block; width: 100%; }
    .inv-table tbody tr[b-wfaksppw6r] {
        background: #ffffff;
        border: 1px solid #e8c0e0;
        border-radius: 12px;
        padding: 12px 14px;
        margin-bottom: 10px;
        box-shadow: 0 2px 6px -2px rgba(120, 60, 130, 0.10);
    }
    .inv-table tbody td[b-wfaksppw6r] {
        padding: 6px 0;
        border-top: 0;
        display: grid;
        grid-template-columns: 100px 1fr;
        gap: 8px;
        align-items: center;
        /* Truco CSS Grid: colapsa anonymous text nodes que crea el
           whitespace del razor source. */
        font-size: 0;
        line-height: 0;
    }
    .inv-table tbody td > *[b-wfaksppw6r] {
        font-size: 0.92rem;
        line-height: 1.4;
    }
    .inv-table tbody td[b-wfaksppw6r]::before {
        content: attr(data-label);
        font-weight: 700;
        color: #ff6a99;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        line-height: 1.4;
    }
    /* La celda Acciones es full-width sin label */
    .inv-table tbody td[data-label="Acciones"][b-wfaksppw6r] {
        grid-template-columns: 1fr;
        padding-top: 8px;
        border-top: 1px dashed #f0d8e8;
        margin-top: 4px;
    }
    .inv-table tbody td[data-label="Acciones"][b-wfaksppw6r]::before { display: none; }
    .inv-table tbody td[data-label="Acciones"] .mini-btn[b-wfaksppw6r] {
        width: 100%;
        padding: 10px 14px;
        font-size: 0.85rem;
    }
    /* Chip de código full-width dentro del card */
    .inv-table tbody td[data-label="Código"] .inv-code[b-wfaksppw6r] {
        width: 100%;
        justify-content: space-between;
        padding: 8px 12px;
        font-size: 0.92rem;
    }
    /* Status: forzar nowrap para que no se rompa "sin usar" */
    .inv-table tbody td[data-label="Estado"] .inv-status[b-wfaksppw6r] {
        white-space: nowrap;
    }

    /* tabla de progreso → tarjetas (mismo truco font-size:0) */
    .bol-progress-table thead[b-wfaksppw6r] { display: none; }
    .bol-progress-table[b-wfaksppw6r],
    .bol-progress-table tbody[b-wfaksppw6r],
    .bol-progress-table tr[b-wfaksppw6r],
    .bol-progress-table td[b-wfaksppw6r] { display: block; width: 100%; }
    .bol-progress-table tbody tr[b-wfaksppw6r] {
        background: #ffffff;
        border: 1px solid #e8c0e0;
        border-radius: 12px;
        padding: 10px 14px;
        margin-bottom: 10px;
        box-shadow: 0 2px 6px -2px rgba(120, 60, 130, 0.10);
    }
    .bol-progress-table tbody td[b-wfaksppw6r] {
        padding: 6px 0;
        border-top: 0;
        display: grid;
        grid-template-columns: 110px 1fr;
        gap: 8px;
        align-items: center;
        font-size: 0;
        line-height: 0;
    }
    .bol-progress-table tbody td > *[b-wfaksppw6r] {
        font-size: 0.92rem;
        line-height: 1.4;
    }
    .bol-progress-table tbody td[b-wfaksppw6r]::before {
        content: attr(data-label);
        font-weight: 700;
        color: #ff6a99;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        line-height: 1.4;
    }
    .bol-pos[b-wfaksppw6r] {
        grid-template-columns: 70px 38px 1fr;
    }
}

@media (max-width: 420px) {
    .admin-bol-card[b-wfaksppw6r] { padding: 14px; }
    .admin-bol-card .welcome-title .brand-img[b-wfaksppw6r] { width: 60%; }
    .admin-bol-card .inv-generator-row[b-wfaksppw6r] { gap: 8px; }
    .admin-bol-card .inv-generator-count[b-wfaksppw6r] { flex: 1 1 100%; }
    .inv-lastgenerated-codes[b-wfaksppw6r] { flex-direction: column; }
    .inv-lastgenerated-codes .inv-code[b-wfaksppw6r] { width: 100%; justify-content: space-between; }

    /* En móvil muy chico el card de boleto tiene padding menor */
    .inv-table tbody tr[b-wfaksppw6r],
    .bol-progress-table tbody tr[b-wfaksppw6r] { padding: 10px 12px; }
    .inv-table tbody td[b-wfaksppw6r] { grid-template-columns: 90px 1fr; }
}
/* /Pages/AdminInvitaciones.razor.rz.scp.css */
/* ─── generator ────────────────────────────────────────────────── */
.inv-generator[b-8aqgnm704g] {
    background: #f7e6f5;
    border: 1px solid #e8c0e0;
    border-radius: 12px;
    padding: 14px;
    display: grid;
    gap: 10px;
}
.inv-generator-row[b-8aqgnm704g] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
}
.inv-generator-count[b-8aqgnm704g] { flex: 0 1 130px; min-width: 110px; margin: 0; }
.inv-generator-note[b-8aqgnm704g]  { flex: 1 1 280px; min-width: 200px; margin: 0; }
.inv-generator-btn[b-8aqgnm704g] {
    flex: 0 0 auto;
    height: 42px;
    padding: 0 20px;
    border-radius: 10px;
    white-space: nowrap;
}
.inv-generator .input[b-8aqgnm704g] {
    /* Override del .input global (texto blanco sobre fondo translúcido):
       en el contexto admin el fondo es claro. */
    background: #ffffff;
    color: #2e2244;
    border-color: #d8b8e0;
}
.inv-generator .input:focus[b-8aqgnm704g] {
    background: #ffffff;
    border-color: #ff6a99;
    box-shadow: 0 0 0 4px rgba(255, 106, 153, 0.18);
}

.inv-lastgenerated[b-8aqgnm704g] {
    background: #ffffff;
    border: 1px dashed #ffb4d6;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 0.85rem;
    color: #5b3a8a;
}
.inv-lastgenerated strong[b-8aqgnm704g] {
    color: #ff6a99;
    display: block;
    margin-bottom: 6px;
}
.inv-lastgenerated-codes[b-8aqgnm704g] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ─── filtro de estado ─────────────────────────────────────────── */
.inv-filter-group[b-8aqgnm704g] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-left: 6px;
}
.inv-filter-group .filter-chip[b-8aqgnm704g] {
    padding: 5px 11px;
    font-size: 0.72rem;
}

/* ─── botones de código (estilo compartido por la tabla y por
       "Último lote generado" arriba del filtro) ─── */
.inv-code[b-8aqgnm704g] {
    appearance: none;
    background: #ffffff;
    border: 1px solid #d8b8e0;
    border-radius: 8px;
    padding: 5px 10px;
    cursor: pointer;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85rem;
    font-weight: 800;
    color: #5b3a8a;
    letter-spacing: 0.04em;
    transition: background-color 120ms ease, border-color 120ms ease, transform 80ms ease;
    text-align: left;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.inv-code:hover[b-8aqgnm704g] {
    background: #ffe5f1;
    border-color: #ff8fb1;
}
.inv-code:active[b-8aqgnm704g] { transform: scale(0.97); }
.inv-code code[b-8aqgnm704g] {
    background: transparent;
    color: inherit;
    font: inherit;
}
.inv-code-fresh[b-8aqgnm704g] {
    background: linear-gradient(180deg, #fff7e0 0%, #ffe4a8 100%);
    border-color: #ffb74d;
}
.inv-code-fresh .inv-code-hint[b-8aqgnm704g] {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #b37500;
    font-weight: 700;
}

.inv-status[b-8aqgnm704g] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.inv-status.is-unused[b-8aqgnm704g] {
    background: #d6f5d6;
    border: 1px solid #6ec46e;
    color: #2e6e2e;
}
.inv-status.is-used[b-8aqgnm704g] {
    background: #ece3f7;
    border: 1px solid #b89bff;
    color: #5b3a8a;
}

/* ─── responsive ───────────────────────────────────────────────── */
@media (max-width: 760px) {
    .inv-generator-row[b-8aqgnm704g] { flex-direction: column; align-items: stretch; }
    .inv-generator-count[b-8aqgnm704g],
    .inv-generator-note[b-8aqgnm704g],
    .inv-generator-btn[b-8aqgnm704g] { flex: 1 1 auto; width: 100%; }
    .inv-generator-btn[b-8aqgnm704g]  { width: 100%; }

    .inv-table thead[b-8aqgnm704g] { display: none; }
    .inv-table[b-8aqgnm704g],
    .inv-table tbody[b-8aqgnm704g],
    .inv-table tr[b-8aqgnm704g],
    .inv-table td[b-8aqgnm704g] { display: block; width: 100%; }

    .inv-table tbody tr[b-8aqgnm704g] {
        background: #ffffff;
        border: 1px solid #e8c0e0;
        border-radius: 10px;
        padding: 8px 10px;
        margin-bottom: 8px;
    }
    .inv-table tbody td[b-8aqgnm704g] {
        padding: 3px 0;
        border-top: 0;
        display: grid;
        grid-template-columns: 90px 1fr;
        gap: 8px;
        align-items: baseline;
    }
    .inv-table tbody td[b-8aqgnm704g]::before {
        content: attr(data-label);
        font-weight: 700;
        color: #ff6a99;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
}
/* /Pages/AdminLogin.razor.rz.scp.css */
/* ============================================================
   /michiland-admin-gate — sobreescrituras locales del login.
   Las reglas globales de welcome/welcome-card/welcome-actions
   viven en wwwroot/css/components.css (vienen del WelcomeLayout).
   Aquí sólo afino el ancho, los inputs y la separación del botón.
   ============================================================ */

.admin-login-card[b-xvzq82kush] {
    /* un poco más estrecho que el .welcome-card por defecto (520px). */
    width: min(380px, 92%);
    text-align: left;
    gap: 10px;
}

/* Inputs más compactos: alto fijo cómodo, padding lateral corto. */
.admin-login-card .input[b-xvzq82kush] {
    width: 100%;
    height: 42px;
    padding: 0 14px;
    font-size: 0.95rem;
    box-sizing: border-box;
}

/* Etiquetas: tipografía más pequeña, sin línea de relleno que las
   separe demasiado del input. */
.admin-login-card .field-label[b-xvzq82kush] {
    font-size: 0.85rem;
    margin-bottom: 4px;
}

/* El botón "Entrar" lo queremos a la izquierda, no centrado, porque
   el formulario está alineado a la izquierda. Le damos un ancho
   cómodo (no 100%) y un margen arriba para que no quede pegado al
   campo de contraseña. */
.admin-login-card .welcome-actions[b-xvzq82kush] {
    justify-content: flex-start;
    margin-top: 8px;
}
.admin-login-card .btn-michi[b-xvzq82kush] {
    min-width: 140px;
    padding: 12px 28px;
    font-size: 1.05rem;
}

/* Mensaje de error: pequeño respiro arriba. */
.admin-login-card .msg-error[b-xvzq82kush] {
    margin: 4px 0 0;
    font-size: 0.85rem;
}
/* /Pages/AdminPanel.razor.rz.scp.css */
/* ============================================================
   /michiland-admin-gate/panel — vista principal de admin.
   SIN hero, SIN transparencias: el panel vive sobre un fondo
   plano rosa/morado para no distraer del trabajo de gestión.
   Paleta: rosa (#ff6a99 / #ff8fb1) + morado (#c69bff / #b89bff).
   ============================================================ */

/* ───── fondo plano del módulo admin ───── */
.admin-page[b-h7h5x1t6va] {
    /* Override de .welcome: sin hero, sin overlay. */
    background: linear-gradient(160deg,
        #ffe4ef 0%,
        #f3dcff 45%,
        #e1c8ff 100%) !important;
    min-height: 100vh;
}

/* Escondemos cualquier rastro del hero (por si la WelcomeLayout lo trae). */
.admin-page .welcome-bg[b-h7h5x1t6va],
.admin-page .welcome-bg-overlay[b-h7h5x1t6va] { display: none !important; }

/* ───── tarjeta: sólido, sin transparencias ───── */
.admin-card[b-h7h5x1t6va] {
    /* Subimos especificidad para ganar al .welcome-card { width: min(520px, 88%); } global. */
    width: min(1080px, 96%);
    max-width: 1080px;
    text-align: left;
    gap: 14px;
    padding: clamp(18px, 2.4vw, 28px) clamp(22px, 3vw, 36px);
    background: #ffffff;
    border: 1px solid #e8c0e0;
    box-shadow: 0 18px 40px -22px rgba(120, 60, 130, 0.45);
}

.admin-title[b-h7h5x1t6va] { margin-bottom: 4px; }
.admin-title .title-pre[b-h7h5x1t6va] {
    /* Override del .welcome-title .title-pre global (color blanco con stroke). */
    color: #5b3a8a !important;
    -webkit-text-stroke: 0 !important;
            text-stroke: 0 !important;
    text-shadow: none !important;
    font-size: clamp(1.6rem, 2.4vw, 2rem) !important;
    margin-bottom: 8px;
}
.admin-card .welcome-title .brand-img[b-h7h5x1t6va] { width: min(260px, 55%); }

/* ───── toolbar ───── */
.admin-toolbar[b-h7h5x1t6va] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    align-items: center;
    background: #f7e6f5;
    border: 1px solid #e8c0e0;
    border-radius: 12px;
    padding: 10px 12px;
}

.admin-search[b-h7h5x1t6va],
.admin-filter[b-h7h5x1t6va] {
    width: 100%;
    height: 34px;
    padding: 0 12px;
    font-size: 0.85rem;
    background: #ffffff;
    border: 1px solid #d8b8e0;
    color: #2e2244;
    border-radius: 8px;
}
.admin-search[b-h7h5x1t6va]::placeholder { color: #9989aa; }
.admin-search:focus[b-h7h5x1t6va],
.admin-filter:focus[b-h7h5x1t6va] {
    outline: none;
    border-color: #ff6a99;
    box-shadow: 0 0 0 3px rgba(255, 138, 177, 0.25);
}
.admin-filter option[b-h7h5x1t6va] { background: #ffffff; color: #2e2244; }

/* ───── grupos de filtros (multi-select con chips) ───── */
.filter-group[b-h7h5x1t6va] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    border: 1px solid #d8b8e0;
    border-radius: 10px;
    padding: 4px 8px;
    flex-wrap: wrap;
}
.filter-label[b-h7h5x1t6va] {
    font-size: 0.72rem;
    font-weight: 800;
    color: #ff6a99;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0 2px;
}
.filter-chip[b-h7h5x1t6va] {
    appearance: none;
    border: 1px solid #e2c6e0;
    background: #faf2f8;
    color: #5b3a8a;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    padding: 6px 9px;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, transform 80ms ease;
    min-width: 28px;
}
.filter-chip:hover[b-h7h5x1t6va] {
    background: #ffe5f1;
    border-color: #ff8fb1;
}
.filter-chip:active[b-h7h5x1t6va] { transform: scale(0.94); }
.filter-chip:focus-visible[b-h7h5x1t6va] {
    outline: none;
    border-color: #ff6a99;
    box-shadow: 0 0 0 3px rgba(255, 138, 177, 0.25);
}
.filter-chip.is-on[b-h7h5x1t6va] {
    background: linear-gradient(180deg, #ff6a99 0%, #e25485 100%);
    color: #ffffff;
    border-color: #e25485;
}
.filter-chip.is-on:hover[b-h7h5x1t6va] {
    filter: brightness(1.05);
    background: linear-gradient(180deg, #ff6a99 0%, #e25485 100%);
}

.filter-group-range[b-h7h5x1t6va] { gap: 4px; }
.filter-dash[b-h7h5x1t6va] {
    color: #9989aa;
    font-weight: 800;
    padding: 0 2px;
}
.input-tiny[b-h7h5x1t6va] {
    width: 56px;
    height: 26px;
    padding: 0 6px;
    font-size: 0.78rem;
    background: #ffffff;
    border: 1px solid #d8b8e0;
    color: #2e2244;
    border-radius: 6px;
    text-align: center;
}
.input-tiny:focus[b-h7h5x1t6va] {
    outline: none;
    border-color: #ff6a99;
    box-shadow: 0 0 0 3px rgba(255, 138, 177, 0.25);
}

.admin-btn-sm[b-h7h5x1t6va] {
    min-width: 0;
    padding: 6px 12px;
    font-size: 0.8rem;
    border-radius: 8px;
}
.admin-btn-danger[b-h7h5x1t6va] {
    background: linear-gradient(180deg, #ff6a99 0%, #e25485 100%);
    color: #ffffff;
    font-weight: 800;
}
.admin-btn-danger:hover:not(:disabled)[b-h7h5x1t6va] { filter: brightness(1.05); }

/* ───── barra de selección múltiple ───── */
.admin-bulkbar[b-h7h5x1t6va] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    background: linear-gradient(180deg, #fff0f6 0%, #f7e6f5 100%);
    border: 1px solid #ff8fb1;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 0.85rem;
    color: #5b3a8a;
}
.admin-bulkbar b[b-h7h5x1t6va] { color: #ff6a99; }

/* ───── summary ───── */
.admin-summary[b-h7h5x1t6va] {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 0.78rem;
    color: #6a5a7a;
    font-variant-numeric: tabular-nums;
    margin: 0 4px -4px;
}
.admin-filter-tag[b-h7h5x1t6va] {
    background: #ffd2e6;
    border: 1px solid #ff8fb1;
    color: #b13b6a;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ───── tabla ───── */
.admin-table-wrap[b-h7h5x1t6va] {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid #e8c0e0;
    background: #ffffff;
}
.admin-table[b-h7h5x1t6va] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    color: #2e2244;
    background: transparent;
    table-layout: auto;
}
.admin-table thead th[b-h7h5x1t6va] {
    text-align: left;
    background: #b89bff;
    color: #2e2244;
    padding: 7px 8px;
    font-size: 0.70rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 800;
    border-bottom: 1px solid #a988ee;
    white-space: nowrap;
}
.admin-table tbody td[b-h7h5x1t6va] {
    padding: 6px 8px;
    border-top: 1px solid #f0d8e8;
    vertical-align: middle;
    font-size: 0.78rem;
    line-height: 1.35;
}
.admin-table tbody tr:nth-child(even)[b-h7h5x1t6va] { background: #faf2fa; }
.admin-table tbody tr:hover[b-h7h5x1t6va]           { background: #fce8f3; }
.admin-table tbody tr.is-selected[b-h7h5x1t6va]     { background: #ffd2e6; }
.admin-table tbody td b[b-h7h5x1t6va] { color: #5b3a8a; }

.admin-empty[b-h7h5x1t6va] {
    text-align: center;
    color: #9989aa;
    padding: 22px 0;
    font-style: italic;
}

/* ───── checkboxes ───── */
.admin-th-check[b-h7h5x1t6va], .admin-td-check[b-h7h5x1t6va] { width: 32px; padding-left: 12px !important; padding-right: 4px !important; }
.admin-check[b-h7h5x1t6va] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 1.5px solid #c69bff;
    border-radius: 4px;
    background: #ffffff;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    transition: background .15s, border-color .15s;
}
.admin-check:hover[b-h7h5x1t6va]  { border-color: #ff6a99; }
.admin-check:checked[b-h7h5x1t6va] {
    background: linear-gradient(180deg, #ff8fb1 0%, #ff6a99 100%);
    border-color: #ff6a99;
}
.admin-check:checked[b-h7h5x1t6va]::after {
    content: "";
    position: absolute;
    left: 4px; top: 1px;
    width: 4px; height: 8px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* ───── botones mini ───── */
.mini-btn[b-h7h5x1t6va] {
    appearance: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    font-size: 0.72rem;
    padding: 4px 10px;
    border-radius: 7px;
    margin-right: 4px;
    transition: filter .15s, transform .15s;
    white-space: nowrap;
}
.mini-btn:last-child[b-h7h5x1t6va] { margin-right: 0; }
.mini-btn:hover[b-h7h5x1t6va]   { filter: brightness(1.10); transform: translateY(-1px); }
.mini-btn:disabled[b-h7h5x1t6va] { opacity: 0.5; cursor: not-allowed; transform: none; filter: none; }

.mini-edit[b-h7h5x1t6va] { background: linear-gradient(180deg, #ff8fb1 0%, #ff6a99 100%); color: #ffffff; }
.mini-del[b-h7h5x1t6va]  { background: #ffe4ef; color: #b13b6a; border: 1px solid #ff8fb1; }

/* ───── paginación ───── */
.admin-pager[b-h7h5x1t6va] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    align-items: center;
    margin-top: 4px;
}
.mini-pager[b-h7h5x1t6va] {
    background: #ffffff;
    color: #5b3a8a;
    border: 1px solid #d8b8e0;
    padding: 4px 10px;
    font-size: 0.75rem;
    margin-right: 0;
}
.mini-pager:hover:not(:disabled)[b-h7h5x1t6va] { background: #fce8f3; }
.mini-pager.is-active[b-h7h5x1t6va] {
    background: linear-gradient(180deg, #ff8fb1 0%, #ff6a99 100%);
    color: #ffffff;
    border-color: transparent;
    font-weight: 800;
}
.admin-pager-info[b-h7h5x1t6va] {
    color: #6a5a7a;
    font-size: 0.78rem;
    margin-left: 8px;
    font-variant-numeric: tabular-nums;
}

/* ───── modal de edición ───── */
.admin-edit-card[b-h7h5x1t6va] { max-width: 460px; gap: 10px; }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 900px) {
    .admin-card[b-h7h5x1t6va] { max-width: 96%; }
    .admin-toolbar[b-h7h5x1t6va] { gap: 8px; }
    .filter-chip[b-h7h5x1t6va]   { font-size: 0.72rem; padding: 5px 7px; }

    .admin-search[b-h7h5x1t6va]   { width: 100%; }

    .admin-th-check[b-h7h5x1t6va] { display: none; }

    .admin-table-wrap[b-h7h5x1t6va] {
        border: 0;
        background: transparent;
        border-radius: 0;
    }
    .admin-table[b-h7h5x1t6va] { min-width: 0; }
    .admin-table thead[b-h7h5x1t6va] { display: none; }
    .admin-table[b-h7h5x1t6va], .admin-table tbody[b-h7h5x1t6va], .admin-table tr[b-h7h5x1t6va], .admin-table td[b-h7h5x1t6va] { display: block; width: 100%; }

    .admin-table tbody tr[b-h7h5x1t6va] {
        background: #ffffff;
        border: 1px solid #e8c0e0;
        border-radius: 10px;
        padding: 8px 10px;
        margin-bottom: 8px;
    }
    .admin-table tbody tr.is-selected[b-h7h5x1t6va] {
        background: #ffd2e6;
        border-color: #ff6a99;
    }
    .admin-table tbody td[b-h7h5x1t6va] {
        padding: 3px 0;
        border-top: 0;
        display: grid;
        grid-template-columns: 90px 1fr;
        gap: 8px;
        align-items: baseline;
    }
    .admin-table tbody td.admin-td-check[b-h7h5x1t6va] {
        display: flex;
        flex-direction: row;
        gap: 8px;
        padding: 4px 0;
        align-items: center;
    }
    .admin-table tbody td.admin-td-check[b-h7h5x1t6va]::before {
        content: "Seleccionar";
        font-weight: 700;
        color: #ff6a99;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    .admin-table tbody td[b-h7h5x1t6va]::before {
        content: attr(data-label);
        font-weight: 700;
        color: #ff6a99;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    .admin-table tbody td:nth-child(2)[b-h7h5x1t6va] { display: none; } /* esconde # */

    .admin-pager[b-h7h5x1t6va] { gap: 4px; }
    .mini-pager[b-h7h5x1t6va]  { padding: 4px 8px; font-size: 0.72rem; }

    .admin-search[b-h7h5x1t6va]   { width: 100%; }
    .filter-group[b-h7h5x1t6va]   { width: 100%; justify-content: flex-start; }
}

/* /Pages/AdminProgreso.razor.rz.scp.css */
/* AdminProgreso · estilos scoped (no se comparten con AdminBoletos)
   Mismo lenguaje visual que el resto del admin: rosa/morado de Michiland. */

/* ─── Card header (override del tamaño del logo + título) ────────── */
.admin-prog-card .welcome-title .brand-img[b-aj68giazs7] {
    width: min(220px, 55%);
    height: auto;
}
.admin-prog-card .welcome-title .title-pre[b-aj68giazs7] {
    color: #5b3a8a !important;
    -webkit-text-stroke: 0 !important;
            text-stroke: 0 !important;
    text-shadow: none !important;
    font-size: clamp(1.5rem, 2.4vw, 1.9rem) !important;
    margin-bottom: 6px;
}

/* ─── Toolbar ───────────────────────────────────────────────────── */
.prog-toolbar[b-aj68giazs7] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 8px 0 16px;
}
.prog-toolbar .admin-search[b-aj68giazs7] {
    flex: 1 1 240px;
    min-width: 180px;
    max-width: 360px;
}
.prog-count[b-aj68giazs7] {
    font-size: 0.85rem;
    color: #7a5b8a;
    font-weight: 600;
    margin-left: auto;
}

/* ─── Tabla ─────────────────────────────────────────────────────── */
.prog-table thead th[b-aj68giazs7] {
    white-space: nowrap;
    user-select: none;
}
.prog-table thead th.is-sortable[b-aj68giazs7] {
    cursor: pointer;
    transition: background-color 0.12s ease;
}
.prog-table thead th.is-sortable:hover[b-aj68giazs7] {
    background: #fce4f1;
}
.prog-table thead th.is-sorted[b-aj68giazs7] {
    color: #5b3a8a;
}
.prog-th-num[b-aj68giazs7] { text-align: right; }
.prog-td-num[b-aj68giazs7] { text-align: right; font-variant-numeric: tabular-nums; }
.prog-total[b-aj68giazs7] {
    font-weight: 800;
    color: #5b3a8a;
    white-space: nowrap;
}

.prog-table tbody tr:hover[b-aj68giazs7] {
    background: #fff7fc;
}

/* ─── Celda de mapa (análoga a .bol-pos pero con nombres propios) ── */
.prog-pos[b-aj68giazs7] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 130px;
}
.prog-pos-head[b-aj68giazs7] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}
.prog-pos-num[b-aj68giazs7] {
    font-weight: 800;
    color: #5b3a8a;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}
.prog-pos-pct[b-aj68giazs7] {
    font-size: 0.72rem;
    color: #9989aa;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.prog-pos-bar[b-aj68giazs7] {
    display: block;
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
    background: #ffe4ef;
    border: 1px solid #ffb4d6;
}
.prog-pos-bar-fill[b-aj68giazs7] {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #ff8fb1 0%, #ff6a99 100%);
}

/* ─── Filtros por columna (fila del thead en escritorio) ────────── */
.prog-filter-row th[b-aj68giazs7] {
    padding: 6px 4px;
    background: #fce4f1;
    border-top: 1px solid #ffb4d6;
}
.prog-filter-input[b-aj68giazs7] {
    width: 100%;
    box-sizing: border-box;
    padding: 5px 8px;
    font-size: 0.78rem;
    border: 1px solid #e8c0e0;
    border-radius: 6px;
    background: #ffffff;
    color: #4a2c5a;
    font-family: inherit;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.prog-filter-input[b-aj68giazs7]::placeholder { color: #b89cc4; font-style: italic; }
.prog-filter-input:focus[b-aj68giazs7] {
    outline: none;
    border-color: #ff6a99;
    box-shadow: 0 0 0 2px rgba(255, 106, 153, 0.18);
}
.prog-filter-mini[b-aj68giazs7] {
    width: 60px;
    padding: 4px 6px;
    text-align: center;
}
.prog-filter-range[b-aj68giazs7] {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: center;
}
.prog-filter-sep[b-aj68giazs7] {
    color: #b89cc4;
    font-weight: 700;
    font-size: 0.85rem;
}

/* ─── Panel de filtros móvil ────────────────────────────────────── */
.prog-filters-mobile[b-aj68giazs7] {
    display: none;             /* oculto por default — visible solo en móvil */
    margin: 8px 0 14px;
    border: 1px solid #ffb4d6;
    border-radius: 10px;
    background: #fff7fc;
    overflow: hidden;
}
.prog-filters-mobile > summary[b-aj68giazs7] {
    list-style: none;
    cursor: pointer;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    color: #5b3a8a;
    user-select: none;
}
.prog-filters-mobile > summary[b-aj68giazs7]::-webkit-details-marker { display: none; }
.prog-filters-mobile > summary[b-aj68giazs7]::after {
    content: "▾";
    font-size: 0.9rem;
    color: #b89cc4;
    transition: transform 0.15s ease;
}
.prog-filters-mobile[open] > summary[b-aj68giazs7]::after { transform: rotate(180deg); }
.prog-filters-mobile-summary[b-aj68giazs7] {
    display: flex;
    align-items: center;
    gap: 8px;
}
.prog-filter-badge[b-aj68giazs7] {
    background: #ff6a99;
    color: #fff;
    font-size: 0.7rem;
    padding: 1px 7px;
    border-radius: 99px;
    line-height: 1.4;
    font-weight: 700;
}
.prog-filters-mobile-grid[b-aj68giazs7] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 0 14px 14px;
}
.prog-fm-field[b-aj68giazs7] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.78rem;
    color: #5b3a8a;
    font-weight: 600;
}
.prog-fm-field-wide[b-aj68giazs7] {
    grid-column: 1 / -1;
}
.prog-fm-field .prog-filter-input[b-aj68giazs7] { font-size: 0.85rem; padding: 6px 10px; }

/* ─── Paginador ─────────────────────────────────────────────────── */
.prog-pager[b-aj68giazs7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 14px;
}
.prog-pager-size[b-aj68giazs7] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #7a5b8a;
    font-weight: 600;
}
.prog-pager-size .filter-chip[b-aj68giazs7] {
    padding: 4px 10px;
    font-size: 0.78rem;
}
.prog-pager-nav[b-aj68giazs7] {
    display: flex;
    align-items: center;
    gap: 8px;
}
.prog-pager-nav .filter-chip[b-aj68giazs7] {
    padding: 4px 10px;
    font-size: 0.85rem;
}
.prog-pager-info[b-aj68giazs7] {
    font-size: 0.8rem;
    color: #5b3a8a;
    font-weight: 700;
}

/* ─── Puntos + editar (columna nueva) ────────────────────────────── */
.prog-points[b-aj68giazs7] {
    font-weight: 800;
    color: #5b3a8a;
    white-space: nowrap;
}
.prog-points-btn[b-aj68giazs7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid #e8c0e0;
    background: #ffffff;
    font-family: inherit;
    font-size: 0.92rem;
    color: #5b3a8a;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}
.prog-points-btn:hover[b-aj68giazs7] {
    background: #fff0f8;
    border-color: #ff6a99;
}
.prog-points-num[b-aj68giazs7] {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}
.prog-points-edit[b-aj68giazs7] {
    font-size: 0.85rem;
    opacity: 0.75;
}
.prog-th-actions[b-aj68giazs7] { text-align: center; }
.prog-td-actions[b-aj68giazs7] { text-align: center; white-space: nowrap; }
.prog-points-edit-link[b-aj68giazs7] {
    background: transparent;
    border: none;
    color: #ff6a99;
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    padding: 4px 6px;
    font-family: inherit;
}
.prog-points-edit-link:hover[b-aj68giazs7] { text-decoration: underline; }

/* ─── Sort bar (dropdown visible siempre) ─────────────────────────── */
.prog-sortbar[b-aj68giazs7] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 4px 0 14px;
    padding: 10px 14px;
    background: #fff7fc;
    border: 1px solid #ffd1e6;
    border-radius: 10px;
}
.prog-sortbar-label[b-aj68giazs7] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #5b3a8a;
    font-weight: 700;
}
.prog-sortbar-select[b-aj68giazs7] {
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid #e8c0e0;
    background: #ffffff;
    color: #4a2c5a;
    font-family: inherit;
    font-size: 0.88rem;
    cursor: pointer;
    min-width: 200px;
}
.prog-sortbar-select:focus[b-aj68giazs7] {
    outline: none;
    border-color: #ff6a99;
    box-shadow: 0 0 0 2px rgba(255, 106, 153, 0.18);
}
.prog-sortbar-toggle[b-aj68giazs7] {
    margin-left: auto;
}

/* ─── Modal de edición de puntos ──────────────────────────────────── */
.prog-modal-backdrop[b-aj68giazs7] {
    position: fixed;
    inset: 0;
    background: rgba(60, 30, 70, 0.45);
    backdrop-filter: blur(2px);
    z-index: 100;
}
.prog-modal[b-aj68giazs7] {
    position: fixed;
    z-index: 101;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #ffffff;
    border: 1px solid #ffb4d6;
    border-radius: 16px;
    box-shadow: 0 18px 50px -10px rgba(90, 50, 110, 0.45);
    padding: 22px 24px;
    width: min(420px, calc(100% - 32px));
    max-height: calc(100% - 32px);
    overflow-y: auto;
}
.prog-modal-title[b-aj68giazs7] {
    margin: 0 0 4px;
    color: #5b3a8a;
    font-size: 1.15rem;
    font-weight: 800;
}
.prog-modal-nick[b-aj68giazs7] { color: #ff6a99; }
.prog-modal-sub[b-aj68giazs7] {
    margin: 0 0 6px;
    font-size: 0.85rem;
    color: #7a5b8a;
}
.prog-modal-hint[b-aj68giazs7] {
    margin: 0 0 14px;
    font-size: 0.78rem;
    color: #9989aa;
    line-height: 1.4;
}
.prog-modal-label[b-aj68giazs7] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.8rem;
    color: #5b3a8a;
    font-weight: 700;
    margin-bottom: 12px;
}
.prog-modal-input[b-aj68giazs7] {
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid #e8c0e0;
    font-family: inherit;
    font-size: 1rem;
    color: #4a2c5a;
    background: #ffffff;
}
.prog-modal-input:focus[b-aj68giazs7] {
    outline: none;
    border-color: #ff6a99;
    box-shadow: 0 0 0 2px rgba(255, 106, 153, 0.18);
}
.prog-modal-actions[b-aj68giazs7] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

/* ─── Responsive: apilar la tabla como tarjetas en móvil ────────── */
@media (max-width: 900px) {
    .prog-toolbar .admin-search[b-aj68giazs7] {
        flex: 1 1 100%;
        max-width: none;
    }
    .prog-count[b-aj68giazs7] {
        margin-left: 0;
    }

    .prog-table thead[b-aj68giazs7] { display: none; }
    .prog-table[b-aj68giazs7],
    .prog-table tbody[b-aj68giazs7],
    .prog-table tr[b-aj68giazs7],
    .prog-table td[b-aj68giazs7] { display: block; width: 100%; }

    .prog-table tbody tr[b-aj68giazs7] {
        background: #ffffff;
        border: 1px solid #e8c0e0;
        border-radius: 12px;
        padding: 12px 14px;
        margin-bottom: 12px;
        box-shadow: 0 2px 6px -2px rgba(120, 60, 130, 0.10);
    }
    .prog-table tbody td[b-aj68giazs7] {
        padding: 4px 0;
        border: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
    }
    .prog-table tbody td[b-aj68giazs7]::before {
        content: attr(data-label);
        font-weight: 700;
        color: #7a5b8a;
        font-size: 0.78rem;
        flex: 0 0 auto;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    .prog-table td > .prog-pos[b-aj68giazs7] {
        margin-left: auto;
    }
    .prog-table td > .prog-points-btn[b-aj68giazs7] {
        margin-left: auto;
    }
    .prog-td-actions[b-aj68giazs7]::before {
        /* En escritorio la columna "Editar" tiene su propia celda, así
           que no necesitamos el data-label; en móvil lo reusamos como
           etiqueta del botón. */
        display: none;
    }
    .prog-td-actions[b-aj68giazs7] {
        justify-content: flex-end;
    }
    .prog-th-num[b-aj68giazs7],
    .prog-td-num[b-aj68giazs7] { text-align: right; }

    .prog-pager[b-aj68giazs7] { flex-direction: column; align-items: stretch; }
    .prog-pager-size[b-aj68giazs7],
    .prog-pager-nav[b-aj68giazs7] { justify-content: center; flex-wrap: wrap; }

    /* En móvil el thead está oculto (tabla → tarjetas), entonces los
       filtros del thead no se ven: mostramos el panel colapsable. */
    .prog-filters-mobile[b-aj68giazs7] { display: block; }
    .prog-filters-mobile-grid[b-aj68giazs7] { grid-template-columns: 1fr; }
}
/* /Pages/AdminQuizRapido.razor.rz.scp.css */
/* AdminQuizRapido — formulario y listado de preguntas del Quiz rápido.
   Mismo lenguaje visual que AdminInvitaciones (sobre `.admin-card`),
   con badges A/B/C en colores suaves para diferenciar las opciones. */

.admin-quiz-card[b-866twcsdj9] {
    /* Permite que el listado crezca hacia abajo sin romper el layout. */
    overflow: visible;
    /* CRÍTICO para responsive: la card vive dentro de `.welcome` (display:
       grid; place-items: center). Sin `min-width: 0` los hijos flexibles
       heredan el min-content del `<table>` de abajo (columnas con
       `white-space: nowrap`) y la card se infla a ~800px en mobile,
       descuadrando todo el form. */
    min-width: 0;
    max-width: min(1080px, 100%);
}

.admin-quiz-card .welcome-tagline[b-866twcsdj9] {
    text-align: center;
    margin-bottom: 18px;
    color: #5b3a8a;
    font-size: 0.95rem;
    line-height: 1.4;
    max-width: 56ch;
    margin-left: auto;
    margin-right: auto;
}

/* ─── Formulario ──────────────────────────────────────────────────── */

.admin-quiz-form[b-866twcsdj9] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    margin: 14px 0 24px;
    border-radius: 18px;
    background: linear-gradient(180deg,
        rgba(243, 230, 255, .55) 0%,
        rgba(228, 210, 255, .55) 100%);
    border: 1.5px dashed #c8a8e8;
    /* Sin esto, en mobile la form se queda en 768px (la suma de los
       min-content de los `<input>` + el `min-width: 240px` del botón
       global) y desborda el viewport aunque el padre tenga
       `overflow: hidden`. */
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    /* Override del skin global de .input / .field-label: el form usa
       fondo claro y los estilos globales (color: white) eran para
       wizard-cards oscuros. Acá forzamos contraste oscuro sobre el
       lila pastel. */
    color: #3c2456;
}

/* Labels de cada field dentro del form. */
.admin-quiz-form .field-label[b-866twcsdj9] {
    color: #5b2c70;
}

/* Input + textarea + select dentro del form: texto oscuro, fondo
   blanco opaco (no el blanco translúcido del skin global), borde lila. */
.admin-quiz-form .input[b-866twcsdj9],
.admin-quiz-form textarea.input[b-866twcsdj9],
.admin-quiz-form select.input[b-866twcsdj9] {
    color: #3c2456;
    background: #ffffff;
    border: 2px solid #d3bce8;
    box-shadow: 0 2px 6px rgba(122, 63, 200, .08);
}
.admin-quiz-form .input[b-866twcsdj9]::placeholder {
    color: #9783b8;
    opacity: 1;
}
.admin-quiz-form .input:hover[b-866twcsdj9] {
    border-color: #b48bff;
}
.admin-quiz-form .input:focus[b-866twcsdj9] {
    outline: none;
    border-color: #7a3fc8;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(122, 63, 200, .18);
}

/* Select nativo: el color de las opciones sigue siendo oscuro sobre
   fondo blanco. */
.admin-quiz-form .input-select option[b-866twcsdj9] {
    background: #ffffff;
    color: #3c2456;
}

.admin-quiz-options[b-866twcsdj9] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
@media (min-width: 640px) {
    .admin-quiz-options[b-866twcsdj9] { grid-template-columns: 1fr 1fr 1fr; }
}

.admin-quiz-opt .field-label[b-866twcsdj9] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.admin-quiz-opt-badge[b-866twcsdj9] {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 0.78rem;
    font-weight: 900;
    color: #fff;
    flex-shrink: 0;
}
.admin-quiz-opt-a[b-866twcsdj9] { background: linear-gradient(180deg, #ffb4d6 0%, #ff6a99 100%); }
.admin-quiz-opt-b[b-866twcsdj9] { background: linear-gradient(180deg, #c69bff 0%, #7a3fc8 100%); }
.admin-quiz-opt-c[b-866twcsdj9] { background: linear-gradient(180deg, #6ab7e8 0%, #3f7fc8 100%); }

.admin-quiz-meta[b-866twcsdj9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: end;
}
@media (min-width: 640px) {
    .admin-quiz-meta[b-866twcsdj9] {
        grid-template-columns: 1fr 1fr auto;
    }
}
.admin-quiz-correct .input-select[b-866twcsdj9] { font-weight: 800; }
.admin-quiz-points .input[b-866twcsdj9] { font-weight: 800; }

/* ─── Tabla ───────────────────────────────────────────────────────── */

.admin-quiz-table .admin-quiz-q[b-866twcsdj9] {
    max-width: 360px;
    min-width: 220px;
}
.admin-quiz-table .admin-quiz-q strong[b-866twcsdj9] {
    display: block;
    color: #5b2c70;
    margin-bottom: 4px;
    line-height: 1.3;
}
.admin-quiz-options-mini[b-866twcsdj9] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    font-size: 0.78rem;
    color: #6b5588;
}
.admin-quiz-opt-mini[b-866twcsdj9] {
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .55);
    border: 1px solid rgba(0, 0, 0, .05);
}
.admin-quiz-opt-mini.admin-quiz-opt-a[b-866twcsdj9] { color: #b13b6a; }
.admin-quiz-opt-mini.admin-quiz-opt-b[b-866twcsdj9] { color: #5b2c70; }
.admin-quiz-opt-mini.admin-quiz-opt-c[b-866twcsdj9] { color: #3f6b9c; }

.admin-quiz-correct-badge[b-866twcsdj9] {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-weight: 900;
    color: #fff;
    font-size: 0.85rem;
}
.admin-quiz-correct-badge.admin-quiz-opt-a[b-866twcsdj9] { background: #ff6a99; }
.admin-quiz-correct-badge.admin-quiz-opt-b[b-866twcsdj9] { background: #7a3fc8; }
.admin-quiz-correct-badge.admin-quiz-opt-c[b-866twcsdj9] { background: #3f7fc8; }

.admin-quiz-pts[b-866twcsdj9] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffd84a 0%, #ff9b3a 100%);
    color: #5b3a05;
    font-weight: 900;
    font-size: 0.85rem;
    min-width: 36px;
    text-align: center;
}

.admin-quiz-status[b-866twcsdj9] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    border: 1px solid transparent;
}
.admin-quiz-status.is-on[b-866twcsdj9] {
    background: #e6fff0;
    color: #0d6e3e;
    border-color: #b3ecc8;
}
.admin-quiz-status.is-off[b-866twcsdj9] {
    background: #f3edff;
    color: #5b2c70;
    border-color: #d3bce8;
}

.admin-quiz-attempts-detail[b-866twcsdj9] {
    color: #8a78a8;
    font-size: 0.78rem;
}

.admin-quiz-row-inactive[b-866twcsdj9] {
    opacity: 0.55;
}

.mini-btn.mini-toggle-off[b-866twcsdj9],
.mini-btn.mini-toggle-on[b-866twcsdj9] {
    background: rgba(255, 255, 255, .85);
    border: 1.5px solid #d3bce8;
    color: #5b2c70;
}
.mini-btn.mini-toggle-off:hover:not(:disabled)[b-866twcsdj9] {
    background: #f4e8ff;
    border-color: #b48bff;
}
.mini-btn.mini-toggle-on:hover:not(:disabled)[b-866twcsdj9] {
    background: #e6fff0;
    border-color: #2ed47e;
    color: #0d6e3e;
}

/* ─── Responsive ────────────────────────────────────────────────── */

/* El `.btn-michi` global tiene `min-width: 240px`. Adentro del form
   eso fuerza al `.admin-quiz-meta` (que es `display: grid`) a
   expandirse más allá del viewport en mobile. Lo pisamos acá y
   además forzamos que el botón sea full-width como el resto de los
   fields. */
.admin-quiz-create-btn[b-866twcsdj9] {
    height: 44px;
    padding: 0 22px;
    font-size: 0.95rem;
    min-width: 0;
    width: 100%;
}

@media (max-width: 760px) {
    .admin-quiz-form[b-866twcsdj9] {
        padding: 12px;
        gap: 10px;
    }
    .admin-quiz-card .welcome-tagline[b-866twcsdj9] {
        font-size: 0.88rem;
        margin-bottom: 12px;
    }

    /* Opciones A/B/C: en lugar de 3 columnas apretadas, una debajo
       de otra a ancho completo. Más cómodo para tipear. */
    .admin-quiz-options[b-866twcsdj9] {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    /* Correcta + Puntos: una columna, todo full-width.
       El botón Crear va abajo, full-width, sin min-width 240px. */
    .admin-quiz-meta[b-866twcsdj9] {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .admin-quiz-meta .admin-quiz-correct[b-866twcsdj9],
    .admin-quiz-meta .admin-quiz-points[b-866twcsdj9] {
        min-width: 0;
    }
    .admin-quiz-correct .input[b-866twcsdj9],
    .admin-quiz-points .input[b-866twcsdj9] {
        width: 100%;
        min-width: 0;
    }
    .admin-quiz-create-btn[b-866twcsdj9] {
        width: 100%;
        grid-column: 1 / -1;
        margin-top: 4px;
    }

    /* Tabla → modo tarjetas. data-label se usa como etiqueta de
       cada celda visible arriba del valor. Ocultamos "Creada" y
       "Intentos" en mobile porque ya están implícitos. */
    .admin-table thead[b-866twcsdj9] { display: none; }
    .admin-table[b-866twcsdj9], .admin-table tbody[b-866twcsdj9], .admin-table tr[b-866twcsdj9],
    .admin-table td[b-866twcsdj9] {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
    }
    .admin-table tr[b-866twcsdj9] {
        margin-bottom: 10px;
        border: 1px solid #e8c0e0;
        border-radius: 12px;
        padding: 8px 10px;
        background: #fff;
    }
    .admin-table tbody td[b-866twcsdj9] {
        border-top: 1px dashed #f0d8e8;
        padding: 6px 4px;
    }
    .admin-table tbody td:first-child[b-866twcsdj9] {
        border-top: 0;
    }
    .admin-table tbody td[b-866twcsdj9]::before {
        content: attr(data-label);
        display: block;
        font-size: 0.65rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: #6b5588;
        font-weight: 800;
        margin-bottom: 2px;
    }
    .admin-table tbody td[data-label="Creada"][b-866twcsdj9],
    .admin-table tbody td[data-label="Intentos"][b-866twcsdj9] {
        display: none;
    }
    .admin-table .admin-quiz-q[b-866twcsdj9] {
        min-width: 0;
        max-width: 100%;
    }
    .admin-quiz-options-mini[b-866twcsdj9] {
        flex-wrap: wrap;
        font-size: 0.72rem;
    }
}

/* Tablets chicas: 2 columnas para las opciones A/B/C, meta en 1 fila
   pero con el botón Crear abajo a ancho completo. */
@media (min-width: 561px) and (max-width: 760px) {
    .admin-quiz-options[b-866twcsdj9] {
        grid-template-columns: 1fr 1fr;
    }
    .admin-quiz-options > :nth-child(3)[b-866twcsdj9] {
        grid-column: 1 / -1;
    }
}
/* /Pages/Home.razor.rz.scp.css */
/* ============================================================
   Home — decoraciones específicas de la página de inicio.
   Las reglas de layout (welcome/welcome-bg/welcome-card/...) viven
   en wwwroot/css/components.css para que cualquier página del
   WelcomeLayout (Home, AdminLogin, Me, AdminPanel, ...) las herede.
   ============================================================ */

/* ---------- michis flotando (decoración) ---------- */
.paws[b-ur02i2e9n3] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}
.drift[b-ur02i2e9n3] {
    position: absolute;
    bottom: -60px;
    width: 38px;
    height: 38px;
    color: #ff8fb1;
    opacity: 0;
    animation: michi-drift-b-ur02i2e9n3 16s linear infinite;
    will-change: transform, opacity;
}
.drift svg[b-ur02i2e9n3] { width: 100%; height: 100%; display: block; filter: drop-shadow(0 3px 5px rgba(0,0,0,0.18)); }
.drift.paw-2[b-ur02i2e9n3] { color: #ffc46c; }
.drift.paw-3[b-ur02i2e9n3] { color: #9adcff; }
.drift.paw-4[b-ur02i2e9n3] { color: #c69bff; }
.drift.paw-5[b-ur02i2e9n3] { color: #ffb6c8; }
.drift.paw-6[b-ur02i2e9n3] { color: #b6e3c5; }

.paw-1[b-ur02i2e9n3] { left:  6%; animation-delay:  0s;  width: 32px; height: 32px; }
.paw-2[b-ur02i2e9n3] { left: 22%; animation-delay:  3s;  width: 44px; height: 44px; animation-duration: 20s; }
.paw-3[b-ur02i2e9n3] { left: 38%; animation-delay:  7s;  width: 28px; height: 28px; }
.paw-4[b-ur02i2e9n3] { left: 58%; animation-delay:  2s;  width: 36px; height: 36px; }
.paw-5[b-ur02i2e9n3] { left: 74%; animation-delay:  9s;  width: 48px; height: 48px; animation-duration: 22s; }
.paw-6[b-ur02i2e9n3] { left: 90%; animation-delay:  5s;  width: 30px; height: 30px; }

@keyframes michi-drift-b-ur02i2e9n3 {
    0%   { transform: translateY(0)   rotate(0deg);   opacity: 0; }
    10%  {                                                opacity: 0.7; }
    90%  {                                                opacity: 0.7; }
    100% { transform: translateY(-115vh) rotate(360deg); opacity: 0; }
}

/* ---------- logo redondo que usa Home (michi-michi) ---------- */
.logo[b-ur02i2e9n3] {
    display: block;
    margin: 0 auto 8px;
    width: clamp(80px, 12vw, 130px);
    height: auto;
    filter: drop-shadow(0 10px 18px rgba(46, 34, 68, 0.45));
    animation: michi-floaty-b-ur02i2e9n3 4.5s ease-in-out infinite;
}
.logo img[b-ur02i2e9n3] { width: 100%; height: auto; display: block; }
@keyframes michi-floaty-b-ur02i2e9n3 {
    0%, 100% { transform: translateY(0)    rotate(0); }
    50%      { transform: translateY(-8px) rotate(2deg); }
}

/* ---------- prefers-reduced-motion (sólo para elementos de Home) ---------- */
@media (prefers-reduced-motion: reduce) {
    .drift[b-ur02i2e9n3],
    .logo[b-ur02i2e9n3] {
        animation: none !important;
    }
    .drift[b-ur02i2e9n3] { opacity: 0; }
}
/* /Pages/Login.razor.rz.scp.css */
/* ============================================================
   /login — pantalla dedicada de acceso.
   Sin hero de tren: fondo degradado rosa/morado + card sólida,
   blanca, sin transparencias. Huellitas saliendo desde abajo.
   ============================================================ */

/* ─── fondo degradado rosa/morado, sin imagen ─── */
.login-page[b-2j0nyhhujc] {
    background: linear-gradient(160deg,
        #ffe4ef 0%,
        #f3dcff 50%,
        #e1c8ff 100%) !important;
    min-height: 100vh;
}

/* No usamos el hero de tren en /login. */
.login-page .welcome-bg[b-2j0nyhhujc],
.login-page .welcome-bg-overlay[b-2j0nyhhujc],
.login-page .welcome-bg-img[b-2j0nyhhujc] { display: none !important; }

/* ─── card sólida, sin transparencias ─── */
.login-card[b-2j0nyhhujc] {
    background: #ffffff !important;
    border: 1px solid #e8c0e0;
    box-shadow: 0 22px 50px -22px rgba(120, 60, 130, 0.40);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    width: min(380px, 92%);
    text-align: left;
    gap: 10px;
    /* Hacemos la card un poco más baja (no necesita subir nada) y le
       damos overflow visible para que las decoraciones que viven dentro
       puedan asomar ligeramente si hace falta. */
    margin-top: 0;
    overflow: visible;
}

/* El título "Hola de nuevo" debe leerse sobre blanco, no sobre
   hero oscuro. Reemplazamos el blanco con morado y anulamos
   el text-shadow blanco del estilo global. */
.login-card .welcome-title .title-pre[b-2j0nyhhujc] {
    color: #5b3a8a !important;
    -webkit-text-stroke: 0 !important;
            text-stroke: 0 !important;
    text-shadow: none !important;
    font-size: clamp(1.6rem, 2.4vw, 2rem) !important;
    margin-bottom: 8px;
}
.login-card .welcome-title .brand-img[b-2j0nyhhujc] {
    filter: drop-shadow(0 4px 10px rgba(120, 60, 130, 0.25));
}

/* Tagline legible sobre blanco. */
.login-card .welcome-tagline[b-2j0nyhhujc] {
    color: #5b3a8a !important;
    text-shadow: none !important;
    -webkit-text-stroke: 0 !important;
            text-stroke: 0 !important;
    font-size: 1rem !important;
    margin: 0 0 12px !important;
    font-weight: 500 !important;
}

/* ─── inputs visibles: fondo morado oscuro + texto blanco ─── */
.login-card .input[b-2j0nyhhujc] {
    width: 100%;
    height: 42px;
    padding: 0 14px;
    font-size: 0.95rem;
    box-sizing: border-box;
    background: rgba(46, 34, 68, 0.55) !important;
    border-color: rgba(255, 255, 255, 0.30) !important;
    color: #ffffff !important;
}
.login-card .input[b-2j0nyhhujc]::placeholder { color: rgba(255, 255, 255, 0.55); }
.login-card .input:focus[b-2j0nyhhujc] {
    background: rgba(46, 34, 68, 0.75) !important;
    border-color: #ff6a99 !important;
}

.login-card .field-label[b-2j0nyhhujc] {
    font-size: 0.85rem;
    margin-bottom: 4px;
    /* color global del .field-label es blanco (rgba(255,255,255,0.9))
       — sobre card blanca es invisible, lo pasamos a morado. */
    color: #5b3a8a !important;
}

.login-card .welcome-actions[b-2j0nyhhujc] {
    justify-content: flex-start;
    margin-top: 8px;
    gap: 10px;
}
.login-card .btn-michi[b-2j0nyhhujc] {
    min-width: 130px;
    padding: 11px 24px;
    font-size: 1rem;
}
/* Los .btn-michi globales están pensados para el hero oscuro
   (texto blanco, borde blanco). Sobre card blanca son invisibles.
   Re-pintamos primario y ghost con colores morados/rosa. */
.login-card .btn-primary[b-2j0nyhhujc] {
    background: linear-gradient(180deg, #ff8fb1 0%, #ff6a99 100%) !important;
    color: #ffffff !important;
    border: 0 !important;
}
.login-card .btn-primary:hover:not(:disabled)[b-2j0nyhhujc] {
    filter: brightness(1.05);
    box-shadow: 0 6px 14px -4px rgba(255, 106, 153, 0.55);
}
.login-card .btn-ghost[b-2j0nyhhujc] {
    background: #f7e6f5 !important;
    color: #5b3a8a !important;
    border: 1.5px dashed #c69bff !important;
}
.login-card .btn-ghost:hover:not(:disabled)[b-2j0nyhhujc] {
    background: #ffd2e6 !important;
    border-color: #ff6a99 !important;
    color: #b13b6a !important;
}

.login-card .msg-error[b-2j0nyhhujc] {
    margin: 4px 0 0;
    font-size: 0.85rem;
    /* rosa intenso, no rosa claro (el global es #ffb4b4) */
    color: #d24a78 !important;
}

/* ─── decoraciones dentro de la card, en la parte inferior ───
   PNGs con fondo transparente. Viven dentro de .login-card en una fila
   flex, una a cada lado, justo debajo de los botones. */
.login-deco-row[b-2j0nyhhujc] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 8px;
    margin-top: 4px;
    pointer-events: none;
    user-select: none;
}

.login-deco[b-2j0nyhhujc] {
    display: block;
    height: auto;
    pointer-events: none;
    user-select: none;
    /* animación suave de "respiración" para que no queden tiesos. */
    animation: michi-deco-float-b-2j0nyhhujc 4.5s ease-in-out infinite;
}

/* michis jugando → esquina inferior izquierda de la card */
.login-deco-michis[b-2j0nyhhujc] {
    width: clamp(120px, 38%, 165px);
    animation-delay: 0s;
}

/* conductor invitando → esquina inferior derecha de la card */
.login-deco-conductor[b-2j0nyhhujc] {
    width: clamp(110px, 34%, 150px);
    animation-delay: 1.2s;
    /* el conductor "saluda" → rotación opuesta */
    animation-name: michi-deco-wave-b-2j0nyhhujc;
}

@keyframes michi-deco-float-b-2j0nyhhujc {
    0%, 100% { transform: translateY(0)    rotate(0deg); }
    50%      { transform: translateY(-4px) rotate(1.5deg); }
}
@keyframes michi-deco-wave-b-2j0nyhhujc {
    0%, 100% { transform: translateY(0)   rotate(-1deg); }
    50%      { transform: translateY(-3px) rotate(1.5deg); }
}

@media (max-width: 520px) {
    .login-deco-michis[b-2j0nyhhujc]    { width: 120px; }
    .login-deco-conductor[b-2j0nyhhujc] { width: 110px; }
}

@media (prefers-reduced-motion: reduce) {
    .login-deco[b-2j0nyhhujc] { animation: none !important; }
}

/* ─── huellitas saliendo desde abajo ─── */
.login-paws[b-2j0nyhhujc] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.login-paws .drift[b-2j0nyhhujc] {
    position: absolute;
    bottom: -60px;
    width: 38px;
    height: 38px;
    color: #ff8fb1;
    opacity: 0;
    animation: michi-drift-b-2j0nyhhujc 16s linear infinite;
    will-change: transform, opacity;
}
.login-paws .drift svg[b-2j0nyhhujc] { width: 100%; height: 100%; display: block; filter: drop-shadow(0 3px 5px rgba(120, 60, 130, 0.20)); }
.login-paws .paw-2[b-2j0nyhhujc] { color: #ffc46c; }
.login-paws .paw-3[b-2j0nyhhujc] { color: #c69bff; }
.login-paws .paw-4[b-2j0nyhhujc] { color: #ff8fb1; }
.login-paws .paw-5[b-2j0nyhhujc] { color: #b89bff; }
.login-paws .paw-6[b-2j0nyhhujc] { color: #ffb6c8; }

.login-paws .paw-1[b-2j0nyhhujc] { left:  6%; animation-delay:  0s;  width: 32px; height: 32px; }
.login-paws .paw-2[b-2j0nyhhujc] { left: 22%; animation-delay:  3s;  width: 44px; height: 44px; animation-duration: 20s; }
.login-paws .paw-3[b-2j0nyhhujc] { left: 38%; animation-delay:  7s;  width: 28px; height: 28px; }
.login-paws .paw-4[b-2j0nyhhujc] { left: 58%; animation-delay:  2s;  width: 36px; height: 36px; }
.login-paws .paw-5[b-2j0nyhhujc] { left: 74%; animation-delay:  9s;  width: 48px; height: 48px; animation-duration: 22s; }
.login-paws .paw-6[b-2j0nyhhujc] { left: 90%; animation-delay:  5s;  width: 30px; height: 30px; }

@keyframes michi-drift-b-2j0nyhhujc {
    0%   { transform: translateY(0)     rotate(0deg);   opacity: 0; }
    10%  {                                                opacity: 0.75; }
    90%  {                                                opacity: 0.75; }
    100% { transform: translateY(-115vh) rotate(360deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .login-paws .drift[b-2j0nyhhujc] { animation: none !important; opacity: 0; }
}
/* /Pages/Me.razor.rz.scp.css */
/* ============================================================
   /me — perfil del usuario (admin-only visible para el dueño).

   DIFERENCIA con /, /login, /admin-login: aquí NO usamos la imagen
   del tren (hero-train.png). El fondo es 100% del tema activo —
   se ve la paleta del tema, no una foto. Ver .me-welcome-bg más
   abajo y los overrides por tema que definen cada fondo.
   ============================================================ */

.me .welcome-bg-img[b-jhck927czw],
.me .welcome-bg-overlay[b-jhck927czw] { display: none !important; }

/* Bajo UserLayout ya hay un fondo gradiente; no queremos otro
   contenedor de pantalla completa ni otro padding vertical. */
.welcome.me[b-jhck927czw] {
    min-height: 0;
    padding: 0;
    overflow: visible;
}
.welcome.me > .me-welcome-bg[b-jhck927czw] {
    border-radius: 28px;
}

.me-welcome-bg[b-jhck927czw] {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    background: #1c1432; /* fallback mientras carga Blazor */
    transition: background .4s ease;
}

.me-card[b-jhck927czw] {
    max-width: 720px;
    text-align: left;
    align-items: stretch;
    gap: 22px;
}

.me-grid[b-jhck927czw] {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 22px;
    align-items: center;
}
.me-img[b-jhck927czw] {
    width: 200px;
    height: 200px;
    object-fit: contain;
    border-radius: 18px;
    /* Antes había un repeating-conic-gradient (#f0e8ff / #fff 16×16)
       que pintaba un "checkerboard" tipo Photoshop para delatar que el
       PNG es transparente. Lo quitamos: el gato debe sentarse directo
       sobre el gradiente temático del .me-welcome-bg, igual que el
       resto de elementos de la card. */
    background: transparent;
    box-shadow: 0 12px 30px rgba(91, 58, 138, 0.30);
}
.me-name[b-jhck927czw] { margin: 0; color: #fff; font-size: 1.4rem; }
.me-nick[b-jhck927czw] {
    margin: 4px 0 0;
    color: #ff6a99;
    font-size: 1.1rem;
    font-weight: 800;
}
.me-meta[b-jhck927czw] {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    line-height: 1.6;
}
.me-meta code[b-jhck927czw] {
    background: rgba(0,0,0,0.30);
    padding: 1px 6px;
    border-radius: 6px;
    font-size: 0.85rem;
}

.me-actions[b-jhck927czw] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    /* Más aire entre la credencial y los botones de descarga/acción. */
    margin-top: 28px;
}

/* Botones compactos en /me: el usuario pidió reducir su tamaño para
   que el pasaporte domine visualmente y los CTAs queden como
   secundarios. Padding, fuente y min-width más pequeños. */
.me-action-compact[b-jhck927czw] {
    padding: 10px 18px !important;
    font-size: 0.9rem !important;
    min-width: 0 !important;
    letter-spacing: .02em !important;
}
.me-action-compact[aria-hidden][b-jhck927czw] { font-size: 0.95rem; }

/* Más respiración entre la credencial y el primer botón en móvil,
   donde el stage y los botones compiten por el mismo viewport. */
@media (max-width: 600px) {
    .me-actions[b-jhck927czw] { margin-top: 22px; }
}

.me-edit[b-jhck927czw] {
    background: rgba(255, 255, 255, 0.08);
    border: 1px dashed rgba(255, 255, 255, 0.25);
    border-radius: 14px;
    padding: 16px;
    display: grid;
    gap: 10px;
}
.me-section-title[b-jhck927czw] {
    margin: 0;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
}
.me-edit-row[b-jhck927czw] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: stretch;
}
.me-edit-row .input[b-jhck927czw] { min-height: 44px; }

/* ─── Theme picker ─── */
.me-theme-grid[b-jhck927czw] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}
.me-theme-btn[b-jhck927czw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 4px;
    background: rgba(255, 255, 255, .06);
    border: 2px solid rgba(255, 255, 255, .18);
    border-radius: 12px;
    color: #fff;
    cursor: pointer;
    font: inherit;
    transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.me-theme-btn:hover[b-jhck927czw] { transform: translateY(-2px); background: rgba(255, 255, 255, .12); }
.me-theme-btn.is-active[b-jhck927czw] {
    border-color: #ffb4d6;
    background: rgba(255, 180, 214, .18);
    box-shadow: 0 0 0 3px rgba(255, 180, 214, .25);
}
.me-theme-thumb[b-jhck927czw] {
    width: 44px;
    height: 30px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: 18px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    border: 2px solid rgba(255, 255, 255, .35);
}
.me-theme-name[b-jhck927czw] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .02em;
    text-align: center;
    line-height: 1.15;
}

.me-theme-options[b-jhck927czw] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 6px;
}
.me-theme-opt-label[b-jhck927czw] {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #ffb4d6;
    text-align: center;
    margin-bottom: 6px;
}
.me-theme-opt-choices[b-jhck927czw] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
}
.me-theme-opt-btn[b-jhck927czw] {
    border: 1.5px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .06);
    color: #fff;
    padding: 5px 8px;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .02em;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.me-theme-opt-btn:hover[b-jhck927czw] { background: rgba(255, 255, 255, .12); }
.me-theme-opt-btn.is-active[b-jhck927czw] {
    background: #ffb4d6;
    border-color: #ffb4d6;
    color: #5b3a8a;
}

/* ─── Theme-tinted backgrounds ─── */
/* Cada .me--<theme> define el fondo del perfil completo (no usamos
   la imagen del tren aquí). .me-welcome-bg lleva la base sólida del
   tema y .welcome-bg-theme lleva un patrón decorativo encima. */

.welcome-bg-theme[b-jhck927czw] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .65;
    mix-blend-mode: screen;
    transition: background .35s ease, opacity .35s ease;
}

/* ── Bases por tema ─────────────────────────────────────────────── */
.me--pixel-retro   .me-welcome-bg[b-jhck927czw] { background: linear-gradient(135deg,#1a1a2e 0%,#2d1b3d 50%,#3d1b2d 100%); }
.me--cyberpunk     .me-welcome-bg[b-jhck927czw] { background: linear-gradient(135deg,#0a0014 0%,#1a0033 50%,#001428 100%); }
.me--steampunk     .me-welcome-bg[b-jhck927czw] { background: linear-gradient(135deg,#2d1f12 0%,#3d2f1f 50%,#1f1409 100%); }
.me--medieval      .me-welcome-bg[b-jhck927czw] { background: linear-gradient(135deg,#1a1410 0%,#3d2f1a 50%,#1a0f0a 100%); }
.me--scifi         .me-welcome-bg[b-jhck927czw] { background: linear-gradient(135deg,#040a18 0%,#0a1a2e 50%,#04141f 100%); }
.me--kawaii        .me-welcome-bg[b-jhck927czw] { background: linear-gradient(135deg,#3d2030 0%,#3d2a3d 50%,#2d2d3d 100%); }
.me--horror        .me-welcome-bg[b-jhck927czw] { background: linear-gradient(135deg,#0a0506 0%,#1a0a0a 50%,#0a0608 100%); }
.me--ocean         .me-welcome-bg[b-jhck927czw] { background: linear-gradient(135deg,#001428 0%,#003555 50%,#001a30 100%); }
.me--desert        .me-welcome-bg[b-jhck927czw] { background: linear-gradient(135deg,#3d2818 0%,#4d3520 50%,#2d1f10 100%); }
.me--tech          .me-welcome-bg[b-jhck927czw] { background: linear-gradient(135deg,#0d0d0f 0%,#1a1a1f 50%,#0a0d12 100%); }

/* ── Patrones por tema ──────────────────────────────────────────── */
.me--pixel-retro .welcome-bg-theme[b-jhck927czw] {
    background:
        repeating-linear-gradient(0deg,#F8E71C 0 1px,transparent 1px 24px),
        repeating-linear-gradient(90deg,#FF003C 0 1px,transparent 1px 24px);
    mix-blend-mode: overlay;
}
.me--cyberpunk .welcome-bg-theme[b-jhck927czw] {
    background:
        radial-gradient(circle at 25% 30%,rgba(255,0,255,.55),transparent 55%),
        radial-gradient(circle at 75% 70%,rgba(0,255,255,.55),transparent 55%),
        radial-gradient(circle at 50% 50%,rgba(245,255,0,.25),transparent 65%);
}
.me--steampunk .welcome-bg-theme[b-jhck927czw] {
    background:
        radial-gradient(ellipse at top,#B87333 0%,transparent 60%),
        radial-gradient(circle at 80% 80%,rgba(197,168,128,.35),transparent 50%);
}
.me--medieval .welcome-bg-theme[b-jhck927czw] {
    background:
        radial-gradient(circle at center,#D4AF37 0%,transparent 70%);
}
.me--scifi .welcome-bg-theme[b-jhck927czw] {
    background:
        linear-gradient(135deg,#0B3C5D 0%,transparent 60%),
        radial-gradient(circle at 30% 70%,rgba(0,255,127,.35),transparent 50%);
}
.me--kawaii .welcome-bg-theme[b-jhck927czw] {
    background:
        radial-gradient(circle at 20% 30%,rgba(255,183,206,.55),transparent 55%),
        radial-gradient(circle at 80% 70%,rgba(167,216,240,.55),transparent 55%),
        radial-gradient(circle at 50% 90%,rgba(255,244,177,.40),transparent 50%);
}
.me--horror .welcome-bg-theme[b-jhck927czw] {
    background:
        radial-gradient(circle at center,transparent 25%,rgba(138,3,3,.75) 100%);
}
.me--ocean .welcome-bg-theme[b-jhck927czw] {
    background:
        linear-gradient(180deg,#005F99 0%,transparent 60%),
        radial-gradient(circle at 70% 30%,rgba(64,224,208,.45),transparent 50%);
}
.me--desert .welcome-bg-theme[b-jhck927czw] {
    background:
        linear-gradient(180deg,#D2B48C 0%,transparent 50%),
        radial-gradient(circle at 30% 80%,rgba(160,82,45,.40),transparent 55%);
}
.me--tech .welcome-bg-theme[b-jhck927czw] {
    background:
        repeating-linear-gradient(90deg,transparent 0 18px,rgba(0,123,255,.30) 18px 19px),
        repeating-linear-gradient(0deg,transparent 0 18px,rgba(0,123,255,.18) 18px 19px);
}

/* Vignette encima del fondo temático — oscurece los bordes para
   que la card blanca/crema destaque, manteniendo el centro colorido. */
.me-welcome-bg[b-jhck927czw]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 80% at 50% 40%,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0) 60%,
        rgba(0,0,0,0.55) 100%);
    pointer-events: none;
}

/* ─── Acento en el nickname del usuario según el tema ─── */
.me--pixel-retro   .me-nick[b-jhck927czw] { color: #F8E71C; text-shadow: 2px 2px 0 #FF003C; }
.me--cyberpunk     .me-nick[b-jhck927czw] { color: #00FFFF; text-shadow: 0 0 8px #FF00FF; }
.me--steampunk     .me-nick[b-jhck927czw] { color: #D4AF37; }
.me--medieval      .me-nick[b-jhck927czw] { color: #D4AF37; text-shadow: 0 1px 0 #1A3D7C; }
.me--scifi         .me-nick[b-jhck927czw] { color: #00FF7F; text-shadow: 0 0 6px #00FF7F; }
.me--kawaii        .me-nick[b-jhck927czw] { color: #FFB7CE; }
.me--horror        .me-nick[b-jhck927czw] { color: #C81E1E; text-shadow: 0 0 4px rgba(0,0,0,.6); }
.me--ocean         .me-nick[b-jhck927czw] { color: #40E0D0; }
.me--desert        .me-nick[b-jhck927czw] { color: #A0522D; }
.me--tech          .me-nick[b-jhck927czw] { color: #007BFF; }

/* ─── Card border / glow según el tema ─── */
.me--pixel-retro   .welcome-card[b-jhck927czw] { box-shadow: 0 0 0 2px #FF003C, 0 18px 40px rgba(91,58,138,.45); }
.me--cyberpunk     .welcome-card[b-jhck927czw] { box-shadow: 0 0 0 2px #FF00FF, 0 0 32px rgba(0,255,255,.35), 0 18px 40px rgba(91,58,138,.45); }
.me--steampunk     .welcome-card[b-jhck927czw] { box-shadow: 0 0 0 2px #B87333, 0 18px 40px rgba(91,58,138,.45); }
.me--medieval      .welcome-card[b-jhck927czw] { box-shadow: 0 0 0 2px #D4AF37, 0 18px 40px rgba(91,58,138,.45); }
.me--scifi         .welcome-card[b-jhck927czw] { box-shadow: 0 0 0 2px #00FF7F, 0 0 32px rgba(0,255,127,.30), 0 18px 40px rgba(91,58,138,.45); }
.me--kawaii        .welcome-card[b-jhck927czw] { box-shadow: 0 0 0 2px #FFB7CE, 0 18px 40px rgba(91,58,138,.45); }
.me--horror        .welcome-card[b-jhck927czw] { box-shadow: 0 0 0 2px #8A0303, 0 0 32px rgba(138,3,3,.45), 0 18px 40px rgba(91,58,138,.45); }
.me--ocean         .welcome-card[b-jhck927czw] { box-shadow: 0 0 0 2px #40E0D0, 0 18px 40px rgba(91,58,138,.45); }
.me--desert        .welcome-card[b-jhck927czw] { box-shadow: 0 0 0 2px #A0522D, 0 18px 40px rgba(91,58,138,.45); }
.me--tech          .welcome-card[b-jhck927czw] { box-shadow: 0 0 0 2px #007BFF, 0 18px 40px rgba(91,58,138,.45); }

/* ─── Bio / quote tint por tema ─── */
.me--pixel-retro   .credential-bio[b-jhck927czw] { border-left: 3px solid #F8E71C; background: rgba(248,231,28,.08); }
.me--cyberpunk     .credential-bio[b-jhck927czw] { border-left: 3px solid #00FFFF; background: rgba(0,255,255,.08); }
.me--steampunk     .credential-bio[b-jhck927czw] { border-left: 3px solid #B87333; background: rgba(184,115,51,.12); }
.me--medieval      .credential-bio[b-jhck927czw] { border-left: 3px solid #D4AF37; background: rgba(212,175,55,.10); }
.me--scifi         .credential-bio[b-jhck927czw] { border-left: 3px solid #00FF7F; background: rgba(0,255,127,.08); }
.me--kawaii        .credential-bio[b-jhck927czw] { border-left: 3px solid #FFB7CE; background: rgba(255,183,206,.12); }
.me--horror        .credential-bio[b-jhck927czw] { border-left: 3px solid #C81E1E; background: rgba(138,3,3,.18); }
.me--ocean         .credential-bio[b-jhck927czw] { border-left: 3px solid #40E0D0; background: rgba(64,224,208,.10); }
.me--desert        .credential-bio[b-jhck927czw] { border-left: 3px solid #A0522D; background: rgba(160,82,45,.12); }
.me--tech          .credential-bio[b-jhck927czw] { border-left: 3px solid #007BFF; background: rgba(0,123,255,.10); }

/* ─── Panel de edición / hint color por tema ─── */
.me--pixel-retro   .me-section-title[b-jhck927czw] { color: #F8E71C; }
.me--cyberpunk     .me-section-title[b-jhck927czw] { color: #00FFFF; }
.me--steampunk     .me-section-title[b-jhck927czw] { color: #D4AF37; }
.me--medieval      .me-section-title[b-jhck927czw] { color: #D4AF37; }
.me--scifi         .me-section-title[b-jhck927czw] { color: #00FF7F; }
.me--kawaii        .me-section-title[b-jhck927czw] { color: #FFB7CE; }
.me--horror        .me-section-title[b-jhck927czw] { color: #C81E1E; }
.me--ocean         .me-section-title[b-jhck927czw] { color: #40E0D0; }
.me--desert        .me-section-title[b-jhck927czw] { color: #A0522D; }
.me--tech          .me-section-title[b-jhck927czw] { color: #007BFF; }

.me--pixel-retro   .me-edit-panel[b-jhck927czw] { border-color: rgba(248,231,28,.45); }
.me--cyberpunk     .me-edit-panel[b-jhck927czw] { border-color: rgba(0,255,255,.45); }
.me--steampunk     .me-edit-panel[b-jhck927czw] { border-color: rgba(184,115,51,.45); }
.me--medieval      .me-edit-panel[b-jhck927czw] { border-color: rgba(212,175,55,.45); }
.me--scifi         .me-edit-panel[b-jhck927czw] { border-color: rgba(0,255,127,.45); }
.me--kawaii        .me-edit-panel[b-jhck927czw] { border-color: rgba(255,183,206,.45); }
.me--horror        .me-edit-panel[b-jhck927czw] { border-color: rgba(200,30,30,.55); }
.me--ocean         .me-edit-panel[b-jhck927czw] { border-color: rgba(64,224,208,.45); }
.me--desert        .me-edit-panel[b-jhck927czw] { border-color: rgba(160,82,45,.45); }
.me--tech          .me-edit-panel[b-jhck927czw] { border-color: rgba(0,123,255,.45); }

/* Acento del botón "Editar perfil" — coincide con el tema activo */
.me--pixel-retro   .me-edit-toggle-row .btn-ghost[b-jhck927czw] { border-color: #F8E71C; color: #F8E71C; }
.me--cyberpunk     .me-edit-toggle-row .btn-ghost[b-jhck927czw] { border-color: #00FFFF; color: #00FFFF; }
.me--steampunk     .me-edit-toggle-row .btn-ghost[b-jhck927czw] { border-color: #D4AF37; color: #D4AF37; }
.me--medieval      .me-edit-toggle-row .btn-ghost[b-jhck927czw] { border-color: #D4AF37; color: #D4AF37; }
.me--scifi         .me-edit-toggle-row .btn-ghost[b-jhck927czw] { border-color: #00FF7F; color: #00FF7F; }
.me--kawaii        .me-edit-toggle-row .btn-ghost[b-jhck927czw] { border-color: #FFB7CE; color: #FFB7CE; }
.me--horror        .me-edit-toggle-row .btn-ghost[b-jhck927czw] { border-color: #C81E1E; color: #C81E1E; }
.me--ocean         .me-edit-toggle-row .btn-ghost[b-jhck927czw] { border-color: #40E0D0; color: #40E0D0; }
.me--desert        .me-edit-toggle-row .btn-ghost[b-jhck927czw] { border-color: #A0522D; color: #A0522D; }
.me--tech          .me-edit-toggle-row .btn-ghost[b-jhck927czw] { border-color: #007BFF; color: #007BFF; }

/* ─── Responsive ─── */
@media (max-width: 900px) {
    .me-theme-grid[b-jhck927czw] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .me-theme-options[b-jhck927czw] { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .me-grid[b-jhck927czw] { grid-template-columns: 1fr; text-align: center; }
    .me-img[b-jhck927czw]  { margin: 0 auto; width: 160px; height: 160px; }
    .me-edit-row[b-jhck927czw] { grid-template-columns: 1fr; }
    .me-theme-grid[b-jhck927czw] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ─── Toggle / panel de edición unificado ─── */
.me-edit-toggle-row[b-jhck927czw] {
    display: flex;
    justify-content: center;
    margin-top: 4px;
}
.me-edit-toggle-row .btn-michi[b-jhck927czw] {
    min-width: 0;
    padding: 14px 28px;
    font-size: clamp(1rem, 1.6vw, 1.2rem);
}

.me-edit-panel[b-jhck927czw] {
    background: rgba(255, 255, 255, 0.08);
    border: 1px dashed rgba(255, 255, 255, 0.25);
    border-radius: 14px;
    padding: 18px;
    display: grid;
    gap: 14px;
    text-align: left;
}
.me-edit-block[b-jhck927czw] {
    display: grid;
    gap: 6px;
}
.me-edit-label[b-jhck927czw] {
    font-size: 0.85rem;
    font-weight: 800;
    color: #ffb4d6;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.me-edit-actions[b-jhck927czw] {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.me-edit-actions .btn-michi[b-jhck927czw] {
    min-width: 160px;
    padding: 12px 24px;
}

/* ─── Vista previa en vivo de la credencial dentro del panel ───
   Reutiliza las clases .cred-preview-stage / .cred-preview-host que
   también usa Step4Credential. Aquí afinamos un poco el tamaño para
   que no rompa el layout del panel de edición (más estrecho que
   la página completa del wizard). */
.me-preview-stage[b-jhck927czw] {
    width: min(320px, 80vw);
    aspect-ratio: 760 / 1080;
    border-radius: 18px;
    border: 2px solid rgba(255, 255, 255, .25);
    background: #fff;
    color: #2e2244;
    position: relative;
    box-shadow: 0 10px 22px rgba(0, 0, 0, .35);
    overflow: hidden;
    margin: 6px auto 4px;
}

/* ─── Sección "Tu credencial" con toggle Frente / Vuelta ───
   Vive siempre visible en /me (no sólo dentro del panel de edición).
   Misma estética que el toggle de Step4Credential para que el
   usuario encuentre la misma affordance en ambas pantallas. */
.me-credential[b-jhck927czw] {
    display: grid;
    gap: 12px;
    margin-top: 4px;
}
.me-credential-head[b-jhck927czw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.cred-side-toggle[b-jhck927czw] {
    display: inline-flex;
    gap: 6px;
    background: rgba(255, 255, 255, .08);
    padding: 4px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .18);
}
.cred-side-btn[b-jhck927czw] {
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .7);
    padding: 6px 14px;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    letter-spacing: .04em;
    transition: background .12s ease, color .12s ease;
}
.cred-side-btn.is-active[b-jhck927czw] {
    background: #ffb4d6;
    color: #5b3a8a;
    box-shadow: 0 4px 12px rgba(255, 180, 214, .45);
}
.cred-side-btn:hover:not(.is-active)[b-jhck927czw] { color: #fff; }

/* El HTML inyectado por credential.js define todos los font-size en px
   pensados para el lienzo nativo 760×1080. Cuando el stage se escala
   con `transform: scale(--cred-scale)` (≈ 0.3 en móvil, ≈ 0.4 en
   desktop), el texto se vuelve ilegible. Multiplicamos por ~2.2 cada
   tamaño dentro del host para compensar: el resultado en pantalla
   queda cercano al tamaño nativo de la credencial real. Usamos
   `!important` porque credential.js los declara en un <style> inline.
   IMPORTANTE: como el HTML se inyecta desde JS, NO lleva el atributo
   de scope de Blazor; necesitamos `::deep` para que la regla atraviese
   el aislamiento de CSS del componente y aplique al árbol inyectado. */
.cred-preview-host[b-jhck927czw]  .pp-title      { font-size: calc(30px * 2.2) !important; line-height: 1 !important; }
.cred-preview-host[b-jhck927czw]  .pp-subtitle   { font-size: calc(10px * 2.2) !important; }
.cred-preview-host[b-jhck927czw]  .pp-type-l     { font-size: calc( 9px * 2.2) !important; }
.cred-preview-host[b-jhck927czw]  .pp-type-v     { font-size: calc(22px * 2.2) !important; line-height: 1 !important; }
.cred-preview-host[b-jhck927czw]  .pp-nick-label,
.cred-preview-host[b-jhck927czw]  .pp-name-label { font-size: calc(10px * 2.2) !important; letter-spacing: .24em !important; }
.cred-preview-host[b-jhck927czw]  .pp-nick       { font-size: calc(32px * 2.2) !important; line-height: 1 !important; }
.cred-preview-host[b-jhck927czw]  .pp-name       { font-size: calc(18px * 2.2) !important; }
.cred-preview-host[b-jhck927czw]  .pp-quote      { font-size: calc(14px * 2.2) !important; padding: 14px 16px !important; }
.cred-preview-host[b-jhck927czw]  .pp-meta-item  { font-size: calc(11px * 2.2) !important; padding: 8px 12px !important; }
.cred-preview-host[b-jhck927czw]  .pp-meta-item span { font-size: calc( 9px * 2.2) !important; }
.cred-preview-host[b-jhck927czw]  .pp-signature span   { font-size: calc( 9px * 2.2) !important; }
.cred-preview-host[b-jhck927czw]  .pp-signature b     { font-size: calc(13px * 2.2) !important; }
.cred-preview-host[b-jhck927czw]  .pp-foot             { font-size: calc(10px * 2.2) !important; }
/* Reverso */
.cred-preview-host[b-jhck927czw]  .pp-cover-h    { font-size: calc(38px * 2.2) !important; line-height: 1 !important; }
.cred-preview-host[b-jhck927czw]  .pp-cover-sub  { font-size: calc(10px * 2.2) !important; }
.cred-preview-host[b-jhck927czw]  .pp-cover-section-h { font-size: calc(10px * 2.2) !important; }
.cred-preview-host[b-jhck927czw]  .pp-row        { font-size: calc(14px * 2.2) !important; padding: 8px 6px !important; }
.cred-preview-host[b-jhck927czw]  .pp-row span   { font-size: calc(10px * 2.2) !important; }
.cred-preview-host[b-jhck927czw]  .pp-passno-l   { font-size: calc( 9px * 2.2) !important; }
.cred-preview-host[b-jhck927czw]  .pp-passno-v   { font-size: calc(18px * 2.2) !important; }
.cred-preview-host[b-jhck927czw]  .pp-back-trace { font-size: calc(10px * 2.2) !important; }

@media (max-width: 600px) {
    .me-edit-actions[b-jhck927czw] {
        flex-direction: column-reverse;
    }
    .me-edit-actions .btn-michi[b-jhck927czw] {
        width: 100%;
    }
    .me-preview-stage[b-jhck927czw] {
        width: min(260px, 88vw);
    }
    /* Toggle de lado: en móvil lo apilamos debajo del título y le
       damos el ancho completo para que sea fácil de pulsar. */
    .me-credential-head[b-jhck927czw] {
        flex-direction: column;
        align-items: stretch;
    }
    .cred-side-toggle[b-jhck927czw] {
        justify-content: center;
    }
    .cred-side-btn[b-jhck927czw] {
        flex: 1 1 0;
        text-align: center;
        padding: 8px 10px;
    }
}

/* ============================================================
   ESTACIONES VISITADAS — bloque nuevo en /me (12 recuadros).
   Distribución 4 columnas × 3 filas en desktop, 2 columnas × 6
   filas en móvil. Cada recuadro = una estación (r1..r12) y se
   llena con su .jpeg cuando el usuario la ha visitado.
   ============================================================ */

.me-stations[b-jhck927czw] {
    display: grid;
    gap: 14px;
    margin-top: 4px;
}

/* Píldora "N / 12" arriba a la derecha, tono rosado kawaii. */
.me-stations-counter[b-jhck927czw] {
    color: #ffb4d6;
    font-weight: 800;
    font-size: 0.95rem;
    background: rgba(255, 180, 214, 0.12);
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 180, 214, 0.30);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}

.me-stations-map[b-jhck927czw] {
    display: grid;
    gap: 8px;
}

.me-stations-map-head[b-jhck927czw] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0 4px;
}

.me-stations-map-title[b-jhck927czw] { font-weight: 800; }
.me-stations-map-count[b-jhck927czw] {
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.55);
}

.me-stations-grid[b-jhck927czw] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

/* Celda individual — aspecto cuadrado (1:1). */
.me-station[b-jhck927czw] {
    position: relative;
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    display: block;
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px dashed rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.45);
    transition: transform .12s ease, border-color .12s ease,
                box-shadow .12s ease, opacity .15s ease;
}
.me-station:hover[b-jhck927czw] {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}

/* Visitada: imagen real + borde sólido. */
.me-station.is-visited[b-jhck927czw] {
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
    opacity: 1;
}
.me-station.is-visited:hover[b-jhck927czw] {
    border-color: #ffb4d6;
    box-shadow: 0 8px 22px rgba(255, 180, 214, 0.35);
}

/* Pendiente: caseta de tren tenue, opacity reducido. */
.me-station.is-pending[b-jhck927czw] {
    opacity: 0.62;
}
.me-station.is-pending:hover[b-jhck927czw] { opacity: 0.92; }

.me-station-img[b-jhck927czw] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.me-station-placeholder[b-jhck927czw] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

.me-station-label[b-jhck927czw] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 6px 8px;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.78) 100%);
    color: #fff;
    font-size: 0.66rem;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── Acentos por tema (igual que me-nick / credential-bio) ───── */
.me--pixel-retro   .me-station.is-visited[b-jhck927czw] { border-color: #F8E71C; box-shadow: 0 0 14px rgba(248,231,28,.25); }
.me--cyberpunk     .me-station.is-visited[b-jhck927czw] { border-color: #00FFFF; box-shadow: 0 0 14px rgba(0,255,255,.30); }
.me--steampunk     .me-station.is-visited[b-jhck927czw] { border-color: #B87333; box-shadow: 0 0 14px rgba(184,115,51,.30); }
.me--medieval      .me-station.is-visited[b-jhck927czw] { border-color: #D4AF37; box-shadow: 0 0 14px rgba(212,175,55,.25); }
.me--scifi         .me-station.is-visited[b-jhck927czw] { border-color: #00FF7F; box-shadow: 0 0 14px rgba(0,255,127,.28); }
.me--kawaii        .me-station.is-visited[b-jhck927czw] { border-color: #FFB7CE; box-shadow: 0 0 14px rgba(255,183,206,.40); }
.me--horror        .me-station.is-visited[b-jhck927czw] { border-color: #C81E1E; box-shadow: 0 0 14px rgba(200,30,30,.32); }
.me--ocean         .me-station.is-visited[b-jhck927czw] { border-color: #40E0D0; box-shadow: 0 0 14px rgba(64,224,208,.30); }
.me--desert        .me-station.is-visited[b-jhck927czw] { border-color: #A0522D; box-shadow: 0 0 14px rgba(160,82,45,.30); }
.me--tech          .me-station.is-visited[b-jhck927czw] { border-color: #007BFF; box-shadow: 0 0 14px rgba(0,123,255,.30); }

/* Responsive: en móvil 2 cols para que las cards respiren. */
@media (max-width: 600px) {
    .me-stations-grid[b-jhck927czw] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .me-stations-map-head[b-jhck927czw] { font-size: 0.7rem; }
    .me-station-label[b-jhck927czw]     { font-size: 0.62rem; padding: 5px 6px; }
}
/* /Pages/MichicafeCore.razor.rz.scp.css */
/* Michicafé — foro con muro de publicaciones + composer.
   Mismo lenguaje visual que el resto del UserLayout: rosa/lila,
   glass, kawaii. El composer y los posts son cards con borde
   punteado (como el welcome-card). Responsive: composer a
   full-width en mobile, posts con avatar más chico. */

.michicafe[b-9yiibcf3ko] {
    --cafe-pink:   #ff8fb1;
    --cafe-pink-2: #ff6a99;
    --cafe-purple: #c69bff;
    --cafe-cream:  #fff5fa;
    --cafe-ink:    #5b3a8a;
    --cafe-ink-2:  #2e2244;
    --cafe-border: #ffb4d6;

    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(16px, 3vw, 28px);
    padding: clamp(8px, 3vw, 24px) 0;
}

/* ─── HERO (título + tagline) ────────────────────────────────────── */

.michicafe-title[b-9yiibcf3ko] {
    /* Aprovechamos los estilos existentes de welcome-title. */
    margin: 0;
}
.michicafe-emoji[b-9yiibcf3ko] {
    display: inline-block;
    margin-left: 8px;
    animation: cafe-emoji-spin-b-9yiibcf3ko 6s ease-in-out infinite;
    transform-origin: 70% 60%;
}
@keyframes cafe-emoji-spin-b-9yiibcf3ko {
    0%, 100% { transform: rotate(-8deg); }
    50%      { transform: rotate(14deg); }
}
.michicafe-tagline[b-9yiibcf3ko] {
    margin: 0 auto 18px;
    max-width: 640px;
}

/* ─── Estado LOCKED (no llegó a MIAUXCUAC) ─────────────────────── */

.michicafe-locked[b-9yiibcf3ko] {
    text-align: center;
    padding: 28px 18px;
    background: rgba(255, 245, 250, 0.7);
    border: 2px dashed var(--cafe-border);
    border-radius: 22px;
    margin: 18px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.michicafe-locked-icon[b-9yiibcf3ko] {
    font-size: 3rem;
    line-height: 1;
    filter: drop-shadow(0 4px 8px rgba(255, 106, 153, .35));
}
.michicafe-locked-title[b-9yiibcf3ko] {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--cafe-pink-2);
}
.michicafe-locked-body[b-9yiibcf3ko] {
    margin: 0;
    color: var(--cafe-ink-2);
    max-width: 460px;
    line-height: 1.5;
}
.michicafe-locked-body a[b-9yiibcf3ko] {
    color: var(--cafe-pink-2);
    font-weight: 800;
    text-decoration: underline;
}
.michicafe-locked-cta[b-9yiibcf3ko] {
    display: inline-block;
    margin-top: 6px;
    background: linear-gradient(180deg, var(--cafe-pink) 0%, var(--cafe-pink-2) 100%);
    color: #ffffff;
    padding: 10px 22px;
    border-radius: 999px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(255, 106, 153, .4);
    transition: transform 140ms ease, box-shadow 140ms ease;
}
.michicafe-locked-cta:hover[b-9yiibcf3ko] {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(255, 106, 153, .5);
}

/* ─── Status (loading / error genérico) ─────────────────────────── */

.michicafe-status[b-9yiibcf3ko] {
    text-align: center;
    margin: 24px 0;
    color: var(--cafe-ink);
    font-weight: 600;
}
.msg-error[b-9yiibcf3ko] {
    color: #b00020;
}

/* ─── COMPOSER ──────────────────────────────────────────────────── */

.michicafe-composer[b-9yiibcf3ko] {
    width: 100%;
    background: rgba(255, 255, 255, 0.85);
    border: 2px dashed var(--cafe-border);
    border-radius: 22px;
    padding: 16px 18px;
    margin-bottom: 24px;
    box-shadow:
        0 6px 20px -8px rgba(176, 130, 200, .25),
        inset 0 0 0 1px rgba(255, 255, 255, .6);
}
.michicafe-composer-label[b-9yiibcf3ko] {
    display: block;
    font-weight: 800;
    color: var(--cafe-pink-2);
    font-size: 0.95rem;
    margin-bottom: 8px;
}
.michicafe-composer-input[b-9yiibcf3ko] {
    width: 100%;
    box-sizing: border-box;
    border: 1.5px solid var(--cafe-border);
    border-radius: 14px;
    padding: 10px 14px;
    font-family: inherit;
    font-size: 1rem;
    resize: vertical;
    min-height: 80px;
    background: #ffffff;
    color: var(--cafe-ink-2);
    transition: border-color 140ms ease, box-shadow 140ms ease;
}
.michicafe-composer-input:focus[b-9yiibcf3ko] {
    outline: none;
    border-color: var(--cafe-pink);
    box-shadow: 0 0 0 4px rgba(255, 143, 177, 0.18);
}
.michicafe-composer-input:disabled[b-9yiibcf3ko] {
    opacity: 0.6;
    cursor: not-allowed;
}
.michicafe-composer-bar[b-9yiibcf3ko] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    gap: 12px;
}
.michicafe-composer-count[b-9yiibcf3ko] {
    font-size: 0.82rem;
    color: var(--cafe-ink);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.michicafe-composer-count.is-over[b-9yiibcf3ko] {
    color: #b00020;
}
.michicafe-composer-submit[b-9yiibcf3ko] {
    appearance: none;
    border: none;
    background: linear-gradient(180deg, var(--cafe-pink) 0%, var(--cafe-pink-2) 100%);
    color: #ffffff;
    font-weight: 800;
    font-size: 0.95rem;
    padding: 10px 22px;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(255, 106, 153, 0.45);
    transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}
.michicafe-composer-submit:hover:not(:disabled)[b-9yiibcf3ko] {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 8px 16px rgba(255, 106, 153, 0.55);
}
.michicafe-composer-submit:active:not(:disabled)[b-9yiibcf3ko] { transform: translateY(0); }
.michicafe-composer-submit:disabled[b-9yiibcf3ko] {
    opacity: 0.55;
    cursor: not-allowed;
    filter: grayscale(0.4);
}
.michicafe-composer-error[b-9yiibcf3ko] {
    margin: 10px 0 0;
    color: #b00020;
    font-size: 0.9rem;
}

/* ─── EMPTY state ───────────────────────────────────────────────── */

.michicafe-empty[b-9yiibcf3ko] {
    text-align: center;
    padding: 22px 18px;
    background: rgba(255, 245, 250, 0.6);
    border-radius: 18px;
    border: 1.5px dashed var(--cafe-border);
}
.michicafe-empty-img[b-9yiibcf3ko] {
    width: 140px;
    height: 140px;
    object-fit: contain;
    margin-bottom: 10px;
    filter: drop-shadow(0 6px 14px rgba(198, 155, 255, .3));
}
.michicafe-empty-title[b-9yiibcf3ko] {
    margin: 0 0 4px;
    font-weight: 800;
    color: var(--cafe-pink-2);
    font-size: 1.05rem;
}
.michicafe-empty-body[b-9yiibcf3ko] {
    margin: 0;
    color: var(--cafe-ink-2);
}

/* ─── FEED ─────────────────────────────────────────────────────── */

.michicafe-feed[b-9yiibcf3ko] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.michicafe-post[b-9yiibcf3ko] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 18px;
    border: 1.5px solid rgba(255, 180, 214, 0.65);
    box-shadow: 0 4px 12px -6px rgba(176, 130, 200, .22);
    transition: transform 140ms ease, box-shadow 140ms ease;
    align-items: start;
}
.michicafe-post:hover[b-9yiibcf3ko] {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -6px rgba(176, 130, 200, .32);
}
/* Sutil highlight para mis posts */
.michicafe-post.is-mine[b-9yiibcf3ko] {
    background: linear-gradient(135deg, rgba(255, 233, 247, 0.95) 0%, rgba(255, 255, 255, 0.95) 100%);
    border-color: var(--cafe-pink);
}

.michicafe-post-avatar[b-9yiibcf3ko] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background:
        repeating-conic-gradient(#f0e8ff 0% 25%, #fff 0% 50%) 0 0 / 8px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(176, 130, 200, .25);
}
.michicafe-post-avatar img[b-9yiibcf3ko] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.michicafe-avatar-fallback[b-9yiibcf3ko] {
    font-size: 1.5rem;
    line-height: 1;
}
/* Avatar del admin: fondo violeta + borde discontinuo para distinguirlo
   de un michi cualquiera (que siempre es rosa pastel). Sólo aparece
   cuando is_admin_post=true, así que el lector no tiene que adivinar. */
.michicafe-avatar-admin[b-9yiibcf3ko] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 30% 30%, #f1e1ff 0%, #d9c2ff 60%, #c69bff 100%);
    border-radius: 50%;
    font-size: 1.35rem;
}

.michicafe-post-body[b-9yiibcf3ko] {
    min-width: 0; /* permite que el texto wrapee dentro del grid */
}
.michicafe-post-head[b-9yiibcf3ko] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.michicafe-post-author[b-9yiibcf3ko] {
    font-weight: 800;
    color: var(--cafe-ink);
    font-size: 0.98rem;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
/* Badge "Admin" al lado del nickname, en violeta para que matchee el
   avatar de escudo y no parezca parte del nombre. */
.michicafe-post-badge[b-9yiibcf3ko] {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #a06bda 0%, #7a3fc8 100%);
    box-shadow: 0 1px 4px -1px rgba(122, 63, 200, .55);
    vertical-align: middle;
}
.michicafe-post-time[b-9yiibcf3ko] {
    font-size: 0.78rem;
    color: #a08bc4;
    font-weight: 600;
}
.michicafe-post-content[b-9yiibcf3ko] {
    margin: 0;
    color: var(--cafe-ink-2);
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.michicafe-post-delete[b-9yiibcf3ko] {
    appearance: none;
    background: transparent;
    border: 1.5px solid rgba(176, 130, 200, .35);
    color: #a08bc4;
    border-radius: 999px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 0.9rem;
    align-self: start;
    flex-shrink: 0;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease,
                transform 120ms ease;
}
.michicafe-post-delete:hover:not(:disabled)[b-9yiibcf3ko] {
    background: #ffe5f1;
    color: var(--cafe-pink-2);
    border-color: var(--cafe-pink-2);
    transform: scale(1.08);
}
.michicafe-post-delete:disabled[b-9yiibcf3ko] { opacity: 0.6; cursor: not-allowed; }

/* ─── Mobile ────────────────────────────────────────────────────── */

@media (max-width: 600px) {
    .michicafe-tagline[b-9yiibcf3ko] { font-size: 0.95rem; }

    .michicafe-composer[b-9yiibcf3ko] {
        padding: 12px 12px;
        border-radius: 18px;
    }
    .michicafe-composer-input[b-9yiibcf3ko] { font-size: 0.95rem; }

    .michicafe-post[b-9yiibcf3ko] {
        grid-template-columns: auto 1fr;
        gap: 10px;
        padding: 12px 12px;
    }
    .michicafe-post-avatar[b-9yiibcf3ko] {
        width: 40px; height: 40px;
    }
    /* El botón delete se acomoda en una segunda fila, alineado a la
       derecha, para no chocar con el avatar en mobile. */
    .michicafe-post-delete[b-9yiibcf3ko] {
        grid-column: 2 / 3;
        justify-self: end;
        width: auto;
        padding: 4px 12px;
        height: 28px;
        font-size: 0.78rem;
    }
}

/* ─── Posts oficiales del admin (IsAdminPost = true) ──────────────── */
/* Sutil acento violeta: borde izquierdo más grueso y fondo levemente
   lavanda. Diferencia "el admin habló" de "un niño publicó" sin
   competir visualmente con el estilo rosa pastel del feed normal. */
.michicafe-post.is-from-admin[b-9yiibcf3ko] {
    border-left: 4px solid #b48bff;
    background:
        linear-gradient(180deg, rgba(248, 240, 255, .65) 0%, rgba(255, 255, 255, .85) 60%);
    box-shadow:
        0 2px 8px -4px rgba(122, 63, 200, .15),
        inset 0 1px 0 rgba(255, 255, 255, .9);
}

@media (max-width: 600px) {
    .michicafe-post-badge[b-9yiibcf3ko] {
        font-size: 0.58rem;
        padding: 1px 6px;
    }
}
/* /Pages/PiumPiumMiau.razor.rz.scp.css */
/* Pium Pium Miau — estilos scoped */

.ppm-page[b-ic8z7vvn16] {
    padding: 12px;
    display: flex;
    justify-content: center;
}
.ppm-card[b-ic8z7vvn16] {
    width: min(960px, 100%);
    background: #ffffff;
    border: 1px solid #ffb4d6;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 6px 18px -6px rgba(120, 60, 130, 0.18);
    min-height: 520px;
    display: flex;
    flex-direction: column;
}
.ppm-loading[b-ic8z7vvn16] {
    text-align: center;
    color: #7a5b8a;
    padding: 60px 0;
    font-weight: 600;
}

/* ─── Lobby ────────────────────────────────────────────────────── */
.ppm-lobby[b-ic8z7vvn16] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 8px 0 16px;
}
.ppm-lobby-title[b-ic8z7vvn16] {
    margin: 0;
    color: #5b3a8a;
    font-size: clamp(1.5rem, 3vw, 1.9rem);
}
.ppm-lobby-sub[b-ic8z7vvn16] {
    margin: 0;
    color: #7a5b8a;
    font-size: 0.95rem;
    text-align: center;
}
.ppm-lobby-list[b-ic8z7vvn16] {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ppm-lobby-list li[b-ic8z7vvn16] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border: 1px solid #ffd1e6;
    border-radius: 10px;
    background: #fff7fc;
    font-weight: 600;
    color: #5b3a8a;
}
.ppm-lobby-list li.is-ready[b-ic8z7vvn16] {
    background: #e8f7e0;
    border-color: #a9d996;
}
.ppm-lobby-empty[b-ic8z7vvn16] {
    color: #9989aa;
    font-style: italic;
    justify-content: center !important;
}
.ppm-lobby-state[b-ic8z7vvn16] {
    font-size: 0.85rem;
    color: #7a5b8a;
}
.ppm-lobby-list li.is-ready .ppm-lobby-state[b-ic8z7vvn16] { color: #3f7a2c; }
.ppm-lobby-actions[b-ic8z7vvn16] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}
.ppm-lobby-hint[b-ic8z7vvn16] {
    color: #9989aa;
    font-size: 0.85rem;
    margin: 0;
}
.ppm-lobby-countdown[b-ic8z7vvn16] {
    color: #ff6a99;
    font-weight: 800;
    font-size: 1.1rem;
    margin: 0;
}

/* ─── Game / canvas ────────────────────────────────────────────── */
/* El canvas es portrait (9:16) para llenar pantallas verticales de
   móvil. La cámara sigue al jugador local y se clampa a los bordes
   del mundo (1080×1920). */
.ppm-game[b-ic8z7vvn16] {
    position: relative;
    width: 100%;
    max-width: 480px;
    aspect-ratio: 9 / 16;
    max-height: 80vh;
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
    background: #fde7f3;
    touch-action: none;
    user-select: none;
}
.ppm-canvas[b-ic8z7vvn16] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.ppm-hud[b-ic8z7vvn16] {
    position: absolute;
    top: 8px; left: 8px; right: 8px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    pointer-events: none;
    gap: 10px;
    flex-wrap: wrap;
}
.ppm-hud-me[b-ic8z7vvn16], .ppm-hud-opp[b-ic8z7vvn16] {
    background: rgba(60, 20, 80, 0.78);
    color: #fff;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.82rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    max-width: 180px;
}
.ppm-hud-name[b-ic8z7vvn16] {
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ppm-hud-hp[b-ic8z7vvn16] {
    display: inline-flex;
    gap: 2px;
    font-size: 0.95rem;
    line-height: 1;
}
.ppm-heart.is-on[b-ic8z7vvn16]  { color: #ff6a99; }
.ppm-heart.is-off[b-ic8z7vvn16] { color: rgba(255,255,255,0.4); }
.ppm-hud-score[b-ic8z7vvn16] {
    font-weight: 800;
    color: #ffd1e6;
    font-size: 0.95rem;
}
.ppm-hud-respawn[b-ic8z7vvn16] {
    color: #ffd1e6;
    font-size: 0.78rem;
    font-style: italic;
}
.ppm-hud-others[b-ic8z7vvn16] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
}
.ppm-hud-mini[b-ic8z7vvn16] { font-size: 0.78rem; opacity: 0.92; }

.ppm-countdown[b-ic8z7vvn16] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(2.5rem, 8vw, 5rem);
    font-weight: 900;
    color: #fff;
    text-shadow: 0 0 16px rgba(255, 106, 153, 0.9), 0 4px 0 #5b3a8a;
    pointer-events: none;
    letter-spacing: 0.04em;
}

/* ─── Controles (joystick izquierdo: mover · joystick derecho: apuntar+disparar) */
.ppm-controls[b-ic8z7vvn16] {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
    gap: 12px;
}
.ppm-joystick[b-ic8z7vvn16] {
    pointer-events: auto;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    border: 2px solid rgba(91, 58, 138, 0.45);
    position: relative;
    backdrop-filter: blur(2px);
}
/* El joystick derecho tiene un acento rojizo para diferenciarlo
   del izquierdo (que es rosado/rosa) y reforzar que "dispara". */
.ppm-joystick-aim[b-ic8z7vvn16] {
    border-color: rgba(201, 38, 106, 0.55);
    background: rgba(255, 245, 248, 0.5);
}
.ppm-joystick-knob[b-ic8z7vvn16] {
    position: absolute;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(180deg, #ff8fb1 0%, #ff6a99 100%);
    border: 2px solid #fff;
    box-shadow: 0 4px 10px -2px rgba(120, 60, 130, 0.5);
    left: 50%; top: 50%;
    margin-left: -28px;
    margin-top: -28px;
    pointer-events: none;
    transition: transform 0.05s linear;
}
/* Knob del joystick derecho: rojo cereza para que se vea claro
   que ese lado es "disparo". */
.ppm-joystick-aim .ppm-joystick-knob[b-ic8z7vvn16] {
    background: linear-gradient(180deg, #ff7aa3 0%, #c9266a 100%);
    box-shadow: 0 4px 12px -2px rgba(201, 38, 106, 0.55);
}
.ppm-joystick-hint[b-ic8z7vvn16] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(91, 58, 138, 0.55);
    font-size: 0.78rem;
    font-weight: 700;
    pointer-events: none;
    text-align: center;
}
.ppm-joystick-aim .ppm-joystick-hint[b-ic8z7vvn16] {
    color: rgba(201, 38, 106, 0.6);
}

/* ─── Match end ───────────────────────────────────────────────── */
.ppm-end[b-ic8z7vvn16] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 16px 0;
    text-align: center;
}
.ppm-end-title[b-ic8z7vvn16] {
    margin: 0;
    color: #5b3a8a;
    font-size: clamp(1.4rem, 3.5vw, 2rem);
}
.ppm-end-title b[b-ic8z7vvn16] { color: #ff6a99; }
.ppm-end-scores[b-ic8z7vvn16] {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
    width: 100%;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ppm-end-scores li[b-ic8z7vvn16] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px;
    border: 1px solid #ffd1e6;
    border-radius: 8px;
    background: #fff7fc;
    color: #5b3a8a;
    font-weight: 600;
}
.ppm-end-scores li span[b-ic8z7vvn16] { color: #ff6a99; font-weight: 800; }

/* ─── Responsive: en pantallas chicas achicamos los joysticks para
       que el mundo (1080×1920) no quede tapado por los controles. */
@media (max-width: 560px) {
    .ppm-joystick[b-ic8z7vvn16]      { width: 96px; height: 96px; }
    .ppm-joystick-knob[b-ic8z7vvn16] { width: 38px; height: 38px; margin-left: -19px; margin-top: -19px; }
    .ppm-hud-me[b-ic8z7vvn16], .ppm-hud-opp[b-ic8z7vvn16] { max-width: 130px; font-size: 0.72rem; }
}

/* ─── Pantalla de cuenta regresiva — ocupa toda la tarjeta, muestra
       la lista de listos y el mensaje del server ("Empieza en 3s…").
       Se reemplaza por .ppm-game cuando Phase=="in-match". *@ */
.ppm-countdown-screen[b-ic8z7vvn16] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 28px 18px;
    min-height: 320px;
    text-align: center;
}
.ppm-countdown-title[b-ic8z7vvn16] {
    margin: 0;
    color: #5b3a8a;
    font-size: 1.4rem;
    font-weight: 700;
}
.ppm-countdown-big[b-ic8z7vvn16] {
    font-size: 2.2rem;
    font-weight: 800;
    color: #ff6a99;
    background: linear-gradient(135deg, #fff7fc, #ffe7f1);
    border: 2px solid #ffd1e6;
    border-radius: 18px;
    padding: 18px 28px;
    min-width: 220px;
    box-shadow: 0 8px 20px rgba(255, 106, 153, 0.18);
    animation: ppm-countdown-pulse-b-ic8z7vvn16 1s ease-in-out infinite;
}
@keyframes ppm-countdown-pulse-b-ic8z7vvn16 {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
}
.ppm-countdown-list[b-ic8z7vvn16] {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ppm-countdown-list li[b-ic8z7vvn16] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px;
    border: 1px solid #ffd1e6;
    border-radius: 10px;
    background: #fff7fc;
    color: #5b3a8a;
    font-weight: 600;
}
.ppm-countdown-nick[b-ic8z7vvn16] { font-weight: 700; }
.ppm-countdown-state[b-ic8z7vvn16] { color: #ff6a99; font-weight: 600; }

/* ─── Overlay de "Reconectando…" — aparece cuando SignalR pierde la
       conexión y WithAutomaticReconnect está reintentando. Se posiciona
       sobre el canvas en una capa flotante no-bloqueante (pointer-events
       :none) para que el usuario pueda seguir viendo el último frame
       pintado mientras llega la reconexión. */
.ppm-reconnect[b-ic8z7vvn16] {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(40, 0, 60, 0.78);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 12px rgba(40, 0, 60, 0.35);
    pointer-events: none;
    z-index: 5;
}
.ppm-reconnect-dot[b-ic8z7vvn16] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff6a99;
    animation: ppm-reconnect-pulse-b-ic8z7vvn16 1.2s ease-in-out infinite;
}
@keyframes ppm-reconnect-pulse-b-ic8z7vvn16 {
    0%, 100% { opacity: 0.35; transform: scale(0.85); }
    50%      { opacity: 1.0;  transform: scale(1.1);  }
}

/* ─── Overlay de inactividad ────────────────────────────────────────
   Cubre la tarjeta cuando el usuario lleva varios segundos sin tocar
   nada. Modal-ish: backdrop oscurecido + tarjeta centrada. Z-index
   mayor que el de los joysticks y el HUD para garantizar que tape
   todo lo de abajo. */
.ppm-inactive-overlay[b-ic8z7vvn16] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 5, 30, 0.62);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 20;
    animation: ppm-inactive-fade-b-ic8z7vvn16 0.25s ease-out;
}
.ppm-inactive-card[b-ic8z7vvn16] {
    background: linear-gradient(180deg, #fff8fc 0%, #ffe9f4 100%);
    color: #4a1d3d;
    padding: 22px 28px 26px;
    border-radius: 20px;
    box-shadow: 0 12px 36px rgba(40, 0, 60, 0.45);
    text-align: center;
    max-width: 320px;
    width: calc(100% - 48px);
    border: 2px solid #ff7aaf;
}
.ppm-inactive-emoji[b-ic8z7vvn16] {
    font-size: 2.6rem;
    margin: 0 0 6px;
}
.ppm-inactive-msg[b-ic8z7vvn16] {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 4px;
}
.ppm-inactive-countdown[b-ic8z7vvn16] {
    font-size: 0.95rem;
    margin: 0 0 16px;
    color: #7a3556;
}
.ppm-inactive-countdown b[b-ic8z7vvn16] {
    color: #d63384;
    font-size: 1.4rem;
    font-weight: 800;
    padding: 0 4px;
}
.ppm-inactive-card .btn-michi[b-ic8z7vvn16] {
    width: 100%;
    font-size: 1rem;
    /* Touch target ≥44px WCAG 2.5.5. font-size:1rem + line-height:1.4
       ≈ 22px → con padding 12px+12px llegamos a ~46px de alto. */
    padding: 12px 16px;
    min-height: 44px;
}
.ppm-inactive-leave[b-ic8z7vvn16] {
    /* Botón secundario — "Salir" para AFK. Sin estilo de .btn-michi
       porque no es la acción primaria; lo queremos visible pero
       discreto. */
    display: block;
    width: 100%;
    margin: 8px 0 0;
    padding: 12px 16px;
    min-height: 44px;
    background: transparent;
    border: 1px solid #ff7aaf;
    color: #c9266a;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease;
}
.ppm-inactive-leave:hover[b-ic8z7vvn16] {
    background: rgba(255, 122, 175, 0.12);
}
.ppm-inactive-leave:focus-visible[b-ic8z7vvn16] {
    outline: 2px solid #c9266a;
    outline-offset: 2px;
}
@keyframes ppm-inactive-fade-b-ic8z7vvn16 {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Respeta prefers-reduced-motion: usuarios con vestibular disorders
   ven el overlay aparecer instantáneamente en vez de fade-in. */
@media (prefers-reduced-motion: reduce) {
    .ppm-inactive-overlay[b-ic8z7vvn16] { animation: none; }
    .ppm-countdown-big[b-ic8z7vvn16]    { animation: none; }
    .ppm-reconnect-dot[b-ic8z7vvn16]    { animation: none; }
}

/* ─── FAB "Salir" flotante (dentro del área de juego) ───────────────
   Visible durante lobby/countdown/match para que el usuario tenga una
   salida clara sin importar en qué fase esté. Posicionado abajo-derecha
   para no estorbar los joysticks (que están abajo-izquierda y abajo-
   derecha del footer de controles). En escritorio queda sobre el
   canvas; en móvil queda sobre los controles pero como el FAB está
   en el game-canvas (no en ppm-controls) no se superpone al knob.

   Touch target: WCAG 2.5.5 pide ≥44×44 px. Con padding 10px+10px y
   font-size 0.78rem (≈12.5px) + line-height 1.4, el alto real es
   ~37.5px. Sumamos 8px verticales de padding extra para llegar a 44. */
.ppm-exit-fab[b-ic8z7vvn16] {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 6;
    background: rgba(40, 0, 60, 0.82);
    color: #fff;
    border: 1px solid rgba(255, 122, 175, 0.5);
    border-radius: 999px;
    padding: 14px 16px;
    min-height: 44px;
    min-width: 44px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(40, 0, 60, 0.35);
    transition: background 0.15s ease, transform 0.15s ease;
    font-family: inherit;
}
.ppm-exit-fab:hover[b-ic8z7vvn16] {
    background: rgba(60, 0, 80, 0.95);
    transform: scale(1.04);
}
.ppm-exit-fab:active[b-ic8z7vvn16] {
    transform: scale(0.97);
}
.ppm-exit-fab:focus-visible[b-ic8z7vvn16] {
    outline: 2px solid #ff7aaf;
    outline-offset: 2px;
}

/* ─── Gate de MIAUXQUEÑA ─────────────────────────────────────────────
   Cuando el usuario todavía no llegó a la primera estación del Mapa 3,
   mostramos un panel explicativo en vez del juego. Misma estética que
   el .michicafe-locked para que la familia de pantallas "todavía no
   se abrió" sea visualmente coherente. */
.ppm-locked[b-ic8z7vvn16] {
    align-items: center;
    text-align: center;
    gap: 14px;
    padding: 36px 20px 32px;
}
.ppm-locked-emoji[b-ic8z7vvn16] {
    font-size: 3rem;
    margin: 0;
    line-height: 1;
}
.ppm-locked-title[b-ic8z7vvn16] {
    margin: 0;
    color: #5b3a8a;
    font-size: clamp(1.4rem, 3.5vw, 1.8rem);
}
.ppm-locked-body[b-ic8z7vvn16] {
    margin: 0;
    color: #5b3a8a;
    font-size: 1rem;
    line-height: 1.5;
    max-width: 360px;
}
.ppm-locked-body b[b-ic8z7vvn16] {
    color: #ff6a99;
}
.ppm-locked-cta[b-ic8z7vvn16] {
    display: inline-block;
    margin-top: 6px;
    padding: 12px 20px;
    min-height: 44px;            /* WCAG 2.5.5 touch target */
    background: linear-gradient(180deg, #ff8fb1 0%, #ff6a99 100%);
    color: #fff;
    text-decoration: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 0 4px 10px -2px rgba(255, 106, 153, 0.45);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ppm-locked-cta:hover[b-ic8z7vvn16] {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px -2px rgba(255, 106, 153, 0.55);
}
.ppm-locked-cta:focus-visible[b-ic8z7vvn16] {
    outline: 2px solid #5b3a8a;
    outline-offset: 2px;
}
/* /Pages/Play.razor.rz.scp.css */
/* ─── Page wrapper ──────────────────────────────────────────────── */
.play-page[b-bsgya7z7wu] {
    display: flex;
    justify-content: center;
    padding: 8px 0;
}

.play-card[b-bsgya7z7wu] {
    /* hereda .welcome-card.wide del global (max 820px) */
}

.play-title[b-bsgya7z7wu] {
    text-align: center;
    margin-bottom: 18px;
}
.play-title .title-pre[b-bsgya7z7wu] { color: #5b3a8a; }
.play-title .brand-img[b-bsgya7z7wu] { width: 150px; }

/* ─── Slider de mapas ───────────────────────────────────────────── */
.play-map-slider[b-bsgya7z7wu] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 6px 0 18px;
}

.play-map-pill[b-bsgya7z7wu] {
    appearance: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid #e8c0e0;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #fdf2fb 100%);
    color: #5b3a8a;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background-color 140ms ease, border-color 140ms ease,
                box-shadow 140ms ease, transform 80ms ease;
}
.play-map-pill:hover[b-bsgya7z7wu] {
    border-color: #ffb4d6;
    background: linear-gradient(180deg, #fff7fb 0%, #ffe5f1 100%);
}
.play-map-pill.is-active[b-bsgya7z7wu] {
    background: linear-gradient(180deg, #ff6a99 0%, #e25485 100%);
    color: #ffffff;
    border-color: #e25485;
    box-shadow: 0 8px 22px -10px rgba(255, 106, 153, 0.6);
}
.play-map-pill-num[b-bsgya7z7wu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.6);
    color: #5b3a8a;
    font-weight: 800;
    font-size: 1.05rem;
    flex: 0 0 auto;
}
.play-map-pill.is-active .play-map-pill-num[b-bsgya7z7wu] {
    background: rgba(255,255,255,0.25);
    color: #ffffff;
}
.play-map-pill-text[b-bsgya7z7wu] { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.play-map-pill-text strong[b-bsgya7z7wu] { font-size: 0.95rem; }
.play-map-pill-text small[b-bsgya7z7wu]  { font-size: 0.74rem; opacity: 0.85; }

/* ─── Escenario del mapa ────────────────────────────────────────── */
/* NOTA: los estilos SVG (fill, stroke, etc.) viven en
   wwwroot/css/components.css porque Blazor CSS isolation no llega a
   los elementos generados vía MarkupString. Aquí sólo dejamos los
   estilos del contenedor. */
.play-map-stage[b-bsgya7z7wu] {
    background: #ffffff;
    border: 2px solid #b89bff;
    border-radius: 18px;
    padding: 12px;
    box-shadow: inset 0 0 30px rgba(91,58,138,0.06),
                0 8px 24px -12px rgba(91,58,138,0.25);
    overflow: hidden;
}
.play-map-svg[b-bsgya7z7wu] {
    width: 100%;
    height: auto;
    display: block;
    user-select: none;
}

/* Etiqueta del periodo (encima del escenario, debajo del SVG) */
.play-map-period[b-bsgya7z7wu] {
    margin: 0 0 8px;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 800;
    color: #5b3a8a;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ─── Tren (animación CSS, no propiedades SVG — sí scoped) ─── */
.play-train[b-bsgya7z7wu] {
    transition: transform 700ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
.play-train-placeholder-text[b-bsgya7z7wu] {
    font-size: 24px;
    fill: #5b3a8a;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ─── Estado (posición / mapa / %) ──────────────────────────────── */
.play-status[b-bsgya7z7wu] {
    margin-top: 16px;
    padding: 14px 16px;
    background: linear-gradient(180deg, #fff7fb 0%, #f7e6f5 100%);
    border: 1px solid #e8c0e0;
    border-radius: 14px;
}
.play-status-row[b-bsgya7z7wu] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 10px;
}
.play-status-item[b-bsgya7z7wu] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: center;
}
.play-status-label[b-bsgya7z7wu] {
    font-size: 0.72rem;
    color: #9989aa;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}
.play-status-value[b-bsgya7z7wu] {
    color: #ff6a99;
    font-size: 1.2rem;
}
.play-progress-track[b-bsgya7z7wu] {
    background: #ffe4ef;
    border-radius: 999px;
    overflow: hidden;
    height: 10px;
    border: 1px solid #ffb4d6;
}
.play-progress-fill[b-bsgya7z7wu] {
    background: linear-gradient(90deg, #ff8fb1 0%, #ff6a99 100%);
    height: 100%;
    transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Banner de auto-switch de mapa ─────────────────────────────
   Aparece cuando el mapa actual quedó completo y avanzamos solo al
   siguiente. Mismo gradiente rosa que el badge de puntos totales
   para mantener el "idioma visual" — es una celebracion menor:
   el festejo grande es el modal de estación, este es el "ya
   empezaste el siguiente mapa". */
.play-autoswitch[b-bsgya7z7wu] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 4px;
    padding: 10px 14px;
    border-radius: 14px;
    background:
        linear-gradient(180deg, #fff0f7 0%, #ffe1ec 100%);
    border: 1.5px solid #ffb4d6;
    box-shadow:
        0 4px 10px -4px rgba(255, 106, 153, 0.35),
        inset 0 0 0 1px rgba(255, 255, 255, .65);
    animation: play-autoswitch-pop-b-bsgya7z7wu .35s ease-out;
}
@keyframes play-autoswitch-pop-b-bsgya7z7wu {
    0%   { transform: translateY(-6px) scale(.97); opacity: 0; }
    100% { transform: translateY(0)    scale(1);   opacity: 1; }
}
.play-autoswitch-icon[b-bsgya7z7wu] {
    font-size: 1.4rem;
    line-height: 1;
    animation: play-autoswitch-rocket-b-bsgya7z7wu 1.4s ease-in-out infinite;
    display: inline-block;
    transform-origin: 50% 50%;
}
@keyframes play-autoswitch-rocket-b-bsgya7z7wu {
    0%, 100% { transform: translateY(0)   rotate(-6deg); }
    50%      { transform: translateY(-4px) rotate(6deg); }
}
.play-autoswitch-text[b-bsgya7z7wu] {
    flex: 1 1 auto;
    color: #b13b6a;
    font-weight: 800;
    font-size: 0.95rem;
}
.play-autoswitch-close[b-bsgya7z7wu] {
    appearance: none;
    background: transparent;
    border: 1.5px solid transparent;
    color: #b13b6a;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.85rem;
    flex-shrink: 0;
    transition: background 140ms ease, border-color 140ms ease;
}
.play-autoswitch-close:hover[b-bsgya7z7wu] {
    background: #ffe5f1;
    border-color: #ffb4d6;
}

/* ─── Puntos totales (badge destacado entre los stats y la barra) ─
   Aparece SIEMPRE que el panel está visible (no se oculta cuando el
   total es 0) — un mishi que recién empieza necesita ver "0 pts"
   explícito para entender que sumar boletos = sumar puntos totales. */
.play-status-total[b-bsgya7z7wu] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 6px 0 12px;
    padding: 10px 14px;
    border-radius: 14px;
    background:
        linear-gradient(180deg, #fff0f7 0%, #ffe1ec 100%);
    border: 1.5px solid #ffb4d6;
    box-shadow:
        0 4px 10px -4px rgba(255, 106, 153, 0.35),
        inset 0 0 0 1px rgba(255, 255, 255, .65);
    text-align: center;
}
.play-status-total-icon[b-bsgya7z7wu] {
    font-size: 1.3rem;
    line-height: 1;
    /* pequeño "brillo" giratorio para que llame la atención sin
       distraer del resto del panel. */
    animation: play-status-total-shine-b-bsgya7z7wu 3.6s ease-in-out infinite;
    display: inline-block;
    transform-origin: 50% 50%;
}
@keyframes play-status-total-shine-b-bsgya7z7wu {
    0%, 100% { transform: rotate(0deg)   scale(1); }
    50%      { transform: rotate(15deg)  scale(1.12); }
}
.play-status-total-label[b-bsgya7z7wu] {
    font-size: 0.72rem;
    color: #b13b6a;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 800;
}
.play-status-total-value[b-bsgya7z7wu] {
    color: #ff6a99;
    font-size: 1.45rem;
    font-weight: 900;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.play-status-total-breakdown[b-bsgya7z7wu] {
    font-size: 0.78rem;
    color: #8a78a8;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    /* El breakdown puede ser largo en pantallas chicas: que se
       acomode abajo en mobile sin forzar wrap horizontal. */
    flex-basis: 100%;
    text-align: center;
    margin-top: 2px;
}

/* ─── Ticket ────────────────────────────────────────────────────── */
.play-ticket[b-bsgya7z7wu] {
    margin-top: 18px;
    padding: 16px;
    background: #ffffff;
    border: 1px solid #e8c0e0;
    border-radius: 14px;
    box-shadow: 0 6px 18px -10px rgba(91,58,138,0.15);
}
.play-ticket-label[b-bsgya7z7wu] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 800;
    color: #5b3a8a;
    font-size: 0.95rem;
    margin-bottom: 8px;
}
.play-ticket-row[b-bsgya7z7wu] {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.play-ticket-input[b-bsgya7z7wu] {
    flex: 1 1 auto;
    letter-spacing: 0.15em;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-weight: 700;
    /* override al .input global (en contexto claro): */
    background: #ffffff;
    color: #2e2244;
    border-color: #d8b8e0;
}
.play-ticket-input:focus[b-bsgya7z7wu] {
    border-color: #ff6a99;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(255, 106, 153, 0.18);
}
.play-ticket-btn[b-bsgya7z7wu] {
    flex: 0 0 auto;
    min-width: 130px;
}
.play-ticket-hint[b-bsgya7z7wu] {
    display: block;
    margin-top: 6px;
    color: #9989aa;
    font-size: 0.78rem;
}
.play-ticket-error[b-bsgya7z7wu] { margin-top: 8px; }
.play-ticket-ok[b-bsgya7z7wu]    { margin-top: 8px; }

/* ─── Modal de festejo al llegar a una estación ─────────────────── */
/* Capa fija sobre todo el viewport con backdrop difuso. La tarjeta
   central contiene michi animado + texto + botón + confeti. */
.play-celebrate-overlay[b-bsgya7z7wu] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(46, 34, 68, 0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: play-celebrate-overlay-in-b-bsgya7z7wu 240ms ease-out;
}

@keyframes play-celebrate-overlay-in-b-bsgya7z7wu {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.play-celebrate-card[b-bsgya7z7wu] {
    position: relative;
    background: linear-gradient(180deg, #fff7fb 0%, #ffe8f3 100%);
    border: 2px solid #ffb4d6;
    border-radius: 22px;
    padding: 26px 22px 22px;
    max-width: 380px;
    width: 100%;
    text-align: center;
    box-shadow:
        0 30px 60px -20px rgba(91, 58, 138, 0.45),
        0 6px 16px -8px rgba(255, 106, 153, 0.3);
    animation: play-celebrate-card-in-b-bsgya7z7wu 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

@keyframes play-celebrate-card-in-b-bsgya7z7wu {
    from { transform: scale(0.72); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

.play-celebrate-close[b-bsgya7z7wu] {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid #e8c0e0;
    color: #5b3a8a;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 100ms ease, background 100ms ease;
    line-height: 1;
    padding: 0;
    font-family: inherit;
}
.play-celebrate-close:hover[b-bsgya7z7wu] {
    background: #ffffff;
    transform: scale(1.08);
}
.play-celebrate-close:focus-visible[b-bsgya7z7wu] {
    outline: 3px solid #ff6a99;
    outline-offset: 2px;
}

.play-celebrate-title[b-bsgya7z7wu] {
    font-size: 1.32rem;
    font-weight: 800;
    color: #5b3a8a;
    margin: 0 0 6px;
    line-height: 1.2;
    padding: 0 30px;       /* espacio para el botón de cerrar */
}

.play-celebrate-month[b-bsgya7z7wu] {
    display: inline-block;
    background: linear-gradient(90deg, #ff6a99 0%, #e25485 100%);
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 14px;
    border-radius: 999px;
    margin: 0 0 14px;
}

.play-celebrate-cat[b-bsgya7z7wu] {
    margin: 0 auto 8px;
    width: 200px;
    height: 200px;
    animation: play-celebrate-cat-bob-b-bsgya7z7wu 2.4s ease-in-out infinite;
}
.play-celebrate-cat img[b-bsgya7z7wu] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    /* bg removido con rembg, así que no se necesita outline —
       sólo una sombra suave para levantarla de la tarjeta. */
    filter: drop-shadow(0 8px 14px rgba(91, 58, 138, 0.22));
}

@keyframes play-celebrate-cat-bob-b-bsgya7z7wu {
    0%, 100% { transform: translateY(0)    rotate(-1.2deg); }
    50%      { transform: translateY(-7px) rotate(1.2deg); }
}

.play-celebrate-message[b-bsgya7z7wu] {
    color: #2e2244;
    font-size: 0.97rem;
    line-height: 1.5;
    margin: 6px 6px 16px;
}

.play-celebrate-btn[b-bsgya7z7wu] {
    margin: 0 auto;
    min-width: 180px;
}

/* Confeti: piezas absolutas que caen dentro de la tarjeta.
   position absolute + overflow:hidden en .play-celebrate-card las
   mantiene dentro sin salirse del borde redondeado. */
.play-celebrate-confetti[b-bsgya7z7wu] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}
.play-celebrate-confetti span[b-bsgya7z7wu] {
    position: absolute;
    top: -20px;
    width: 10px;
    height: 14px;
    background: var(--confetti-color, #ff6a99);
    border-radius: 2px;
    opacity: 0.95;
    animation: play-celebrate-confetti-fall-b-bsgya7z7wu var(--confetti-dur, 3.5s) linear
               var(--confetti-delay, 0s) infinite;
    transform: rotate(var(--confetti-rot, 0deg));
}

@keyframes play-celebrate-confetti-fall-b-bsgya7z7wu {
    0%   { transform: translateY(0)      rotate(0deg)    scale(1);   opacity: 1; }
    85%  { opacity: 0.95; }
    100% { transform: translateY(420px)  rotate(720deg)  scale(0.7); opacity: 0; }
}

/* El michi, mensaje y botón van ENCIMA del confeti */
.play-celebrate-title[b-bsgya7z7wu],
.play-celebrate-month[b-bsgya7z7wu],
.play-celebrate-cat[b-bsgya7z7wu],
.play-celebrate-message[b-bsgya7z7wu],
.play-celebrate-btn[b-bsgya7z7wu],
.play-celebrate-close[b-bsgya7z7wu] {
    position: relative;
    z-index: 1;
}

@media (max-width: 420px) {
    .play-celebrate-card[b-bsgya7z7wu]  { padding: 22px 18px 18px; border-radius: 18px; }
    .play-celebrate-title[b-bsgya7z7wu] { font-size: 1.18rem; }
    .play-celebrate-cat[b-bsgya7z7wu]   { width: 120px; height: 144px; }
    .play-celebrate-message[b-bsgya7z7wu] { font-size: 0.92rem; }
    .play-celebrate-btn[b-bsgya7z7wu]   { min-width: 160px; }
}

@media (prefers-reduced-motion: reduce) {
    .play-celebrate-overlay[b-bsgya7z7wu],
    .play-celebrate-card[b-bsgya7z7wu],
    .play-celebrate-cat[b-bsgya7z7wu],
    .play-celebrate-confetti span[b-bsgya7z7wu] {
        animation: none !important;
    }
    .play-celebrate-overlay[b-bsgya7z7wu] { background: rgba(46, 34, 68, 0.7); }
}

/* ─── Responsive ────────────────────────────────────────────────── */
@media (max-width: 760px) {
    .play-map-slider[b-bsgya7z7wu] {
        grid-template-columns: 1fr;
    }
    .play-map-pill[b-bsgya7z7wu] { padding: 8px 12px; }
    .play-map-pill-text strong[b-bsgya7z7wu] { font-size: 0.88rem; }
    .play-map-pill-text small[b-bsgya7z7wu]  { font-size: 0.7rem; }

    .play-map-stage[b-bsgya7z7wu] { padding: 8px; border-radius: 14px; }

    .play-status-row[b-bsgya7z7wu] {
        grid-template-columns: 1fr 1fr;
        row-gap: 8px;
    }
    .play-status-item:last-child[b-bsgya7z7wu] { grid-column: 1 / -1; }

    /* El badge de puntos totales crece un poco más en mobile para
       mantener la jerarquía visual con el número grande. */
    .play-status-total-value[b-bsgya7z7wu] { font-size: 1.6rem; }

    .play-ticket-row[b-bsgya7z7wu] { flex-direction: column; }
    .play-ticket-btn[b-bsgya7z7wu] { width: 100%; }
}

@media (max-width: 420px) {
    .play-title .brand-img[b-bsgya7z7wu] { width: 120px; }
    .play-station-bg[b-bsgya7z7wu]     { r: 36; }
    .play-station-img[b-bsgya7z7wu]    { /* sx/sy se aplican inline en el SVG */ }
    .play-status-value[b-bsgya7z7wu]   { font-size: 1.05rem; }
}

/* ─── Botón "Ver imagen completa" del distrito ───────────────────── */
/* Botón compacto anclado a la esquina superior derecha del escenario
   del mapa. La panorámica sin segmentar vive en img/maps/full/{ml|N}.png
   y se muestra en el modal .play-fullview-overlay (abajo). El escenario
   debe ser contexto de posicionamiento para que absolute funcione
   relativo al borde interior del card (con padding 12px). */
.play-map-stage[b-bsgya7z7wu] { position: relative; }

/* ─── Toolbar con los dos botones trigger (Ver imagen + Cambiar
   panorámica). El wrapper es el contexto de posicionamiento absoluto
   (esquina sup-der del escenario); los hijos comparten estilo y
   mantienen su propio selector semántico (.play-fullview-open-btn /
   .play-bg-pick-btn) por si más adelante queremos diferenciarlos. */
.play-map-toolbar[b-bsgya7z7wu] {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    max-width: calc(100% - 32px);
}

.play-map-toolbar-btn[b-bsgya7z7wu] {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid #e8c0e0;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffffff 0%, #fdf2fb 100%);
    color: #5b3a8a;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px -4px rgba(91, 58, 138, 0.35);
    transition: transform 100ms ease, background 120ms ease, border-color 120ms ease;
}
.play-map-toolbar-btn:hover[b-bsgya7z7wu] {
    background: linear-gradient(180deg, #ffffff 0%, #ffe8f3 100%);
    border-color: #b89bff;
    transform: translateY(-1px);
}
.play-map-toolbar-btn:active[b-bsgya7z7wu] { transform: translateY(0); }
.play-map-toolbar-btn:focus-visible[b-bsgya7z7wu] {
    outline: 2px solid #b89bff;
    outline-offset: 2px;
}

/* Mantenemos los selectores semánticos vacíos para que se pueda
   personalizar el aspecto de cada botón en el futuro sin reescribir
   la regla genérica. */
.play-fullview-open-btn[b-bsgya7z7wu],
.play-bg-pick-btn[b-bsgya7z7wu] { /* cada botón hereda .play-map-toolbar-btn */ }

/* En móvil los botones se achican y se mantienen en una sola línea
   arriba a la derecha (con wrap si no caben). */
@media (max-width: 760px) {
    .play-map-toolbar[b-bsgya7z7wu] {
        top: 12px;
        right: 12px;
        gap: 6px;
    }
    .play-map-toolbar-btn[b-bsgya7z7wu] {
        font-size: 0.72rem;
        padding: 6px 10px;
    }
}

/* ─── Modal "Ver imagen completa" ───────────────────────────────── */
/* Misma estética que play-celebrate (overlay + tarjeta centrada) pero
   la tarjeta crece con la imagen y se limita a max-width: min(960px, 95vw)
   / max-height: ~90vh para no tapar todo el viewport. La imagen conserva
   proporción (object-fit: contain) sobre un fondo claro. */
.play-fullview-overlay[b-bsgya7z7wu] {
    position: fixed;
    inset: 0;
    z-index: 1100;          /* encima del celebrate modal (1000) */
    background: rgba(46, 34, 68, 0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: play-fullview-overlay-in-b-bsgya7z7wu 200ms ease-out;
}

@keyframes play-fullview-overlay-in-b-bsgya7z7wu {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.play-fullview-card[b-bsgya7z7wu] {
    position: relative;
    background: #ffffff;
    border: 2px solid #b89bff;
    border-radius: 22px;
    padding: 24px 24px 18px;
    max-width: min(960px, 95vw);
    width: 100%;
    text-align: center;
    box-shadow:
        0 30px 60px -20px rgba(91, 58, 138, 0.45),
        0 6px 16px -8px rgba(255, 106, 153, 0.3);
    animation: play-fullview-card-in-b-bsgya7z7wu 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 90vh;
}

@keyframes play-fullview-card-in-b-bsgya7z7wu {
    from { transform: scale(0.85); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

.play-fullview-close[b-bsgya7z7wu] {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid #e8c0e0;
    color: #5b3a8a;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 100ms ease, background 100ms ease;
    line-height: 1;
    padding: 0;
    font-family: inherit;
    z-index: 2;
}
.play-fullview-close:hover[b-bsgya7z7wu] {
    background: #ffe8f3;
    transform: rotate(90deg);
}
.play-fullview-close:focus-visible[b-bsgya7z7wu] {
    outline: 2px solid #b89bff;
    outline-offset: 2px;
}

.play-fullview-title[b-bsgya7z7wu] {
    margin: 0;
    font-size: 1.05rem;
    color: #5b3a8a;
    font-weight: 800;
    padding-right: 40px;    /* espacio para el botón ✕ */
}

.play-fullview-img[b-bsgya7z7wu] {
    display: block;
    width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 14px;
    border: 1px solid #e8c0e0;
    background: #fdf2fb;
    -webkit-user-drag: none;
    user-select: none;
}

.play-fullview-hint[b-bsgya7z7wu] {
    margin: 0;
    font-size: 0.78rem;
    color: #8a6fb0;
}

/* Responsive — en móvil la tarjeta ocupa casi todo el viewport. */
@media (max-width: 760px) {
    .play-fullview-overlay[b-bsgya7z7wu] { padding: 8px; }
    .play-fullview-card[b-bsgya7z7wu]    { padding: 18px 14px 12px; border-radius: 16px; }
    .play-fullview-title[b-bsgya7z7wu]   { font-size: 0.95rem; }
    .play-fullview-img[b-bsgya7z7wu]     { max-height: 65vh; }
}

/* Accesibilidad — respetar prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
    .play-fullview-overlay[b-bsgya7z7wu],
    .play-fullview-card[b-bsgya7z7wu],
    .play-fullview-close[b-bsgya7z7wu],
    .play-fullview-open-btn[b-bsgya7z7wu] {
        animation: none !important;
        transition: none !important;
    }
    .play-fullview-overlay[b-bsgya7z7wu] { background: rgba(46, 34, 68, 0.7); }
    .play-fullview-close:hover[b-bsgya7z7wu] { transform: none; }
}

/* ─── Modal "Cambiar panorámica de fondo" ────────────────────────── */
/* Selector en grid de tarjetas: el usuario elige manualmente qué
   panorámica (ml.png, 1.png, …, 12.png) usan los 3 mapas como
   fondo, en vez del distrito correspondiente a su estación actual
   canónica. La elección persiste en localStorage (clave
   "michi.train.bgOverride" — ver Play.razor) y se aplica en
   GetActiveBgNode antes de caer al comportamiento canónico. */
.play-bgpicker-overlay[b-bsgya7z7wu] {
    position: fixed;
    inset: 0;
    z-index: 1200;          /* encima de play-fullview (1100) y celebrate (1000) */
    background: rgba(46, 34, 68, 0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: play-bgpicker-overlay-in-b-bsgya7z7wu 200ms ease-out;
}

@keyframes play-bgpicker-overlay-in-b-bsgya7z7wu {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.play-bgpicker-card[b-bsgya7z7wu] {
    position: relative;
    background: linear-gradient(180deg, #fff7fb 0%, #ffe8f3 100%);
    border: 2px solid #ffb4d6;
    border-radius: 22px;
    padding: 24px 24px 22px;
    max-width: min(640px, 95vw);
    width: 100%;
    text-align: center;
    box-shadow:
        0 30px 60px -20px rgba(91, 58, 138, 0.45),
        0 6px 16px -8px rgba(255, 106, 153, 0.3);
    animation: play-bgpicker-card-in-b-bsgya7z7wu 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
    max-height: 90vh;
    overflow-y: auto;
}

@keyframes play-bgpicker-card-in-b-bsgya7z7wu {
    from { transform: scale(0.85); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

.play-bgpicker-close[b-bsgya7z7wu] {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid #e8c0e0;
    color: #5b3a8a;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
    font-family: inherit;
    z-index: 2;
}
.play-bgpicker-close:hover[b-bsgya7z7wu] { background: #ffe8f3; transform: rotate(90deg); }
.play-bgpicker-close:focus-visible[b-bsgya7z7wu] {
    outline: 2px solid #b89bff;
    outline-offset: 2px;
}

.play-bgpicker-title[b-bsgya7z7wu] {
    margin: 0 0 6px;
    font-size: 1.1rem;
    color: #5b3a8a;
    font-weight: 800;
    padding-right: 40px;
}

.play-bgpicker-subtitle[b-bsgya7z7wu] {
    margin: 0 0 18px;
    font-size: 0.85rem;
    color: #6b4a8a;
    line-height: 1.4;
}

.play-bgpicker-grid[b-bsgya7z7wu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin: 0 auto;
}

.play-bgpicker-tile[b-bsgya7z7wu] {
    appearance: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 8px 12px;
    background: #ffffff;
    border: 2px solid #e8c0e0;
    border-radius: 14px;
    cursor: pointer;
    font-family: inherit;
    color: #5b3a8a;
    transition: transform 120ms ease, border-color 120ms ease,
                box-shadow 120ms ease, background 120ms ease;
    text-align: center;
}
.play-bgpicker-tile:hover[b-bsgya7z7wu] {
    transform: translateY(-2px);
    border-color: #b89bff;
    box-shadow: 0 6px 14px -4px rgba(91, 58, 138, 0.3);
}
.play-bgpicker-tile:focus-visible[b-bsgya7z7wu] {
    outline: 2px solid #b89bff;
    outline-offset: 2px;
}
.play-bgpicker-tile.is-current[b-bsgya7z7wu] {
    border-color: #6ab7e8;
    background: linear-gradient(180deg, #ffffff 0%, #eaf5ff 100%);
    box-shadow: 0 6px 18px -4px rgba(106, 183, 232, 0.5);
}
.play-bgpicker-tile.is-current[b-bsgya7z7wu]::after {
    content: "✓";
    position: absolute;
    top: 4px;
    right: 6px;
    background: #6ab7e8;
    color: #ffffff;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
}
.play-bgpicker-tile[b-bsgya7z7wu] { position: relative; }

.play-bgpicker-tile-thumb[b-bsgya7z7wu] {
    display: block;
    width: 100%;
    height: 84px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid #f0d4e4;
    background: #fdf2fb;
    user-select: none;
    -webkit-user-drag: none;
}

.play-bgpicker-tile-key[b-bsgya7z7wu] {
    font-size: 0.95rem;
    font-weight: 800;
    color: #5b3a8a;
    line-height: 1.2;
    margin-top: 4px;
}

.play-bgpicker-tile-name[b-bsgya7z7wu] {
    font-size: 0.78rem;
    font-weight: 700;
    color: #3a2a4a;
    line-height: 1.2;
}

.play-bgpicker-tile-tag[b-bsgya7z7wu] {
    font-size: 0.7rem;
    color: #8a6fb0;
    font-weight: 600;
}

.play-bgpicker-clear[b-bsgya7z7wu] {
    appearance: none;
    margin: 18px auto 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px dashed #b89bff;
    border-radius: 999px;
    background: transparent;
    color: #5b3a8a;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}
.play-bgpicker-clear:hover[b-bsgya7z7wu] {
    background: #fdf2fb;
    border-color: #6ab7e8;
}
.play-bgpicker-clear:focus-visible[b-bsgya7z7wu] {
    outline: 2px solid #b89bff;
    outline-offset: 2px;
}

.play-bgpicker-hint[b-bsgya7z7wu] {
    margin: 14px 0 0;
    font-size: 0.72rem;
    color: #8a6fb0;
    line-height: 1.4;
}

/* Responsive — móvil achica tiles y reduce paddings. */
@media (max-width: 760px) {
    .play-bgpicker-overlay[b-bsgya7z7wu] { padding: 8px; }
    .play-bgpicker-card[b-bsgya7z7wu]    { padding: 18px 14px 14px; border-radius: 16px; }
    .play-bgpicker-title[b-bsgya7z7wu]   { font-size: 1rem; }
    .play-bgpicker-subtitle[b-bsgya7z7wu] { font-size: 0.8rem; }
    .play-bgpicker-tile-thumb[b-bsgya7z7wu] { height: 68px; }
}

/* Accesibilidad — respetar prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
    .play-bgpicker-overlay[b-bsgya7z7wu],
    .play-bgpicker-card[b-bsgya7z7wu],
    .play-bgpicker-close[b-bsgya7z7wu],
    .play-bgpicker-tile[b-bsgya7z7wu],
    .play-bgpicker-clear[b-bsgya7z7wu] {
        animation: none !important;
        transition: none !important;
    }
    .play-bgpicker-overlay[b-bsgya7z7wu] { background: rgba(46, 34, 68, 0.7); }
    .play-bgpicker-close:hover[b-bsgya7z7wu] { transform: none; }
}
/* /Pages/Ranking.razor.rz.scp.css */
/* ============================================================
   /ranking — leaderboard público de michis.

   Mismo lenguaje visual que /me (card blanca translúcida, fondo
   por tema, esquinas redondeadas), pero con jerarquía clara hacia
   el podio y la fila del usuario actual.

   Todos los selectores incluyen el scope attribute [b-X] que Blazor
   agrega automáticamente; no hace falta prefijo manual.
   ============================================================ */

.ranking .welcome-bg-img[b-yixa1bfptp],
.ranking .welcome-bg-overlay[b-yixa1bfptp] { display: none !important; }

/* El UserLayout ya pone el gradiente global; acá NO queremos otro
   contenedor pantalla-completa, sólo que el bg de la card viva
   dentro del wrapper. */
.welcome.ranking[b-yixa1bfptp] {
    min-height: 0;
    padding: 0;
    overflow: visible;
}

.ranking-bg[b-yixa1bfptp] {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    border-radius: 28px;
    background: #1c1432; /* fallback mientras carga */
}

/* Cabecera de la card */
.ranking-card[b-yixa1bfptp] {
    max-width: 880px;
    text-align: left;
    align-items: stretch;
    gap: 22px;
    /* Clip por las dudas cualquier desbordamiento del podio o de la
       tabla (nicks largos, mapa chips). Sin esto, si una sola cell
       quedara 1-2 px fuera del card, la card "parece" descentrada
       porque el overflow se ve a la derecha. */
    overflow: hidden;
}
.ranking-title[b-yixa1bfptp] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 6px 14px;
    margin: 0;
    text-align: center;
}

/* El segundo renglón del título ("va primero?") usa .title-mid.
   En components.css no hay regla para .title-mid (sólo .title-pre
   y .brand-img) → sin esto el span hereda el tamaño default del
   <h1> y se ve chiquito y oscuro sobre el card púrpura.
   Lo estilizamos acá como un subtítulo en blanco, debajo de
   "¿Quién". El título-pre sigue siendo `display: block`, así
   que ya parte el renglón por sí solo. */
.ranking-title .title-mid[b-yixa1bfptp] {
    display: block;
    flex-basis: 100%;
    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(0.95rem, 1.8vw, 1.25rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-top: -2px;
    text-shadow:
        0 1px 6px rgba(46, 34, 68, 0.7),
        0 0 8px rgba(255, 255, 255, 0.25);
}

.ranking-emoji[b-yixa1bfptp] {
    font-size: 1.8rem;
    margin-left: 6px;
    /* Lo subimos un poquito para que quede alineado con el subtítulo
       y no pegado al "¿QUIÉN" gigante. */
    transform: translateY(-2px);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}
.ranking-status[b-yixa1bfptp] {
    margin: 0;
    color: rgba(255,255,255,0.85);
    font-size: 0.95rem;
}
.ranking-status.msg-error[b-yixa1bfptp] { color: #ffb4b4; }

/* ─── Podio top 3 ─── */
.ranking-podium[b-yixa1bfptp] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 12px;
    align-items: end;
    padding: 8px 4px 0;
    /* Evita que un cell más ancho que su track haga overflow
       horizontal de toda la grid (y por ende de la card). */
    min-width: 0;
}
.ranking-podium-cell[b-yixa1bfptp] {
    background: rgba(255,255,255,0.06);
    border: 1.5px solid rgba(255,255,255,0.22);
    border-radius: 18px;
    padding: 14px 10px 12px;
    text-align: center;
    color: #fff;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    /* CRÍTICO en grid: por default cada cell tiene min-width: auto,
       así que si el nickname ("trin88389615") o el número de puntos
       es más ancho que la fracción asignada, la cell NO encoge y
       empuja la grid entera más allá del viewport → el 3er podio
       se "sale" de la card y la card se descentra visualmente.
       min-width: 0 permite que el contenido se trunque/elipse. */
    min-width: 0;
    overflow: hidden;
}
.ranking-podium-cell.is-first[b-yixa1bfptp] {
    background: linear-gradient(180deg, rgba(255, 215, 90, 0.28) 0%, rgba(255,255,255,0.06) 100%);
    border-color: rgba(255, 215, 90, 0.75);
    transform: translateY(-8px);
    box-shadow: 0 14px 30px rgba(255, 200, 60, 0.28);
}
.ranking-podium-cell.is-second[b-yixa1bfptp] {
    background: linear-gradient(180deg, rgba(220, 220, 230, 0.22) 0%, rgba(255,255,255,0.06) 100%);
    border-color: rgba(220, 220, 230, 0.55);
}
.ranking-podium-cell.is-third[b-yixa1bfptp] {
    background: linear-gradient(180deg, rgba(220, 140, 80, 0.22) 0%, rgba(255,255,255,0.06) 100%);
    border-color: rgba(220, 140, 80, 0.55);
}
.ranking-podium-cell.is-me[b-yixa1bfptp] {
    outline: 2.5px solid #ff8fb1;
    outline-offset: 2px;
}
.ranking-medal[b-yixa1bfptp] {
    font-size: 2.4rem;
    line-height: 1;
}

/* ─── Avatar del podio (michi del ganador) ─── */
.ranking-podium-avatar[b-yixa1bfptp] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255,255,255,0.4);
    box-shadow: 0 6px 14px rgba(0,0,0,0.25);
}
.ranking-podium-cell.is-first .ranking-podium-avatar[b-yixa1bfptp] {
    width: 84px;
    height: 84px;
    border-color: rgba(255, 215, 90, 0.85);
    box-shadow: 0 8px 22px rgba(255, 200, 60, 0.35);
}
.ranking-podium-avatar img[b-yixa1bfptp] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ranking-avatar-fallback[b-yixa1bfptp] {
    font-size: 2rem;
    opacity: 0.5;
}
.ranking-podium-name[b-yixa1bfptp] {
    font-weight: 800;
    font-size: 0.95rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ranking-podium-points[b-yixa1bfptp] {
    font-size: 1.4rem;
    font-weight: 800;
    color: #fff;
}
.ranking-podium-rank[b-yixa1bfptp] {
    font-size: 0.75rem;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ─── Tabla completa ─── */
.ranking-table[b-yixa1bfptp] {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.18);
}
.ranking-table-head[b-yixa1bfptp] {
    display: grid;
    grid-template-columns: 44px 1fr 90px auto;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.85);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ranking-list[b-yixa1bfptp] {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 480px;
    overflow-y: auto;
    background: rgba(255,255,255,0.02);
}
.ranking-row[b-yixa1bfptp] {
    display: grid;
    grid-template-columns: 44px 1fr 90px auto;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-top: 1px solid rgba(255,255,255,0.08);
    color: #fff;
}
.ranking-row:first-child[b-yixa1bfptp] { border-top: none; }
.ranking-row.is-me[b-yixa1bfptp] {
    background: linear-gradient(90deg, rgba(255, 143, 177, 0.18) 0%, rgba(255,255,255,0.04) 100%);
    border-left: 3px solid #ff8fb1;
}
.ranking-row.is-top[b-yixa1bfptp] { background: rgba(255, 215, 90, 0.06); }
.ranking-row.is-top.is-me[b-yixa1bfptp] {
    background: linear-gradient(90deg, rgba(255, 143, 177, 0.22) 0%, rgba(255, 215, 90, 0.12) 100%);
}
.ranking-col-rank[b-yixa1bfptp] {
    text-align: center;
    font-weight: 700;
    font-size: 0.95rem;
    color: rgba(255,255,255,0.85);
}
.ranking-row-medal[b-yixa1bfptp] { font-size: 1.3rem; line-height: 1; }
.ranking-row-ranknum[b-yixa1bfptp] { color: rgba(255,255,255,0.7); }
.ranking-col-name[b-yixa1bfptp] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.ranking-row-nick[b-yixa1bfptp] {
    font-weight: 700;
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.ranking-row-you[b-yixa1bfptp] {
    font-size: 0.7rem;
    background: #ff8fb1;
    color: #2a1130;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
.ranking-col-points[b-yixa1bfptp] {
    display: flex;
    align-items: baseline;
    gap: 3px;
    justify-content: flex-end;
}
.ranking-row-points[b-yixa1bfptp] {
    font-weight: 800;
    font-size: 1.05rem;
    color: #fff;
}
.ranking-row-points-unit[b-yixa1bfptp] {
    font-size: 0.7rem;
    opacity: 0.65;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ranking-col-maps[b-yixa1bfptp] {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}
.ranking-map-chip[b-yixa1bfptp] {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 6px;
    padding: 2px 6px;
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(255,255,255,0.85);
    min-width: 36px;
    text-align: center;
}
.ranking-map-chip:empty[b-yixa1bfptp],
.ranking-map-chip[data-zero="true"][b-yixa1bfptp] {
    opacity: 0.45;
}

/* ─── Hint inferior ─── */
.ranking-hint[b-yixa1bfptp] {
    margin: 0;
    padding: 10px 14px;
    background: rgba(255,255,255,0.06);
    border: 1px dashed rgba(255,255,255,0.22);
    border-radius: 12px;
    color: rgba(255,255,255,0.92);
    font-size: 0.92rem;
    text-align: center;
}

/* ─── Mobile ─── */
@media (max-width: 600px) {
    /* minmax(0, …) en cada track es OBLIGATORIO: si el nickname del
       podio es más largo que la fracción, sin esto el track se
       expande y la grid desborda la card (bug del "último se sale"). */
    .ranking-podium[b-yixa1bfptp] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr);
        gap: 6px;
    }
    .ranking-medal[b-yixa1bfptp] { font-size: 1.7rem; }
    .ranking-podium-points[b-yixa1bfptp] { font-size: 1.05rem; }
    .ranking-podium-name[b-yixa1bfptp] { font-size: 0.78rem; }
    .ranking-podium-cell[b-yixa1bfptp] { padding: 12px 6px 10px; gap: 4px; }
    .ranking-podium-cell.is-first[b-yixa1bfptp] { transform: translateY(-6px); }
    .ranking-podium-avatar[b-yixa1bfptp] { width: 54px; height: 54px; }
    .ranking-podium-cell.is-first .ranking-podium-avatar[b-yixa1bfptp] { width: 70px; height: 70px; }

    .ranking-table-head[b-yixa1bfptp],
    .ranking-row[b-yixa1bfptp] {
        grid-template-columns: 32px 1fr 64px;
        gap: 8px;
        padding: 9px 10px;
    }
    /* M3 se oculta en mobile para no romper; M1 y M2 son los más
       activos normalmente. Si querés ver M3 scrolleá la fila. */
    .ranking-table-head .ranking-col-maps[b-yixa1bfptp],
    .ranking-row .ranking-col-maps[b-yixa1bfptp] { display: none; }
    .ranking-row-points[b-yixa1bfptp] { font-size: 0.95rem; }
}

/* Pantallas MUY angostas (320 px): comprimimos más para que el
   podio no se vea apretado y los nicks no se trunquen a 2 letras. */
@media (max-width: 360px) {
    .ranking-podium[b-yixa1bfptp] {
        gap: 4px;
    }
    .ranking-podium-name[b-yixa1bfptp] { font-size: 0.72rem; }
    .ranking-podium-points[b-yixa1bfptp] { font-size: 0.95rem; }
    .ranking-podium-rank[b-yixa1bfptp] { font-size: 0.65rem; }
    .ranking-podium-cell[b-yixa1bfptp] { padding: 10px 4px 8px; border-radius: 14px; }
}
/* /Pages/Register.razor.rz.scp.css */
/* ============================================================
   Wizard — específico del layout del wizard (4 pasos).
   Los estilos compartidos (btn-michi, .input, .field, .grid,
   .msg, .step-actions) viven en wwwroot/css/components.css.
   ============================================================ */

.wizard[b-lhja98ojua] {
    min-height: 100vh;
    isolation: isolate;
    display: grid;
    grid-template-rows: auto 1fr;
    place-items: center;
    padding: clamp(28px, 4vw, 48px) clamp(16px, 4vw, 32px);
    gap: clamp(20px, 3vw, 36px);
}

/* ---------- progress dots ---------- */
.wizard-steps[b-lhja98ojua] {
    list-style: none;
    display: flex;
    gap: clamp(8px, 2vw, 28px);
    margin: 0;
    padding: 10px 22px;
    border-radius: 999px;
    background: rgba(46, 34, 68, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.wizard-step[b-lhja98ojua] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 700;
    font-size: clamp(0.85rem, 1.2vw, 0.95rem);
    letter-spacing: 0.02em;
    transition: color 0.2s ease;
}
.wizard-step .dot[b-lhja98ojua] {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    border: 2px solid rgba(255, 255, 255, 0.20);
    font-size: 0.9rem;
    font-weight: 800;
    transition: all 0.2s ease;
}
.wizard-step.is-done[b-lhja98ojua] {
    color: rgba(255, 255, 255, 0.85);
}
.wizard-step.is-done .dot[b-lhja98ojua] {
    background: #6cd47c;
    border-color: #6cd47c;
    color: #1b5e20;
}
.wizard-step.is-current[b-lhja98ojua] {
    color: #ffffff;
}
.wizard-step.is-current .dot[b-lhja98ojua] {
    background: #ff6a99;
    border-color: #ff6a99;
    color: #ffffff;
    box-shadow: 0 0 0 4px rgba(255, 106, 153, 0.25);
    animation: michi-dot-pulse-b-lhja98ojua 1.6s ease-in-out infinite;
}
@keyframes michi-dot-pulse-b-lhja98ojua {
    0%, 100% { box-shadow: 0 0 0 4px rgba(255, 106, 153, 0.25); }
    50%      { box-shadow: 0 0 0 8px rgba(255, 106, 153, 0.10); }
}

@media (max-width: 520px) {
    .wizard-step .label[b-lhja98ojua] { display: none; }
    .wizard-steps[b-lhja98ojua] { padding: 8px 14px; }
}

/* ---------- card ---------- */
.wizard-card[b-lhja98ojua] {
    /* Antes: min(640px, 96%) → en móvil el 96% dejaba sólo ~8px de margen
       a cada lado, lo que hacía que la card se viera "pegada" a los bordes
       pese a que el .wizard la centraba con place-items: center.
       calc(100% - 32px) garantiza 16px de respiro mínimo por lado sin
       tocar el cap de 640px en escritorio. margin-inline:auto es un
       safety net por si algún contenedor padre fuerza width:100%. */
    width: min(640px, calc(100% - 32px));
    margin-inline: auto;
    background: rgba(46, 34, 68, 0.55);
    /* backdrop-filter eliminado: crea un nuevo containing block para
       position:fixed en los hijos, lo que atrapaba los modales
       (.action-overlay) dentro de la card y los descuadraba. */
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 28px;
    padding: clamp(24px, 3.4vw, 40px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.30);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 1.8vw, 22px);
    animation: michi-card-in-b-lhja98ojua 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
@keyframes michi-card-in-b-lhja98ojua {
    from { transform: translateY(16px) scale(0.98); opacity: 0; }
    to   { transform: translateY(0)    scale(1);    opacity: 1; }
}

.step-head[b-lhja98ojua] { text-align: center; margin: 0 0 6px; }
.step-title[b-lhja98ojua] {
    margin: 0;
    font-size: clamp(1.4rem, 2.6vw, 1.85rem);
    font-weight: 800;
    letter-spacing: 0.02em;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.30), 0 2px 12px rgba(0, 0, 0, 0.40);
}
.step-sub[b-lhja98ojua] {
    margin: 6px 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: clamp(0.95rem, 1.3vw, 1.05rem);
}

/* ---------- placeholder steps (2, 3, 4) ---------- */
.placeholder-grid[b-lhja98ojua] {
    display: grid;
    gap: 16px;
}
.placeholder-card[b-lhja98ojua] {
    background: rgba(255, 255, 255, 0.06);
    border: 2px dashed rgba(255, 255, 255, 0.30);
    border-radius: 18px;
    padding: clamp(18px, 2.4vw, 26px);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.placeholder-card.placeholder-result[b-lhja98ojua] {
    align-items: center;
    text-align: center;
}
.placeholder-image[b-lhja98ojua] {
    width: clamp(120px, 22vw, 200px);
    height: clamp(120px, 22vw, 200px);
    border-radius: 50%;
    background: radial-gradient(circle, #ff8fb1 0%, #c69bff 100%);
    display: grid;
    place-items: center;
    font-size: clamp(3rem, 8vw, 5rem);
    box-shadow: 0 12px 30px rgba(91, 58, 138, 0.35);
}
.placeholder-title[b-lhja98ojua] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff;
}
.placeholder-list[b-lhja98ojua] {
    margin: 0;
    padding-left: 18px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.95rem;
    line-height: 1.6;
}
.placeholder-hint[b-lhja98ojua] {
    margin: 0;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.9rem;
}
.placeholder-hint code[b-lhja98ojua],
.placeholder-list code[b-lhja98ojua],
.placeholder-meta code[b-lhja98ojua] {
    background: rgba(0, 0, 0, 0.30);
    border-radius: 6px;
    padding: 1px 6px;
    font-size: 0.85rem;
}
.placeholder-meta[b-lhja98ojua] {
    margin: 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}
.placeholder-data[b-lhja98ojua] {
    margin: 6px 0 0;
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.30);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.9rem;
    line-height: 1.5;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── cita de "presentación" en la credencial (paso 4) ──────────────── */
.credential-bio[b-lhja98ojua] {
    margin: 8px 0 0;
    padding: 10px 14px 10px 18px;
    border-left: 4px solid #ff6a99;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 0 10px 10px 0;
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.95rem;
    font-style: italic;
    line-height: 1.45;
    max-width: 100%;
    white-space: pre-wrap;
    word-break: break-word;
    /* "Lupita Mishi dijo:" — visualmente queda claro que es una cita. */
    position: relative;
}
.credential-bio[b-lhja98ojua]::before {
    content: "✦";
    color: #ff8fb1;
    margin-right: 6px;
    font-style: normal;
}

/* ---------- modal de cebo de sexo (estilos movidos a components.css) ---------- */

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .wizard-step.is-current .dot[b-lhja98ojua],
    .bait-sticker[b-lhja98ojua],
    .wizard-card[b-lhja98ojua] {
        animation: none !important;
    }
}