/* /Components/Layout/AccessibilityWidget.razor.rz.scp.css */
.a11y-widget[b-bnvf8v2nyj] {
    position: fixed;
    bottom: 33vh;
    right: 20px;
    z-index: 500;
}

.a11y-trigger[b-bnvf8v2nyj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: var(--synbex-primary);
    color: #ffffff;
    font-size: 22px;
    cursor: pointer;
    box-shadow: var(--synbex-shadow);
    transition: transform 0.15s ease;
}

.a11y-trigger:hover[b-bnvf8v2nyj] {
    transform: scale(1.06);
}

.a11y-panel[b-bnvf8v2nyj] {
    position: absolute;
    bottom: calc(100% + 12px);
    right: 0;
    width: 280px;
    max-width: calc(100vw - 40px);
    background: var(--synbex-surface);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-lg);
    box-shadow: var(--synbex-shadow);
    overflow: hidden;
}

.a11y-panel-header[b-bnvf8v2nyj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--synbex-border);
    font-weight: 700;
    font-size: 14px;
    color: var(--synbex-text);
}

.a11y-panel-close[b-bnvf8v2nyj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: var(--synbex-radius-md);
    background: transparent;
    color: var(--synbex-text-muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.a11y-panel-close:hover[b-bnvf8v2nyj] {
    background: var(--synbex-primary-soft);
    color: var(--synbex-text);
}

.a11y-panel-body[b-bnvf8v2nyj] {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.a11y-row[b-bnvf8v2nyj] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid var(--synbex-border);
}

.a11y-row-label[b-bnvf8v2nyj] {
    font-size: 14px;
    color: var(--synbex-text);
}

.a11y-scale-controls[b-bnvf8v2nyj] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.a11y-scale-btn[b-bnvf8v2nyj] {
    width: 32px;
    height: 32px;
    border-radius: var(--synbex-radius-md);
    border: 1px solid var(--synbex-border);
    background: transparent;
    color: var(--synbex-text);
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease;
}

.a11y-scale-btn:hover:not(:disabled)[b-bnvf8v2nyj] {
    background: var(--synbex-primary-soft);
}

.a11y-scale-btn:disabled[b-bnvf8v2nyj] {
    opacity: 0.4;
    cursor: not-allowed;
}

.a11y-scale-value[b-bnvf8v2nyj] {
    font-size: 13px;
    color: var(--synbex-text-muted);
    min-width: 40px;
    text-align: center;
}

.a11y-reset[b-bnvf8v2nyj] {
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: var(--synbex-radius-md);
    border: 1px solid var(--synbex-border);
    background: transparent;
    color: var(--synbex-text-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.a11y-reset:hover[b-bnvf8v2nyj] {
    background: var(--synbex-primary-soft);
    color: var(--synbex-text);
}

@media (max-width: 600px) {
    /* 78px (no 20px) porque en las pantallas autenticadas la barra inferior
       (MobileTabBar) ocupa esa esquina — así el botón queda arriba de ella.
       AccessibilityWidget es global (vive también en el login, sin esa barra),
       así que no hay forma de diferenciar por CSS; se usa el mismo valor más
       alto en ambos casos. */
    .a11y-widget[b-bnvf8v2nyj] {
        bottom: 78px;
        right: 16px;
    }
}
/* /Components/Layout/BulkSendOverlay.razor.rz.scp.css */
/* El marco (.loading-overlay / .loading-overlay-card / spinner / message) es
   global y vive en app.css — acá solo va lo propio del envío masivo. */

.bulk-send-card[b-h8hu68bnko] {
    max-width: 380px;
    width: calc(100vw - 40px);
}

.bulk-send-progress[b-h8hu68bnko] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: -4px;
}

.bulk-send-bar[b-h8hu68bnko] {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: var(--synbex-primary-soft);
    overflow: hidden;
}

.bulk-send-bar-fill[b-h8hu68bnko] {
    height: 100%;
    border-radius: 999px;
    background: var(--synbex-primary);
    transition: width 0.35s ease;
}

.bulk-send-count[b-h8hu68bnko] {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    /* Tabular para que el número no baile de ancho al pasar de 9 a 10 a 100. */
    font-variant-numeric: tabular-nums;
    color: var(--synbex-text-muted);
}

.bulk-send-count-failed[b-h8hu68bnko] {
    color: var(--synbex-danger);
}

/* ---- Fase "listo": palomita que se dibuja sola ---- */

.bulk-send-check svg[b-h8hu68bnko] {
    width: 56px;
    height: 56px;
}

.bulk-send-check-circle[b-h8hu68bnko] {
    fill: none;
    stroke: var(--synbex-success);
    stroke-width: 3;
    stroke-dasharray: 151;
    stroke-dashoffset: 151;
    animation: bulk-send-draw-b-h8hu68bnko 0.45s ease-out forwards;
}

.bulk-send-check-mark[b-h8hu68bnko] {
    fill: none;
    stroke: var(--synbex-success);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: bulk-send-draw-b-h8hu68bnko 0.3s 0.4s ease-out forwards;
}

@keyframes bulk-send-draw-b-h8hu68bnko {
    to {
        stroke-dashoffset: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bulk-send-check-circle[b-h8hu68bnko],
    .bulk-send-check-mark[b-h8hu68bnko] {
        animation: none;
        stroke-dashoffset: 0;
    }
}

/* ---- Fase "con fallos" ---- */

.bulk-send-warn[b-h8hu68bnko] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--synbex-danger-soft);
    color: var(--synbex-danger);
}

.bulk-send-warn svg[b-h8hu68bnko] {
    width: 28px;
    height: 28px;
}

.bulk-send-failed-title[b-h8hu68bnko] {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--synbex-danger);
}

.bulk-send-failed-list[b-h8hu68bnko] {
    width: 100%;
    max-height: 190px;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}

.bulk-send-failed-list li[b-h8hu68bnko] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 8px 10px;
    border-radius: var(--synbex-radius-md);
    background: var(--synbex-danger-soft);
}

.bulk-send-failed-mail[b-h8hu68bnko] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--synbex-text);
    /* Un correo largo no debe estirar la tarjeta ni desbordarla. */
    overflow-wrap: anywhere;
}

.bulk-send-failed-reason[b-h8hu68bnko] {
    font-size: 11.5px;
    color: var(--synbex-text-muted);
}

.bulk-send-failed-more[b-h8hu68bnko] {
    margin: 0;
    font-size: 12px;
    color: var(--synbex-text-muted);
}
/* /Components/Layout/DashboardLayout.razor.rz.scp.css */
.dashboard[b-6zci9ow8vv] {
    display: flex;
    min-height: calc(100vh / var(--synbex-a11y-zoom, 1));
    background: var(--synbex-bg);
}

.dashboard-sidebar[b-6zci9ow8vv] {
    width: 240px;
    flex-shrink: 0;
    background: var(--synbex-surface);
    border-right: 1px solid var(--synbex-border);
    display: flex;
    flex-direction: column;
    padding: 20px 16px;
    box-sizing: border-box;
}

/* En escritorio, .dashboard-sidebar es un hijo flex de .dashboard sin altura
   propia — por default (align-items: stretch) se estira para igualar la altura
   del contenido principal. Con una pantalla larga (muchos datos), el menú se
   estiraba igual de largo y "Mejorar plan"/derechos de autor (van al final con
   margin-top:auto en .dashboard-nav-bottom) quedaban muy por debajo de la
   pantalla, obligando a bajar hasta el final del contenido para verlos.
   position:sticky con su propia altura de viewport lo clava a la altura de la
   pantalla sin importar cuánto crezca el contenido de al lado; si el propio menú
   tuviera más ítems de los que caben, se desplaza internamente (overflow-y).
   Solo en escritorio: en celular el menú ya es un cajón flotante aparte (ver
   @media max-width:900px más abajo), con su propio height:100vh. */
@media (min-width: 901px) {
    .dashboard-sidebar[b-6zci9ow8vv] {
        position: sticky;
        top: 0;
        height: calc(100vh / var(--synbex-a11y-zoom, 1));
        overflow-y: auto;
    }
}

.dashboard-brand[b-6zci9ow8vv] {
    display: flex;
    align-items: center;
    padding: 0 8px;
    margin-bottom: 32px;
}

.dashboard-brand-badge[b-6zci9ow8vv] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 13px 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--synbex-primary), var(--synbex-primary-hover));
    box-sizing: border-box;
}

.dashboard-brand-mark[b-6zci9ow8vv] {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 17px;
    flex-shrink: 0;
}

.dashboard-brand-name[b-6zci9ow8vv] {
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.01em;
    color: #fff;
}

.dashboard-brand-logo[b-6zci9ow8vv] {
    width: 100%;
    height: 60px;
    object-fit: contain;
}

.dashboard-sidebar-footer[b-6zci9ow8vv] {
    text-align: center;
}

.dashboard-copyright[b-6zci9ow8vv] {
    display: block;
    font-size: 11px;
    line-height: 1.4;
    color: var(--synbex-text-muted);
}

.dashboard-nav[b-6zci9ow8vv] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* NavLink renderiza su <a> dentro de un componente del framework: hace falta
   ::deep para que el CSS aislado de este layout lo alcance (mismo motivo que
   InputText en Login.razor.css). */
[b-6zci9ow8vv] .dashboard-nav-link {
    display: block;
    padding: 9px 12px;
    border-radius: var(--synbex-radius-md);
    font-size: 14px;
    font-weight: 500;
    color: var(--synbex-text-muted);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

[b-6zci9ow8vv] .dashboard-nav-link:hover {
    background: var(--synbex-primary-soft);
    color: var(--synbex-text);
}

[b-6zci9ow8vv] .dashboard-nav-link.active {
    background: var(--synbex-primary-soft);
    color: var(--synbex-primary);
    font-weight: 600;
}

.dashboard-nav-bottom[b-6zci9ow8vv] {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--synbex-border);
}

.dashboard-nav-toggle[b-6zci9ow8vv] {
    cursor: pointer;
    list-style: none;
    position: relative;
    padding-right: 30px;
}

/* Chrome/Safari también dibujan su propio triángulo nativo aparte del ::marker;
   list-style:none no lo quita ahí, hay que apagarlo explícito. */
.dashboard-nav-toggle[b-6zci9ow8vv]::-webkit-details-marker {
    display: none;
}

.dashboard-nav-toggle[b-6zci9ow8vv]::marker {
    content: "";
}

.dashboard-nav-toggle:has(.dashboard-nav-toggle-label)[b-6zci9ow8vv] {
    padding: 0 30px 0 0;
}

[b-6zci9ow8vv] .dashboard-nav-toggle-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    color: inherit;
    text-decoration: none;
}

[b-6zci9ow8vv] .dashboard-nav-link-icon {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dashboard-nav-icon[b-6zci9ow8vv] {
    display: inline-flex;
    flex-shrink: 0;
    opacity: 0.85;
}

.dashboard-nav-icon svg[b-6zci9ow8vv] {
    width: 18px;
    height: 18px;
}

/* Flecha explícita de "esto se puede expandir" — más clara que el triángulo
   nativo del <summary>, que muchos usuarios no notan que es clicable. */
.dashboard-nav-toggle[b-6zci9ow8vv]::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--synbex-text-muted);
    border-bottom: 2px solid var(--synbex-text-muted);
    transform: translateY(-65%) rotate(45deg);
    transition: transform 0.15s ease, border-color 0.15s ease;
}

/* Se marca como activo mientras el <details> está expandido — nada que ver con
   la página actual, es puro estado abierto/cerrado del propio submenú, reactivo
   de inmediato porque usa el atributo nativo `open` (sin JS ni C#). */
details[open] > .dashboard-nav-toggle[b-6zci9ow8vv] {
    background: var(--synbex-primary-soft) !important;
    color: var(--synbex-primary) !important;
    font-weight: 600;
}

details[open] > .dashboard-nav-toggle[b-6zci9ow8vv]::after {
    transform: translateY(-35%) rotate(-135deg);
    border-color: var(--synbex-primary);
}

/* Círculo indicador al inicio de cada ítem de submenú, incluidos los que a su vez
   abren otro submenú (ej. "Registros" dentro de "Portería") — la flecha de la
   derecha ya avisa que se puede expandir, pero sin el punto a la izquierda un
   sub-submenú se veía distinto al resto de ítems de su misma lista y pasaba
   desapercibido como parte del menú. */
