/* /Components/ConfirmDialog.razor.rz.scp.css */
.dialog-backdrop[b-16khyhjnx1] {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    padding: 1rem;
}

.dialog-card[b-16khyhjnx1] {
    background-color: var(--bg);
    border-radius: 1rem;
    padding: 2rem;
    max-width: 24rem;
    width: 100%;
    box-shadow: var(--shadow-lg);
    border: 1px solid color-mix(in srgb, var(--outline-variant) 30%, transparent);
    text-align: center;
}

.dialog-icon[b-16khyhjnx1] {
    font-size: 3rem;
    color: var(--severity-critical);
    margin-bottom: 1rem;
    display: block;
}

.dialog-title[b-16khyhjnx1] {
    font-family: var(--font-headline);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--on-surface);
}

.dialog-message[b-16khyhjnx1] {
    color: var(--on-surface-variant);
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.dialog-actions[b-16khyhjnx1] {
    display: flex;
    gap: 0.75rem;
}

.btn-dialog-cancel[b-16khyhjnx1] {
    flex: 1;
    padding: 0.625rem;
    background-color: var(--surface-container);
    color: var(--primary);
    border-radius: 0.5rem;
    font-family: var(--font-label);
    font-weight: 700;
    font-size: 0.875rem;
    border: 1px solid color-mix(in srgb, var(--outline-variant) 30%, transparent);
    cursor: pointer;
    transition: background-color 150ms;
}

.btn-dialog-cancel:hover:not(:disabled)[b-16khyhjnx1] {
    background-color: color-mix(in srgb, var(--primary) 10%, transparent);
}

.btn-dialog-cancel:disabled[b-16khyhjnx1] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-dialog-confirm[b-16khyhjnx1] {
    flex: 1;
    padding: 0.625rem;
    background-color: var(--severity-critical);
    color: white;
    border-radius: 0.5rem;
    font-family: var(--font-label);
    font-weight: 700;
    font-size: 0.875rem;
    border: none;
    cursor: pointer;
    transition: opacity 150ms;
}

.btn-dialog-confirm:hover:not(:disabled)[b-16khyhjnx1] {
    opacity: 0.9;
}

.btn-dialog-confirm:disabled[b-16khyhjnx1] {
    opacity: 0.6;
    cursor: not-allowed;
}
/* /Components/CustomDatePicker.razor.rz.scp.css */
.custom-date-picker[b-6rl38am7l7] {
    position: relative;
    width: 100%;
    min-width: 0;
}

.custom-date-picker--open[b-6rl38am7l7] {
    z-index: 70;
}

.custom-date-picker__overlay[b-6rl38am7l7] {
    position: fixed;
    inset: 0;
    z-index: 65;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
}

.custom-date-picker__trigger[b-6rl38am7l7] {
    position: relative;
    z-index: 67;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 2.5rem;
    padding: 0.5rem 2.6rem 0.5rem 2.5rem;
    border: none;
    border-radius: 0.5rem;
    background-color: color-mix(in srgb, var(--surface-container) 50%, transparent);
    color: var(--on-surface);
    font-size: 0.875rem;
    font-family: var(--font-label);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.custom-date-picker__trigger:hover:not(:disabled)[b-6rl38am7l7] {
    background-color: color-mix(in srgb, var(--surface-container) 72%, transparent);
}

.custom-date-picker__trigger:focus-visible[b-6rl38am7l7] {
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent);
}

.custom-date-picker__trigger--open[b-6rl38am7l7] {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent);
}

.custom-date-picker__trigger:disabled[b-6rl38am7l7] {
    cursor: not-allowed;
    opacity: 0.7;
}

.custom-date-picker__icon[b-6rl38am7l7] {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    color: var(--on-surface-variant);
    pointer-events: none;
}

.custom-date-picker__label[b-6rl38am7l7] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.custom-date-picker__label--placeholder[b-6rl38am7l7] {
    color: var(--on-surface-variant);
}

.custom-date-picker__chevron[b-6rl38am7l7] {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    color: var(--on-surface-variant);
    pointer-events: none;
}

.custom-date-picker__panel[b-6rl38am7l7] {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    width: min(21rem, calc(100vw - 2rem));
    min-width: 19rem;
    max-width: calc(100vw - 2rem);
    z-index: 68;
    padding: 0.9rem;
    border: 1px solid color-mix(in srgb, var(--outline-variant) 75%, transparent);
    border-radius: 0.85rem;
    background: var(--bg);
    box-shadow: var(--shadow-lg);
}

.custom-date-picker__header[b-6rl38am7l7] {
    display: grid;
    grid-template-columns: 2rem 1fr 2rem;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.65rem;
}

.custom-date-picker__title[b-6rl38am7l7] {
    text-align: center;
    color: var(--on-surface);
    font-family: var(--font-headline);
    font-size: 0.92rem;
    font-weight: 700;
    text-transform: capitalize;
}

.custom-date-picker__nav[b-6rl38am7l7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 0.55rem;
    background: transparent;
    color: var(--on-surface-variant);
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.custom-date-picker__nav:hover[b-6rl38am7l7],
.custom-date-picker__nav:focus-visible[b-6rl38am7l7] {
    outline: none;
    background: color-mix(in srgb, var(--primary) 8%, transparent);
    color: var(--primary);
}

.custom-date-picker__nav .material-symbols-outlined[b-6rl38am7l7] {
    font-size: 1.15rem;
}

.custom-date-picker__weekdays[b-6rl38am7l7],
.custom-date-picker__grid[b-6rl38am7l7] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.custom-date-picker__weekdays[b-6rl38am7l7] {
    margin-bottom: 0.35rem;
}

.custom-date-picker__weekday[b-6rl38am7l7] {
    padding: 0.35rem 0;
    text-align: center;
    color: var(--on-surface-variant);
    font-family: var(--font-label);
    font-size: 0.72rem;
    font-weight: 700;
}

.custom-date-picker__day[b-6rl38am7l7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    min-height: 2.45rem;
    border: none;
    border-radius: 0.6rem;
    background: transparent;
    color: var(--on-surface);
    font-family: var(--font-label);
    font-size: 0.84rem;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.custom-date-picker__day:hover[b-6rl38am7l7],
.custom-date-picker__day:focus-visible[b-6rl38am7l7] {
    outline: none;
    background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.custom-date-picker__day--today[b-6rl38am7l7] {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent);
}

.custom-date-picker__day--selected[b-6rl38am7l7] {
    background: var(--primary);
    color: var(--on-primary);
    font-weight: 700;
}

.custom-date-picker__day--outside[b-6rl38am7l7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    min-height: 2.45rem;
    color: color-mix(in srgb, var(--on-surface-variant) 65%, transparent);
    font-family: var(--font-label);
    font-size: 0.8rem;
    opacity: 0.5;
}

.custom-date-picker__footer[b-6rl38am7l7] {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.65rem;
    border-top: 1px solid color-mix(in srgb, var(--outline-variant) 40%, transparent);
}

.custom-date-picker__footer-action[b-6rl38am7l7] {
    border: none;
    background: transparent;
    color: var(--primary);
    font-family: var(--font-label);
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0.2rem 0.1rem;
}

.custom-date-picker__footer-action:disabled[b-6rl38am7l7] {
    color: var(--on-surface-variant);
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 767px) {
    .custom-date-picker__panel[b-6rl38am7l7] {
        left: 0;
        right: 0;
        width: 100%;
        min-width: 0;
        max-width: none;
    }
}
/* /Components/CustomDropdown.razor.rz.scp.css */
.custom-dropdown[b-bkjy0e2c35] {
    position: relative;
    width: 100%;
    --custom-dropdown-item-height: 2.5rem;
    --custom-dropdown-visible-items: 6;
}

.custom-dropdown--open[b-bkjy0e2c35] {
    z-index: 70;
}

.custom-dropdown--disabled[b-bkjy0e2c35] {
    opacity: 0.7;
}

.custom-dropdown__overlay[b-bkjy0e2c35] {
    position: fixed;
    inset: 0;
    z-index: 65;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    cursor: default;
}

.custom-dropdown__trigger[b-bkjy0e2c35] {
    position: relative;
    z-index: 67;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 2.5rem;
    padding: 0.5rem 2.6rem 0.5rem 1rem;
    border: none;
    border-radius: 0.5rem;
    background-color: color-mix(in srgb, var(--surface-container) 50%, transparent);
    color: var(--on-surface);
    font-size: 0.875rem;
    font-family: var(--font-label);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.custom-dropdown__trigger:hover:not(:disabled)[b-bkjy0e2c35] {
    background-color: color-mix(in srgb, var(--surface-container) 72%, transparent);
}

.custom-dropdown__trigger:focus-visible[b-bkjy0e2c35] {
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent);
}

.custom-dropdown__trigger:disabled[b-bkjy0e2c35] {
    cursor: not-allowed;
}

.custom-dropdown__trigger--open[b-bkjy0e2c35] {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent);
}

.custom-dropdown__trigger--with-icon[b-bkjy0e2c35] {
    padding-left: 2.5rem;
}

.custom-dropdown__leading-icon[b-bkjy0e2c35] {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    color: var(--on-surface-variant);
    pointer-events: none;
}

.custom-dropdown__label[b-bkjy0e2c35] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.custom-dropdown__label--placeholder[b-bkjy0e2c35] {
    color: var(--on-surface-variant);
}

.custom-dropdown__chevron[b-bkjy0e2c35] {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    color: var(--on-surface-variant);
    pointer-events: none;
}

.custom-dropdown__menu[b-bkjy0e2c35] {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    right: 0;
    z-index: 68;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: calc(var(--custom-dropdown-item-height) * var(--custom-dropdown-visible-items));
    padding: 0.35rem;
    border: 1px solid color-mix(in srgb, var(--outline-variant) 75%, transparent);
    border-radius: 0.85rem;
    background: var(--bg);
    box-shadow: var(--shadow-lg);
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--primary) 35%, var(--outline-variant)) transparent;
}

.custom-dropdown__option[b-bkjy0e2c35] {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: var(--custom-dropdown-item-height);
    padding: 0.6rem 0.8rem;
    border: none;
    border-radius: 0.6rem;
    background: transparent;
    color: var(--on-surface);
    font-size: 0.875rem;
    font-family: var(--font-label);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.custom-dropdown__option:hover[b-bkjy0e2c35],
.custom-dropdown__option:focus-visible[b-bkjy0e2c35] {
    outline: none;
    background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.custom-dropdown__option--selected[b-bkjy0e2c35] {
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    color: var(--primary);
    font-weight: 700;
}

.custom-dropdown__option-label[b-bkjy0e2c35] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.custom-dropdown__menu[b-bkjy0e2c35]::-webkit-scrollbar {
    width: 0.4rem;
}

.custom-dropdown__menu[b-bkjy0e2c35]::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--primary) 35%, var(--outline-variant));
    border-radius: 9999px;
}

.custom-dropdown__menu[b-bkjy0e2c35]::-webkit-scrollbar-track {
    background: transparent;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ── App Header ── */
.app-header[b-938jutkesy] {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 120;
    padding-top: var(--safe-area-top);
    background-color: color-mix(in srgb, var(--surface) 85%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 12px 40px 0 rgba(27, 28, 25, 0.04);
    border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 10%, transparent);
}

.header-inner[b-938jutkesy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    height: var(--app-header-height);
    width: 100%;
    max-width: 80rem;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .header-inner[b-938jutkesy] {
        padding: 0 3rem;
    }
}

.header-brand[b-938jutkesy] {
    display: flex;
    align-items: center;
    gap: 2.5rem;
}

.brand-name[b-938jutkesy] {
    font-family: var(--font-headline);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--on-surface);
}

.brand-logo-picture[b-938jutkesy] {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    position: relative;
}

.brand-logo[b-938jutkesy] {
    display: block;
    height: 32px;
    width: auto;
}

.header-nav[b-938jutkesy] {
    display: none;
    gap: 2rem;
}

@media (min-width: 768px) {
    .header-nav[b-938jutkesy] {
        display: flex;
    }
}
.header-actions[b-938jutkesy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    flex-shrink: 0;
}

.logout-form[b-938jutkesy] {
    display: inline-flex;
    margin: 0;
}
.nav-link[b-938jutkesy] {
    font-family: var(--font-label);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--on-surface-variant);
    text-decoration: none;
    padding: 0.5rem 0.25rem;
    margin: 0 0.5rem;
    transition: all var(--transition-fast);
    border-bottom: 2px solid transparent; 
    display: inline-flex;
    align-items: center;
}
    .nav-link:hover[b-938jutkesy] {
        color: var(--primary);
        background-color: color-mix(in srgb, var(--primary) 8%, transparent);
    }
[b-938jutkesy] .nav-link.active {
    color: var(--primary) !important;
    font-weight: 700 !important;
    border-bottom: 3px solid var(--primary) !important;
    background-color: color-mix(in srgb, var(--primary) 5%, transparent);
}
/* ── Bottom Nav ── */

.bottom-nav[b-938jutkesy] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(4rem + env(safe-area-inset-bottom, 0px));
    background-color: var(--surface);
    border-top: 1px solid var(--outline-variant);
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: 40;
}

@media (min-width: 768px) {
    .bottom-nav[b-938jutkesy] {
        display: none;
    }
}

.bottom-nav-item[b-938jutkesy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    color: var(--on-surface-variant);
    text-decoration: none;
    font-family: var(--font-label);
    font-size: 0.625rem;
    font-weight: 500;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
    transition: color var(--transition-fast);
    min-width: 3.5rem;
}

.bottom-nav-item .material-symbols-outlined[b-938jutkesy] {
    font-size: 1.375rem;
}

[b-938jutkesy] .bottom-nav-item.active {
    color: var(--primary) !important;
}

.bottom-nav-item-admin[b-938jutkesy] {
    color: var(--primary);
}

[b-938jutkesy] .bottom-nav-item-admin.active {
    color: var(--primary-dark, var(--primary)) !important;
}

/* ── Admin nav link ── */

.nav-link-admin[b-938jutkesy] {
    color: var(--primary) !important;
    font-weight: 700 !important;
}

/* ── Theme Toggle ── */
.theme-toggle[b-938jutkesy] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--outline-variant);
    background: transparent;
    color: var(--on-surface-variant);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    flex-shrink: 0;
}

.theme-toggle:hover[b-938jutkesy] {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
}

.theme-toggle .material-symbols-outlined[b-938jutkesy] {
    font-size: 1.25rem;
}

/* ── Content padding to clear the fixed bottom-nav on mobile ── */
@media (max-width: 767px) {
    [b-938jutkesy] .container,
    [b-938jutkesy] .container-suscripciones,
    [b-938jutkesy] .main-content {
        padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
    }
}

/* ── Notification permission banner ── */
.notif-banner[b-938jutkesy] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    font-family: var(--font-label);
    font-size: 0.875rem;
    position: sticky;
    top: var(--app-top-offset);
    z-index: 119;
}

.notif-banner--denied[b-938jutkesy] {
    background-color: color-mix(in srgb, var(--severity-error, #b91c1c) 12%, var(--surface));
    color: var(--on-surface);
    border-bottom: 1px solid color-mix(in srgb, var(--severity-error, #b91c1c) 30%, transparent);
}

.notif-banner--default[b-938jutkesy] {
    background-color: color-mix(in srgb, var(--primary) 10%, var(--surface));
    color: var(--on-surface);
    border-bottom: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
}

.notif-banner span.material-symbols-outlined[b-938jutkesy] {
    flex-shrink: 0;
    font-size: 1.25rem;
}

.notif-banner > span:not(.material-symbols-outlined)[b-938jutkesy] {
    flex: 1;
}

.notif-banner-action[b-938jutkesy] {
    background-color: var(--primary);
    color: var(--on-primary, #fff);
    border: none;
    border-radius: var(--radius-md);
    padding: 0.375rem 1rem;
    font-family: var(--font-label);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
}

.notif-banner-close[b-938jutkesy] {
    background: transparent;
    border: none;
    color: var(--on-surface-variant);
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0.25rem;
    flex-shrink: 0;
}

/* ── Blazor Error UI ── */
#blazor-error-ui[b-938jutkesy] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    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-938jutkesy] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.app-version-desktop[b-938jutkesy] {
    position: fixed;
    left: 0.75rem;
    bottom: 0.75rem;
    font-family: var(--font-label);
    font-size: 0.75rem;
    color: color-mix(in srgb, var(--on-surface-variant) 70%, transparent);
    pointer-events: none;
    user-select: none;
    z-index: 30;
}

.app-version-mobile[b-938jutkesy] {
    display: none;
}

@media (max-width: 767px) {
    .app-version-desktop[b-938jutkesy] {
        display: none;
    }

    .app-version-mobile[b-938jutkesy] {
        display: block;
        position: static;
        margin-right: 0.25rem;
        margin-left: auto;
        font-family: var(--font-label);
        font-size: 0.75rem;
        color: color-mix(in srgb, var(--on-surface-variant) 70%, transparent);
        pointer-events: none;
        user-select: none;
    }
}
/* /Components/SeveridadBadge.razor.rz.scp.css */
/* ── Variante tabla (compacta) ── */
.badge-tabla[b-1b0ziyhu9c] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 0.25rem;
    font-family: var(--font-label);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    width: fit-content;
}

.badge-dot[b-1b0ziyhu9c] {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background-color: currentColor;
    flex-shrink: 0;
}

/* ── Variante detalle (pill con icono) ── */
.badge-detalle[b-1b0ziyhu9c] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-family: var(--font-label);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge-icon[b-1b0ziyhu9c] {
    font-size: 0.75rem;
    font-variation-settings: 'FILL' 1;
}

/* ── Colores por nivel ── */
.nivel-critical[b-1b0ziyhu9c] {
    background-color: var(--severity-critical-bg);
    color: var(--severity-critical);
}

.nivel-error[b-1b0ziyhu9c] {
    background-color: var(--severity-error-bg);
    color: var(--severity-error);
}

.nivel-warning[b-1b0ziyhu9c] {
    background-color: var(--severity-warning-bg);
    color: var(--severity-warning);
}

.nivel-info[b-1b0ziyhu9c] {
    background-color: var(--info-bg);
    color: var(--info);
}
/* /Components/TecnosisIntroAnimation.razor.rz.scp.css */
.tecnosis-intro[b-7miv5l84r6] {
    --tecnosis-blue: #234a98;
    --tecnosis-blue-strong: #163a7f;
    --tecnosis-blue-soft: rgba(35, 74, 152, 0.16);
    --tecnosis-glow: rgba(58, 111, 220, 0.34);
    --tecnosis-surface: #f3efe5;
    --tecnosis-surface-strong: #e7dfcf;
    --tecnosis-shadow: rgba(17, 24, 39, 0.16);
    --tecnosis-logo: url("/Logo-Tcns.png");

    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    min-width: min(18rem, 100%);
    min-height: 22rem;
    padding: 2rem 1.5rem;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.tecnosis-intro[b-7miv5l84r6]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0) 42%),
        radial-gradient(circle at 50% 72%, rgba(35, 74, 152, 0.08), rgba(35, 74, 152, 0) 38%),
        linear-gradient(180deg, #fbfaf6 0%, #f4eedf 100%);
}

.tecnosis-intro[b-7miv5l84r6]::after {
    content: "";
    position: absolute;
    inset: 8% 14%;
    z-index: -1;
    border-radius: 2rem;
    background:
        linear-gradient(130deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.1)),
        radial-gradient(circle at top, rgba(35, 74, 152, 0.12), transparent 50%);
    filter: blur(12px);
    opacity: 0;
    animation: intro-panel-fade-b-7miv5l84r6 2400ms ease-out infinite;
}

.intro-stage[b-7miv5l84r6] {
    position: relative;
    width: clamp(11rem, 48vw, 15rem);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
}

.intro-aura[b-7miv5l84r6] {
    position: absolute;
    inset: 14%;
    border-radius: 50%;
    border: 1px solid rgba(35, 74, 152, 0.18);
    opacity: 0;
}

.intro-aura--outer[b-7miv5l84r6] {
    animation: intro-ring-outer-b-7miv5l84r6 2400ms cubic-bezier(0.2, 0.9, 0.2, 1) infinite;
}

.intro-aura--inner[b-7miv5l84r6] {
    inset: 24%;
    border-color: rgba(35, 74, 152, 0.28);
    animation: intro-ring-inner-b-7miv5l84r6 2400ms cubic-bezier(0.24, 0.82, 0.2, 1) infinite;
}

.intro-monogram-shell[b-7miv5l84r6] {
    position: relative;
    width: clamp(6.75rem, 28vw, 8.5rem);
    aspect-ratio: 1;
    border-radius: 2rem;
    overflow: hidden;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(243, 239, 229, 0.84)),
        linear-gradient(180deg, rgba(35, 74, 152, 0.05), rgba(255, 255, 255, 0));
    box-shadow:
        0 18px 40px rgba(17, 24, 39, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.78);
    transform-origin: center;
    animation: intro-shell-enter-b-7miv5l84r6 2400ms cubic-bezier(0.2, 0.9, 0.2, 1) infinite;
}

.intro-monogram-backdrop[b-7miv5l84r6],
.intro-monogram-glyph[b-7miv5l84r6],
.intro-monogram-sweep[b-7miv5l84r6],
.intro-monogram-outline[b-7miv5l84r6] {
    position: absolute;
    inset: 0;
}

.intro-monogram-backdrop[b-7miv5l84r6] {
    background:
        radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 46%),
        linear-gradient(180deg, rgba(35, 74, 152, 0.09), rgba(35, 74, 152, 0.02));
}

.intro-monogram-glyph[b-7miv5l84r6] {
    inset: 12%;
    border-radius: 1.2rem;
    background-color: #fff;
    background-image: var(--tecnosis-logo);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    filter: saturate(1.15) contrast(1.05);
    transform: translateY(1rem) scale(0.82);
    opacity: 0;
    clip-path: inset(100% 0 0 0 round 1rem);
    animation:
        intro-glyph-reveal-b-7miv5l84r6 2400ms cubic-bezier(0.16, 1, 0.3, 1) infinite,
        intro-glyph-float-b-7miv5l84r6 2400ms ease-in-out infinite;
}

