/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ============================================================
   MainLayout.razor.css — Layout shell con sidebar + header
   ============================================================ */

.layout[b-dbkpk2cj7x] {
    min-height: 100vh;
    background: var(--color-bg);
    display: flex;
}

.layout__main[b-dbkpk2cj7x] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Header sticky con efecto cristal */
.layout__header[b-dbkpk2cj7x] {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    height: var(--header-height);
    padding: 0 var(--space-5);
    background: color-mix(in srgb, var(--color-bg) 85%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
}

/* Hamburger en móvil */
.layout__menu-btn[b-dbkpk2cj7x] {
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-items: center;
    border-radius: var(--radius-md);
    background: var(--color-surface-alt);
    color: var(--color-text);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-standard);
    flex-shrink: 0;
}

.layout__menu-btn:hover[b-dbkpk2cj7x] {
    background: var(--color-border);
}

.layout__menu-btn svg[b-dbkpk2cj7x] {
    width: 1.25rem;
    height: 1.25rem;
}

.layout__header-title[b-dbkpk2cj7x] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 1;
    min-width: 0;
}

.layout__env-pill[b-dbkpk2cj7x] {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    background: var(--color-accent-soft);
    color: var(--color-accent);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.layout__app-title[b-dbkpk2cj7x] {
    font-size: var(--text-lg);
    font-weight: var(--weight-semi);
    color: var(--color-text);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Bloque de usuario */
.layout__header-user[b-dbkpk2cj7x] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

.layout__user-greeting[b-dbkpk2cj7x] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.layout__user-name[b-dbkpk2cj7x] {
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Botón de icono (theme toggle) */
.layout__icon-btn[b-dbkpk2cj7x] {
    width: 2.25rem;
    height: 2.25rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard);
}

.layout__icon-btn:hover[b-dbkpk2cj7x] {
    background: var(--color-surface-alt);
    color: var(--color-text);
    border-color: var(--color-border-strong);
}

.layout__icon-btn svg[b-dbkpk2cj7x] {
    width: 1.125rem;
    height: 1.125rem;
}

/* Sun visible por defecto (light), moon en dark */
.layout__icon-moon[b-dbkpk2cj7x] { display: none; }

:root[data-theme="dark"] .layout__icon-sun[b-dbkpk2cj7x] { display: none; }
:root[data-theme="dark"] .layout__icon-moon[b-dbkpk2cj7x] { display: block; }
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;[b-dbkpk2cj7x]
}

.layout__logout[b-dbkpk2cj7x] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface-alt);
    color: var(--color-text);
    border-radius: var(--radius-md);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    transition: background var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard);
}

.layout__logout svg[b-dbkpk2cj7x] {
    width: 1rem;
    height: 1rem;
}

.layout__logout:hover[b-dbkpk2cj7x] {
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

.layout__logout:focus-visible[b-dbkpk2cj7x] {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Contenido */
.layout__content[b-dbkpk2cj7x] {
    flex: 1;
    padding: var(--space-6) var(--space-5);
    max-width: 100%;
    min-width: 0;
}

/* === Móvil: ocultar saludo, ocultar pill === */
@media (max-width: 767.98px) {
    .layout__user-greeting[b-dbkpk2cj7x],
    .layout__env-pill[b-dbkpk2cj7x] {
        display: none;
    }

    .layout__user-name[b-dbkpk2cj7x] {
        max-width: 8rem;
    }

    .layout__logout span[b-dbkpk2cj7x] {
        display: none;
    }

    .layout__content[b-dbkpk2cj7x] {
        padding: var(--space-4) var(--space-4);
    }
}

/* === Escritorio: sidebar visible, hamburger oculto, content desplazado === */
@media (min-width: 768px) {
    .layout__menu-btn[b-dbkpk2cj7x] {
        display: none;
    }

    .layout__main[b-dbkpk2cj7x] {
        margin-left: var(--sidebar-width);
        transition: margin-left var(--duration-base) var(--ease-standard);
    }

    :root[data-sidebar="collapsed"] .layout__main[b-dbkpk2cj7x] {
        margin-left: var(--sidebar-width-collapsed);
    }

    .layout__content[b-dbkpk2cj7x] {
        padding: var(--space-8) var(--space-8);
        max-width: var(--content-max);
        width: 100%;
    }
}

/* Error UI */
#blazor-error-ui[b-dbkpk2cj7x] {
    color-scheme: light only;
    background: var(--color-warning-soft);
    color: var(--gray-800);
    bottom: 0;
    box-shadow: var(--shadow-lg);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: var(--space-3) var(--space-5);
    position: fixed;
    width: 100%;
    z-index: var(--z-toast);
    font-size: var(--text-sm);
}

#blazor-error-ui .dismiss[b-dbkpk2cj7x] {
    cursor: pointer;
    position: absolute;
    right: var(--space-3);
    top: var(--space-2);
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ============================================================
   NavMenu.razor.css — Sidebar moderno
   Escritorio (≥768px): fija a la izquierda, ancho 260px
   Móvil (<768px): drawer deslizante con overlay
   ============================================================ */

.nav__toggle-state[b-8kieaucp4f] {
    display: none;
}

/* Overlay en móvil */
.nav__overlay[b-8kieaucp4f] {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: var(--z-overlay);
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-standard);
    cursor: pointer;
}

