/* Lo propio de la consola de Ariadne (prefijo `ar-`): solo lo que no está en el ui-kit. Los colores, con los tokens
   de app.css; el magenta de Ariadne solo identifica la aplicación (lo pone el kit en la barra), no se usa aquí. */
.ar-main { padding: calc(var(--ov-sh-head, 156px) + 16px) 16px 32px; max-width: 1100px; }
.ar-card { background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e4e8ec); border-radius: 10px; padding: 20px 24px; }
.ar-card h1 { font-size: 20px; margin: 0 0 12px; }
.ar-muted { color: var(--color-text-muted, #6b7280); }
.ar-warning { padding: 10px 12px; border-left: 4px solid var(--color-warning, #c98a00); background: var(--color-warning-soft, #fff7e0); border-radius: 6px; }
.ar-signin { max-width: 520px; margin: 80px auto 0; text-align: center; }
.ar-button { display: inline-block; margin-top: 12px; padding: 8px 18px; border-radius: 8px; background: var(--color-primary, #1f6feb); color: #fff; text-decoration: none; }
.ar-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ar-steps .ar-mark { display: inline-block; width: 22px; font-weight: 600; }
.ar-steps .ar-ok .ar-mark { color: var(--color-success, #1a7f37); }
@media (max-width: 900px) { .ar-main { padding-top: calc(var(--ov-sh-head, 116px) + 12px); } }