.intro-monogram-sweep[b-7miv5l84r6] {
    background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.9) 50%, transparent 80%);
    mix-blend-mode: screen;
    transform: translateX(-180%) skewX(-16deg);
    opacity: 0;
    animation: intro-sweep-b-7miv5l84r6 2400ms ease-out infinite;
}

.intro-monogram-outline[b-7miv5l84r6] {
    border-radius: 2rem;
    border: 1px solid rgba(35, 74, 152, 0.12);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.36);
}

.intro-signal-bar[b-7miv5l84r6] {
    position: absolute;
    top: 50%;
    width: clamp(2rem, 10vw, 3.25rem);
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(35, 74, 152, 0), rgba(35, 74, 152, 0.55), rgba(35, 74, 152, 0));
    opacity: 0;
}

.intro-signal-bar--left[b-7miv5l84r6] {
    left: 0;
    transform: translate(-30%, -50%) scaleX(0.2);
    animation: intro-bar-left-b-7miv5l84r6 2400ms ease-out infinite;
}

.intro-signal-bar--right[b-7miv5l84r6] {
    right: 0;
    transform: translate(30%, -50%) scaleX(0.2);
    animation: intro-bar-right-b-7miv5l84r6 2400ms ease-out infinite;
}

.intro-ground-glow[b-7miv5l84r6] {
    position: absolute;
    bottom: 12%;
    width: 56%;
    height: 12%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(35, 74, 152, 0.24), rgba(35, 74, 152, 0) 72%);
    filter: blur(10px);
    opacity: 0;
    animation: intro-ground-b-7miv5l84r6 2400ms ease-out infinite;
}

.intro-copy[b-7miv5l84r6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    text-align: center;
    animation: intro-copy-fade-b-7miv5l84r6 2400ms ease-out infinite;
}

.intro-title[b-7miv5l84r6] {
    color: var(--tecnosis-blue-strong);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.35rem, 4.8vw, 1.7rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.intro-subtitle[b-7miv5l84r6] {
    color: rgba(35, 74, 152, 0.72);
    font-family: var(--font-label);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.dark-mode .tecnosis-intro[b-7miv5l84r6] {
    --tecnosis-blue: #6f97f2;
    --tecnosis-blue-strong: #d8e5ff;
    --tecnosis-blue-soft: rgba(111, 151, 242, 0.22);
    --tecnosis-glow: rgba(88, 144, 255, 0.42);
    --tecnosis-surface: #0f172a;
    --tecnosis-surface-strong: #162033;
    --tecnosis-shadow: rgba(2, 6, 23, 0.56);
}

.dark-mode .tecnosis-intro[b-7miv5l84r6]::before {
    background:
        radial-gradient(circle at 50% 24%, rgba(99, 141, 241, 0.2), rgba(99, 141, 241, 0) 34%),
        radial-gradient(circle at 50% 72%, rgba(59, 130, 246, 0.18), rgba(59, 130, 246, 0) 40%),
        linear-gradient(180deg, #08101d 0%, #111a2a 56%, #0b1322 100%);
}

.dark-mode .tecnosis-intro[b-7miv5l84r6]::after {
    background:
        linear-gradient(130deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02)),
        radial-gradient(circle at top, rgba(103, 151, 255, 0.18), transparent 52%);
    filter: blur(16px);
}

.dark-mode .intro-aura[b-7miv5l84r6] {
    border-color: rgba(122, 162, 255, 0.26);
}

.dark-mode .intro-aura--inner[b-7miv5l84r6] {
    border-color: rgba(163, 191, 255, 0.4);
}

.dark-mode .intro-monogram-shell[b-7miv5l84r6] {
    background:
        linear-gradient(145deg, rgba(18, 30, 53, 0.96), rgba(10, 19, 35, 0.94)),
        linear-gradient(180deg, rgba(122, 162, 255, 0.08), rgba(255, 255, 255, 0));
    box-shadow:
        0 24px 44px rgba(2, 6, 23, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 0 0 1px rgba(122, 162, 255, 0.08);
}

.dark-mode .intro-monogram-backdrop[b-7miv5l84r6] {
    background:
        radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 46%),
        linear-gradient(180deg, rgba(103, 151, 255, 0.16), rgba(103, 151, 255, 0.04));
}

.dark-mode .intro-monogram-glyph[b-7miv5l84r6] {
    background-color: rgba(241, 245, 249, 0.96);
    box-shadow:
        0 0 0 1px rgba(148, 163, 184, 0.16),
        0 10px 24px rgba(15, 23, 42, 0.22);
}

.dark-mode .intro-monogram-sweep[b-7miv5l84r6] {
    background: linear-gradient(115deg, transparent 18%, rgba(255, 255, 255, 0.56) 50%, transparent 82%);
}

.dark-mode .intro-monogram-outline[b-7miv5l84r6] {
    border-color: rgba(148, 163, 184, 0.16);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.dark-mode .intro-signal-bar[b-7miv5l84r6] {
    background: linear-gradient(90deg, rgba(103, 151, 255, 0), rgba(103, 151, 255, 0.72), rgba(103, 151, 255, 0));
}

.dark-mode .intro-ground-glow[b-7miv5l84r6] {
    background: radial-gradient(circle, rgba(96, 165, 250, 0.36), rgba(96, 165, 250, 0) 72%);
}

.dark-mode .intro-title[b-7miv5l84r6] {
    color: #edf4ff;
}

.dark-mode .intro-subtitle[b-7miv5l84r6] {
    color: rgba(191, 219, 254, 0.82);
}

@keyframes intro-panel-fade-b-7miv5l84r6 {
    0%, 100% { opacity: 0; transform: scale(0.9); }
    18%, 78% { opacity: 1; transform: scale(1); }
}

@keyframes intro-shell-enter-b-7miv5l84r6 {
    0% {
        transform: translateY(1.4rem) scale(0.72) rotate(-8deg);
        opacity: 0;
    }
    18% {
        transform: translateY(0) scale(1.02) rotate(0deg);
        opacity: 1;
    }
    72% {
        transform: translateY(0) scale(1) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(-0.35rem) scale(0.96);
        opacity: 0;
    }
}

@keyframes intro-glyph-reveal-b-7miv5l84r6 {
    0% {
        opacity: 0;
        clip-path: inset(100% 0 0 0 round 1rem);
        transform: translateY(1rem) scale(0.82);
    }
    14% {
        opacity: 1;
    }
    24% {
        clip-path: inset(0 0 0 0 round 1rem);
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    74% {
        clip-path: inset(0 0 0 0 round 1rem);
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    100% {
        opacity: 0;
        clip-path: inset(0 0 100% 0 round 1rem);
        transform: translateY(-0.6rem) scale(0.94);
    }
}

@keyframes intro-glyph-float-b-7miv5l84r6 {
    0%, 100% { filter: saturate(1.08) contrast(1.02); }
    36% { filter: saturate(1.18) contrast(1.08) drop-shadow(0 0 16px rgba(58, 111, 220, 0.12)); }
}

@keyframes intro-sweep-b-7miv5l84r6 {
    0%, 20% {
        opacity: 0;
        transform: translateX(-180%) skewX(-16deg);
    }
    32%, 56% {
        opacity: 0.9;
    }
    58% {
        opacity: 0;
        transform: translateX(180%) skewX(-16deg);
    }
    100% {
        opacity: 0;
        transform: translateX(180%) skewX(-16deg);
    }
}

@keyframes intro-ring-outer-b-7miv5l84r6 {
    0% {
        transform: scale(0.62);
        opacity: 0;
    }
    22% {
        opacity: 0.52;
    }
    62% {
        transform: scale(1.08);
        opacity: 0.18;
    }
    100% {
        transform: scale(1.18);
        opacity: 0;
    }
}

@keyframes intro-ring-inner-b-7miv5l84r6 {
    0%, 8% {
        transform: scale(0.5);
        opacity: 0;
    }
    24% {
        opacity: 0.66;
    }
    56% {
        transform: scale(1.08);
        opacity: 0.16;
    }
    100% {
        transform: scale(1.14);
        opacity: 0;
    }
}

@keyframes intro-bar-left-b-7miv5l84r6 {
    0%, 16% {
        opacity: 0;
        transform: translate(-30%, -50%) scaleX(0.2);
    }
    28% {
        opacity: 0.82;
        transform: translate(8%, -50%) scaleX(1);
    }
    62% {
        opacity: 0.18;
        transform: translate(18%, -50%) scaleX(0.72);
    }
    100% {
        opacity: 0;
        transform: translate(18%, -50%) scaleX(0.4);
    }
}

@keyframes intro-bar-right-b-7miv5l84r6 {
    0%, 20% {
        opacity: 0;
        transform: translate(30%, -50%) scaleX(0.2);
    }
    32% {
        opacity: 0.82;
        transform: translate(-8%, -50%) scaleX(1);
    }
    62% {
        opacity: 0.18;
        transform: translate(-18%, -50%) scaleX(0.72);
    }
    100% {
        opacity: 0;
        transform: translate(-18%, -50%) scaleX(0.4);
    }
}

@keyframes intro-ground-b-7miv5l84r6 {
    0%, 12% {
        opacity: 0;
        transform: scaleX(0.58);
    }
    26% {
        opacity: 0.72;
        transform: scaleX(1);
    }
    72% {
        opacity: 0.24;
        transform: scaleX(1.08);
    }
    100% {
        opacity: 0;
        transform: scaleX(0.82);
    }
}

@keyframes intro-copy-fade-b-7miv5l84r6 {
    0%, 18% {
        opacity: 0;
        transform: translateY(0.6rem);
    }
    34%, 70% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-0.4rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tecnosis-intro[b-7miv5l84r6]::after,
    .intro-aura[b-7miv5l84r6],
    .intro-monogram-shell[b-7miv5l84r6],
    .intro-monogram-glyph[b-7miv5l84r6],
    .intro-monogram-sweep[b-7miv5l84r6],
    .intro-signal-bar[b-7miv5l84r6],
    .intro-ground-glow[b-7miv5l84r6],
    .intro-copy[b-7miv5l84r6] {
        animation: none;
        opacity: 1;
        transform: none;
        clip-path: none;
    }

    .intro-monogram-glyph[b-7miv5l84r6] {
        inset: 12%;
    }
}
/* /Components/TecnosisIntroAnimationMinimal.razor.rz.scp.css */
.tecnosis-intro-minimal[b-7c587wctuk] {
    --tecnosis-minimal-blue: #234a98;
    --tecnosis-minimal-blue-strong: #173a7d;
    --tecnosis-minimal-surface: rgba(255, 255, 255, 0.84);
    --tecnosis-minimal-shadow: rgba(17, 24, 39, 0.1);
    --tecnosis-logo: url("/android-chrome-512x512.png");

    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    min-width: 0;
    min-height: 18rem;
    padding: 2rem 1.25rem;
}

.intro-minimal-stage[b-7c587wctuk] {
    position: relative;
    width: clamp(9rem, 24vw, 12rem);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
}

.intro-minimal-disc[b-7c587wctuk] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 238, 223, 0.92));
    box-shadow:
        0 14px 34px rgba(17, 24, 39, 0.08),
        inset 0 0 0 1px rgba(35, 74, 152, 0.08);
    transform: scale(0.86);
    opacity: 0;
    animation:
        intro-minimal-disc-enter-b-7c587wctuk 700ms cubic-bezier(0.2, 0.85, 0.2, 1) forwards,
        intro-minimal-disc-breathe-b-7c587wctuk 1800ms ease-in-out 700ms infinite;
}

.intro-minimal-glyph[b-7c587wctuk] {
    position: absolute;
    inset: 14%;
    border-radius: 50%;
    background-color: #fff;
    background-image: var(--tecnosis-logo);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    opacity: 0;
    transform: translateY(0.8rem) scale(0.92);
    animation: intro-minimal-glyph-enter-b-7c587wctuk 820ms cubic-bezier(0.18, 0.9, 0.24, 1) forwards;
}

.intro-minimal-line[b-7c587wctuk] {
    position: absolute;
    bottom: -0.35rem;
    width: 42%;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(35, 74, 152, 0), rgba(35, 74, 152, 0.56), rgba(35, 74, 152, 0));
    opacity: 0;
    transform: scaleX(0.5);
    animation:
        intro-minimal-line-enter-b-7c587wctuk 520ms ease-out 280ms forwards,
        intro-minimal-line-load-b-7c587wctuk 1200ms ease-in-out 900ms infinite;
}

.intro-minimal-copy[b-7c587wctuk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    text-align: center;
    opacity: 0;
    transform: translateY(0.45rem);
    animation: intro-minimal-copy-enter-b-7c587wctuk 520ms ease-out 260ms forwards;
}

.intro-minimal-title[b-7c587wctuk] {
    color: var(--tecnosis-minimal-blue-strong);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.15rem, 4vw, 1.45rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.intro-minimal-subtitle[b-7c587wctuk] {
    color: rgba(35, 74, 152, 0.72);
    font-family: var(--font-label);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.dark-mode .tecnosis-intro-minimal[b-7c587wctuk] {
    --tecnosis-minimal-blue: #7aa2ff;
    --tecnosis-minimal-blue-strong: #edf4ff;
    --tecnosis-minimal-surface: rgba(15, 23, 42, 0.92);
    --tecnosis-minimal-shadow: rgba(2, 6, 23, 0.34);
}

.dark-mode .intro-minimal-disc[b-7c587wctuk] {
    background: linear-gradient(180deg, rgba(18, 30, 53, 0.94), rgba(10, 19, 35, 0.92));
    box-shadow:
        0 18px 34px rgba(2, 6, 23, 0.3),
        inset 0 0 0 1px rgba(122, 162, 255, 0.12);
}

.dark-mode .intro-minimal-glyph[b-7c587wctuk] {
    background-color: rgba(241, 245, 249, 0.96);
}

.dark-mode .intro-minimal-line[b-7c587wctuk] {
    background: linear-gradient(90deg, rgba(122, 162, 255, 0), rgba(122, 162, 255, 0.72), rgba(122, 162, 255, 0));
}

.dark-mode .intro-minimal-subtitle[b-7c587wctuk] {
    color: rgba(191, 219, 254, 0.82);
}

@keyframes intro-minimal-disc-enter-b-7c587wctuk {
    0% {
        opacity: 0;
        transform: scale(0.86);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes intro-minimal-disc-breathe-b-7c587wctuk {
    0%, 100% {
        box-shadow:
            0 14px 34px rgba(17, 24, 39, 0.08),
            inset 0 0 0 1px rgba(35, 74, 152, 0.08);
    }
    50% {
        box-shadow:
            0 16px 36px rgba(17, 24, 39, 0.12),
            inset 0 0 0 1px rgba(35, 74, 152, 0.12);
    }
}

@keyframes intro-minimal-glyph-enter-b-7c587wctuk {
    0% {
        opacity: 0;
        transform: translateY(0.8rem) scale(0.92);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes intro-minimal-line-enter-b-7c587wctuk {
    0% {
        opacity: 0;
        transform: scaleX(0.5);
    }
    100% {
        opacity: 1;
        transform: scaleX(1);
    }
}

@keyframes intro-minimal-line-load-b-7c587wctuk {
    0%, 100% {
        opacity: 0.36;
        transform: scaleX(0.72);
    }
    50% {
        opacity: 1;
        transform: scaleX(1);
    }
}

@keyframes intro-minimal-copy-enter-b-7c587wctuk {
    0% {
        opacity: 0;
        transform: translateY(0.45rem);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .intro-minimal-disc[b-7c587wctuk],
    .intro-minimal-glyph[b-7c587wctuk],
    .intro-minimal-line[b-7c587wctuk],
    .intro-minimal-copy[b-7c587wctuk] {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

@media (min-width: 768px) {
    .tecnosis-intro-minimal[b-7c587wctuk] {
        gap: 1.25rem;
        padding-inline: 2rem;
    }

    .intro-minimal-stage[b-7c587wctuk] {
        width: clamp(10rem, 18vw, 13rem);
    }
}
/* /Components/TsNotificacionesButton.razor.rz.scp.css */
.tsn-btn[b-4ms6zfnmlz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: inherit;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
    text-decoration: none;
    white-space: nowrap;
}

.tsn-btn:disabled[b-4ms6zfnmlz] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Sizes */
.btn-sm[b-4ms6zfnmlz] {
    padding: 0.5rem 1rem;
    font-size: 0.575rem;
}

.btn-md[b-4ms6zfnmlz] {
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem;
}

.btn-lg[b-4ms6zfnmlz] {
    padding: 1rem 2rem;
    font-size: 1rem;
}

/* Full Width */
.btn-full[b-4ms6zfnmlz] {
    width: 100%;
}

/* Variants */
.btn-primary[b-4ms6zfnmlz] {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
    color: white;
    box-shadow: var(--shadow);
}

.btn-primary:hover:not(:disabled)[b-4ms6zfnmlz] {
    background: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary-dark) 100%);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.btn-primary:active:not(:disabled)[b-4ms6zfnmlz] {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.btn-secondary[b-4ms6zfnmlz] {
    background-color: var(--bg-secondary);
    color: var(--text);
    border: 1px solid var(--border);
}

.btn-secondary:hover:not(:disabled)[b-4ms6zfnmlz] {
    background-color: var(--bg-tertiary);
    border-color: var(--border-strong);
}

.btn-danger[b-4ms6zfnmlz] {
    background: linear-gradient(135deg, var(--severity-critical) 0%, #dc2626 100%);
    color: white;
    box-shadow: var(--shadow);
}

.btn-danger:hover:not(:disabled)[b-4ms6zfnmlz] {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.btn-outline[b-4ms6zfnmlz] {
    background-color: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
}

.btn-outline:hover:not(:disabled)[b-4ms6zfnmlz] {
    background-color: var(--primary-light);
}

/* Spinner */
.btn-spinner[b-4ms6zfnmlz] {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-4ms6zfnmlz 0.6s linear infinite;
}

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

.btn-icon[b-4ms6zfnmlz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-text[b-4ms6zfnmlz] {
    display: inline-block;
    font-weight: 580;
}

/* Focus States */
.tsn-btn:focus-visible[b-4ms6zfnmlz] {
    outline: 3px solid var(--primary-light);
    outline-offset: 2px;
}
/* /Components/TsNotificacionesInput.razor.rz.scp.css */
.input-group[b-ft8ewyys9c] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.input-label[b-ft8ewyys9c] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}

.input-field[b-ft8ewyys9c] {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
    color: var(--text);
    background-color: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    outline: none;
    font-family: inherit;
}

.input-field[b-ft8ewyys9c]::placeholder {
    color: var(--text-muted);
}

.input-field:hover:not(:disabled)[b-ft8ewyys9c] {
    border-color: var(--border-strong);
}

.input-field:focus[b-ft8ewyys9c] {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.input-field:disabled[b-ft8ewyys9c] {
    background-color: var(--bg-tertiary);
    cursor: not-allowed;
    opacity: 0.6;
}

.input-field.valid.modified:not([type=checkbox])[b-ft8ewyys9c] {
    border-color: var(--success);
}

.input-field.invalid[b-ft8ewyys9c] {
    border-color: var(--severity-critical);
}

.validation-message[b-ft8ewyys9c] {
    color: var(--severity-critical);
    font-size: 0.8125rem;
    margin-top: -0.25rem;
}

/* Dark mode */
.dark-mode .input-field[b-ft8ewyys9c] {
    background-color: var(--bg-secondary);
}

.dark-mode .input-field:focus[b-ft8ewyys9c] {
    background-color: var(--bg);
}
/* /Pages/Admin/Admin.razor.rz.scp.css */
.admin-wrapper[b-r93bgwotcx] {
    max-width: 56rem;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    margin-top: 4rem;
    margin-bottom: 4rem;
}

@media (min-width: 768px) {
    .admin-wrapper[b-r93bgwotcx] {
        padding: 3rem;
    }
}


/* ── Grid de tiles ── */

.admin-grid[b-r93bgwotcx] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1rem;
}

@media (min-width: 640px) {
    .admin-grid[b-r93bgwotcx] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .admin-grid[b-r93bgwotcx] {
        grid-template-columns: repeat(3, 1fr);
    }
}

.admin-tile[b-r93bgwotcx] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.5rem;
    background: var(--surface);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg, 0.75rem);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.admin-tile:hover[b-r93bgwotcx] {
    border-color: var(--primary);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--primary) 12%, transparent);
    transform: translateY(-2px);
}

.admin-tile:active[b-r93bgwotcx] {
    transform: translateY(0);
}

.tile-icon[b-r93bgwotcx] {
    font-size: 2rem;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    border-radius: var(--radius-md, 0.5rem);
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tile-title[b-r93bgwotcx] {
    font-family: var(--font-headline);
    font-size: 1rem;
    font-weight: 700;
    color: var(--on-surface);
    line-height: 1.2;
}

.tile-desc[b-r93bgwotcx] {
    font-size: 0.8125rem;
    color: var(--on-surface-variant);
    line-height: 1.5;
}
/* /Pages/Admin/AdminAplicaciones.razor.rz.scp.css */
/* --- Estructura General --- */
.container-aplicaciones[b-9q9kuoi17y] {
    max-width: 90rem;
}

.search-wrapper-header[b-9q9kuoi17y] {
    margin-top: 0.5rem;
    max-width: 18rem;
}

/* --- Lista de Aplicaciones (Modo Compacto) --- */
.apps-list[b-9q9kuoi17y] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.app-card[b-9q9kuoi17y] {
    background: var(--bg);
    padding: 0.7rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--outline-variant);
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1.8fr) minmax(0, 1.3fr) minmax(17rem, 1.7fr) auto;
    align-items: center;
    gap: 0.9rem 1rem;
    transition: all 0.15s ease;
}

.app-card:hover[b-9q9kuoi17y] {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary-light) 5%, var(--bg));
    box-shadow: var(--shadow-sm);
}

.icon-box[b-9q9kuoi17y] {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.45rem;
    background: color-mix(in srgb, var(--primary-light) 55%, var(--bg));
    color: var(--primary-dark);
}

.icon-box .material-symbols-outlined[b-9q9kuoi17y] {
    font-size: 1.15rem;
}

.field-stack[b-9q9kuoi17y] {
    min-width: 0;
}

/* --- Elementos de Input --- */
.app-name-input[b-9q9kuoi17y],
.select-field[b-9q9kuoi17y] {
    width: 100%;
    padding: 0.4rem 0.65rem;
    font-size: 0.875rem;
    border-radius: 0.4rem;
    border: 1px solid var(--outline-variant);
    background: var(--bg);
    color: var(--on-surface);
    height: 2rem;
}

.app-name-input:focus[b-9q9kuoi17y],
.select-field:focus[b-9q9kuoi17y] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}

.app-name-input--dirty[b-9q9kuoi17y],
.select-field.app-field--dirty[b-9q9kuoi17y] {
    border-color: color-mix(in srgb, var(--primary) 50%, var(--outline-variant));
    background: color-mix(in srgb, var(--primary-light) 28%, var(--bg));
}

.label-mini[b-9q9kuoi17y],
.credential-label[b-9q9kuoi17y] {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: block;
}

.label-mini[b-9q9kuoi17y] {
    margin-bottom: 0.2rem;
}

.credential-label[b-9q9kuoi17y] {
    margin-right: 0.35rem;
    flex-shrink: 0;
}

/* Credenciales en miniatura */
.mini-creds-container[b-9q9kuoi17y] {
    display: grid;
    grid-template-columns: minmax(0, 5.2rem) minmax(0, 1fr);
    gap: 0.45rem;
    min-width: 0;
}

.credential-row--compact[b-9q9kuoi17y] {
    display: flex;
    align-items: center;
    min-width: 0;
    height: 2rem;
    background: var(--surface-container);
    padding: 0 0.35rem 0 0.45rem;
    border-radius: 0.4rem;
    border: 1px solid var(--outline-variant);
}

.code-badge-mini[b-9q9kuoi17y] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.69rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}

.btn-icon-only[b-9q9kuoi17y] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0.35rem;
    color: var(--on-surface-variant);
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
    flex-shrink: 0;
}

.btn-icon-only:hover[b-9q9kuoi17y] {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary-dark);
}

.btn-icon-only--danger[b-9q9kuoi17y] {
    color: var(--severity-critical);
    border: 1px solid color-mix(in srgb, var(--severity-critical) 28%, var(--outline-variant));
}

.btn-icon-only--danger:hover[b-9q9kuoi17y] {
    background: color-mix(in srgb, var(--severity-critical) 10%, transparent);
    color: var(--severity-critical);
}

.icon-compact[b-9q9kuoi17y] {
    font-size: 0.95rem;
}

.app-actions[b-9q9kuoi17y] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.smtp-toggle[b-9q9kuoi17y] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 4.5rem;
    height: 2rem;
    padding: 0 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--outline-variant);
    background: var(--bg);
    color: var(--on-surface-variant);
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.smtp-toggle:hover[b-9q9kuoi17y] {
    border-color: var(--primary);
    color: var(--primary-dark);
    background: color-mix(in srgb, var(--primary) 6%, var(--bg));
}

.smtp-toggle--open[b-9q9kuoi17y] {
    border-color: color-mix(in srgb, var(--primary) 40%, var(--outline-variant));
    background: color-mix(in srgb, var(--primary-light) 45%, var(--bg));
    color: var(--primary-dark);
}

.smtp-toggle-icon[b-9q9kuoi17y],
.smtp-toggle-chevron[b-9q9kuoi17y] {
    font-size: 1rem;
}

.smtp-toggle-count[b-9q9kuoi17y] {
    min-width: 0.8rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}

/* --- Sección SMTP Expandible --- */
.smtp-expand-section[b-9q9kuoi17y] {
    grid-column: 1 / -1;
    margin-top: 0.1rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--outline-variant);
}

