/* /Pages/LoginPage.razor.rz.scp.css */
/* ===========================================================
   AerreCRM · Login moderno (split-screen + glassmorphism)
   =========================================================== */

.login-page[b-me1m1fyksh] {
    --brand-1: #3c78ef;
    --brand-2: #6d5ef0;
    --brand-3: #22d3ee;
    --accent: #38d39f;
    --danger: #ef4444;

    /* Duraciones del efecto del loader. Las mismas del mockup
       mockups\login-loader.html, que las escala para verlo en camara lenta. */
    --d-fade: 280ms;    /* cross-fade del contenido de la tarjeta */
    /* El morph va en dos tiempos y no en uno: primero el boton se contrae y recien
       despues viaja al centro. Juntos y en 320 ms se leia como un borron. */
    --d-morph-w: 420ms; /* 1) el boton se contrae a 54 px */
    --d-morph-y: 480ms; /* 2) el boton contraido sube hasta el badge */
    --d-badge: 200ms;   /* el badge cruza de color y se vuelve circulo */
    --d-check: 450ms;   /* trazo del tilde (igual que el efecto del checkout) */
    --d-cross: 300ms;   /* trazo de la X del fallo */
    --d-wave: 2700ms;   /* ciclo de una onda concentrica */
    --d-breath: 3200ms; /* respiracion del glow */
    --d-shock: 620ms;   /* expansion final de las ondas al confirmar */
    --d-spark: 440ms;   /* chispas (igual que el efecto del checkout) */

    /* Colores del loader. Tienen variante por tema: el efecto se disenio sobre
       fondo oscuro, y sobre la tarjeta blanca el mismo violeta se lava. */
    --lo-fase: #64748b;
    --lo-pct: #0f172a;
    --lo-track: rgba(15, 23, 42, .1);
    --lo-onda: rgba(109, 94, 240, .4);
    --lo-onda-ok: rgba(22, 163, 74, .42);
    --lo-glow-a: rgba(109, 94, 240, .3);
    --lo-glow-b: rgba(109, 94, 240, .1);
    --lo-glow-ok-a: rgba(56, 211, 159, .34);
    --lo-glow-ok-b: rgba(56, 211, 159, .12);

    --surface: #ffffff;
    --surface-2: #f5f7fb;
    --text: #0f172a;
    --text-soft: #64748b;
    --border: #e2e8f0;
    --input-bg: #f8fafc;

    position: fixed;
    inset: 0;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    font-family: 'Segoe UI', 'Poppins', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
    color: var(--text);
    overflow: hidden;

    /* La pantalla entera baja como una persiana. Al iniciar sesion se levanta:
       eso lo hace un clon de esta misma pantalla, montado fuera de #app, porque
       para entonces el componente ya no existe (ver window.persiana en index.html). */
    animation: loginBaja-b-me1m1fyksh .62s cubic-bezier(.22, .75, .28, 1) both;
}

@keyframes loginBaja-b-me1m1fyksh {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .login-page[b-me1m1fyksh] { animation: none; }
}

/* ---------- Barra de preferencias (idioma + tema) ---------- */
.login-topbar[b-me1m1fyksh] {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .35rem .55rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, .42);
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: 0 10px 28px -12px rgba(0, 0, 0, .5);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
    animation: topbarIn-b-me1m1fyksh .55s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes topbarIn-b-me1m1fyksh {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.login-topbar-item[b-me1m1fyksh] {
    display: flex;
    align-items: center;
}

.login-topbar-sep[b-me1m1fyksh] {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, .2);
    flex: 0 0 auto;
}

/* ---------- Panel de marca ---------- */
.login-brand[b-me1m1fyksh] {
    position: relative;
    overflow: hidden;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
    background: linear-gradient(135deg, #1e3a8a 0%, var(--brand-1) 45%, var(--brand-2) 100%);
    isolation: isolate;
}

/* Ola original (wave_heavenly) reutilizada como textura suave */
.brand-wave[b-me1m1fyksh] {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    opacity: .5;
    mix-blend-mode: soft-light;
    pointer-events: none;
}

.brand-grid[b-me1m1fyksh] {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(circle at 30% 40%, #000 0%, transparent 75%);
    -webkit-mask-image: radial-gradient(circle at 30% 40%, #000 0%, transparent 75%);
}

.brand-orb[b-me1m1fyksh] {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .55;
    animation: float-b-me1m1fyksh 14s ease-in-out infinite;
}

.orb-1[b-me1m1fyksh] {
    width: 420px; height: 420px;
    top: -120px; right: -80px;
    background: var(--brand-3);
}

.orb-2[b-me1m1fyksh] {
    width: 360px; height: 360px;
    bottom: -100px; left: -60px;
    background: var(--brand-2);
    animation-delay: -4s;
}

.orb-3[b-me1m1fyksh] {
    width: 260px; height: 260px;
    top: 40%; left: 45%;
    background: var(--accent);
    opacity: .35;
    animation-delay: -8s;
}

@keyframes float-b-me1m1fyksh {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(20px, -30px) scale(1.08); }
}

.brand-top[b-me1m1fyksh] {
    display: flex;
    align-items: center;
}

.brand-logo[b-me1m1fyksh] {
    height: 52px;
    width: auto;
    border-radius: 12px;
    object-fit: contain;
    background: #fff;
    padding: 8px 14px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .2);
}

/* Zona central: ilustración original + texto */
.brand-main[b-me1m1fyksh] {
    margin: auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.75rem;
}

.brand-illustration[b-me1m1fyksh] {
    width: min(80%, 400px);
    height: auto;
    filter: drop-shadow(0 22px 45px rgba(0, 0, 0, .3));
    animation: floatY-b-me1m1fyksh 6s ease-in-out infinite;
}

@keyframes floatY-b-me1m1fyksh {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

.brand-copy[b-me1m1fyksh] { max-width: 32rem; }

.brand-copy h1[b-me1m1fyksh] {
    font-size: clamp(1.6rem, 2.6vw, 2.5rem);
    line-height: 1.15;
    font-weight: 700;
    margin-bottom: .85rem;
}

.brand-copy p[b-me1m1fyksh] {
    font-size: 1.02rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .85);
}

.brand-foot[b-me1m1fyksh] {
    font-size: .85rem;
    color: rgba(255, 255, 255, .7);
}

/* ---------- Panel del formulario ---------- */
.login-panel[b-me1m1fyksh] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: var(--surface-2);
    overflow-y: auto;
}

