/* /Components/CatcherButton.razor.rz.scp.css */
.catcher-btn[b-n3h25132q8] {
    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;
}

.catcher-btn:disabled[b-n3h25132q8] {
    opacity: 0.6;
    cursor: not-allowed;
}

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

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

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

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

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

.btn-primary:hover:not(:disabled)[b-n3h25132q8] {
    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-n3h25132q8] {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

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

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

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

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

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

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

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

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

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

.btn-text[b-n3h25132q8] {
    display: inline-block;
}

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

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

.input-field[b-rfqj643afc] {
    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-rfqj643afc]::placeholder {
    color: var(--text-muted);
}

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

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

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

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

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

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

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

.dark-mode .input-field:focus[b-rfqj643afc] {
    background-color: var(--bg);
}
/* /Components/ConfirmDialog.razor.rz.scp.css */
.dialog-backdrop[b-svgb0bnddj] {
    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-svgb0bnddj] {
    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-svgb0bnddj] {
    font-size: 3rem;
    color: var(--severity-critical);
    margin-bottom: 1rem;
    display: block;
}

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

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

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

.btn-dialog-cancel[b-svgb0bnddj] {
    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-svgb0bnddj] {
    background-color: color-mix(in srgb, var(--primary) 10%, transparent);
}

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

.btn-dialog-confirm[b-svgb0bnddj] {
    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-svgb0bnddj] {
    opacity: 0.9;
}

.btn-dialog-confirm:disabled[b-svgb0bnddj] {
    opacity: 0.6;
    cursor: not-allowed;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ── App Header ── */
.app-header[b-amcqrrthb7] {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 50;
    background-color: color-mix(in srgb, var(--surface) 85%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    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-amcqrrthb7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1.5rem;
    height: 4rem;
    width: 100%;
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
}

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

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

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

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

@media (min-width: 768px) {
    .header-nav[b-amcqrrthb7] {
        display: flex;
    }
}

.nav-link[b-amcqrrthb7] {
    font-family: var(--font-label);
    font-size: 0.875rem;
    color: color-mix(in srgb, var(--on-surface) 55%, transparent);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.nav-link:hover[b-amcqrrthb7], .nav-link.active[b-amcqrrthb7] {
    color: var(--primary);
}

/* ── Theme Toggle ── */
.theme-toggle[b-amcqrrthb7] {
    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-amcqrrthb7] {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
}

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

/* ── Blazor Error UI ── */
#blazor-error-ui[b-amcqrrthb7] {
    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-amcqrrthb7] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/SeveridadBadge.razor.rz.scp.css */
/* ── Variante tabla (compacta) ── */
.badge-tabla[b-iqfs3kf2dw] {
    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-iqfs3kf2dw] {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background-color: currentColor;
    flex-shrink: 0;
}

/* ── Variante detalle (pill con icono) ── */
.badge-detalle[b-iqfs3kf2dw] {
    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-iqfs3kf2dw] {
    font-size: 0.75rem;
    font-variation-settings: 'FILL' 1;
}

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

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

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

.nivel-info[b-iqfs3kf2dw] {
    background-color: var(--info-bg);
    color: var(--info);
}
/* /Pages/AlertaDetalle.razor.rz.scp.css */
/* ── Error State ── */
.error-wrapper[b-u90g5ulxun] {
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: 6rem;
    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-u90g5ulxun] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    color: var(--severity-critical);
}

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

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

.btn-back-error[b-u90g5ulxun] {
    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-u90g5ulxun] {
    text-decoration: underline;
}

/* ── Page Layout ── */
.page-wrapper[b-u90g5ulxun] {
    font-family: var(--font-body);
    color: var(--on-surface);
    background-color: var(--surface);
    overflow: hidden;
    height: calc(100vh - 4rem);
    margin-top: 4rem;
}

.page-main[b-u90g5ulxun] {
    height: 100%;
    display: flex;
    flex-direction: column;
}

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

/* ── Content Panel ── */
.content-panel[b-u90g5ulxun] {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 1.5rem;
}

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

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

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

/* ── Back Button ── */
.btn-back[b-u90g5ulxun] {
    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: 2rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: opacity 150ms;
}

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

/* ── Alert Header ── */
.alert-header[b-u90g5ulxun] {
    margin-bottom: 3rem;
}

.severity-badge[b-u90g5ulxun] {
    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-u90g5ulxun] {
    font-variation-settings: 'FILL' 1;
    font-size: 0.75rem;
}

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

@media (min-width: 1024px) {
    .alert-title[b-u90g5ulxun] {
        font-size: 3rem;
    }
}

.alert-subtitle[b-u90g5ulxun] {
    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-u90g5ulxun] {
    font-family: 'JetBrains Mono', monospace;
    color: var(--primary);
    font-weight: 700;
}

.alert-subtitle .client-name[b-u90g5ulxun] {
    font-weight: 600;
    color: var(--on-surface);
}

/* ── Stacktrace Card ── */
.stacktrace-card[b-u90g5ulxun] {
    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-u90g5ulxun] {
    padding: 1rem 1.5rem;
    background-color: var(--bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stacktrace-label[b-u90g5ulxun] {
    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-u90g5ulxun] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--primary);
    transition: opacity 150ms;
    padding: 0;
    display: flex;
    align-items: center;
}

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

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

.stacktrace-body[b-u90g5ulxun] {
    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-u90g5ulxun] {
    white-space: pre-wrap;
    max-height: 400px;
    overflow: hidden;
}

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

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

.btn-expand-stacktrace[b-u90g5ulxun] {
    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-u90g5ulxun] {
    background-color: rgba(255, 255, 255, 0.1);
}

/* ── Mobile spacer ── */
.mobile-spacer[b-u90g5ulxun] {
    height: 3rem;
}

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

/* ── Sidebar ── */
.sidebar[b-u90g5ulxun] {
    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-u90g5ulxun] {
        width: 400px;
        height: 100%;
        border-top: none;
        border-left: 1px solid color-mix(in srgb, var(--outline-variant) 20%, transparent);
    }
}

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

.sidebar-content[b-u90g5ulxun] {
    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-u90g5ulxun]::-webkit-scrollbar {
    display: none;
}

/* ── Details Section ── */
.section-title[b-u90g5ulxun] {
    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-u90g5ulxun] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

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

.detail-label[b-u90g5ulxun] {
    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;
    margin-bottom: 0.25rem;
}

.detail-value-mono[b-u90g5ulxun] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    font-weight: 500;
}