.smtp-section-header[b-9q9kuoi17y] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.85rem;
    flex-wrap: wrap;
}

.smtp-grid[b-9q9kuoi17y] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 0.75rem;
}

.smtp-row[b-9q9kuoi17y] {
    display: flex;
    gap: 0.6rem;
    align-items: center;
}

.smtp-input[b-9q9kuoi17y] {
    flex: 1 1 auto;
    width: 100%;
    height: 2.4rem;
    padding: 0 0.85rem;
    background-color: var(--surface-container);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    outline: none;
    font-size: 0.9rem;
    color: var(--on-surface);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.smtp-input:focus[b-9q9kuoi17y] {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.smtp-input--invalid[b-9q9kuoi17y] {
    border-color: var(--error);
    background: color-mix(in srgb, var(--error) 8%, var(--surface-container));
}

.btn-inline-add[b-9q9kuoi17y] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--outline-variant));
    background: color-mix(in srgb, var(--primary) 5%, transparent);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.35rem 0.7rem;
    border-radius: 9999px;
    color: var(--primary);
}

.btn-inline-add .material-symbols-outlined[b-9q9kuoi17y] {
    font-size: 1rem;
}

.btn-inline-add:hover[b-9q9kuoi17y] {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    border-color: color-mix(in srgb, var(--primary) 40%, var(--outline-variant));
}

/* Dock de guardado más discreto */
.save-dock[b-9q9kuoi17y] {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    min-width: 26rem;
    z-index: 100;
}

.save-dock-content[b-9q9kuoi17y] {
    max-width: 64rem;
    margin: 0 auto;
    background: color-mix(in srgb, var(--bg) 92%, var(--primary-light));
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--outline-variant));
    color: var(--on-surface);
    padding: 0.95rem 1rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: var(--shadow-lg);
}

.save-dock-title[b-9q9kuoi17y] {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--on-surface);
}

.save-dock-text[b-9q9kuoi17y] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.save-dock-subtitle[b-9q9kuoi17y] {
    font-size: 0.8rem;
    color: var(--on-surface-variant);
}

.save-dock-actions[b-9q9kuoi17y] {
    display: flex;
    gap: 0.75rem;
    margin-left: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.btn-icon-small[b-9q9kuoi17y] {
    font-size: 1rem;
}

.btn-primary[b-9q9kuoi17y],
.btn-descartar[b-9q9kuoi17y] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: var(--radius-md);
    font-family: var(--font-label);
    font-weight: 700;
    font-size: 0.875rem;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.btn-header-secondary[b-9q9kuoi17y] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: var(--radius-md);
    font-family: var(--font-label);
    font-weight: 700;
    font-size: 0.875rem;
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
}

.btn-primary[b-9q9kuoi17y] {
    background-color: var(--primary);
    color: var(--on-primary);
    border: none;
    box-shadow: var(--shadow-md);
}

.btn-primary:hover:not(:disabled)[b-9q9kuoi17y] {
    background-color: var(--primary-hover);
    box-shadow: var(--shadow-lg);
}

.btn-primary:disabled[b-9q9kuoi17y] {
    filter: grayscale(0.4);
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-descartar[b-9q9kuoi17y] {
    background-color: var(--surface-container);
    color: var(--on-surface-variant);
    border: 1px solid var(--outline-variant);
}

.btn-descartar:hover:not(:disabled)[b-9q9kuoi17y] {
    background-color: color-mix(in srgb, var(--primary) 10%, transparent);
    border-color: var(--primary);
    color: var(--primary);
}

.btn-descartar:disabled[b-9q9kuoi17y] {
    opacity: 0.7;
    cursor: not-allowed;
}

@media (max-width: 1100px) {
    .app-card[b-9q9kuoi17y] {
        grid-template-columns: 2.5rem minmax(0, 1fr) minmax(0, 1fr) auto;
    }

    .mini-creds-container[b-9q9kuoi17y] {
        grid-column: 2 / -1;
    }
}

@media (max-width: 1100px) {
    .page-header[b-9q9kuoi17y] {
        flex-direction: column;
    }

    .page-header-actions[b-9q9kuoi17y] {
        width: 100%;
        justify-content: flex-end;
    }

    .app-card[b-9q9kuoi17y] {
        grid-template-columns: 2.5rem minmax(0, 1fr);
    }

    .app-actions[b-9q9kuoi17y],
    .mini-creds-container[b-9q9kuoi17y],
    .field-stack[b-9q9kuoi17y] {
        grid-column: 2;
    }

    .app-actions[b-9q9kuoi17y] {
        justify-content: flex-start;
    }

    .search-wrapper-header[b-9q9kuoi17y] {
        max-width: none;
    }
}

@media (max-width: 640px) {
    .page-header-actions[b-9q9kuoi17y] {
        flex-wrap: wrap;
        justify-content: stretch;
    }

    .page-header-actions > *[b-9q9kuoi17y] {
        flex: 1 1 100%;
    }

    .mini-creds-container[b-9q9kuoi17y] {
        grid-template-columns: 1fr;
    }

    .smtp-row[b-9q9kuoi17y] {
        flex-direction: column;
        align-items: stretch;
    }

    .save-dock[b-9q9kuoi17y] {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
        transform: none;
        min-width: 0;
        width: auto;
    }

    .save-dock-content[b-9q9kuoi17y] {
        border-radius: 1.2rem;
        flex-direction: column;
        align-items: stretch;
    }

    .save-dock-actions[b-9q9kuoi17y] {
        margin-left: 0;
        width: 100%;
    }

    .save-dock-actions .btn-primary[b-9q9kuoi17y],
    .save-dock-actions .btn-descartar[b-9q9kuoi17y] {
        flex: 1 1 0;
        justify-content: center;
    }
}
/* /Pages/Admin/AdminCrearAplicacion.razor.rz.scp.css */
/* Estilos compartidos con AdminClienteApp */

.btn-back[b-18q1647ayh] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--primary);
    font-family: var(--font-label);
    font-size: 0.875rem;
    font-weight: 600;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: opacity var(--transition-fast);
}

.btn-back:hover[b-18q1647ayh] { opacity: 0.75; }

.grid-inputs[b-18q1647ayh] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 640px) {
    .grid-inputs[b-18q1647ayh] {
        grid-template-columns: 1fr 1fr;
    }
}

.input-wrapper[b-18q1647ayh] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.input-list-header[b-18q1647ayh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.input-label[b-18q1647ayh] {
    font-family: var(--font-label);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}

.select-field[b-18q1647ayh] {
    height: 3rem;
    padding: 0 1rem;
    background-color: var(--surface-container);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    outline: none;
    font-size: 0.9rem;
    color: var(--on-surface);
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.select-field:focus[b-18q1647ayh] {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.modal-icon[b-18q1647ayh] {
    color: var(--success);
    font-size: 3rem;
    margin-bottom: 1rem;
}

.api-key-box[b-18q1647ayh] {
    display: block;
    padding: 1rem;
    background: var(--surface-container);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    word-break: break-all;
    color: var(--on-surface);
}

.smtp-row[b-18q1647ayh] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.smtp-input[b-18q1647ayh] {
    flex: 1 1 auto;
    width: 100%;
    height: 3rem;
    padding: 0 1rem;
    background-color: var(--surface-container);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    outline: none;
    font-size: 0.9rem;
    color: var(--on-surface);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.smtp-input:focus[b-18q1647ayh] {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.smtp-input--invalid[b-18q1647ayh] {
    border-color: var(--error);
    background: color-mix(in srgb, var(--error) 8%, var(--surface-container));
}

.smtp-empty-state[b-18q1647ayh] {
    padding: 0.85rem 1rem;
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font-size: 0.9rem;
}

.smtp-errors[b-18q1647ayh] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    color: var(--error);
    font-size: 0.8rem;
}

.smtp-errors p[b-18q1647ayh] {
    margin: 0;
}

.btn-inline-add[b-18q1647ayh],
.btn-inline-remove[b-18q1647ayh] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0;
}

.btn-inline-add[b-18q1647ayh] {
    color: var(--primary);
}

.btn-inline-remove[b-18q1647ayh] {
    color: var(--error);
}

.btn-inline-add .material-symbols-outlined[b-18q1647ayh],
.btn-inline-remove .material-symbols-outlined[b-18q1647ayh] {
    font-size: 1rem;
}

@media (max-width: 640px) {
    .smtp-row[b-18q1647ayh] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Pages/Admin/AdminCrearCliente.razor.rz.scp.css */

.btn-back[b-0krpsa8t29] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--primary);
    font-family: var(--font-label);
    font-size: 0.875rem;
    font-weight: 600;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-bottom: 1rem; /* Espacio entre el botón y la tarjeta blanca */
    transition: opacity var(--transition-fast);
}

    .btn-back:hover[b-0krpsa8t29] {
        opacity: 0.75;
    }
/* /Pages/Admin/AdminCrearUsuario.razor.rz.scp.css */
.btn-back[b-2kh4lnsbw8] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--primary);
    font-family: var(--font-label);
    font-size: 0.875rem;
    font-weight: 600;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: opacity var(--transition-fast);
}

.btn-back:hover[b-2kh4lnsbw8] { opacity: 0.75; }

/* Label con ícono específico de esta página */
.input-group[b-2kh4lnsbw8] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.input-label-icon[b-2kh4lnsbw8] {
    font-family: var(--font-label);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.input-label-icon .material-symbols-outlined[b-2kh4lnsbw8] {
    font-size: 1rem;
    color: var(--primary);
}
/* /Pages/Admin/AdminListaUsuarios.razor.rz.scp.css */
.btn-back[b-6ay82pg0xf] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--primary);
    font-family: var(--font-label);
    font-size: 0.875rem;
    font-weight: 600;
    background: none;
    border: none;
    cursor: pointer;
    margin-bottom: 1.25rem;
    padding: 0;
    transition: opacity var(--transition-fast);
}

.btn-back:hover[b-6ay82pg0xf] { opacity: 0.75; }

@media (max-width: 767px) {
    .btn-back[b-6ay82pg0xf] { display: none; }
}

.user-count[b-6ay82pg0xf] {
    font-size: 0.875rem;
    color: var(--on-surface-variant);
    font-family: var(--font-label);
}

.avatar[b-6ay82pg0xf] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    background: var(--primary-light);
    color: var(--primary-dark);
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.user-cell[b-6ay82pg0xf] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.role-badge[b-6ay82pg0xf] {
    display: inline-flex;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.role-badge.admin[b-6ay82pg0xf] {
    background: var(--primary-light);
    color: var(--primary-dark);
}

.role-badge.user[b-6ay82pg0xf] {
    background: var(--surface-container);
    color: var(--on-surface-variant);
    border: 1px solid var(--border);
}

/* ── Mobile Cards ── */

.user-card[b-6ay82pg0xf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    border-top: 1px solid var(--border);
    gap: 1rem;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.user-card:hover[b-6ay82pg0xf] {
    background-color: var(--bg-tertiary);
}

.user-card:first-child[b-6ay82pg0xf] {
    border-top: none;
}

.user-card-left[b-6ay82pg0xf] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.user-card-info[b-6ay82pg0xf] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.user-card-name[b-6ay82pg0xf] {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--on-surface);
}

.user-card-email[b-6ay82pg0xf] {
    font-size: 0.75rem;
    color: var(--on-surface-variant);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Botón primario ── */

.btn-primary[b-6ay82pg0xf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background-color: var(--primary);
    color: var(--on-primary);
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-label);
    font-weight: 700;
    font-size: 0.875rem;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.btn-primary:hover[b-6ay82pg0xf] {
    background-color: var(--primary-hover);
    box-shadow: var(--shadow-lg);
}

.btn-primary:disabled[b-6ay82pg0xf] {
    filter: grayscale(0.4);
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-icon-small[b-6ay82pg0xf] {
    font-size: 1.125rem;
    line-height: 1;
}
/* /Pages/Admin/AdminNotificaciones.razor.rz.scp.css */
/* Estilos compartidos (page-wrapper, container, action-bar, filter-bar,
   filter-drawer, table, alert-cards, empty-state, error-state) -> app.css */

/* Header */
.btn-back[b-0q2zxzcn1b] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--primary);
    font-family: var(--font-label);
    font-size: 0.875rem;
    font-weight: 600;
    background: none;
    border: none;
    cursor: pointer;
    margin-bottom: 1.25rem;
    padding: 0;
    transition: opacity var(--transition-fast);
}

.btn-back:hover[b-0q2zxzcn1b] {
    opacity: 0.75;
}

.alert-count[b-0q2zxzcn1b] {
    font-family: var(--font-label);
    font-size: 0.8125rem;
    color: var(--on-surface-variant);
}

.ignore-hint[b-0q2zxzcn1b] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    border-radius: 1rem;
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--outline-variant));
    background: color-mix(in srgb, var(--surface-container) 72%, var(--bg));
}

.ignore-hint__icon[b-0q2zxzcn1b] {
    color: var(--on-surface-variant);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.ignore-hint__text[b-0q2zxzcn1b] {
    color: var(--on-surface-variant);
    font-size: 0.8rem;
    line-height: 1.45;
    flex: 1 1 auto;
}

.ignore-hint__link[b-0q2zxzcn1b] {
    color: var(--primary);
    font-family: var(--font-label);
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.ignore-hint__link:hover[b-0q2zxzcn1b] {
    text-decoration: underline;
}

.ignore-hint__button[b-0q2zxzcn1b] {
    background: none;
    border: none;
    cursor: pointer;
}

/* Filter bar: columna extra (estado) vs Notificaciones */
@media (min-width: 1280px) {
    .filter-bar[b-0q2zxzcn1b] {
        grid-template-columns: 1fr 2fr repeat(3, 1fr) repeat(2, 9rem) auto auto;
    }
}

/* Estado badges */
.estado-badge[b-0q2zxzcn1b] {
    display: inline-flex;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.estado-activa[b-0q2zxzcn1b] {
    background: color-mix(in srgb, var(--info, #3b82f6) 12%, transparent);
    color: var(--info, #3b82f6);
}

.estado-archivada[b-0q2zxzcn1b] {
    background: color-mix(in srgb, var(--severity-warning, #eab308) 12%, transparent);
    color: var(--severity-warning, #eab308);
}

.estado-eliminada[b-0q2zxzcn1b] {
    background: color-mix(in srgb, var(--severity-critical, #ef4444) 12%, transparent);
    color: var(--severity-critical, #ef4444);
}

/* Gestion info (columna "Gestionada por") */
.gestion-info[b-0q2zxzcn1b] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--on-surface-variant);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 8rem;
}

.gestion-icon[b-0q2zxzcn1b] {
    font-size: 0.875rem;
    flex-shrink: 0;
}

.gestion-none[b-0q2zxzcn1b] {
    color: var(--on-surface-variant);
    opacity: 0.4;
}

/* Boton bookmark (ver mas tarde) */
.btn-icon[b-0q2zxzcn1b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--on-surface-variant);
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast), background var(--transition-fast);
}

.btn-icon:hover[b-0q2zxzcn1b] {
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.btn-icon--saved[b-0q2zxzcn1b],
.btn-icon--saved .material-symbols-outlined[b-0q2zxzcn1b] {
    color: var(--on-surface);
}

.btn-clear-filter-inline[b-0q2zxzcn1b] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4rem 0.85rem;
    border-radius: 9999px;
    border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--outline-variant));
    background: color-mix(in srgb, var(--primary) 8%, transparent);
    color: var(--primary);
    font-family: var(--font-label);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
}

.btn-clear-filter-inline .material-symbols-outlined[b-0q2zxzcn1b] {
    font-size: 1rem;
}

.btn-danger-outline[b-0q2zxzcn1b] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.btn-danger-filter[b-0q2zxzcn1b] {
    justify-content: center;
}

.btn-danger-filter--drawer[b-0q2zxzcn1b] {
    display: none;
    width: 100%;
}

.btn-ignore-manager[b-0q2zxzcn1b] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.85rem;
    border-radius: 9999px;
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--outline-variant));
    background: var(--surface-container);
    color: var(--on-surface);
    font-family: var(--font-label);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
}

.btn-ignore-manager .material-symbols-outlined[b-0q2zxzcn1b] {
    font-size: 1rem;
}

.btn-ignore-manager--active[b-0q2zxzcn1b] {
    background: color-mix(in srgb, var(--primary-light) 62%, var(--bg));
    color: var(--primary-dark);
    border-color: color-mix(in srgb, var(--primary) 26%, var(--outline-variant));
}

.btn-ignore-manager--drawer[b-0q2zxzcn1b] {
    display: none;
    width: 100%;
    justify-content: center;
}

.btn-ignore-manager--desktop[b-0q2zxzcn1b] {
    display: inline-flex;
}

.table-row-actions[b-0q2zxzcn1b],
.alert-card-actions[b-0q2zxzcn1b] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.btn-icon--ignore[b-0q2zxzcn1b] {
    color: var(--on-surface-variant);
}

.btn-icon--ignore:hover[b-0q2zxzcn1b] {
    color: var(--primary);
}

.empty-state-link-button[b-0q2zxzcn1b] {
    margin-top: 0.5rem;
    border: none;
    background: none;
    color: var(--primary);
    font-family: var(--font-label);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}

.ignore-panel-backdrop[b-0q2zxzcn1b],
.ignore-confirm-backdrop[b-0q2zxzcn1b] {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(15, 23, 42, 0.38);
    backdrop-filter: blur(4px);
}

.ignore-panel[b-0q2zxzcn1b] {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    width: min(28rem, calc(100vw - 2rem));
    max-height: min(70vh, 42rem);
    z-index: 91;
    border-radius: 1.25rem;
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--outline-variant));
    background: var(--bg);
    box-shadow: var(--shadow-lg);
    transform: translateY(calc(100% + 2rem));
    opacity: 0;
    pointer-events: none;
    transition: transform 180ms ease, opacity 180ms ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ignore-panel--open[b-0q2zxzcn1b] {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.ignore-panel__handle[b-0q2zxzcn1b] {
    width: 3rem;
    height: 0.3rem;
    border-radius: 9999px;
    background: var(--outline-variant);
    margin: 0.7rem auto 0;
}

.ignore-panel__header[b-0q2zxzcn1b] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem 0.9rem;
}

.ignore-panel__title[b-0q2zxzcn1b] {
    margin: 0 0 0.2rem;
    color: var(--on-surface);
    font-family: var(--font-headline);
    font-size: 1rem;
    font-weight: 800;
}

.ignore-panel__subtitle[b-0q2zxzcn1b] {
    margin: 0;
    color: var(--on-surface-variant);
    font-size: 0.8rem;
    line-height: 1.45;
}

.ignore-panel__close[b-0q2zxzcn1b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--outline-variant);
    border-radius: 9999px;
    background: var(--surface-container);
    color: var(--on-surface);
    cursor: pointer;
}

.ignore-panel__body[b-0q2zxzcn1b] {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 0 1.1rem 1.1rem;
    overflow: auto;
}

.ignore-rule-card[b-0q2zxzcn1b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    padding: 0.95rem 1rem;
    border-radius: 1rem;
    border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--outline-variant));
    background: color-mix(in srgb, var(--surface-container) 78%, var(--bg));
}