.dashboard-nav-submenu[b-6zci9ow8vv]  .dashboard-nav-link:not(.dashboard-nav-toggle),
.dashboard-nav-submenu[b-6zci9ow8vv]  .dashboard-nav-toggle-label {
    display: flex;
    align-items: center;
    gap: 9px;
}

.dashboard-nav-submenu[b-6zci9ow8vv]  .dashboard-nav-link:not(.dashboard-nav-toggle)::before,
.dashboard-nav-submenu[b-6zci9ow8vv]  .dashboard-nav-toggle-label::before {
    content: "";
    width: 5px;
    height: 5px;
    flex-shrink: 0;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.55;
}

/* Notificación sin leer en esa sección: el mismo punto de la izquierda se pone
   naranja y parpadea, en vez de agregar un indicador aparte. */
.dashboard-nav-submenu[b-6zci9ow8vv]  .dashboard-nav-link.has-unread::before {
    background: #d97706;
    opacity: 1;
    animation: dashboard-nav-unread-blink-b-6zci9ow8vv 1.4s ease-in-out infinite;
}

@keyframes dashboard-nav-unread-blink-b-6zci9ow8vv {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.55);
    }

    50% {
        box-shadow: 0 0 0 5px rgba(217, 119, 6, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-nav-submenu[b-6zci9ow8vv]  .dashboard-nav-link.has-unread::before {
        animation: none;
    }
}

.dashboard-nav-submenu[b-6zci9ow8vv] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 2px;
    padding-left: 12px;
}

.dashboard-content[b-6zci9ow8vv] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dashboard-header[b-6zci9ow8vv] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    padding: 14px 28px;
    border-bottom: 1px solid var(--synbex-border);
    background: var(--synbex-surface);
    position: sticky;
    top: 0;
    z-index: 30;
}

.dashboard-header-actions[b-6zci9ow8vv] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.dashboard-nav-toggle-input[b-6zci9ow8vv] {
    display: none;
}

.dashboard-nav-toggle-btn[b-6zci9ow8vv] {
    display: none;
}

.dashboard-nav-backdrop[b-6zci9ow8vv] {
    display: none;
}

.dashboard-user[b-6zci9ow8vv] {
    font-size: 13.5px;
    color: var(--synbex-text-muted);
}

.dashboard-user-tag[b-6zci9ow8vv] {
    margin-left: 6px;
    padding: 2px 8px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--synbex-primary);
    background: var(--synbex-primary-soft);
    border-radius: 999px;
    white-space: nowrap;
}

/* Oculto en escritorio (ahí el correo ya sale arriba en el header) — se
   muestra solo en celular, ver @media (max-width: 900px) más abajo. */
.dashboard-sidebar-account[b-6zci9ow8vv] {
    display: none;
}

.dashboard-logout[b-6zci9ow8vv] {
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    color: #fff;
    background: #b91c1c;
    border: 1px solid #b91c1c;
    border-radius: var(--synbex-radius-md);
    cursor: pointer;
    transition: filter 0.15s ease;
}

.dashboard-logout:hover[b-6zci9ow8vv] {
    filter: brightness(0.92);
}

.dashboard-main[b-6zci9ow8vv] {
    flex: 1;
    padding: 28px;
    box-sizing: border-box;
}

#blazor-error-ui[b-6zci9ow8vv] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-6zci9ow8vv] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

@media (max-width: 900px) {
    .dashboard-nav-toggle-btn[b-6zci9ow8vv] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        flex-shrink: 0;
        border-radius: var(--synbex-radius-md);
        border: 1px solid var(--synbex-border);
        background: transparent;
        font-size: 18px;
        line-height: 1;
        color: var(--synbex-text);
        cursor: pointer;
    }

    .dashboard-header[b-6zci9ow8vv] {
        justify-content: space-between;
        padding: 12px 16px;
    }

    .dashboard-main[b-6zci9ow8vv] {
        padding: 16px;
    }

    /* El sidebar pasa a ser un cajón flotante que se desliza sobre el contenido —
       mismo truco checkbox+label sin JS que ya usan los <details> de los submenús,
       porque el Layout no es interactivo (@onclick no funciona acá). */
    .dashboard-sidebar[b-6zci9ow8vv] {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: 260px;
        max-width: 82vw;
        height: 100vh;
        z-index: 50;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        box-shadow: var(--synbex-shadow);
    }

    .dashboard-nav-toggle-input:checked ~ .dashboard-sidebar[b-6zci9ow8vv] {
        transform: translateX(0);
    }

    .dashboard-nav-toggle-input:checked ~ .dashboard-nav-backdrop[b-6zci9ow8vv] {
        display: block;
    }

    .dashboard-nav-backdrop[b-6zci9ow8vv] {
        position: fixed;
        inset: 0;
        z-index: 40;
        background: rgba(17, 24, 39, 0.4);
    }

    /* El correo ya no sale arriba en celular — se muestra abajo en el menú
       desplegable de la izquierda (.dashboard-sidebar-account) para no ocupar
       espacio del header en pantallas chicas. */
    .dashboard-user[b-6zci9ow8vv] {
        display: none;
    }

    .dashboard-sidebar-account[b-6zci9ow8vv] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 12px 4px;
        margin-top: 4px;
        border-top: 1px solid var(--synbex-border);
    }

    .dashboard-sidebar-account-label[b-6zci9ow8vv] {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--synbex-text-muted);
    }

    .dashboard-sidebar-account-email[b-6zci9ow8vv] {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 13.5px;
        color: var(--synbex-text);
    }
}

@media (max-width: 480px) {
    .dashboard-header-actions[b-6zci9ow8vv] {
        gap: 10px;
    }

    .dashboard-main[b-6zci9ow8vv] {
        padding: 12px;
    }

    /* Botón e ícono del menú (☰) más grandes en celular — más fácil de tocar. */
    .dashboard-nav-toggle-btn[b-6zci9ow8vv] {
        width: 44px;
        height: 44px;
        font-size: 22px;
    }
}

@media (max-width: 600px) {
    /* Configuración se muda a la barra inferior (MobileTabBar) en móvil — se
       oculta el ícono de engranaje de arriba para no repetir el mismo acceso
       dos veces en la misma pantalla. */
    .dashboard-header-actions[b-6zci9ow8vv]  .settings-menu {
        display: none;
    }

    /* Deja espacio abajo para que el contenido no quede tapado por la barra
       inferior fija. */
    .dashboard-main[b-6zci9ow8vv] {
        padding-bottom: 84px;
    }
}
/* /Components/Layout/LoadingOverlay.razor.rz.scp.css */
/* Las reglas .loading-overlay* viven en wwwroot/app.css (global), no acá.

   Motivo: BulkSendOverlay.razor reusa exactamente el mismo marco visual, y el CSS
   aislado de este componente NO alcanza el markup de otro componente. Tenerlas
   duplicadas en los dos .razor.css era garantía de que se fueran separando con el
   tiempo. Mismo criterio que MobileTabBar.razor.css. */
/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-rcyjg8zi1o] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-rcyjg8zi1o] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/MobileTabBar.razor.rz.scp.css */
/* El layout de esta barra vive en wwwroot/app.css (no aquí) — el <MobileTabBar />
   se renderiza como hijo flex de `.dashboard` (ver DashboardLayout.razor), y una
   regla aislada por componente no siempre gana esa pelea de forma predecible
   contra el `display:flex` del contenedor padre. Puesta en el CSS global no hay
   ninguna duda de que se aplica. */
/* /Components/Layout/NotificationBell.razor.rz.scp.css */
.notification-bell[b-v8c56i6xw7] {
    position: relative;
}

.notification-bell-trigger[b-v8c56i6xw7] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--synbex-radius-md);
    border: 1px solid var(--synbex-border);
    background: transparent;
    font-size: 16px;
    /* Mismo gris apagado que los íconos de la barra inferior (MobileTabBar),
       para que se vea igual en tema claro y oscuro. */
    color: var(--synbex-text-muted);
    cursor: pointer;
    transition: background 0.15s ease;
}

.notification-bell-trigger:hover[b-v8c56i6xw7] {
    background: var(--synbex-primary-soft);
}

.notification-bell-badge[b-v8c56i6xw7] {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    /* Contador sólido y de alto contraste — a diferencia de .badge-pending (un
       fondo translúcido pensado para pastillas de estado dentro de una tarjeta),
       acá el fondo debe verse aunque esté flotando sobre cualquier color detrás
       de la campanita. */
    background: #dc2626;
    color: #fff;
    border: 2px solid var(--synbex-surface);
}

/* Aviso visual cuando llega una notificación mientras la persona está mirando
   cualquier otra parte de la pantalla — la campanita "suena" (gira) y se enciende
   con un resplandor rojo breve, para que la mirada se vaya sola hacia ahí. */
@keyframes notification-bell-glow-b-v8c56i6xw7 {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.45);
        color: var(--synbex-text-muted);
    }
    25% {
        box-shadow: 0 0 0 9px rgba(220, 38, 38, 0);
        color: #dc2626;
    }
    100% {
        box-shadow: 0 0 0 9px rgba(220, 38, 38, 0);
        color: var(--synbex-text-muted);
    }
}

@keyframes notification-bell-ring-b-v8c56i6xw7 {
    0%, 100% { transform: rotate(0deg); }
    15% { transform: rotate(-16deg); }
    30% { transform: rotate(14deg); }
    45% { transform: rotate(-11deg); }
    60% { transform: rotate(7deg); }
    75% { transform: rotate(-4deg); }
    88% { transform: rotate(2deg); }
}

@keyframes notification-bell-badge-pop-b-v8c56i6xw7 {
    0% { transform: scale(0.4); }
    55% { transform: scale(1.35); }
    100% { transform: scale(1); }
}

.notification-bell-trigger.notification-bell-arrived[b-v8c56i6xw7] {
    animation: notification-bell-glow-b-v8c56i6xw7 1.3s ease-out;
}

.notification-bell-trigger.notification-bell-arrived svg[b-v8c56i6xw7] {
    transform-origin: 50% 20%;
    animation: notification-bell-ring-b-v8c56i6xw7 0.8s ease-in-out;
}

.notification-bell-badge.notification-bell-badge-pop[b-v8c56i6xw7] {
    animation: notification-bell-badge-pop-b-v8c56i6xw7 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.notification-bell-dropdown[b-v8c56i6xw7] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 340px;
    max-width: calc(100vw - 32px);
    max-height: 420px;
    overflow-y: auto;
    background: var(--synbex-surface);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-lg);
    box-shadow: var(--synbex-shadow);
    z-index: 50;
}

/* En celular, "right: 0" queda anclado a la campanita, que no está en el borde
   real de la pantalla (Configuración y Cerrar sesión van después) — el menú se
   corría fuera de la pantalla hacia la izquierda. Se fija al viewport en vez del
   botón, para que siempre quede completo y centrado bajo el encabezado. */
@media (max-width: 600px) {
    .notification-bell-dropdown[b-v8c56i6xw7] {
        position: fixed;
        top: 64px;
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
        max-height: calc(100vh - 84px);
    }
}

.notification-bell-dropdown-header[b-v8c56i6xw7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--synbex-border);
    font-size: 13px;
    font-weight: 600;
    color: var(--synbex-text);
}

.notification-bell-mark-all[b-v8c56i6xw7] {
    font-size: 12px;
    font-weight: 600;
    color: var(--synbex-primary);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.notification-bell-empty[b-v8c56i6xw7] {
    padding: 20px 14px;
    text-align: center;
    font-size: 13px;
    color: var(--synbex-text-muted);
}

.notification-bell-list[b-v8c56i6xw7] {
    display: flex;
    flex-direction: column;
}

.notification-bell-load-more[b-v8c56i6xw7] {
    width: 100%;
    padding: 10px 14px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--synbex-primary);
    background: none;
    border: none;
    border-top: 1px solid var(--synbex-border);
    cursor: pointer;
}

.notification-bell-load-more:hover:not(:disabled)[b-v8c56i6xw7] {
    background: var(--synbex-primary-soft);
}

.notification-bell-load-more:disabled[b-v8c56i6xw7] {
    cursor: default;
    opacity: 0.6;
}

.notification-bell-cap-hint[b-v8c56i6xw7] {
    padding: 10px 14px;
    text-align: center;
    font-size: 12px;
    color: var(--synbex-text-muted);
    border-top: 1px solid var(--synbex-border);
    margin: 0;
}