.login-card[b-me1m1fyksh] {
    width: 100%;
    max-width: 400px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 2.75rem 2.5rem;
    box-shadow: 0 30px 60px -25px rgba(15, 23, 42, .25);
    animation: cardIn-b-me1m1fyksh .55s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes cardIn-b-me1m1fyksh {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- El stack de la tarjeta: contenido + loader ---------- */
/* Las dos capas comparten celda, asi que el alto de la tarjeta lo sigue fijando
   el formulario y no salta nada al cambiar de estado. */
.card-stack[b-me1m1fyksh] { display: grid; }
.card-stack > *[b-me1m1fyksh] { grid-area: 1 / 1; }

.card-content[b-me1m1fyksh] { transition: opacity var(--d-fade) ease, visibility 0s; }

/* La visibility se apaga con retardo (para que el fade-out se vea) y se prende sin
   retardo al volver. Hace falta para que el formulario oculto quede fuera del tab
   order y del arbol de accesibilidad: con opacity sola sigue siendo tabulable. */
.card-content.is-hidden[b-me1m1fyksh] {
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--d-fade) ease, visibility 0s var(--d-fade);
}

/* Durante el morph se desvanece todo MENOS el boton, que esta viajando al centro.
   No se puede usar opacity en .card-content porque la opacidad de un padre arrastra
   a todo el subarbol y no hay forma de recuperarla en el hijo. */
.card-logo[b-me1m1fyksh], .card-head[b-me1m1fyksh], .form-fade[b-me1m1fyksh], .card-foot[b-me1m1fyksh] {
    transition: opacity var(--d-fade) ease, filter var(--d-fade) ease, transform var(--d-fade) ease;
}

/* El contenido se desvanece cuando el boton ya termino de contraerse, no antes:
   asi la contraccion se ve sobre el formulario todavia presente, como en el video. */
.card-content.is-fading .card-logo[b-me1m1fyksh],
.card-content.is-fading .card-head[b-me1m1fyksh],
.card-content.is-fading .form-fade[b-me1m1fyksh],
.card-content.is-fading .card-foot[b-me1m1fyksh] {
    opacity: 0;
    filter: blur(6px);
    transform: scale(.98);
    transition-delay: var(--d-morph-w);
}

.card-logo[b-me1m1fyksh] {
    display: none;
    height: 54px;
    width: auto;
    border-radius: 12px;
    object-fit: contain;
    background: #fff;
    padding: 8px 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .12);
    margin: 0 auto 1.5rem;
}

.card-head[b-me1m1fyksh] { margin-bottom: 1.75rem; }

.card-head h2[b-me1m1fyksh] {
    font-size: 1.7rem;
    font-weight: 700;
    margin-bottom: .35rem;
}

.card-head p[b-me1m1fyksh] {
    font-size: .95rem;
    color: var(--text-soft);
}

/* ---------- Campos con floating label ---------- */
.field[b-me1m1fyksh] {
    position: relative;
    margin-top: 1.05rem;
}

.field-input[b-me1m1fyksh] {
    width: 100%;
    height: 56px;
    padding: 1.15rem 2.9rem .35rem 2.9rem;
    font-size: 1rem;
    color: var(--text);
    background: var(--input-bg);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
    font-family: inherit;
}

.field-input:hover[b-me1m1fyksh] { border-color: #cbd5e1; }

.field-input:focus[b-me1m1fyksh] {
    border-color: var(--brand-1);
    background: var(--surface);
    box-shadow: 0 0 0 4px rgba(60, 120, 239, .14);
}

.field-input:disabled[b-me1m1fyksh] { opacity: .65; cursor: not-allowed; }

.field label[b-me1m1fyksh] {
    position: absolute;
    left: 2.9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-soft);
    font-size: 1rem;
    pointer-events: none;
    transition: all .18s ease;
    background: transparent;
}

.field-input:focus + label[b-me1m1fyksh],
.field-input:not(:placeholder-shown) + label[b-me1m1fyksh] {
    top: 12px;
    left: 2.85rem;
    transform: none;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .3px;
    color: var(--brand-1);
    text-transform: uppercase;
}

.field-icon[b-me1m1fyksh] {
    position: absolute;
    left: .95rem;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: var(--text-soft);
    pointer-events: none;
    transition: color .2s;
}

.field-input:focus ~ .field-icon[b-me1m1fyksh] { color: var(--brand-1); }

.field-icon svg[b-me1m1fyksh] { width: 100%; height: 100%; }

.field-toggle[b-me1m1fyksh] {
    position: absolute;
    right: .55rem;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-soft);
    cursor: pointer;
    border-radius: 8px;
    transition: color .2s, background .2s;
}

.field-toggle:hover[b-me1m1fyksh] { color: var(--brand-1); background: rgba(60, 120, 239, .08); }
.field-toggle svg[b-me1m1fyksh] { width: 20px; height: 20px; }