.ignore-rule-card__info[b-0q2zxzcn1b] {
    min-width: 0;
}

.ignore-rule-card__title-row[b-0q2zxzcn1b] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.2rem;
}

.ignore-rule-card__icon[b-0q2zxzcn1b] {
    font-size: 1rem;
    color: var(--primary);
}

.ignore-rule-card__app[b-0q2zxzcn1b] {
    color: var(--on-surface);
    font-family: var(--font-headline);
    font-size: 0.92rem;
    font-weight: 700;
}

.ignore-rule-card__meta[b-0q2zxzcn1b] {
    margin: 0 0 0.5rem;
    color: var(--on-surface-variant);
    font-size: 0.78rem;
}

.ignore-rule-card__badge[b-0q2zxzcn1b] {
    display: inline-flex;
    align-items: center;
    padding: 0.32rem 0.7rem;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary-dark);
    font-family: var(--font-label);
    font-size: 0.72rem;
    font-weight: 700;
}

.ignore-rule-card__remove[b-0q2zxzcn1b] {
    border: none;
    border-radius: 9999px;
    background: var(--severity-critical-bg);
    color: var(--severity-critical);
    font-family: var(--font-label);
    font-size: 0.76rem;
    font-weight: 800;
    padding: 0.55rem 0.9rem;
    cursor: pointer;
    white-space: nowrap;
}

.ignore-panel__empty[b-0q2zxzcn1b] {
    display: grid;
    place-items: center;
    gap: 0.55rem;
    padding: 1.3rem 0.4rem 0.6rem;
    text-align: center;
    color: var(--on-surface-variant);
    font-size: 0.82rem;
    line-height: 1.5;
}

.ignore-panel__empty .material-symbols-outlined[b-0q2zxzcn1b] {
    font-size: 1.5rem;
}

.ignore-confirm-card[b-0q2zxzcn1b] {
    position: fixed;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    width: min(26rem, calc(100vw - 2rem));
    z-index: 92;
    border-radius: 1.15rem;
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--outline-variant));
    background: var(--bg);
    box-shadow: var(--shadow-lg);
    padding: 1.5rem;
    text-align: center;
}

.ignore-confirm-card__icon[b-0q2zxzcn1b] {
    display: block;
    margin-bottom: 0.85rem;
    color: var(--primary);
    font-size: 2rem;
}

.ignore-confirm-card__title[b-0q2zxzcn1b] {
    margin: 0 0 0.45rem;
    color: var(--on-surface);
    font-family: var(--font-headline);
    font-size: 1.08rem;
    font-weight: 800;
}

.ignore-confirm-card__message[b-0q2zxzcn1b] {
    margin: 0;
    color: var(--on-surface-variant);
    font-size: 0.86rem;
    line-height: 1.55;
}

.ignore-confirm-card__note[b-0q2zxzcn1b] {
    margin: 0.85rem 0 0;
    padding: 0.8rem 0.9rem;
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--primary-light) 58%, var(--bg));
    color: var(--primary-dark);
    font-size: 0.8rem;
    line-height: 1.5;
    font-weight: 700;
}

.ignore-confirm-card__actions[b-0q2zxzcn1b] {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.ignore-confirm-card__cancel[b-0q2zxzcn1b],
.ignore-confirm-card__confirm[b-0q2zxzcn1b] {
    flex: 1;
    border-radius: 0.75rem;
    padding: 0.72rem 0.9rem;
    font-family: var(--font-label);
    font-size: 0.84rem;
    font-weight: 800;
    cursor: pointer;
}

.ignore-confirm-card__cancel[b-0q2zxzcn1b] {
    border: 1px solid var(--outline-variant);
    background: var(--surface-container);
    color: var(--on-surface);
}

.ignore-confirm-card__confirm[b-0q2zxzcn1b] {
    border: none;
    background: var(--primary);
    color: var(--on-primary);
}

.ignore-confirm-card__cancel:disabled[b-0q2zxzcn1b],
.ignore-confirm-card__confirm:disabled[b-0q2zxzcn1b] {
    opacity: 0.6;
    cursor: not-allowed;
}

.ignore-toast[b-0q2zxzcn1b] {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    transform: translateX(-50%);
    z-index: 93;
    width: min(34rem, calc(100vw - 1.5rem));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    border-radius: 1rem;
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--outline-variant));
    background: color-mix(in srgb, var(--surface-container) 88%, var(--bg));
    box-shadow: var(--shadow-lg);
}

.ignore-toast__content[b-0q2zxzcn1b] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.ignore-toast__icon[b-0q2zxzcn1b] {
    color: var(--primary);
    font-size: 1.15rem;
    flex-shrink: 0;
}

.ignore-toast__message[b-0q2zxzcn1b] {
    color: var(--on-surface);
    font-size: 0.82rem;
    line-height: 1.45;
}

.ignore-toast__actions[b-0q2zxzcn1b] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.ignore-toast__undo[b-0q2zxzcn1b],
.ignore-toast__close[b-0q2zxzcn1b] {
    border: none;
    background: none;
    color: var(--primary);
    cursor: pointer;
}

.ignore-toast__undo[b-0q2zxzcn1b] {
    font-family: var(--font-label);
    font-size: 0.8rem;
    font-weight: 800;
}

.ignore-toast__close[b-0q2zxzcn1b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 767px) {
    .action-bar-left[b-0q2zxzcn1b] {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding-left: 0;
    }

    .btn-back[b-0q2zxzcn1b] {
        display: none;
    }

    .btn-clear-filter-inline[b-0q2zxzcn1b] {
        display: none;
    }

    .ignore-hint[b-0q2zxzcn1b] {
        flex-wrap: wrap;
    }

    .btn-ignore-manager--desktop[b-0q2zxzcn1b],
    .btn-danger-filter--desktop[b-0q2zxzcn1b] {
        display: none;
    }

    .btn-ignore-manager--drawer[b-0q2zxzcn1b],
    .btn-danger-filter--drawer[b-0q2zxzcn1b] {
        display: inline-flex;
        min-height: 2.5rem;
    }

    .btn-ignore-manager span:last-child[b-0q2zxzcn1b] {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .btn-filter-mobile[b-0q2zxzcn1b] {
        margin-left: auto;
    }

    .ignore-panel[b-0q2zxzcn1b] {
        left: 0.75rem;
        right: 0.75rem;
        top: 50%;
        bottom: auto;
        width: auto;
        max-height: min(78dvh, calc(100dvh - var(--app-top-offset) - 1.5rem));
        border-radius: 1.25rem;
        transform: translateY(120dvh);
    }

    .ignore-panel__handle[b-0q2zxzcn1b] {
        display: none;
    }

    .ignore-panel--open[b-0q2zxzcn1b] {
        transform: translateY(-50%);
    }

    .ignore-panel__body[b-0q2zxzcn1b] {
        padding-bottom: 1rem;
    }

    .ignore-rule-card[b-0q2zxzcn1b] {
        align-items: flex-start;
        flex-direction: column;
    }

    .ignore-rule-card__remove[b-0q2zxzcn1b] {
        width: 100%;
    }

    .ignore-confirm-backdrop[b-0q2zxzcn1b] {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        padding: 1rem 1rem calc(4rem + env(safe-area-inset-bottom, 0px) + 1rem);
    }

    .ignore-confirm-card[b-0q2zxzcn1b] {
        position: relative;
        inset: auto;
        transform: none;
        width: min(30rem, 100%);
        max-height: min(72dvh, calc(100dvh - var(--app-top-offset) - 4rem - env(safe-area-inset-bottom, 0px) - 2rem));
        overflow: auto;
    }

    .ignore-confirm-card__actions[b-0q2zxzcn1b],
    .ignore-toast[b-0q2zxzcn1b] {
        flex-direction: column;
        align-items: stretch;
    }

    .ignore-toast[b-0q2zxzcn1b] {
        left: 0.75rem;
        right: 0.75rem;
        bottom: calc(4rem + env(safe-area-inset-bottom, 0px) + 0.75rem);
        width: auto;
        transform: none;
    }

    .ignore-toast__actions[b-0q2zxzcn1b] {
        justify-content: space-between;
    }
}

@media (max-width: 767px) and (max-height: 780px) {
    .ignore-panel[b-0q2zxzcn1b] {
        max-height: min(84dvh, calc(100dvh - var(--app-top-offset) - 1rem));
    }

    .ignore-confirm-backdrop[b-0q2zxzcn1b] {
        align-items: center;
        padding: 0.75rem;
    }

    .ignore-confirm-card[b-0q2zxzcn1b] {
        max-height: calc(100dvh - var(--app-top-offset) - 1.5rem);
    }

    .ignore-toast[b-0q2zxzcn1b] {
        left: 0.5rem;
        right: 0.5rem;
        bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
    }
}
/* /Pages/Admin/AdminSmtpAllowedNetworks.razor.rz.scp.css */
.smtp-page[b-7h45axa8nx] {
    max-width: 72rem;
    margin: 0 auto;
    padding: 5.5rem 1.25rem 2rem;
}

.btn-back[b-7h45axa8nx] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--primary);
    font-family: var(--font-label);
    font-size: 0.875rem;
    font-weight: 600;
    background: none;
    border: none;
    cursor: pointer;
    margin-bottom: 1.25rem;
    padding: 0;
}

.editor-card[b-7h45axa8nx],
.network-list-card[b-7h45axa8nx] {
    background: var(--bg);
    border: 1px solid var(--outline-variant);
    border-radius: 0.8rem;
    box-shadow: var(--shadow-sm);
}

.editor-card[b-7h45axa8nx] {
    padding: 0.95rem;
    margin-bottom: 0.9rem;
}

.network-list-card[b-7h45axa8nx] {
    padding: 0.8rem;
}

.editor-card-header[b-7h45axa8nx],
.network-list-header[b-7h45axa8nx] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.editor-card-header h2[b-7h45axa8nx],
.network-list-header h2[b-7h45axa8nx] {
    margin: 0;
    font-size: 1rem;
}

.editor-help[b-7h45axa8nx] {
    margin: 0.2rem 0 0;
    color: var(--on-surface-variant);
    font-size: 0.8rem;
}

.editor-grid[b-7h45axa8nx] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.editor-grid--single[b-7h45axa8nx] {
    grid-template-columns: 1fr;
}

.input-wrapper[b-7h45axa8nx] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.input-label[b-7h45axa8nx] {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.text-field[b-7h45axa8nx] {
    width: 100%;
    min-height: 2.45rem;
    padding: 0.5rem 0.7rem;
    border-radius: 0.55rem;
    border: 1px solid var(--outline-variant);
    background: var(--bg);
    color: var(--on-surface);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    font-size: 0.88rem;
}

.text-field:focus[b-7h45axa8nx] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
}

.editor-footer[b-7h45axa8nx] {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-top: 0.65rem;
}

.editor-help-list[b-7h45axa8nx] {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.editor-actions[b-7h45axa8nx] {
    display: flex;
    justify-content: flex-end;
}

.group-list[b-7h45axa8nx] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.group-empty[b-7h45axa8nx] {
    border: 1px dashed var(--outline-variant);
    border-radius: 0.55rem;
    padding: 0.55rem 0.65rem;
    color: var(--on-surface-variant);
    font-size: 0.78rem;
}

.expression-row[b-7h45axa8nx] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    border: 1px solid color-mix(in srgb, var(--outline-variant) 35%, transparent);
    border-radius: 0.55rem;
    padding: 0.55rem 0.65rem;
}

.network-content[b-7h45axa8nx] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    min-width: 0;
}

.expression-code[b-7h45axa8nx] {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    font-family: "JetBrains Mono", monospace;
    color: var(--on-surface);
    white-space: normal;
    word-break: break-word;
    font-size: 0.74rem;
    line-height: 1.3;
}

.expression-actions[b-7h45axa8nx] {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.type-chip[b-7h45axa8nx] {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.45rem;
    border-radius: 9999px;
    font-size: 0.65rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--primary-light) 24%, var(--bg));
    color: var(--primary);
}

.type-chip--info[b-7h45axa8nx] {
    background: color-mix(in srgb, var(--info) 12%, transparent);
    color: var(--info);
}

.group-count[b-7h45axa8nx] {
    color: var(--on-surface-variant);
    font-size: 0.75rem;
}

.btn-primary[b-7h45axa8nx],
.btn-secondary[b-7h45axa8nx],
.btn-danger-outline[b-7h45axa8nx] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border-radius: 0.5rem;
    padding: 0.5rem 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);
}

.btn-primary[b-7h45axa8nx] {
    border: none;
    background: var(--primary);
    color: var(--on-primary);
}

.btn-secondary[b-7h45axa8nx],
.btn-danger-outline[b-7h45axa8nx] {
    font-size: 0.78rem;
}

.btn-secondary[b-7h45axa8nx] {
    border: 1px solid var(--primary);
    background: transparent;
    color: var(--primary);
}

.btn-danger-outline[b-7h45axa8nx] {
    border: 1px solid var(--error);
    background: transparent;
    color: var(--error);
}

.btn-primary:hover[b-7h45axa8nx],
.btn-secondary:hover[b-7h45axa8nx],
.btn-danger-outline:hover[b-7h45axa8nx] {
    transform: translateY(-1px);
}

.btn-submit-compact[b-7h45axa8nx] {
    padding: 0.45rem 0.72rem;
    font-size: 0.78rem;
}

.btn-compact[b-7h45axa8nx] {
    padding: 0.28rem 0.5rem;
    font-size: 0.74rem;
}

.btn-icon-small[b-7h45axa8nx] {
    font-size: 0.9rem;
}

.banner-success[b-7h45axa8nx],
.banner-error[b-7h45axa8nx] {
    border-radius: 0.75rem;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.8rem;
    padding: 0.7rem 1rem;
    font-size: 0.82rem;
    font-weight: 500;
    display: flex;
}

.banner-success[b-7h45axa8nx] {
    background-color: var(--success-bg);
    color: var(--success);
    border: 1px solid #6ee7b773;
}

.banner-error[b-7h45axa8nx] {
    background-color: var(--severity-critical-bg);
    color: var(--severity-critical);
    border: 1px solid #fca5a573;
}

.loading-container[b-7h45axa8nx] {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 768px) {
    .editor-footer[b-7h45axa8nx] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .expression-row[b-7h45axa8nx] {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

@media (max-width: 767px) {
    .smtp-page[b-7h45axa8nx] {
        padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
    }

    .editor-actions[b-7h45axa8nx] {
        justify-content: stretch;
    }

    .btn-submit-compact[b-7h45axa8nx] {
        width: 100%;
        justify-content: center;
    }
}
/* /Pages/Admin/AdminSmtpExpresiones.razor.rz.scp.css */
.smtp-page[b-zsymordk0o] {
    max-width: 90rem;
    margin: 0 auto;
    padding: 5.5rem 1.25rem 2rem;
}

.btn-back[b-zsymordk0o] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--primary);
    font-family: var(--font-label);
    font-size: 0.875rem;
    font-weight: 600;
    background: none;
    border: none;
    cursor: pointer;
    margin-bottom: 1.25rem;
    padding: 0;
}

.editor-card[b-zsymordk0o],
.severity-group[b-zsymordk0o] {
    background: var(--bg);
    border: 1px solid var(--outline-variant);
    border-radius: 0.8rem;
    box-shadow: var(--shadow-sm);
}

.editor-card[b-zsymordk0o] {
    padding: 0.95rem;
    margin-bottom: 0.9rem;
}

.editor-card-header[b-zsymordk0o] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.editor-card-header h2[b-zsymordk0o] {
    margin: 0;
    font-size: 1rem;
}

.editor-help[b-zsymordk0o] {
    margin: 0.2rem 0 0;
    color: var(--on-surface-variant);
    font-size: 0.8rem;
}

.editor-grid[b-zsymordk0o] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .editor-grid[b-zsymordk0o] {
        grid-template-columns: 1.7fr 0.8fr;
    }
}

.input-wrapper[b-zsymordk0o] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.input-label[b-zsymordk0o] {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.text-field[b-zsymordk0o],
.select-field[b-zsymordk0o] {
    width: 100%;
    min-height: 2.45rem;
    padding: 0.5rem 0.7rem;
    border-radius: 0.55rem;
    border: 1px solid var(--outline-variant);
    background: var(--bg);
    color: var(--on-surface);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    font-size: 0.88rem;
}

.text-field:focus[b-zsymordk0o],
.select-field:focus[b-zsymordk0o] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
}

.editor-footer[b-zsymordk0o] {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-top: 0.65rem;
}

.severity-shortcuts[b-zsymordk0o] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    flex: 1 1 auto;
}

@media (min-width: 768px) {
    .editor-footer[b-zsymordk0o] {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.75rem;
    }

    .severity-shortcuts[b-zsymordk0o] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.severity-shortcut[b-zsymordk0o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.45rem;
    border: 1px solid var(--outline-variant);
    border-radius: 0.65rem;
    background: var(--bg);
    padding: 0.45rem 0.65rem;
    cursor: pointer;
    transition: transform var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
    font-size: 0.78rem;
}

.severity-shortcut:hover[b-zsymordk0o] {
    transform: translateY(-1px);
}

.severity-shortcut--active[b-zsymordk0o] {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary-light) 28%, var(--bg));
}

.severity-shortcut strong[b-zsymordk0o] {
    font-size: 0.88rem;
}

.severity-shortcut-0 strong[b-zsymordk0o] { color: var(--info); }
.severity-shortcut-1 strong[b-zsymordk0o] { color: var(--severity-warning); }
.severity-shortcut-2 strong[b-zsymordk0o] { color: var(--severity-error); }
.severity-shortcut-3 strong[b-zsymordk0o] { color: var(--severity-critical); }

.editor-actions[b-zsymordk0o] {
    display: flex;
    justify-content: flex-end;
    flex-shrink: 0;
}

.groups-grid[b-zsymordk0o] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.7rem;
}

@media (min-width: 900px) {
    .groups-grid[b-zsymordk0o] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1320px) {
    .groups-grid[b-zsymordk0o] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.severity-group[b-zsymordk0o] {
    padding: 0.7rem;
}

.severity-group-header[b-zsymordk0o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.55rem;
}

.severity-group-title-wrap[b-zsymordk0o] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.group-count[b-zsymordk0o] {
    color: var(--on-surface-variant);
    font-size: 0.75rem;
}

.group-list[b-zsymordk0o] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.group-empty[b-zsymordk0o] {
    border: 1px dashed var(--outline-variant);
    border-radius: 0.55rem;
    padding: 0.55rem 0.65rem;
    color: var(--on-surface-variant);
    font-size: 0.78rem;
}

.expression-row[b-zsymordk0o] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    border: 1px solid color-mix(in srgb, var(--outline-variant) 35%, transparent);
    border-radius: 0.55rem;
    padding: 0.45rem 0.55rem;
}

@media (min-width: 640px) {
    .expression-row[b-zsymordk0o] {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.expression-code[b-zsymordk0o] {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    font-family: "JetBrains Mono", monospace;
    color: var(--on-surface);
    white-space: normal;
    word-break: break-word;
    font-size: 0.74rem;
    line-height: 1.3;
    flex: 1 1 auto;
    min-width: 0;
}

.expression-actions[b-zsymordk0o] {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.severity-chip[b-zsymordk0o] {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.45rem;
    border-radius: 9999px;
    font-size: 0.65rem;
    font-weight: 700;
}

.severity-chip-0[b-zsymordk0o] {
    background: color-mix(in srgb, var(--info) 12%, transparent);
    color: var(--info);
}

.severity-chip-1[b-zsymordk0o] {
    background: color-mix(in srgb, var(--severity-warning) 14%, transparent);
    color: var(--severity-warning);
}

.severity-chip-2[b-zsymordk0o] {
    background: color-mix(in srgb, var(--severity-error) 12%, transparent);
    color: var(--severity-error);
}

.severity-chip-3[b-zsymordk0o] {
    background: color-mix(in srgb, var(--severity-critical) 12%, transparent);
    color: var(--severity-critical);
}

.btn-primary[b-zsymordk0o],
.btn-secondary[b-zsymordk0o],
.btn-danger-outline[b-zsymordk0o],
.btn-ghost[b-zsymordk0o] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border-radius: 0.5rem;
    padding: 0.5rem 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);
}

.btn-secondary[b-zsymordk0o],
.btn-danger-outline[b-zsymordk0o],
.btn-ghost[b-zsymordk0o] {
    font-size: 0.78rem;
}

.btn-primary[b-zsymordk0o] {
    border: none;
    background: var(--primary);
    color: var(--on-primary);
}

.btn-submit-compact[b-zsymordk0o] {
    padding: 0.45rem 0.72rem;
    font-size: 0.78rem;
}

.btn-secondary[b-zsymordk0o] {
    border: 1px solid var(--primary);
    background: transparent;
    color: var(--primary);
}

.btn-danger-outline[b-zsymordk0o] {
    border: 1px solid var(--error);
    background: transparent;
    color: var(--error);
}

.btn-ghost[b-zsymordk0o] {
    border: 1px solid var(--outline-variant);
    background: transparent;
    color: var(--on-surface-variant);
}

.btn-primary:hover[b-zsymordk0o],
.btn-secondary:hover[b-zsymordk0o],
.btn-danger-outline:hover[b-zsymordk0o],
.btn-ghost:hover[b-zsymordk0o] {
    transform: translateY(-1px);
}

.btn-compact[b-zsymordk0o] {
    padding: 0.28rem 0.5rem;
    font-size: 0.74rem;
}

.btn-icon-small[b-zsymordk0o] {
    font-size: 0.9rem;
}

.banner-success[b-zsymordk0o],
.banner-error[b-zsymordk0o] {
    border-radius: 0.75rem;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.8rem;
    padding: 0.7rem 1rem;
    font-size: 0.82rem;
    font-weight: 500;
    display: flex;
}

.banner-success[b-zsymordk0o] {
    background-color: var(--success-bg);
    color: var(--success);
    border: 1px solid #6ee7b773;
}

.banner-error[b-zsymordk0o] {
    background-color: var(--severity-critical-bg);
    color: var(--severity-critical);
    border: 1px solid #fca5a573;
}

.loading-container[b-zsymordk0o] {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 767px) {
    .smtp-page[b-zsymordk0o] {
        padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
    }

    .editor-actions[b-zsymordk0o] {
        justify-content: stretch;
    }

    .btn-submit-compact[b-zsymordk0o] {
        width: 100%;
        justify-content: center;
        padding: 0.5rem 0.7rem;
        font-size: 0.75rem;
    }
}
/* /Pages/Admin/AdminUsuarioDetalle.razor.rz.scp.css */
.page-wrapper[b-03ts2auc7w] {
    min-height: calc(100dvh - 4rem);
    margin-top: 4rem;
    display: flex;
    justify-content: center;
}

.content-panel[b-03ts2auc7w] {
    width: 100%;
    max-width: 680px;
    padding: 1.5rem;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .content-panel[b-03ts2auc7w] {
        padding: 3rem 2rem;
    }
}

.btn-back[b-03ts2auc7w] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--primary);
    font-family: var(--font-label);
    font-size: 0.875rem;
    font-weight: 600;
    background: none;
    border: none;
    cursor: pointer;
    margin-bottom: 2rem;
    padding: 0;
    transition: opacity var(--transition-fast);
}