.detail-value-text[b-u90g5ulxun] {
    font-family: var(--font-label);
    font-size: 0.75rem;
}

/* ── Archivo Adjunto ── */
.btn-toggle-imagen[b-u90g5ulxun] {
    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-u90g5ulxun] {
    background-color: color-mix(in srgb, var(--on-surface) 6%, transparent);
}

/* ── Lightbox ── */
.lightbox-overlay[b-u90g5ulxun] {
    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-u90g5ulxun] {
    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-u90g5ulxun] {
    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-u90g5ulxun] {
    background-color: rgba(255, 255, 255, 0.28);
}

/* ── Download Button ── */
.btn-download[b-u90g5ulxun] {
    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-u90g5ulxun] {
    background-color: color-mix(in srgb, var(--primary) 20%, transparent);
}

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

/* ── Screenshot Section ── */
.screenshot-title[b-u90g5ulxun] {
    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-u90g5ulxun] {
    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-u90g5ulxun] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(20%);
    transition: filter 500ms;
}

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

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

.screenshot-overlay-zoom[b-u90g5ulxun] {
    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-u90g5ulxun] {
    opacity: 1;
}

.btn-zoom[b-u90g5ulxun] {
    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-u90g5ulxun] {
    padding: 1.5rem;
    background-color: var(--bg);
    border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 20%, transparent);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    flex-shrink: 0;
}

.btn-archive[b-u90g5ulxun] {
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    background-color: var(--bg);
    color: var(--primary);
    font-family: var(--font-label);
    font-size: 0.875rem;
    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.5rem;
    cursor: pointer;
    transition: background-color 150ms;
}

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

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

.btn-delete:hover[b-u90g5ulxun] {
    opacity: 0.9;
}
/* /Pages/Archivados.razor.rz.scp.css */
/* ── Page Layout ── */
.page-wrapper[b-or1qbpn5cn] {
    min-height: 100vh;
    background-color: var(--surface);
    font-family: var(--font-body);
    color: var(--on-surface);
}

.container[b-or1qbpn5cn] {
    max-width: 1900px;
    margin-left: auto;
    margin-right: auto;
    padding: 2.5rem 1.5rem 5rem;
}

