/* Gestión: global rules (design tokens come from ui/shared, always as var(--...)). */
body { margin: 0; }
h1:focus { outline: none; }

.validation-message { color: var(--color-danger); }

.blazor-error-boundary {
    background: var(--color-danger-tint);
    border: var(--rule-strong) solid var(--color-danger);
    color: var(--color-text);
    padding: var(--space-4);
}
.blazor-error-boundary::after { content: "Se ha producido un error."; }

#blazor-error-ui {
    background: var(--color-warning-tint);
    color: var(--color-text);
    font-family: var(--font-body);
    border-top: var(--rule-strong) solid var(--color-warning);
    bottom: 0;
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: var(--space-2) var(--space-5);
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: var(--space-3); top: var(--space-2); }

/* Authenticator QR: white frame in both themes so phone cameras read it. */
.gs-qr-figure { margin: var(--space-2) 0 var(--space-4) 0; display: inline-block; padding: var(--space-3); background: var(--color-raised); border: 1px solid var(--color-line); }
.gs-qr-figure svg { display: block; width: 200px; height: 200px; max-width: 100%; }
.gs-qr-key { overflow-wrap: anywhere; word-break: break-all; }

/* Narrow single-column account forms. */
.gs-narrow { max-width: 420px; }
.gs-narrow form > * + *, .gs-narrow > * + * { margin-top: var(--space-4); }
.gs-narrow .dx-banner + form { margin-top: var(--space-4); }
.gs-muted { color: var(--color-text-muted); }
.gs-check-row { display: flex; align-items: center; gap: var(--space-2); min-height: var(--target-min); }
.gs-recovery-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--space-2); margin: var(--space-3) 0; }
.gs-recovery-codes code { display: block; padding: var(--space-2) var(--space-3); background: var(--color-surface); font-variant-numeric: tabular-nums; }
.gs-banner-list { margin: var(--space-1) 0 0 0; padding-left: var(--space-5); }
.gs-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.gs-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
/* La rejilla de la página no crece con una tabla ancha: la tabla se desplaza dentro de su contenedor (390 px). */
.dx-page { grid-template-columns: minmax(0, 1fr); }
.dx-page .dx-estado { white-space: normal; }
.gs-link-code { overflow-wrap: anywhere; word-break: break-all; display: block; padding: var(--space-3); background: var(--color-surface); }