/* Sidebar */
.nav[b-8kieaucp4f] {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: var(--z-drawer);
    width: var(--sidebar-width);
    background: linear-gradient(180deg, var(--gray-900) 0%, var(--brand-900) 100%);
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform var(--duration-base) var(--ease-standard);
    box-shadow: var(--shadow-xl);
}

/* Brand area */
.nav__brand[b-8kieaucp4f] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    min-height: var(--header-height);
}

.nav__brand-link[b-8kieaucp4f] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    color: inherit;
    flex: 1;
    min-width: 0;
}

.nav__brand-mark[b-8kieaucp4f] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--brand-400) 0%, var(--brand-600) 100%);
    display: grid;
    place-items: center;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgb(23 107 135 / 0.4);
}

.nav__brand-mark svg[b-8kieaucp4f] {
    width: 1.25rem;
    height: 1.25rem;
}

.nav__brand-text[b-8kieaucp4f] {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    min-width: 0;
}

.nav__brand-name[b-8kieaucp4f] {
    color: white;
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    letter-spacing: -0.01em;
}

.nav__brand-subtitle[b-8kieaucp4f] {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.7rem;
    font-weight: var(--weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.15rem;
}

.nav__close[b-8kieaucp4f] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
    border: none;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background var(--duration-fast) var(--ease-standard);
}

.nav__close:hover[b-8kieaucp4f] {
    background: rgba(255, 255, 255, 0.14);
    color: white;
}

.nav__close svg[b-8kieaucp4f] {
    width: 1.125rem;
    height: 1.125rem;
}

/* Botón de colapsar (solo escritorio) */
.nav__collapse-btn[b-8kieaucp4f] {
    display: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
    border: none;
    cursor: pointer;
    place-items: center;
    transition: background var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard);
}

.nav__collapse-btn:hover[b-8kieaucp4f] {
    background: rgba(255, 255, 255, 0.12);
    color: white;
}

.nav__collapse-btn svg[b-8kieaucp4f] {
    width: 1rem;
    height: 1rem;
}

.nav__collapse-icon-in[b-8kieaucp4f] { display: none; }

/* En estado colapsado: invertir el icono */
:root[data-sidebar="collapsed"] .nav__collapse-icon-out[b-8kieaucp4f] { display: none; }
:root[data-sidebar="collapsed"] .nav__collapse-icon-in[b-8kieaucp4f] { display: block; }

/* Lista de enlaces */
.nav__list[b-8kieaucp4f] {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4) var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.nav__section-label[b-8kieaucp4f] {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.7rem;
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: var(--space-4) var(--space-3) var(--space-2);
}

.nav__section-label:first-child[b-8kieaucp4f] {
    margin-top: var(--space-1);
}

.nav__link[b-8kieaucp4f] {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: 1.2;
    transition: background var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard);
}

.nav__link[b-8kieaucp4f]  .nav__link-icon {
    width: 1.25rem;
    height: 1.25rem;
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.55);
    transition: color var(--duration-fast) var(--ease-standard);
}

.nav__link[b-8kieaucp4f]  .nav__link-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.nav__link[b-8kieaucp4f]  .nav__link-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav__link:hover[b-8kieaucp4f] {
    background: rgba(255, 255, 255, 0.06);
    color: white;
}

.nav__link:hover[b-8kieaucp4f]  .nav__link-icon {
    color: var(--brand-300);
}