.btn-back:hover[b-03ts2auc7w] {
    opacity: 0.75;
}

@media (max-width: 767px) {
    .btn-back[b-03ts2auc7w] {
        display: none;
    }
}

.user-header[b-03ts2auc7w] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 2.5rem;
}

.avatar-lg[b-03ts2auc7w] {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 9999px;
    background: var(--primary-light);
    color: var(--primary-dark);
    font-family: var(--font-headline);
    font-weight: 800;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.user-name-row[b-03ts2auc7w] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
}

.user-name[b-03ts2auc7w] {
    font-family: var(--font-headline);
    font-size: clamp(1.25rem, 4vw, 1.75rem);
    font-weight: 800;
    color: var(--on-surface);
    margin: 0 0 0.25rem;
    line-height: 1.1;
}

.user-email[b-03ts2auc7w] {
    font-size: 0.875rem;
    color: var(--on-surface-variant);
    margin: 0;
}

.section-title[b-03ts2auc7w] {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 1rem;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 1rem;
}

.no-subs-state[b-03ts2auc7w] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem;
    background-color: var(--surface-container);
    border-radius: var(--radius-md);
    border: 1px solid var(--outline-variant);
    color: var(--on-surface-variant);
    font-size: 0.875rem;
}

.error-state[b-03ts2auc7w],
.empty-state[b-03ts2auc7w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 3rem 1.5rem;
    color: var(--on-surface-variant);
    text-align: center;
}

.error-icon[b-03ts2auc7w],
.empty-state-icon[b-03ts2auc7w] {
    font-size: 2.5rem;
}

.error-text[b-03ts2auc7w],
.empty-state-title[b-03ts2auc7w] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--on-surface);
    margin: 0;
}

.empty-state-text[b-03ts2auc7w] {
    font-size: 0.875rem;
    margin: 0;
}

.search-bar[b-03ts2auc7w] {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.search-icon[b-03ts2auc7w] {
    position: absolute;
    left: 0.75rem;
    font-size: 1.125rem;
    color: var(--on-surface-variant);
    pointer-events: none;
}

.search-input[b-03ts2auc7w] {
    width: 100%;
    padding: 0.5rem 2.5rem 0.5rem 2.25rem;
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--on-surface);
    font-family: var(--font-label);
    font-size: 0.875rem;
    outline: none;
    transition: border-color var(--transition-fast);
    box-sizing: border-box;
}

.search-input:focus[b-03ts2auc7w] {
    border-color: var(--primary);
}

.search-clear[b-03ts2auc7w] {
    position: absolute;
    right: 0.5rem;
    display: flex;
    align-items: center;
    padding: 0.125rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--on-surface-variant);
    border-radius: 9999px;
    transition: color var(--transition-fast);
}

.search-clear:hover[b-03ts2auc7w] {
    color: var(--on-surface);
}

.search-clear .material-symbols-outlined[b-03ts2auc7w] {
    font-size: 1rem;
}

.subs-list[b-03ts2auc7w] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.sub-row[b-03ts2auc7w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--outline-variant);
}

.sub-row:first-child[b-03ts2auc7w] {
    border-top: none;
}

.sub-row:nth-child(even)[b-03ts2auc7w] {
    background-color: var(--surface-container);
}

.sub-row-app[b-03ts2auc7w] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--on-surface);
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nivel-grid[b-03ts2auc7w] {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

.nivel-chip[b-03ts2auc7w] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem;
    border-radius: 0.25rem;
    font-family: var(--font-label);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
    transition: opacity var(--transition-fast);
}

.nivel-dot[b-03ts2auc7w] {
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background-color: currentColor;
    flex-shrink: 0;
}

.nivel-chip.activo.nivel-critical[b-03ts2auc7w] {
    background-color: var(--severity-critical-bg);
    color: var(--severity-critical);
}

.nivel-chip.activo.nivel-error[b-03ts2auc7w] {
    background-color: var(--severity-error-bg);
    color: var(--severity-error);
}

.nivel-chip.activo.nivel-warning[b-03ts2auc7w] {
    background-color: var(--severity-warning-bg);
    color: var(--severity-warning);
}

.nivel-chip.activo.nivel-info[b-03ts2auc7w] {
    background-color: var(--info-bg);
    color: var(--info);
}

.nivel-chip.inactivo[b-03ts2auc7w] {
    background-color: transparent;
    color: var(--outline-variant);
    border: 1px solid var(--outline-variant);
    opacity: 0.45;
}

@media (max-width: 480px) {
    .content-panel[b-03ts2auc7w] {
        padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0px));
    }

    .nivel-chip.inactivo[b-03ts2auc7w] {
        display: none;
    }

    .sub-row[b-03ts2auc7w] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .sub-row-app[b-03ts2auc7w] {
        white-space: normal;
    }
}

.role-section[b-03ts2auc7w],
.password-section[b-03ts2auc7w] {
    margin-bottom: 2rem;
}

.role-section-header[b-03ts2auc7w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.role-card[b-03ts2auc7w] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding: 1rem;
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-md);
    background: var(--bg);
}

.role-label[b-03ts2auc7w] {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
    font-family: var(--font-label);
}

.role-controls[b-03ts2auc7w] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.role-select[b-03ts2auc7w] {
    min-width: 12rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--on-surface);
    font-size: 0.875rem;
    font-family: var(--font-label);
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.role-select:focus[b-03ts2auc7w] {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
}

.role-select:disabled[b-03ts2auc7w] {
    opacity: 0.65;
    cursor: not-allowed;
}

.role-help[b-03ts2auc7w] {
    margin: 0;
    color: var(--on-surface-variant);
    font-size: 0.8125rem;
}

.password-check-row[b-03ts2auc7w] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--on-surface);
    font-weight: 600;
}

.password-check[b-03ts2auc7w] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--primary);
}

.btn-primary[b-03ts2auc7w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background-color: var(--primary);
    color: var(--on-primary);
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-label);
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color var(--transition-fast), opacity var(--transition-fast);
}

.btn-primary:hover[b-03ts2auc7w] {
    background-color: var(--primary-hover);
}

.btn-primary:disabled[b-03ts2auc7w] {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn-icon-small[b-03ts2auc7w] {
    font-size: 1.05rem;
    line-height: 1;
}

.role-badge[b-03ts2auc7w] {
    display: inline-flex;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.role-badge.admin[b-03ts2auc7w] {
    background: var(--primary-light);
    color: var(--primary-dark);
}

.role-badge.user[b-03ts2auc7w] {
    background: var(--surface-container);
    color: var(--on-surface-variant);
    border: 1px solid var(--border);
}

@media (max-width: 480px) {
    .role-section-header[b-03ts2auc7w],
    .role-controls[b-03ts2auc7w] {
        flex-direction: column;
        align-items: stretch;
    }

    .role-select[b-03ts2auc7w],
    .btn-primary[b-03ts2auc7w] {
        width: 100%;
    }
}
/* /Pages/AlertaDetalle.razor.rz.scp.css */
/* ── Error State ── */
.error-wrapper[b-4r12gcz0b3] {
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: calc(var(--app-top-offset) + 2rem);
    padding: 1.5rem;
    background-color: var(--severity-critical-bg);
    border-radius: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--severity-critical) 10%, transparent);
}

.error-header[b-4r12gcz0b3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    color: var(--severity-critical);
}

.error-title[b-4r12gcz0b3] {
    font-family: var(--font-headline);
    font-weight: 700;
}

.error-message[b-4r12gcz0b3] {
    font-family: var(--font-body);
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.btn-back-error[b-4r12gcz0b3] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--severity-critical);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.btn-back-error:hover[b-4r12gcz0b3] {
    text-decoration: underline;
}

/* ── Page Layout ── */
.page-wrapper[b-4r12gcz0b3] {
    font-family: var(--font-body);
    color: var(--on-surface);
    background-color: var(--surface);
    min-height: calc(100dvh - var(--app-top-offset));
    margin-top: var(--app-top-offset);
}

/* Desktop: recuperar el layout split con scroll propio por panel */
@media (min-width: 768px) {
    .page-wrapper[b-4r12gcz0b3] {
        height: calc(100dvh - var(--app-top-offset));
        overflow: hidden;
        min-height: unset;
    }
}

.page-main[b-4r12gcz0b3] {
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    .page-main[b-4r12gcz0b3] {
        height: 100%;
        flex-direction: row;
    }
}

/* ── Content Panel ── */
.content-panel[b-4r12gcz0b3] {
    padding: 1rem;
}

@media (min-width: 768px) {
    .content-panel[b-4r12gcz0b3] {
        flex: 1;
        overflow-y: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 3rem;
    }

    .content-panel[b-4r12gcz0b3]::-webkit-scrollbar {
        display: none;
    }
}

@media (min-width: 1024px) {
    .content-panel[b-4r12gcz0b3] {
        padding: 4rem;
    }
}

/* ── Back Button ── */
.btn-back[b-4r12gcz0b3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary);
    font-family: var(--font-label);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: opacity 150ms;
}

.btn-back:hover[b-4r12gcz0b3] {
    opacity: 0.7;
}

@media (max-width: 767px) {
    .btn-back[b-4r12gcz0b3] {
        display: none !important;
    }
}

.detail-nav[b-4r12gcz0b3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.detail-nav-back[b-4r12gcz0b3] {
    flex: 1 1 auto;
    min-width: 0;
}

.detail-nav-actions[b-4r12gcz0b3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.detail-nav-btn[b-4r12gcz0b3] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--outline-variant);
    border-radius: 9999px;
    background: var(--bg);
    color: var(--on-surface);
    padding: 0.5rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
}

.detail-nav-btn:hover:not(:disabled)[b-4r12gcz0b3] {
    transform: translateY(-1px);
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary-light) 25%, var(--bg));
}

.detail-nav-btn:disabled[b-4r12gcz0b3] {
    opacity: 0.45;
    cursor: not-allowed;
}

@media (max-width: 767px) {
    .btn-back[b-4r12gcz0b3] {
        display: none !important;
    }

    .detail-nav[b-4r12gcz0b3] {
        justify-content: flex-end;
        gap: 0.75rem;
    }
}
@media (max-width: 767px) {
    .sidebar[b-4r12gcz0b3] {
        /* Un padding generoso al final para que lo último suba por encima de la barra */
        padding-bottom: 2.5rem !important;
    }

    .mobile-spacer[b-4r12gcz0b3] {
        display: block;
        height: 100px;
    }
}
/* ── Alert Header ── */
.alert-header[b-4r12gcz0b3] {
    margin-bottom: 3rem;
}

.severity-badge[b-4r12gcz0b3] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    background-color: var(--severity-critical-bg);
    color: var(--severity-critical);
    font-family: var(--font-label);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

.icon-filled[b-4r12gcz0b3] {
    font-variation-settings: 'FILL' 1;
    font-size: 0.75rem;
}

.alert-title[b-4r12gcz0b3] {
    font-family: var(--font-headline);
    font-size: clamp(1.5rem, 5vw, 3rem);
    font-weight: 800;
    color: var(--on-surface);
    letter-spacing: -0.025em;
    margin-bottom: 1rem;
    line-height: 1.1;
}

.alert-subtitle[b-4r12gcz0b3] {
    font-family: var(--font-body);
    font-size: 1.25rem;
    color: var(--on-surface-variant);
    max-width: 48rem;
    line-height: 1.75;
}

.alert-subtitle .app-name[b-4r12gcz0b3] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.35rem;
    color: var(--primary);
    font-weight: 700;
}

.alert-subtitle .client-name[b-4r12gcz0b3] {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--on-surface);
}

/* ── Stacktrace Card ── */
.stacktrace-card[b-4r12gcz0b3] {
    background-color: var(--surface-container);
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid color-mix(in srgb, var(--outline-variant) 10%, transparent);
}

.stacktrace-card-header[b-4r12gcz0b3] {
    padding: 1rem 1.5rem;
    background-color: var(--bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stacktrace-label[b-4r12gcz0b3] {
    font-family: var(--font-label);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--on-surface-variant);
}

.btn-copy[b-4r12gcz0b3] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--primary);
    transition: opacity 150ms;
    padding: 0;
    display: flex;
    align-items: center;
}

.btn-copy:hover[b-4r12gcz0b3] {
    opacity: 0.7;
}

.btn-copy.copied[b-4r12gcz0b3] {
    color: #22c55e;
}

.stacktrace-body[b-4r12gcz0b3] {
    padding: 1.5rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    line-height: 1.75;
    background-color: #1b1c19;
    color: #fbf9f4;
    overflow-x: auto;
}

.stacktrace-pre[b-4r12gcz0b3] {
    white-space: pre-wrap;
    max-height: 250px;
    overflow: hidden;
}

@media (min-width: 768px) {
    .stacktrace-pre[b-4r12gcz0b3] {
        max-height: 400px;
    }
}

.stacktrace-pre.expanded[b-4r12gcz0b3] {
    max-height: none;
    overflow: visible;
}

.stacktrace-truncated-note[b-4r12gcz0b3] {
    margin-top: 1rem;
    color: #78716c;
    font-style: italic;
    font-size: 0.75rem;
}

.btn-expand-stacktrace[b-4r12gcz0b3] {
    width: 100%;
    padding: 0.75rem;
    background-color: rgba(255, 255, 255, 0.05);
    color: #a8a29e;
    font-family: var(--font-label);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: background-color 150ms;
}

.btn-expand-stacktrace:hover[b-4r12gcz0b3] {
    background-color: rgba(255, 255, 255, 0.1);
}

@media (min-width: 768px) {
    .mobile-spacer[b-4r12gcz0b3] {
        display: none;
    }
}

/* ── Sidebar ── */
.sidebar[b-4r12gcz0b3] {
    width: 100%;
    background-color: var(--surface-container);
    border-top: 1px solid color-mix(in srgb, var(--outline-variant) 20%, transparent);
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    .sidebar[b-4r12gcz0b3] {
        width: 400px;
        height: 100%;
        border-top: none;
        border-left: 1px solid color-mix(in srgb, var(--outline-variant) 20%, transparent);
        overflow-y: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .sidebar[b-4r12gcz0b3]::-webkit-scrollbar {
        display: none;
    }
}

@media (min-width: 1024px) {
    .sidebar[b-4r12gcz0b3] {
        width: 450px;
    }
}

.sidebar-content[b-4r12gcz0b3] {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    background-color: var(--bg)
}

.sidebar-content[b-4r12gcz0b3]::-webkit-scrollbar {
    display: none;
}

/* ── Details Section ── */
.section-title[b-4r12gcz0b3] {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.details-grid[b-4r12gcz0b3] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.detail-card[b-4r12gcz0b3] {
    background-color: var(--bg-secondary);
    color: var(--on-surface);
    border-radius: 0.5rem;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--outline-variant) 10%, transparent);
}

.detail-label[b-4r12gcz0b3] {
    font-family: var(--font-label);
    font-size: 10px;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--on-surface-variant) 60%, transparent);
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-bottom: 0.25rem;
}

.detail-value-mono[b-4r12gcz0b3] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--on-surface);
}

.detail-value-text[b-4r12gcz0b3] {
    font-size: 0.875rem;
    color: var(--on-surface);
}

.detail-subvalue[b-4r12gcz0b3] {
    font-family: var(--font-label);
    font-size: 0.8125rem;
    color: var(--on-surface-variant);
    margin: 0.125rem 0 0;
}

/* ── Archivo Adjunto ── */
.btn-toggle-imagen[b-4r12gcz0b3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.65rem 1rem;
    margin-bottom: 0.75rem;
    border-radius: 0.75rem;
    background-color: transparent;
    color: var(--on-surface-variant);
    border: 1px solid var(--outline-variant);
    font-family: var(--font-label);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 150ms;
}

.btn-toggle-imagen:hover[b-4r12gcz0b3] {
    background-color: color-mix(in srgb, var(--on-surface) 6%, transparent);
}

/* ── Lightbox ── */
.lightbox-overlay[b-4r12gcz0b3] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}

.lightbox-img[b-4r12gcz0b3] {
    max-width: 92vw;
    max-height: 92vh;
    object-fit: contain;
    border-radius: 0.5rem;
    cursor: default;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
}

.lightbox-close[b-4r12gcz0b3] {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.15);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 150ms;
}

.lightbox-close:hover[b-4r12gcz0b3] {
    background-color: rgba(255, 255, 255, 0.28);
}

/* ── Download Button ── */
.btn-download[b-4r12gcz0b3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    background-color: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
    border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
    font-family: var(--font-label);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 150ms;
}

.btn-download:hover:not(:disabled)[b-4r12gcz0b3] {
    background-color: color-mix(in srgb, var(--primary) 20%, transparent);
}

.btn-download:disabled[b-4r12gcz0b3] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── Screenshot Section ── */
.screenshot-title[b-4r12gcz0b3] {
    font-family: var(--font-label);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--on-surface-variant);
    margin-bottom: 1rem;
}

.screenshot-container[b-4r12gcz0b3] {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 0.75rem;
    overflow: hidden;
    background-color: var(--outline-variant);
    box-shadow: var(--shadow-lg);
    border: 1px solid color-mix(in srgb, var(--outline-variant) 10%, transparent);
}

.screenshot-img[b-4r12gcz0b3] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(20%);
    transition: filter 500ms;
}

.screenshot-container:hover .screenshot-img[b-4r12gcz0b3] {
    filter: grayscale(0%);
}

.screenshot-overlay-tint[b-4r12gcz0b3] {
    position: absolute;
    inset: 0;
    background-color: color-mix(in srgb, var(--primary) 5%, transparent);
    mix-blend-mode: multiply;
}

.screenshot-overlay-zoom[b-4r12gcz0b3] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 150ms;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
}

.screenshot-container:hover .screenshot-overlay-zoom[b-4r12gcz0b3] {
    opacity: 1;
}

