/* device-guard.css — pantalla de bloqueo cuando la ventana es muy angosta.
   El umbral (px) vive en js/device-guard.js (MIN_WIDTH_PX), unica fuente de verdad.
   Solo tokens CSS: combina con los 6 temas. */

.device-guard {
    position: fixed;
    inset: 0;
    z-index: 2000; /* sobre todo, incl. #blazor-error-ui (1000) */
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background: var(--bg);
    color: var(--text);
}

.device-guard__card {
    display: grid;
    justify-items: center;
    gap: 1rem;
    max-width: 30rem;
    text-align: center;
    padding: 2rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.device-guard__mark {
    width: 5rem;
    height: 5rem;
    display: grid;
    place-items: center;
    border-radius: 1.5rem;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
    color: var(--accent-contrast);
    font-weight: 800;
    font-size: 2rem;
}

.device-guard__title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 600;
}

.device-guard__lead {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.5;
}

.device-guard__hint {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-faint);
}