/* ---------- Estado de error en los campos ---------- */
.field.error .field-input[b-me1m1fyksh] {
    border-color: var(--danger);
    background: rgba(239, 68, 68, .04);
}

.field.error .field-input:focus[b-me1m1fyksh] {
    box-shadow: 0 0 0 4px rgba(239, 68, 68, .14);
}

.field.error .field-icon[b-me1m1fyksh],
.field.error .field-input:focus ~ .field-icon[b-me1m1fyksh] { color: var(--danger); }

.field.error .field-input:focus + label[b-me1m1fyksh],
.field.error .field-input:not(:placeholder-shown) + label[b-me1m1fyksh] { color: var(--danger); }

/* ---------- Alerta inline de error ---------- */
.login-alert[b-me1m1fyksh] {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .85rem 1rem;
    margin-bottom: .35rem;
    border-radius: 12px;
    background: rgba(239, 68, 68, .1);
    border: 1px solid rgba(239, 68, 68, .28);
    color: #b91c1c;
    font-size: .9rem;
    line-height: 1.4;
    animation: alertIn-b-me1m1fyksh .35s cubic-bezier(.2, .8, .2, 1) both, shake-b-me1m1fyksh .5s .1s both;
}

.alert-icon[b-me1m1fyksh] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: var(--danger);
    margin-top: 1px;
}

.alert-icon svg[b-me1m1fyksh] { width: 100%; height: 100%; }
.alert-text[b-me1m1fyksh] { font-weight: 500; }

@keyframes alertIn-b-me1m1fyksh {
    from { opacity: 0; transform: translateY(-8px); max-height: 0; }
    to   { opacity: 1; transform: translateY(0); max-height: 120px; }
}

@keyframes shake-b-me1m1fyksh {
    10%, 90%  { transform: translateX(-1px); }
    20%, 80%  { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-5px); }
    40%, 60%  { transform: translateX(5px); }
}

/* ---------- Fila recordar / olvido ---------- */
.field-row[b-me1m1fyksh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 1.15rem 0 1.5rem;
    font-size: .9rem;
}

.remember[b-me1m1fyksh] {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--text-soft);
    cursor: pointer;
    user-select: none;
}

.remember input[b-me1m1fyksh] {
    width: 17px;
    height: 17px;
    accent-color: var(--brand-1);
    cursor: pointer;
}

.forgot[b-me1m1fyksh] {
    color: var(--brand-1);
    text-decoration: none;
    font-weight: 600;
    transition: color .2s;
}

.forgot:hover[b-me1m1fyksh] { color: var(--brand-2); text-decoration: underline; }

/* ---------- Botón ---------- */
.submit-btn[b-me1m1fyksh] {
    position: relative;
    width: 100%;
    height: 54px;
    /* Con el width animado, el margen auto lo va centrando solo mientras se contrae */
    margin-inline: auto;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    border: none;
    border-radius: 12px;
    font-size: 1.02rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(100deg, var(--brand-1), var(--brand-2));
    box-shadow: 0 12px 26px -10px rgba(60, 120, 239, .7);
    transition: transform .15s, box-shadow .2s, filter .2s;
}

.submit-btn:hover:not(:disabled)[b-me1m1fyksh] {
    filter: brightness(1.05);
    box-shadow: 0 16px 30px -10px rgba(60, 120, 239, .8);
    transform: translateY(-1px);
}

.submit-btn:active:not(:disabled)[b-me1m1fyksh] { transform: translateY(0); }
.submit-btn:disabled[b-me1m1fyksh] { cursor: not-allowed; opacity: .9; }

/* El boton contraido: viaja al centro del stage y toma la forma del badge, que lo
   releva al llegar. El --morph-dy sale de medir el DOM (window.loginMorph.medir)
   porque la distancia cambia con el idioma, con el alto de la tarjeta y con la
   alerta de error visible. */
/* Los dos tiempos: el ancho y el radio arrancan ya; el transform espera a que la
   contraccion termine (transition-delay) y recien entonces el boton sube. */
.submit-btn.is-morph[b-me1m1fyksh] {
    width: 54px;
    min-width: 54px;
    border-radius: 16px;
    box-shadow: 0 10px 24px -8px rgba(109, 94, 240, .85);
    transform: translateY(calc(-1 * var(--morph-dy, 150px)));
    transition: width var(--d-morph-w) cubic-bezier(.5, .05, .3, 1),
                border-radius var(--d-morph-w) ease,
                box-shadow var(--d-morph-w) ease,
                transform var(--d-morph-y) cubic-bezier(.45, .05, .25, 1) var(--d-morph-w);
}

.submit-btn.is-morph .btn-text[b-me1m1fyksh] { opacity: 0; transition: opacity 120ms ease; }
.submit-btn.is-morph .btn-spinner[b-me1m1fyksh] { transform: scale(.85); }

/* ===========================================================
   El loader: el efecto del checkout de pago
   Referencia medida del video en mockups\referencia\
   =========================================================== */
.card-loader[b-me1m1fyksh] {
    display: grid;
    place-content: center;
    justify-items: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--d-fade) ease, visibility 0s var(--d-fade);
}

.card-loader.is-visible[b-me1m1fyksh] {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--d-fade) ease, visibility 0s;
}

/* El anillo es mas grande que el del video a proposito: "Verificando credenciales"
   es mucho mas largo que "Verifying Payment", y con 154 px el texto cruzaba el trazo. */
.loader-stage[b-me1m1fyksh] {
    position: relative;
    width: 240px;
    height: 240px;
    display: grid;
    place-items: center;
}