.btn-zoom[b-4r12gcz0b3] {
    padding: 0.5rem 1.5rem;
    background-color: white;
    color: var(--on-surface);
    border-radius: 0.5rem;
    font-family: var(--font-label);
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

/* ── Sidebar Footer ── */
.sidebar-footer[b-4r12gcz0b3] {
    padding: 1rem;
    background-color: var(--bg);
    border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 20%, transparent);
    display: grid;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* 3 botones: Archivar | Guardar | Eliminar */
.sidebar-footer--3col[b-4r12gcz0b3] {
    grid-template-columns: 1fr 1fr 1fr;
}

/* 2 botones: Guardar | Restaurar (eliminada + admin) */
.sidebar-footer--2col[b-4r12gcz0b3] {
    grid-template-columns: 1fr 1fr;
}

/* 1 botón: Guardar ocupa todo el ancho (eliminada + no admin) */
.sidebar-footer--1col[b-4r12gcz0b3] {
    grid-template-columns: 1fr;
}

.btn-archive[b-4r12gcz0b3] {
    padding: 0.65rem 0.75rem;
    border-radius: 0.75rem;
    background-color: var(--bg);
    color: var(--primary);
    font-family: var(--font-label);
    font-size: 0.8125rem;
    font-weight: 700;
    border: 1px solid color-mix(in srgb, var(--outline-variant) 30%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    cursor: pointer;
    transition: background-color 150ms;
    min-width: 0;
}

.btn-archive:hover[b-4r12gcz0b3] {
    background-color: color-mix(in srgb, var(--primary) 10%, transparent);
}

.btn-delete[b-4r12gcz0b3] {
    padding: 0.65rem 0.75rem;
    border-radius: 0.75rem;
    background-color: var(--severity-critical);
    color: white;
    font-family: var(--font-label);
    font-size: 0.8125rem;
    font-weight: 700;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    cursor: pointer;
    transition: opacity 150ms;
    box-shadow: 0 1px 4px color-mix(in srgb, var(--severity-critical) 30%, transparent);
    min-width: 0;
}

.btn-delete:hover[b-4r12gcz0b3] {
    opacity: 0.9;
}

.btn-archive.btn-unarchive[b-4r12gcz0b3] {
    color: var(--on-surface-variant);
    border-color: color-mix(in srgb, var(--outline-variant) 50%, transparent);
}

.btn-archive.btn-unarchive:hover[b-4r12gcz0b3] {
    background-color: color-mix(in srgb, var(--on-surface) 8%, transparent);
}

.btn-save[b-4r12gcz0b3] {
    padding: 0.65rem 0.5rem;
    border-radius: 0.75rem;
    background-color: var(--bg);
    color: var(--on-surface-variant);
    font-family: var(--font-label);
    font-size: 0.8125rem;
    font-weight: 700;
    border: 1px solid color-mix(in srgb, var(--outline-variant) 30%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    cursor: pointer;
    transition: background-color 150ms, color 150ms, border-color 150ms;
    white-space: nowrap;
    min-width: 0;
}

.btn-save:hover[b-4r12gcz0b3] {
    background-color: color-mix(in srgb, var(--on-surface) 6%, transparent);
}

.btn-save--active[b-4r12gcz0b3] {
    background-color: var(--on-surface);
    color: var(--surface);
    border-color: var(--on-surface);
}

.btn-save--active:hover[b-4r12gcz0b3] {
    background-color: color-mix(in srgb, var(--on-surface) 85%, transparent);
}

.btn-restore[b-4r12gcz0b3] {
    padding: 0.65rem 0.75rem;
    border-radius: 0.75rem;
    background-color: color-mix(in srgb, var(--severity-info, #4caf50) 15%, transparent);
    color: var(--severity-info, #4caf50);
    font-family: var(--font-label);
    font-size: 0.8125rem;
    font-weight: 700;
    border: 1px solid color-mix(in srgb, var(--severity-info, #4caf50) 30%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    cursor: pointer;
    transition: background-color 150ms;
    min-width: 0;
}

.btn-restore:hover:not(:disabled)[b-4r12gcz0b3] {
    background-color: color-mix(in srgb, var(--severity-info, #4caf50) 25%, transparent);
}

.btn-restore:disabled[b-4r12gcz0b3],
.btn-archive:disabled[b-4r12gcz0b3],
.btn-delete:disabled[b-4r12gcz0b3] {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 767px) {
    .sidebar-footer[b-4r12gcz0b3] {
        padding: 0.75rem;
        gap: 0.375rem;
    }

    .btn-archive[b-4r12gcz0b3],
    .btn-save[b-4r12gcz0b3],
    .btn-delete[b-4r12gcz0b3],
    .btn-restore[b-4r12gcz0b3] {
        padding: 0.65rem 0.5rem;
    }

    .sidebar-action-label[b-4r12gcz0b3] {
        display: none;
    }
}
/* /Pages/Archivadas.razor.rz.scp.css */
/* Todos los estilos compartidos (page-wrapper, container, page-header, title,
   action-bar, filter-bar, filter-drawer, table, pagination, alert-cards,
   empty-state, error-state) se encuentran en app.css */

@media (min-width: 1280px) {
    .filter-bar[b-gvd3t80avm] {
        grid-template-columns: 2fr repeat(3, 1fr) repeat(2, 9rem) auto auto;
    }
}
.btn-clear-filter-inline[b-gvd3t80avm] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4rem 0.85rem;
    border-radius: 9999px;
    border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--outline-variant));
    background: color-mix(in srgb, var(--primary) 8%, transparent);
    color: var(--primary);
    font-family: var(--font-label);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
}

.ignore-hint[b-gvd3t80avm] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    border-radius: 1rem;
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--outline-variant));
    background: color-mix(in srgb, var(--surface-container) 72%, var(--bg));
}

.ignore-hint__icon[b-gvd3t80avm] {
    color: var(--on-surface-variant);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.ignore-hint__text[b-gvd3t80avm] {
    color: var(--on-surface-variant);
    font-size: 0.8rem;
    line-height: 1.45;
    flex: 1 1 auto;
}

.ignore-hint__link[b-gvd3t80avm] {
    color: var(--primary);
    font-family: var(--font-label);
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.ignore-hint__link:hover[b-gvd3t80avm] {
    text-decoration: underline;
}

.ignore-hint__button[b-gvd3t80avm] {
    background: none;
    border: none;
    cursor: pointer;
}

.btn-ignore-manager[b-gvd3t80avm] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.8rem 1.6rem;
    border-radius: 9999px;
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--outline-variant));
    background: var(--surface-container);
    color: var(--on-surface);
    font-family: var(--font-label);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
}

.btn-ignore-manager .material-symbols-outlined[b-gvd3t80avm] {
    font-size: 1rem;
}

.btn-ignore-manager--active[b-gvd3t80avm] {
    background: color-mix(in srgb, var(--primary-light) 62%, var(--bg));
    color: var(--primary-dark);
    border-color: color-mix(in srgb, var(--primary) 26%, var(--outline-variant));
}

.btn-ignore-manager--drawer[b-gvd3t80avm] {
    display: none;
    width: 100%;
    justify-content: center;
}

.btn-ignore-manager--desktop[b-gvd3t80avm] {
    display: inline-flex;
}

.table-row-actions[b-gvd3t80avm],
.alert-card-actions[b-gvd3t80avm] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.btn-icon--ignore[b-gvd3t80avm] {
    color: var(--on-surface-variant);
}

.btn-icon--ignore:hover[b-gvd3t80avm] {
    color: var(--primary);
}

.empty-state-link-button[b-gvd3t80avm] {
    margin-top: 0.5rem;
    border: none;
    background: none;
    color: var(--primary);
    font-family: var(--font-label);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}

.ignore-panel-backdrop[b-gvd3t80avm],
.ignore-confirm-backdrop[b-gvd3t80avm] {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(15, 23, 42, 0.38);
    backdrop-filter: blur(4px);
}

.ignore-panel[b-gvd3t80avm] {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    width: min(28rem, calc(100vw - 2rem));
    max-height: min(70vh, 42rem);
    z-index: 91;
    border-radius: 1.25rem;
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--outline-variant));
    background: var(--bg);
    box-shadow: var(--shadow-lg);
    transform: translateY(calc(100% + 2rem));
    opacity: 0;
    pointer-events: none;
    transition: transform 180ms ease, opacity 180ms ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ignore-panel--open[b-gvd3t80avm] {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.ignore-panel__handle[b-gvd3t80avm] {
    width: 3rem;
    height: 0.3rem;
    border-radius: 9999px;
    background: var(--outline-variant);
    margin: 0.7rem auto 0;
}

.ignore-panel__header[b-gvd3t80avm] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem 0.9rem;
}

.ignore-panel__title[b-gvd3t80avm] {
    margin: 0 0 0.2rem;
    color: var(--on-surface);
    font-family: var(--font-headline);
    font-size: 1rem;
    font-weight: 800;
}

.ignore-panel__subtitle[b-gvd3t80avm] {
    margin: 0;
    color: var(--on-surface-variant);
    font-size: 0.8rem;
    line-height: 1.45;
}

.ignore-panel__close[b-gvd3t80avm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--outline-variant);
    border-radius: 9999px;
    background: var(--surface-container);
    color: var(--on-surface);
    cursor: pointer;
}

.ignore-panel__body[b-gvd3t80avm] {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 0 1.1rem 1.1rem;
    overflow: auto;
}

.ignore-rule-card[b-gvd3t80avm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    padding: 0.95rem 1rem;
    border-radius: 1rem;
    border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--outline-variant));
    background: color-mix(in srgb, var(--surface-container) 78%, var(--bg));
}

.ignore-rule-card__info[b-gvd3t80avm] {
    min-width: 0;
}

.ignore-rule-card__title-row[b-gvd3t80avm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.2rem;
}

.ignore-rule-card__icon[b-gvd3t80avm] {
    font-size: 1rem;
    color: var(--primary);
}

.ignore-rule-card__app[b-gvd3t80avm] {
    color: var(--on-surface);
    font-family: var(--font-headline);
    font-size: 0.92rem;
    font-weight: 700;
}

.ignore-rule-card__meta[b-gvd3t80avm] {
    margin: 0 0 0.5rem;
    color: var(--on-surface-variant);
    font-size: 0.78rem;
}

.ignore-rule-card__badge[b-gvd3t80avm] {
    display: inline-flex;
    align-items: center;
    padding: 0.32rem 0.7rem;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary-dark);
    font-family: var(--font-label);
    font-size: 0.72rem;
    font-weight: 700;
}

.ignore-rule-card__remove[b-gvd3t80avm] {
    border: none;
    border-radius: 9999px;
    background: var(--severity-critical-bg);
    color: var(--severity-critical);
    font-family: var(--font-label);
    font-size: 0.76rem;
    font-weight: 800;
    padding: 0.55rem 0.9rem;
    cursor: pointer;
    white-space: nowrap;
}

.ignore-panel__empty[b-gvd3t80avm] {
    display: grid;
    place-items: center;
    gap: 0.55rem;
    padding: 1.3rem 0.4rem 0.6rem;
    text-align: center;
    color: var(--on-surface-variant);
    font-size: 0.82rem;
    line-height: 1.5;
}

.ignore-panel__empty .material-symbols-outlined[b-gvd3t80avm] {
    font-size: 1.5rem;
}

.ignore-confirm-card[b-gvd3t80avm] {
    position: fixed;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    width: min(26rem, calc(100vw - 2rem));
    z-index: 92;
    border-radius: 1.15rem;
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--outline-variant));
    background: var(--bg);
    box-shadow: var(--shadow-lg);
    padding: 1.5rem;
    text-align: center;
}

.ignore-confirm-card__icon[b-gvd3t80avm] {
    display: block;
    margin-bottom: 0.85rem;
    color: var(--primary);
    font-size: 2rem;
}

.ignore-confirm-card__title[b-gvd3t80avm] {
    margin: 0 0 0.45rem;
    color: var(--on-surface);
    font-family: var(--font-headline);
    font-size: 1.08rem;
    font-weight: 800;
}

.ignore-confirm-card__message[b-gvd3t80avm] {
    margin: 0;
    color: var(--on-surface-variant);
    font-size: 0.86rem;
    line-height: 1.55;
}

.ignore-confirm-card__note[b-gvd3t80avm] {
    margin: 0.85rem 0 0;
    padding: 0.8rem 0.9rem;
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--primary-light) 58%, var(--bg));
    color: var(--primary-dark);
    font-size: 0.8rem;
    line-height: 1.5;
    font-weight: 700;
}

.ignore-confirm-card__actions[b-gvd3t80avm] {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.ignore-confirm-card__cancel[b-gvd3t80avm],
.ignore-confirm-card__confirm[b-gvd3t80avm] {
    flex: 1;
    border-radius: 0.75rem;
    padding: 0.72rem 0.9rem;
    font-family: var(--font-label);
    font-size: 0.84rem;
    font-weight: 800;
    cursor: pointer;
}

.ignore-confirm-card__cancel[b-gvd3t80avm] {
    border: 1px solid var(--outline-variant);
    background: var(--surface-container);
    color: var(--on-surface);
}

.ignore-confirm-card__confirm[b-gvd3t80avm] {
    border: none;
    background: var(--primary);
    color: var(--on-primary);
}

.ignore-confirm-card__cancel:disabled[b-gvd3t80avm],
.ignore-confirm-card__confirm:disabled[b-gvd3t80avm] {
    opacity: 0.6;
    cursor: not-allowed;
}

.ignore-toast[b-gvd3t80avm] {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    transform: translateX(-50%);
    z-index: 93;
    width: min(34rem, calc(100vw - 1.5rem));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    border-radius: 1rem;
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--outline-variant));
    background: color-mix(in srgb, var(--surface-container) 88%, var(--bg));
    box-shadow: var(--shadow-lg);
}

.ignore-toast__content[b-gvd3t80avm] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.ignore-toast__icon[b-gvd3t80avm] {
    color: var(--primary);
    font-size: 1.15rem;
    flex-shrink: 0;
}

.ignore-toast__message[b-gvd3t80avm] {
    color: var(--on-surface);
    font-size: 0.82rem;
    line-height: 1.45;
}

.ignore-toast__actions[b-gvd3t80avm] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.ignore-toast__undo[b-gvd3t80avm],
.ignore-toast__close[b-gvd3t80avm] {
    border: none;
    background: none;
    color: var(--primary);
    cursor: pointer;
}

.ignore-toast__undo[b-gvd3t80avm] {
    font-family: var(--font-label);
    font-size: 0.8rem;
    font-weight: 800;
}

.ignore-toast__close[b-gvd3t80avm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 767px) {
    .action-bar-left[b-gvd3t80avm] {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding-left: 0;
    }

    .btn-clear-filter-inline[b-gvd3t80avm] {
        display: none;
    }

    .ignore-hint[b-gvd3t80avm] {
        flex-wrap: wrap;
    }

    .btn-ignore-manager--desktop[b-gvd3t80avm] {
        display: none;
    }

    .btn-ignore-manager--drawer[b-gvd3t80avm] {
        display: inline-flex;
        min-height: 2.5rem;
    }

    .btn-ignore-manager span:last-child[b-gvd3t80avm] {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .btn-filter-mobile[b-gvd3t80avm] {
        margin-left: auto;
    }

    .ignore-panel[b-gvd3t80avm] {
        left: 0.75rem;
        right: 0.75rem;
        top: 50%;
        bottom: auto;
        width: auto;
        max-height: min(78dvh, calc(100dvh - var(--app-top-offset) - 1.5rem));
        border-radius: 1.25rem;
        transform: translateY(120dvh);
    }

    .ignore-panel__handle[b-gvd3t80avm] {
        display: none;
    }

    .ignore-panel--open[b-gvd3t80avm] {
        transform: translateY(-50%);
    }

    .ignore-panel__body[b-gvd3t80avm] {
        padding-bottom: 1rem;
    }

    .ignore-rule-card[b-gvd3t80avm] {
        align-items: flex-start;
        flex-direction: column;
    }

    .ignore-rule-card__remove[b-gvd3t80avm] {
        width: 100%;
    }

    .ignore-confirm-backdrop[b-gvd3t80avm] {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        padding: 1rem 1rem calc(4rem + env(safe-area-inset-bottom, 0px) + 1rem);
    }

    .ignore-confirm-card[b-gvd3t80avm] {
        position: relative;
        inset: auto;
        transform: none;
        width: min(30rem, 100%);
        max-height: min(72dvh, calc(100dvh - var(--app-top-offset) - 4rem - env(safe-area-inset-bottom, 0px) - 2rem));
        overflow: auto;
    }

    .ignore-confirm-card__actions[b-gvd3t80avm],
    .ignore-toast[b-gvd3t80avm] {
        flex-direction: column;
        align-items: stretch;
    }

    .ignore-toast[b-gvd3t80avm] {
        left: 0.75rem;
        right: 0.75rem;
        bottom: calc(4rem + env(safe-area-inset-bottom, 0px) + 0.75rem);
        width: auto;
        transform: none;
    }

    .ignore-toast__actions[b-gvd3t80avm] {
        justify-content: space-between;
    }
}

@media (max-width: 767px) and (max-height: 780px) {
    .ignore-panel[b-gvd3t80avm] {
        max-height: min(84dvh, calc(100dvh - var(--app-top-offset) - 1rem));
    }

    .ignore-confirm-backdrop[b-gvd3t80avm] {
        align-items: center;
        padding: 0.75rem;
    }

    .ignore-confirm-card[b-gvd3t80avm] {
        max-height: calc(100dvh - var(--app-top-offset) - 1.5rem);
    }

    .ignore-toast[b-gvd3t80avm] {
        left: 0.5rem;
        right: 0.5rem;
        bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
    }
}
/* /Pages/CambiarPasswordObligatorio.razor.rz.scp.css */
.forced-page[b-rn6noa65tf] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface-container) 100%);
}

.forced-header[b-rn6noa65tf] {
    display: flex;
    justify-content: center;
    padding: 2rem 1.5rem 0;
}

.forced-brand[b-rn6noa65tf] {
    display: flex;
    justify-content: center;
}

.forced-main[b-rn6noa65tf] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem 3rem;
}

.forced-card[b-rn6noa65tf] {
    width: 100%;
    max-width: 460px;
    background: var(--bg-secondary);
    border: 1px solid var(--outline-variant);
    border-radius: 1.25rem;
    padding: 2rem;
    box-shadow: 0 20px 45px rgba(27, 28, 25, 0.08);
}

.forced-copy[b-rn6noa65tf] {
    margin-bottom: 1.5rem;
}

.forced-title[b-rn6noa65tf] {
    margin: 0 0 0.75rem;
    font-family: var(--font-headline);
    font-size: 2rem;
    font-weight: 800;
    color: var(--on-surface);
}

.forced-subtitle[b-rn6noa65tf] {
    margin: 0;
    color: var(--on-surface-variant);
    line-height: 1.6;
}

.forced-banner[b-rn6noa65tf] {
    margin-bottom: 1rem;
    padding: 0.875rem 1rem;
    border-radius: 0.875rem;
    font-size: 0.9rem;
    line-height: 1.5;
}

.forced-banner-error[b-rn6noa65tf] {
    background: var(--severity-critical-bg);
    color: var(--severity-critical);
}

.forced-form[b-rn6noa65tf] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.forced-label[b-rn6noa65tf] {
    font-family: var(--font-label);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
}

.forced-input[b-rn6noa65tf] {
    height: 3.5rem;
    padding: 0 1rem;
    border: 1px solid var(--outline-variant);
    border-radius: 0.875rem;
    background: var(--surface);
    color: var(--on-surface);
    font-size: 0.95rem;
    outline: none;
}

.forced-input:focus[b-rn6noa65tf] {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

.forced-submit[b-rn6noa65tf],
.forced-logout-button[b-rn6noa65tf] {
    height: 3.5rem;
    border: none;
    border-radius: 0.875rem;
    font-family: var(--font-headline);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}

.forced-submit[b-rn6noa65tf] {
    margin-top: 0.5rem;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
    color: var(--on-primary);
}

.forced-logout[b-rn6noa65tf] {
    margin-top: 1rem;
}

.forced-logout-button[b-rn6noa65tf] {
    width: 100%;
    background: transparent;
    color: var(--primary);
    border: 1px solid var(--outline-variant);
}
/* /Pages/Login.razor.rz.scp.css */
/* ── Page ── */
.login-page[b-1pyz0j4jxl] {
    font-family: var(--font-body);
    color: var(--on-surface);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    background-color: var(--surface);
}

/* ── Header ── */
.login-header[b-1pyz0j4jxl] {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 50;
    background-color: color-mix(in srgb, var(--surface) 85%, transparent);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.login-header .header-brand[b-1pyz0j4jxl] {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 1.2rem;
    margin-top: 1.2rem;
}

.login-header-inner[b-1pyz0j4jxl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
}

.login-brand[b-1pyz0j4jxl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.login-brand-icon[b-1pyz0j4jxl] {
    color: var(--primary);
}

.login-brand-name[b-1pyz0j4jxl] {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: -0.025em;
    color: var(--on-surface);
}

.login-tagline[b-1pyz0j4jxl] {
    display: none;
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--on-surface-variant) 50%, transparent);
}

@media (min-width: 768px) {
    .login-tagline[b-1pyz0j4jxl] {
        display: block;
    }
}

/* ── Main ── */
.login-main[b-1pyz0j4jxl] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5rem 1.5rem 3rem;
    position: relative;
    z-index: 10;
}

.login-card-wrapper[b-1pyz0j4jxl] {
    width: 100%;
    max-width: 440px;
    animation: login-enter-b-1pyz0j4jxl 0.5s ease-out;
}

@keyframes login-enter-b-1pyz0j4jxl {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Welcome text ── */
.login-welcome[b-1pyz0j4jxl] {
    margin-bottom: 2.5rem;
    text-align: center;
}

@media (min-width: 768px) {
    .login-welcome[b-1pyz0j4jxl] {
        text-align: left;
    }
}

.login-title[b-1pyz0j4jxl] {
    font-family: var(--font-headline);
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--on-surface);
    margin-bottom: 0.75rem;
    line-height: 1.1;
}

.login-subtitle[b-1pyz0j4jxl] {
    color: var(--on-surface-variant);
    line-height: 1.6;
    font-size: 1rem;
}

/* ── Card ── */
.login-card[b-1pyz0j4jxl] {
    background-color: var(--bg-secondary);
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 12px 40px 0 rgba(27, 28, 25, 0.06);
    border: 1px solid color-mix(in srgb, white 50%, transparent);
}

/* ── Form ── */
.login-form[b-1pyz0j4jxl] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.login-field[b-1pyz0j4jxl] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.login-label[b-1pyz0j4jxl] {
    font-family: var(--font-label);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
    margin-left: 0.25rem;
}

.login-input[b-1pyz0j4jxl] {
    width: 100%;
    height: 3.5rem;
    padding: 0 1.25rem;
    background-color: var(--surface-container);
    border: none;
    border-radius: 0.75rem;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--on-surface);
    outline: none;
    transition: box-shadow var(--transition-base);
}

.login-input[b-1pyz0j4jxl]::placeholder {
    color: color-mix(in srgb, var(--on-surface-variant) 30%, transparent);
}

.login-input:focus[b-1pyz0j4jxl] {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 30%, transparent);
}

/* ── Error ── */
.login-error[b-1pyz0j4jxl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
    background-color: var(--severity-critical-bg);
    color: var(--severity-critical);
    font-size: 0.75rem;
    font-weight: 500;
    animation: login-shake-b-1pyz0j4jxl 0.3s ease-in-out;
}

.login-error-icon[b-1pyz0j4jxl] {
    font-size: 1rem;
    flex-shrink: 0;
}

@keyframes login-shake-b-1pyz0j4jxl {
    0%, 100% { transform: translateX(0); }
    20%       { transform: translateX(-6px); }
    40%       { transform: translateX(6px); }
    60%       { transform: translateX(-4px); }
    80%       { transform: translateX(4px); }
}

/* ── Submit button ── */
.login-submit[b-1pyz0j4jxl] {
    width: 100%;
    height: 3.5rem;
    margin-top: 0.5rem;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
    color: white;
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 1rem;
    border-radius: 0.75rem;
    border: none;
    cursor: pointer;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 25%, transparent);
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.login-submit:hover:not(:disabled)[b-1pyz0j4jxl] {
    background: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary-dark) 100%);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--primary) 35%, transparent);
    transform: translateY(-1px);
}

.login-submit:active:not(:disabled)[b-1pyz0j4jxl] {
    transform: scale(0.97);
}

.login-submit:disabled[b-1pyz0j4jxl] {
    opacity: 0.7;
    cursor: not-allowed;
}

.login-submit-icon[b-1pyz0j4jxl] {
    font-size: 1rem;
}

.login-link[b-1pyz0j4jxl] {
    align-self: center;
    color: var(--primary);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}

/* ── Loading spinner ── */
.login-spinner[b-1pyz0j4jxl] {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-1pyz0j4jxl 0.6s linear infinite;
    flex-shrink: 0;
}

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