[b-8kieaucp4f] .nav__link.active {
    background: linear-gradient(135deg, rgb(23 107 135 / 0.55) 0%, rgb(23 107 135 / 0.3) 100%);
    color: white;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

[b-8kieaucp4f] .nav__link.active::before {
    content: "";
    position: absolute;
    left: -3px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: var(--brand-300);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

[b-8kieaucp4f] .nav__link.active .nav__link-icon {
    color: var(--brand-200);
}

.nav__link:focus-visible[b-8kieaucp4f] {
    outline: 2px solid var(--brand-300);
    outline-offset: 2px;
}

/* User card en el footer del sidebar */
.nav__user[b-8kieaucp4f] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    margin: var(--space-3);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
}

.nav__user-avatar[b-8kieaucp4f] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--brand-400) 0%, var(--brand-600) 100%);
    color: white;
    display: grid;
    place-items: center;
    font-weight: var(--weight-bold);
    font-size: var(--text-sm);
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}

.nav__user-info[b-8kieaucp4f] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.nav__user-name[b-8kieaucp4f] {
    color: white;
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav__user-role[b-8kieaucp4f] {
    color: rgba(255, 255, 255, 0.5);
    font-size: var(--text-xs);
    margin-top: 0.15rem;
}

.nav__user-action[b-8kieaucp4f] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-md);
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: background var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard);
}

.nav__user-action:hover[b-8kieaucp4f] {
    background: rgba(220, 38, 38, 0.15);
    color: #fca5a5;
}

.nav__user-action svg[b-8kieaucp4f] {
    width: 1.125rem;
    height: 1.125rem;
}

/* === Móvil: comportamiento drawer === */
@media (max-width: 767.98px) {
    .nav__toggle-state:checked ~ .nav__overlay[b-8kieaucp4f] {
        display: block;
        opacity: 1;
    }

    .nav__toggle-state:checked ~ .nav[b-8kieaucp4f] {
        transform: translateX(0);
    }
}

/* === Escritorio: sidebar fija visible === */
@media (min-width: 768px) {
    .nav[b-8kieaucp4f] {
        transform: translateX(0);
        transition: width var(--duration-base) var(--ease-standard);
    }

    .nav__close[b-8kieaucp4f] {
        display: none;
    }

    .nav__collapse-btn[b-8kieaucp4f] {
        display: grid;
    }

    .nav__overlay[b-8kieaucp4f] {
        display: none !important;
    }

    /* === Estado colapsado === */
    :root[data-sidebar="collapsed"] .nav[b-8kieaucp4f] {
        width: var(--sidebar-width-collapsed);
    }

    :root[data-sidebar="collapsed"] .nav__brand[b-8kieaucp4f] {
        padding: var(--space-3);
        justify-content: center;
    }

    :root[data-sidebar="collapsed"] .nav__brand-text[b-8kieaucp4f],
    :root[data-sidebar="collapsed"] .nav__section-label[b-8kieaucp4f],
    :root[data-sidebar="collapsed"][b-8kieaucp4f]  .nav__link-text,
    :root[data-sidebar="collapsed"] .nav__user-info[b-8kieaucp4f],
    :root[data-sidebar="collapsed"] .nav__user-action[b-8kieaucp4f] {
        display: none;
    }

    :root[data-sidebar="collapsed"] .nav__list[b-8kieaucp4f] {
        padding: var(--space-3) var(--space-2);
        align-items: center;
    }

    :root[data-sidebar="collapsed"] .nav__link[b-8kieaucp4f] {
        padding: var(--space-3);
        justify-content: center;
        width: 2.75rem;
        height: 2.75rem;
    }

    :root[data-sidebar="collapsed"] .nav__user[b-8kieaucp4f] {
        padding: var(--space-2);
        margin: var(--space-2);
        justify-content: center;
    }

    /* Tooltip nativo al hacer hover en links colapsados */
    :root[data-sidebar="collapsed"] .nav__link[b-8kieaucp4f] {
        position: relative;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-zgm6khuytq],
.components-reconnect-repeated-attempt-visible[b-zgm6khuytq],
.components-reconnect-failed-visible[b-zgm6khuytq],
.components-pause-visible[b-zgm6khuytq],
.components-resume-failed-visible[b-zgm6khuytq],
.components-rejoining-animation[b-zgm6khuytq] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-zgm6khuytq],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-zgm6khuytq],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-zgm6khuytq],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-zgm6khuytq],
#components-reconnect-modal.components-reconnect-retrying[b-zgm6khuytq],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-zgm6khuytq],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-zgm6khuytq],
#components-reconnect-modal.components-reconnect-failed[b-zgm6khuytq],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-zgm6khuytq] {
    display: block;
}