@media (min-width: 768px) {
    .container[b-or1qbpn5cn] {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

/* ── Page Header ── */
.page-header[b-or1qbpn5cn] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 3rem;
    margin-top: 3rem;
}

@media (min-width: 768px) {
    .page-header[b-or1qbpn5cn] {
        flex-direction: row;
        align-items: flex-end;
    }
}

.title[b-or1qbpn5cn] {
    font-size: 2.25rem;
    line-height: 2.5rem;
    font-family: var(--font-headline);
    font-weight: 800;
    letter-spacing: -0.025em;
}

@media (min-width: 768px) {
    .title[b-or1qbpn5cn] {
        font-size: 3rem;
        line-height: 1;
    }
}

.header-actions[b-or1qbpn5cn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

/* ── Action Bar (sticky, Gmail-style) ── */
.action-bar[b-or1qbpn5cn] {
    position: sticky;
    top: 4rem;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 0;
    margin-bottom: 0.75rem;
    background: var(--surface);
    border-bottom: 1px solid var(--outline-variant);
    transition: background var(--transition-base);
}

.action-bar-left[b-or1qbpn5cn] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.selection-label[b-or1qbpn5cn] {
    font-family: var(--font-label);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--on-surface);
}

/* ── Buttons ── */
.btn-secondary[b-or1qbpn5cn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    border-radius: 0.5rem;
    background-color: var(--bg);
    color: var(--primary);
    font-family: var(--font-label);
    font-weight: 700;
    font-size: 0.6rem;
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid color-mix(in srgb, var(--outline-variant) 30%, transparent);
    cursor: pointer;
}

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

    .btn-secondary .material-symbols-outlined[b-or1qbpn5cn] {
        font-size: 1.3rem; /* Ajusta el icono para que no estire el botón hacia arriba */
    }

.btn-danger[b-or1qbpn5cn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    border-radius: 0.5rem;
    background-color: var(--severity-critical);
    color: white;
    font-family: var(--font-label);
    font-weight: 700;
    font-size: 0.875rem;
    transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    cursor: pointer;
}

    .btn-danger:hover:not(:disabled)[b-or1qbpn5cn] {
        opacity: 0.9;
    }

    .btn-danger .material-symbols-outlined[b-or1qbpn5cn] {
        font-size: 1.4rem; /* Ajusta el icono para que no estire el botón hacia arriba */
    }

    .btn-danger:disabled[b-or1qbpn5cn] {
        opacity: 0.3;
        cursor: not-allowed;
    }

.btn-warning[b-or1qbpn5cn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    border-radius: 0.5rem;
    background-color: var(--primary);
    color: white;
    font-family: var(--font-label);
    font-weight: 700;
    font-size: 0.875rem;
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid color-mix(in srgb, var(--outline-variant) 30%, transparent);
    cursor: pointer;
}

    .btn-warning:hover:not(:disabled)[b-or1qbpn5cn] {
        opacity: 0.9;
    }

    .btn-warning .material-symbols-outlined[b-or1qbpn5cn] {
        font-size: 1.3rem; /* Ajusta el icono para que no estire el botón hacia arriba */
    }


/* ── Filter Bar ── */
.filter-bar[b-or1qbpn5cn] {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
    background-color: var(--bg);
    padding: 1rem;
    border-radius: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--outline-variant) 30%, transparent);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

@media (min-width: 768px) {
    .filter-bar[b-or1qbpn5cn] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .filter-bar[b-or1qbpn5cn] {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

.filter-field[b-or1qbpn5cn] {
    position: relative;
}

.filter-icon[b-or1qbpn5cn] {
    position: absolute;
    left: 0.75rem;
    top: 0.625rem;
    font-size: 1rem;
    color: var(--on-surface-variant);
    pointer-events: none;
}

.filter-input[b-or1qbpn5cn] {
    width: 100%;
    padding: 0.5rem 1rem 0.5rem 2.5rem;
    background-color: color-mix(in srgb, var(--surface-container) 50%, transparent);
    color: var(--on-surface);
    border: none;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-family: var(--font-label);
}

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

.filter-select[b-or1qbpn5cn] {
    width: 100%;
    padding: 0.5rem 1rem 0.5rem 2.5rem;
    background-color: color-mix(in srgb, var(--surface-container) 50%, transparent);
    color: var(--on-surface);
    border: none;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-family: var(--font-label);
    appearance: none;
}

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

.filter-date[b-or1qbpn5cn] {
    width: 100%;
    padding: 0.5rem 1rem;
    background-color: color-mix(in srgb, var(--surface-container) 50%, transparent);
    color: var(--on-surface);
    border: none;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-family: var(--font-label);
}

.filter-last-col[b-or1qbpn5cn] {
    display: flex;
    gap: 0.5rem;
}

.btn-clear-filter[b-or1qbpn5cn] {
    padding: 0.5rem;
    color: var(--severity-critical);
    background: transparent;
    border: none;
    border-radius: 0.5rem;
    transition: background-color 150ms;
    cursor: pointer;
}

    .btn-clear-filter:hover[b-or1qbpn5cn] {
        background-color: color-mix(in srgb, var(--severity-critical) 10%, transparent);
    }

/* ── Empty State ── */
.empty-state[b-or1qbpn5cn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 4rem 2rem;
    text-align: center;
    background-color: var(--bg);
    border-radius: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--outline-variant) 30%, transparent);
}

.empty-state-icon[b-or1qbpn5cn] {
    font-size: 3rem;
    color: var(--on-surface-variant);
    opacity: 0.4;
}

.empty-state-title[b-or1qbpn5cn] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--on-surface);
}

.empty-state-text[b-or1qbpn5cn] {
    font-size: 0.875rem;
    color: var(--on-surface-variant);
}

/* ── Error State ── */
.error-state[b-or1qbpn5cn] {
    background-color: color-mix(in srgb, var(--severity-critical) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--severity-critical) 20%, transparent);
    border-radius: 0.75rem;
    padding: 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.error-icon[b-or1qbpn5cn] {
    font-size: 3rem;
    color: var(--severity-critical);
}

.error-text[b-or1qbpn5cn] {
    color: var(--severity-critical);
    font-weight: 700;
}

.btn-retry[b-or1qbpn5cn] {
    background-color: var(--severity-critical);
    color: white;
    padding: 0.5rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
}