.loader-stage > *[b-me1m1fyksh] { grid-area: 1 / 1; }

/* El halo violeta que respira */
.loader-glow[b-me1m1fyksh] {
    width: 216px;
    height: 216px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--lo-glow-a) 0%, var(--lo-glow-b) 46%, transparent 72%);
    filter: blur(14px);
    animation: glowBreath-b-me1m1fyksh var(--d-breath) ease-in-out infinite;
}

@keyframes glowBreath-b-me1m1fyksh {
    0%, 100% { transform: scale(.9);   opacity: .72; }
    50%      { transform: scale(1.07); opacity: 1; }
}

/* Las tres ondas concentricas, escalonadas con --wd desde el markup */
.loader-waves[b-me1m1fyksh] {
    width: 240px;
    height: 240px;
    display: grid;
    place-items: center;
}

.loader-waves i[b-me1m1fyksh] {
    position: absolute;
    width: 132px;
    height: 132px;
    border-radius: 50%;
    border: 1.5px solid var(--lo-onda);
    opacity: 0;
    animation: waveOut-b-me1m1fyksh var(--d-wave) linear infinite;
    animation-delay: var(--wd);
}

@keyframes waveOut-b-me1m1fyksh {
    0%   { transform: scale(.62); opacity: 0; }
    16%  { opacity: .85; }
    100% { transform: scale(1.78); opacity: 0; }
}

/* Con el loader oculto no hay nada que animar: el efecto no gasta CPU en reposo */
.card-loader:not(.is-visible) .loader-glow[b-me1m1fyksh],
.card-loader:not(.is-visible) .loader-waves i[b-me1m1fyksh] { animation: none; }

/* El arco de progreso. r=45 en un viewBox de 100 -> circunferencia 282,74.
   Los hijos del SVG se alcanzan con ::deep: el atributo del CSS aislado no
   siempre llega a los elementos de dentro de un <svg>. */
.loader-arc[b-me1m1fyksh] {
    width: 172px;
    height: 172px;
    transform: rotate(-90deg);
    overflow: visible;
}

.loader-arc[b-me1m1fyksh]  circle {
    fill: none;
    stroke-width: 3.2;
    stroke-linecap: round;
}

.loader-arc[b-me1m1fyksh]  .arc-track { stroke: var(--lo-track); }

.loader-arc[b-me1m1fyksh]  .arc-fill {
    stroke: var(--brand-3);
    stroke-dasharray: 282.74;
    stroke-dashoffset: calc(282.74px * (1 - var(--pct, 0) / 100));
    filter: drop-shadow(0 0 5px rgba(34, 211, 238, .6));
    transition: stroke-dashoffset .16s linear, stroke .3s ease, filter .3s ease;
}

.card-loader.is-fase2 .loader-arc[b-me1m1fyksh]  .arc-fill,
.card-loader.is-exito .loader-arc[b-me1m1fyksh]  .arc-fill {
    stroke: var(--accent);
    filter: drop-shadow(0 0 6px rgba(56, 211, 159, .65));
}

.card-loader.is-fallo .loader-arc[b-me1m1fyksh]  .arc-fill {
    stroke: var(--danger);
    filter: drop-shadow(0 0 6px rgba(239, 68, 68, .6));
}

/* El nucleo: badge + los dos textos. El conjunto va centrado en el stage, asi que
   el badge queda apenas arriba del centro geometrico, como en el video. */
.loader-core[b-me1m1fyksh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .38rem;
    z-index: 2;
}

.loader-badge[b-me1m1fyksh] {
    position: relative;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(140deg, var(--brand-1), var(--brand-2));
    box-shadow: 0 10px 24px -8px rgba(109, 94, 240, .85);
    transition: border-radius var(--d-badge) ease, box-shadow var(--d-badge) ease;
}

/* Dos capas de color apiladas e invisibles, que se revelan con opacity: un
   degradado de background-image no interpola, asi que el cruce de color no puede
   hacerse animando el background. */
.loader-badge[b-me1m1fyksh]::before,
.loader-badge[b-me1m1fyksh]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    transition: opacity var(--d-badge) ease;
}