#components-reconnect-modal[b-zgm6khuytq] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-zgm6khuytq 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-zgm6khuytq 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-zgm6khuytq 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-zgm6khuytq]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-zgm6khuytq 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-zgm6khuytq {
    0% {
        transform: translateY(30px) scale(0.95);
    }

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

@keyframes components-reconnect-modal-fadeInOpacity-b-zgm6khuytq {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-zgm6khuytq {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-zgm6khuytq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-zgm6khuytq] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-zgm6khuytq] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-zgm6khuytq] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-zgm6khuytq] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-zgm6khuytq] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-zgm6khuytq] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-zgm6khuytq 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-zgm6khuytq] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-zgm6khuytq {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ============================================================
   Home.razor.css — Dashboard de inicio
   Hero con CTA + grid de tarjetas de módulos
   ============================================================ */

/* === Hero === */
.home-hero[b-cgcsmd2ag3] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    background: linear-gradient(135deg, var(--brand-700) 0%, var(--brand-500) 60%, var(--brand-600) 100%);
    color: white;
    border-radius: var(--radius-xl);
    padding: var(--space-10) var(--space-8);
    margin-bottom: var(--space-8);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    isolation: isolate;
}

.home-hero[b-cgcsmd2ag3]::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.18) 0%, transparent 45%),
        radial-gradient(circle at 90% 80%, rgba(255,255,255,0.12) 0%, transparent 50%);
    z-index: -1;
}

.home-hero__content[b-cgcsmd2ag3] {
    flex: 1;
    min-width: 0;
    max-width: 38rem;
}

.home-hero[b-cgcsmd2ag3]  .eyebrow {
    color: rgba(255, 255, 255, 0.85);
}

.home-hero__title[b-cgcsmd2ag3] {
    font-size: clamp(1.75rem, 1.5rem + 1.4vw, 2.75rem);
    font-weight: var(--weight-bold);
    letter-spacing: -0.02em;
    line-height: var(--leading-tight);
    margin: 0 0 var(--space-3);
    color: white;
}

.home-hero[b-cgcsmd2ag3]  .section-note {
    color: rgba(255, 255, 255, 0.88);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    max-width: 36rem;
}

.home-hero__actions[b-cgcsmd2ag3] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.home-hero__actions[b-cgcsmd2ag3]  .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
}

.home-hero__actions[b-cgcsmd2ag3]  .btn svg {
    width: 1.125rem;
    height: 1.125rem;
}

.home-hero__actions[b-cgcsmd2ag3]  .btn-secondary {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    color: white;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.home-hero__actions[b-cgcsmd2ag3]  .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    color: white;
}

.home-hero__decoration[b-cgcsmd2ag3] {
    flex-shrink: 0;
    width: 12rem;
    height: 12rem;
    color: rgba(255, 255, 255, 0.18);
    display: grid;
    place-items: center;
}

.home-hero__decoration svg[b-cgcsmd2ag3] {
    width: 100%;
    height: 100%;
}

/* === Grid de tarjetas === */
.home-grid[b-cgcsmd2ag3] {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.home-card[b-cgcsmd2ag3] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-xs);
    transition: transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard);
}

.home-card:not(.home-card--muted):hover[b-cgcsmd2ag3] {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-accent);
    color: inherit;
}

.home-card--muted[b-cgcsmd2ag3] {
    background: var(--color-surface-alt);
    cursor: default;
}

/* Icono */
.home-card__icon[b-cgcsmd2ag3] {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-md);
    display: grid;
    place-items: center;
    color: white;
}

.home-card__icon svg[b-cgcsmd2ag3] {
    width: 1.5rem;
    height: 1.5rem;
}

.home-card__icon--brand[b-cgcsmd2ag3] {
    background: linear-gradient(135deg, var(--brand-400) 0%, var(--brand-600) 100%);
}

.home-card__icon--info[b-cgcsmd2ag3] {
    background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
}

.home-card__icon--warning[b-cgcsmd2ag3] {
    background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
}