.notification-bell-item[b-v8c56i6xw7] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--synbex-border);
    cursor: pointer;
    transition: background 0.15s ease;
}

.notification-bell-item:last-child[b-v8c56i6xw7] {
    border-bottom: none;
}

.notification-bell-item:hover[b-v8c56i6xw7] {
    background: var(--synbex-primary-soft);
}

.notification-bell-item-unread[b-v8c56i6xw7] {
    background: var(--synbex-primary-soft);
}

.notification-bell-item-body[b-v8c56i6xw7] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.notification-bell-item-delete[b-v8c56i6xw7] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-top: -2px;
    border: none;
    border-radius: var(--synbex-radius-md);
    background: transparent;
    color: var(--synbex-text-muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.notification-bell-item-delete svg[b-v8c56i6xw7] {
    width: 15px;
    height: 15px;
}

.notification-bell-item-delete:hover[b-v8c56i6xw7] {
    background: var(--synbex-surface);
    color: var(--synbex-danger);
}

.notification-bell-item-title[b-v8c56i6xw7] {
    font-size: 13px;
    font-weight: 600;
    color: var(--synbex-text);
}

.notification-bell-item-message[b-v8c56i6xw7] {
    font-size: 12.5px;
    color: var(--synbex-text-muted);
}

.notification-bell-item-date[b-v8c56i6xw7] {
    font-size: 11px;
    color: var(--synbex-text-muted);
}

/* Mensaje flotante de "tienes notificaciones sin leer", una sola vez por login
   (ver MaybeShowLoginToastAsync) — abajo a la derecha, con una flecha animada
   que apunta hacia la campanita para que la mirada se vaya sola hacia ahí. */
.notification-login-toast[b-v8c56i6xw7] {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 80;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    max-width: min(340px, calc(100vw - 32px));
    background: var(--synbex-surface);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-lg);
    box-shadow: var(--synbex-shadow);
    animation: notification-login-toast-in-b-v8c56i6xw7 0.25s ease-out;
}

@media (max-width: 600px) {
    .notification-login-toast[b-v8c56i6xw7] {
        bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    }
}

@keyframes notification-login-toast-in-b-v8c56i6xw7 {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.notification-login-toast-icon[b-v8c56i6xw7] {
    flex-shrink: 0;
    display: inline-flex;
    color: var(--synbex-primary);
}

.notification-login-toast-text[b-v8c56i6xw7] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--synbex-text);
}

.notification-login-toast-close[b-v8c56i6xw7] {
    flex-shrink: 0;
    margin-left: 4px;
    border: none;
    background: transparent;
    font-size: 13px;
    color: var(--synbex-text-muted);
    cursor: pointer;
}

.notification-login-toast-arrow[b-v8c56i6xw7] {
    position: absolute;
    top: -34px;
    right: 6px;
    color: var(--synbex-primary);
    animation: notification-login-toast-arrow-bounce-b-v8c56i6xw7 1.3s ease-in-out infinite;
}

@keyframes notification-login-toast-arrow-bounce-b-v8c56i6xw7 {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .notification-login-toast[b-v8c56i6xw7],
    .notification-login-toast-arrow[b-v8c56i6xw7] {
        animation: none;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-tvu1csxme1],
.components-reconnect-repeated-attempt-visible[b-tvu1csxme1],
.components-reconnect-failed-visible[b-tvu1csxme1],
.components-pause-visible[b-tvu1csxme1],
.components-resume-failed-visible[b-tvu1csxme1],
.components-rejoining-animation[b-tvu1csxme1] {
    display: none;
}

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


#components-reconnect-modal[b-tvu1csxme1] {
    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-tvu1csxme1 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-tvu1csxme1 {
    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/Layout/SettingsMenu.razor.rz.scp.css */
.settings-menu[b-l7z9oiqksk] {
    position: relative;
}

.settings-menu-trigger[b-l7z9oiqksk] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--synbex-radius-md);
    border: 1px solid var(--synbex-border);
    background: transparent;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.settings-menu-trigger:hover[b-l7z9oiqksk] {
    background: var(--synbex-primary-soft);
}

.settings-menu-dropdown[b-l7z9oiqksk] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 200px;
    max-width: calc(100vw - 32px);
    background: var(--synbex-surface);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-lg);
    box-shadow: var(--synbex-shadow);
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
}

/* Mismo problema y misma solución que en NotificationBell: en celular se ancla
   al viewport en vez del botón, para que no se salga de la pantalla. */
@media (max-width: 600px) {
    .settings-menu-dropdown[b-l7z9oiqksk] {
        position: fixed;
        top: 64px;
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
    }
}

.settings-menu-item[b-l7z9oiqksk] {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 10px;
    border: none;
    border-radius: var(--synbex-radius-md);
    background: transparent;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--synbex-text-muted);
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.settings-menu-item:hover[b-l7z9oiqksk] {
    background: var(--synbex-primary-soft);
    color: var(--synbex-text);
}

.settings-menu-item-icon[b-l7z9oiqksk] {
    font-size: 15px;
    line-height: 1;
    display: inline-flex;
}

/* El ícono de "Anclar" es un SVG de HubIcons (line-art), no un emoji como sus
   hermanos — se achica al mismo tamaño que ellos tenían por font-size. */
.settings-menu-item-icon svg[b-l7z9oiqksk] {
    width: 15px;
    height: 15px;
}

.settings-menu-item:disabled[b-l7z9oiqksk] {
    opacity: 0.55;
    cursor: default;
}

.settings-menu-item:disabled:hover[b-l7z9oiqksk] {
    background: transparent;
    color: var(--synbex-text-muted);
}

/* Las clases .settings-modal-* se movieron a wwwroot/app.css (CSS global) — ahora
   las reutiliza más de un componente (SettingsMenu y MyUnitCleaning), y el CSS
   aislado por componente de Blazor no cruza esa frontera de forma confiable. */
/* /Components/Layout/ToastHost.razor.rz.scp.css */
.toast-host[b-p80gy95ouq] {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 340px;
    max-width: calc(100vw - 24px);
    pointer-events: none;
}

.toast-item[b-p80gy95ouq] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 18px;
    min-height: 64px;
    border-radius: 14px;
    box-shadow: 0 10px 30px -6px rgba(0, 0, 0, 0.3), 0 3px 10px rgba(0, 0, 0, 0.1);
    pointer-events: auto;
    animation: synbex-toast-in-b-p80gy95ouq 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast-item.toast-leaving[b-p80gy95ouq] {
    animation: synbex-toast-out-b-p80gy95ouq 0.2s ease forwards;
}

.toast-icon[b-p80gy95ouq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    font-weight: 700;
    font-size: 15px;
}

/* Fondo sólido en vez de solo un borde de color — para que se note de inmediato
   si fue éxito o error, sin tener que leer el texto. */
.toast-success[b-p80gy95ouq] {
    background: #16a34a;
}

.toast-success .toast-icon[b-p80gy95ouq] {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.toast-success .toast-message[b-p80gy95ouq] {
    color: #fff;
}

.toast-error[b-p80gy95ouq] {
    background: var(--synbex-danger);
}

.toast-error .toast-icon[b-p80gy95ouq] {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.toast-error .toast-message[b-p80gy95ouq] {
    color: #fff;
}

.toast-message[b-p80gy95ouq] {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}

.toast-close[b-p80gy95ouq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    background: none;
    border: none;
    border-radius: var(--synbex-radius-md);
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    font-size: 12px;
    transition: background 0.15s ease, color 0.15s ease;
}

.toast-close:hover[b-p80gy95ouq] {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

@keyframes synbex-toast-in-b-p80gy95ouq {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.96);
    }

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

@keyframes synbex-toast-out-b-p80gy95ouq {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(0.96);
    }
}

@media (prefers-reduced-motion: reduce) {
    .toast-item[b-p80gy95ouq] {
        animation: none;
    }
}

@media (max-width: 480px) {
    .toast-host[b-p80gy95ouq] {
        bottom: 16px;
        right: 12px;
        left: 12px;
        width: auto;
        max-width: none;
    }
}

/* Aviso flotante en el centro de la pantalla (ej. "Aviso enviado" al registrar un
   paquete) — separado del contenedor de esquina de arriba, con su propia animación
   de entrada/salida en vez de deslizarse desde abajo. */
.toast-host-centered[b-p80gy95ouq] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1200;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: auto;
    max-width: calc(100vw - 32px);
    pointer-events: none;
}

.toast-centered-item[b-p80gy95ouq] {
    justify-content: center;
    text-align: center;
    animation: synbex-toast-center-in-b-p80gy95ouq 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes synbex-toast-center-in-b-p80gy95ouq {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .toast-centered-item[b-p80gy95ouq] {
        animation: none;
    }
}
/* /Components/Pages/ChangePassword.razor.rz.scp.css */
.pwd-page[b-rvp2a5e1wi] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(circle at 15% 10%, var(--synbex-primary-soft), transparent 45%),
        radial-gradient(circle at 85% 90%, var(--synbex-primary-soft), transparent 45%),
        var(--synbex-bg);
    box-sizing: border-box;
}

.pwd-card[b-rvp2a5e1wi] {
    width: 100%;
    max-width: 420px;
    background: var(--synbex-surface);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-lg);
    box-shadow: var(--synbex-shadow);
    padding: 40px 36px;
    box-sizing: border-box;
}

.pwd-icon[b-rvp2a5e1wi] {
    width: 56px;
    height: 56px;
    margin: 0 auto 20px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--synbex-primary), var(--synbex-primary-hover));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    box-shadow: 0 8px 20px -6px var(--synbex-primary);
}

.pwd-header[b-rvp2a5e1wi] {
    text-align: center;
    margin-bottom: 26px;
}

.pwd-title[b-rvp2a5e1wi] {
    margin: 0 0 6px;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--synbex-text);
}

.pwd-subtitle[b-rvp2a5e1wi] {
    margin: 0;
    font-size: 13.5px;
    color: var(--synbex-text-muted);
}

.pwd-alert[b-rvp2a5e1wi] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
    padding: 12px 14px;
    border-radius: var(--synbex-radius-md);
    background: var(--synbex-danger-soft);
    color: var(--synbex-danger);
    font-size: 13.5px;
    line-height: 1.4;
}

.pwd-alert svg[b-rvp2a5e1wi] {
    flex-shrink: 0;
    margin-top: 1px;
}

.pwd-field[b-rvp2a5e1wi] {
    margin-bottom: 18px;
}

.pwd-label[b-rvp2a5e1wi] {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--synbex-text);
}

.pwd-input-wrap[b-rvp2a5e1wi] {
    position: relative;
}

[b-rvp2a5e1wi] .pwd-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 42px 10px 12px;
    font-size: 14.5px;
    font-family: inherit;
    color: var(--synbex-text);
    background: var(--synbex-surface);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-md);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

[b-rvp2a5e1wi] .pwd-input:focus {
    outline: none;
    border-color: var(--synbex-primary);
    box-shadow: 0 0 0 3px var(--synbex-primary-soft);
}

[b-rvp2a5e1wi] .pwd-input.invalid {
    border-color: var(--synbex-danger);
}

.pwd-toggle[b-rvp2a5e1wi] {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: var(--synbex-radius-md);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    color: var(--synbex-text-muted);
    transition: background 0.15s ease;
}

.pwd-toggle:hover[b-rvp2a5e1wi] {
    background: var(--synbex-primary-soft);
}

[b-rvp2a5e1wi] .pwd-validation-message {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--synbex-danger);
}

.pwd-requirements[b-rvp2a5e1wi] {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: grid;
    gap: 4px;
}

/* Tamaño y grosor fijos SIEMPRE (12px, 600) — antes solo is-missing/is-met
   tenían negrita y el estado gris de base se veía más delgado, dando la
   sensación de que el texto "engordaba" al escribir. Ahora solo cambia el
   color entre los tres estados, nunca el tamaño ni el grosor. */
.pwd-requirements li[b-rvp2a5e1wi] {
    font-size: 12px;
    font-weight: 600;
    color: var(--synbex-text-muted);
    padding-left: 16px;
    position: relative;
}

.pwd-requirements li[b-rvp2a5e1wi]::before {
    content: "•";
    position: absolute;
    left: 2px;
    color: var(--synbex-primary);
}

.pwd-requirements li.is-missing[b-rvp2a5e1wi] {
    color: var(--synbex-danger);
}