/* ── Table ── */
.table-container[b-or1qbpn5cn] {
    background-color: var(--bg);
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    border: 1px solid color-mix(in srgb, var(--outline-variant) 30%, transparent);
    overflow: hidden;
}

.table-scroll[b-or1qbpn5cn] {
    overflow-x: auto;
}

.data-table[b-or1qbpn5cn] {
    width: 100%;
    text-align: left;
    border-collapse: collapse;
    table-layout: fixed;
}

    .data-table thead tr[b-or1qbpn5cn] {
        background-color: color-mix(in srgb, var(--surface-container) 30%, transparent);
        border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 20%, transparent);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-size: 10px;
        font-weight: 700;
        color: var(--on-surface-variant);
    }

.th-checkbox[b-or1qbpn5cn] {
    padding: 0.75rem;
    width: 2.5rem;
    text-align: center;
}

.th-cell[b-or1qbpn5cn] {
    padding: 0.625rem 0.75rem;
    overflow: hidden;
}


.data-table tbody tr[b-or1qbpn5cn] {
    transition: background-color 150ms;
    border-top: 1px solid color-mix(in srgb, var(--outline-variant) 10%, transparent);
}

    .data-table tbody tr:first-child[b-or1qbpn5cn] {
        border-top: none;
    }

    .data-table tbody tr.row-clickable[b-or1qbpn5cn] {
        font-palette: red;
    }

        .data-table tbody tr.row-clickable:hover[b-or1qbpn5cn] {
            background-color: color-mix(in srgb, var(--primary) 4%, transparent);
        }

.td-checkbox[b-or1qbpn5cn] {
    padding: 0.25rem;
    text-align: center;
}

.td-cell[b-or1qbpn5cn] {
    padding: 0.2rem 0.75rem;
    overflow: hidden;
}

.td-main[b-or1qbpn5cn] {
    max-width: 0;
}


.alert-title[b-or1qbpn5cn] {
    color: var(--on-surface);
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: 'Manrope', sans-serif;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 700;
}

.stacktrace-preview[b-or1qbpn5cn] {
    font-family: ui-monospace, monospace;
    font-size: 11px;
    color: var(--on-surface-variant);
    background-color: color-mix(in srgb, var(--surface-container) 50%, transparent);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    margin-top: 0.125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.app-name[b-or1qbpn5cn] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--on-surface-variant);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.client-name[b-or1qbpn5cn] {
    font-size: 10px;
    opacity: 0.6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.timestamp[b-or1qbpn5cn] {
    font-size: 0.7rem;
    font-family: var(--font-label);
    color: var(--on-surface-variant);
    white-space: nowrap;
}


/* ── Pagination ── */
.pagination-footer[b-or1qbpn5cn] {
    padding: 1.25rem;
    background-color: color-mix(in srgb, var(--surface-container) 20%, transparent);
    border-top: 1px solid color-mix(in srgb, var(--outline-variant) 10%, transparent);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pagination-label[b-or1qbpn5cn] {
    font-size: 0.75rem;
    font-family: var(--font-label);
    color: var(--on-surface-variant);
}

.pagination-controls[b-or1qbpn5cn] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.btn-page[b-or1qbpn5cn] {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color 150ms;
}

    .btn-page:hover:not(:disabled)[b-or1qbpn5cn] {
        background-color: var(--surface-container);
    }

    .btn-page:disabled[b-or1qbpn5cn] {
        opacity: 0.3;
        cursor: not-allowed;
    }

.page-number-active[b-or1qbpn5cn] {
    padding: 0.25rem 0.75rem;
    background-color: var(--primary);
    color: var(--on-primary);
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 0.25rem;
}
/* /Pages/Home.razor.rz.scp.css */
/* ── Page Layout ── */
.page-wrapper[b-2gweor9i5r] {
    min-height: 100vh;
    background-color: var(--surface);
    font-family: var(--font-body);
    color: var(--on-surface);
}

.container[b-2gweor9i5r] {
    max-width: 1900px;
    margin-left: auto;
    margin-right: auto;
    padding: 2.5rem 1.5rem 5rem;
}

@media (min-width: 768px) {
    .container[b-2gweor9i5r] {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

/* ── Page Header ── */
.page-header[b-2gweor9i5r] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 3rem;
    margin-top: 3rem;
}

@media (min-width: 768px) {
    .page-header[b-2gweor9i5r] {
        flex-direction: row;
        align-items: flex-end;
    }
}

.title[b-2gweor9i5r] {
    font-size: 2.25rem;
    line-height: 2.5rem;
    font-family: var(--font-headline);
    font-weight: 800;
    letter-spacing: -0.025em;
}

@media (min-width: 768px) {
    .title[b-2gweor9i5r] {
        font-size: 3rem;
        line-height: 1;
    }
}

.header-actions[b-2gweor9i5r] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

/* ── Action Bar (sticky, Gmail-style) ── */
.action-bar[b-2gweor9i5r] {
    position: sticky;
    top: 4rem;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 0;
    margin-bottom: 0.75rem;
    background: var(--surface);
    border-bottom: 1px solid var(--outline-variant);
    transition: background var(--transition-base);
}

.action-bar-left[b-2gweor9i5r] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.selection-label[b-2gweor9i5r] {
    font-family: var(--font-label);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--on-surface);
}

/* ── Buttons ── */
.btn-secondary[b-2gweor9i5r] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    border-radius: 0.5rem;
    background-color: var(--bg);
    color: var(--primary);
    font-family: var(--font-label);
    font-weight: 700;
    font-size: 0.6rem;
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid color-mix(in srgb, var(--outline-variant) 30%, transparent);
    cursor: pointer;
}

.btn-secondary:hover:not(:disabled)[b-2gweor9i5r] {
    background-color: color-mix(in srgb, var(--primary) 10%, transparent);
}
.btn-secondary .material-symbols-outlined[b-2gweor9i5r] {
    font-size: 1.3rem; /* Ajusta el icono para que no estire el botón hacia arriba */
}

.btn-danger[b-2gweor9i5r] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    border-radius: 0.5rem;
    background-color: var(--severity-critical);
    color: white;
    font-family: var(--font-label);
    font-weight: 700;
    font-size: 0.875rem;
    transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    cursor: pointer;
}