.home-card__icon--success[b-cgcsmd2ag3] {
    background: linear-gradient(135deg, #4ade80 0%, #16a34a 100%);
}

/* Body */
.home-card__body[b-cgcsmd2ag3] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.home-card__label[b-cgcsmd2ag3] {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.home-card--muted .home-card__label[b-cgcsmd2ag3] {
    color: var(--color-text-muted);
}

.home-card__title[b-cgcsmd2ag3] {
    font-size: var(--text-lg);
    font-weight: var(--weight-semi);
    color: var(--color-text);
    margin: 0;
    letter-spacing: -0.01em;
    line-height: var(--leading-snug);
}

.home-card__text[b-cgcsmd2ag3] {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: var(--leading-normal);
    margin: 0;
}

.home-card__arrow[b-cgcsmd2ag3] {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-text-muted);
    flex-shrink: 0;
    margin-top: var(--space-1);
    transition: transform var(--duration-base) var(--ease-out),
                color var(--duration-fast) var(--ease-standard);
}

.home-card:hover .home-card__arrow[b-cgcsmd2ag3] {
    transform: translateX(4px);
    color: var(--color-accent);
}

/* === Responsive === */
@media (max-width: 768px) {
    .home-hero[b-cgcsmd2ag3] {
        flex-direction: column;
        align-items: flex-start;
        padding: var(--space-8) var(--space-5);
    }

    .home-hero__decoration[b-cgcsmd2ag3] {
        display: none;
    }
}
/* /Components/Pages/Login.razor.rz.scp.css */
/* ============================================================
   Login.razor.css — Pantalla de autenticación
   Layout split (brand + form) en escritorio, columna en móvil.
   ============================================================ */

.login[b-t45hwx2ymi] {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
    background: var(--color-bg);
}

/* === Panel de marca (izquierda) === */
.login__brand-panel[b-t45hwx2ymi] {
    display: none;
    position: relative;
    overflow: hidden;
    color: white;
    padding: var(--space-12) var(--space-10);
    flex-direction: column;
    justify-content: space-between;
    isolation: isolate;
}

.login__brand-bg[b-t45hwx2ymi] {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,0.18) 0%, transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(255,255,255,0.12) 0%, transparent 50%),
        linear-gradient(135deg, var(--brand-700) 0%, var(--brand-500) 50%, var(--brand-800) 100%);
}

.login__brand-bg[b-t45hwx2ymi]::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(45deg, transparent 0 40px, rgba(255,255,255,0.025) 40px 41px);
    mix-blend-mode: overlay;
}

.login__brand-content[b-t45hwx2ymi] {
    max-width: 28rem;
}

.login__logo[b-t45hwx2ymi] {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: grid;
    place-items: center;
    margin-bottom: var(--space-8);
    box-shadow: var(--shadow-md);
}

.login__logo svg[b-t45hwx2ymi] {
    width: 1.75rem;
    height: 1.75rem;
}

.login__brand-title[b-t45hwx2ymi] {
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: var(--weight-bold);
    letter-spacing: -0.03em;
    line-height: 1;
    margin: 0 0 var(--space-3);
}

.login__brand-tagline[b-t45hwx2ymi] {
    font-size: var(--text-lg);
    font-weight: var(--weight-medium);
    color: rgba(255,255,255,0.9);
    line-height: var(--leading-snug);
    margin: 0 0 var(--space-10);
}

.login__brand-features[b-t45hwx2ymi] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-3);
}

.login__brand-features li[b-t45hwx2ymi] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: rgba(255,255,255,0.92);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}

.login__brand-features li span[b-t45hwx2ymi] {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--radius-full);
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.3);
    display: grid;
    place-items: center;
    font-size: 0.75rem;
    font-weight: var(--weight-bold);
    flex-shrink: 0;
}

.login__copyright[b-t45hwx2ymi] {
    font-size: var(--text-xs);
    color: rgba(255,255,255,0.6);
    margin: 0;
}

/* === Panel de formulario (derecha) === */
.login__form-panel[b-t45hwx2ymi] {
    display: grid;
    place-items: center;
    padding: var(--space-6);
    min-height: 100vh;
}

.login__card[b-t45hwx2ymi] {
    width: 100%;
    max-width: 26rem;
    background: var(--color-surface);
    border-radius: var(--radius-2xl);
    padding: var(--space-10) var(--space-8);
    box-shadow: var(--shadow-xs);
    animation: card-in-b-t45hwx2ymi var(--duration-slow) var(--ease-out);
}