.pwd-requirements li.is-missing[b-rvp2a5e1wi]::before {
    color: var(--synbex-danger);
}

.pwd-requirements li.is-met[b-rvp2a5e1wi] {
    color: var(--synbex-success);
}

.pwd-requirements li.is-met[b-rvp2a5e1wi]::before {
    content: "✓";
    color: var(--synbex-success);
}

.pwd-submit[b-rvp2a5e1wi] {
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
    padding: 11px 16px;
    font-size: 14.5px;
    font-weight: 600;
    font-family: inherit;
    color: #fff;
    background: var(--synbex-primary);
    border: none;
    border-radius: var(--synbex-radius-md);
    cursor: pointer;
    box-shadow: 0 6px 16px -6px var(--synbex-primary);
    transition: background 0.15s ease, transform 0.05s ease;
}

.pwd-submit:hover[b-rvp2a5e1wi] {
    background: var(--synbex-primary-hover);
}

.pwd-submit:active[b-rvp2a5e1wi] {
    transform: translateY(1px);
}

.pwd-back[b-rvp2a5e1wi] {
    display: block;
    margin-top: 20px;
    text-align: center;
    font-size: 12.5px;
    color: var(--synbex-text-muted);
    text-decoration: none;
}

.pwd-back:hover[b-rvp2a5e1wi] {
    color: var(--synbex-primary);
}

@media (max-width: 420px) {
    .pwd-card[b-rvp2a5e1wi] {
        padding: 32px 22px;
    }
}
/* /Components/Pages/Dashboard/Cleaning/Checklist.razor.rz.scp.css */
.checklist-equal-card[b-xzurnrocxg] {
    max-width: 700px;
    box-sizing: border-box;
}

.checklist-card-header[b-xzurnrocxg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.checklist-card-title[b-xzurnrocxg] {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--synbex-text);
}

.checklist-add-btn[b-xzurnrocxg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 110px;
    height: 32px;
    flex-shrink: 0;
    border-radius: var(--synbex-radius-md);
    border: 1px solid var(--synbex-border);
    background: #1ed11e;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.checklist-add-btn:hover[b-xzurnrocxg] {
    background: var(--synbex-primary-soft);
    border-color: var(--synbex-primary);
    color: var(--synbex-primary);
}

[b-xzurnrocxg] .checklist-add-form {
    display: block;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--synbex-border);
}

.checklist-facility-error[b-xzurnrocxg] {
    border-color: var(--synbex-danger);
    box-shadow: 0 0 0 1px var(--synbex-danger);
}

.checklist-facility-error-text[b-xzurnrocxg] {
    margin: 8px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--synbex-danger);
}
/* /Components/Pages/Dashboard/Cleaning/Index.razor.rz.scp.css */
.cleaning-row-chevron[b-3ux8mpcipe] {
    display: inline-block;
    width: 12px;
    margin-right: 8px;
    color: var(--synbex-text-muted);
    font-size: 10px;
    transition: transform 0.15s ease;
}

.tenant-row.is-expanded td[b-3ux8mpcipe] {
    border-bottom: none;
}

.cleaning-detail-row td[b-3ux8mpcipe] {
    background: var(--synbex-primary-soft);
    border-bottom: 2px solid var(--synbex-primary);
    padding: 16px;
}

.cleaning-detail-comment[b-3ux8mpcipe] {
    margin: 0 0 14px;
    font-size: 14px;
    color: var(--synbex-text);
}

.cleaning-detail-grid[b-3ux8mpcipe] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

@media (max-width: 720px) {
    .cleaning-detail-grid[b-3ux8mpcipe] {
        grid-template-columns: 1fr;
    }
}

.cleaning-result-checklist[b-3ux8mpcipe] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cleaning-result-item[b-3ux8mpcipe] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--synbex-surface);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-md);
    font-size: 13.5px;
    color: var(--synbex-text);
}

.cleaning-result-icon[b-3ux8mpcipe] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    background: var(--synbex-border);
    color: var(--synbex-text-muted);
}

.cleaning-result-item.is-done .cleaning-result-icon[b-3ux8mpcipe] {
    background: var(--synbex-success);
    color: #fff;
}

.cleaning-result-item.is-done span:last-child[b-3ux8mpcipe] {
    color: var(--synbex-text-muted);
}

.cleaning-result-photos[b-3ux8mpcipe] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-content: flex-start;
}

.cleaning-photo-more[b-3ux8mpcipe] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    flex-shrink: 0;
    border-radius: 8px;
    border: 1px dashed var(--synbex-border);
    background: var(--synbex-bg);
    color: var(--synbex-text-muted);
    font-family: inherit;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.cleaning-photo-more:hover[b-3ux8mpcipe] {
    background: var(--synbex-primary-soft);
    color: var(--synbex-primary);
}
/* /Components/Pages/Dashboard/Cleaning/Report.razor.rz.scp.css */
/* /Components/Pages/Dashboard/Documents/DocumentForm.razor.rz.scp.css */
.synbex-toggle-field[b-zogb0uaprn] {
    justify-content: flex-start;
    gap: 12px;
}

.synbex-toggle-label-off[b-zogb0uaprn] {
    color: var(--synbex-text-muted);
    transition: color 0.15s ease;
}

.synbex-period-wrapper[b-zogb0uaprn] {
    position: relative;
}

.synbex-period-placeholder[b-zogb0uaprn] {
    position: absolute;
    top: 1px;
    left: 1px;
    bottom: 1px;
    right: 34px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: var(--synbex-surface);
    color: var(--synbex-text-muted);
    font-size: 14.5px;
    font-style: italic;
    border-radius: var(--synbex-radius-md);
    pointer-events: none;
}
/* /Components/Pages/Dashboard/Index.razor.rz.scp.css */
/* ===== Resumen rápido (inicio del guarda) ===== */
.guard-summary-card[b-9hkv26qfdx] {
    margin-top: 20px;
    margin-bottom: 24px;
}

.guard-summary-grid[b-9hkv26qfdx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 20px;
}

.guard-summary-stat[b-9hkv26qfdx] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.guard-summary-icon[b-9hkv26qfdx] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.guard-summary-icon svg[b-9hkv26qfdx] {
    width: 24px;
    height: 24px;
}

.guard-summary-number[b-9hkv26qfdx] {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.15;
}

.guard-summary-label[b-9hkv26qfdx] {
    font-size: 13px;
    color: var(--synbex-text-muted);
    margin: 1px 0 3px;
}

.guard-summary-link[b-9hkv26qfdx] {
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
}

.guard-summary-link:hover[b-9hkv26qfdx] {
    text-decoration: underline;
}

/* ===== Tarjetas grandes (Paquetería / Registros / Consultas) ===== */
.guard-home-grid[b-9hkv26qfdx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.guard-home-card[b-9hkv26qfdx] {
    display: flex;
    flex-direction: column;
    background: var(--synbex-surface);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-lg);
    box-shadow: var(--synbex-shadow);
    padding: 24px;
}

.guard-home-card-header[b-9hkv26qfdx] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
}