.btn-danger:hover:not(:disabled)[b-2gweor9i5r] {
    opacity: 0.9;
}
    .btn-danger .material-symbols-outlined[b-2gweor9i5r] {
        font-size: 1.4rem; /* Ajusta el icono para que no estire el botón hacia arriba */
    }

.btn-danger:disabled[b-2gweor9i5r] {
    opacity: 0.3;
    cursor: not-allowed;
}

.btn-warning[b-2gweor9i5r] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    border-radius: 0.5rem;
    background-color: var(--primary);
    color: white;
    font-family: var(--font-label);
    font-weight: 700;
    font-size: 0.875rem;
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid color-mix(in srgb, var(--outline-variant) 30%, transparent);
    cursor: pointer;
}

.btn-warning:hover:not(:disabled)[b-2gweor9i5r] {
    opacity: 0.9;
}

.btn-warning .material-symbols-outlined[b-2gweor9i5r] {
    font-size: 1.3rem; /* Ajusta el icono para que no estire el botón hacia arriba */
}


/* ── Filter Bar ── */
.filter-bar[b-2gweor9i5r] {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
    background-color: var(--bg);
    padding: 1rem;
    border-radius: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--outline-variant) 30%, transparent);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

@media (min-width: 768px) {
    .filter-bar[b-2gweor9i5r] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .filter-bar[b-2gweor9i5r] {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

.filter-field[b-2gweor9i5r] {
    position: relative;
}

.filter-icon[b-2gweor9i5r] {
    position: absolute;
    left: 0.75rem;
    top: 0.625rem;
    font-size: 1rem;
    color: var(--on-surface-variant);
    pointer-events: none;
}

.filter-input[b-2gweor9i5r] {
    width: 100%;
    padding: 0.5rem 1rem 0.5rem 2.5rem;
    background-color: color-mix(in srgb, var(--surface-container) 50%, transparent);
    color: var(--on-surface);
    border: none;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-family: var(--font-label);
}

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

.filter-select[b-2gweor9i5r] {
    width: 100%;
    padding: 0.5rem 1rem 0.5rem 2.5rem;
    background-color: color-mix(in srgb, var(--surface-container) 50%, transparent);
    color: var(--on-surface);
    border: none;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-family: var(--font-label);
    appearance: none;
}

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

.filter-date[b-2gweor9i5r] {
    width: 100%;
    padding: 0.5rem 1rem;
    background-color: color-mix(in srgb, var(--surface-container) 50%, transparent);
    color: var(--on-surface);
    border: none;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-family: var(--font-label);
}

.filter-last-col[b-2gweor9i5r] {
    display: flex;
    gap: 0.5rem;
}

.btn-clear-filter[b-2gweor9i5r] {
    padding: 0.5rem;
    color: var(--severity-critical);
    background: transparent;
    border: none;
    border-radius: 0.5rem;
    transition: background-color 150ms;
    cursor: pointer;
}

.btn-clear-filter:hover[b-2gweor9i5r] {
    background-color: color-mix(in srgb, var(--severity-critical) 10%, transparent);
}

/* ── Empty State ── */
.empty-state[b-2gweor9i5r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 4rem 2rem;
    text-align: center;
    background-color: var(--bg);
    border-radius: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--outline-variant) 30%, transparent);
}

.empty-state-icon[b-2gweor9i5r] {
    font-size: 3rem;
    color: var(--on-surface-variant);
    opacity: 0.4;
}

.empty-state-title[b-2gweor9i5r] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--on-surface);
}

.empty-state-text[b-2gweor9i5r] {
    font-size: 0.875rem;
    color: var(--on-surface-variant);
}

/* ── Error State ── */
.error-state[b-2gweor9i5r] {
    background-color: color-mix(in srgb, var(--severity-critical) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--severity-critical) 20%, transparent);
    border-radius: 0.75rem;
    padding: 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.error-icon[b-2gweor9i5r] {
    font-size: 3rem;
    color: var(--severity-critical);
}