@keyframes card-in-b-t45hwx2ymi {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.login__header[b-t45hwx2ymi] {
    margin-bottom: var(--space-8);
}

.login__eyebrow[b-t45hwx2ymi] {
    color: var(--color-accent);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 var(--space-2);
}

.login__title[b-t45hwx2ymi] {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    letter-spacing: -0.02em;
    line-height: var(--leading-tight);
    margin: 0 0 var(--space-2);
}

.login__subtitle[b-t45hwx2ymi] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin: 0;
}

/* === Alert === */
.login__alert[b-t45hwx2ymi] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    background: var(--color-danger-soft);
    color: var(--color-danger);
    border-left: 3px solid var(--color-danger);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    margin-bottom: var(--space-5);
    animation: alert-in-b-t45hwx2ymi var(--duration-base) var(--ease-out);
}

.login__alert svg[b-t45hwx2ymi] {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

@keyframes alert-in-b-t45hwx2ymi {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* === Formulario === */
.login__form[b-t45hwx2ymi] {
    display: grid;
    gap: var(--space-5);
}

.login__field[b-t45hwx2ymi] {
    display: grid;
    gap: var(--space-2);
}

.login__label[b-t45hwx2ymi] {
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
}

.login__input-group[b-t45hwx2ymi] {
    position: relative;
    display: flex;
    align-items: center;
}

.login__input-icon[b-t45hwx2ymi] {
    position: absolute;
    left: var(--space-3);
    width: 1.125rem;
    height: 1.125rem;
    color: var(--color-text-muted);
    pointer-events: none;
    transition: color var(--duration-fast) var(--ease-standard);
}

.login__input[b-t45hwx2ymi] {
    width: 100%;
    height: 2.875rem;
    padding: 0 var(--space-4) 0 2.625rem;
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-family: inherit;
    font-size: var(--text-base);
    transition: border-color var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-fast) var(--ease-standard),
                background var(--duration-fast) var(--ease-standard);
}

.login__input[b-t45hwx2ymi]::placeholder {
    color: var(--color-text-muted);
    opacity: 0.7;
}

.login__input:hover:not(:focus)[b-t45hwx2ymi] {
    border-color: var(--color-border-strong);
}

.login__input:focus[b-t45hwx2ymi] {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: var(--shadow-glow);
    background: var(--color-surface);
}

.login__input:focus + .login__input-icon[b-t45hwx2ymi],
.login__input-group:focus-within .login__input-icon[b-t45hwx2ymi] {
    color: var(--color-accent);
}

/* === Submit === */
.login__submit[b-t45hwx2ymi] {
    height: 2.875rem;
    margin-top: var(--space-2);
    background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-600) 100%);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: var(--text-base);
    font-weight: var(--weight-semi);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    box-shadow: var(--shadow-sm);
    transition: transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-standard),
                background var(--duration-fast) var(--ease-standard);
}

.login__submit svg[b-t45hwx2ymi] {
    width: 1.125rem;
    height: 1.125rem;
    transition: transform var(--duration-base) var(--ease-out);
}

.login__submit:hover[b-t45hwx2ymi] {
    background: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-700) 100%);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.login__submit:hover svg[b-t45hwx2ymi] {
    transform: translateX(3px);
}

.login__submit:active[b-t45hwx2ymi] {
    transform: translateY(0);
    box-shadow: var(--shadow-xs);
}

.login__submit:focus-visible[b-t45hwx2ymi] {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

/* === Footer === */
.login__footer[b-t45hwx2ymi] {
    margin-top: var(--space-8);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
    text-align: center;
}

.login__footer p[b-t45hwx2ymi] {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    margin: 0;
}

/* === Responsive: split desde 900px === */
@media (min-width: 900px) {
    .login[b-t45hwx2ymi] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .login__brand-panel[b-t45hwx2ymi] {
        display: flex;
    }
}

@media (min-width: 1280px) {
    .login[b-t45hwx2ymi] {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    }

    .login__brand-panel[b-t45hwx2ymi] {
        padding: var(--space-16) var(--space-12);
    }

    .login__card[b-t45hwx2ymi] {
        padding: var(--space-12) var(--space-10);
    }
}