.guard-home-card-icon[b-9hkv26qfdx] {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: var(--synbex-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.guard-home-card-icon svg[b-9hkv26qfdx] {
    width: 26px;
    height: 26px;
}

.guard-home-card-title[b-9hkv26qfdx] {
    font-size: 17px;
    font-weight: 700;
}

.guard-home-card-desc[b-9hkv26qfdx] {
    font-size: 13px;
    color: var(--synbex-text-muted);
    margin-top: 2px;
}

.guard-home-card-features[b-9hkv26qfdx] {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.guard-home-card-features li[b-9hkv26qfdx] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.guard-home-check[b-9hkv26qfdx] {
    flex-shrink: 0;
    font-weight: 700;
}

.guard-home-card-cta[b-9hkv26qfdx] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 18px;
    border-radius: var(--synbex-radius-md);
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    color: #fff;
    transition: filter 0.15s ease;
}

/* Cuando Consultas no está habilitado solo quedan 2 tarjetas — se reparten
   mitad y mitad en vez de dejar el espacio vacío donde iba la tercera. */
.guard-home-grid-2[b-9hkv26qfdx] {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 700px) {
    .guard-home-grid-2[b-9hkv26qfdx] {
        grid-template-columns: 1fr;
    }
}

.guard-home-card-cta:hover[b-9hkv26qfdx] {
    filter: brightness(1.08);
}

/* ===== Variantes de color reutilizadas por el resumen y las tarjetas ===== */
.is-purple.guard-summary-icon[b-9hkv26qfdx], .is-purple.guard-home-card-icon[b-9hkv26qfdx] {
    background: var(--synbex-primary-soft);
    color: var(--synbex-primary);
}

.is-blue.guard-summary-icon[b-9hkv26qfdx], .is-blue.guard-home-card-icon[b-9hkv26qfdx] {
    background: rgba(37, 99, 235, 0.12);
    color: #2563eb;
}

.is-green.guard-summary-icon[b-9hkv26qfdx], .is-green.guard-home-card-icon[b-9hkv26qfdx] {
    background: rgba(22, 163, 74, 0.12);
    color: var(--synbex-success);
}

.is-orange.guard-summary-icon[b-9hkv26qfdx], .is-orange.guard-home-card-icon[b-9hkv26qfdx] {
    background: rgba(217, 119, 6, 0.14);
    color: #d97706;
}

.guard-summary-link.is-purple[b-9hkv26qfdx], .guard-home-check.is-purple[b-9hkv26qfdx] { color: var(--synbex-primary); }
.guard-summary-link.is-blue[b-9hkv26qfdx], .guard-home-check.is-blue[b-9hkv26qfdx] { color: #2563eb; }
.guard-summary-link.is-green[b-9hkv26qfdx], .guard-home-check.is-green[b-9hkv26qfdx] { color: var(--synbex-success); }
.guard-summary-link.is-orange[b-9hkv26qfdx] { color: #d97706; }

.guard-home-card-cta.is-purple[b-9hkv26qfdx] { background: var(--synbex-primary); }
.guard-home-card-cta.is-blue[b-9hkv26qfdx] { background: #2563eb; }
.guard-home-card-cta.is-green[b-9hkv26qfdx] { background: var(--synbex-success); }

@media (max-width: 700px) {
    .guard-summary-grid[b-9hkv26qfdx] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== Inicio de Residentes: "Mi unidad" / "Nivel del conjunto" ===== */
.resident-home-section[b-9hkv26qfdx] {
    margin-bottom: 40px;
}

.resident-home-section-header[b-9hkv26qfdx] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.catalog-icon-box.resident-home-section-icon[b-9hkv26qfdx] {
    width: 40px;
    height: 40px;
}

.catalog-icon-box.resident-home-section-icon svg[b-9hkv26qfdx] {
    width: 20px;
    height: 20px;
}

.resident-home-section-title[b-9hkv26qfdx] {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}

.resident-home-section-subtitle[b-9hkv26qfdx] {
    font-size: 13px;
    color: var(--synbex-text-muted);
    margin: 2px 0 0;
}

.resident-home-grid[b-9hkv26qfdx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
}

/* En celular las tarjetas de "Mi unidad" y "Actividades del conjunto" van una
   debajo de otra, a todo el ancho — antes, en teléfonos más anchos, el
   auto-fit de arriba alcanzaba a meter 2 por fila y quedaban a la mitad. */
@media (max-width: 600px) {
    .resident-home-grid[b-9hkv26qfdx] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.resident-home-stat-card[b-9hkv26qfdx] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--synbex-surface);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-lg);
    box-shadow: var(--synbex-shadow);
    padding: 18px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease, transform 0.1s ease;
}

.resident-home-stat-card:hover[b-9hkv26qfdx] {
    background: var(--synbex-primary-soft);
    transform: translateY(-1px);
}

.catalog-icon-box.resident-home-stat-icon[b-9hkv26qfdx] {
    width: 44px;
    height: 44px;
}

.catalog-icon-box.resident-home-stat-icon svg[b-9hkv26qfdx] {
    width: 22px;
    height: 22px;
}

.resident-home-stat-body[b-9hkv26qfdx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.resident-home-stat-title[b-9hkv26qfdx] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--synbex-text-muted);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.resident-home-stat-title[b-9hkv26qfdx]::after {
    content: "\203A";
    font-size: 18px;
    line-height: 1;
    color: var(--synbex-text-muted);
    flex-shrink: 0;
}

.resident-home-stat-value[b-9hkv26qfdx] {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}

.resident-home-stat-label[b-9hkv26qfdx] {
    font-size: 12.5px;
    color: var(--synbex-text-muted);
}

.resident-home-stat-badge[b-9hkv26qfdx] {
    display: inline-block;
    align-self: flex-start;
    margin-top: 2px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    background: rgba(217, 119, 6, 0.14);
    color: #d97706;
}

.resident-home-stat-split[b-9hkv26qfdx] {
    display: flex;
    gap: 16px;
    margin-top: 2px;
    min-width: 0;
}

.resident-home-stat-split > div[b-9hkv26qfdx] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-left: 14px;
    border-left: 1px solid var(--synbex-border);
    min-width: 0;
    flex: 1;
}

.resident-home-stat-split > div:first-child[b-9hkv26qfdx] {
    padding-left: 0;
    border-left: none;
}

/* En celular las tarjetas quedan angostas y "Confirmadas"/"Pendientes" no caben
   en una sola línea al lado del número — sin min-width:0 arriba, en vez de
   achicarse o pasar a una segunda línea, el texto se salía de la tarjeta. */
@media (max-width: 600px) {
    .resident-home-stat-label[b-9hkv26qfdx] {
        white-space: normal;
        word-break: break-word;
    }
}

/* Actividad reciente: altura fija — el contenido que se pasa de esa altura
   (más de ~4 novedades) se ve con scroll interno, en vez de agrandar la
   tarjeta. */
.resident-home-card-fixed[b-9hkv26qfdx] {
    display: flex;
    flex-direction: column;
    height: 400px;
}

.resident-home-card-scroll[b-9hkv26qfdx] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.resident-empty-state[b-9hkv26qfdx] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    color: var(--synbex-text-muted);
}

.resident-empty-state-icon[b-9hkv26qfdx] {
    width: 52px;
    height: 52px;
    border-radius: 999px;
    background: var(--synbex-primary-soft);
    color: var(--synbex-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.resident-empty-state-icon svg[b-9hkv26qfdx] {
    width: 26px;
    height: 26px;
}

.resident-empty-state-text[b-9hkv26qfdx] {
    font-size: 13.5px;
    margin: 0;
}

/* ===== Ventana flotante de avisos sin leer ===== */
.announcement-modal-backdrop[b-9hkv26qfdx] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 1000;

    /* Esta ventana siempre se ve en tema claro, sin importar si el resto del panel
       está en oscuro — son las mismas variables que ya usa el resto de la app en
       modo claro (ver app.css), fijadas acá para que no las pise el modo oscuro. */
    --synbex-primary: #4f46e5;
    --synbex-primary-hover: #4338ca;
    --synbex-primary-soft: #eef2ff;
    --synbex-text: #111827;
    --synbex-text-muted: #6b7280;
    --synbex-border: #e5e7eb;
    --synbex-surface: #ffffff;
    --synbex-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 12px 32px -8px rgba(17, 24, 39, 0.12);
    --synbex-danger: #dc2626;
    --synbex-danger-soft: #fef2f2;
}

.announcement-modal-card[b-9hkv26qfdx] {
    width: 100%;
    max-width: 420px;
    background: var(--synbex-surface);
    border-radius: var(--synbex-radius-lg);
    box-shadow: var(--synbex-shadow);
    padding: 36px 32px 28px;
    text-align: center;
}

/* Aviso importante (IsPriority): mismo diseño, pero todo lo que usa el acento
   morado (ícono, "Anuncios", puntito activo, botón "Siguiente") pasa a rojo de
   alerta al redefinir --synbex-primary solo dentro de esta tarjeta — y un anillo
   rojo alrededor de la tarjeta para que se note de lejos que es distinto. */
.announcement-modal-card.is-priority[b-9hkv26qfdx] {
    --synbex-primary: #dc2626;
    --synbex-primary-hover: #b91c1c;
    --synbex-primary-soft: #fef2f2;
    box-shadow: 0 0 0 2px var(--synbex-danger), var(--synbex-shadow);
}

.announcement-modal-priority-note[b-9hkv26qfdx] {
    margin: 10px 0 0;
    color: var(--synbex-text-muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
}

.announcement-modal-icon[b-9hkv26qfdx] {
    width: 72px;
    height: 72px;
    margin: 0 auto 10px;
    border-radius: 999px;
    background: var(--synbex-primary-soft);
    color: var(--synbex-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.announcement-modal-icon svg[b-9hkv26qfdx] {
    width: 32px;
    height: 32px;
}

.announcement-modal-kicker[b-9hkv26qfdx] {
    display: block;
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 700;
    color: var(--synbex-primary);
}

.announcement-modal-title[b-9hkv26qfdx] {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 700;
    color: var(--synbex-text);
}

.announcement-modal-message[b-9hkv26qfdx] {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--synbex-text-muted);
    white-space: pre-wrap;
}

.announcement-modal-dots[b-9hkv26qfdx] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 22px;
}

.announcement-modal-dot[b-9hkv26qfdx] {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--synbex-border);
}

.announcement-modal-dot.is-active[b-9hkv26qfdx] {
    background: var(--synbex-primary);
}

.announcement-modal-actions[b-9hkv26qfdx] {
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
}

.announcement-modal-next[b-9hkv26qfdx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    border-radius: 999px;
}
/* /Components/Pages/Dashboard/Paqueteria/Index.razor.rz.scp.css */
.package-icon-box[b-0hndewlb5v] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--synbex-radius-md);
}

.package-icon-box.size-lg[b-0hndewlb5v] {
    width: 56px;
    height: 56px;
}

.package-icon-box.size-md[b-0hndewlb5v] {
    width: 44px;
    height: 44px;
}

.package-icon-box.size-sm[b-0hndewlb5v] {
    width: 36px;
    height: 36px;
}

.package-icon-box.is-primary[b-0hndewlb5v] {
    background: var(--synbex-primary-soft);
    color: var(--synbex-primary);
}

.package-icon-box.is-orange[b-0hndewlb5v] {
    background: rgba(217, 119, 6, 0.12);
    color: #d97706;
}

.package-icon-box.is-green[b-0hndewlb5v] {
    background: rgba(22, 163, 74, 0.12);
    color: var(--synbex-success);
}

.package-icon-box.is-slate[b-0hndewlb5v] {
    background: rgba(107, 114, 128, 0.14);
    color: var(--synbex-text-muted);
}

.package-section-header[b-0hndewlb5v] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 4px;
}

.package-row-card[b-0hndewlb5v] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px;
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-md);
}

.package-stat-box[b-0hndewlb5v] {
    text-align: center;
    padding: 12px 6px;
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-md);
}

.package-stat-icon[b-0hndewlb5v] {
    display: flex;
    justify-content: center;
    margin-bottom: 6px;
}

/* Fila clicable de "Entrega reciente" — separador entre filas salvo la
   primera, sin fondo/borde propio para que se vea como parte de la lista. */
.package-recent-item[b-0hndewlb5v] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-top: 1px solid var(--synbex-border);
    padding: 12px 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.package-recent-item:first-child[b-0hndewlb5v] {
    border-top: none;
}

.package-link-btn[b-0hndewlb5v] {
    background: none;
    border: none;
    color: var(--synbex-primary);
    font-weight: 600;
    font-size: 13.5px;
    cursor: pointer;
    padding: 0;
    display: block;
}

/* Tarjeta de búsqueda de apartamento — ícono grande centrado + título, como un
   pequeño "hero" en vez del label chico de antes. El resplandor azul suave en
   las esquinas es el mismo truco que ya usa la pantalla de login. */
.package-search-card[b-0hndewlb5v] {
    background:
        radial-gradient(circle at 12% 8%, var(--synbex-primary-soft), transparent 45%),
        radial-gradient(circle at 88% 92%, var(--synbex-primary-soft), transparent 45%),
        var(--synbex-surface);
}

.package-search-hero[b-0hndewlb5v] {
    text-align: center;
    margin-bottom: 20px;
}

.package-search-hero .package-icon-box[b-0hndewlb5v] {
    margin: 0 auto;
}

.package-search-row[b-0hndewlb5v] {
    display: flex;
    gap: 10px;
    max-width: 560px;
    margin: 0 auto;
}

/* Pendientes y Entregados lado a lado en computadora, del mismo alto (stretch
   por defecto del grid) — con un tope máximo para que muchos pendientes no
   estiren la tarjeta sin límite; el contenido que no entra scrollea adentro. */
.package-columns-grid[b-0hndewlb5v] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.package-columns-grid > .synbex-card[b-0hndewlb5v] {
    max-height: 520px;
    overflow-y: auto;
}

/* Pendientes no se topa — el guarda necesita ver TODOS los pendientes sin
   límite ni scroll interno; solo Entregados conserva el tope de arriba. */
.package-columns-grid > .package-pending-card[b-0hndewlb5v] {
    max-height: none;
    overflow-y: visible;
}

@media (max-width: 800px) {
    .package-columns-grid[b-0hndewlb5v] {
        grid-template-columns: 1fr;
    }

    /* Apiladas en celular no hace falta igualarlas ni toparlas — que crezcan
       con su contenido, como cualquier otra tarjeta de la página. */
    .package-columns-grid > .synbex-card[b-0hndewlb5v] {
        max-height: none;
        overflow-y: visible;
    }
}

.package-header-search[b-0hndewlb5v] {
    width: 220px;
    max-width: 100%;
}

@media (max-width: 700px) {
    /* En celular el buscador cae en su propia fila (el encabezado envuelve) —
       que ocupe todo el ancho disponible en vez de quedarse en 220px. */
    .package-header-search[b-0hndewlb5v] {
        width: 100%;
    }
}

.package-recent-row[b-0hndewlb5v] {
    cursor: pointer;
}

.package-recent-row:hover[b-0hndewlb5v] {
    background: var(--synbex-primary-soft);
}

/* Ícono de "toca/haz clic para más info" — deja claro que la fila/tarjeta es
   interactiva sin tener que adivinarlo. */
.package-tap-hint[b-0hndewlb5v] {
    color: var(--synbex-text-muted);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}

.package-tap-hint svg[b-0hndewlb5v] {
    width: 18px;
    height: 18px;
}

/* Botón "Marcar entregado" — verde vivo con un resplandor sutil para que
   resalte de inmediato entre el resto de la tarjeta de pendientes. */
.package-deliver-btn[b-0hndewlb5v] {
    background: #16a34a;
    color: #fff;
    font-weight: 700;
    padding: 10px 18px;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.package-deliver-btn:hover[b-0hndewlb5v] {
    background: #15803d;
    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.25);
}

/* Botón "Ver detalles" en Entrega reciente — reemplaza el ícono de "toca para
   ver más" por algo explícito, igual en escritorio y móvil. */
.package-details-btn[b-0hndewlb5v] {
    flex-shrink: 0;
}

/* Combo de "Descripción" — input + datalist: se puede escribir libre o abrir
   la lista y elegir una opción común (Paquetería, Comida, etc.), todo en la
   misma caja. El resplandor azul hacia adentro y el borde marcado la hacen
   notoria en vez de perderse como un campo de texto más. */
.package-note-combo[b-0hndewlb5v] {
    border: 2px solid var(--synbex-primary);
    box-shadow: inset 0 0 0 3px var(--synbex-primary-soft);
    font-weight: 600;
    color: var(--synbex-primary);
}

.package-note-combo:focus[b-0hndewlb5v] {
    box-shadow: inset 0 0 0 3px var(--synbex-primary-soft), 0 0 0 3px rgba(37, 99, 235, 0.18);
}

/* Botones de resultado de búsqueda ("Apartamento 501 — Conjunto (Edificio)") —
   texto centrado y más grande, con el número del apartamento en un color e
   ícono de peso fuertes para que sea lo primero que se lea. */
.package-unit-result-btn[b-0hndewlb5v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-align: center;
    font-size: 16px;
    padding: 14px;
}

.package-unit-result-btn strong[b-0hndewlb5v] {
    color: var(--synbex-primary);
    font-size: 19px;
}

.package-unit-result-sub[b-0hndewlb5v] {
    font-size: 13px;
    color: var(--synbex-text-muted);
    font-weight: 400;
}

/* Columna de búsqueda (70%) + teclado numérico (30%) en la tarjeta "Buscar
   apartamento" — solo en escritorio; en móvil el teclado no cabe bien ni hace
   falta (ya se usa el teclado nativo del celular). */