.error-text[b-2gweor9i5r] {
    color: var(--severity-critical);
    font-weight: 700;
}

.btn-retry[b-2gweor9i5r] {
    background-color: var(--severity-critical);
    color: white;
    padding: 0.5rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
}

/* ── Table ── */
.table-container[b-2gweor9i5r] {
    background-color: var(--bg);
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    border: 1px solid color-mix(in srgb, var(--outline-variant) 30%, transparent);
    overflow: hidden;
}

.table-scroll[b-2gweor9i5r] {
    overflow-x: auto;
}

.data-table[b-2gweor9i5r] {
    width: 100%;
    text-align: left;
    border-collapse: collapse;
    table-layout: fixed;
}

.data-table thead tr[b-2gweor9i5r] {
    background-color: color-mix(in srgb, var(--surface-container) 30%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 20%, transparent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 10px;
    font-weight: 700;
    color: var(--on-surface-variant);
}

.th-checkbox[b-2gweor9i5r] {
    padding: 0.75rem;
    width: 2.5rem;
    text-align: center;
}

.th-cell[b-2gweor9i5r] {
    padding: 0.625rem 0.75rem;
    overflow: hidden;
}


.data-table tbody tr[b-2gweor9i5r] {
    transition: background-color 150ms;
    border-top: 1px solid color-mix(in srgb, var(--outline-variant) 10%, transparent);
}

.data-table tbody tr:first-child[b-2gweor9i5r] {
    border-top: none;
}

.data-table tbody tr.row-clickable[b-2gweor9i5r] {

    font-palette: red;
}

.data-table tbody tr.row-clickable:hover[b-2gweor9i5r] {
    background-color: color-mix(in srgb, var(--primary) 4%, transparent);
}

.td-checkbox[b-2gweor9i5r] {
    padding: 0.25rem;
    text-align: center;
}

.td-cell[b-2gweor9i5r] {
    padding: 0.2rem 0.75rem;
    overflow: hidden;
}

.td-main[b-2gweor9i5r] {
    max-width: 0;
}


.alert-title[b-2gweor9i5r] {
    color: var(--on-surface);
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: 'Manrope', sans-serif;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 700;
}

.stacktrace-preview[b-2gweor9i5r] {
    font-family: ui-monospace, monospace;
    font-size: 11px;
    color: var(--on-surface-variant);
    background-color: color-mix(in srgb, var(--surface-container) 50%, transparent);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    margin-top: 0.125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.app-name[b-2gweor9i5r] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--on-surface-variant);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.client-name[b-2gweor9i5r] {
    font-size: 10px;
    opacity: 0.6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.timestamp[b-2gweor9i5r] {
    font-size: 0.7rem;
    font-family: var(--font-label);
    color: var(--on-surface-variant);
    white-space: nowrap;
}


/* ── Pagination ── */
.pagination-footer[b-2gweor9i5r] {
    padding: 1.25rem;
    background-color: color-mix(in srgb, var(--surface-container) 20%, transparent);
    border-top: 1px solid color-mix(in srgb, var(--outline-variant) 10%, transparent);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pagination-label[b-2gweor9i5r] {
    font-size: 0.75rem;
    font-family: var(--font-label);
    color: var(--on-surface-variant);
}

.pagination-controls[b-2gweor9i5r] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.btn-page[b-2gweor9i5r] {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color 150ms;
}

.btn-page:hover:not(:disabled)[b-2gweor9i5r] {
    background-color: var(--surface-container);
}

.btn-page:disabled[b-2gweor9i5r] {
    opacity: 0.3;
    cursor: not-allowed;
}

.page-number-active[b-2gweor9i5r] {
    padding: 0.25rem 0.75rem;
    background-color: var(--primary);
    color: var(--on-primary);
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 0.25rem;
}
/* /Pages/Login.razor.rz.scp.css */
/* ── Page ── */
.login-page[b-vkhfcknljy] {
    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-vkhfcknljy] {
    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-inner[b-vkhfcknljy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
}

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

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

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

.login-tagline[b-vkhfcknljy] {
    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-vkhfcknljy] {
        display: block;
    }
}

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

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

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

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

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

.login-title[b-vkhfcknljy] {
    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-vkhfcknljy] {
    color: var(--on-surface-variant);
    line-height: 1.6;
    font-size: 1rem;
}

/* ── Card ── */
.login-card[b-vkhfcknljy] {
    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-vkhfcknljy] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

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

.login-label[b-vkhfcknljy] {
    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-vkhfcknljy] {
    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-vkhfcknljy]::placeholder {
    color: color-mix(in srgb, var(--on-surface-variant) 30%, transparent);
}

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

/* ── Error ── */
.login-error[b-vkhfcknljy] {
    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-vkhfcknljy 0.3s ease-in-out;
}

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

@keyframes login-shake-b-vkhfcknljy {
    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-vkhfcknljy] {
    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-vkhfcknljy] {
    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-vkhfcknljy] {
    transform: scale(0.97);
}

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

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

/* ── Loading spinner ── */
.login-spinner[b-vkhfcknljy] {
    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-vkhfcknljy 0.6s linear infinite;
    flex-shrink: 0;
}

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

/* ── Footer ── */
.login-footer[b-vkhfcknljy] {
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    opacity: 0.4;
}

.login-footer-label[b-vkhfcknljy] {
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
}

.login-footer-divider[b-vkhfcknljy] {
    height: 1px;
    width: 3rem;
    background-color: var(--on-surface-variant);
}

/* ── Decoraciones de fondo ── */
.login-deco-right[b-vkhfcknljy] {
    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-vkhfcknljy] {
    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;
}
/* /Pages/Suscripciones.razor.rz.scp.css */
/* --- Contenedores de Estado --- */
.loading-container[b-o8hw1p1v8j], .error-container[b-o8hw1p1v8j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
}

.icon-error-large[b-o8hw1p1v8j] {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: #b3261e;
    opacity: 0.75;
}

.text-error-msg[b-o8hw1p1v8j] {
    margin-bottom: 1.5rem;
    color: var(--on-surface-variant);
}

/* --- Layout Principal --- */
.container-suscripciones[b-o8hw1p1v8j] {
    padding: 2rem 1.5rem 3rem;
    max-width: 64rem;
    margin: 0 auto;
    min-height: 100vh;
}

.header-page[b-o8hw1p1v8j] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .header-page[b-o8hw1p1v8j] {
        flex-direction: row;
        align-items: flex-end;
    }
}

.header-info[b-o8hw1p1v8j] {
    max-width: 36rem;
}

.header-title[b-o8hw1p1v8j] {
    font-size: 2.25rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    letter-spacing: -0.025em;
    margin-top: 2rem;
    color: var(--on-surface);
}

.header-subtitle[b-o8hw1p1v8j] {
    color: var(--on-surface-variant);
    font-size: 0.9rem;
}

.header-actions[b-o8hw1p1v8j] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* --- Botones --- */
.btn-primary[b-o8hw1p1v8j], .btn-secondary[b-o8hw1p1v8j], .btn-outline[b-o8hw1p1v8j] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: 0.5rem;
    font-weight: bold;
    font-size: 0.875rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}

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

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

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

.btn-secondary[b-o8hw1p1v8j] {
    background-color: var(--surface-container);
    color: var(--on-surface-variant);
}

    .btn-secondary:hover:not(:disabled)[b-o8hw1p1v8j] {
        background-color: var(--outline-variant);
    }

    .btn-secondary:disabled[b-o8hw1p1v8j] {
        opacity: 0.5;
        cursor: not-allowed;
    }

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

    .btn-outline:hover[b-o8hw1p1v8j] {
        background-color: var(--surface-container);
        border-color: var(--primary);
        color: var(--primary);
    }

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

/* --- Banners de feedback --- */
.banner-success[b-o8hw1p1v8j], .banner-error[b-o8hw1p1v8j] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1.25rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
}