/* ── Footer ── */
.login-footer[b-1pyz0j4jxl] {
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    opacity: 0.4;
}

.login-footer-label[b-1pyz0j4jxl] {
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
}

.login-footer-divider[b-1pyz0j4jxl] {
    height: 1px;
    width: 3rem;
    background-color: var(--on-surface-variant);
}

/* ── Decoraciones de fondo ── */
.login-deco-right[b-1pyz0j4jxl] {
    position: fixed;
    top: 0;
    right: 0;
    width: 33%;
    height: 100%;
    background: linear-gradient(to left, color-mix(in srgb, var(--surface-container) 30%, transparent), transparent);
    z-index: -1;
    pointer-events: none;
}

.login-deco-glow[b-1pyz0j4jxl] {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 24rem;
    height: 24rem;
    background-color: color-mix(in srgb, var(--primary) 5%, transparent);
    filter: blur(120px);
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
}

.brand-logo-picture[b-1pyz0j4jxl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    
}

.brand-logo[b-1pyz0j4jxl] {
    height: 80px;
    width: auto;
    display: block;
    margin: 0 auto;
}
/* /Pages/Notificaciones.razor.rz.scp.css */
/* Todos los estilos compartidos (page-wrapper, container, page-header, title,
   action-bar, filter-bar, filter-drawer, table, pagination, alert-cards,
   empty-state, error-state) se encuentran en app.css */

@media (min-width: 1280px) {
    .filter-bar[b-coknb18vey] {
        grid-template-columns: 2fr repeat(3, 1fr) repeat(2, 9rem) auto auto;
    }
}

/* ── Bookmark button ── */
.btn-icon[b-coknb18vey] {
    cursor: pointer;
}

.push-activation-banner[b-coknb18vey] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
    border-radius: 1rem;
    border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--outline-variant));
    background: color-mix(in srgb, var(--primary-light) 62%, var(--bg));
    box-shadow: var(--shadow-sm);
}

.push-activation-banner__content[b-coknb18vey] {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    min-width: 0;
}

.push-activation-banner__icon[b-coknb18vey] {
    color: var(--primary);
    font-size: 1.5rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.push-activation-banner__text[b-coknb18vey] {
    min-width: 0;
}

.push-activation-banner__title[b-coknb18vey] {
    margin: 0 0 0.2rem;
    color: var(--on-surface);
    font-family: var(--font-headline);
    font-size: 0.98rem;
    font-weight: 800;
}

.push-activation-banner__subtitle[b-coknb18vey] {
    margin: 0;
    color: var(--on-surface-variant);
    font-size: 0.82rem;
    line-height: 1.45;
}

.push-activation-banner__action[b-coknb18vey] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.72rem 1rem;
    border: none;
    border-radius: 9999px;
    background: var(--primary);
    color: var(--on-primary);
    font-family: var(--font-label);
    font-size: 0.8rem;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: var(--shadow-md);
}

.push-activation-banner__action:disabled[b-coknb18vey] {
    opacity: 0.7;
    cursor: not-allowed;
}

.error-state--inline[b-coknb18vey] {
    margin-bottom: 1rem;
}

.ignore-hint[b-coknb18vey] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    border-radius: 1rem;
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--outline-variant));
    background: color-mix(in srgb, var(--surface-container) 72%, var(--bg));
}

.ignore-hint__icon[b-coknb18vey] {
    color: var(--on-surface-variant);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.ignore-hint__text[b-coknb18vey] {
    color: var(--on-surface-variant);
    font-size: 0.8rem;
    line-height: 1.45;
    flex: 1 1 auto;
}

.ignore-hint__link[b-coknb18vey] {
    color: var(--primary);
    font-family: var(--font-label);
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.ignore-hint__link:hover[b-coknb18vey] {
    text-decoration: underline;
}

.ignore-hint__button[b-coknb18vey] {
    background: none;
    border: none;
    cursor: pointer;
}

/* ── Bookmark guardada: icono negro (relleno) cuando está guardada ── */
.btn-icon--saved[b-coknb18vey],
.btn-icon--saved .material-symbols-outlined[b-coknb18vey] {
    color: var(--on-surface);
}

.icon-filled[b-coknb18vey] {
    font-variation-settings: 'FILL' 1;
}

.btn-clear-filter-inline[b-coknb18vey] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4rem 0.85rem;
    border-radius: 9999px;
    border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--outline-variant));
    background: color-mix(in srgb, var(--primary) 8%, transparent);
    color: var(--primary);
    font-family: var(--font-label);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
}

.btn-clear-filter-inline .material-symbols-outlined[b-coknb18vey] {
    font-size: 1rem;
}

.btn-ignore-manager[b-coknb18vey] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.85rem;
    border-radius: 9999px;
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--outline-variant));
    background: var(--surface-container);
    color: var(--on-surface);
    font-family: var(--font-label);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
}

.btn-ignore-manager .material-symbols-outlined[b-coknb18vey] {
    font-size: 1rem;
}

.btn-ignore-manager--active[b-coknb18vey] {
    background: color-mix(in srgb, var(--primary-light) 62%, var(--bg));
    color: var(--primary-dark);
    border-color: color-mix(in srgb, var(--primary) 26%, var(--outline-variant));
}

.btn-ignore-manager--drawer[b-coknb18vey] {
    display: none;
    width: 100%;
    justify-content: center;
}

.btn-ignore-manager--desktop[b-coknb18vey] {
    display: inline-flex;
}

.table-row-actions[b-coknb18vey],
.alert-card-actions[b-coknb18vey] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.btn-icon--ignore[b-coknb18vey] {
    color: var(--on-surface-variant);
}

.btn-icon--ignore:hover[b-coknb18vey] {
    color: var(--primary);
}

.empty-state-link-button[b-coknb18vey] {
    margin-top: 0.5rem;
    border: none;
    background: none;
    color: var(--primary);
    font-family: var(--font-label);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}

.ignore-panel-backdrop[b-coknb18vey],
.ignore-confirm-backdrop[b-coknb18vey] {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(15, 23, 42, 0.38);
    backdrop-filter: blur(4px);
}

.ignore-panel[b-coknb18vey] {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    width: min(28rem, calc(100vw - 2rem));
    max-height: min(70vh, 42rem);
    z-index: 91;
    border-radius: 1.25rem;
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--outline-variant));
    background: var(--bg);
    box-shadow: var(--shadow-lg);
    transform: translateY(calc(100% + 2rem));
    opacity: 0;
    pointer-events: none;
    transition: transform 180ms ease, opacity 180ms ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ignore-panel--open[b-coknb18vey] {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.ignore-panel__handle[b-coknb18vey] {
    width: 3rem;
    height: 0.3rem;
    border-radius: 9999px;
    background: var(--outline-variant);
    margin: 0.7rem auto 0;
}

.ignore-panel__header[b-coknb18vey] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem 0.9rem;
}

.ignore-panel__title[b-coknb18vey] {
    margin: 0 0 0.2rem;
    color: var(--on-surface);
    font-family: var(--font-headline);
    font-size: 1rem;
    font-weight: 800;
}

.ignore-panel__subtitle[b-coknb18vey] {
    margin: 0;
    color: var(--on-surface-variant);
    font-size: 0.8rem;
    line-height: 1.45;
}

.ignore-panel__close[b-coknb18vey] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--outline-variant);
    border-radius: 9999px;
    background: var(--surface-container);
    color: var(--on-surface);
    cursor: pointer;
}

.ignore-panel__body[b-coknb18vey] {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 0 1.1rem 1.1rem;
    overflow: auto;
}

.ignore-rule-card[b-coknb18vey] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    padding: 0.95rem 1rem;
    border-radius: 1rem;
    border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--outline-variant));
    background: color-mix(in srgb, var(--surface-container) 78%, var(--bg));
}

.ignore-rule-card__info[b-coknb18vey] {
    min-width: 0;
}

.ignore-rule-card__title-row[b-coknb18vey] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.2rem;
}

.ignore-rule-card__icon[b-coknb18vey] {
    font-size: 1rem;
    color: var(--primary);
}

.ignore-rule-card__app[b-coknb18vey] {
    color: var(--on-surface);
    font-family: var(--font-headline);
    font-size: 0.92rem;
    font-weight: 700;
}

.ignore-rule-card__meta[b-coknb18vey] {
    margin: 0 0 0.5rem;
    color: var(--on-surface-variant);
    font-size: 0.78rem;
}

.ignore-rule-card__badge[b-coknb18vey] {
    display: inline-flex;
    align-items: center;
    padding: 0.32rem 0.7rem;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary-dark);
    font-family: var(--font-label);
    font-size: 0.72rem;
    font-weight: 700;
}

.ignore-rule-card__remove[b-coknb18vey] {
    border: none;
    border-radius: 9999px;
    background: var(--severity-critical-bg);
    color: var(--severity-critical);
    font-family: var(--font-label);
    font-size: 0.76rem;
    font-weight: 800;
    padding: 0.55rem 0.9rem;
    cursor: pointer;
    white-space: nowrap;
}

.ignore-panel__empty[b-coknb18vey] {
    display: grid;
    place-items: center;
    gap: 0.55rem;
    padding: 1.3rem 0.4rem 0.6rem;
    text-align: center;
    color: var(--on-surface-variant);
    font-size: 0.82rem;
    line-height: 1.5;
}

.ignore-panel__empty .material-symbols-outlined[b-coknb18vey] {
    font-size: 1.5rem;
}

.ignore-confirm-card[b-coknb18vey] {
    position: fixed;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    width: min(26rem, calc(100vw - 2rem));
    z-index: 92;
    border-radius: 1.15rem;
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--outline-variant));
    background: var(--bg);
    box-shadow: var(--shadow-lg);
    padding: 1.5rem;
    text-align: center;
}

.ignore-confirm-card__icon[b-coknb18vey] {
    display: block;
    margin-bottom: 0.85rem;
    color: var(--primary);
    font-size: 2rem;
}

.ignore-confirm-card__title[b-coknb18vey] {
    margin: 0 0 0.45rem;
    color: var(--on-surface);
    font-family: var(--font-headline);
    font-size: 1.08rem;
    font-weight: 800;
}

.ignore-confirm-card__message[b-coknb18vey] {
    margin: 0;
    color: var(--on-surface-variant);
    font-size: 0.86rem;
    line-height: 1.55;
}

.ignore-confirm-card__note[b-coknb18vey] {
    margin: 0.85rem 0 0;
    padding: 0.8rem 0.9rem;
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--primary-light) 58%, var(--bg));
    color: var(--primary-dark);
    font-size: 0.8rem;
    line-height: 1.5;
    font-weight: 700;
}

.ignore-confirm-card__actions[b-coknb18vey] {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.ignore-confirm-card__cancel[b-coknb18vey],
.ignore-confirm-card__confirm[b-coknb18vey] {
    flex: 1;
    border-radius: 0.75rem;
    padding: 0.72rem 0.9rem;
    font-family: var(--font-label);
    font-size: 0.84rem;
    font-weight: 800;
    cursor: pointer;
}

.ignore-confirm-card__cancel[b-coknb18vey] {
    border: 1px solid var(--outline-variant);
    background: var(--surface-container);
    color: var(--on-surface);
}

.ignore-confirm-card__confirm[b-coknb18vey] {
    border: none;
    background: var(--primary);
    color: var(--on-primary);
}

.ignore-confirm-card__cancel:disabled[b-coknb18vey],
.ignore-confirm-card__confirm:disabled[b-coknb18vey] {
    opacity: 0.6;
    cursor: not-allowed;
}

.ignore-toast[b-coknb18vey] {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    transform: translateX(-50%);
    z-index: 93;
    width: min(34rem, calc(100vw - 1.5rem));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    border-radius: 1rem;
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--outline-variant));
    background: color-mix(in srgb, var(--surface-container) 88%, var(--bg));
    box-shadow: var(--shadow-lg);
}

.ignore-toast__content[b-coknb18vey] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.ignore-toast__icon[b-coknb18vey] {
    color: var(--primary);
    font-size: 1.15rem;
    flex-shrink: 0;
}

.ignore-toast__message[b-coknb18vey] {
    color: var(--on-surface);
    font-size: 0.82rem;
    line-height: 1.45;
}

.ignore-toast__actions[b-coknb18vey] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.ignore-toast__undo[b-coknb18vey],
.ignore-toast__close[b-coknb18vey] {
    border: none;
    background: none;
    color: var(--primary);
    cursor: pointer;
}

.ignore-toast__undo[b-coknb18vey] {
    font-family: var(--font-label);
    font-size: 0.8rem;
    font-weight: 800;
}

.ignore-toast__close[b-coknb18vey] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 767px) {
    .action-bar-left[b-coknb18vey] {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding-left: 0;
    }

    .push-activation-banner[b-coknb18vey] {
        flex-direction: column;
        align-items: stretch;
    }

    .ignore-hint[b-coknb18vey] {
        flex-wrap: wrap;
    }

    .push-activation-banner__action[b-coknb18vey] {
        width: 100%;
    }

    .btn-clear-filter-inline[b-coknb18vey] {
        display: none;
    }

    .btn-ignore-manager--desktop[b-coknb18vey] {
        display: none;
    }

    .btn-ignore-manager--drawer[b-coknb18vey] {
        display: inline-flex;
        min-height: 2.5rem;
    }

    .btn-ignore-manager span:last-child[b-coknb18vey] {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .btn-filter-mobile[b-coknb18vey] {
        margin-left: auto;
    }

    .ignore-panel[b-coknb18vey] {
        left: 0.75rem;
        right: 0.75rem;
        top: 50%;
        bottom: auto;
        width: auto;
        max-height: min(78dvh, calc(100dvh - var(--app-top-offset) - 1.5rem));
        border-radius: 1.25rem;
        transform: translateY(120dvh);
    }

    .ignore-panel__handle[b-coknb18vey] {
        display: none;
    }

    .ignore-panel--open[b-coknb18vey] {
        transform: translateY(-50%);
    }

    .ignore-panel__body[b-coknb18vey] {
        padding-bottom: 1rem;
    }

    .ignore-rule-card[b-coknb18vey] {
        align-items: flex-start;
        flex-direction: column;
    }

    .ignore-rule-card__remove[b-coknb18vey] {
        width: 100%;
    }

    .ignore-confirm-backdrop[b-coknb18vey] {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        padding: 1rem 1rem calc(4rem + env(safe-area-inset-bottom, 0px) + 1rem);
    }

    .ignore-confirm-card[b-coknb18vey] {
        position: relative;
        inset: auto;
        transform: none;
        width: min(30rem, 100%);
        max-height: min(72dvh, calc(100dvh - var(--app-top-offset) - 4rem - env(safe-area-inset-bottom, 0px) - 2rem));
        overflow: auto;
    }

    .ignore-confirm-card__actions[b-coknb18vey],
    .ignore-toast[b-coknb18vey] {
        flex-direction: column;
        align-items: stretch;
    }

    .ignore-toast[b-coknb18vey] {
        left: 0.75rem;
        right: 0.75rem;
        bottom: calc(4rem + env(safe-area-inset-bottom, 0px) + 0.75rem);
        width: auto;
        transform: none;
    }

    .ignore-toast__actions[b-coknb18vey] {
        justify-content: space-between;
    }
}

@media (max-width: 767px) and (max-height: 780px) {
    .ignore-panel[b-coknb18vey] {
        max-height: min(84dvh, calc(100dvh - var(--app-top-offset) - 1rem));
    }

    .ignore-confirm-backdrop[b-coknb18vey] {
        align-items: center;
        padding: 0.75rem;
    }

    .ignore-confirm-card[b-coknb18vey] {
        max-height: calc(100dvh - var(--app-top-offset) - 1.5rem);
    }

    .ignore-toast[b-coknb18vey] {
        left: 0.5rem;
        right: 0.5rem;
        bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
    }
}
/* /Pages/OlvidePassword.razor.rz.scp.css */
.recover-page[b-cznqp9eepi] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface-container) 100%);
}

.recover-header[b-cznqp9eepi] {
    display: flex;
    justify-content: center;
    padding: 2rem 1.5rem 0;
}

.recover-brand[b-cznqp9eepi] {
    display: flex;
    justify-content: center;
}

.recover-main[b-cznqp9eepi] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem 3rem;
}

.recover-card[b-cznqp9eepi] {
    width: 100%;
    max-width: 460px;
    background: var(--bg-secondary);
    border: 1px solid var(--outline-variant);
    border-radius: 1.25rem;
    padding: 2rem;
    box-shadow: 0 20px 45px rgba(27, 28, 25, 0.08);
}

.recover-copy[b-cznqp9eepi] {
    margin-bottom: 1.5rem;
}

.recover-title[b-cznqp9eepi] {
    margin: 0 0 0.75rem;
    font-family: var(--font-headline);
    font-size: 2rem;
    font-weight: 800;
    color: var(--on-surface);
}

.recover-subtitle[b-cznqp9eepi] {
    margin: 0;
    color: var(--on-surface-variant);
    line-height: 1.6;
}

.recover-banner[b-cznqp9eepi] {
    margin-bottom: 1rem;
    padding: 0.875rem 1rem;
    border-radius: 0.875rem;
    font-size: 0.9rem;
    line-height: 1.5;
}

.recover-banner-success[b-cznqp9eepi] {
    background: var(--info-bg);
    color: var(--info);
}

.recover-banner-error[b-cznqp9eepi] {
    background: var(--severity-critical-bg);
    color: var(--severity-critical);
}

.recover-form[b-cznqp9eepi] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.recover-label[b-cznqp9eepi] {
    font-family: var(--font-label);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
}

.recover-input[b-cznqp9eepi] {
    height: 3.5rem;
    padding: 0 1rem;
    border: 1px solid var(--outline-variant);
    border-radius: 0.875rem;
    background: var(--surface);
    color: var(--on-surface);
    font-size: 0.95rem;
    outline: none;
}

.recover-input:focus[b-cznqp9eepi] {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

.recover-submit[b-cznqp9eepi] {
    height: 3.5rem;
    margin-top: 0.5rem;
    border: none;
    border-radius: 0.875rem;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
    color: var(--on-primary);
    font-family: var(--font-headline);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}

.recover-link[b-cznqp9eepi] {
    display: inline-flex;
    margin-top: 1.25rem;
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}
/* /Pages/Perfil.razor.rz.scp.css */
/* loading-container, error-container, icon-error-large, text-error-msg,
   page-header, page-title, page-subtitle, search-wrapper, search-icon,
   input-search, banner-success, banner-error, btn-secondary → app.css */

/* --- Layout Principal --- */
.container-suscripciones[b-0muzgzyxmm] {
    padding: 6.5rem 1.5rem 3rem;
    max-width: 64rem;
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 8rem;
}

@media (min-width: 768px) {
    .container-suscripciones[b-0muzgzyxmm] {
        padding-top: 5rem;
        padding-left: 2rem;
        padding-right: 2rem;
    }
}


/* --- Botones scoped --- */
.btn-primary[b-0muzgzyxmm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background-color: var(--primary);
    color: var(--on-primary);
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-label);
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
    white-space: nowrap;
}

.btn-primary:hover:not(:disabled)[b-0muzgzyxmm] {
    background-color: var(--primary-hover);
    box-shadow: var(--shadow-lg);
}

.btn-primary:disabled[b-0muzgzyxmm] {
    filter: grayscale(0.4);
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-icon-small[b-0muzgzyxmm] {
    font-size: 1rem;
}

.btn-descartar[b-0muzgzyxmm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background-color: var(--surface-container);
    color: var(--on-surface-variant);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-md);
    font-family: var(--font-label);
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.btn-descartar:hover:not(:disabled)[b-0muzgzyxmm] {
    background-color: color-mix(in srgb, var(--primary) 10%, transparent);
    border-color: var(--primary);
    color: var(--primary);
}

.btn-descartar:disabled[b-0muzgzyxmm] {
    opacity: 0.5;
    cursor: not-allowed;
}

.device-toggle-only[b-0muzgzyxmm] {
    display: flex;
    justify-content: center;
    padding: 0.5rem 0 0.25rem;
}

.device-toggle-only-button[b-0muzgzyxmm] {
    width: 100%;
    max-width: 26rem;
    justify-content: center;
}

/* --- Permisos por dispositivo --- */
.device-permissions-card[b-0muzgzyxmm] {
    background-color: var(--bg);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.device-permissions-header[b-0muzgzyxmm] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.device-permissions-title-row[b-0muzgzyxmm] {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    flex: 1 1 auto;
}

.device-permissions-icon[b-0muzgzyxmm] {
    font-size: 1.4rem;
    color: var(--primary);
    margin-top: 0.1rem;
    flex-shrink: 0;
}

.device-permissions-title[b-0muzgzyxmm] {
    font-family: var(--font-headline);
    font-size: 1rem;
    font-weight: 700;
    color: var(--on-surface);
    margin: 0 0 0.2rem 0;
}

.device-permissions-subtitle[b-0muzgzyxmm],
.device-permissions-description[b-0muzgzyxmm],
.device-permissions-hint[b-0muzgzyxmm] {
    font-size: 0.8rem;
    color: var(--on-surface-variant);
    margin: 0;
    line-height: 1.5;
}

.device-permissions-toggle[b-0muzgzyxmm] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-full);
    background: var(--surface-container);
    color: var(--on-surface);
    font-family: var(--font-label);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.45rem 0.8rem;
    cursor: pointer;
    transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast);
}

.device-permissions-toggle:hover[b-0muzgzyxmm] {
    border-color: var(--primary);
    color: var(--primary);
}

.device-permissions-body[b-0muzgzyxmm] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.device-status-row[b-0muzgzyxmm] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.device-status-chip[b-0muzgzyxmm] {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-full);
    background: var(--primary-light);
    color: var(--primary-dark);
    border: 1px solid rgba(245, 158, 11, 0.3);
    font-family: var(--font-label);
    font-size: 0.72rem;
    font-weight: 700;
}

.device-status-chip--secondary[b-0muzgzyxmm] {
    background: var(--surface-container);
    color: var(--on-surface-variant);
    border-color: var(--outline-variant);
}

.device-permissions-actions[b-0muzgzyxmm] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.device-permissions-card--success[b-0muzgzyxmm] {
    border-color: rgba(16, 185, 129, 0.35);
    background: color-mix(in srgb, var(--success-bg) 45%, var(--bg));
}

