/* /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/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/MainLayout.razor.rz.scp.css */
.page[b-530wdc1j13] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-530wdc1j13] {
    flex: 1;
}

.sidebar[b-530wdc1j13] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

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

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

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

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

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

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

@media (min-width: 641px) {
    .page[b-530wdc1j13] {
        flex-direction: row;
    }

    .sidebar[b-530wdc1j13] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-530wdc1j13] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-530wdc1j13]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-530wdc1j13], article[b-530wdc1j13] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-sqib5ef0u2] {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row[b-sqib5ef0u2] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-sqib5ef0u2] {
    font-size: 1.1rem;
}

.bi[b-sqib5ef0u2] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-sqib5ef0u2] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-sqib5ef0u2] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-sqib5ef0u2] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-sqib5ef0u2] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-sqib5ef0u2] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-sqib5ef0u2] {
        padding-bottom: 1rem;
    }

    .nav-item[b-sqib5ef0u2]  a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

.nav-item[b-sqib5ef0u2]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-sqib5ef0u2]  a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

@media (min-width: 641px) {
    .navbar-toggler[b-sqib5ef0u2] {
        display: none;
    }

    .collapse[b-sqib5ef0u2] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }

    .nav-scrollable[b-sqib5ef0u2] {
        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /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/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: grid;
    grid-template-columns:
        minmax(0, 2fr)    /* búsqueda */
        minmax(0, 1fr)    /* sexo */
        minmax(0, 0.9fr)  /* grupo */
        auto auto auto;   /* 3 botones */
    gap: 8px;
    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; }

.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-toolbar[b-h7h5x1t6va] {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto auto auto;
    }
    .admin-search[b-h7h5x1t6va] { grid-column: 1 / -1; }
    .admin-filter[b-h7h5x1t6va] { font-size: 0.80rem; }
}

@media (max-width: 760px) {
    .admin-card[b-h7h5x1t6va] { max-width: 96%; }

    .admin-toolbar[b-h7h5x1t6va] {
        grid-template-columns: 1fr 1fr auto auto;
    }
    .admin-search[b-h7h5x1t6va]   { grid-column: 1 / -1; }
    .admin-filter[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; }
}

@media (max-width: 420px) {
    .admin-toolbar[b-h7h5x1t6va] { grid-template-columns: 1fr; }
    .admin-search[b-h7h5x1t6va], .admin-filter[b-h7h5x1t6va] { 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; }

.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;
    background:
        repeating-conic-gradient(#f0e8ff 0% 25%, #fff 0% 50%) 0 0 / 16px 16px;
    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: 12px;
    justify-content: center;
}

.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);
    margin: 6px auto 4px;
}

/* 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);
    }
}
/* /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] {
    width: min(640px, 96%);
    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;
    }
}