.banner-success[b-o8hw1p1v8j] {
    background-color: var(--success-bg);
    color: var(--success);
    border: 1px solid rgba(110, 231, 183, 0.45);
}

.banner-error[b-o8hw1p1v8j] {
    background-color: var(--severity-critical-bg);
    color: var(--severity-critical);
    border: 1px solid rgba(252, 165, 165, 0.45);
}

/* --- Barra de Filtros --- */
.filter-bar[b-o8hw1p1v8j] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
}

@media (min-width: 640px) {
    .filter-bar[b-o8hw1p1v8j] {
        flex-direction: row;
        align-items: center;
    }
}

.filter-group[b-o8hw1p1v8j] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
}

.search-wrapper[b-o8hw1p1v8j] {
    position: relative;
    width: 100%;
}

@media (min-width: 640px) {
    .search-wrapper[b-o8hw1p1v8j] {
        width: 18rem;
    }
}

.search-icon[b-o8hw1p1v8j] {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.5;
    font-size: 1.1rem;
    pointer-events: none;
    color: var(--on-surface-variant);
}

.input-search[b-o8hw1p1v8j] {
    width: 100%;
    padding: 0.55rem 1rem 0.55rem 2.5rem;
    border: 1px solid var(--outline-variant);
    border-radius: 0.8rem;
    background: var(--bg);
    color: var(--on-surface);
    font-size: 0.875rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .input-search:focus[b-o8hw1p1v8j] {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
    }

    .input-search[b-o8hw1p1v8j]::placeholder {
        color: var(--on-surface-variant);
        opacity: 0.7;
    }

.select-wrapper[b-o8hw1p1v8j] {
    position: relative;
}

.select-custom[b-o8hw1p1v8j] {
    padding: 0.55rem 1.5rem 0.55rem 0.875rem;
    background-color: var(--surface-container);
    border-radius: 0.5rem;
    border: 1px solid var(--outline-variant);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--on-surface);
    transition: border-color 0.2s ease;
}

    .select-custom:focus[b-o8hw1p1v8j] {
        outline: none;
        border-color: var(--primary);
    }