.device-permissions-card--warning[b-0muzgzyxmm] {
    border-color: rgba(245, 158, 11, 0.35);
    background: color-mix(in srgb, var(--primary-light) 55%, var(--bg));
}

.device-permissions-card--danger[b-0muzgzyxmm] {
    border-color: rgba(239, 68, 68, 0.35);
    background: color-mix(in srgb, var(--severity-critical-bg) 65%, var(--bg));
}

.device-permissions-card--neutral[b-0muzgzyxmm] {
    background: color-mix(in srgb, var(--surface-container) 75%, var(--bg));
}


/* --- Sección Horarios de Silencio --- */
.horarios-silencio[b-0muzgzyxmm] {
    background-color: var(--bg);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.horarios-section-header[b-0muzgzyxmm] {
    margin-bottom: 1.25rem;
}

.horarios-title-row[b-0muzgzyxmm] {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
}

.horarios-icon[b-0muzgzyxmm] {
    font-size: 1.4rem;
    color: var(--primary);
    margin-top: 0.1rem;
    flex-shrink: 0;
}

.horarios-title[b-0muzgzyxmm] {
    font-family: var(--font-headline);
    font-size: 1rem;
    font-weight: 700;
    color: var(--on-surface);
    margin: 0 0 0.2rem 0;
}

.horarios-subtitle[b-0muzgzyxmm] {
    font-size: 0.8rem;
    color: var(--on-surface-variant);
    margin: 0;
    line-height: 1.4;
}

/* Tags de horarios activos */
.horarios-grid[b-0muzgzyxmm] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.horario-tag[b-0muzgzyxmm] {
    display: flex;
    align-items: center;
    background: var(--surface-container);
    border: 1px solid var(--outline-variant);
    padding: 0.35rem 0.625rem;
    border-radius: var(--radius-full);
    gap: 0.4rem;
    white-space: nowrap;
    white-space: nowrap;
}

.tag-icon[b-0muzgzyxmm] {
    font-size: 1rem;
    color: var(--primary);
}

.tag-text[b-0muzgzyxmm] {
    font-family: var(--font-label);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--on-surface);
    white-space: nowrap;
    white-space: nowrap;
}

.btn-remove-horario[b-0muzgzyxmm] {
    border: none;
    background: none;
    color: var(--on-surface-variant);
    cursor: pointer;
    display: flex;
    padding: 2px;
    border-radius: 50%;
    line-height: 1;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.btn-remove-horario span[b-0muzgzyxmm] {
    font-size: 1rem;
}

.btn-remove-horario:hover[b-0muzgzyxmm] {
    background: var(--severity-critical-bg);
    color: var(--severity-critical);
}

.horarios-empty[b-0muzgzyxmm] {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
    margin-bottom: 1.25rem;
}

/* Formulario añadir horario */
.horario-add-controls[b-0muzgzyxmm] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--outline-variant);
}

.time-group[b-0muzgzyxmm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.time-group > label[b-0muzgzyxmm] {
    font-family: var(--font-label);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    align-self: flex-start;
}

.time-group > .tp-inline[b-0muzgzyxmm],
.time-group > .tp-colon-inline[b-0muzgzyxmm] {
    /* fila interna: spinner + separador */
}

/* fila de los dos spinners + separador */
.time-group-row[b-0muzgzyxmm] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* ── Time picker inline (spinner visible siempre) ── */

.tp-inline[b-0muzgzyxmm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
}

.tp-arrow-inline[b-0muzgzyxmm] {
    background: none;
    border: none;
    color: var(--on-surface-variant);
    cursor: pointer;
    padding: 0;
    display: flex;
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast);
    line-height: 1;
}

.tp-arrow-inline:hover[b-0muzgzyxmm] {
    color: var(--primary);
}

.tp-arrow-inline .material-symbols-outlined[b-0muzgzyxmm] {
    font-size: 1.1rem;
}

.tp-digit-btn[b-0muzgzyxmm] {
    background: var(--surface-container);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-sm);
    color: var(--on-surface);
    font-family: var(--font-label);
    font-size: 1.1rem;
    font-weight: 700;
    padding: 0.25rem 0.5rem;
    min-width: 2.4rem;
    text-align: center;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.tp-digit-btn:hover[b-0muzgzyxmm] {
    border-color: var(--primary);
    color: var(--primary);
}

.tp-digit-btn--active[b-0muzgzyxmm] {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
}

.tp-colon-inline[b-0muzgzyxmm] {
    font-family: var(--font-label);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--on-surface-variant);
    line-height: 1;
    margin-bottom: 0.1rem;
    user-select: none;
}

/* ── Time picker overlay + modal ── */
.tp-overlay[b-0muzgzyxmm] {
    position: fixed;
    inset: 0;
    z-index: 200;
}

.tp-modal[b-0muzgzyxmm] {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 201;
    background: var(--bg);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 1.25rem;
    width: min(280px, 90vw);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Grid de números ── */
.tp-grid[b-0muzgzyxmm] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.375rem;
}

.tp-grid--min[b-0muzgzyxmm] {
    grid-template-columns: repeat(4, 1fr);
}

.tp-cell[b-0muzgzyxmm] {
    background: color-mix(in srgb, var(--on-surface) 5%, transparent);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--on-surface);
    font-family: var(--font-label);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.6rem 0;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.tp-cell:hover[b-0muzgzyxmm] {
    background: color-mix(in srgb, var(--primary) 15%, transparent);
    color: var(--primary);
}

.tp-cell--active[b-0muzgzyxmm] {
    background: var(--primary);
    color: var(--on-primary);
}

.tp-cell--active:hover[b-0muzgzyxmm] {
    background: var(--primary-hover);
    color: var(--on-primary);
}

/* ── Botón cerrar ── */
.tp-close[b-0muzgzyxmm] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    background: none;
    border: none;
    color: var(--on-surface-variant);
    font-family: var(--font-label);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast);
}

.tp-close:hover[b-0muzgzyxmm] {
    color: var(--severity-critical);
}

.tp-close .material-symbols-outlined[b-0muzgzyxmm] {
    font-size: 1rem;
}

    .btn-time[b-0muzgzyxmm] {
        align-items: flex-end;
        display: flex; /* Mantén el flex para el contenido interno */
        margin-bottom: 1rem;
        justify-content: center;
    }


.btn-add-time[b-0muzgzyxmm] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background-color: var(--primary);
    color: var(--on-primary);
    border: none;
    height: 2.5rem;
    padding: 0 1rem;
    border-radius: var(--radius-md);
    font-family: var(--font-label);
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
    transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.btn-add-time:hover:not(:disabled)[b-0muzgzyxmm] {
    background-color: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-add-time:disabled[b-0muzgzyxmm] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --- Sección Suscripciones --- */
.suscripciones-section[b-0muzgzyxmm] {
    background-color: var(--bg);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.suscripciones-section-header[b-0muzgzyxmm] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.suscripciones-title-row[b-0muzgzyxmm] {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    flex: 1 1 auto;
    min-width: 0;
}

.suscripciones-icon[b-0muzgzyxmm] {
    font-size: 1.4rem;
    color: var(--primary);
    margin-top: 0.1rem;
    flex-shrink: 0;
}

.suscripciones-title[b-0muzgzyxmm] {
    font-family: var(--font-headline);
    font-size: 1rem;
    font-weight: 700;
    color: var(--on-surface);
    margin: 0 0 0.2rem 0;
}

.suscripciones-subtitle[b-0muzgzyxmm] {
    font-size: 0.8rem;
    color: var(--on-surface-variant);
    margin: 0;
    line-height: 1.4;
}

.suscripciones-actions[b-0muzgzyxmm] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
}


/* --- Barra de Filtros --- */
.filter-bar[b-0muzgzyxmm] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.search-wrapper[b-0muzgzyxmm] {
    flex: 1 1 auto;
    min-width: 8rem;
}

@media (min-width: 640px) {
    .search-wrapper[b-0muzgzyxmm] {
        flex: 0 0 18rem;
        width: 18rem;
    }
}

.select-wrapper[b-0muzgzyxmm] {
    position: relative;
}

.select-custom[b-0muzgzyxmm] {
    padding: 0.55rem 1.5rem 0.55rem 0.875rem;
    background-color: var(--surface-container);
    border-radius: var(--radius-md);
    border: 1px solid var(--outline-variant);
    cursor: pointer;
    font-family: var(--font-label);
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--on-surface);
    transition: border-color var(--transition-fast);
}

.select-custom:focus[b-0muzgzyxmm] {
    outline: none;
    border-color: var(--primary);
}

/* --- Lista y Cards de apps --- */
.apps-list[b-0muzgzyxmm] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.app-card[b-0muzgzyxmm] {
    background: var(--bg);
    padding: 1rem 1.25rem;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    cursor: pointer;
    border: 1px solid var(--outline-variant);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast), border-color var(--transition-base), box-shadow var(--transition-base);
    user-select: none;
    flex-wrap: wrap;
}

.app-card:hover[b-0muzgzyxmm] {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.app-card.is-active[b-0muzgzyxmm] {
    border-color: rgba(245, 158, 11, 0.35);
    background-color: var(--primary-light);
}

.app-card.is-ignored[b-0muzgzyxmm] {
    border-color: rgba(239, 68, 68, 0.28);
    background-color: color-mix(in srgb, var(--severity-critical-bg) 45%, var(--bg));
}

.app-main-info[b-0muzgzyxmm] {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
    flex: 0 1 auto;
    max-width: min(26rem, 100%);
}

.app-text-content[b-0muzgzyxmm] {
    min-width: 0;
    flex: 0 1 auto;
}

.icon-box[b-0muzgzyxmm] {
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-container);
    color: var(--on-surface-variant);
    border-radius: 0.625rem;
    flex-shrink: 0;
    transition: background-color var(--transition-base), color var(--transition-base);
}

.icon-box.active[b-0muzgzyxmm] {
    background: var(--primary-light);
    color: var(--primary-dark);
}

.icon-box-danger[b-0muzgzyxmm] {
    background: var(--severity-critical-bg);
    color: var(--severity-critical);
}

.app-name[b-0muzgzyxmm] {
    font-family: var(--font-label);
    font-size: 0.9rem;
    font-weight: 700;
    margin: 0 0 0.1rem;
    color: var(--on-surface);
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: anywhere;
}

.app-client[b-0muzgzyxmm] {
    font-size: 0.775rem;
    margin: 0;
    color: var(--on-surface-variant);
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-status-area[b-0muzgzyxmm] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    min-width: 0;
    flex: 1 1 18rem;
    justify-content: flex-end;
}

.save-dock[b-0muzgzyxmm] {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    z-index: 60;
}

.save-dock-content[b-0muzgzyxmm] {
    max-width: 64rem;
    margin: 0 auto;
    background: color-mix(in srgb, var(--bg) 92%, var(--primary-light));
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--outline-variant));
    border-radius: 1rem;
    box-shadow: var(--shadow-lg);
    padding: 0.95rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.save-dock-text[b-0muzgzyxmm] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.save-dock-title[b-0muzgzyxmm] {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--on-surface);
}

.save-dock-subtitle[b-0muzgzyxmm] {
    font-size: 0.8rem;
    color: var(--on-surface-variant);
}

.save-dock-actions[b-0muzgzyxmm] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* --- Badges --- */
.badge[b-0muzgzyxmm] {
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-full);
    font-family: var(--font-label);
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.badge-success[b-0muzgzyxmm] {
    background: var(--success-bg);
    color: var(--success);
    border: 1px solid rgba(110, 231, 183, 0.45);
}

.badge-neutral[b-0muzgzyxmm] {
    background: var(--surface-container);
    color: var(--on-surface-variant);
    border: 1px solid var(--outline-variant);
    opacity: 0.75;
}

.badge-warning[b-0muzgzyxmm] {
    background: var(--primary-light);
    color: var(--primary-dark);
    border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
}

.badge-danger[b-0muzgzyxmm] {
    background: var(--severity-critical-bg);
    color: var(--severity-critical);
    border: 1px solid color-mix(in srgb, var(--severity-critical) 30%, transparent);
}

.ignore-summary[b-0muzgzyxmm] {
    display: flex;
    align-items: center;
    margin-left: auto;
}

/* --- Nivel Pills --- */
.nivel-pills[b-0muzgzyxmm] {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
}

.nivel-pill[b-0muzgzyxmm] {
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-full);
    font-family: var(--font-label);
    font-size: 0.7rem;
    font-weight: 700;
    border: 1px solid transparent;
    cursor: pointer;
    background: var(--surface-container);
    color: var(--on-surface-variant);
    opacity: 0.5;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
}

.nivel-pill:hover[b-0muzgzyxmm] {
    opacity: 0.85;
}

.nivel-pill.nivel-info.active[b-0muzgzyxmm] {
    background: var(--info-bg);
    color: var(--info);
    border-color: rgba(59, 130, 246, 0.35);
    opacity: 1;
}

.nivel-pill.nivel-warning.active[b-0muzgzyxmm] {
    background: var(--severity-warning-bg);
    color: #92400E;
    border-color: rgba(245, 158, 11, 0.3);
    opacity: 1;
}

.nivel-pill.nivel-error.active[b-0muzgzyxmm] {
    background: var(--severity-error-bg);
    color: var(--primary-dark);
    border-color: rgba(245, 158, 11, 0.5);
    opacity: 1;
}

.nivel-pill.nivel-critical.active[b-0muzgzyxmm] {
    background: var(--severity-critical-bg);
    color: var(--severity-critical);
    border-color: rgba(239, 68, 68, 0.35);
    opacity: 1;
}

/* --- Responsive --- */
@media (max-width: 639px) {
    .app-card[b-0muzgzyxmm] {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .app-main-info[b-0muzgzyxmm] {
        max-width: 100%;
        width: 100%;
    }

    .app-status-area[b-0muzgzyxmm] {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        justify-content: stretch;
        flex: 0 0 auto;
    }

    .nivel-pills[b-0muzgzyxmm] {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .nivel-pill[b-0muzgzyxmm] {
        width: 100%;
        min-width: 0;
        justify-content: center;
        text-align: center;
        padding-inline: 0.4rem;
    }

    .badge[b-0muzgzyxmm] {
        justify-content: center;
        width: 100%;
    }
}

@media (max-width: 767px) {
    .horarios-grid[b-0muzgzyxmm] {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.125rem;
    }

    .horario-tag[b-0muzgzyxmm] {
        flex: 0 0 auto;
        max-width: 100%;
    }

    .horario-add-controls[b-0muzgzyxmm] {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        flex-wrap: nowrap;
        gap: 0.75rem;
    }

    .time-group[b-0muzgzyxmm] {
        flex: 1 1 0;
        min-width: 0;
        align-items: center;
    }

    .time-group-row[b-0muzgzyxmm] {
        justify-content: center;
        flex-wrap: nowrap;
    }

    .btn-time[b-0muzgzyxmm] {
        flex: 0 0 auto;
        display: flex;
        justify-content: center;
        margin-bottom: 0;
    }

    .tp-digit-btn[b-0muzgzyxmm] {
        min-width: 2.15rem;
        padding-inline: 0.35rem;
        font-size: 1rem;
    }

    .btn-add-time[b-0muzgzyxmm] {
        padding-inline: 0.85rem;
        justify-content: center;
    }

    .suscripciones-section-header[b-0muzgzyxmm] {
        flex-direction: column;
    }

    .suscripciones-actions[b-0muzgzyxmm] {
        width: 100%;
        justify-content: flex-end;
    }

    .save-dock-content[b-0muzgzyxmm] {
        flex-direction: column;
        align-items: stretch;
    }

    .save-dock-actions[b-0muzgzyxmm] {
        width: 100%;
    }

    .save-dock-actions .btn-primary[b-0muzgzyxmm],
    .save-dock-actions .btn-descartar[b-0muzgzyxmm] {
        flex: 1 1 0;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .horario-add-controls[b-0muzgzyxmm] {
        gap: 0.5rem;
    }

    .time-group > label[b-0muzgzyxmm] {
        font-size: 0.65rem;
    }

    .tp-digit-btn[b-0muzgzyxmm] {
        min-width: 2rem;
        padding-inline: 0.3rem;
        font-size: 0.95rem;
    }

    .tp-colon-inline[b-0muzgzyxmm] {
        font-size: 1rem;
    }
}

/* --- Dark mode overrides --- */
.dark-mode .icon-box.active[b-0muzgzyxmm] {
    background-color: rgba(245, 158, 11, 0.15);
    color: #FCD34D;
}

.dark-mode .app-card.is-active[b-0muzgzyxmm] {
    background-color: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.3);
}

.dark-mode .nivel-pill[b-0muzgzyxmm] {
    background: color-mix(in srgb, var(--surface-container) 82%, var(--bg));
    color: #c5ceda;
    border-color: rgba(148, 163, 184, 0.18);
    opacity: 0.75;
}

.dark-mode .nivel-pill:hover[b-0muzgzyxmm] {
    opacity: 0.95;
}

.dark-mode .nivel-pill.nivel-info.active[b-0muzgzyxmm] {
    background: #172554;
    color: #bfdbfe;
    border-color: rgba(96, 165, 250, 0.45);
    box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.08);
}

.dark-mode .nivel-pill.nivel-warning.active[b-0muzgzyxmm] {
    background: #5a4106;
    color: #fde68a;
    border-color: rgba(250, 204, 21, 0.55);
    box-shadow: inset 0 0 0 1px rgba(253, 230, 138, 0.08);
}

.dark-mode .nivel-pill.nivel-error.active[b-0muzgzyxmm] {
    background: #4a1f0b;
    color: #fdba74;
    border-color: rgba(251, 146, 60, 0.5);
    box-shadow: inset 0 0 0 1px rgba(253, 186, 116, 0.08);
}

.dark-mode .nivel-pill.nivel-critical.active[b-0muzgzyxmm] {
    background: #571313;
    color: #fca5a5;
    border-color: rgba(248, 113, 113, 0.5);
    box-shadow: inset 0 0 0 1px rgba(252, 165, 165, 0.08);
}
/* /Pages/PreviewAnimacionTecnosis.razor.rz.scp.css */
.animation-preview-page[b-xyssnqaxlk] {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 2rem;
    background:
        radial-gradient(circle at top, rgba(35, 74, 152, 0.14), transparent 36%),
        linear-gradient(180deg, #f8f4eb 0%, #efe7d7 100%);
}

.animation-preview-shell[b-xyssnqaxlk] {
    width: min(100%, 32rem);
    padding: 2rem;
    border-radius: 2rem;
    background: rgba(255, 255, 255, 0.62);
    box-shadow: 0 24px 60px rgba(17, 24, 39, 0.12);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.animation-preview-shell--wide[b-xyssnqaxlk] {
    width: min(100%, 54rem);
}

.animation-preview-badge[b-xyssnqaxlk] {
    align-self: flex-start;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: rgba(35, 74, 152, 0.1);
    color: #234a98;
    font-family: var(--font-label);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.animation-preview-grid[b-xyssnqaxlk] {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.animation-preview-card[b-xyssnqaxlk] {
    min-width: 0;
    padding: 1.25rem 1rem;
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(35, 74, 152, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.animation-preview-title[b-xyssnqaxlk] {
    color: rgba(17, 24, 39, 0.72);
    font-family: var(--font-label);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.animation-preview-note[b-xyssnqaxlk] {
    max-width: 26rem;
    color: rgba(17, 24, 39, 0.72);
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.5;
    text-align: center;
}

@media (max-width: 640px) {
    .animation-preview-page[b-xyssnqaxlk] {
        padding: 1rem;
    }

    .animation-preview-shell[b-xyssnqaxlk] {
        padding: 1.25rem;
        border-radius: 1.5rem;
    }

    .animation-preview-grid[b-xyssnqaxlk] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/ResetPassword.razor.rz.scp.css */
.reset-page[b-qitgslsk6k] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface-container) 100%);
}

.reset-header[b-qitgslsk6k] {
    display: flex;
    justify-content: center;
    padding: 2rem 1.5rem 0;
}

.reset-brand[b-qitgslsk6k] {
    display: flex;
    justify-content: center;
}

.reset-main[b-qitgslsk6k] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem 3rem;
}

.reset-card[b-qitgslsk6k] {
    width: 100%;
    max-width: 460px;
    background: var(--bg-secondary);
    border: 1px solid var(--outline-variant);
    border-radius: 1.25rem;
    padding: 2rem;
    box-shadow: 0 20px 45px rgba(27, 28, 25, 0.08);
}

.reset-copy[b-qitgslsk6k] {
    margin-bottom: 1.5rem;
}

.reset-title[b-qitgslsk6k] {
    margin: 0 0 0.75rem;
    font-family: var(--font-headline);
    font-size: 2rem;
    font-weight: 800;
    color: var(--on-surface);
}

.reset-subtitle[b-qitgslsk6k] {
    margin: 0;
    color: var(--on-surface-variant);
    line-height: 1.6;
}

.reset-banner[b-qitgslsk6k] {
    margin-bottom: 1rem;
    padding: 0.875rem 1rem;
    border-radius: 0.875rem;
    font-size: 0.9rem;
    line-height: 1.5;
}

.reset-banner-success[b-qitgslsk6k] {
    background: var(--info-bg);
    color: var(--info);
}

.reset-banner-error[b-qitgslsk6k] {
    background: var(--severity-critical-bg);
    color: var(--severity-critical);
}

.reset-form[b-qitgslsk6k] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.reset-label[b-qitgslsk6k] {
    font-family: var(--font-label);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
}

.reset-input[b-qitgslsk6k] {
    height: 3.5rem;
    padding: 0 1rem;
    border: 1px solid var(--outline-variant);
    border-radius: 0.875rem;
    background: var(--surface);
    color: var(--on-surface);
    font-size: 0.95rem;
    outline: none;
}

.reset-input:focus[b-qitgslsk6k] {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

.reset-submit[b-qitgslsk6k] {
    height: 3.5rem;
    margin-top: 0.5rem;
    border: none;
    border-radius: 0.875rem;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
    color: var(--on-primary);
    font-family: var(--font-headline);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}

.reset-link[b-qitgslsk6k] {
    display: inline-flex;
    margin-top: 1.25rem;
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}