.package-search-columns[b-0hndewlb5v] {
    display: block;
}

@media (min-width: 800px) {
    .package-search-columns[b-0hndewlb5v] {
        display: grid;
        grid-template-columns: 7fr 3fr;
        gap: 28px;
        align-items: start;
    }
}

.package-search-keypad-col[b-0hndewlb5v] {
    display: none;
}

@media (min-width: 800px) {
    /* position:sticky (con top:0 dentro de una columna que no scrollea) fija el
       teclado en el mismo lugar sin importar cuánto crezca o encoja la lista de
       resultados a su izquierda — antes, al centrarse verticalmente contra toda
       la fila, se movía y "cambiaba de tamaño" cada vez que la búsqueda filtraba. */
    .package-search-keypad-col[b-0hndewlb5v] {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: sticky;
        top: 0;
        border-left: 1px solid var(--synbex-border);
        padding-left: 24px;
    }
}

.package-keypad-grid[b-0hndewlb5v] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 100%;
    max-width: 200px;
}

.package-keypad-btn[b-0hndewlb5v] {
    aspect-ratio: 1;
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-md);
    background: var(--synbex-surface);
    color: var(--synbex-text);
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}

.package-keypad-btn:hover[b-0hndewlb5v] {
    background: var(--synbex-primary-soft);
}

.package-keypad-btn:active[b-0hndewlb5v] {
    transform: scale(0.94);
}

.package-keypad-btn.is-action[b-0hndewlb5v] {
    font-size: 15px;
    color: var(--synbex-text-muted);
}
/* /Components/Pages/Dashboard/Visitors/Index.razor.rz.scp.css */
.visitor-registro-header[b-90u4feafjh] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

/* Filas, no columnas: arriba la tarjeta de registro/escaneo, abajo la lista de
   visitantes dentro del conjunto — más fácil de seguir que verlas una al lado de
   la otra. */
.visitor-registro-grid[b-90u4feafjh] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.visitor-camera-btn[b-90u4feafjh] {
    width: 100%;
    padding: 16px;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Datos personales / Datos adicionales lado a lado, separados por una línea
   gris clara — en celular se apilan y la línea pasa a ser horizontal arriba
   de "Datos adicionales". */
.visitor-form-columns[b-90u4feafjh] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 700px) {
    .visitor-form-columns[b-90u4feafjh] {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
    }

    .visitor-form-col:first-child[b-90u4feafjh] {
        border-right: 1px solid var(--synbex-border);
        padding-right: 28px;
    }
}

@media (max-width: 699px) {
    .visitor-form-col:first-child[b-90u4feafjh] {
        border-bottom: 1px solid var(--synbex-border);
        padding-bottom: 16px;
    }
}

.visitor-form-col-title[b-90u4feafjh] {
    color: var(--synbex-primary);
    font-size: 13.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin: 0 0 16px;
}

/* Ingreso/Salida centrados debajo de las dos columnas — íconos de línea (los
   mismos que usa el menú, Portería/door) en vez de emoji, botones más grandes
   para que sean fáciles de tocar en el mostrador. */
.visitor-actions-buttons-centered[b-90u4feafjh] {
    display: flex;
    gap: 14px;
    justify-content: center;
    margin-top: 28px;
}

.visitor-actions-buttons-centered .visitor-action-btn[b-90u4feafjh] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 190px;
    padding: 16px 28px;
    font-size: 16px;
    font-weight: 700;
}

/* Salida en rojo — se distingue de un vistazo del verde de Ingreso, en vez de
   quedar en el gris neutro de btn-synbex-secondary. */
.btn-synbex.visitor-action-btn-exit[b-90u4feafjh] {
    background: var(--synbex-danger);
    color: #fff;
    border-color: var(--synbex-danger);
}

.btn-synbex.visitor-action-btn-exit:hover[b-90u4feafjh] {
    background: #b91c1c;
    border-color: #b91c1c;
}

@media (max-width: 480px) {
    .visitor-actions-buttons-centered[b-90u4feafjh] {
        flex-direction: column;
    }

    .visitor-actions-buttons-centered .visitor-action-btn[b-90u4feafjh] {
        min-width: 0;
    }
}

/* Botón de salida rápida en la tabla de "Visitantes dentro del conjunto" —
   mismo ícono que el botón grande de Salida de arriba (door-out) y el mismo
   rojo, pero en tamaño chico con el texto al lado para que quede claro qué
   hace sin depender solo del ícono. */
.visitor-quick-checkout-btn[b-90u4feafjh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--synbex-danger);
    color: #fff;
    border-color: var(--synbex-danger);
    white-space: nowrap;
}

.visitor-quick-checkout-btn:hover[b-90u4feafjh] {
    background: #b91c1c;
    border-color: #b91c1c;
}

.visitor-quick-checkout-btn svg[b-90u4feafjh] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Punto de entrada queda aparte, esquinado abajo a la derecha de la tarjeta —
   sin título/label, y más chico que un campo de formulario normal, porque es
   solo un detalle secundario del registro. */
.visitor-entrypoint-corner[b-90u4feafjh] {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
}

.visitor-entrypoint-corner .visitor-entrypoint-field[b-90u4feafjh] {
    width: 100%;
    max-width: 150px;
}

.visitor-entrypoint-corner .visitor-entrypoint-field select[b-90u4feafjh] {
    font-size: 12.5px;
    padding: 6px 10px;
}

@media (max-width: 480px) {
    .visitor-entrypoint-corner .visitor-entrypoint-field[b-90u4feafjh] {
        max-width: 180px;
    }
}

.visitor-list-header[b-90u4feafjh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.visitor-list-title[b-90u4feafjh] {
    font-size: 20px !important;
}

.visitor-search-input[b-90u4feafjh] {
    width: 340px;
    max-width: 100%;
}

/* La tabla de visitantes dentro del conjunto no debe achicar el nombre hasta
   partirlo en varias líneas — todas las celdas quedan en una sola fila y, si
   no caben, la tarjeta (ver regla global .synbex-card:has(> table.synbex-table)
   en app.css) scrollea horizontal en vez de aplastar columnas. */
.visitor-list-card .synbex-table th[b-90u4feafjh],
.visitor-list-card .synbex-table td[b-90u4feafjh] {
    white-space: nowrap;
}

/* Ícono + alerta de "menor de edad" — mismos tonos ámbar/naranja que el resto
   de alertas de advertencia de la app (badge-warning, destino-warning-text). */
.visitor-minor-alert[b-90u4feafjh] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: var(--synbex-radius-md);
    background: rgba(217, 119, 6, 0.14);
    color: #d97706;
    font-size: 13px;
    font-weight: 600;
}

.visitor-minor-alert svg[b-90u4feafjh] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

@media (min-width: 900px) {
    /* La tarjeta de registro (documento, nombre, etc.) no necesita ocupar todo el
       ancho del panel en computadora, pero con las dos columnas de datos
       personales/adicionales necesita más espacio que antes — se angosta un
       poco y se centra; la lista de visitantes dentro del conjunto, debajo,
       usa exactamente el mismo ancho para que ambas tarjetas queden alineadas. */
    .visitor-form-card[b-90u4feafjh],
    .visitor-list-card[b-90u4feafjh] {
        width: 90%;
        max-width: 1080px;
        margin: 0 auto;
    }

    /* El escaneo por cámara es solo para celular — en una pantalla de computadora
       no tiene sentido, así que el botón ni aparece ahí. Nota: esta regla DEBE
       vivir en el stylesheet (no como estilo inline en el botón) porque un estilo
       inline con display siempre le gana a cualquier selector de clase externo,
       sin importar el ancho de pantalla — eso fue justo lo que rompía este
       "ocultar en computadora" la primera vez. */
    .visitor-camera-btn[b-90u4feafjh] {
        display: none;
    }
}

@keyframes id-scan-barcode-pulse-b-90u4feafjh {
    from { opacity: 0.55; }
    to { opacity: 1; }
}

.id-scan-barcode-zone[b-90u4feafjh] {
    animation: id-scan-barcode-pulse-b-90u4feafjh 1.3s ease-in-out infinite alternate;
}
/* /Components/Pages/ForgotPassword.razor.rz.scp.css */
.login-page[b-pgemcmbxx0] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(circle at 15% 10%, var(--synbex-primary-soft), transparent 45%),
        radial-gradient(circle at 85% 90%, var(--synbex-primary-soft), transparent 45%),
        var(--synbex-bg);
    box-sizing: border-box;
}

.login-card[b-pgemcmbxx0] {
    width: 100%;
    max-width: 400px;
    background: var(--synbex-surface);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-lg);
    box-shadow: var(--synbex-shadow);
    padding: 40px 36px;
    box-sizing: border-box;
}

.login-brand[b-pgemcmbxx0] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
}

.login-brand-mark[b-pgemcmbxx0] {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--synbex-primary), var(--synbex-primary-hover));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 24px;
    flex-shrink: 0;
}

.login-brand-name[b-pgemcmbxx0] {
    font-weight: 700;
    font-size: 26px;
    letter-spacing: -0.01em;
    color: var(--synbex-text);
}

.login-header[b-pgemcmbxx0] {
    margin-bottom: 28px;
}

.login-title[b-pgemcmbxx0] {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--synbex-text);
}

.login-subtitle[b-pgemcmbxx0] {
    margin: 0;
    font-size: 14px;
    color: var(--synbex-text-muted);
}

.login-field[b-pgemcmbxx0] {
    margin-bottom: 18px;
}

.login-label[b-pgemcmbxx0] {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--synbex-text);
}

[b-pgemcmbxx0] .login-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font-size: 14.5px;
    font-family: inherit;
    color: var(--synbex-text);
    background: var(--synbex-surface);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-md);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

[b-pgemcmbxx0] .login-input:focus {
    outline: none;
    border-color: var(--synbex-primary);
    box-shadow: 0 0 0 3px var(--synbex-primary-soft);
}

[b-pgemcmbxx0] .login-input.invalid {
    border-color: var(--synbex-danger);
}

[b-pgemcmbxx0] .login-validation-message {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--synbex-danger);
}

.login-submit[b-pgemcmbxx0] {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 16px;
    font-size: 14.5px;
    font-weight: 600;
    font-family: inherit;
    color: #fff;
    background: var(--synbex-primary);
    border: none;
    border-radius: var(--synbex-radius-md);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.05s ease;
}

.login-submit:hover[b-pgemcmbxx0] {
    background: var(--synbex-primary-hover);
}

.login-submit:active[b-pgemcmbxx0] {
    transform: translateY(1px);
}

.login-toggle-mode[b-pgemcmbxx0] {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin-top: 18px;
    padding: 0;
    background: none;
    border: none;
    text-align: center;
    text-decoration: none;
    font-size: 12.5px;
    font-family: inherit;
    color: var(--synbex-text-muted);
    cursor: pointer;
}

.login-toggle-mode:hover[b-pgemcmbxx0] {
    color: var(--synbex-primary);
}

@media (max-width: 420px) {
    .login-card[b-pgemcmbxx0] {
        padding: 32px 24px;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
.landing-page[b-10i57egcoo] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(circle at 15% 10%, var(--synbex-primary-soft), transparent 45%),
        radial-gradient(circle at 85% 90%, var(--synbex-primary-soft), transparent 45%),
        var(--synbex-bg);
}

.landing-nav[b-10i57egcoo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 32px;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.landing-brand[b-10i57egcoo] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.landing-brand-mark[b-10i57egcoo] {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--synbex-primary), var(--synbex-primary-hover));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    flex-shrink: 0;
}

.landing-brand-name[b-10i57egcoo] {
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -0.01em;
    color: var(--synbex-text);
}

.landing-hero[b-10i57egcoo] {
    max-width: 720px;
    margin: 48px auto 24px;
    padding: 0 24px;
    text-align: center;
    box-sizing: border-box;
}

.landing-hero-title[b-10i57egcoo] {
    margin: 0 0 16px;
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--synbex-text);
}

.landing-hero-subtitle[b-10i57egcoo] {
    margin: 0 0 28px;
    font-size: 17px;
    line-height: 1.5;
    color: var(--synbex-text-muted);
}

.landing-hero-cta[b-10i57egcoo] {
    padding: 12px 28px;
    font-size: 15px;
}

/* ---- Filas alternadas imagen + texto ---- */