.filter-stats[b-o8hw1p1v8j] {
    text-align: right;
    min-width: 140px;
    flex-shrink: 0;
}

.stats-label[b-o8hw1p1v8j] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--on-surface-variant);
    opacity: 0.7;
    display: block;
    margin-bottom: 0.1rem;
}

.stats-count[b-o8hw1p1v8j] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--on-surface-variant);
}

/* --- Lista y Cards --- */
.apps-list[b-o8hw1p1v8j] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.app-card[b-o8hw1p1v8j] {
    background: var(--bg);
    padding: 1.25rem 1.5rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    border: 1px solid var(--outline-variant);
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    user-select: none;
    flex-wrap: wrap;
}

    .app-card:hover[b-o8hw1p1v8j] {
        border-color: var(--primary);
        box-shadow: var(--shadow-md);
        transform: translateY(-1px);
    }

    .app-card.is-active[b-o8hw1p1v8j] {
        border-color: var(--primary);
        background-color: var(--primary-light);
        box-shadow: 0 0 0 1px var(--primary), var(--shadow-sm);
    }

        .app-card.is-active:hover[b-o8hw1p1v8j] {
            box-shadow: 0 0 0 1px var(--primary), var(--shadow-md);
        }

.app-main-info[b-o8hw1p1v8j] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.icon-box[b-o8hw1p1v8j] {
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-light);
    color: var(--primary-dark);
    border-radius: 0.625rem;
    flex-shrink: 0;
    transition: background-color 0.2s ease, color 0.2s ease;
}

    .icon-box.active[b-o8hw1p1v8j] {
        background: var(--primary);
        color: var(--on-primary);
    }

.app-name[b-o8hw1p1v8j] {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 0.1rem;
    color: var(--on-surface);
}

.app-client[b-o8hw1p1v8j] {
    font-size: 0.8rem;
    margin: 0;
    color: var(--on-surface-variant);
}

.app-status-area[b-o8hw1p1v8j] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

/* --- Badges --- */
.badge[b-o8hw1p1v8j] {
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.badge-success[b-o8hw1p1v8j] {
    background: var(--success-bg);
    color: var(--success);
    border: 1px solid rgba(110, 231, 183, 0.45);
}

.badge-neutral[b-o8hw1p1v8j] {
    background: var(--surface-container);
    color: var(--on-surface-variant);
    border: 1px solid var(--outline-variant);
    opacity: 0.75;
}

/* --- Estado vacío --- */
.empty-state[b-o8hw1p1v8j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    border: 1px dashed var(--outline-variant);
    border-radius: 0.75rem;
    background: var(--bg);
}

.empty-state-icon[b-o8hw1p1v8j] {
    font-size: 3rem;
    color: var(--on-surface-variant);
    opacity: 0.4;
    margin-bottom: 1rem;
}

.empty-state-title[b-o8hw1p1v8j] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--on-surface);
    margin-bottom: 0.25rem;
}

.empty-state-subtitle[b-o8hw1p1v8j] {
    font-size: 0.875rem;
    color: var(--on-surface-variant);
}

/* --- Nivel Pills --- */
.nivel-pills[b-o8hw1p1v8j] {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
    align-items: center;
}

.nivel-pill[b-o8hw1p1v8j] {
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
    /* Estado inactivo: apagado */
    background: var(--surface-container);
    color: var(--on-surface-variant);
    opacity: 0.5;
}

    .nivel-pill:hover[b-o8hw1p1v8j] {
        opacity: 0.85;
    }

    /* Info — azul */
    .nivel-pill.nivel-info.active[b-o8hw1p1v8j] {
        background: var(--info-bg);
        color: var(--info);
        border-color: rgba(59, 130, 246, 0.35);
        opacity: 1;
    }

    /* Warning — ámbar suave */
    .nivel-pill.nivel-warning.active[b-o8hw1p1v8j] {
        background: var(--severity-warning-bg);
        color: var(--primary-dark);
        border-color: rgba(245, 158, 11, 0.35);
        opacity: 1;
    }

    /* Error — ámbar */
    .nivel-pill.nivel-error.active[b-o8hw1p1v8j] {
        background: var(--severity-error-bg);
        color: var(--primary-dark);
        border-color: rgba(245, 158, 11, 0.45);
        opacity: 1;
    }

    /* Critical — rojo */
    .nivel-pill.nivel-critical.active[b-o8hw1p1v8j] {
        background: var(--severity-critical-bg);
        color: var(--severity-critical);
        border-color: rgba(239, 68, 68, 0.35);
        opacity: 1;
    }

/* --- Dark mode overrides --- */
.dark-mode .app-card.is-active[b-o8hw1p1v8j] {
    background-color: rgba(245, 158, 11, 0.08);
}

.dark-mode .icon-box:not(.active)[b-o8hw1p1v8j] {
    color: var(--primary);
}

.dark-mode .btn-primary[b-o8hw1p1v8j] {
    background-color: var(--primary-hover);
    box-shadow: none;
}