/* /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/Layout/MainLayout.razor.rz.scp.css */
/* ── App Header ── */
.app-header[b-938jutkesy] {
    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-938jutkesy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    height: 4rem;
    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[b-938jutkesy] {
    height: 32px;
}

.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: 4rem;
    z-index: 49;
}

.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;
    }
/* /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/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 */
/* loading-container, error-container, icon-error-large, text-error-msg,
   page-header, page-title, page-subtitle, page-header-actions, search-wrapper, search-icon,
   input-search, empty-state, empty-state-icon, empty-state-title → app.css */

.btn-back[b-9q9kuoi17y] {
    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-9q9kuoi17y] { opacity: 0.75; }

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

/* --- Layout Principal --- */
.container-aplicaciones[b-9q9kuoi17y] {
    padding: 6.5rem 1.5rem 3rem;
    max-width: 64rem;
    margin: 0 auto;
    min-height: 100vh;
    margin-bottom: 4rem;
}

@media (min-width: 768px) {
    .container-aplicaciones[b-9q9kuoi17y] {
        padding-top: 5rem;
    }
}

/* --- Barra de Filtros --- */
.filter-bar[b-9q9kuoi17y] {
    margin-bottom: 1.5rem;
}

.search-wrapper[b-9q9kuoi17y] {
    max-width: 25rem;
}

/* --- Botones --- */
.btn-primary[b-9q9kuoi17y] {
    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;
    background-color: var(--primary);
    color: var(--on-primary);
    transition: all 0.2s ease;
}

.btn-primary:hover[b-9q9kuoi17y] {
    background-color: var(--primary-hover);
    transform: translateY(-1px);
}

.btn-secondary[b-9q9kuoi17y] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: 0.5rem;
    font-weight: bold;
    font-size: 0.875rem;
    cursor: pointer;
    background-color: transparent;
    color: var(--primary);
    border: 1px solid var(--primary);
    transition: all 0.2s ease;
}

.btn-secondary:hover[b-9q9kuoi17y] {
    background-color: var(--primary-light);
    transform: translateY(-1px);
}

/* --- Cards de Aplicación --- */
.apps-list[b-9q9kuoi17y] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.app-card[b-9q9kuoi17y] {
    background: var(--bg);
    padding: 1.25rem;
    border-radius: 0.85rem;
    border: 1px solid var(--outline-variant);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    transition: all 0.2s ease;
}

@media (min-width: 850px) {
    .app-card[b-9q9kuoi17y] {
        flex-direction: row;
        align-items: center;
    }
}

.app-card:hover[b-9q9kuoi17y] {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

.app-main-info[b-9q9kuoi17y] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 0 0 auto;
    min-width: 0;
}

@media (min-width: 850px) {
    .app-main-info[b-9q9kuoi17y] {
        width: 35%;
    }
}

.icon-box[b-9q9kuoi17y] {
    width: 2.75rem;
    height: 2.75rem;
    background: var(--primary-light);
    color: var(--primary-dark);
    border-radius: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.app-name[b-9q9kuoi17y] {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    color: var(--on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-client[b-9q9kuoi17y] {
    font-size: 0.85rem;
    margin: 0;
    color: var(--on-surface-variant);
    opacity: 0.7;
}

.app-credentials[b-9q9kuoi17y] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

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

.credential-label[b-9q9kuoi17y] {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--on-surface-variant);
    width: 3.5rem;
    flex-shrink: 0;
    opacity: 0.6;
}

.code-badge[b-9q9kuoi17y] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    background: var(--surface-container);
    padding: 0.25rem 0.6rem;
    border-radius: 0.4rem;
    border: 1px solid var(--outline-variant);
    color: var(--on-surface);
}

.code-truncate-wrapper[b-9q9kuoi17y] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.code-truncate[b-9q9kuoi17y] {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-copy[b-9q9kuoi17y] {
    background: none;
    border: none;
    padding: 0.4rem;
    cursor: pointer;
    color: var(--on-surface-variant);
    border-radius: 0.4rem;
    display: flex;
    align-items: center;
    transition: all 0.15s;
}

.btn-copy:hover[b-9q9kuoi17y] {
    background: var(--primary-light);
    color: var(--primary);
}

.btn-copy .material-symbols-outlined[b-9q9kuoi17y] {
    font-size: 1.1rem;
}
/* /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-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);
}
/* /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, page-header, title, 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; }

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

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

/* ── 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;
    }
}

/* ── 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;
}

/* ── Botón bookmark (ver más 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);
}
/* /Pages/Admin/AdminUsuarioDetalle.razor.rz.scp.css */
/* ── Page wrapper ── */

.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;
    }
}

/* ── Back button ── */

.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 ── */

.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 ── */

.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;
}

/* ── Empty / error states ── */

.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 ── */

.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;
}

/* ── Subscription list ── */

.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 (4 chips fijos) ── */

.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;
}

/* Activo: colores reales */
.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);
}

/* Inactivo: gris tenue, para mantener el espacio */
.nivel-chip.inactivo[b-03ts2auc7w] {
    background-color: transparent;
    color: var(--outline-variant);
    border: 1px solid var(--outline-variant);
    opacity: 0.45;
}

/* En móvil: ocultar chips inactivos para ahorrar espacio */
@media (max-width: 480px) {
    .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;
    }
}
/* /Pages/AlertaDetalle.razor.rz.scp.css */
/* ── Error State ── */
.error-wrapper[b-4r12gcz0b3] {
    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-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 - 4rem);
    margin-top: 4rem;
}

/* Desktop: recuperar el layout split con scroll propio por panel */
@media (min-width: 768px) {
    .page-wrapper[b-4r12gcz0b3] {
        height: calc(100dvh - 4rem);
        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: 1.5rem;
}

@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: 2rem;
    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;
    }
}
@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: 1.5rem;
    background-color: var(--bg);
    border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 20%, transparent);
    display: grid;
    gap: 0.75rem;
    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.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-4r12gcz0b3] {
    background-color: color-mix(in srgb, var(--primary) 10%, transparent);
}

.btn-delete[b-4r12gcz0b3] {
    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-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.75rem 0.5rem;
    border-radius: 0.75rem;
    background-color: var(--bg);
    color: var(--on-surface-variant);
    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.375rem;
    cursor: pointer;
    transition: background-color 150ms, color 150ms, border-color 150ms;
    white-space: nowrap;
}

.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.75rem 1rem;
    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.875rem;
    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.5rem;
    cursor: pointer;
    transition: background-color 150ms;
}

.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;
}
/* /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 */
/* /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-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;
}

/* ── 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[b-1pyz0j4jxl] {
    height: 50px;
    display: block; 
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem;
}
/* /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 */

/* ── Bookmark button ── */
.btn-icon[b-coknb18vey] {
    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;
}
/* /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;
}

@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;
}


/* --- 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;
}

.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);
}

.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-main-info[b-0muzgzyxmm] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.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);
}

.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);
}

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

.app-status-area[b-0muzgzyxmm] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    min-width: 0;
}

/* --- 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;
}

/* --- 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;
    }

    .app-status-area[b-0muzgzyxmm] {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .horario-add-controls[b-0muzgzyxmm] {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-add-time[b-0muzgzyxmm] {
        justify-content: center;
    }

    .suscripciones-section-header[b-0muzgzyxmm] {
        flex-direction: column;
    }

    .suscripciones-actions[b-0muzgzyxmm] {
        width: 100%;
        justify-content: flex-end;
    }
}

/* --- 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);
}