.loader-badge[b-me1m1fyksh]::before { background: linear-gradient(140deg, var(--accent), #16a34a); }
.loader-badge[b-me1m1fyksh]::after  { background: linear-gradient(140deg, #f87171, #dc2626); }

/* Los tres SVG (candado, tilde y X) se apilan en la MISMA celda. Sin esto el grid
   les da una fila a cada uno y el candado, aunque este en opacity 0, sigue ocupando
   la suya y empuja al tilde fuera del centro del badge. */
.loader-badge > svg[b-me1m1fyksh] {
    position: relative;
    z-index: 1;
    grid-area: 1 / 1;
    width: 26px;
    height: 26px;
}

.card-loader.is-exito .loader-badge[b-me1m1fyksh] {
    border-radius: 50%;
    box-shadow: 0 10px 26px -8px rgba(56, 211, 159, .9);
}

.card-loader.is-exito .loader-badge[b-me1m1fyksh]::before { opacity: 1; }

.card-loader.is-fallo .loader-badge[b-me1m1fyksh] {
    border-radius: 50%;
    box-shadow: 0 10px 26px -8px rgba(239, 68, 68, .85);
}

.card-loader.is-fallo .loader-badge[b-me1m1fyksh]::after { opacity: 1; }

.badge-lock[b-me1m1fyksh] { transition: opacity 160ms ease; }

.card-loader.is-exito .badge-lock[b-me1m1fyksh],
.card-loader.is-fallo .badge-lock[b-me1m1fyksh] { opacity: 0; }

/* El trazo del tilde se anima sobre el <svg> y no sobre el <polyline>:
   stroke-dasharray y stroke-dashoffset se heredan, asi que el selector no
   depende de que el CSS aislado alcance a los hijos del SVG. */
.badge-check[b-me1m1fyksh] {
    stroke-dasharray: 32;
    stroke-dashoffset: 32;
    /* ease-in-out: arranca despacio, acelera y frena, que es como se lee un trazo escrito
       a mano. Con una curva ease-out el tilde parece aparecer, no escribirse. */
    animation: drawCheck-b-me1m1fyksh var(--d-check) cubic-bezier(.65, 0, .35, 1) forwards;
}

@keyframes drawCheck-b-me1m1fyksh { to { stroke-dashoffset: 0; } }

/* La X: dos trazos de 16,97 unidades. El segundo entra apenas despues, asi que se
   lee como dos movimientos y no como un aspa que aparece de golpe. */
.badge-cross[b-me1m1fyksh] {
    stroke-dasharray: 17;
    stroke-dashoffset: 17;
    animation: drawCross-b-me1m1fyksh var(--d-cross) cubic-bezier(.65, 0, .35, 1) forwards;
}

.badge-cross[b-me1m1fyksh]  line:last-child { animation-delay: calc(var(--d-cross) * .35); }

@keyframes drawCross-b-me1m1fyksh { to { stroke-dashoffset: 0; } }

/* El ancho maximo mantiene el texto dentro del anillo: "Verificando credenciales"
   entra en dos renglones antes que cruzar el trazo. */
.loader-fase[b-me1m1fyksh] {
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .04em;
    line-height: 1.25;
    max-width: 150px;
    text-transform: uppercase;
    color: var(--lo-fase);
    text-align: center;
    transition: opacity 200ms ease;
}

.loader-pct[b-me1m1fyksh] {
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--lo-pct);
    /* Sin tabular-nums el numero baila cada vez que cambia de digito */
    font-variant-numeric: tabular-nums;
    transition: opacity 200ms ease;
}

.card-loader.is-fallo .loader-fase[b-me1m1fyksh],
.card-loader.is-fallo .loader-pct[b-me1m1fyksh] { opacity: 0; }

/* Al confirmar, las ondas hacen una expansion final y se apagan, y el halo cruza
   a verde. Es la onda de choque del video. */
.card-loader.is-exito .loader-waves i[b-me1m1fyksh] {
    border-color: var(--lo-onda-ok);
    animation: shockOut-b-me1m1fyksh var(--d-shock) cubic-bezier(.2, .7, .3, 1) forwards;
    animation-delay: calc(var(--wd) * .14);
}

@keyframes shockOut-b-me1m1fyksh {
    0%   { transform: scale(.92); opacity: .9; }
    100% { transform: scale(2.35); opacity: 0; }
}

.card-loader.is-exito .loader-glow[b-me1m1fyksh] {
    background: radial-gradient(circle, var(--lo-glow-ok-a) 0%, var(--lo-glow-ok-b) 46%, transparent 72%);
    animation: none;
    transform: scale(1);
}

.card-loader.is-fallo .loader-waves i[b-me1m1fyksh],
.card-loader.is-fallo .loader-glow[b-me1m1fyksh] {
    animation: none;
    opacity: 0;
    transition: opacity 240ms ease;
}

/* Chispas. Arrancan a los ~350 ms, o sea ANTES de que el trazo termine (450 ms), para que el
   festejo se sienta encadenado al tilde y no como un segundo tiempo. Los angulos y distancias
   vienen del componente, y son radiales uniformes porque el contenedor es cuadrado. */
.loader-sparks[b-me1m1fyksh] {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    place-items: center;
    pointer-events: none;
}

.loader-sparks i[b-me1m1fyksh] {
    position: absolute;
    width: 7px;
    height: 2px;
    border-radius: 999px;
    background: #fff;
    opacity: 0;
    animation: spark-b-me1m1fyksh var(--d-spark) var(--t, 350ms) cubic-bezier(.15, .75, .3, 1) forwards;
}

/* Dos de cada tres chispas van en verde claro para que el destello no sea un bloque blanco. */
.loader-sparks i:nth-child(3n + 2)[b-me1m1fyksh] { background: #a7f3d0; }
.loader-sparks i:nth-child(3n)[b-me1m1fyksh] { background: #d9fbe9; }

@keyframes spark-b-me1m1fyksh {
    0% {
        opacity: 0;
        transform: rotate(var(--a)) translateX(8px) scaleX(.5);
    }
    22% {
        opacity: 1;
        transform: rotate(var(--a)) translateX(calc(var(--d) * .45)) scaleX(1);
    }
    100% {
        opacity: 0;
        transform: rotate(var(--a)) translateX(var(--d)) scaleX(.3);
    }
}

.btn-spinner[b-me1m1fyksh] {
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-me1m1fyksh .7s linear infinite;
}

@keyframes spin-b-me1m1fyksh { to { transform: rotate(360deg); } }

/* ---------- Validación ---------- */
[b-me1m1fyksh] .validation-message {
    display: block;
    color: var(--danger);
    font-size: .8rem;
    margin: .35rem 0 0 .25rem;
}

/* ---------- Footer ---------- */
.card-foot[b-me1m1fyksh] {
    margin-top: 1.75rem;
    text-align: center;
    font-size: .82rem;
    color: var(--text-soft);
}

.mobile-only[b-me1m1fyksh] { display: none; }

/* ---------- Modo oscuro (controlado por el toggle · html.theme-dark) ---------- */
html.theme-dark .login-page[b-me1m1fyksh] {
    --surface: #111827;
    --surface-2: #0b1220;
    --text: #e5e7eb;
    --text-soft: #94a3b8;
    --border: #1f2a3c;
    --input-bg: #0f1729;
}

html.theme-dark .login-card[b-me1m1fyksh] { box-shadow: 0 30px 70px -25px rgba(0, 0, 0, .7); }
html.theme-dark .field-input:focus[b-me1m1fyksh] { box-shadow: 0 0 0 4px rgba(60, 120, 239, .22); }

html.theme-dark .login-alert[b-me1m1fyksh] {
    background: rgba(239, 68, 68, .14);
    border-color: rgba(239, 68, 68, .4);
    color: #fca5a5;
}

/* La barra glass se aclara levemente sobre el fondo oscuro del formulario */
html.theme-dark .login-topbar[b-me1m1fyksh] {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .1);
}

/* El loader sobre fondo oscuro: mas glow, mas contraste y textos claros. Sobre la
   tarjeta blanca los mismos valores se lavan, de ahi las dos variantes. */
html.theme-dark .login-page[b-me1m1fyksh] {
    --lo-fase: rgba(226, 232, 240, .62);
    --lo-pct: #ffffff;
    --lo-track: rgba(255, 255, 255, .1);
    --lo-onda: rgba(139, 124, 255, .55);
    --lo-onda-ok: rgba(56, 211, 159, .6);
    --lo-glow-a: rgba(109, 94, 240, .6);
    --lo-glow-b: rgba(109, 94, 240, .24);
    --lo-glow-ok-a: rgba(56, 211, 159, .55);
    --lo-glow-ok-b: rgba(56, 211, 159, .2);
}

/* ---------- Movimiento reducido ---------- */
/* Se apaga la decoracion (ondas, glow, onda de choque, chispas) y todas las
   transiciones del efecto; el tilde y la X aparecen ya dibujados. El PORCENTAJE
   sigue corriendo: es informacion sobre lo que esta pasando, no decoracion.
   Los tiempos del componente (600 / 300 / 350 / 400 ms) tampoco cambian. */
@media (prefers-reduced-motion: reduce) {
    .loader-glow[b-me1m1fyksh],
    .loader-waves[b-me1m1fyksh],
    .loader-sparks[b-me1m1fyksh] { display: none; }

    .card-content[b-me1m1fyksh],
    .card-logo[b-me1m1fyksh], .card-head[b-me1m1fyksh], .form-fade[b-me1m1fyksh], .card-foot[b-me1m1fyksh],
    .card-loader[b-me1m1fyksh],
    .loader-badge[b-me1m1fyksh],
    .loader-badge[b-me1m1fyksh]::before,
    .loader-badge[b-me1m1fyksh]::after,
    .submit-btn.is-morph[b-me1m1fyksh] { transition: none !important; }

    .badge-check[b-me1m1fyksh],
    .badge-cross[b-me1m1fyksh] {
        animation: none;
        stroke-dashoffset: 0;
    }

    .badge-cross[b-me1m1fyksh]  line:last-child { animation-delay: 0s; }
}

/* ---------- Responsive ---------- */
@media screen and (max-width: 900px) {
    .login-page[b-me1m1fyksh] { grid-template-columns: 1fr; }
    .login-brand[b-me1m1fyksh] { display: none; }
    .card-logo[b-me1m1fyksh] { display: block; }
    .mobile-only[b-me1m1fyksh] { display: inline; }
    .login-panel[b-me1m1fyksh] { background: var(--surface-2); }
}

@media screen and (max-width: 480px) {
    .login-topbar[b-me1m1fyksh] { top: .8rem; right: .8rem; padding: .3rem .45rem; gap: .4rem; }
    .login-panel[b-me1m1fyksh] { padding: 1rem; }
    .login-card[b-me1m1fyksh] {
        padding: 2rem 1.4rem;
        border: none;
        box-shadow: none;
        background: transparent;
    }

    /* En pantalla angosta el efecto se achica en bloque para no tocar los bordes */
    .loader-stage[b-me1m1fyksh], .loader-waves[b-me1m1fyksh] { width: 212px; height: 212px; }
    .loader-glow[b-me1m1fyksh] { width: 192px; height: 192px; }
    .loader-waves i[b-me1m1fyksh] { width: 118px; height: 118px; }
    .loader-arc[b-me1m1fyksh] { width: 154px; height: 154px; }
    .loader-fase[b-me1m1fyksh] { max-width: 132px; }
}
/* /Shared/ChatDock.razor.rz.scp.css */
/* Chat acoplado.
   Panel fijo a la derecha, por encima del contenido pero por debajo de los diálogos.
   El ancho vive en --dock-ancho para que el tirador lo pueda cambiar desde JS sin
   pasar por Blazor en cada movimiento del mouse. */

.chat-dock[b-w9rdhpjz7j] {
    --dock-ancho: 420px;

    position: fixed;
    top: 0;
    right: 0;
    z-index: 1200;

    width: var(--dock-ancho);
    max-width: 100vw;
    height: 100vh;

    display: flex;
    flex-direction: column;

    background: #ffffff;
    border-left: 1px solid #e9edf5;
    box-shadow: -18px 0 48px -24px rgba(15, 23, 42, .45);

    /* Cerrado se va del todo hacia afuera; no se usa display:none para que la salida anime. */
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .34s cubic-bezier(.2, .8, .2, 1), visibility 0s .34s;
}

.chat-dock.abierto[b-w9rdhpjz7j] {
    transform: none;
    visibility: visible;
    transition: transform .38s cubic-bezier(.2, .9, .25, 1), visibility 0s;
}

html.theme-dark .chat-dock[b-w9rdhpjz7j] {
    background: #0f1729;
    border-left-color: rgba(255, 255, 255, .08);
    box-shadow: -18px 0 48px -24px rgba(0, 0, 0, .7);
}

/* ---------- encabezado ---------- */
.chat-dock-head[b-w9rdhpjz7j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .7rem .9rem;
    border-bottom: 1px solid #e9edf5;
    background: #f8fafc;
    flex: 0 0 auto;
}

html.theme-dark .chat-dock-head[b-w9rdhpjz7j] {
    background: #131c30;
    border-bottom-color: rgba(255, 255, 255, .08);
}

.chat-dock-titulo[b-w9rdhpjz7j] {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-weight: 650;
    font-size: .92rem;
    color: #334155;
}

html.theme-dark .chat-dock-titulo[b-w9rdhpjz7j] { color: #cbd5e1; }

.chat-dock-acciones[b-w9rdhpjz7j] { display: flex; align-items: center; gap: .15rem; }

.chat-dock-acciones button[b-w9rdhpjz7j] {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    line-height: 1;
    transition: background .15s ease, color .15s ease, transform .16s ease;
}

.chat-dock-acciones button:hover[b-w9rdhpjz7j] {
    background: #eef2fb;
    color: #3c78ef;
    transform: translateY(-1px);
}

html.theme-dark .chat-dock-acciones button[b-w9rdhpjz7j] { color: #94a3b8; }
html.theme-dark .chat-dock-acciones button:hover[b-w9rdhpjz7j] { background: rgba(255, 255, 255, .08); color: #5b8cff; }

/* ---------- cuerpo ---------- */
.chat-dock-body[b-w9rdhpjz7j] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}

/* min-width:0 y no solo flex:1 — sin eso el layout es un flex item con min-width:auto y se
   planta en el ancho minimo de su contenido: en un panel de 420 px desbordaba 47 px y las
   burbujas quedaban cortadas contra el borde de la pantalla. */
.chat-dock-body[b-w9rdhpjz7j]  .chat-layout { flex: 1; min-width: 0; }

/* ---------- tirador de ancho ---------- */
.chat-dock-tirador[b-w9rdhpjz7j] {
    position: absolute;
    left: -3px;
    top: 0;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    z-index: 2;
    touch-action: none;
}

.chat-dock-tirador[b-w9rdhpjz7j]::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 46px;
    border-radius: 2px;
    background: transparent;
    transition: background .15s ease;
}

.chat-dock-tirador:hover[b-w9rdhpjz7j]::after { background: #3c78ef; }

@media (max-width: 640px) {
    .chat-dock[b-w9rdhpjz7j] { --dock-ancho: 100vw; }
    .chat-dock-tirador[b-w9rdhpjz7j] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .chat-dock[b-w9rdhpjz7j] { transition: none !important; }
}

/* Fijado: comparte la pantalla en vez de flotar sobre ella. La sombra grande deja
   de tener sentido —ya no hay nada debajo— y se cambia por un borde nitido. */
.chat-dock.fijado[b-w9rdhpjz7j] {
    box-shadow: none;
    border-left-width: 1px;
}

/* El boton de fijar queda marcado mientras esta activo. */
.chat-dock-acciones button.activo[b-w9rdhpjz7j] {
    background: rgba(60, 120, 239, .14);
    color: #2b56c9;
}

html.theme-dark .chat-dock-acciones button.activo[b-w9rdhpjz7j] {
    background: rgba(91, 140, 255, .22);
    color: #a9c4ff;
}
/* /Shared/ChipBeta.razor.rz.scp.css */
/* ============================================================================
   Chip "BETA"

   Dos variantes:
     .chip-beta               degradado de marca + texto blanco. Para superficies
                              claras: tarjeta del home y sidebar.
     .chip-beta-on-accent     pastilla solida de alto contraste. Para fondos que
                              YA son el acento (los headers de los cuatro SfDialog,
                              que pintan var(--cv-grad) de fondo).

   POR QUE EL CHIP NO LEE var(--cv-grad)
   -------------------------------------
   Lo natural seria usar var(--cv-grad, <reserva>), pero el extremo claro de ese
   token (#3c78ef) contra texto blanco da 4.10:1, o sea que NO llega al 4.5:1 que
   se toma como minimo duro de contraste. Asi que el chip usa un hermano del
   degradado de marca, corrido a un azul mas profundo (#2b56c9, que es el
   --cv-accent-ink que el configurador ya declara), y queda en 6.4:1 / 4.7:1.
   Es el mismo color de familia, dos pasos mas oscuro, y ademas hace que el chip
   se vea igual en los seis lugares en lugar de cambiar segun si el token existe.

   En oscuro el acento de la app es MAS claro (#5b8cff), asi que ahi se invierte:
   degradado claro con tinta oscura. Texto blanco sobre #5b8cff da 3.16:1 y no
   sirve.
   ============================================================================ */

.chip-beta[b-sbs1bby3yu] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    vertical-align: middle;
    padding: 2px 8px 2px 7px;
    border-radius: 999px;
    background: linear-gradient(100deg, #2b56c9, #6d5ef0);
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
    line-height: 1.6;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, .24);
    box-shadow: 0 3px 9px -3px rgba(43, 86, 201, .55);
    cursor: default;
    -webkit-user-select: none;
    user-select: none;
}

/* El punto es decorativo (aria-hidden): no transporta informacion, asi que no
   entra en la medicion de contraste. */
.chip-beta-dot[b-sbs1bby3yu] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .22);
    flex: 0 0 auto;
}

.chip-beta-text[b-sbs1bby3yu] {
    display: inline-block;
}

/* ── Oscuro: el acento de la app se aclara, asi que la tinta se oscurece ──── */
html.theme-dark .chip-beta[b-sbs1bby3yu] {
    background: linear-gradient(100deg, #5b8cff, #8b7bff);
    color: #0b1220;
    border-color: rgba(11, 18, 32, .22);
    box-shadow: 0 3px 10px -3px rgba(0, 0, 0, .6);
}

html.theme-dark .chip-beta-dot[b-sbs1bby3yu] {
    background: rgba(11, 18, 32, .78);
    box-shadow: 0 0 0 2px rgba(11, 18, 32, .16);
}

/* ── Variante sobre acento: los headers de los SfDialog ───────────────────── */
.chip-beta-on-accent[b-sbs1bby3yu] {
    background: rgba(255, 255, 255, .94);
    color: #2b56c9;
    border-color: rgba(255, 255, 255, .75);
    box-shadow: 0 2px 8px -3px rgba(0, 0, 0, .35);
}

.chip-beta-on-accent .chip-beta-dot[b-sbs1bby3yu] {
    background: rgba(43, 86, 201, .85);
    box-shadow: 0 0 0 2px rgba(43, 86, 201, .16);
}

/* En oscuro el header es un azul mas claro, asi que una pastilla clara pierde
   forma. Se invierte a pastilla oscura, que sobre ese azul da 14.6:1. */
html.theme-dark .chip-beta-on-accent[b-sbs1bby3yu] {
    background: rgba(8, 14, 26, .86);
    color: #fff;
    border-color: rgba(255, 255, 255, .28);
    box-shadow: 0 2px 8px -3px rgba(0, 0, 0, .55);
}

html.theme-dark .chip-beta-on-accent .chip-beta-dot[b-sbs1bby3yu] {
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .18);
}
/* /Shared/MainLayout.razor.rz.scp.css */
.page[b-lz9thvwq9g] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-lz9thvwq9g] {
    flex: 1;
}

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

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

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

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

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

@media (max-width: 640.98px) {
    .top-row:not(.auth)[b-lz9thvwq9g] {
        display: none;
    }

    .top-row.auth[b-lz9thvwq9g] {
        justify-content: space-between;
    }

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

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

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

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

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

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

.top-row {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand {
    font-size: 1.1rem;
}

.oi {
    width: 2rem;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: -2px;
}

.nav-item {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type {
        padding-top: 1rem;
    }

    .nav-item:last-of-type {
        padding-bottom: 1rem;
    }

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

.nav-item ::deep a.active {
    background-color: rgba(255,255,255,0.25);
    color: white;
}

.nav-item ::deep a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

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

    .collapse {*/
        /* Never collapse the sidebar for wide screens */
        /*display: block;
    }
    
    .nav-scrollable {*/
        /* Allow sidebar to scroll for tall menus */
        /*height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}*/
/* /Shared/SidebarMain.razor.rz.scp.css */
.sidebar[b-wyg902cikj] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

    .sidebar .top-row[b-wyg902cikj] {
        background-color: rgba(0,0,0,0.4);
    }

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

    .sidebar .oi[b-wyg902cikj] {
        width: 2rem;
        font-size: 1.1rem;
        vertical-align: text-top;
        top: -2px;
    }

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

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

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

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

        .nav-item a.active[b-wyg902cikj] {
            background-color: transparent;
            color: white;
        }

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

.content[b-wyg902cikj] {
    padding-top: 1.1rem;
}

.navbar-toggler[b-wyg902cikj] {
    background-color: rgba(255, 255, 255, 0.1);
}

.valid.modified:not([type=checkbox])[b-wyg902cikj] {
    outline: 1px solid #26b050;
}

.invalid[b-wyg902cikj] {
    outline: 1px solid red;
}

.validation-message[b-wyg902cikj] {
    color: red;
}

.planner-header .sb-table-cell[b-wyg902cikj] {
    padding-right: 6px;
    vertical-align: middle;
}

.planner-header .sb-github-btn[b-wyg902cikj] {
    width: 40px;
    opacity: 100;
    padding: 11px 8px;
    border-radius: 0px;
    border-width: 0px;
    font-family: "Roboto", "Segoe UI", "GeezaPro", "DejaVu Serif", "sans-serif";
    font-weight: 500;
    line-height: 18px;
    border-color: transparent;
    background: transparent;
}

.planner-header .github-image img[b-wyg902cikj] {
    filter: brightness(0) invert(100%);
}

@media (max-width: 767.98px) {
    .main .top-row[b-wyg902cikj] {
        display: none;
    }
}

@media (min-width: 768px) {
    app[b-wyg902cikj] {
        flex-direction: row;
    }

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

    .main .top-row[b-wyg902cikj] {
        position: sticky;
        top: 0;
    }

    .main > div[b-wyg902cikj] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }

    .navbar-toggler[b-wyg902cikj] {
        display: none;
    }

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

.nav-item.e-list-item[b-wyg902cikj] {
    height: 50px;
    line-height: 50px;
    padding: 0px;
    border-radius: 3px;
    border-bottom: 0px;
    align-items: center;
    color: #666;
    cursor: pointer;
}

    .nav-item.e-list-item:hover[b-wyg902cikj] {
        background-color: #f5f5f5;
        border-color: transparent;
        color: rgba(51,51,51,.87);
    }

ul.nav.flex-column[b-wyg902cikj] {
    margin: 0 16px;
    width: 210px;
}

.sideparent.menulist[b-wyg902cikj] {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif, "-apple-system", BlinkMacSystemFont;
    font-size: 12px;
    font-weight: 400;
}