.landing-row[b-10i57egcoo] {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    padding: 48px 24px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

.landing-row-reverse .landing-row-image[b-10i57egcoo] {
    order: 2;
}

.landing-row-reverse .landing-row-text[b-10i57egcoo] {
    order: 1;
}

/* Relleno hasta que haya capturas reales de la app — mismo tamaño/forma que va
   a tener la imagen final, para que el reemplazo no mueva nada del layout. */
.landing-row-image[b-10i57egcoo] {
    aspect-ratio: 4 / 3;
    border-radius: var(--synbex-radius-lg);
    background: linear-gradient(135deg, var(--synbex-primary-soft), var(--synbex-surface));
    border: 1px solid var(--synbex-border);
    box-shadow: var(--synbex-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
}

.landing-row-image img[b-10i57egcoo] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.landing-row-image-icon[b-10i57egcoo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    border-radius: 22px;
    background: var(--synbex-surface);
    color: var(--synbex-primary);
    box-shadow: var(--synbex-shadow);
}

.landing-row-image-icon svg[b-10i57egcoo] {
    width: 40px;
    height: 40px;
}

.landing-row-eyebrow[b-10i57egcoo] {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--synbex-primary);
}

.landing-row-title[b-10i57egcoo] {
    margin: 0 0 12px;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: var(--synbex-text);
}

.landing-row-desc[b-10i57egcoo] {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--synbex-text-muted);
}

/* ---- Tarjetas chicas para las funciones restantes ---- */

.landing-extras[b-10i57egcoo] {
    max-width: 1100px;
    width: 100%;
    margin: 24px auto 60px;
    padding: 0 24px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.landing-extra-card[b-10i57egcoo] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: var(--synbex-surface);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-lg);
    box-shadow: var(--synbex-shadow);
    padding: 22px;
}

.landing-extra-icon[b-10i57egcoo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--synbex-radius-md);
    background: var(--synbex-primary-soft);
    color: var(--synbex-primary);
    flex-shrink: 0;
}

.landing-extra-icon svg[b-10i57egcoo] {
    width: 22px;
    height: 22px;
}

.landing-extra-title[b-10i57egcoo] {
    margin: 0 0 4px;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--synbex-text);
}

.landing-extra-desc[b-10i57egcoo] {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--synbex-text-muted);
}

/* ---- Pie ---- */

.landing-footer[b-10i57egcoo] {
    margin-top: auto;
    padding: 24px;
    text-align: center;
    font-size: 12.5px;
    color: var(--synbex-text-muted);
}

.landing-footer p[b-10i57egcoo] {
    margin: 4px 0;
}

.landing-footer a[b-10i57egcoo] {
    color: var(--synbex-primary);
    text-decoration: none;
}

.landing-footer a:hover[b-10i57egcoo] {
    text-decoration: underline;
}

@media (max-width: 760px) {
    .landing-nav[b-10i57egcoo] {
        padding: 16px 20px;
    }

    .landing-hero[b-10i57egcoo] {
        margin-top: 32px;
    }

    .landing-hero-title[b-10i57egcoo] {
        font-size: 28px;
    }

    .landing-hero-subtitle[b-10i57egcoo] {
        font-size: 15px;
    }

    /* En celular, las filas dejan de ser dos columnas y pasan a apilarse — la
       imagen siempre arriba de su texto, sin importar si la fila era "reverse"
       en escritorio. */
    .landing-row[b-10i57egcoo] {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 32px 20px;
    }

    .landing-row-reverse .landing-row-image[b-10i57egcoo],
    .landing-row-reverse .landing-row-text[b-10i57egcoo] {
        order: initial;
    }

    .landing-row-title[b-10i57egcoo] {
        font-size: 22px;
    }
}
/* /Components/Pages/Login.razor.rz.scp.css */
.login-page[b-sablvngdox] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(circle at 15% 10%, var(--synbex-primary-soft), transparent 45%),
        radial-gradient(circle at 85% 90%, var(--synbex-primary-soft), transparent 45%),
        var(--synbex-bg);
    box-sizing: border-box;
}

.login-card[b-sablvngdox] {
    width: 100%;
    max-width: 400px;
    background: var(--synbex-surface);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-lg);
    box-shadow: var(--synbex-shadow);
    padding: 40px 36px;
    box-sizing: border-box;
}

.login-brand[b-sablvngdox] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
}

.login-brand-mark[b-sablvngdox] {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--synbex-primary), var(--synbex-primary-hover));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 24px;
    flex-shrink: 0;
}

.login-brand-name[b-sablvngdox] {
    font-weight: 700;
    font-size: 26px;
    letter-spacing: -0.01em;
    color: var(--synbex-text);
}

.login-header[b-sablvngdox] {
    margin-bottom: 28px;
}

.login-title[b-sablvngdox] {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--synbex-text);
}

.login-subtitle[b-sablvngdox] {
    margin: 0;
    font-size: 14px;
    color: var(--synbex-text-muted);
}

.login-alert[b-sablvngdox] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
    padding: 12px 14px;
    border-radius: var(--synbex-radius-md);
    background: var(--synbex-danger-soft);
    color: var(--synbex-danger);
    font-size: 13.5px;
    line-height: 1.4;
}

.login-alert svg[b-sablvngdox] {
    flex-shrink: 0;
    margin-top: 1px;
}

.login-alert.is-success[b-sablvngdox] {
    background: rgba(22, 163, 74, 0.12);
    color: var(--synbex-success);
}

.login-field[b-sablvngdox] {
    margin-bottom: 18px;
}

.login-label[b-sablvngdox] {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--synbex-text);
}

/* InputText/InputCheckbox/ValidationMessage renderizan su <input>/<div> real dentro de un
   componente del framework: ::deep es el mecanismo de Blazor para que el CSS aislado de esta
   página alcance ese elemento igual, sin tener que quitarle el aislamiento a todo el archivo. */
[b-sablvngdox] .login-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font-size: 14.5px;
    font-family: inherit;
    color: var(--synbex-text);
    background: var(--synbex-surface);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-md);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

[b-sablvngdox] .login-input:focus {
    outline: none;
    border-color: var(--synbex-primary);
    box-shadow: 0 0 0 3px var(--synbex-primary-soft);
}

[b-sablvngdox] .login-input.invalid {
    border-color: var(--synbex-danger);
}

.login-input-wrap[b-sablvngdox] {
    position: relative;
}

.login-input-wrap[b-sablvngdox]  .login-input {
    padding-right: 42px;
}

.login-pwd-toggle[b-sablvngdox] {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: var(--synbex-radius-md);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    color: var(--synbex-text-muted);
    transition: background 0.15s ease;
}

.login-pwd-toggle:hover[b-sablvngdox] {
    background: var(--synbex-primary-soft);
}

[b-sablvngdox] .login-validation-message {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--synbex-danger);
}

.login-row[b-sablvngdox] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.login-remember[b-sablvngdox] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--synbex-text-muted);
}

[b-sablvngdox] .login-remember input {
    width: 16px;
    height: 16px;
    accent-color: var(--synbex-primary);
    cursor: pointer;
}

.login-remember label[b-sablvngdox] {
    cursor: pointer;
}

.login-forgot-link[b-sablvngdox] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--synbex-primary);
    text-decoration: none;
}

.login-forgot-link:hover[b-sablvngdox] {
    text-decoration: underline;
}

.login-submit[b-sablvngdox] {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 16px;
    font-size: 14.5px;
    font-weight: 600;
    font-family: inherit;
    color: #fff;
    background: var(--synbex-primary);
    border: none;
    border-radius: var(--synbex-radius-md);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.05s ease;
}

.login-submit:hover[b-sablvngdox] {
    background: var(--synbex-primary-hover);
}

.login-submit:active[b-sablvngdox] {
    transform: translateY(1px);
}

.login-footer[b-sablvngdox] {
    margin-top: 24px;
    text-align: center;
    font-size: 12.5px;
    color: var(--synbex-text-muted);
}

.login-copyright[b-sablvngdox] {
    margin-top: 8px;
    text-align: center;
    font-size: 11px;
    color: var(--synbex-text-muted);
}

@media (max-width: 420px) {
    .login-card[b-sablvngdox] {
        padding: 32px 24px;
    }
}
/* /Components/Pages/ResetPassword.razor.rz.scp.css */
.login-page[b-6oevjwy1ob] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(circle at 15% 10%, var(--synbex-primary-soft), transparent 45%),
        radial-gradient(circle at 85% 90%, var(--synbex-primary-soft), transparent 45%),
        var(--synbex-bg);
    box-sizing: border-box;
}

.login-card[b-6oevjwy1ob] {
    width: 100%;
    max-width: 400px;
    background: var(--synbex-surface);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-lg);
    box-shadow: var(--synbex-shadow);
    padding: 40px 36px;
    box-sizing: border-box;
}

.login-brand[b-6oevjwy1ob] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
}

.login-brand-mark[b-6oevjwy1ob] {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--synbex-primary), var(--synbex-primary-hover));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 24px;
    flex-shrink: 0;
}

.login-brand-name[b-6oevjwy1ob] {
    font-weight: 700;
    font-size: 26px;
    letter-spacing: -0.01em;
    color: var(--synbex-text);
}

.login-header[b-6oevjwy1ob] {
    margin-bottom: 28px;
}

.login-title[b-6oevjwy1ob] {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--synbex-text);
}

.login-subtitle[b-6oevjwy1ob] {
    margin: 0;
    font-size: 14px;
    color: var(--synbex-text-muted);
}

.login-alert[b-6oevjwy1ob] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
    padding: 12px 14px;
    border-radius: var(--synbex-radius-md);
    background: var(--synbex-danger-soft);
    color: var(--synbex-danger);
    font-size: 13.5px;
    line-height: 1.4;
}

.login-alert svg[b-6oevjwy1ob] {
    flex-shrink: 0;
    margin-top: 1px;
}

.login-alert.is-info[b-6oevjwy1ob] {
    background: var(--synbex-primary-soft);
    color: var(--synbex-primary);
}

.pwd-requirements[b-6oevjwy1ob] {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: grid;
    gap: 4px;
}

.pwd-requirements li[b-6oevjwy1ob] {
    font-size: 12px;
    font-weight: 600;
    color: var(--synbex-text-muted);
    padding-left: 16px;
    position: relative;
}

.pwd-requirements li[b-6oevjwy1ob]::before {
    content: "•";
    position: absolute;
    left: 2px;
    color: var(--synbex-primary);
}

.pwd-requirements li.is-missing[b-6oevjwy1ob] {
    color: var(--synbex-danger);
}

.pwd-requirements li.is-missing[b-6oevjwy1ob]::before {
    color: var(--synbex-danger);
}

.pwd-requirements li.is-met[b-6oevjwy1ob] {
    color: var(--synbex-success);
}

.pwd-requirements li.is-met[b-6oevjwy1ob]::before {
    content: "✓";
    color: var(--synbex-success);
}

.login-field[b-6oevjwy1ob] {
    margin-bottom: 18px;
}

.login-label[b-6oevjwy1ob] {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--synbex-text);
}

[b-6oevjwy1ob] .login-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font-size: 14.5px;
    font-family: inherit;
    color: var(--synbex-text);
    background: var(--synbex-surface);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-md);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

[b-6oevjwy1ob] .login-input:focus {
    outline: none;
    border-color: var(--synbex-primary);
    box-shadow: 0 0 0 3px var(--synbex-primary-soft);
}

[b-6oevjwy1ob] .login-input.invalid {
    border-color: var(--synbex-danger);
}

[b-6oevjwy1ob] .login-input[readonly] {
    color: var(--synbex-text-muted);
    background: var(--synbex-bg);
    cursor: default;
}

[b-6oevjwy1ob] .login-code-input {
    text-align: center;
    letter-spacing: 0.2em;
}

.login-input-wrap[b-6oevjwy1ob] {
    position: relative;
}

.login-input-wrap[b-6oevjwy1ob]  .login-input {
    padding-right: 42px;
}

.login-pwd-toggle[b-6oevjwy1ob] {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: var(--synbex-radius-md);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    color: var(--synbex-text-muted);
    transition: background 0.15s ease;
}

.login-pwd-toggle:hover[b-6oevjwy1ob] {
    background: var(--synbex-primary-soft);
}

[b-6oevjwy1ob] .login-validation-message {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--synbex-danger);
}

.login-submit[b-6oevjwy1ob] {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 16px;
    font-size: 14.5px;
    font-weight: 600;
    font-family: inherit;
    color: #fff;
    background: var(--synbex-primary);
    border: none;
    border-radius: var(--synbex-radius-md);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.05s ease;
}

.login-submit:hover[b-6oevjwy1ob] {
    background: var(--synbex-primary-hover);
}

.login-submit:active[b-6oevjwy1ob] {
    transform: translateY(1px);
}

.login-toggle-mode[b-6oevjwy1ob] {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin-top: 18px;
    padding: 0;
    background: none;
    border: none;
    text-align: center;
    text-decoration: none;
    font-size: 12.5px;
    font-family: inherit;
    color: var(--synbex-text-muted);
    cursor: pointer;
}

.login-toggle-mode:hover[b-6oevjwy1ob] {
    color: var(--synbex-primary);
}

@media (max-width: 420px) {
    .login-card[b-6oevjwy1ob] {
        padding: 32px 24px;
    }
}
/* /Components/Pages/SelectUnit.razor.rz.scp.css */
.login-page[b-xkgmn9stfg] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(circle at 15% 10%, var(--synbex-primary-soft), transparent 45%),
        radial-gradient(circle at 85% 90%, var(--synbex-primary-soft), transparent 45%),
        var(--synbex-bg);
    box-sizing: border-box;
}

.login-card[b-xkgmn9stfg] {
    width: 100%;
    max-width: 400px;
    background: var(--synbex-surface);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-lg);
    box-shadow: var(--synbex-shadow);
    padding: 40px 36px;
    box-sizing: border-box;
}

.login-brand[b-xkgmn9stfg] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
}

.login-brand-mark[b-xkgmn9stfg] {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--synbex-primary), var(--synbex-primary-hover));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 24px;
    flex-shrink: 0;
}

.login-brand-name[b-xkgmn9stfg] {
    font-weight: 700;
    font-size: 26px;
    letter-spacing: -0.01em;
    color: var(--synbex-text);
}

.login-header[b-xkgmn9stfg] {
    margin-bottom: 28px;
}

.login-title[b-xkgmn9stfg] {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--synbex-text);
}

.login-subtitle[b-xkgmn9stfg] {
    margin: 0;
    font-size: 14px;
    color: var(--synbex-text-muted);
}

.login-alert[b-xkgmn9stfg] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
    padding: 12px 14px;
    border-radius: var(--synbex-radius-md);
    background: var(--synbex-danger-soft);
    color: var(--synbex-danger);
    font-size: 13.5px;
    line-height: 1.4;
}

.login-alert svg[b-xkgmn9stfg] {
    flex-shrink: 0;
    margin-top: 1px;
}

.login-submit[b-xkgmn9stfg] {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 16px;
    font-size: 14.5px;
    font-weight: 600;
    font-family: inherit;
    color: #fff;
    background: var(--synbex-primary);
    border: none;
    border-radius: var(--synbex-radius-md);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.05s ease;
}

.login-submit:hover[b-xkgmn9stfg] {
    background: var(--synbex-primary-hover);
}

.login-submit:active[b-xkgmn9stfg] {
    transform: translateY(1px);
}

[b-xkgmn9stfg] .unit-option-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-md);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

[b-xkgmn9stfg] .unit-option-card:has(input:checked) {
    border-color: var(--synbex-primary);
    background: var(--synbex-primary-soft);
}

[b-xkgmn9stfg] .unit-option-card input[type="radio"] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    accent-color: var(--synbex-primary);
}

.unit-option-info[b-xkgmn9stfg] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.unit-option-info strong[b-xkgmn9stfg] {
    font-size: 14.5px;
    color: var(--synbex-text);
}

.unit-option-place[b-xkgmn9stfg] {
    font-size: 12.5px;
    color: var(--synbex-text-muted);
}

@media (max-width: 420px) {
    .login-card[b-xkgmn9stfg] {
        padding: 32px 24px;
    }
}
/* /Components/Pages/SetupTwoFactor.razor.rz.scp.css */
.pwd-page[b-qqwlx0bsj1] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(circle at 15% 10%, var(--synbex-primary-soft), transparent 45%),
        radial-gradient(circle at 85% 90%, var(--synbex-primary-soft), transparent 45%),
        var(--synbex-bg);
    box-sizing: border-box;
}

.pwd-card[b-qqwlx0bsj1] {
    width: 100%;
    max-width: 420px;
    background: var(--synbex-surface);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-lg);
    box-shadow: var(--synbex-shadow);
    padding: 40px 36px;
    box-sizing: border-box;
}

.pwd-icon[b-qqwlx0bsj1] {
    width: 56px;
    height: 56px;
    margin: 0 auto 20px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--synbex-primary), var(--synbex-primary-hover));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    box-shadow: 0 8px 20px -6px var(--synbex-primary);
}

.pwd-header[b-qqwlx0bsj1] {
    text-align: center;
    margin-bottom: 26px;
}

.pwd-title[b-qqwlx0bsj1] {
    margin: 0 0 6px;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--synbex-text);
}

.pwd-subtitle[b-qqwlx0bsj1] {
    margin: 0;
    font-size: 13.5px;
    color: var(--synbex-text-muted);
    line-height: 1.5;
}

.pwd-alert[b-qqwlx0bsj1] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
    padding: 12px 14px;
    border-radius: var(--synbex-radius-md);
    background: var(--synbex-danger-soft);
    color: var(--synbex-danger);
    font-size: 13.5px;
    line-height: 1.4;
}

.pwd-alert svg[b-qqwlx0bsj1] {
    flex-shrink: 0;
    margin-top: 1px;
}

.pwd-field[b-qqwlx0bsj1] {
    margin-bottom: 18px;
}

.pwd-label[b-qqwlx0bsj1] {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--synbex-text);
}

.pwd-input-wrap[b-qqwlx0bsj1] {
    position: relative;
}

[b-qqwlx0bsj1] .pwd-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 42px 10px 12px;
    font-size: 14.5px;
    font-family: inherit;
    color: var(--synbex-text);
    background: var(--synbex-surface);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-md);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

[b-qqwlx0bsj1] .pwd-input:focus {
    outline: none;
    border-color: var(--synbex-primary);
    box-shadow: 0 0 0 3px var(--synbex-primary-soft);
}

[b-qqwlx0bsj1] .pwd-input.invalid {
    border-color: var(--synbex-danger);
}

.pwd-toggle[b-qqwlx0bsj1] {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: var(--synbex-radius-md);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    color: var(--synbex-text-muted);
    transition: background 0.15s ease;
}

.pwd-toggle:hover[b-qqwlx0bsj1] {
    background: var(--synbex-primary-soft);
}

[b-qqwlx0bsj1] .pwd-validation-message {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--synbex-danger);
}

.pwd-submit[b-qqwlx0bsj1] {
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
    padding: 11px 16px;
    font-size: 14.5px;
    font-weight: 600;
    font-family: inherit;
    color: #fff;
    background: var(--synbex-primary);
    border: none;
    border-radius: var(--synbex-radius-md);
    cursor: pointer;
    box-shadow: 0 6px 16px -6px var(--synbex-primary);
    transition: background 0.15s ease, transform 0.05s ease;
}

.pwd-submit:hover[b-qqwlx0bsj1] {
    background: var(--synbex-primary-hover);
}

.pwd-submit:active[b-qqwlx0bsj1] {
    transform: translateY(1px);
}

.pwd-submit:disabled[b-qqwlx0bsj1] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.twofa-finish-link[b-qqwlx0bsj1] {
    display: block;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
}

.twofa-qr-wrap[b-qqwlx0bsj1] {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.twofa-qr-img[b-qqwlx0bsj1] {
    width: 200px;
    height: 200px;
    border-radius: var(--synbex-radius-md);
    border: 1px solid var(--synbex-border);
    background: #fff;
    padding: 10px;
}

.twofa-instructions[b-qqwlx0bsj1] {
    margin-bottom: 10px;
    text-align: center;
}

.twofa-manual-key[b-qqwlx0bsj1] {
    margin: 0 0 22px;
    padding: 10px 12px;
    background: var(--synbex-primary-soft);
    border-radius: var(--synbex-radius-md);
    text-align: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 14px;
    letter-spacing: 0.05em;
    color: var(--synbex-text);
    word-break: break-all;
}

[b-qqwlx0bsj1] .twofa-code-input {
    text-align: center;
    font-size: 20px;
    letter-spacing: 0.3em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.twofa-recovery-codes[b-qqwlx0bsj1] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 22px;
    padding: 14px;
    background: var(--synbex-primary-soft);
    border-radius: var(--synbex-radius-md);
}

.twofa-recovery-code[b-qqwlx0bsj1] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13.5px;
    text-align: center;
    color: var(--synbex-text);
    padding: 4px 0;
}

@media (max-width: 420px) {
    .pwd-card[b-qqwlx0bsj1] {
        padding: 32px 22px;
    }

    .twofa-qr-img[b-qqwlx0bsj1] {
        width: 170px;
        height: 170px;
    }
}
/* /Components/Pages/VerifyTwoFactor.razor.rz.scp.css */
.login-page[b-7km5l7unk7] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(circle at 15% 10%, var(--synbex-primary-soft), transparent 45%),
        radial-gradient(circle at 85% 90%, var(--synbex-primary-soft), transparent 45%),
        var(--synbex-bg);
    box-sizing: border-box;
}

.login-card[b-7km5l7unk7] {
    width: 100%;
    max-width: 400px;
    background: var(--synbex-surface);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-lg);
    box-shadow: var(--synbex-shadow);
    padding: 40px 36px;
    box-sizing: border-box;
}

.login-brand[b-7km5l7unk7] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
}

.login-brand-mark[b-7km5l7unk7] {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--synbex-primary), var(--synbex-primary-hover));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 24px;
    flex-shrink: 0;
}

.login-brand-name[b-7km5l7unk7] {
    font-weight: 700;
    font-size: 26px;
    letter-spacing: -0.01em;
    color: var(--synbex-text);
}

.login-header[b-7km5l7unk7] {
    margin-bottom: 28px;
}

.login-title[b-7km5l7unk7] {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--synbex-text);
}

.login-subtitle[b-7km5l7unk7] {
    margin: 0;
    font-size: 14px;
    color: var(--synbex-text-muted);
}

.login-alert[b-7km5l7unk7] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
    padding: 12px 14px;
    border-radius: var(--synbex-radius-md);
    background: var(--synbex-danger-soft);
    color: var(--synbex-danger);
    font-size: 13.5px;
    line-height: 1.4;
}

.login-alert svg[b-7km5l7unk7] {
    flex-shrink: 0;
    margin-top: 1px;
}

.login-field[b-7km5l7unk7] {
    margin-bottom: 18px;
}

.login-label[b-7km5l7unk7] {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--synbex-text);
}

[b-7km5l7unk7] .login-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font-size: 14.5px;
    font-family: inherit;
    color: var(--synbex-text);
    background: var(--synbex-surface);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-md);
    text-align: center;
    letter-spacing: 0.15em;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

[b-7km5l7unk7] .login-input:focus {
    outline: none;
    border-color: var(--synbex-primary);
    box-shadow: 0 0 0 3px var(--synbex-primary-soft);
}

[b-7km5l7unk7] .login-input.invalid {
    border-color: var(--synbex-danger);
}

[b-7km5l7unk7] .login-validation-message {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--synbex-danger);
}

.login-submit[b-7km5l7unk7] {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 16px;
    font-size: 14.5px;
    font-weight: 600;
    font-family: inherit;
    color: #fff;
    background: var(--synbex-primary);
    border: none;
    border-radius: var(--synbex-radius-md);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.05s ease;
}

.login-submit:hover[b-7km5l7unk7] {
    background: var(--synbex-primary-hover);
}

.login-submit:active[b-7km5l7unk7] {
    transform: translateY(1px);
}

.login-toggle-mode[b-7km5l7unk7] {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin-top: 18px;
    padding: 0;
    background: none;
    border: none;
    text-align: center;
    text-decoration: none;
    font-size: 12.5px;
    font-family: inherit;
    color: var(--synbex-text-muted);
    cursor: pointer;
}

.login-toggle-mode:hover[b-7km5l7unk7] {
    color: var(--synbex-primary);
}

@media (max-width: 420px) {
    .login-card[b-7km5l7unk7] {
        padding: 32px 24px;
    }
}